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

ねっとぱんだ

webdesignとprogramingの勉強ブログ。

TodaysCode 3/12 -javascript-

Javascript

今日練習したコード

querySelectorAllによる値の取得

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>a</title>
<script>
function init(){
  var res=document.querySelectorAll("div p");
//querySelectorresによってresにdiv pを呼び出します。
  for(var i=0;i<res.length;i++){
//res.length=div pのNodeの数
    res[i].innerHTML="<b>changed!</b>"
//res(div p)のNodeの数だけ、res(div p)に<b>changed!</b>を代入します。
  }
}
</script>
<body onload="init();">
<div>
<p>A...</p>
<p>B...</p>
</div>
</body>
</html>

上の結果、HTMLは以下の様に書き換えられます。

<div>
<p><b>changed!</b></p>
<p><b>changed!</b></p>
</div>

alert

「あ」と「い」というアラートが出てくる。

この場合、window.という指定は省略できる。

window.alert("あ")
alert("い")

入力した文字を書き出す

promptのウィンドウが出てきて入力した文字が書き出される。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>a</title>
<body>
<script>
x=window.prompt("何か入力して")
document.write(x)
</script>
</body>
</html>

入力欄にデフォルトで「好きな食べ物は?」と表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>a</title>
<body>
<script>
x=window.prompt("何か入力して","好きな食べ物は?")
document.write(x);
</script>
</body>
</html>

promptからの入力を変数に格納する

xに格納した値が書き出される。

x=window.prompt("何か入力")
document.write(x)

\の後の値は文字列として書き出せる(macの場合alt+¥で\)

document.write("\"\\")

「"\」と書き出される