初めてのjavascript

先日からjsの勉強を始めました。まずは基本文法を身につけちゃおうということで、id:javascripter さんにならって「初めてのjavascript」で勉強。適度な厚さだし、説明も分かりやすい。今月はこれをやって行こうと思います。

 

1章やりました

昨日と今日で1章を読んだ。

まずは定番のHello World
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Hello, world</title>

<script type="text/javascript">
  //コメントはこう書く
  var dt = Date();
  var msg = 'Hello, World ' + dt;
  alert(msg);
</script>
</head>
</html>


jsでは、ローカル変数の場合はvarで宣言するのね。varがないと、グローバル変数になって、他にライブラリを読み込んでいて、万が一同じグローバル変数を使っていたりすると衝突する。
でも、jsのスコープはシンプルで、var宣言するローカル変数(宣言した関数内のみ有効)と、グローバル変数のみ(いまのところその理解でもしかしたら違うかも)。


jsでは、文の最後の「;」はなくていい。改行が文の区切りになる。rubyと同じだ。でも、jsでは書く方が礼儀っぽい。rubyでは書かない人が圧倒的に多い。jsだと、「IEだとだめー」とかあるからだろうか。できるだけ行儀よい方がいいかも。

DOM使ったHello World

以降、宣言部はカット。

<body>
<script type="text/javascript">
var dt = Date();
msg = "Hello " + dt;
document.writeln(msg);
</script>
</body>


DOMはHTML文章を操作するためにブラウザが提供する機能(API)。jsを使い、DOM/BOMを通じてブラウザの表示を変えるのがブラウザ上でのプログラミング。(WEB+DB Press vol.44 p126より引用)
ここでは、documentがDOMオブジェクト。documentが持つ関数writelnを使ってbody内にメッセージを書いている。

これに関してポイントが書いてありました。

1.ページがロードされていく過程でjsがページコンテンツを動的に作成する場合はbody内にスクリプトを埋め込む
2.関数内で定義され、イベントで使用されるスクリプトはhead部に入れる。これにより、body部の前にロードされる。


2は、ロード前にイベントがおこっちゃまずいってことか。なので、最初にロードされるようにhead部に書く。基本、bodyに書くのは1の場合のみと思ってよいとのこと。

イベントハンドラ

イベントハンドラは、DOMの一部でブラウザが提供する機能。イベントハンドラを使うと、ページのロードとか、キー入力などのイベントを関数と結びつけることができる。よって、特定のイベントが起こった時に行う処理を記述できる。
onloadイベントハンドラを使ってHello Worldを書いてみる。

<head>
<script type="text/javascript">
function sayHello() {
  var dt = Date();
  msg = "Hello " + dt;
  alert(msg);
}
</script>
</head>
<body onload="sayHello()">
</body>


これで、ページがロードされると、sayHello関数が発動する。
ここでは、bodyタグに直接イベントハンドラを結びつけていますが、タグの属性に結びつけなくても、スクリプト内に記述することができる。
タグ内にコードを書くのはあまり良くない。HTMLは本来は文章の構造を表現するのが仕事なので。そこは覚えておきたい。(onclick 属性問題について - IT戦記

<head>
<script type="text/javascript">
function sayHello() {
  var dt = Date();
  msg = "Hello " + dt;
  alert(msg);
}
document.onload = sayHello();
</script>
</head>
<body>
</body>


これからjs頑張ります!基本を学んだら、prototype.jsとか、日頃railsでお世話になっている物をきちんと読みたい。仕組み分からずに使うのはこわいから。