Changes between Version 5 and Version 6 of HowTo/JavaScriptTutorial


Ignore:
Timestamp:
Jun 16, 2010, 9:29:30 PM (16 years ago)
Author:
村山 俊之
Comment:

--

Legend:

Unmodified
Added
Removed
Modified

  • HowTo/JavaScriptTutorial

    v5 v6  
    2828
    2929<head>
    30   <meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
     30  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    3131  <title>hoge</title>
    3232</head>
    … …  
    8484
    8585<head>
    86   <meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
     86  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    8787  <title>hoge</title>
    8888  <script type="text/javascript" language="JavaScript"><!--
    … …  
    190190
    191191<head>
    192   <meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
     192  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    193193  <title>hoge</title>
    194194  <script src="hoge.js" type="text/javascript" language="JavaScript"></script>
    … …  
    230230
    231231大規模な Web アプリケーションの場合、HTML 自体がサーバーサイドで動的に生成され、そこから !JavaScript で記述された同一の処理を実行する、といった作りになることが多い為、このような方法で !JavaScript のみを別ファイルで記述する方がより一般的です。
     232
     233=== 読み込みと同時に実行されるプログラム ===
     234
     235<script> タグ内に記述したプログラムは、HTML ファイルの読み込み中に順次実行されます。その様子を、以下のサンプルプログラムで確認してみましょう。このプログラムは、ブラウザ上で HTML ファイルを読み込んだときの日時を表示するものです。
     236
     237{{{
     238<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
     239<html>
     240
     241<head>
     242        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     243        <meta http-equiv="content-script-type" content="text/javascript">
     244        <title>run in load</title>
     245</head>
     246
     247<body>
     248
     249<p>このファイルは、</p>
     250
     251<p><strong>
     252  <script type="text/javascript" language="JavaScript"><!--
     253    document.write((new Date()).toLocaleString());
     254//--></script>
     255</strong></p>
     256
     257<p>に読み込まれました。</p>
     258
     259</body>
     260
     261</html>
     262}}}
     263
     264document.write() メソッドを用いることにより、 <script> タグを記述した箇所に直接文字列を挿入することができます。
     265
     266が、こうした書き方は、実際にはあまりやりません。できることが限られているからです。 <script> タグは <head> の中に配置し、その中では変数や関数の定義を記述し、それらをイベントハンドラから呼び出して利用する、というスタイルがもっとも一般的です。
     267
     268
     269== !JavaScript で Web ページが動く仕組み ==
     270
     271=== window オブジェクト ===
     272
     273それでは、 !JavaScript をどのように記述すると、どんな風に Web ページを動かすことができるのか、その仕組みを見ていくことにしましょう。
     274
     275まずは、一番最初に示したサンプルプログラムを、もう一度見てみることにしましょう。
     276
     277{{{
     278<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
     279<html>
     280
     281<head>
     282  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     283  <title>hoge</title>
     284</head>
     285
     286<body>
     287
     288<form>
     289  <input type="button" value="hoge" onclick="alert('hoge');">
     290</form>
     291
     292</body>
     293
     294</html>
     295}}}
     296
     297!JavaScript によるプログラムが記述されているのは、以下の部分ですね。
     298
     299{{{
     300  <input type="button" value="hoge" onclick="alert('hoge');">
     301}}}
     302
     303この <input> 要素は type="button" となっているとおりボタンであり、これをクリックすることで、 onclick イベントハンドラに指定されている以下の !JavaScript プログラム
     304
     305{{{
     306  alert('hoge');
     307}}}
     308
     309が実行される、という仕組みです。この alert() という関数に見えるものに、表示したい文字列を引数に渡して呼び出せば、その文字列が書かれたメッセージボックスを表示できるらしい、ということが分かると思います。
     310
     311さて、この alert() ですが、これは'''正確には、 window.alert() が正式名称'''です。言い換えると、 window というオブジェクトが持つ alert() という名前の'''メソッド'''である、ということができます。
     312
     313このプログラムは、もちろん以下のように書き換えても、同じように動作します。
     314
     315{{{
     316  <input type="button" value="hoge" onclick="window.alert('hoge');">  <!-- alert('hoge'); と同じこと -->
     317}}}
     318
     319Web ブラウザ上で動作する !JavaScript においては、 window は特別なオブジェクトで、 window オブジェクトが持っている変数 (属性) や関数 (メソッド) を用いる際には、「window.」という記述を省略することが許されています。
     320
     321window オブジェクトには様々な役割の属性やメソッドがあらかじめ用意されています。それらは今後のチュートリアルで、追って紹介してゆくことにします。
     322
     323それから、 !JavaScript では、変数を使用する場合、 var 命令を用いて宣言する必要がありますが、
     324
     325{{{
     326  var num = 10;     // 変数 num を宣言し、値 10 で初期化する
     327}}}
     328
     329var 命令を用いずにいきなり適当な名前の変数に代入を行ってしまった場合、
     330
     331{{{
     332  num = 10;         // 変数 num はまだ宣言されていないが…
     333}}}
     334
     335通常エラーになることはありませんが、実際には以下のように、 window オブジェクトのメンバ変数に値を代入したものとして扱われるので、注意が必要です。
     336
     337{{{
     338  window.num = 10;  // さっきの num = 10 と同じ意味
     339}}}