読者です 読者をやめる 読者になる 読者になる

ねっとぱんだ

webdesignとprogramingの勉強ブログ。

javasriptでDOMへの書き込みなど Todays code 3/14

Javascript

毎日1つ以上、コードの反復練習。

今日練習したコード

confirmでtrueならstyleが書き出される。

<script>// 
var x=window.confirm("背景に色を付ける");
if(x==true){
document.write("\
<style>\
body{background:#f00;}\
</style>\
");
}
</script>

・confirm 直訳:確認する

デバック方法

alert();

alertで変数を呼び出せばfalseかtrueか等が分かる。

onClick

<h1 onclick="alert('panda')">click!</h1>

・h1をクリックするとalertが現れる。

・この場合文字列は"ではなく'で囲まないとerror


タグ内に2つ以上書く

<h1 onClick="x=prompt('write panda');
alert(x);">click!</h1>

javascriptで使えるイベント

onClick
クリックしたとき
onDblclick
ダブルクリックされたとき
onKeyDown
キーが押し下げられたとき
onKeyPress
キーが押されたとき
onKeyup
押されていたキーが上がったとき
onMouseDown
マウスボタンが押し下げられたとき
onMouseUp
押されていたマウスのボタンがあがったとき/dd>
onMouseOver
マウスカーソルが領域に入ったとき
onMouseOut
マウスカーソルが領域から出たとき
onMouseMove
マウスカーソルが動いたとき
onLoad
読み込みが完了したとき
onUnload
別のページに移動する前
onFocus
入力フォーカスを得た
onBlur
入力フォーカスが外れたとき
onSubmit
送信ボタンが押されて送信される直前
onReset
リセットボタンが押されてリセットされる直前
onChange
セレクトボックスなどの選択項目が変化したとき
onSelect
セレクトボックスなどの選択項目が選択されたとき
onResize
サイズを変更されたとき
onMove
移動したとき
onDragDrop
ドラッグアンドドロップされたとき
onAbort
読み込みが中止されたとき
onError
エラーが発生したとき

関数にしたものをタグ内で呼び出す

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>a</title>
<script>
function a(){
x=prompt("入力して")
alert(x);
}
</script>
</head>
<body>
<header>
<h1 onClick="a();">click</h1>
<p>click up column</p>
</header>
</body>
</html>

関数に引数を渡す

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>a</title>
<script>
function a(b){//引数bを指定
alert(b);//bに代入された値をalertする
}
</script>
</head>
<body>
<h1>click under button</h1>
<button onClick="a('black & white')">panda</button>
<!--関数a(b)の引数bにblack & whiteを渡す-->
<button onClick="a('black & yellow')">tiger</button>
<!--関数a(b)の引数bにblack & yellowを渡す-->
</body>
</html>

・pandaボタンを押せばblack & white、tigerボタンを押せばblack & yellowが表示される。

Nodeを追加

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>a</title>
<script>
function addNode(){
/*addNodeという関数を作る。*/
var child=document.createElement("p");
/*pを新たに作る変数child*/
child.innerHTML="●○panda○●";
/*childの中に●○panda○●と書き込む*/
var parnet=document.getElementsByTagName("div").item(0);
/*一番最初のdiv( item(0) )を指定する変数parnet*/
parnet.appendChild(child);
/*parnetの子ノードリストの末尾にchildを追加*/
}
</script>
</head>
<body>
<h1>add Node</h1>
<button onClick="addNode();">
infinity panda button
</button>
<div></div>
</body>
</html>

・「infinity panda button」を押す度に<p>●○panda○●</p>が<div><div>の中に書き込まれていく

createElement
新たな要素を追加(属性(classやid)はつけられない)
innerHTML=""
指定した要素の中に文字列を書き込む
document.getElementsByTagName("")
タグを指定する
getElementsByTagName("")
タグを指定する
item()
Nodelistを指定(何番めの指定した要素か)
appendChild()
指定した親Nodelistの子Nodelistの末尾にNodeを追加