Javascriptの基礎

@javascriptってなんなんだ?

Ajavascriptを知ろう

Bjavascriptの利点   

Cjavascriptの例を見てみよう 


  javascriptってなんなんだ?

そもそもjavascriptって、のんなのでしょうか?コピー&ペーストするだけじゃわかりませんよね?(kesigomu)も最初はそうでした。

JavascriptはWebブラウザで有名なNetscape Communications社によって開発されたスクリプト言語で、HTMLファイルに直接プログラムを書き込むだけで、ホームページに様々な動作を付けれる様になっています


                javascriptを知ろう

上でjavascriptとはスクリプト言語とお話しました。スクリプト言語というのは、何らかのソフトウェアに対して、

         「こういう様に動きなさい」

         「こういう順番で処理をしなさい」

といった指示を与えるために使われるものです。

そんでもってプログラム言語というのは何らかのソフトウェア自体を作成する言語です。

ラジコンにたとえると、プログラム言語は車スクリプト言語はコントローラーというわけです。(厳密に言うとスクリプト言語もプログラム言語の一種です。)

つまりjavascriptというのは、Webブラウザに対して指示を送るためのスクリプト言語なのです

もともとは開発元であるNetscape社のWebブラウザ、Netscape Navigator専用に作られたものでしたが、その後Internet ExplorerのどちらもJavascriptに対応しています。

Internet Explorerで使われるJavascriptは、正式にはJScriptと呼ばれ、Microsoft独自の仕様になっています。なのでJavascriptとJScriptは完全に同じではないので、機能によっては全く別のコードを書かなくてはならない場合があります。NetscapeとInternet Explorerの両ブラウザに完全に対応させるには、二種類のスクリプトを書き分けなければならないのが現状です。

(ついでに・・・JavaとJavascriptは全く違う言語です)

             


                Javascriptの利点

 Javascriptの人気の秘密にはつぎのような利点があるからだと考えられます。

@ホームページに使える。

魅力的なホームページにするには必要不可欠なツールです。

A扱いが簡単

javascriptはHTMLファイルの中に文章感覚で書き込む事ができます。(kesigomuは慣れるのに3週間かかりました。)

B文法が簡単

JavascriptはJavaやC、C++などの本格的なプログラム言語に比べてかなり文法が易しくなっています。

C使える分野が広い

検索エンジンで調べてみるとよくわかりますが、ゲームや、店の注文オーダー表などの様々な分野で活躍中です。

というような事です。


                 javascriptの例を見てみよう

                                  

上のソースはこうなっています。

---------------------------------------------------------------------------------------

<html>

<herd>

<titele>rei</titele>

</herd>

<body>

<script language = "javascript">

<!--//

   function reidai() {
     window.alert("こんにちは"); 
     }
//-->
</script> 

<font>

<INPUT type="button" name="rei" value="例を見る" onClick=reidai();>

</font>

</body>

</html>

---------------------------------------------------------------------------------------

                                解説

まず<script language = "javascript">と下から6行目の</script>からです。

javascriptの書き方には大きく二つあります。一つ目は<script>〜</script>タグで記述したプログラムを操る方法、もう一つは<a href = ・・・></a>などのHTMLタグに直接書き込む方法です。 <script>タグにはlanguage属性という物があり、ここで使う言語を指定する事ができるようになっています。つまり今から使う言語はjavascriptですよとWebブラウザに教えているわけです。

ではその下にあるこれ <!--// と //-->です。

これはプログラムコードのコメントアウトといいます。

現在使われているWebブラウザはほとんどがjavascriptに対応していますが、すべてがそうであるとはいえません。

webブラウザは自分が解釈できない記述はすべて普通の文字として認識します。従って対応していないブラウザは<script>〜</script>タグの中にかかれたプログラムをただの文だと解釈してしまうため、そのまま画面上に表示されます。プログラムコードのコメントアウトはそれを防ぐためのものです。そのまんまですね。

次に       function reidai() {      この部分です。
     window.alert("こんにちは"); 
     }

functionというのは関数の事です。reidaiというのはその名前です。命名規則に従えば自由に付けれる事ができます。はじめはローマ字であれば問題ないでしょう。

その次の()は引数というのですが、これはまた後々説明したいと思います。決まり文句なので必ず書かなくてはならないのですがなければ () だけでかまいません

ここまでをまとめるとfunction reidai()というのはreidaiという名前の指令書という感じです。

次にある{ と最後にある }はどこからどこまでが指令書の内容か示すために関数全体を囲むためのものです。これも決まり文句です。

 下は<script>〜</script>タグ内に書き込む際には必ず必要です。              <script language = "javascript">          

<!--// 

   function () {      
      
      }

//-->

</script>

次のwindowはオブジェクトalertはメソッドといわれます。うーん・・・むちゃくちゃ簡単に言うと、alertはwindowの特技のひとつです。その横にどこかでみたようなのが・・・

そうです。この("こんにちは")の()の部分がalertの引数なのです。alertには引数にかかれた文字列をダイアログボックスに表示する。ということが定義されています。alert以外にも様々なメソッドがありそれに対応する引数が存在します。そんでもってwindowとalertを.(ドット)でつないでいます。これはwindowオブジェクトの中にalertメソッドがあるからです。例えばdocumentオブジェクトの中のwriteメソッドを呼び出すにはdocument.writeと打てばいいのです。いきなりwriteと書くだけではエラーが出ます。めんどくさいかもしれませんが、決まりです。

ここまでで

<script language = "javascript">

<!--//

   function reidai() {
     window.alert("こんにちは"); 
     }
//-->
</script> 

が理解できたはずです。(説明が悪いかもしれません)ちなみにこれが解説の最初にあげた二つの方法のうちの<script>〜</script>タグに書き込む方法です。

次に

<INPUT type="button" name="rei" value="例を見る" onClick=reidai();>

ここの部分です。これがHTMLの中に直接書き込む方法です。

(INPUT type="button" name="rei" value="例を見る")までがHTML文です。意味はbuttonフォーム、rei(名前)に例を見ると表示しなさい。ということです。

 (onClick=reidai();)これがjavascriptです。

onClickはイベントハンドラーと呼ばれます。意味は(マウスでクリックされた時)です。イベントの種類はオブジェクトごとに異なります。例えばwindowオブジェクトはload(ウィンドウが読み込まれた時)など、documentオブジェクトはkeydown(キーボードが押されたとき)などのイベントを感知する事ができます。例をあげると、ウィンドウが読み込まれるとwindow.onloadイベントハンドラーがあった場合、それが発動します。

つまり onClick=reidai()というのはマウスでクリックされたときreidai指令書をしなさい。という意味です。

つまりこれは<INPUT type="button" name="rei" value="例を見る" onClick=reidai();>

ボタンが押されたときにreidai指令書をしなさい。という意味になります。

                            解説終了

-------------------------------------------------------------------------------------

最後まで読んで頂いて有難うございました。

SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送