WebページのJavaScript

マンガで分かる JavaScriptプログラミング講座

マンガで分かる JavaScriptプログラミング講座 第2版



第3部 Webページのプログラミング
第16話:WebページのJavaScript

目次



マンガ
















マンガ台詞

【1Page】
ナビ:1学期が終わり 夏休みが終わり 2学期になった
遊:<夏休みの宿題を やらないという 究極の手抜きを実行>
麗:<夏休みの宿題を 全部自力でやった>
守:<宿題の多くを プログラムで処理>
先生:はー 俺の教えを 身に付けているのは 守だけか
遊:はいはい 学校で習うことなんて そんなものよ
    それで 2学期は 何をやるの?
    いよいよ応用?
    私はもう プログラムマスターよ 何でもどーんと来なさい
【2Page】
先生:そうだな
    2学期は Webページの JavaScriptを 教えていく
遊:あれ?
    今までさんざん ブラウザで動く プログラムを 書いていたわよね?
先生:でも Webページを 動的に動かしたりは していなかっただろ?
遊:…もしかして 私はまだ 初心者のまま?
先生:そうだ
遊:ガーン
    はー また 難しいことを やるのね
【3Page】
先生:今日は初回なので 簡単なことしか やらないぞ
遊:本当?
先生:ああ 本当だ
    今日説明するのは たったの2つだ
    1つ目はプログラムを
    HTMLファイルとは 別ファイルにする方法だ
遊:別ファイル?
先生:ああ プログラム部分を 分離するんだ
    プログラムが 長くなったり
    複数のWebページで 同じプログラムを 利用したい場合に 便利だ
        サーバー    JavaScriptファイル
            要求
        HTMLファイル    取得
        別のHTMLファイル    同じファイルを取得 便利!
【4Page】
遊:そんなことが できるの?
先生:ああ 簡単にできる 
    こう書けばよい
        <script type="text/javascript" src="out.js"></script>
    『out.js』というのが ファイル名だ
    『out.js』を HTMLファイルと 同じフォルダに置いて
    プログラムを書けばよい
    それじゃあ実例だ
        【sample.html】
        <html>
            <head>
                <script type="text/javascript" src="out.js"></script>
            </head>
            <body>
            </body>
        </html>
        【out.js】
        alert("別ファイル!");
【5Page】
遊:これだけ?
先生:ああ
遊:簡単ね
先生:だから 言っただろう
先生:2つ目は JavaScriptが 利用できない 場合の処理だ
麗:利用できないのに 何か行えるのですか?
遊:矛盾して いるわよね
先生:これも非常に簡単だ
        <script type="text/javascript">
            // 領域A
            documen.write("領域A");    【処理】
        </script>
        <noscript>
            領域B    【無視】
        </noscript>
    通常は『領域A』が処理されて 『領域B』は無視される
【6Page】
先生:ただし ブラウザで スクリプトがオフに なっていたりすると
    『領域A』が無視されて 『領域B』が処理される
        <script type="text/javascript">
            // 領域A
            documen.write("領域A");    【無視】
        </script>
        <noscript>
            領域B    【処理】
        </noscript>
遊:スクリプトが オフになっているのに 『領域B』はどうやって 処理されるの?
先生:たんに ブラウザに 表示されるだけだ
遊:あれま
先生:というわけで 今日教えるのは これだけだ
遊:うわっ 本当に 簡単だった
先生:だから 言っただろう
【7Page】
遊:じゃあ 今日は解散ね
    さあ 帰ろう!
遊:(先生にむんずと掴まれる)
先生:お前は居残りだ
    宿題が終わるまで 帰すなと他の先生に 言われているんだ
遊:えっ!?
守&麗:では 先生さようなら
先生:ああ
遊:は 薄情者〜!



説明

本章からは、『WebページのJavaScript』について学びます。JavaScriptは、多くの場合、Webページの中で使用します。そして、Webページ内でJavaScriptを実行する場合には、いくつかの約束事を知っておく必要があります。

本章では、2つのことを学びます。1つ目は、『外部JavaScriptファイルの指定の仕方』です。2つ目は、『JavaScriptが利用できない場合の処理』です。

それでは以下、それぞれを説明していきます。



『外部JavaScriptファイル』の指定の仕方

