Webのスクリプティング - パート1: JavaScriptの概要

JavaScriptは、Web開発で用いられる最重要な言語の1つです。JavaScriptには、フォームから送信された値のチェックから、タブ付きパネル、アコーディオンメニュー、フライアウトメニューといったインタラクティブウィジェットの制御まで、様々な用途があります。また、フォトギャラリーを作成したり、Webサーバーから新しい情報を取得することで、ページを再ロードせずにコンテンツを更新したりするためにも用いられます。これは一般的にAjaxと呼ばれるテクノロジーの組み合わせです。

Webサイトの構築に携わる人にとっては、HTMLとCSSの他に、JavaScriptの知識もぜひ身につけておくべきスキルの1つです。しかし実際には、JavaScriptの知識は、必ずしもWebデザイナーの間に普及していません。JavaScriptは非常に難解だと一般には信じられています。また、グラフィックデザイナーの中には、自分の仕事はデザインであってプログラミングではないと思っている人も少なくありません。自分でJavaScriptのプログラミングを行わない場合でも、Webページの構造がJavaScriptプログラマーの仕事にどのように影響するかを知っておくことは重要です。また、jQueryを初めとするコードライブラリのおかげで、JavaScriptはかなり使いやすくなっています。

この記事は、JavaScriptとjQueryを初めて学ぶ人のためのシリーズの第1弾です。ここでは、jQueryを使用するために知っておく必要があるJavaScript言語の基本機能を紹介します。

JavaScriptはJavaと名前が似ていますが、全くの別物です。2つの言語の間に関連はありません。Javaは一般的に、ゲームや携帯電話、およびAmazon Kindleなどのデバイス向けのプログラミングに使用されます。JavaをWebサイトで使用することも可能ですが、実際にはほとんど使われていません。

一方JavaScriptは、通常Webブラウザー内部で動作する軽量で強力な言語です。その役割は、ページの様々な要素にアクセスして、削除したり更新したりできるようにすることです。また、新しい要素の作成、既存の要素のスタイルの変更、要素からの情報の抽出にも使用できます。例えば、フォームに入力された値を読み取ったり、計算を実行したり、結果を表示したりといったことができます。さらに、Webサーバーに新しい情報の要求を送信し、ページを再ロードせずにその一部を更新することもできます。

JavaScriptは、このような作業を実行するために、Document Object Model（DOM）を利用します。DOMはツリー構造になっています。ページのHTMLマークアップが間違っていたり複雑すぎたりすると、JavaScriptコードはツリーをたどることができません。同様に、1つのページの複数の場所で同じIDを使用しないといった簡単なルールを破るだけで、JavaScriptは混乱して処理ができなくなります。

JavaScriptはイベント駆動型の言語です。イベントの一部は、自動的に発生します。例えば、loadイベントは、ブラウザーでページの読み込みが終了したときに発生します。このイベントは、フライアウトメニューなどのウィジェットの初期化に多く用いられます。この他に、ユーザーが発生させるイベントもあります。最も一般的なのはclickイベントで、ユーザーがマウスのメインボタンをクリックするか、タッチスクリーンをタップしたときに発生します。その他の一般的なイベントとしては、ユーザーが要素の上にマウスポインターを置いたときに発生するmouseoverとmouseoutや、フォームが送信されたときに発生するsubmitがあります。

イベントは常に発生しています。ユーザーがマウスを動かしたり、ページをスクロールしたり、キーを押したりするたびに、イベントが発生します。ブラウザーがすべてのイベントに応答しなければならないとしたら、大変なことになります。その代わりに、デベロッパーは特定のイベントを処理する関数を作成し、そのイベントに応答すべきページ要素にその関数を関連付けます。これは、イベントハンドラーのバインドと呼ばれます。

イベントハンドラー関数はイベントをリッスンしています。これはイベントの発生を待つという意味です。関連するイベントが発生すると、イベントハンドラーは処理を開始し、指定された作業を実行します。例えば、フライアウトメニューのオープン・クローズ、フォームの送信、要素のスタイルの変更などです。

抽象的な話はこれくらいにして、実際にJavaScriptを使ってみましょう。

