絵でわかるWebプログラミング入門

JavaScript入門

JavaScriptはプログラミング言語のひとつです。

ブラウザで動かすこと（実行）ができるので、プログラミングの入門として初心者にとって始めやすい言語です。

JavaScriptの始め方

ウェブページ上でJavaScriptを使うには主に２つの方法があります。


  • HTMLのscript要素に直接コードを書く方法
  • コードを書いたファイル（js）を指定する方法

まず直接書く方法を解説します。

		<script type="text/javascript">
			console.log(1);
		</script>
		...
		<script>
			console.log(2);
		</script>

HTMLにはプログラムを記述するために<script>というタグが用意されているのでそれを使います。

<script>はhead内でもbody内でも構いませんし、複数でも構いません。また、type属性は初期値がjavascriptなので、省略可能です。


JavaScriptはファイル内の上から順に実行されるので、サンプルコードでは「1」のあとに「2」がコンソールに出力されます。


次に、JavaScriptのコードを書いたファイル（js）を指定する方法を解説します。

<script>にはsrc属性が用意されているのでそれを使います。

		<script src="a.js"></script>

src属性の値をjsファイルにして、タグの内容は空にします。こうすることでjsファイルのJavaScriptコードが中身に流れ込むと考えるとわかりやすいです。


一方、jsファイルは次のように<script>などは書かずに、そのままJavaScriptのコードを書きます。

		console.log(1);
		console.log(2);

このJavaScriptが<script>内に書き出されるというイメージです。


JavaScriptの記述はどちらの方法でも構いませんが、この入門ページではわかりやすいように直接書く方法を使います。

JavaScriptの役割

HTML入門！10分後には制作開始！で「文書構造はHTML、見た目はCSS、動きはJavascript」だと説明しました。動きというのは変化です。

JavaScriptは、HTML要素や属性値、CSSのプロパティや値など、ウェブページの構成要素を変化させるために使います。


PHPはウェブサーバ上で動作しますが、JavaScriptはブラウザ上で動作するプログラムです。

つまり、JavaScriptは、サーバ上にあるファイルやデータベースを扱うのではなく、ブラウザにロードされたHTMLやCSSを扱うプログラムなのです。


JavaScriptにはHTMLの要素などにアクセスするための技法が用意されています。それらを駆使してHTMLやCSSを、特にユーザの行動に対応して変化させていくことが目的になります。


例えばHTMLでは「りんご」という文字を記述できます。そしてCSSではその文字を赤で修飾することができます。

JavaScriptでは、ユーザが「りんご」をクリックしたら「もも」という文字に変えて色をピンクに変えたりすることができます。


その他にもできることが用意されています。例えばユーザがページをリロードすることなくサーバにアクセスするなどです。通常のHTTPリクエストはブラウザがアクセスすることになりますが、それをJavaScriptにやらせるという技法です。


この入門ページでは、HTML要素をJavaScriptのオブジェクトとして取得する方法と、取得したオブジェクトを使って内容を変化する方法を紹介します。


なお、JavaScriptにはライブラリ（便利なプログラム集）がいくつもありますが、入門ということで今回は解説しません。

HTML要素を取得する

JavaScriptを使って、HTML要素を取得して値を変更する方法を解説します。

		<!DOCTYPE html>
		要素を取得する
		
あ


		<script>
			console.log(document.getElementById('test'));
			console.log(document.querySelector('div'));
			console.log(document.getElementsByTagName('div')[0]);
		</script>

サンプルコードはhtmlもheadもbodyも省略した簡素なHTMLです。その中で<script>を使ってJavaScriptを実行しています。


このJavaScriptでは３つの命令文を実行しています。それぞれの結果をconsoleに出力しているので、ブラウザのConsoleを表示して何が出力されているか確認してみましょう。


divらしきものが３回表示されていれば成功です。これらのコードはすべて、HTMLの要素を取得する命令ですが、その方法がそれぞれ違っています。

		document.getElementById('test');//id属性値で取得
		document.querySelector('div');//セレクタで取得
		document.getElementsByTagName('div')[0];//タグ名で取得

「document」はオブジェクトです。オブジェクトというのは色んなデータの集まりをまとめたものです。

documentオブジェクトは、HTMLドキュメントのツリー構造データ（DOM）を主としたオブジェクトで、HTMLドキュメントに関する付随的なデータやメソッド（関数）などの集まりになっています。


例えばdocumentオブジェクトはドキュメントのURLのデータを持っているので「document.URL」でURLを取得できます。


データの他にもドキュメントに関するメソッドも用意されています。

サンプルコードの３行もすべてDOMにアクセスして要素を取得するメソッドです。


getElementByIdはget（取得）Element（要素)By（で）Id（id）なので、ずばり「idで要素を取得」するメソッドです。


querySelectorはCSSと同じようにセレクタを使い、getElementsByTagNameはHTMLのタグ名で要素を取得します。

querySelectorは最初の要素だけを取得しますが、getElementsByTagNameは「Elements」と複数形になっている通り、複数の要素として取得します。つまり配列の形で取得するので、ひとつだけ取得するにはサンプルコードのように添字[0]を付けます。divがひとつしかなくても配列に格納されるので添字は必要です。


HTML要素を取得する方法は他にもありますが「jQuery」の場合は次のようになります。

		<script src="jquery.jsを指定"></script>
		$('div');

このように、取得方法はいくつもあるのですべて細かく覚える必要はありません。

入門ということで、ここでは具体的な方法よりも、まずは要素を取得する、という概念を覚えてください。

HTMLを変更する

取得したHTML要素はオブジェクトなので、HTML要素に関する色んなプロパティやメソッドといったデータを持っています。

もちろん内容に関するデータも持っていて、その中の「innerHTML」を使うと、次のように内容を読み出したり上書きしたりできます。

		<!DOCTYPE html>
		要素を変更する
		
あ


		<script>
			//取得した要素オブジェクトを変数に代入
			var e=document.getElementById('test');
			
			//innerHTMLを出力
			console.log(e.innerHTML);

			//innerHTMLを上書き
			e.innerHTML='い';

			//innerHTMLを出力
			console.log(e.innerHTML);
		</script>

取得した要素オブジェクトの「innerHTML」を使うとダイレクトに内容のHTMLを編集できます。

内容を変更する方法は他にもあります。また「jQuery」では書き方が違います。今回は入門ということで、取得したオブジェクトには内容を変更する方法が用意されている、ということを覚えてください。


ちなみに、上書きではなく追記する方法も紹介しておきます。

		e.innerHTML+='うえお';

まとめ

「jQuery」では今回解説した記法とは別の記法で書くことになります。しかし、HTMLドキュメントにDOMを通じてアクセスし、オブジェクトとして操っていく、ということには変わりません。

このように、ブラウザ上のJavaScriptは、HTMLドキュメントの要素をオブジェクト化してDOMとして用意しているので、プログラマとしてはそれらにアクセスしてプロパティを変えたりメソッドを使っていく、というのが基本の流れになるかと思います。