2013/08/16

JavaScriptの学習をスタートしてみる

仕事でホームページ関係も少しいじるので、JavaScriptを改めて学習してみようと思う。ここではベーシックな部分を中心に書いてみたい。

JavaScriptは主にウェブブラウザ上で実行するスクリプト言語で、HTMLと連携しながら利用することが多い。以前は装飾程度の利用が多かったが、GoogleMap以降は本格的に使われるようになった。HTML5からはウェブサイト構築に必須のプログラム言語になったように思う。
開発環境はテキストエディタとブラウザがあればOK。最近のブラウザであればコンソールも表示できるので何かと便利。またスクリプト言語なのでコンパイルの必要もなく本当にお手軽。

HTMLに記述する方法で学習

JavaScriptを記述できる箇所は以下のように複数あるが、ここではHTML内に記述する範囲で書いていくつもり。
外部ファイル .jsが拡張子 複数のHTMLファイルで利用する場合
HTML <head> 内 ボディよりも先に読込まれる
HTML <body> 内 表示するような内容であればここに記述
HTML タグ内 ちょっとしたことならここに記述可能

ここで使うhtmlファイルは以下を雛形とする。文字コードはUTF-8で保存する。 また <body> にはJavaScriptと連携するフォームやボタン、canvasなども配置する。

空htmlファイルのソース

<!DOCTYPE html>
<html lang="ja">
<html>
<head>
<meta charset="UTF-8">
<title>空html</title>
 <!--ここにJavaScriptを記述-->
</head>

<body>
 <!--ここにJavaScript及びフォームやボタンなどを記述-->
</body>
</html>


まずはHelloWorldから

<head> にJavaScriptを記述。Hello Worldをコンソールに表示させるプログラム。コンソールはブラウザによってはエラーが起きる可能性があるので、実際の運用には時期尚早だが、開発時のチェックには便利。
<!DOCTYPE html>
<html lang="ja">
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Hello world</title>
<script type="text/javascript">
  console.log("Hello World! console");
</script>
</head>
<body>
</body>
</html>

上記を実行すると以下のようになる。これはGoogle Chromeのスクリーンショット。上段がページで、下段がコンソールとなっている。表示方法はツールのJavaScriptコンソールを選択すればよい。


ページにHelloWorldを出力してみる

<!DOCTYPE html>
<html lang="ja">
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Hello world</title>
</head>
<body>
<div id="stdout"></div>
<script type="text/javascript">
  document.getElementById("stdout").textContent = "Hello World!";
</script>
</body>
</html>

DOMを意識した書き方なので、やや手続きが多い。bodyに書いた理由はhtmlの<div>タグを先に読ませる必要があるため。<div>はブロック要素で、ひとつのまとまった単位を示すもの。スクリプトは"stdout"という id を持った空のdiv要素に"Hello World!"を埋め込むプログラムになっている。document.getElementById("id")は id を指定する。textContent は、その要素の text 部分にアクセスするためのプロパティで、上記は空となっている。ここに文字があれば、その文字と置き換わる。



JavaScript 目次