JavaScript 入門編

  JavaScript は Web ページにて複雑なことをできるようにするプログラミング言語です。 ちなみに、JavaScript は、 Web ページが読み込まれるたびに、更新されたコンテンツの定期表示や、インタラクティブな地図や、2D/3D グラフィックのアニメーションや、ビデオのスクロールなどを実行するために利用されています。

 ブラウザにWeb を表示するにためには、HTML(Hypertext Markup Language)というマークアップ言語で記述されたhtml ファイルが必要です。HTML はプログラミング言語ではありません。マークアップ言語と言って、コンテンツの構造を決めるものです。 HTML は 要素(エレメント)の集まりでできています。その構造をDOM(Document Object Model)と言います。要素(エレメント)とは様々なコンテンツがどのように見えるか、またどのように動くかを表現するためにタグで囲まれたまとまりとして記述されます。タグは言葉や画像を表示したり、他のページに移動するハイパーリンクを作ったり、文字を斜体にしたり、大きくしたり小さくしたり、色々なことが出来ます。段落や見出しや表を定義したり、ページに画像や動画を入れたりします。

 それ以外に、CSS というスタイリング用言語が必要です。CSS は本当のプログラミング言語ではありません。またマークアップ言語でもありません。CSS はスタイルシート言語です。つまり HTML 文書の要素に選択的にスタイルを適用できます。 例えば背景とフォントの色を設定したり、複数カラムにコンテンツをレイアウトしたりします。

 JavaScript (JS) は動的なウェブページの記述用途として主にクライアントサイドで使用されるプログラミング言語です。しかし、JavaScript と ブログラミング言語 Java とは異なります。"Java" と "JavaScript" のどちらも米国その他の国での Oracle の登録商標です。しかしながら、この2つのプログラミング言語はとても違う文法、セマンティクス、用法を持っています。

 1996年11月、 JavaScript を工業規格にしようと Netscape 社は ECMA International とともに作業を始めました。その後、標準化された JavaScript は ECMAScript と呼ばれ、 ECMA-262 として仕様が規定されており、2018年6月には最新の第9版 (ES2018) が完成しました。JavaScript は動的にコンテンツを更新したり、マルチメディアを管理したり、その他多くのことができるスクリプト言語です。オブジェクト指向言語と言えます。

 HTML5で新しく登場したタグを使用すると、web画面に動画や音声を簡単に追加でき、canvas要素を使用するとインタラクティブな画面要素、例えば、ゲーム、アニメーション、グラフ作成、画像構築などを簡単に作成できます。こうしたプログラムを実装するために、GPU の処理能力を利用した高性能な2D/3Dコンピュータグラフィックスを作成するAPIとして WebGL が登場しました。現在の主要なブラウザは WebGL のサポートをしています。しかしながら、JavaScript から直接 WebGL を使用してプログラミングして、3Dアニメーションなどを表示させることは非常に複雑な作業です。JavaScript 3D ライブラリの Three.js を利用すると WebGL を介した3Dアニメーションが容易に作成できます。

 このページでは、Three.js をスムーズに利用できる程度の能力を得るために必要な、JavaScript の基本的な使用法について説明します。HTML言語の詳しい知識を持っている必要はありませんが、入門的なタグの使用については理解する必要があります。HTML と CSSの簡単なチュートリアルをはじめに紹介します。JavaScriptの文法などの詳細なTutorialsについては、mozilla.orgのJavascriptページを参照ください。

(Last updated:2019/7/16)



***********************************
HTML の簡単なTutorials
***********************************


 最初に、HTML の記述に関する基本構造について復習しておきます。HTML は要素(エレメント)の集合体でできています。要素とは様々なコンテンツがどのように見えるか、またどのように動くかを表現するためにタグ(tag)で囲まれたまとまりです。HTML で必ず登場するタグは