関数とは、特定の処理を実行する要素で、コマンドを並べることで処理を実行します。関数を定義する最も一般的な方法としては、キーワードfunction、関数名、開き括弧と閉じ括弧、波括弧で囲まれたコードブロックの順に記述します。関数名は自由に付けてかまいませんが、先頭の文字は英文字、下線（_）、ドル記号のどれかでなければなりません。また、名前の中にスペースまたはハイフンを入れることはできません。JavaScriptでは大文字と小文字は区別されます。このため、関数名を付けるときに、わかりやすいように2つめ以降の単語の先頭を大文字にする方法が多く用いられます（これを「キャメルケース」と呼びます）。例としては、changeFontSizeのようにします。

単純なコードの例として、次のコードは単に順序なしリストのテキスト色を変更するものです。完成したコードはサンプルファイル中のchange_01.htmlにありますが、JavaScriptプログラミングの感触をつかむために、Dreamweaver（または任意のテキストエディター）を開いて、自分でコードを入力してみることをお勧めします。

1. change_start.htmlを開きます。このページには、<h1>見出し、順序なしリスト、パラグラフがあります（図1を参照）。順序なしリストのIDはfruitsです。

2. コードビューで、閉じタグ</head>の直前に新しい行を挿入し、<script>タグを追加します。ページはHTML5のDOCTYPEを持つので、type="text/javascript"を追加する必要はありません。ブラウザーは、<script>ブロック内部のコードがJavaScriptであると自動的に推定します。
3. JavaScriptコードを追加する前に、忘れないように<script>ブロックを閉じておきましょう。空行を残して、</script>と入力します。

   Dreamweaverでは、</と入力してもタグのオートコンプリートは行われません。タグは手動で入力する必要があります。これは、スクリプトに同じ文字の組み合わせが出現する可能性があるからです。

4. <script>ブロック内部に、次のコードを入力します。

これは、changeFontSize()という名前の関数を定義しています。JavaScript関数には、引数として情報を渡す場合もあります。引数は、関数名の後の括弧の内部に記述します。この関数は引数を取りませんが、括弧は必要です。関数の本体は、波括弧の中に記述します。これから本体を入力します。

6. gと入力します。getElementById()のコードヒントが表示されます。EnterまたはReturnを押して、コードを挿入します。
7. Dreamweaverが再びコードヒントを表示し、getElementById()には引数としてIDが必要であることを知らせます。引用符を入力します（一重でも二重でもかまいません）。Dreamweaver CS5.5を使用している場合、現在のページにあるIDのリストが自動的に表示されます（図3を参照）。

8. Dreamweaver CS5.5の場合は、EnterまたはReturnキーを押してfruitsというIDを入力します。その後、閉じ括弧とセミコロンを入力します。

   他のプログラムを使用している場合は、コードを手動で完成する必要があります。どちらの場合も、関数定義は次のコードになります。

先ほど入力したコードでは、キーワードvarによってlistという名前の変数が作成されています。この変数は、fruitsというIDを持つページ要素への参照を格納する役割を果たします。fruitsへの参照を得るには、document.getElementById()というJavaScriptメソッドを使用します。

注意：メソッドは基本的に関数と同じですが、オブジェクトに属する点が異なります。オブジェクトについては後で説明します。用語の意味がわからなくても心配はいりません。必要なら、メソッドは単に特別な種類の関数であると思っていてください。

Dreamweaverの最近のバージョンを使用している場合、ピリオドを入力するたびにコードヒントが表示されることに気づくと思います。このコードでは、リスト要素のテキストのサイズを変更しています。リスト要素とは、fruitsというIDを持つ順序なしのlistです。

fontSizeはCSSのfont-sizeプロパティと似ていることに気づかれたかもしれません。JavaScriptでは名前にハイフンは使用できません。したがって、ハイフンは入れず、ハイフンの後の単語の先頭を大文字にしています。

完成した関数定義は、次のようになります。

10. ページを保存し、ブラウザーでテストします。何も起こりません。関数は定義しましたが、関数がイベントから呼び出されなければ処理は行われないのです。この後でイベントハンドラーを作成しますが、その前に、この短いコードで使用されているJavaScriptの重要な機能について見ておきましょう。

