INDEX
目次
JavaScriptはブラウザで動作するプログラミング言語のひとつで、主にWebサイトやWebアプリ、スマホアプリ、ゲームなどを開発する際に使われています。
一般的にはWebページに動的なインタラクションを実装するために使用されることが多く、Webデザイナーにとっても学習する価値の高い重要な言語です。
HTML/CSSと同様に、テキストエディタとブラウザさえあれば、すぐに学習を開始することができます。
一般的にはWebページに動的なインタラクションを実装するために使用されることが多く、Webデザイナーにとっても学習する価値の高い重要な言語です。
HTML/CSSと同様に、テキストエディタとブラウザさえあれば、すぐに学習を開始することができます。
【1-1】JavaScriptでできること
JavaScriptはこんなところに使われている
普段、私たちが何気なく閲覧しているWebサイトの中で、以下のような至る所にJavaScriptは使われています。
===
・ページ遷移せずに、画面の一部だけを切り替える
・HTMLの要素にアニメーションをつけて動かす
・フォームの入力内容をチェックする
・サーバーと通信してWebページの内容を動的に更新する
・アクセス解析ツールの設置
===
これらはJavaScriptでできることのほんの一部です。
Webページの利便性を向上するためにさりげなく使われているものから、見る人を惹きつけるダイナミックなアニメーションまで、さまざまな場面でJavaScriptは使用されています。
JavaScriptを省略して呼ぶときはJSと呼びます。
===
・ページ遷移せずに、画面の一部だけを切り替える
・HTMLの要素にアニメーションをつけて動かす
・フォームの入力内容をチェックする
・サーバーと通信してWebページの内容を動的に更新する
・アクセス解析ツールの設置
===
これらはJavaScriptでできることのほんの一部です。
Webページの利便性を向上するためにさりげなく使われているものから、見る人を惹きつけるダイナミックなアニメーションまで、さまざまな場面でJavaScriptは使用されています。
JavaScriptを省略して呼ぶときはJSと呼びます。
【1-2】DOM（Document Object Model）とは
JavaScriptの考え方
JavaScriptはブラウザそのものや、ブラウザウインドウ内に表示されているHTMLの各要素を操作することができる言語です。
ブラウザが持っているさまざまな機能や情報を取り出して使ったり、ブラウザウインドウ内に表示されている画像やテキスト、フォームなどに対してどのような処理を行うかという命令を与えることが、JavaScriptによるWebページのプログラミングです。
以下にオブジェクトの概念的理解を深めるための解説をしますが、本章後半の演習で、実際にコードを記述してオブジェクトを操作する練習をしますので、全て覚えたり、理解はしなくとも気にせず読み進めていって下さい。
また、JavaScriptの学習は全編に渡り、オブジェクトの操作方法を学ぶということに尽きますので、各章の学習を進めている途中でも、何度も以下のオブジェクトの解説を読み直して下さい。
ブラウザが持っているさまざまな機能や情報を取り出して使ったり、ブラウザウインドウ内に表示されている画像やテキスト、フォームなどに対してどのような処理を行うかという命令を与えることが、JavaScriptによるWebページのプログラミングです。
以下にオブジェクトの概念的理解を深めるための解説をしますが、本章後半の演習で、実際にコードを記述してオブジェクトを操作する練習をしますので、全て覚えたり、理解はしなくとも気にせず読み進めていって下さい。
また、JavaScriptの学習は全編に渡り、オブジェクトの操作方法を学ぶということに尽きますので、各章の学習を進めている途中でも、何度も以下のオブジェクトの解説を読み直して下さい。
ブラウザオブジェクト
JavaScriptのオブジェクトの中には、ブラウザオブジェクトと呼ばれるブラウザを操作するためのオブジェクトが多数用意されています。
例えば、JavaScriptではブラウザウインドウのことをwindowオブジェクトという名前で表します。
また、HTMLファイルのコンテンツ領域のことをdocumentオブジェクトと呼びます。
画像はHTMLタグで表すと<img>ですが、JavaScriptで扱うときはimagesオブジェクトと呼びます。
<form></form>にあたるものはformsオブジェクトといいます。
<input>にあたるものは、elementsオブジェクトです。
例えば、JavaScriptではブラウザウインドウのことをwindowオブジェクトという名前で表します。
また、HTMLファイルのコンテンツ領域のことをdocumentオブジェクトと呼びます。
画像はHTMLタグで表すと<img>ですが、JavaScriptで扱うときはimagesオブジェクトと呼びます。
<form></form>にあたるものはformsオブジェクトといいます。
<input>にあたるものは、elementsオブジェクトです。
また、ブラウザオブジェクトの中には、ウインドウや画像、フォームといった目に見えて姿形のあるモノ以外に、下記のブラウザに関連する情報を扱うためのオブジェクトも存在します。
===
ブラウザ情報（バージョンなど）を表すnavigatorオブジェクト
ブラウザウインドウに現在表示されているHTMLファイルのURL情報を表すlocationオブジェクト
ブラウザの閲覧履歴情報を表すhistoryオブジェクト
===
===
ブラウザ情報（バージョンなど）を表すnavigatorオブジェクト
ブラウザウインドウに現在表示されているHTMLファイルのURL情報を表すlocationオブジェクト
ブラウザの閲覧履歴情報を表すhistoryオブジェクト
===
この階層構造は、後述するJavaScriptを記述するときの書式と密接な関係がありますので、いつでも参照できるようにしておきましょう。
DOMの基本的理解
Document Object Modelとは
JavaScriptによる操作の対象であるオブジェクトは、ブラウザオブジェクトだけではありません。
基本的にHTMLファイル中のタグの要素は全てオブジェクトとして扱うことにより、JavaScriptで操作することが可能です。
ただし、画像とアンカーとフォーム以外のタグの要素（h1、p、div、span、ul、liその他のタグの要素）に関しては、上記のブラウザオブジェクトのように、あらかじめ決まったオブジェクト名の単語が用意されていません。
そこで、JavaScriptでは、HTMLの文書構造をそのままオブジェクトの集合体としてみなし、HTMLファイルのコンテンツ領域を表すdocumentオブジェクトの配下に置くという考え方で、全てのタグの要素（img、a、formを含む）を操作できるようにしています。
DOM（Document Object Model）とは、入れ子構造がその特徴であるHTMLの文書構造を、階層構造を持つオブジェクトの文書ツリーに変換したもののことです。
基本的にHTMLファイル中のタグの要素は全てオブジェクトとして扱うことにより、JavaScriptで操作することが可能です。
ただし、画像とアンカーとフォーム以外のタグの要素（h1、p、div、span、ul、liその他のタグの要素）に関しては、上記のブラウザオブジェクトのように、あらかじめ決まったオブジェクト名の単語が用意されていません。
そこで、JavaScriptでは、HTMLの文書構造をそのままオブジェクトの集合体としてみなし、HTMLファイルのコンテンツ領域を表すdocumentオブジェクトの配下に置くという考え方で、全てのタグの要素（img、a、formを含む）を操作できるようにしています。
DOM（Document Object Model）とは、入れ子構造がその特徴であるHTMLの文書構造を、階層構造を持つオブジェクトの文書ツリーに変換したもののことです。
例として、以下のHTMLのコードで考えてみましょう。
この入れ子構造になったHTMLタグは、ブラウザによって四角形の領域（ボックス）を与えられます。
この入れ子構造になったHTMLタグは、ブラウザによって四角形の領域（ボックス）を与えられます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<header>
<h1></h1>
</header>
<main>
<section>
<h2></h2>
<p></p>
</section>
<aside>
<img />
</aside>
</main>
<footer></footer>
</body>
</html>サンプルコード1−1
サンプルコード1-1のボックス構造を視覚化したものが下の図です。
CSSでWebページをスタイリングするときには、このようにHTML文書をボックスの集合体として捉えてコーディングします。
CSSでWebページをスタイリングするときには、このようにHTML文書をボックスの集合体として捉えてコーディングします。
一方、WebページをJavaScriptで操作するときは、HTMLタグを以下のようなツリー構造で捉えます。
こちらは、サンプルコード1-1をツリー構造で解釈したもので、このツリーのことをDOM(Document Object Model)といいます。
こちらは、サンプルコード1-1をツリー構造で解釈したもので、このツリーのことをDOM(Document Object Model)といいます。
Node（ノード）とは
下のように、タグの要素をツリー構造の階層関係で捉えたHTML文書のことをDOM（Document Object Model）と呼びます。
この考え方においては、HTML文書を構成するタグの要素は全てオブジェクトです。
HTML要素だけでなく、タグの属性やマークアップされたテキストもオブジェクトとみなされ、全てJavaScriptによる操作が可能です。
これらのオブジェクトのことをNode（ノード）と呼びます。
Nodeとは「こぶ」や「節」を意味する言葉で、JavaScriptにおいては、DOMツリーの各結節点のことを指します。
上記「JavaScriptはこんなところに使われている」節で紹介したようなWebページの動きは、DOMの各Nodeにアクセスして、そのNodeを動的に操作することにより実現します。
この考え方においては、HTML文書を構成するタグの要素は全てオブジェクトです。
HTML要素だけでなく、タグの属性やマークアップされたテキストもオブジェクトとみなされ、全てJavaScriptによる操作が可能です。
これらのオブジェクトのことをNode（ノード）と呼びます。
Nodeとは「こぶ」や「節」を意味する言葉で、JavaScriptにおいては、DOMツリーの各結節点のことを指します。
上記「JavaScriptはこんなところに使われている」節で紹介したようなWebページの動きは、DOMの各Nodeにアクセスして、そのNodeを動的に操作することにより実現します。
💡 JavaScriptによって可能なNodeの操作
JavaScriptによって以下のようなNodeの操作が可能です。
- HTMLの各要素を取得する
- 子要素、親要素、前後の要素を取得する
- 要素を生成する
- 要素を追加する
- 要素を削除する
- 要素を複製する
- 要素の中身を書き換える
- 要素を他の要素と置き換える
- 要素の属性を取得する
- 要素の属性を設定する
- CSSのプロパティを設定する
【1-3】JavaScriptの書式
2つの基本文型
JavaScriptはオブジェクトを操作する言語です。
オブジェクトとは、メソッド（機能）とプロパティ（属性）から構成されるデータの集合体のことです。
JavaScriptによるプログラミングは、各オブジェクトのメソッドやプロパティを取り出し、内容の追加や削除、移動や書き換えなどの操作を行うことです。
JavaScriptのオブジェクトからメソッドやプロパティを参照するための書式は以下のとおりです。
本教材では、この2つの書式のことを基本文型と呼ぶことにします。
この基本文型を使いこなすために、メソッドとプロパティについて詳細に知る必要があります。
オブジェクトとは、メソッド（機能）とプロパティ（属性）から構成されるデータの集合体のことです。
JavaScriptによるプログラミングは、各オブジェクトのメソッドやプロパティを取り出し、内容の追加や削除、移動や書き換えなどの操作を行うことです。
JavaScriptのオブジェクトからメソッドやプロパティを参照するための書式は以下のとおりです。
本教材では、この2つの書式のことを基本文型と呼ぶことにします。
この基本文型を使いこなすために、メソッドとプロパティについて詳細に知る必要があります。
メソッドとは
JavaScriptのオブジェクトには、ひとつひとつに決まった機能や属性が備わっています。
例えば、ブラウザウインドウを表すwindowオブジェクトには、ダイアログボックス（警告ウインドウ）を表示するという機能が備わっています。
このオブジェクトが持っている機能のことをメソッドといいます。
例えば、ブラウザウインドウを表すwindowオブジェクトには、ダイアログボックス（警告ウインドウ）を表示するという機能が備わっています。
このオブジェクトが持っている機能のことをメソッドといいます。
windowオブジェクトの主要なメソッド
| メソッド | 説明 |
|---|---|
| alert() | 警告ダイアログの表示 |
| confirm() | 確認ダイアログの表示 |
| prompt() | 文字列入力ダイアログの表示 |
| setTimeout() | 指定した時間が経過した後、プログラムを実行する |
ダイアログボックスを出すメソッドはalertメソッドといいます。
オブジェクトが持つメソッドを取り出して使うJavaScriptは、❶の文型で次のように記述します。
引数（ひきすう）とは、メソッドに渡すデータのことです。
alertメソッドの場合は、引数として記述したテキストが、警告ダイアログ内にメッセージとして表示されます。
オブジェクトが持つメソッドを取り出して使うJavaScriptは、❶の文型で次のように記述します。
引数（ひきすう）とは、メソッドに渡すデータのことです。
alertメソッドの場合は、引数として記述したテキストが、警告ダイアログ内にメッセージとして表示されます。
windowオブジェクトは省略してもよい
上記「ブラウザオブジェクトの階層構造」を見るとわかるとおり、windowオブジェクトは全オブジェクトの最上位に位置するオブジェクトです。
このwindowオブジェクトだけは、他のオブジェクトと違い、省略して次のように記述することができます。
上記「ブラウザオブジェクトの階層構造」を見るとわかるとおり、windowオブジェクトは全オブジェクトの最上位に位置するオブジェクトです。
このwindowオブジェクトだけは、他のオブジェクトと違い、省略して次のように記述することができます。
プロパティとは
各オブジェクトは、そのオブジェクトに固有の属性（性質）を備えています。そのオブジェクトに固有の情報と言い換えても構いません。
例えば、HTMLファイルのコンテンツ領域を表すdocumentオブジェクトには、背景色という属性が備わっています。
このオブジェクトが持っている属性のことをプロパティといいます。
例えば、HTMLファイルのコンテンツ領域を表すdocumentオブジェクトには、背景色という属性が備わっています。
このオブジェクトが持っている属性のことをプロパティといいます。
documentオブジェクトの主要なプロパティ
| プロパティ | 説明 |
|---|---|
| bgColor | 現在のページの背景色を設定・取得する |
| location | 現在のページのURLを取得する |
| navigator | ユーザーのブラウザ情報やPC環境情報を取得する |
| referrer | 現在のページにアクセスする前のURLを取得する |
documentオブジェクトの背景色を表すプロパティはbgColorプロパティです。
オブジェクトが持つプロパティを取り出して使うJavaScriptは、❷の文型で次のように記述します。
「=」を使い、プロパティに値をセットすることができます。
オブジェクトが持つプロパティを取り出して使うJavaScriptは、❷の文型で次のように記述します。
「=」を使い、プロパティに値をセットすることができます。
ここで重要なことは、オブジェクトの記述方法です。
documentオブジェクトは、下の図を見るとわかるとおり、windowオブジェクトの配下に位置します。
JavaScriptで特定のブラウザオブジェクトにアクセスする場合、この階層構造を辿るようにして、上位のオブジェクト名から目的の下位のオブジェクト名までを順番に「.」で繋げて表現します。
従って、documentオブジェクトにアクセスするための記述は、「window.document」となります。
documentオブジェクトは、下の図を見るとわかるとおり、windowオブジェクトの配下に位置します。
JavaScriptで特定のブラウザオブジェクトにアクセスする場合、この階層構造を辿るようにして、上位のオブジェクト名から目的の下位のオブジェクト名までを順番に「.」で繋げて表現します。
従って、documentオブジェクトにアクセスするための記述は、「window.document」となります。
ただし、先述したように、windowオブジェクトの記述は省略してもよいことになっていますので、下図のように記述することが可能です。
これが、あるオブジェクトからそのオブジェクトが持っているメソッドやプロパティを取り出すための書式です。
オブジェクトとは、結局のところ、メソッドとプロパティの入れ物であると考えることができます。
これが、あるオブジェクトからそのオブジェクトが持っているメソッドやプロパティを取り出すための書式です。
オブジェクトとは、結局のところ、メソッドとプロパティの入れ物であると考えることができます。
または、下のように表現することもできるでしょう。
下図は、オブジェクトとはメソッドとプロパティの集合体であるという意味です。
これで、オブジェクトとメソッド、プロパティの関係が明らかになりました。
下図は、オブジェクトとはメソッドとプロパティの集合体であるという意味です。
これで、オブジェクトとメソッド、プロパティの関係が明らかになりました。
続いて、実際にJavaScriptのコードを入力して、ブラウザで動作の確認を行う演習に移ります。
【1-4】JavaScriptを記述する場所
JavaScriptを記述する場所は大きく次の2つに分かれます。
1. HTMLファイル内に記述する
2. 外部スクリプトファイルを読み込む
1. HTMLファイル内に記述する
2. 外部スクリプトファイルを読み込む
1. HTMLファイル内に記述する（インラインスクリプト）
JavaScriptはHTMLファイル内のどこに記述しても動きますが、コード全体は<script>と</script>で囲みます。
そうしないとブラウザはJavaScriptのコードとして解釈してくれません。
また、一般的にJavaScriptは、ページ内のオブジェクトを操作する場合、DOMがブラウザに読み込まれた後にJavaScriptのコードが読み込まれることが理想とされるため、ページ下部の</body>の直前に記述することを基本とすると良いでしょう。
そうしないとブラウザはJavaScriptのコードとして解釈してくれません。
また、一般的にJavaScriptは、ページ内のオブジェクトを操作する場合、DOMがブラウザに読み込まれた後にJavaScriptのコードが読み込まれることが理想とされるため、ページ下部の</body>の直前に記述することを基本とすると良いでしょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>JavaScript</title>
</head>
<body>
・・・・Webページのコンテンツ・・・・
<script>
// ここにJavaScriptのコードを記述する
</script>
</body>
</html>サンプル
2. 外部スクリプトファイルを読み込む
JavaScriptのコードは、外部ファイルとしてHTMLファイルとは別に作成し、HTMLファイルからscriptタグを使って読み込むことができます。
その場合は、外部JavaScriptファイルの拡張子を「.js」として保存します。
その場合は、外部JavaScriptファイルの拡張子を「.js」として保存します。
外部ファイル化
外部スクリプトファイル内に記述するコードは<script>と</script>で囲みません。
document.bgColor="#f00";
サンプル
HTMLファイルからの読み込み
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>JavaScript</title>
</head>
<body>
・・・・Webページのコンテンツ・・・・
<script src="script.js"></script>
</body>
</html>サンプル
外部ファイル化する利点
- 外部ファイル化することにより、複数ページで同じコードを効率的に使いまわすことができる
- HTMLファイルと別のファイルになっていることで、両方のコードの見通しが良くなる
- ※本教材では、比較的シンプルなコードで基礎的な書式の学習をする際は、HTMLファイル内にインラインで記述し、コードが長く複雑になる演習では外部スクリプトファイルに記述していきます。
【1-5】演習 ブラウザオブジェクトの操作
「JavaScriptの書式」で解説したコードを実際に入力してみましょう。
基本構造を入力したHTMLを用意して下さい。
ファイル名は任意です。
基本構造を入力したHTMLを用意して下さい。
ファイル名は任意です。
ダイアログボックスを出す
windowオブジェクトのalertメソッドを取り出して実行します。
1. bodyタグ内に<script></script>を入力します。
HTMLファイル内にJavaScriptのコード記述する場合、<script></script>で囲まないと、ブラウザはJavaScriptを解釈しません。
HTMLファイル内にJavaScriptのコード記述する場合、<script></script>で囲まないと、ブラウザはJavaScriptを解釈しません。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>ダイアログボックスを出す</title>
</head>
<body>
<script></script>
</body>
</html>サンプル
2. JavaScriptのコードを入力します。
まず「window.alert();」と入力し、引数として何かメッセージを入力します。
まず「window.alert();」と入力し、引数として何かメッセージを入力します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>ダイアログボックスを出す</title>
</head>
<body>
<script>
window.alert("Hello! JavaScript");
</script>
</body>
</html>サンプル
※下のように、windowオブジェクトを省略して記述しても問題ありません。
<script>
//windowオブジェクトを省略して記述する
alert("Hello! JavaScript");
</script>サンプル
3. ブラウザプレビューをします。
コメントを活用しよう
- コメントとは、コード中の一部を無効化したり、メモを挿入したりするための記述方法のことです。
- プログラムのコードやメモを無効化すると、ブラウザはその部分を無視します。
- これをコメントアウトともいいます。
- コメントアウトは、プログラムの可読性や保守性を向上させるために有効な手段です。
- 自分で書いたコードを時間が経ったあとに読み解いたり、他の開発者がそのコードを読むときの助けになるものですので、要所要所に適切な説明などをコメントとして挿入しておくことは大変重要です。
背景色を設定する
documentオブジェクトのbgColorプロパティを取り出して実行します。
基本構造を入力した新しいHTMLファイルを用意します（ファイル名は任意）。
基本構造を入力した新しいHTMLファイルを用意します（ファイル名は任意）。
1. bodyタグ内に<script></script>を入力します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>背景色を設定する</title>
</head>
<body>
<script></script>
</body>
</html>サンプル
2. JavaScriptのコードを入力します。
「window.document.bgColor=””;」と入力し、「"”」内に色名を指定します。
今回は「#dd0000」の赤を指定します。
「window.document.bgColor=””;」と入力し、「"”」内に色名を指定します。
今回は「#dd0000」の赤を指定します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>背景色を設定する</title>
</head>
<body>
<script>
window.document.bgColor = "#dd0000";
</script>
</body>
</html>サンプル
※以下のように、windowオブジェクトを省略して記述しても問題ありません。
<script> //windowオブジェクトを省略して記述する document.bgColor = "#dd0000"; </script>
サンプル
3. ブラウザプレビューをします。
これで「1章：JavaScriptを学ぼう」の解説を終わります。
次の章に進みましょう。
次の章に進みましょう。