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の作業環境

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

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

オブジェクトベース言語

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

  • プロパティとメソッド
プロパティ
  • オブジェクトに用意されているデータ
メソッド（Method）
  • オブジェクトの操作


例えば、

テレビなら

  • 「チャンネル」「音量」は、プロパティ
  • 「チャンネルを〜に変更する」「音量を上げる」「音量を下げる」は、メッソッド


料理（卵焼きを作る）なら

  1. 「たまご」の「割る」メソッドと「混ぜる」メソッドを実行する
  2. 「甘さ」プロパティを加算する
  3. 「焼く」メソッドに、時間パラメーターと火力パラメーターを付加して実行する
  4. 醤油オブジェクトで「塩辛さ」パラメーターや「色」パラメーターを変える


このレシピのことを「プログラム」と呼び、手順のことを「アルゴリズム」と呼びます。

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

記述のルール

  • シングルコーテーションもダブルコーテーションも同じ扱いです
  • Google JavaScript Style Guide ではシングルコーテーションの使用を推奨しています
行の終わりには必ずセミコロンを付ける
<script>
  window.alert( 'セミコロンは必ず記述しましょう' );
</script>
大文字・小文字について

JavaScriptは大文字と小文字を区別します。

コメントの記述法

コメントを１行で記述する

//　コメントです。日本語で記述できます。


コメントを複数行で記述する

/*　複数行のコメントです。
日本語で記述できます。*/
終了タグ「/」の前には「\」を付ける

この記述を「エスケープ」と呼びます。


円マークとバックスラッシュ

C:￥My Document￥Pictuer￥

「Cドライブ」内に有る「マイドキュメントフォルダ」の中にある「ピクチャーフォルダ」をさします。


情報の入力量が増えた段階で、キーから直接文字入力できるようにした日本語拡張キーボードが開発されました。
そのとき英文作成時にも便利なように、ふだんあまり使われないとだろうと思われたバックスラッシュ（\）のキーに対応する文字コードに円記号を割り振ったのだろうと思われます。

  • Windowsでは「バックスラッシュキー」
  • Macでは「文字パレット」から（キー入力の円マークは使用不可）

記述する場所

bodyタグの間に記述する

HTML文書内に実行結果を表示したいとき。

属性に記述する

イベントハンドラから直接呼び出すとき。
「input」などHTMLタグの属性に記述します。

headタグの間に関数を記述する

イベントハンドラに指定した関数を呼び出すときなどは、「head」内に関数部分を記述します。


《winsize.html》

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>外部ファイルを読み込む</title>
<script src="winsize.js"></script>
</head>
<body>
</body>
</html>


《winsize.js》

document.write ( '「winsize.js」を呼び出しました。' );
window.resizeTo (600,300);
HTML内部に記述する
  • 「</body>」の前に記述します
<script>
　ここにコードを記述
</script>


《XHTMLの場合》

<script type="text/javascript">
<![CDATA[
　ここにコードを記述
]]>
</script>
HTMLファイルから外部JavaScriptファイルを読み込む

「JavaScriptファイル」を別に作成し、「script要素」でそのファイルの場所を指定します。
スクリプトファイルは「src属性」で呼び出します。

<script src="jsファイル名"></script>

meta要素

<meta http-equiv="Content-Script-Type" content="text/javascript">


XHTMLの場合は必須ですが、HTML5の場合は記述しません。
同様に、「type属性」も不要です。


エラー

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>

<body>
<script>
  window.alert( 'Hello World!! );
</script>
</body>
</html>


Dreamweaverでは「エラー」表示されます。


ブラウザでは表示されません。

Firefoxの「エラーコンソール」

Safariの「エラーコンソール」


JavaScript開発においての注意点


  • サーバー側でも入力漏れがあるかどうかチェックする仕組みをつける。
  • たとえばサーバー側のPHPなどのサーバーサイドプログラムで、
    エラーを検知して先に進まないようにする。


《JavaScript有効》


《JavaScript無効》


JavaScriptでのメニュー表示

JavaScriptを使った動的メニューの場合、JavaScriptを無効にすると表示されない可能性があります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptメニューがオフの場合</title>
</head>
<body>
<script>
　メニューを生成するJavaScriptのコード
</script>
<noscript>
　代替えメニューを表示するHTMLのコード
</noscript>
</body>
</html>