他のプログラミング言語を使ったことがある方なら、この節の内容の多くは既におなじみのはずです。ここでは、初心者の方のために、基本的な用語について説明します。初めは聞き慣れない用語の羅列にとまどうかもしれませんが、これを知っておけばこのチュートリアルの残りの部分の理解がずっと容易になります。

changeFontSize()関数定義の内部の1行目では、listという変数が作成されています。変数は、あらゆるプログラミング言語の重要な要素です。変数は通常、あらかじめわかっているとは限らない値を格納するために使用します。変数の名前は変わりませんが、その値は途中で変化する可能性があります。日常生活を例に取ると、変数は銀行口座の残高に似ています。金額はしょっちゅう変わりますが、「残高」という名称自体は常に同じです。

関数内部で変数を定義する場合、必ずvarキーワードを使用します。これは、この変数を関数の内部だけで使用することをJavaScriptエンジンに通知する役割を果たします。varを使用しなかった場合、もっと複雑なスクリプトでは予期しない結果が発生するおそれがあります。

変数名にも、関数と同じルールが適用されます。すなわち、

• 名前の先頭の文字は、英文字、下線、ドル記号のどれかです。
• スペースまたはハイフンは使用できません。

変数に値を代入するには、等号を使用します。等号の右側の値が、左側の変数に代入されます。

changeFontSize()関数の1行目では、document.getElementById('fruits')を使用して、fruitsという順序なしリストへの参照を変数に代入しています。ここでは、JavaScriptの3つの重要な機能が使用されています。オブジェクト、ドット記法、関数への引数の受け渡しです。

オブジェクトとは、簡単に言うと、0個以上の他の値を含む変数のことです。値には、プロパティとメソッドがあります。プロパティは変数に似ており、メソッドは基本的には関数と同じです。オブジェクトのプロパティやメソッドにアクセスするには、ドット記法を使用します。最初にオブジェクト、その後にドット（ピリオド）、最後にプロパティまたはメソッドを記述します。この例では、getElementById()はdocumentオブジェクトのメソッドです。

getElementById()の機能は名前が示す通りで、要素のIDを受け取ってその要素への参照を返します。IDは、メソッド名の後の括弧の中に、引用符で囲んで指定します。これを引数の受け渡しと呼びます。引数は引用符で囲まれているので、JavaScriptはこれをそのままのテキストとして扱います。プログラミングの用語では、このようなテキストは文字列と呼ばれます。文字列は一重引用符と二重引用符のどちらで囲んでもかまいませんが、2つの引用符は一致していることが必要です。

changeFontSize()関数の2行目では、ドット記法が2段階で使用されています。このコードは、まずlist変数に格納されている要素のstyleオブジェクトにアクセスし、次にそのfontSizeプロパティにアクセスします（list.style.fontSize）。代入される値は、新しいサイズを表す文字列です。言い換えると、この2行目では、fruitsリストのCSS font-sizeプロパティを20pxに設定しています。

最後にもう1つ注意すべきことがあります。コマンドの最後には常にセミコロンを付けます。技術的には、セミコロンは省略可能です。JavaScriptはコマンドを含む行の行末を自動的にコマンドの終わりと解釈するからです。もしコードの行を誤って途中で分割してしまうと、JavaScriptはそこまでを1つのコマンドと解釈するので、スクリプトは失敗します。コマンドの最後に必ずセミコロンを付けるようにしておけば、エラーを見つけやすくなります。

理論的説明はここまでにします。次はコードに戻って、関数に実際に仕事をさせてみましょう。

関数の使用

関数を使用する最も簡単な方法は、onClickなどのHTML属性を使用して要素にバインドすることです。

1. 先ほど作成したファイルを使用するか、change_01.htmlを出発点として使用します。
2. 最後のパラグラフ内のテキストを選択し、HTMLモードのプロパティインスペクターの「Link（リンク）」フィールドにjavascript:と入力します。テキストにダミーのリンクが追加されます。
3. コードビューを開き、<a>開始タグの閉じ角括弧の前にスペースを挿入します。次にonClick="changeFontSize()"と入力します。最後のパラグラフはコードビューに次のように表示されるはずです。

