2014-10-07
2014-10-07
JavaScriptとは
JavaScriptとは
XHTML+CSSで作られたWebページにJavaScriptを組み合わせると、いままでは印刷物のように動かないページしか作れなかったWebページに動きや機能といった振る舞いを追加することができます。
JavaScript(ジャヴァスクリプト)
- Netscape社の開発したHTML内に埋め込めるオブジェクト指向のスクリプト言語
- 主にWebブラウザ上で動作し、HTMLの動的書き換えや入力フォームの自動補完など、Webページの使用感向上を目的として使用される
- 見た目はJava言語やC、C++に似ていますが、 Javaとは違うもので互換性はまったくない
- JavaScriptはブラウザがインタプリタとなりスクリプトを実行する
- OSに依存しない
- 特別な開発環境を必要としない(ソースは通常のテキスト)
- プログラムの変更が容易
ECMAScript(エクマスクリプト)
- ECMA:European Computer Manufacturer Association(ヨーロッパ電子計算機工業会)が定めたJavaScriptの標準仕様
- JavaScriptは、インタプリタをブラウザ中に用意しているため、Webブラウザごとの機能の違いが問題となり、ECMAインターナショナルにより標準化される
JScript
JavaScriptでできること
ドキュメント操作
- Webページに文字を表示する
- 文字や背景の色を指定する
- Webページを切り替える
- クッキーの読み書き
ウィンドウ
- 確認ダイアログを表示する
- 新しいウィンドウを表示する
- ウィンドウのサイズを指定する
イベント
- ページを読み込むときにメッセージを表示する
- マウスポインタをのせると色が変わる
フォーム
- フォームに空欄がないかチェックする
- チェックボックスをすべてチェックする
JavaScriptの作業環境
テキストエディタ
- 秀丸エディタ
- サクラエディタ
- Mery
- mi
- Dreamweaver
ブラウザ
- Internet Explorer 6, 7, 8, 9
- Mozilla Firefox 3, 4, 5, 6
- Google Chrome 13, 14, 15
エラーの確認
Firebug
- Firefoxのアドオン
オブジェクト指向言語とは
オブジェクトベース言語
- JavaScriptもオブジェクト指向の流れを汲む言語です
- 本格的なオブジェクト指向言語ではなく、基本的な概念のみを取り入れて、扱いやすくした「簡易的なオブジェクト指向言語」
オブジェクトの基礎を知る
- プロパティとメソッド
プロパティ
- オブジェクトに用意されているデータ
メソッド(Method)
- オブジェクトの操作
例えば、
テレビなら
- 「チャンネル」「音量」は、プロパティ
- 「チャンネルを~に変更する」「音量を上げる」「音量を下げる」は、メッソッド
料理(卵焼きを作る)なら
- 「たまご」の「割る」メソッドと「混ぜる」メソッドを実行する
- 「甘さ」プロパティを加算する
- 「焼く」メソッドに、時間パラメーターと火力パラメーターを付加して実行する
- 醤油オブジェクトで「塩辛さ」パラメーターや「色」パラメーターを変える
このレシピのことを「プログラム」と呼び、手順のことを「アルゴリズム」と呼びます。
Webブラウザはオブジェクトの集まり
- windowオブジェクト
- documentオブジェクト
- imageオブジェクト
JavaScriptとDOM
- 初期のJavaScriptでは、オブジェクトとして扱えるHTML要素は多くありませんでした
- HTMLドキュメントの任意の要素をオブジェクトとして扱えるようにした技術が「DOM(Document Object Model)」
記述のルール
- 基本的に「半角英数字と記号のみ」を使う
- 文字列を扱う場合は「シングルクォート」か「ダブルクォート」で囲む
- 大文字と小文字は区別される
- 命令文の末尾には「セミコロン」をつける
- 複数行にわたるまとまりの命令文は「{}波括弧」で囲む(囲まれた範囲をブロックと呼ぶ)
- シングルコーテーションもダブルコーテーションも同じ扱いです
- Google JavaScript Style Guide ではシングルコーテーションの使用を推奨しています
行の終わりには必ずセミコロンを付ける
<script> window.alert('セミコロンは必ず記述しましょう'); </script>
大文字・小文字について
JavaScriptは大文字と小文字を区別します。
コメントの記述法
コメントを1行で記述する
// コメントです。日本語で記述できます。
コメントを複数行で記述する
/* 複数行のコメントです。 日本語で記述できます。*/
終了タグ「/」の前には「\」を付ける
この記述を「エスケープ」と呼びます。
円マークとバックスラッシュ
C:¥My Document¥Pictuer¥
「Cドライブ」内に有る「マイドキュメントフォルダ」の中にある「ピクチャーフォルダ」をさします。
情報の入力量が増えた段階で、キーから直接文字入力できるようにした日本語拡張キーボードが開発されました。
そのとき英文作成時にも便利なように、ふだんあまり使われないとだろうと思われたバックスラッシュ(\)のキーに対応する文字コードに円記号を割り振ったのだろうと思われます。
記述する場所
bodyタグの間に記述する
HTML文書内に実行結果を表示したいとき。
属性に記述する
イベントハンドラから直接呼び出すとき。
「input」などHTMLタグの属性に記述します。
headタグの間に関数を記述する
イベントハンドラに指定した関数を呼び出すときなどは、「head」内に関数部分を記述します。
HTML内部に記述する
- 「</body>」の前に記述します
<body> <script> ここにコードを記述 </script> </body>
HTMLファイルから外部JavaScriptファイルを読み込む
「JavaScriptファイル」を別に作成し、「script要素」でそのファイルの場所を指定します。
スクリプトファイルは「src属性」で呼び出します。
<scriptsrc="jsファイル名"></script>
エラー
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>Hello!</title> </head> <body> <script> window.alert('Hello World!!); </script> </body> </html>
Dreamweaverでは「エラー」表示されます。
ブラウザでは表示されません。
Firefoxの「要素を調査」
- コンテクストメニューから
Chromeの「要素の調査」
- コンテクストメニューから
JavaScript開発においての注意点
- JavaScriptは無効にできる
- JavaScriptが無効の場合を視野に入れておく
《JavaScript有効》
《JavaScript無効》
JavaScriptでのメニュー表示
JavaScriptを使った動的メニューの場合、JavaScriptを無効にすると表示されない可能性があります。
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>JavaScriptメニューがオフの場合</title> </head> <body> <script> メニューを生成するJavaScriptのコード </script> <noscript> <!-- 代替えメニューを表示するHTMLのコード --> </noscript> </body> </html>
DreamweaverでJavaScript支援機能
- 「Ctrl」+「space」
《Macの場合》
「Spotlight」のショートカットキーと重なります。
オフにしないと、機能しません。注意しましょう。