『外部JavaScriptファイル』を使う理由

HTMLファイルに、JavaScriptのプログラムを書いていると、次第にプログラム部分が長くなっていき、HTMLファイルの見通しが悪くなってしまいます。そういった場合、プログラム部分のファイルを分けて、別ファイルにしたくなります。

また別のケースとして、ファイルを分割したい場合もあります。

インターネット上にWebサイトを作る際、多くのHTMLファイルに同じプログラムを書くのは非効率的です。そして、全てのHTMLファイルにプログラムを書いた場合、プログラムに問題が発生して修正が必要になった際に、全部のHTMLファイルを書き直す必要が生じます。

こういった問題は、JavaScriptのプログラムを、別のファイルに分離すれば解決します。そして、HTMLファイルから、1つのファイルを参照させることで、メンテナンスを容易にすることができます。

『外部JavaScriptファイル』の基本

HTMLファイルでは、画像や音声といったファイルを読み込んで、Webページ上にレイアウトすることができます。これらのファイルと同じように、JavaScriptで書いたプログラムも、Webページに読み込んで実行することができます。こういった、HTMLファイルから読み込ませるJavaScriptのファイルを、『外部JavaScriptファイル』などと呼びます。

『外部JavaScriptファイル』は、拡張子『.js』のテキストファイルです。このファイルには、プログラム部分のみを記述します。『<html>』や『<head>』、『<script>』といったタグは必要ありません。

それでは以下、HTMLファイルから、プログラムの部分だけを取り出して、『外部JavaScriptファイル』にする作業の手順を示します。

『外部JavaScriptファイル』を作ってみる

まずは、元のHTMLファイル『sample.html』を掲載します。

<html>
    <head>
        <script type="text/javascript">
        <!--
        alert("ダイアログ表示");
        // -->
        </script>
    </head>
    <body>
    </body>
</html>

このHTMLファイルから、プログラム部分のみを取り出して、『外部JavaScriptファイル』にします。『out.js』という名前のテキスト・ファイルを作り、以下の文字列を記入します。

alert("ダイアログ表示");

このファイルには、HTMLファイルのタグは書き込みません。また、『<script>』タグの冒頭と末尾に書いていた『<!--』『// -->』といった、おまじないの部分も書きません。純粋にプログラム部分だけを記述します。

プログラム部分を切り離したあとのHTMLファイル『sample.html』は、以下のようになります。

<html>
    <head>
    </head>
    <body>
    </body>
</html>

さて、このままでは『sample.html』では、プログラムが実行されません。切り離したプログラムを読み込んでやらなければなりません。

HTMLファイルでは、外部の画像をWebページ上にレイアウトする際は『<img src="pic.jpg">』のようにタグを書きます。『外部JavaScriptファイル』も『<script src="out.js">』のようにタグを書き、外部から読み込みます。

以下、『外部JavaScriptファイル』をWebページに読み込むための、『<script>』タグの書き方です。

<script type="text/javascript" src="out.js"></script>

このタグを、『<head>』と『</head>』の間に書くことで、外部に切り離したJavaScriptのプログラムを読み込むことができます。以下、このタグを記入した『sample.html』を示します。

<html>
    <head>
        <script type="text/javascript" src="out.js"></script>
    </head>
    <body>
    </body>
</html>

これで、『sample.html』から、プログラム部分のみを取り出して、『out.js』に分離することができました。

『<script>』タグについての説明

以下、『<script>』タグの、『type』や『src』属性について説明します。

『type』は、書き換える必要のない部分です。『type="text/javascript"』と書いておけばよいです。この部分の意味は、「テキスト形式で、JavaScriptのプログラムが書いてある」となります。

『src』には、『外部JavaScriptファイル』のパス(保存場所)を書き込みます。このパスの書き方には、若干の注意が必要です。

以下、パスの書き方と、ファイルの配置の仕方について説明します。



パスの書き方とファイルの配置

同じフォルダの場合

HTMLファイルと『外部JavaScriptファイル』が同じフォルダ内にあるならば、『src="out.js"』のように、ファイル名だけで構いません。

 『src="out.js"』の場合のファイルの配置
 
 ■基準のフォルダ
 ┣○『sample.html』
 ┗○『out.js』