4. ページを保存し、ブラウザーにページを読み込むか、Dreamweaverのライブビューを起動します。
5. 最後のパラグラフのリンクをクリックします（ライブビューの場合、WindowsではCtrlキー、MacではCommandキーを押しながらクリックします）。コードが正しければ、図4に示すように、リスト内のテキストのサイズが大きくなります。

コードをチェックするには、サンプルファイル中のchange_02.htmlが使用できます。

スクリプトが動作しない場合のエラーの検出方法

人は誰でも間違えるものです。特に新しいことを学んでいるときほどたくさん間違えます。コードに何か問題があると、スクリプトは単に失敗し、何が間違っているかは示されないのが普通です。最近のブラウザーには、コードのデバッグに役立つツールが組み込まれています。ツールの場所は次の通りです。

• Internet Explorer 8以降：F12キーを押してDeveloper Tools（開発者ツール）を開き、「Console（コンソール）」タブを選択します。
• Firefox 4：Web Developer（Web開発）／Error Console（エラーコンソール）を選択します。
• Google Chrome：Tools（ツール）／Developer tools（デベロッパーツール）を選択します。
• Safari：Edit（編集）／Preferences（設定）（Windows）またはSafari／Preferences（環境設定）（Mac）を選択して、Developer（開発）メニューを有効にします。「Advanced（詳細）」タブで、「Show Develop menu in menu bar（メニューバーに"開発"メニューを表示）」を選択します。設定を閉じます。その後、Develop（開発）／Show Error Console（エラーコンソールを表示）を選択します。
• Opera：Tools（ツール）／Advanced（詳細）／Error Console（エラーコンソール）を選択。

ブラウザーがエラーコンソールに出力するエラーメッセージを見るために、changeFontSize()関数に意図的に間違いを入れてみます。

1. getElementById()の綴りを変更して、var list = document.getElementByID('fruits');のようにDを大文字にします。
2. ページを保存し、ブラウザーにもう一度読み込みます（ライブビューはデバッグには使用できません）。
3. 最後のパラグラフのリンクをクリックします。リストのフォントサイズは変わりません。
4. ブラウザーのエラーコンソールを開きます。図5のようなエラーメッセージが表示されているはずです。

お使いのブラウザーに表示されるエラーメッセージは図5とは異なる可能性がありますが、基本的には同じことを言っています。getElementByID()が有効な関数ではないということです。最初のうちは、エラーの原因を突き止めるのに苦労するかもしれませんが、最も多い誤りの1つは、関数やメソッドの名前の綴りを間違えることです。JavaScriptでは大文字と小文字が区別されます。

Opera以外のエラーコンソールにはリンクがあり、エラーがある行に移動することができます。

changeFontSize()関数はフォントサイズを大きくしますが、元のサイズに戻すにはページを再読み込みするしか方法がありません。この関数を改良するには、現在のフォントサイズを検出して、どのサイズに変更するかを決定できるようにする必要があります。

他のプログラミング言語と同様、JavaScriptは条件を使用して実行する動作を決定します。条件は、ifキーワードの後の括弧の中に指定します。条件に対応するコードは、条件の後の波括弧の中に指定します。擬似コードで書くと、次のようになります。

条件が真の場合、コードが実行されます。条件が偽の場合、コードは無視されます。

条件が偽の場合に実行する別のコードを、elseキーワードを使って指定できます。擬似コードで書くと、次のようになります。

さらに、else ifを使って条件を連鎖させることもできます。

注意：条件の後の波括弧が省略されたスクリプトを見ることがあるかもしれません。これが可能なのは、条件の後のコマンドが1つだけの場合に限られます。この書き方は推奨されません。常に波括弧を使用するようにしてください。その方が、スクリプトのロジックが理解しやすくなります。

条件としては、比較が多く用いられます。例えば、2つの値が等しい、一方の値が他方より大きいなどです。次の表に、主な比較演算子を示します。

表1. 比較演算子

changeFontSize()関数を改良して、通常のフォントサイズと大きいフォントサイズの間の切り替えができるようにしてみましょう。

