JavaScriptを書く
//main.js
<script src="js/main.js"></script>
window.onload=function(){
//</html>までが終わった段階で自動的に動く
}
function fc(){
//イベントが起きた時に動作する
//<body>〜</body>の中
<input type="button" onClick="fc()" />
}
DOMツリー
DOMツリーって？
DOM（Document Object Model）
- HTMLドキュメントの構造を記述するもので、これを使ってブラウザとのやり取りを行い、表示をコントロールする。
DOMのgetメソッド
tx=document.body.from.input.value;
- DOMの一群には「getメソッド」が用意されており、これによりHTML要素を素早く指定することができる。(よく使われる一例。)
- ただし、idなので一つ一つ指定しなければならない。
idを使った時
tx=document.getElementById("tx1");
classを使った時
<form〜>
<input type="text" id="tx1" class="c1" />
<input type="text" id="tx2" class="c1" />
</body>
</html>
classを使った場合は一気に取得できる。(c1を指定)
tx=document.getElementsByClassName("c1");
tx[0]→id="tx1"
tx[1]→id="tx2"
inputを指定
tx=document.getElementsByTagName("input");
これらを使ってgetmethod
<input type="text" id="tx1" class="c1" name="c1" />
<input type="text" id="tx2" class="c1" name="c1" />
tx=document.getElementsByName("c1");
ツリー状に展開
- ドット(.)で繋ぐことで使用できる。(inputを入れなくて良い)
input type
value
id
name
size
style //<input type="text" style="height:15px;" />
- textboxをターゲットとする時,プログラムが動くとボタンになる。
(ex)
document.getElementById("tx1").type="button";
.id="tx3";
.size="50";
.style.スタイルシートのプロパティを書く=値+"単位";
- ボタンを押すとtextboxの左余白が150pxになる
document.getElementById("tx1").style.left="150px";
- ボタンを押すと文字色が緑になる
document.getElementById("tx1").style.color="green";
- background-imageのような時マイナスと認識されないために
document.getElementById("tx1").style.backgroundImage="images/p1.png";