別のフォルダの場合

別のフォルダの場合は、『/』でパスの区切りを書いて、ファイルの場所を指定します。たとえば、『src="script/out.js"』ならば、HTMLファイルのあるフォルダを基準にして、『script』フォルダ内の『out.js』が読み込むファイルになります。

 『src="script/out.js"』の場合のファイルの配置
 
 ■基準のフォルダ
 ┣○『sample.html』
 ┗■『script』フォルダ
  ┗○『out.js』

また、『src="../script/out.js"』ならば、HTMLファイルのあるフォルダを基準にして、1つ上のフォルダ内にある『script』フォルダ内の『out.js』が、読み込むファイルになります。

『../』は、『1つ上の』という意味になります。『../../』なら、『2つ上のという意味になります。』

 『src="../script/out.js"』の場合のファイルの配置
 
 ■1つ上のフォルダ
 ┣■基準のフォルダ
 ┃┗○『sample.html』
 ┗■『script』フォルダ
  ┗○『out.js』

別のドメインの場合

『src』に記入するパスは、『http://』から始まるURLでも構いません。この時、HTMLファイルのあるドメインだけでなく、外部のドメインのURLも指定できます。たとえば、『src="http://〜/out.js"』のようにURLを指定すれば、指定したURLから『外部JavaScriptファイル』を読み込むことができます。

 『src="http://google.com/out.js"』の場合のファイルの配置
 
 ○http://crocro.com/sample.html
 
 外部のサーバー上にある『外部JavaScriptファイル』
 ○http://google.com/out.js



JavaScriptが利用できない場合の処理

HTMLファイル内でJavaScriptを使う際に、注意しなければならないことがあります。それは、全てのWebブラウザがJavaScriptを実行できるわけではないということです。たとえば、JavaScriptに未対応のブラウザもあります。また、セキュリティ上の理由から、普段はJavaScriptを使用しないようにしている人もいます。

そのため、JavaScriptが実行できることを前提にHTMLファイルを作っていると、何も表示されなかったり、意図せぬ表示になってしまったりすることがあります。

そういったことを避けるために、JavaScriptが利用できない場合の処理を書く方法が、HTMLファイルには用意されています。この方法には、『<noscript>』というタグを使います。

『<script>』タグと『<noscript>』タグは、表裏一体の関係になっています。JavaScriptが使える環境では、『<script>』タグの中が処理されて、『<noscript>』タグの中が無視されます。逆に、JavaScriptが使えない環境では、『<script>』タグの中が無視されて、『<noscript>』タグの中が処理されます。

【JavaScriptが使える環境】
<script type="text/javascript">
    // 領域A
    documen.write("領域A");    【処理】
</script>
<noscript>
    領域B    【無視】
</noscript>
【JavaScriptが使えない環境】
<script type="text/javascript">
    // 領域A
    documen.write("領域A");    【無視】
</script>
<noscript>
    領域B    【処理】
</noscript>

『<noscript>』タグの中には、プログラムを書いてはいけません。この領域に書いた内容は、JavaScriptが使えない環境で表示されるからです。ここには、普通の文章や、HTMLファイルのタグを書きます。



『文字コード』について

読み込んだ『外部JavaScriptファイル』が、正しく動作しない場合

以下、読み込んだ『外部JavaScriptファイル』が、正しく動作しない場合のための情報です。

『外部JavaScriptファイル』が正しく動作せず、ファイル内に日本語が書いてある場合は、以下を試してみてください。

<script type="text/javascript" src="out.js" charset="Shift-JIS"></script>

『<script>』タグに、『charset="Shift-JIS"』を追加しています。Windowsで作成したファイルなら、これで正しく動くことがあります。

この『charset』には、『文字コード』を指定します。Windowsでは、『Shift-JIS』と呼ばれる『文字コード』が利用されています。

『文字コード』

さて、『文字コード』とは何でしょうか? 『文字コード』は、テキストファイルのデータ形式です。

コンピュータでは、全てのデータを『0』と『1』の集合で表します。これは、テキストファイルも例外ではありません。この『0』『1』のデータを、人間が読める文字にして、コンピュータは文章を表示しています。

例えば、『cat』という文字列は、コンピュータの内部では、以下の『0』『1』の集合になっています。

