JavaScriptのabc
1.JavaScripへの入り口


● JavaScriptは、JAVAではない!


例えば・・・「グレープフルーツ」(かんきつ類)は「グレープ」(ぶどう)ではない!。

 

昔々アメリカにNetscapeさんと言う会社があり、自社のWebブラウザー用にScript言語を開発しました。これがとてもよくできており評判になりました。その頃業務提携していたSunMicro社から「わが社の主力ソフトJAVAの名前を使わない?」と話しがあったので、「JavaScript」」に名前を変えたとさ。

イラスト

● JavaScriptの書き方の基本


イラスト

 

すでに使用中のHTML文書を開き、不要な中味を全て抜いて下の様なjssample1.htmlをつくりました。

水色のバックライト部分がJavaScriptを書き込む候補場所です。

プログラム

何をどう書けば良いのかな?

2つに分けて考えましょっ

1.必須の習慣・・・<meta>タグを「JavaScript書き込み候補場所1」に書き込む

<meta http-equiv=”content-script-type” content=”text/javascript”>

2.プログラム本文・・・
   「JavaScript書き込み候補場所1」でも「JavaScript書き込み候補場所2」でも良い

書き方は次の約束事を守りましょう。

 

イラスト

 


● プログラムは上から下へ実行される


イラスト

 

JavaScriptを書き込む場所によって画面上での動作がどうなるのか、プログラムを書いてみました。

 

下のボタンをクリックしてみて下さい。

ボタン

下の様な動きをしますね。 

 

ブラウザが表示して良いかどうか聞いてきますので{はい」と答える

    ↓

ページを開くと「こんにちは」のダイアログを出す

    ↓

「OK」をクリックすると背景がピンク色に変って、

                「元気ですか?」のダイアログを出す

    ↓

「OK」をクリックすると、画面に元気な絵と青色の文字「元気があれば、ご飯がうまい!!!」が出て来る

 

プログラムとしては、前回作った空っぽのHTML文書中で、

1.<head>~</head>の間に<meta>タグの常套句を入れる

2.常套句に続けて、<script>~</script>で、

    ~に、alert("こんにちは")を入れる

3.<body>~</body>で、~に、alert("元気ですか")を入れる

4.alert("元気ですか")の」下の行にdocument.fgColor="blue";を入れる

5.さらにその下の行に、

    document.write("元気があれば、ご飯がうまい!!!")を入れる

の要領で記述します。又、bodyの属性として、別のcss文書で、背景色をピンクに指定しました。

 

下が、こうして記述したプログラムの実物です。

プログラム

今回は、次の事を学びました。

1.scriptプログラムはどこに書いても良いが、上から下の順で実行される

2.alert、document.write、document.fgColorの実行結果

ところで、今回のサンプルでは、実行の最初にブラウザが表示して良いかどうか聞いて来ました。その時に画面上では、ピンクの背景上に「元気な絵」が出てきて違和感を感じました。これはJavaScriptそのものが動作しているかどうかと関係します。


● コメントアウト


コメントアウトとは、書き込んだプログラムの一部を「注釈扱い」して実行させない様にする事です。HTML文書の中では、<!-- ~ -->と記述し、囲まれた~の部分がコメントアウトされます。

イラスト

 

JavaScriptでのコメントアウトの書き方は次の2通りがあります。

1./*~*/と書いて、~の部分をコメントアウトする。

2.行の途中に // を入れて、//の右側の部分をコメントアウトする。

 

では、前回のプログラムを使って、コメントアウトしてみましょう。

1./*~*/を使って、「こんにちは!」のダイアログを出さない様にする。

2.// を使って、「元気があれば、ご飯がうまい!!!」の文字色を黒にする。

                (青色指定を実行しない)

どの様になったか、下のボタンをクリックしてみて下さい。

ボタン

 

実際のHTML内の記述は下の通りで、赤枠で囲んだ部分が今回の追加部分です。

プログラム

ところで、先回、今回と、JavaScriptの記述の中味を、HTMLのコメントアウト<!-- ~ -->で囲んでいます。上の記述の中で青線アンダーラインした部分です。

この目的は、JavaScriptを理解出来ないブラウザがJavaScriptの記述内容をそのまま画面に表示する事を防ぐ為です。

それでは、ユーザーがJavaScriptをオフにしている等のケースでJavaScriptが利用できない場合のみ実行させる手立ては無いのでしょうか。

あります。<noscript>~</noscript>で記述すれば、~の部分は、JavaScriptが利用できる場合は無視されて、JavaScriptが利用できない場合に実行されます。

例えば、上のHTML文書の中で、<img src="../../img/js/js5.png">の前に、次の一行を入れてみます。

<noscript>ごめんなさい。JavaScriptをONして下さい。</noscript>

この結果は、下のボタンをクリックしてみて下さい。

ボタン

ブラウザがJavaScriptを利用しない(最初の)状態では、画面上には「元気な絵」とともに「ごめんなさい。JavaScriptをONして下さい。」の文字列が出て来ます。いったんJavaScriptが利用できる様にしてやるとこの文字列は消えます。

 


● 「変数」って難しくない!


イラスト

聞きなれない「変数」と言うものを理解するのに、九九の計算式でたとえ話をします。九九は「にしがはち}(2×4=8)、「にごじゅう」(2×5=10)・・・と暗唱しますが、これは2つの数字を掛け算の式に入れて答えを出すことを繰り返しているのです。この時の2、4、5・・・と言う数字を「変数」と呼ぶのです。

中学数学でのたとえ話としては、「a×b=cと言う式にa=○、b=△と言う数字を代入して答えを求めなさい」の時のa,bが「変数」なのです。

 

実際に前回サンプルプログラム(コメントアウトは無しに戻しますが)の文字列やHTMLタグを「変数」として扱ってみましょう。

変数aに文字列「こんにちは」を入れます。

変数bに文字列「!」を入れます。

変数cに文字列「元気ですか」を入れます。

変数dに文字列「元気があれば、」を入れます。

変数eに文字列「ご飯がうまい」を入れます。

変数fに数式「a+b」を入れます(「こんにちは!」を入れた事になります)

変数gに数式「c+b+b」を入れます。

変数hに数式「d+e+b+b+b」を入れます。

変数iにHTMLタグ「<img src="../../img/js/js5.png">」を入れます。

document.write()やalert()の()内に該当する変数f~iを入れます。

 

この様に変数に置きなおした結果は下のボタンをクリックしてみて下さい。

ボタン

 

さて、記述方法を整理します。変数としては文字列、数値、数式、HTMLタグを考えておけは良いでしょう。

文字列の記述は「"」と「"」で囲みます。

HTMLタグの記述は「'」と「'」で囲みます。

 

サンプルプログラムの実際のHTML文書は下の通りです。

プログラム

変数が数値や数式の場合は、何かで囲う必要は無く、そのままの記述になります。

例えば、サンプルプログラムに数値変数を追加して四角形の面積をダイヤログで表示させます。

下のHTML文書中の水色枠で囲んだ部分を追加しました。

プログラム

 

この新しいプログラムの動きは、下のボタンをクリックしてみて下さい。

ボタン

 

これで、「変数」は終わり! 次ページでは名簿作りしながら、「配列」をマスターします。

ページトップ

ホームページ事始め
ホーム←

→次ページ

コーナー