社内 Web勉強会 第2回

JavaScriptって何？

• Webブラウザ上で動くプログラミング言語
• HTMLやCSSだけでは実現できない表現や動きをWebページに与えられる。

何ができるの？

• HTMLページの一部を動的に変更できる
• ユーザの操作を細かく把握できる
  • マウスオーバー
  • マウスクリック
  • マウスドラッグ
  • キーボード
  • 等々
• 裏でこっそりサーバと通信できる

＜デモ＞

生い立ち

• 90年代に起きたInternet ExplorerとNetscape Navigatorの猛烈なシェア争いの中で生れた。
  • 1996年3月 Netscape 2の目玉機能としてJavaScript1.0がリリース
  • 1996年8月 負けじとIE 3.0でJScript1.0がリリース
• そもそもJavaScriptは、他ブラウザとの差別化のために作られた機能なので、JavaScriptとJScriptは互換性はとても低かった。
• NetscapeとMSの協定で、JavaScriptとJScriptの共通部分を元にしたECMAScript言語仕様が作られた。
• 1998年6月 ECMAScript v1言語仕様が策定
• 非互換な部分は下位互換性を保つために今も残ってる。

他のWeb技術との比較

• JavaApplet, Flash
  • ブラウザにプラグインをインストールする必要がある
  • JavaScriptはブラウザ組込み。
• HTML, CSS
  • HTMLやCSSは「何をどう表示するか」を指定する
  • JavaScriptは「何がどうなったらどうする」という流れを指示する

良いところ

• HTMLやCSSとの親和性が高い
• ハードルが低く、簡単に動かせる

悪いところ

• IEとNetscapeで非互換な部分がある
• パフォーマンスがユーザの環境に依存する
• 適当に書いても動いちゃう

使い方

• CSSと同じ感覚でページに組込める

• 外部ファイル読み込み

  • html

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

  • hoge.js

    alert('hello');

• インライン:

  <script type= "text/javascript">alert('hello');</script>
  

• 属性値に埋め込み:

  <div onclick="alert('hello')">Click Me!</div>
  

• URL記述:

  <a href="javascript:alert('hello')">Click Me! </a>
  

なんで最近流行ってるの？

• ほとんどの一般的なブラウザでJavaScriptが動くようになった
• 互換性が高くなった
• 非互換性部分を吸収するJavaScriptライブラリが出てきた
• クライアントPCの性能向上でJavaScriptでもパフォーマンスが出るようになった
• Google Mapとかに触発されてAjaxが一人歩きしてる
• Webアプリケーションが高機能化してきた
• ユーザのUIに対する要求が高くなってきた

どう学ぶか

• HTML 4.01仕様 … 773KB
• CSS2 仕様 … 608KB
• ECMAScript v3 仕様 … 421KB
• DOM Level 1 仕様 … 325KB
• DOM Level 2 仕様 … 223KB
• 合計 … 969KB

JavaScriptでできる事の全体を把握した上で、仕様に従った正しい書き方で書く。