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

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

JavaScriptは主にウェブブラウザ上で実行するインタプリタ言語で、HTMLと連携しながら利用することが多い。登場した当時はブラウザ上での装飾程度の利用だったが、どんどん拡張され、GoogleMap以降は本格的に使われるようになった。HTML5からはFlashも消えはじめ、ウェブサイト構築に必須のプログラム言語になったように思う。 そもそも名前が当初流行っていたJavaとお手軽命令という感じのScriptの組み合わせ。なんとも気合もポリシーもない言語。そんな言語がいつの間にか、脚光を浴びるようになってしまった。

開発環境はテキストエディタとブラウザがあればOK。最近のブラウザであればコンソールも表示できるので何かと便利。またスクリプト言語なのでコンパイルの必要もなく本当にお手軽。

HTMLに記述する方法で学習

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

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

空htmlファイルのソース

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

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


まずはHelloWorldから

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

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


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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript Hello world</title>
</head>
<body>
<div id="stdout"></div>
<script>
  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 目次