文字列cat
2進数表記110001111000011110100
16進数表記636174
 2進数とは『0,1』という2つの文字で数を表したものです。
 
 16進数とは『0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F』という16の文字で数を表したものです。
 
 10進数は『0,1,2,3,4,5,6,7,8,9』という10種類の文字で数を表したものです。
 通常人間が使っているのは10進数です。

この文字と数字の対応は、半角英数字では1つしかありません。

しかし、日本語では、いくつかの対応が世の中にあります。『Shift-JIS』は、そういった対応の1つで、Windowsで主に利用されています。また、異なるOSでは、異なる文字の対応が使われています。

こういった事情があるために、他のOSで書いたWebページから、Windowsで書いた外部JavaScriptファイルを読み込むと、対応を取り違えて、正しく読めなかったりします。

みなさんも、Webページの文字化けを体験したことがあると思います。そういったことが、外部JavaScriptファイルでも起こることがあります。もし、そういったことが起こるようなら、『<scrpit>』タグに『charset』を追加してみてください。

代表的な『文字コード』

以下、代表的な『文字コード』を示します。また、いくつかの文字と数字の対応を、表で示します。

代表的な文字コード
charset説明
Shift_JISWindowsで利用される
EUC-JPUNIX系のOSで利用される
UTF-8Linux系のOS(Mac OSXを含む)で利用される
半角英数字の対応は1種類しかない
半角英数字ABC
16進数表記414243
全角文字の対応は数種類ある(代表的な文字コード分)
全角文字
Shift-JISの
16進数表記
82 A082 A282 A4
EUCの
16進数表記
A4 A2A4 A4A4 A6
UTF-8の
16進数表記
E3 81 82E3 81 84E3 81 86



プログラム中から、動的に『外部JavaScriptファイル』を読み込む

先に説明した方法では、『<script>』タグを使い、外部ファイルを読み込みました。この方法では、そのファイルを読み込むか、読み込まないかを、プログラム内で選択することはできません。

この選択は、少し高度なプログラムを書けば行うことができます。ただし、ここまでの時点では、まだ学習していない内容が含まれるので、とりあえずは読み飛ばしてください。一通り学習が進んだ時点で、興味があれば読んでみてください。

以下、動的に『外部JavaScriptファイル』を読み込む方法の一例です。書き方は一様ではありません。様々な方法で、プログラムを書くことができます。下記のプログラムの意味がすぐに分かるようになれば、かなりのレベルになっていると、言えるでしょう。

<html>
    <head>
        <script type="text/javascript">
        <!--
        // 『外部JavaScriptファイルの読み込み』
        // 使い方:
        // .addJS(src)    
        //    外部JavaScriptファイルの追加。
        //    引数1:『src』パス
        //    戻り値:自分自身
        // .setDo(func)    
        //    実行処理の設定。
        //    引数1:『func』関数
        //    戻り値:自分自身
        // .start()
        //    スクリプトのロードが完了すれば、
        //    追加した実行処理を行う。
        //
        var LoadJS = new function() {
            this.srcArray = new Array();
            this.func = new function(){};
            this.addJS = function(src, checkObj){
                this.srcArray.push(src);    // 新しいスクリプトを追加
                return this;    // メソッド チェーン
            };
            this.setDo = function(func){
                this.func = func;    // ロード完了時の処理を設定
                return this;    // メソッド チェーン
            };
            this.start = function(){
                // 処理の開始
                this.loadScript();
            };
            this.loadScript = function(){
                // スクリプトの読み込み
                var script = document.createElement("script");
                script.setAttribute("type", "text/javascript");
                script.setAttribute("src", this.srcArray[0]);
                this.srcArray.shift();
                var this_ = this;
                if (window.ActiveXObject) {
                    script.onreadystatechange = function(){
                        if ((script.readyState == 'complete')
                         || (script.readyState == 'loaded')
                        ) {
                            this_.callback();
                        };
                    };
                } else {
                    script.onload = function(){
                        this_.callback();
                    };
                }
                document.body.appendChild(script);
            };
            this.callback = function(){
                // ロードが終わったら実行関数を処理
                if (this.srcArray.length == 0) {
                    this.func();    // 終了
                } else {
                    this.loadScript();    // 続けて読み込み
                }
            }
        }

        // 初期化処理
        function init(){
            LoadJS
            .addJS("out1.js")
            .addJS("out2.js")
            .setDo(function(){
                alert("その1");
                out1();
                alert("その2");
                out2();
            })
            .start();
        }
        // -->
        </script>
    </head>
    <body onLoad="init();">
    </body>
