0729 JavaScript: DOM
Ajax
非同期通信を利用し、動的にページの一部を書き換える
DOM: Document Object Model
ドキュメント内の任意の要素にアクセスする仕組み
IDを指定して要素を取得
document.getElementById( ‘ID名’ );
ex
<head>
<title>a</title>
<script>
function setValue(){
var elm = document.getElementById('tx1');
elm.value = 'Hello!'; //valueはbodyのinput内のvalueを指す
}
</script>
</head>
<body>
<input id="tx1" type="text">
//(もしvalueに文字列を指定しておくとクリック後にそれがscript指定の文字列に置き換わる)
<input id="tx2" type="text">
//ボタンをクリックするとフォームのtx1にHello!を表示
<button onclick="setValue();">クリック</button>
</body>
この画面が表示されて
クリックするとフォームに文字が入力される
◎おさらい
input要素：formを構成する部品を作成する要素
<input type=”***” name=”部品の名前” value=”送信の値”>
***に入る一例
“text” １行テキストボックス
“checkbox” チェックボックス
“radio” ラジオボタン
“button” 汎用ボタン
“image” 画像のボタン(srcで参照、altが必須)
CSSクラスの変更
要素.className = ’CSSクラス名’
要素の中身を書き換える
要素.innerHTML = 文字列;
ex
document.getElementById( ‘hoge’ ).innerHTML
| | ( p部分全体を指す )
<p id=”hoge”>文章<a href = “xxx.html”>リンク</a></p>
ランダム表示
Math.floor(Math.random() * 変数.length);