などです。各要素は<タグ名>で始まり</タグ名> で終わります。例外は、<!DOCTYPE html>タグ、 <meta> タグや画像の<img>タグなどです。以下に簡単な例を挙げます。


  • <!DOCTYPE html>タグはページの1行目に配置するタグです。歴史的な経緯でそうなっています。
  • <html>タグの要素はページのすべてのコンテンツを囲み、ルート要素とも呼ばれます。
  • <head>要素は HTML ページの、閲覧者に向けて表示されないコンテンツをまとめるための入れ物です。この要素は検索エンジン向けのキーワードや説明書き、ページの見た目を変更するための CSS、文字コードの情報などを含みます。
  • <meta>要素は文書に対し文字コードを UTF-8 に設定しています。 UTF-8 には全世界の言語の殆どの文字が含まれています。基本的には指定することにより文書に書いたテキストコンテンツを扱うことが出来ます。
  • <title>要素はページのタイトルを指定しています。このタイトルはページが読み込まれた時にブラウザのタブに表示され、ブックマーク(お気に入り)に登録した時の名前にもなります。
  • <body>要素はページの閲覧者に対して見せたいものすべてを含みます。文字、画像、ビデオ、ゲーム、再生できる音楽など、すべてです。
  • <p>要素は文章の段落(パラグラフ)であることを示します。<strong>要素は文字を強調するためのフォント拡大のタグです。
  •  また、要素は属性 (Attribute)を持つことが出来ます。<html>タグにある lang="ja" は属性を用いて使用する言語を日本語にすることを宣言しています。<meta>タグの charset = "utf-8" も属性の定義です。

     <img>要素は、指定された画像ファイル(src="images/test_image.png")をweb ページに埋め込み、その画像の名称を alt="test_image" で定めています。この alt 属性は省略可能です。組み込んだ画像の大きさを指定するときは、属性 width を使って、width =500というように幅のピクセル数を指定します。

     基準スタイルシート言語と基準スクリプト言語の指定は以下のように行います。

     このmeta要素の記述は、文書のデフォルトのスタイルシート言語とスクリプト言語を指定します。タグに直接style属性でスタイルシートを指定する場合などに、ここで指定した言語であると解釈されます。多くの場合、これらの指定をしなくてもブラウザが自動的に判断しますが、誤動作を避けるためにも記述しておく方が望ましい。

     多くのウェブのコンテンツには多数のリストが使用されており、 HTML にはリストを表すための特別な要素が用意されています。リストは最低 2 つの要素を組み合わせて生成します。主要なリスト形式として番号付きリストと番号なしリストがあります。番号なしリストは、お買い物リストのようにアイテムの順番が特に関係ない時に使います。番号なしリストは <ul> 要素で囲みます。番号付きリストは料理のレシピのようにアイテムの順番が関係ある時に使います。番号付きリストは <ol> 要素で囲みます。リストの中に入るそれぞれのアイテムは <li> (list item) 要素の中に書きます。例えば、以下のように書きます。

    このコードを実行すると、以下のように表示されます。

    Webの例

     HTML では <h1> から <h6> の6段階の見出しの要素タグが用意されています。見出し要素は文書中の見出し、小見出しを指定することができるものです。通常の書籍でも主題、章題、副題があります。 HTML でも同じことが出来ます。

    のように使います。

     自分で作成した多数の web ページあるいは必要な他者のweb にリンクを貼ることは重要です。 これが多数のウェブページから構成されるひとつのウェブサイトにします。リンクを追加するには、シンプルな要素 <a> を使えばよいです。 a は "anchor" を省略したものです。

    の様に使用します。アドレスの先頭にある https:// や http:// の部分 (プロトコルと言います) は必ず書きます。ただし、HTML ファイルと同じ、あるいは、サブフォルダーにあるファイルにリンクを貼るときは、省略できます。

     HTML で頻繁に目にするのは表(table)の表現です。表は <table> タグを用いて作成します。このタグには数々の要素と属性が表の装飾目的のためにあります。スタイリング用の CSS と組み合わせて、HTML は Web 上に、学校の授業の計画や、水泳の時間割や、好きな恐竜やフットボールチームの統計情報といった、情報の表を簡単に作成できます。表(テーブル)は、文字通り、行と列からなる構造化されたデータの集合 (表形式のデータ) です。

     すべての表データは、 <table> </table> という2つのタグで囲んで作成します。HTML ファイルの <body> </body> 中に記述します。表の各行の列のデータは <td> </td> のなかに挿入します。これが行列の一つのセルを構成します。 td は table data を意味します。一つの行は <tr> </tr> で囲みます。 tr は table row を意味します。

    このコードは3行3列の表を作成します。web 上では以下のように表示されます。

    太郎 12歳 男子
    次郎 10歳 男子
    花子 8歳 女子

     このままの表示では非常に醜いテーブルですので、見やすいようにテーブルの表示に何らかの装飾を施す必要があります。このために、CSS ファイルを使うのが常套手段ですが、ここでは別な手立てを使います。 table 要素のプロパティを以下のように設定してみます。

    このファイルを実行すると、テーブルの表示が色付きなります。

    太郎 12歳 男子
    次郎 10歳 男子
    花子 8歳 女子

    表の印象がかなり変化します。このほうが読みやすいと思います。

     最後に、マルチメディアをWeb ページに埋め込むための基礎を簡単に説明します。様々なタイプのマルチメディアもありますが、HTML5の <video> 要素と <audio> 要素を使用して、動画や音声をページに埋め込む方法を説明します。Mozillal.orgが提供している Web 入門サイトに準拠して説明します。 <video> 要素を使用すると、動画を非常に簡単に埋め込むことができます。本当に簡単な例は次のようになります。

     <img>要素と同じように、src (ソース) 属性には、埋め込みたい動画へのパスが含まれています。属性controls は、ユーザが、動画や音声の再生を制御するために必要になります。controls 属性を使用してブラウザ独自のコントロールインターフェイスを組み込むか、適切な JavaScript API を使用してインターフェイスを構築する必要があります。この詳細については、ここでは無視してください。<p> タグは代替コンテンツと呼ばれ、ページにアクセスしているブラウザが <video> 要素をサポートしていない場合に表示されます。Safari や Internet Explorer などのブラウザで上記のライブのリンクにアクセスしたなら、動画は再生されません! これは、さまざまなブラウザが異なる動画 (および音声) のフォーマットをサポートしているためです。

     動画 (および音声) のフォーマット MP3、MP4、WebM などの形式はコンテナフォーマットと呼ばれます。これらのフォーマットは、動画と音声を管理可能なファイルに圧縮するために必要です (生の動画と音声は非常に大きいので)。ブラウザには、大まかには、Vorbis や H.264 の2種類のコーデックが含まれています。これらのコーデックは、圧縮された音声と動画を2進数字に変換して戻すために使用されます。残念ながらブラウザはすべて同じコーデックをサポートしているわけではないので、メディアをデコードするために適切なコーデックがない場合、再生されない。2種類のコンテナフォーマットに対応させるためには、以下の様に記述します。

    このコードを用いた動画をここをクリックして再生してくだい。

     <audio>要素は、<video> 要素とまったく同じように動作しますが、若干の違いがあります。簡単な例は次のようになります。

    Mozillaが提供するGithubから音声デモを再生できます。


    ********************************
     CSS の簡単なTutorials
    ********************************


     CSS (Cascading Style Sheets) は、Web ページのスタイルを設定するコードです。ここでは、始めるのに必要な最小限の基本を紹介します。CSS はスタイルシート言語です。つまり HTML 文書の要素に選択的にスタイルを適用できます。例えば、HTML ページのマークアップ要素<h1>を選択し、その中のテキストを赤色にするには、次のような内容の CSS ファイルを作成します。

    このファイルを、style.css という名称のCSS ファイルとして保存します。CSS を HTML 文書に適用する必要があります。そうしないと CSS のスタイリングはブラウザの HTML 文書の表示方法に影響しません。そこで、HTML ファイルの<head>タグの間に、

    と貼り付けます。ブラウザでHTML ファイルを開くと、マークアップの文字が赤色になっていると思います。

     CSS の記述の先頭にある h1 はスタイルを設定する要素を選択しているので、セレクタ(slector)と呼ばれます。
    color: red;
    のような単一の記述文で、要素のプロパティのうちどの部分をスタイルするかを指定します。これを宣言(declaration)と言います。各記述文 (セレクタを除く) は中括弧 ({}) で囲みます。各宣言内ではコロン (:) を使用してプロパティを値から分離する必要があります。複数のプロパティを指定するときは、各セット内でセミコロン (;) を使用し、各宣言を次の規則と区切る必要があります。したがって、一度に複数のプロパティ値を変更するには、セミコロンで区切って次のように記述します。

     ページの HTML 要素のほとんどはお互いの上にあるボックスと考えることができます。CSS を用いて、ボックスのサイズ・色・位置などを設定することができます。ページ上の各ブロックは、次のようなプロパティを持ちます。

     また、要素のプロパティには以下のものもあります。

     例2で設定される場合、すべての h1 要素と p 要素のスタイルは同一となります。文書内のそれぞれの場所で使用するタグのスタイルを変えたいケースも多々あります。その場合、 id 名、あるいは、class 名を指定してスタイルを設定します。しばしば用いられる div 要素と nav 要素で例を説明します。

     これに対応するスタイル設定は以下のように指定します。

    セレクターの頭に記号 # を付加する必要があります。 # は id 名に対応したスタイル設定をする時に対応します。このコードを実行すると、以下のようなWeb ページになります。

    CSSの例

     上で説明したように、各要素のスタイル設定をCSS ファイルを別ファイルにして行うのが一般的ですが、スタイル設定が簡単なケースでは、HTML ファイルの head 要素内に <style> と </style> で囲んで、CSSコードを書き込む方法もあります。例えば、nav 要素のスタイル設定のコードを以下のように設定することができます。

     このスタイル設定は、このホームページでナビゲーション・メニューを表示するために使用されています。nav タグで id="navi" で指定された名称 "navi" に対応した #navi でスタイルが設定されています。ナビゲーションのメニューリストを、横方向に(水平に)表示するためのスタイル設定です。

    簡単なCSS設定の実際のページ

    簡単にスタイル設定を行う例です。

     これは、CSS ファイルを読み込まずに、簡単にスタイル設定を行うケースの一例です。このようにして、背景やフォントの色を設定したり、複数カラムにコンテンツをレイアウトしたりします。CSSのスタイルコードを用いて、各要素のスタイルを様々な形状や色彩で設計することができます。

     以上の知識があれば、簡単なホームページ程度は作成できると思います。


    **************************************************************
    HTML ファイルと JavaScript プログラムの関係
    **************************************************************

     web ページはテキストファイルであるHTML ファイルに記述します。JavaScript ファイルはHTML ファイルのscript エレメント(<script> 〜 </script>)部分に記述します。HTML ファイルがコンピュータのweb ブラウザに読み込まれると、web ブラウザがプログラムを解釈して実行します。web ブラウザの中には、JavaScript エンジンというjavaScript プログラムを解釈して実行するインタプリタ機能がインストールされています。

     JavaScript機能のブラウザ間での互換性を維持するために、Ecma International という標準化団体によってECMAScript として標準化されています。現在の主要なweb ブラウザは、このECMScriptに準拠しています。

     JavaScript はオブジェクト指向言語に分類される言語です。オブジェクト指向言語はオブジェクトと呼ばれる対象に操作や処理を加えます。処理対象となるオブジェクトを具体的に生成するために、インスタンスと呼ばれる変数を生成します。このインスタンスに処理を加える操作をメソッドと呼びます。

     ここで、JavaScript の簡単な例を見てみましょう。まずは 以下のファイルをコピペして、名前をつけて自分のコンピュータに保存します。拡張子は .html にしてください。

    script要素内に JavaScript が書いてあります。「// JavaScript をここに書きます」と書いてあるすぐ下に挿入されているコードがjavaScriptのコードです。// 以降はコメントです。document.write はdocument オブジェクトに用意されているメソッドwrite() で、引数にある文字列をwebに表示します。このファイルをブラウザで開いてください。

    JavaScript を始めよう

    JavaScript の学習

    のように表示されます。

     次に、もう少し複雑なコードを取り上げます。以下のファイルをコピペして、HTMLファイルとして保存してください。

    <div id="myJava" style="height:100px"> </div> は、id が "myJava" と指定された空の div エレメントを定義しています。このHTMLファイルをブラウザで開いてください。以下のようなWebページが開きます。

    JavaScriptの例2

    web にこのように表示されるでしょう。

     JavaScriptを別ファイルにして、これを読み込むときは、以下のようにhtmlファイルのscriptエレメントを修正します。


    scriptエレメントを別ファイルにして、ファイル名をexample.jsとして保存します。

    ファイル名は適当でも、javascriptファルの拡張子は .js でなければいけません。

     最後に、キーボード入力を使う少し高等な例を挙げます。まずは 以下のファイルをコピペして、名前をつけて自分のコンピュータに保存します。

      Web ブラウザでそのファイルを開くと、以下のようなWebページが開きます。

    JavaScript の例3

    Botton をクリックする例



    クリックできるボタンが 1 つあるWeb ページを作る HTML だということがわかります。

    「ボタンが押されました!」

    と表示されます。クリックを繰り返すごとに、このメッセージが表示されます。 JavaScriptのインスタンスなどの使用については後ほど説明しますので、ここでは、この例のコードの内容が理解できなくても結構です。


    **************************************************************
    Canvas 要素を用いた描画
    **************************************************************

     <canvas> 要素は、一般的に JavaScript を使って図形を描くために使われる新しい HTML 要素です。例えば、グラフを描く、写真を合成する、または簡単な (またはあまり簡単ではない) アニメーションに使うことができます。このセクションでは、2D グラフィックスを描画するために <canvas> 要素を使用する方法を、基礎から説明します。

     以下のように使います。

    <canvas> は <img> と似ています。src 属性と alt 属性がない点が明確に異なりますが、width と height の属性がある点などは共通しています。 これらの属性を必ず指定する必要はありません。このほかに様々な DOM 属性を利用できます。 width と height 属性が指定されなかった場合、canvas は幅 300 ピクセル、高さ 150 ピクセルの要素として初期化されます。

     <canvas> は固定された大きさの描画可能領域を作成できます。この領域は、1 つ以上の描画コンテキストとして表現され、そのコンテキストを通じて描画領域を操作します。このチュートリアルでは、2 次元グラフィックスを描画するためのコンテキストについてのみ解説します。3次元グラフィックスを描画するための典型例が WebGL です。これは OpenGL ES に基づいた 3 次元グラフィックスを扱える描画コンテキストです。

     初期状態での canvas には何も描画されていません。ここに描画を行うには、まず JavaScript で描画コンテキストを取得する必要があります。 <canvas> 要素の getContext() を呼ぶことで、描画コンテキストは取得できます。呼び出す際の引数によって、取得されるコンテキストの種類が変わります。"2d" を指定することで、2 次元のグラフィックスを扱える描画コンテキストが取得できます。

     最初の行では document.getElementById() メソッドを呼んで、DOM 中から <canvas> 要素をあらわすノードを探しています。id="sample" で指定されたcanvas 要素のことです。2 行目では見つけた要素の getContext() メソッドを呼んで、描画コンテキストを取得しています。

    <canvas> 要素に対応していないブラウザでは、代替コンテンツが表示されます。JavaScript からは getContext() メソッドの有無を調査することで、ブラウザが対応しているかどうかを確認できます。確認するためのコードは以下のようになります:

    以上の点をまとめたサンプルコードは以下のようになります。

    スクリプト中の draw() 関数はページのロード完了時に一度だけ呼び出されます。これは、document の load イベントを利用しているためです。他の関数同様、 window.setTimeout() や window.setInterval()、他のイベントハンドラから呼び出すことができます。ページがロードされた時にのみ呼び出されます。

     手始めに単純な例を見てみましょう。次の例では重なり合う 2 つの四角形が描画されます。そのうちの 1 つは透明度が設定されており、下の色が透けて見えます。この例がどのように動作しているかは、以下で解説します。


    このコードを実行すると、以下のような描画が表示されます。

     Canvas 要素を用いて描いた簡単なWeb 上の描画の例を下にあげます。

    このコードを実行すると、以下のようなWeb が表示されます。

    ここをクリックすると新しいWeb ページが開きます。

    **************************************************************
    JavaScript プログラムの基本文法
    **************************************************************

     ここでは、JavaScrip の基本を説明します。上で挙げたscript の例が容易に理解できるレベルに行きましょう。最初に、ブラウザのコンソールの使用方法について説明します。ブラウザを開くと、開発者ツールというメニューバーがあります。例えば、Safari では、「開発」という名前のいうメニューバーがあります。Javascript用のconsoleをは開くと使用出来ます。

     変数の定義は以下のようにします。

    var 変数名; または var  変数名 = 値;

    変数名に値を与えないときは、変数名だけを定義して、内容は undefined と示されます。値は、数値もしくは文字列です。ブラウザでコンソールを開いて、以下の文を入力します。文の最後はセミコロン ; で終わります。

    このように定義された変数(オブジェクトのインスタンス)にはプロパティと呼ばれる属性があります。何らかの処理を行う属性はメソッドと呼ばれます。文字列のプロパティの一つに長さを表示する機能 length があります。

    の形式で利用します。21 と表示されるはずです。数値データでは利用できません。

     window オブジェクトおよびdocument オブジェクトは頻繁に活用されるオブジェクトで、ユーザーが定義しなくても、ブラウザの起動と同時に自動的に用意されて利用可能になるオブジェクトです。windowオブジェクトでよく使用されるメソッドは

    alert() 、prompt() 、confirm()

    です。prompt() は web ページに入力用ウインドを生成して、ユーザーからの文字列入力を待ちます。document オブジェクトには、

    anchors 、title 、 body 、cookie 、documentURI 、lastModified

    などのプロパティが用意されています。メソッドには

    open() 、close() 、write() 、getElementById() 、createElement() 、appendChild() 、 querySelector

    などがあります。例えば、

    のように使用します。windowオブジェクトは最上位のオブジェクトなので、window. の部分は省略可能です。

     また、特殊なオブジェクトの一つにConsole オブジェクトというものが利用可能です。ただし、ここでいうコンソールとは開発ツールにあるjavascriptコンソールパネルのことです。このコンソールに文字列を表示させるメソッドが console.log() です。

    console.log('今年は2019年です');

    のように使用します。

     通常の四則演算の記述はプログラミングでは常識的な方式です。以下にある通り、特殊な表記法もあります。

     繰り返し値を足したり引いたりしたいときがあリます。そんなときに便利なのがインクリメント演算子 (++) とデクリメント演算子 (--) です。使い方は、上の例のように書きます。

     コーディングにおいて、不可欠なコンセプトが関数です。関数を使用することで、特定の処理を行うプログラムを定義し、いつでも簡単なコマンドで呼び出すことを可能にしてくれます。JavaScript言語にはたくさんの組込み関数があるので、いろいろな処理を、全部を自ら全部書かなくてもすみます。実は、JavaScript の組み込み関数以外に、ブラウザーに組込まれた関数もあります。今までの例においても、ブラウザーに組込まれた関数をたくさん使ってきました。ブラウザ組込み関数は関数ではありません。それらはオブジェクトのメソッドと呼ばれています。

     ここでいう関数とはプログラマー自身がJavaScript を用いて作成する関数のことです。以下の様式で作成します。

    function  関数名(オプション) {
    	関数を定義するコード
    }
    

    具体的な例を見ましょう。

     この例は引数(オプション)のない関数です。名前のない関数を作る事もできます。これは匿名関数と呼ばれます。匿名関数は、以下の例のように、よくイベントハンドラで使われていています。匿名関数を変数の値として代入すこともできます。

     様々な場面で、true または false を判定し、その結果によ処理を変更したい時があります。そのようなことをするために比較演算子を使用します。比較演算子には以下のようなものがあります。Mozilla Doc からの引用です。

    演算子 名前 目的
    === 厳密な等価 右辺と左辺が厳密に同一の値であるかを判定します 5 === 2 + 4
    !== 厳密な不等 右辺と左辺が厳密に同一の値ではないことを判定します 5 !== 2 + 3
    < 小なり 左辺の値が右辺の値より小さいこととを判定します 10 < 6
    > 大なり 左辺の値が右辺の値より大きいことを判定します 10 > 20
    <= 以下なり 左辺の値が右辺の値以下であることを判定します 3 <= 2
    >= 以上なり 左辺の値が右辺の値以上であることを判定します 5 >= 4

    これらの比較演算子は条件文の中で頻繁に使用されます。JavaScript において、条件文と呼ばれるものがどのように動作するかを説明します。最初に if 文から説明します。

    if (条件式) {
      条件式が true の場合に実行されるコード
    } else {
      それ以外の場合に実行されるコード
    }
    

    このように書きます。比較演算子はこの条件文の中で使用されます。以下に例をあげます。

    ここをクリックしてweb ページを開いてください。

    この例では実行結果は 2 つだけでしたが、もっと選択肢がある場合はどうでしょうか?このケースでは、else if を使って、追加の選択肢を if...else に繋ぐ方法があります。追加の選択肢 if() { ... } 文を else の後ろに続けて挿入する必要があります。

    if (条件式1) {
      条件式1が true の場合に実行されるコード
    } else if (条件文2) {
      条件文2が true の場合に実行されるコード
    }else{
    	条件文1、2が否定された時実行されるコード
    }
    

    このように記述します。以下に、その一部を紹介します。

    このコードをクリックすると上の例のweb が表示できます。

    ----- 続く ------




    JavaScript の応用編に続く:JavaScript で WebGL

    トップページに行く