Webブラウザでプログラムを実行するJavaScript

JavaScript

• JavaScript（ジャヴァスクリプト）は、プログラミング言語のひとつ
• Javaと名前が似ているが、異なるプログラミング言語（JavaScriptをJavaと呼ぶことの無いよう注意すること！）
• Netscape社の開発したHTML内に埋め込めるオブジェクト指向のスクリプト言語
• 主にWebブラウザ上で動作し、HTMLの動的書き換えや入力フォームの自動補完など、Webページの使用感向上を目的として使用される
• 見た目はJava言語やC、C++に似ていますが、 Javaとは違うもので互換性はまったくない
• JavaScriptはブラウザがインタプリタとなりスクリプトを実行する
• OSに依存しない
• 特別な開発環境を必要としない（ソースは通常のテキスト）
• プログラムの変更が容易

ECMAScript（エクマスクリプト）

• ECMA：European Computer Manufacturer Association（ヨーロッパ電子計算機工業会）が定めたJavaScriptの標準仕様
• JavaScriptは、インタプリタをブラウザ中に用意しているため、Webブラウザごとの機能の違いが問題となり、ECMAインターナショナルにより標準化される

JScript

• Microsoft社が開発し、Windows上で動作します

JavaScriptのプログラムを実行する

• Webブラウザの中には、プログラムを実行する機能が内蔵されています
• すべてのブラウザに対応しているのは、JavaScriptと呼ばれるプログラミング言語で書かれたプログラムの実行機能です
• HTMLとJavaScriptは組み合わされてWebブラウザの中で実行されます
• JavaScriptはWebブラウザの内部で動きます
• 読み込まれてしまえばサーバーは関係なく、ネットワークが切断されたとしても動き続けられます

JavaScriptの利用術

• JavaScriptは、キー入力したりマウス操作したり、ページ操作したりしたときのタイミングでプログラムを実行できます
• テキスト入力欄に、頭何文字かを入力したときに候補がいくつか出てくる「サジェスト機能（suggest）」は、JavaScriptを使って実行されています

ドキュメント操作

• Webページに文字を表示する
• 文字や背景の色を指定する
• Webページを切り替える
• クッキーの読み書き

ウィンドウ

• 確認ダイアログを表示する
• 新しいウィンドウを表示する
• ウィンドウのサイズを指定する

イベント

• ページを読み込むときにメッセージを表示する
• マウスポインタをのせると色が変わる

フォーム

• フォームに空欄がないかチェックする
• チェックボックスをすべてチェックする

JavaScriptの作業環境

テキストエディタ

• Adobe Brackets
• SublimeText
• 秀丸エディタ
• サクラエディタ
• Mery
• mi
• Dreamweaver

ブラウザ

• Internet Explorer 6, 7, 8, 9
• Mozilla Firefox 3, 4, 5, 6
• Google Chrome 13, 14, 15

エラーの確認

• IE：ステータスバーのエラー表示をダブルクリック
• Firefox：エラーコンソールでエラー内容を確認できる

オブジェクト指向言語とは

• 操作の対象を現実世界のもののようにとらえてプログラミングをおこなっていくタイプのプログラミング言語
• Java、Ruby、C++、Python、Objective-Cなど

オブジェクトベース言語

• JavaScriptもオブジェクト指向の流れを汲む言語です
• 本格的なオブジェクト指向言語ではなく、基本的な概念のみを取り入れて、扱いやすくした「簡易的なオブジェクト指向言語」

オブジェクトの基礎を知る

• プロパティとメソッド

プロパティ

• オブジェクトに用意されているデータ

メソッド（Method）

• オブジェクトの操作

Webブラウザはオブジェクトの集まり

• windowオブジェクト
• documentオブジェクト
• imageオブジェクト

JavaScriptとDOM

• 初期のJavaScriptでは、オブジェクトとして扱えるHTML要素は多くありませんでした
• HTMLドキュメントの任意の要素をオブジェクトとして扱えるようにした技術が「DOM（Document Object Model）」