1. 前と同じファイルを引き続き使用するか、change_02.htmlを使用します。
2. 要素のstyleオブジェクトを使用してCSSプロパティの値を変更するのは、インラインスタイルを使用するのと同じ効果を持ちます。元のHTMLではfruits順序なしリストにインラインスタイルが使用されていないので、ページが最初に読み込まれたときにはlist.style.fontSizeには値がありません。したがって、条件の1つの書き方としては、list.style.fontSizeが空文字列であること、すなわち値がないことをチェックする方法があります。空文字列は、間に何もない2個の引用符で表します。関数を次のように変更します。

list.style.fontSizeに値がない場合、20pxに変更します。それ以外の場合、16pxに変更します。

注意：最もよくある間違いの1つは、値の比較に等号2つでなく1つを使用することです。1つの等号は値の代入を表します。2つの等号は値の比較を表します。

3. ページを保存し、ブラウザーでテストします。リンクを初めてクリックすると、テキストサイズが大きくなります。もう一度クリックすると、元のフォントサイズに戻ります。
4. もう一度リンクをクリックします。何も起こりません。なぜでしょうか。それは、list.style.fontSizeが既に空文字列ではなくなっているからです。現在の値は16pxです。これを修正する簡単な方法は、次のように不等価演算子（表1を参照）を使用することです。

list.style.fontSizeが20pxでない場合、20pxに設定します。それ以外の場合、16pxに設定します。

change_04.htmlでは、changeFontSize()関数を書き換えて、論理OR演算子の使用方法を示しています。コードは次のようになります。

この条件は、list.style.fontSizeが空文字列であるか、または16pxであるかどうかをテストします。change_04.htmlをテストしてみれば、フォントサイズが16pxと20pxの間で切り替わるはずです。

注意：論理演算子の両側には、条件全体を繰り返す必要があります。次のように値だけを繰り返すことはできません。

論理ANDおよび論理OR演算子と異なり、論理NOT演算子は1つの条件に対して使用します。これが便利なのは、JavaScriptではほとんどの値が暗黙に真または偽として扱われるからです。これについては次の節で説明します。

真と偽の値について

真または偽のどちらかである値のことを、ブール値と呼びます（この呼び方は、現代のコンピューターロジックの基礎を築いたとされる、19世紀の英国の数学者George Booleに基づいています）。JavaScriptでは、ブール値として、trueとfalseの2つのキーワードが使用できます（大文字と小文字は区別されません）。

表1の比較演算子は、ブール値の結果を生成します。これを技術的表現では「trueまたはfalseを返す」と言います。ブール値の他に、JavaScriptでは値が暗黙に真または偽として扱われる場合があります。これを英語では"truthy"、"falsy"と呼ぶことがあります。

JavaScriptは、次の値を暗黙に偽と見なします。

• 未定義の変数
• 値を持たない変数（null）
• 算術演算の結果が数値でない場合（NaN）
• 0または'0'
• 空文字列（''）

上記の値とキーワードfalse以外のすべての値は、真と見なされます。

注意：キーワードtrueとfalseを引用符で囲むと、キーワードでなく文字列と見なされます。偽と見なされるのは空文字列だけなので、'false'は真として扱われます。ご注意ください。

changeFontSize()関数があるページが初めて読み込まれたときには、list.style.fontSizeは空文字列を返すので、暗黙に偽となります。したがって、change_04.htmlの中の関数は次のように書き換えることができます（このコードはchange_05.html）にあります。

list.style.fontSizeの前に論理NOT演算子（感嘆符）を付けると、「list.style.fontSizeが偽の場合、真として扱う」という意味になります。

暗黙に真または偽である値に対して論理NOT演算子を使用するのは、JavaScriptでは非常によく用いられるやり方です。これは、真であることが期待される値に対して多く用いられます。例えば、checked（「チェックされている」）という名前の変数があったとします。if (!checked)は、「チェックされていない場合」という意味になります。

changeFontSize()関数には、柔軟性に欠ける点があります。それは、fruits順序なしリストのIDが1行目にハードコーディングされていることです。この関数を他の要素で再使用できるようにするには、IDを関数への引数として渡す必要があります。

