2014-10-07

2014-10-07

JavaScriptとはAdd Star

 

 

JavaScriptとは


XHTMLCSSで作られた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:エラーコンソールでエラー内容を確認できる

 

Firebug

 

 

 


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


オブジェクトベース言語

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

プロパティ
  • オブジェクトに用意されているデータ

メソッド(Method)
  • オブジェクトの操作

例えば、

 

テレビなら

 

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

 

料理(卵焼きを作る)なら

 

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

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


Webブラウザはオブジェクトの集まり
  • windowオブジェクト
  • documentオブジェクト
  • imageオブジェクト

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

記述のルール

  1. 基本的に「半角英数字と記号のみ」を使う
  2. 文字列を扱う場合は「シングルクォート」か「ダブルクォート」で囲む
  3. 大文字と小文字は区別される
  4. 命令文の末尾には「セミコロン」をつける
  5. 複数行にわたるまとまりの命令文は「{}波括弧」で囲む(囲まれた範囲をブロックと呼ぶ)

  • シングルコーテーションもダブルコーテーションも同じ扱いです
  • Google JavaScript Style Guide ではシングルコーテーションの使用を推奨しています



行の終わりには必ずセミコロンを付ける
<script>
window.alert('セミコロンは必ず記述しましょう');
</script>

大文字・小文字について

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


コメントの記述法

 

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

 

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

 

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

 

/* 複数行のコメントです。
日本語で記述できます。*/

終了タグ「/」の前には「\」を付ける

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


 

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

 

 

 

C:¥My Document¥Pictuer¥

 

 

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


情報の入力量が増えた段階で、キーから直接文字入力できるようにした日本語拡張キーボードが開発されました。

そのとき英文作成時にも便利なように、ふだんあまり使われないとだろうと思われたバックスラッシュ(\)のキーに対応する文字コードに円記号を割り振ったのだろうと思われます。


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

記述する場所

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では「エラー」表示されます。

 

f:id:web-0127:20140313214703j:image

 


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


Firefoxの「要素を調査」
  • コンテクストメニューから

 

f:id:web-0127:20140313215606j:image

 


 

f:id:web-0127:20140313215607j:image

 


Chromeの「要素の調査」
  • コンテクストメニューから

 

f:id:web-0127:20140313220601j:image

 


 

f:id:web-0127:20140313220602j:image

 



JavaScript開発においての注意点


 

 

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

 

 


JavaScript有効》

 

f:id:web-design-js:20111101201625j:image

 


JavaScript無効》

 

f:id:web-design-js:20111101202311j:image

 



JavaScriptでのメニュー表示

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


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


DreamweaverJavaScript支援機能
  • 「Ctrl」+「space」

 

f:id:web-0127:20140313223412j:image

 


Macの場合》

Spotlight」のショートカットキーと重なります。

オフにしないと、機能しません。注意しましょう。

 

f:id:web-design-js:20111105193146j:image