</html>

以下、『out1.js』の中身です。

function out1() {
    alert("別ファイル その1!");
}

以下、『out2.js』の中身です。

function out2() {
    alert("別ファイル その2!");
}



サンプルの入手

以下は、今回出てきたサンプルです。

ZIPでまとめてダウンロード (右クリックから保存してください)

sample1.html』(外部JavaScriptを読み込み)を表示

out.js』(外部JavaScript)(右クリックから保存してください)

sample2.html』(noscript)を表示

sample3.html』(外部JavaScriptの動的読み込み)を表示

out1.js』(外部JavaScript)(右クリックから保存してください)

out2.js』(外部JavaScript)(右クリックから保存してください)

プログラムの中身を見たい場合は、それぞれのHTMLファイルをブラウザで開いたあと、右クリックをして『ソースの表示』を選択してください。

メモ帳で、ファイルの中身を見ることができます。

≫ 「マンガで分かる JavaScriptプログラミング講座」トップに戻る


『柳井政和』 の初心者向け講座

『柳井政和』 のサイト

マンガで分かる Java入門講座
Javaのオブジェクト指向を解説するサイトです。
Webページ100ページ以上、マンガ800ページ以上で
解説を行っています。


PuzzleAndGame.com
JavaScriptで作ったゲームが中心のサイト。
タワーディフェンス、リバーシ、パズルゲームなどを公開。
Webブラウザ、PCアプリ、Androidアプリとして動作。


クロクロ・ツールズ
全てJavaScriptで作られた、ブラウザから利用できる各種アプリケーションです。
HTML5に対応しているモダンブラウザから使えます。
ブックマークに入れるなどして、ご利用ください。


『柳井政和』 執筆の本

「顔貌売人 ハッカー探偵 鹿敷堂桂馬」
文藝春秋より発売(2017年8月7日、予約可能)。
プログラマーが探偵役のエンタメ・ミステリー第2弾。
最先端の情報犯罪に安藤と鹿敷堂が挑みます。


「裏切りのプログラム ハッカー探偵 鹿敷堂桂馬」
文藝春秋より発売(2016年8月27日発売、予約注文可能です)。
2016年の松本清張賞で、最終候補に残った小説です。
プログラマー鹿敷堂桂馬が、女性社長の安藤裕美とともに、
IT業界で起きた事件の解決に挑みます。
プログラマーが探偵役のエンタメ・ミステリーです。


「マンガでわかるJavaScript」
本講座が書籍になりました。 本用に、より分かりやすく、読みやすく、再構成して書き直しました。
よければ、手にとっていただけると嬉しいです。
秀和システムより発売。


「プログラマのためのコードパズル〜JavaScriptで挑むコードゴルフとアルゴリズム」
コードゴルフやアルゴリズム問題、その解説、関連知識の紹介を行った本です。
プログラマーなら、楽しめる内容になっています。
技術評論社より発売。


「JavaScript 仕事の現場でサッと使える! デザイン教科書」
プログラミング初心者向けに、様々な利用例を元に、プログラムとJavaScriptを解説する本。
プログラム自体が初めての方にも、なるべく分かりやすいように書いています。
技術評論社より発売。


『柳井政和』 開発のWebアプリやソフトなど

PuzzleAndGame.com
全自動4コマ
全自動百科事典(オートペディア)
全自動似顔絵
新刊・新作カレンダー
EX リバーシ
全自動迷路
めもりーくりーなー
ラジオ・ブラウザ
PCソフト
マンガで分かる JavaScriptプログラミング講座
スクリーンセーバー「なう」
開発元:クロノス・クラウン




Cronus Crown(クロノス・クラウン)のトップページに戻る
(c)2002-2017 Cronus Crown (c)1997-2017 Masakazu Yanai
このWebPageに関するご意見・お問い合わせは
サイト情報 - 弊社への連絡 -
までお願いします。