1. 同じファイルを引き続き使用するか、change_03.htmlを使用します。
2. 関数定義のchangeFontSize()の括弧の中に、idと入力します。これは、関数がidという名前の1つの引数（パラメーター）を受け取ることを表します。パラメーターは変数と同様に扱われます。すなわち、引用符は付けず、変数と同じ命名規則に従います（前述の「JavaScriptの基本」を参照してください）。
3. 関数定義内部の1行目で、getElementById()の括弧の中の'fruits'を削除し、代わりにidと入力します。引用符も削除する必要があることに注意してください。idは関数に引数として渡された値を表す変数として使用されているからです。関数定義の最初の2行は、次のようになります。

これは、changeFontSize()に引数として渡された値を、getElementById()に渡すという意味になります。

注意：onClick属性ではchangeFontSize()が二重引用符で囲まれているので、fruitsは一重引用符で囲む必要があります。文字列内部で引用符を使用する場合は、必ず外側の引用符と違う種類の引用符を使用します。そうしないと、コードはエラーになります。同じ種類の引用符を使用しなければならない場合は、内側の引用符の前にバックスラッシュを付けます。

5. ページを保存し、テストしてみます。関数は前と同じように動作します。
6. fruitsの最後の"s"を削除して、ページを保存し、もう一度テストしてみます。今度は関数は動作しません。fruitというIDを持つ要素が見つからないからです。
7. fruitsの最後の"s"を元に戻して、ページを保存します。コードをチェックしたければ、change_06.htmlと比較してください。

   
   
   

changeFontSize()関数は、2つのフォントサイズを切り替えます。このJavaScript超特急ツアーの最後の作業として、複数の異なるサイズを順次切り替えるようにこの関数を変更してみます。このためには、サイズを配列に格納し、ループを使用してサイズを順番に読み取ります。この節はこれまででいちばん複雑なので、急がずゆっくりと進めていきましょう。

配列の作成

配列とは、関連する複数の値をまとめて、1つの変数から参照できるようにしたものです。配列を作成するには2つの方法があります。1つ目は、次のようにArray()コンストラクターを使用する方法です。

もう1つの方法は、次のように配列リテラルを使用する方法です。

角括弧を使用して配列リテラルを作成する方法の方が簡単で、最近ではより広く用いられる傾向にあります。

配列の各項目（配列要素）には、自動的に番号が付けられます。配列要素を参照するには、配列名の後に角括弧で囲んで番号を指定します。ただし、多くのプログラミング言語と同様に、番号は0から始まります。したがって、friends[1]は配列の1番目でなく2番目の要素（Dick）であり、1番目の要素はfriends[0]です。

配列に対するforループの使用

配列に要素を格納する一般的な理由は、各要素に対して同じ操作を実行するか、あるいは集合の中から値を選択することです。配列の各要素に対して操作を実行するには、ループが用いられます。JavaScriptには何種類かのループがありますが、このチュートリアルではforループだけを使用します。

次に示すのは、forループの構造を表す擬似コードです。

括弧の中には、セミコロンで区切られた次の3つのステートメントがあります。

• 初期化：このコードは、ループ内で使用される1つまたは複数の変数を初期化します。変数は通常、ループが実行された回数を記録しておくカウンターとして用いられます。
• 条件：これは、ループが実行される回数を決める条件を指定します。通常は配列の末尾までです。
• 増分：これは、ループが実行されるたびにカウンター変数の値を増やす働きをします。

すべての配列にはlengthプロパティがあります。これは、配列の全要素数を返します。次のコードは、friends配列の項目の数を取得します。

friends配列には3つの要素があります。したがって、numFriendsは3になります。

配列要素の番号は0から始まるので、カウンターが配列の長さより小さい間ループを実行するように条件を設定します。カウンター変数を使って、次のように配列要素に順次アクセスできます。

ループが最初に実行されるときには、iは0なので、friends[i]はfriends[0]と同じになります。その後、iの値に1が加えられ、次の配列要素であるfriends[1]にアクセスできるようになります。次にiは2になり、friends[2]にアクセスできます。カウンターの値はさらに1増えますが、iが3より小さいという条件を満たさなくなるので、ループは終了します。

フォントサイズの配列に対するループ

以上の知識を身につけた上で、changeFontSize()関数の最終バージョンに取り組んでみましょう。この練習では、複数の変数の宣言、配列リテラルの作成、配列に対するループ処理、条件ロジック、単純な算術演算、値の文字列としての結合といった、JavaScriptの様々な機能を扱います。

1. 同じファイルを引き続き使用するか、change_06.htmlを使用します。
2. フォントサイズを制御するコードは、大幅に書き換える必要があります。まず、ifとelseの条件ブロックを削除します。次のコードが残ります。

3. この関数では、いくつかの変数を使用します。多くのスクリプトでは、必要になったときに変数を宣言しています。しかし、そのようにすると変数宣言がコードのあちこちに散らばって、保守が難しくなります。お勧めの方法は、すべての変数を関数の先頭で宣言することです。各変数を別々のコマンドで宣言して、各コマンドの先頭にvarを付け、終わりにセミコロンを付けるというやり方もあります。もう1つの方法として、変数宣言をコンマで区切って並べることもできます。ここでは2番目の方法を使用します。
   
   getElementById(id)の後ろのセミコロンを削除し、代わりにコンマを入力します。新しい行を挿入し、listと縦方向に揃うようにコードをインデントします。新しい変数を次のように宣言します。

これは、list.style.fontSizeの値をfontSizeに格納しています。次に、4つの数値を含むsizesという名前の配列リテラルを作成し、配列の長さをlenに格納しています。最後に、カウンター変数iを作成しますが、値は代入しません。

コードのインデントは必須ではありませんが、こうするとコードが見やすくなります。これはまた、セミコロンの前に改行を挿入してもエラーにならない少数の例の1つです。各行の最後にあるコンマは、これが変数のリストであることをJavaScriptに知らせる働きをします。また、数値が引用符に囲まれていないことにも注意してください。JavaScriptでは数値と文字列は異なる扱いをされます。

ここでは、fontSizeに対して論理NOT演算子を使用しています。fontSizeが値を持たない場合、JavaScriptはこれを暗黙に偽として扱います。論理NOT演算子は真と偽の値の意味を逆にするので、関数が初めて呼び出されたときには波括弧の中のコードが実行されます。

JavaScriptでは、プラス記号（+）が算術加算とテキストの結合の2つの目的に用いられます。すなわち、波括弧の中のコードは、sizes配列の2番目の要素の値（20）を読み取って、それに文字列'px'を結合します。その結果の値（20px）が、list.style.fontSizeに代入されます。

ここで、fontSizeという変数を作成したのに、なぜlist.style.fontSizeを使う必要があるのかという疑問が生じるかもしれません。それは、fontSizeが既存の値を格納する役割しか持たないからです。ページ内のフォントのサイズを変更するには、順序なしリストのstyleオブジェクトに値を代入する必要があるのです。

elseコードブロック内部のforループには、もう1つの条件のセットが含まれます。最初の条件は、カウンターがlen-1すなわち3に等しいかどうかをチェックします。sizes配列には4つの要素があります。先頭が0なので、最後の要素はsizes[3]です。この要素に達していれば、これ以上要素はありません。したがって、コードは最初の配列要素（sizes[0]）からフォントサイズを作成します。

ループが配列の最後の要素に達していなければ、2番目の条件が評価されます。ここでは、現在の配列要素に'px'を結合したものがfontSizeに一致するかどうかをチェックします。一致しない場合、コードは無視され、一致するものが見つかるまでループが実行されます。一致した場合、カウンターの値に1が加算されてsizes配列の次の要素が取得され、それを基に文字列が作成されます。一致するものが見つかったら、ループはもう実行する必要がないので、breakキーワードでループを終了します。

このチュートリアルではJavaScriptの様々な概念を紹介しましたが、これは膨大で複雑なテーマの表面をなぞっただけに過ぎません。この記事の目的は、広く用いられているjQueryフレームワークについて解説する次の記事の理解に必要な基本知識を身につけていただくことです。jQueryを使用することの利点としては、異なるブラウザーの間の違いを吸収してくれることと、多くのWebデザイナーがJavaScriptを敬遠している理由である複雑さをかなりの程度軽減してくれることが挙げられます。

JavaScriptについてさらに詳しく学ぶには、Mozilla Developer Networkにある優れたガイドを参照してください。

また、Operaが提供しているWeb Standards Curriculumの"JavaScript core skills"の節にも包括的な内容の記事があります。