Embed Size (px)
Citation preview
1
JavaScript 入門
JavaScript(言語）とは
• 情報システムのプログラミング →ソースコード記述，外部ファイル保存， コンパイル，テスト，デバッグ．．． →大変な作業
• もっと手軽なプログラミング →特別な言語処理系は不要！ →Webブラウザだけで実行可能 （実際は，HTMLファイル内or外部ファイル として記述保存）
2
1990年代： JavaScript は不遇
• Java言語とは全く異なる,簡易型プログラミング（スクリプト＝台本）言語。コンパイラではなくインタープリタ。
• オブジェクト指向型スクリプト言語。C言語に似た手続き型言語のようなスタイルで書かれる。
• NetScape社でサーバ負荷軽減のために開発。
• 90年代後半は，セキュリティの脆弱性，ブラウザによって 挙動が異なるなど，問題の多かった言語
3
2005-: JavaScriptは脚光
• 2000年頃から – AmazonやGoogleといった企業が採用
2005年 Google Mapの登場により状況が一変 ・ユーザ満足度（ユーザエクスペリエンス）を重視した リッチクライアントに対応したWebサイトが続々登場 ・サーバからクライアントへの転送データ量の減少 直感的な操作が可能 Gmail, Googleサジェスト, Amazon Web Service, ドラッグアンドドロップ, タブページ, Widgetなどなど
↑入力値チェックなどにも利用 4
Ajax (Asynchronous JavaScript and XML)
Webアプリケーションモデル
従来のWeb アプリケーションモデル
Webサーバー
データベース、バックエンド処理、 レガシーシステム
サーバーサイドシステム
ユーザーインターフェース
ブラウザー
Httpリクエスト
HTTP（ｓ）通信
HTML＋CSSデータ
ユーザーインターフェース
Ajaxエンジン
ブラウザー
データベース、バックエンド処理、 レガシーシステム
WebまたはXMLサーバー
サーバーサイドシステム
XMLHttp リクエスト
非同期制御
XMLデータ HTTP（ｓ）通信
HTML ＋CSSデータ JavaScript
コール
ブラウザーによってAjaxエンジン自体や、
呼び出し方法が 異なる
二重構造
非同期実現
クライアント
サーバー
クライアント
サーバー
従来のWebアプリ（同期→ユーザが待たされる）
Ajax Webアプリ（非同期→ユーザが快適）
ユーザー側の活動 ユーザー側の活動 ユーザー側の活動
システム処理 システム処理
データ 送信
データ 送信
データ 送信
データ 送信
クライアント側処理
データ 送信
データ 送信
データ 送信
データ 送信
ユーザー側の活動
入力 表示 入力 入力 入力 表示 表示 表示
データ送信
待ち時間がある L
待ち時間がない
J
サーバーサイドの処理 サーバーサイドの処理 サーバーサイドの処理 サーバーサイドの処理
時間軸 ▶
Ajaxエンジンが 通信を担当する
• HTML →Webページの骨格の
みを担当。表現力は紙の文書と同程度。
• CSS →Webページのデザイ
ンを担当。通常はHTMLと組み合わせて用いる。
• JavaScript →Webページを動的な
ものにする。通常はHTMLと組み合わせて用いる。
HTMLとCSSとJavaScriptの違い
JavaScript
CSS
JavaScript
CSS
HTML
外部ファイル
JavaScript 実行
8
JavaScriptコンソール起動方法
• WebブラウザーにはJSコンソールが付与。 JSスクリプトを実行し確認できる。
• F12（開発者ツール）を押す。 その後Consoleタブを選択。
• 下行がJSスクリプト入力画面 • 実行：Ctr+Enter or 右下の↓をクリック。
それではWebブラウザーを起動して F12を押してください。
9
JavaScriptの書き方
• HTMLファイル内に書く方法 – <head>タグ内に以下のように記述 – ex1.html
<script type="text/javascript"> <!-- ここにスクリプトを書く //--> </script>
• 別のテキストファイルに書く方法 • ex2.html, ex1.js
<script type="text/javascript" src="ファイル名.js"></script> 10
内容
• alertメソッドとconsoleオブジェクト • 変数・データ型 • 演算子，console.assertメソッド • 関数 • document.writeメソッド • promptメソッド • 演習問題１ • 条件分岐 • 繰り返し • parseInt関数とparseFloat関数 • 演習問題２ • 演習問題３
11
alertメソッド • ポップアップウィンドウに指定したメッセージを表
示するメソッド • デバッグに利用可能
– 正式にはwindow.alertだが，「window.」は省略可能
12
alert ( ‘表示するテキスト’ ) ; + + + +
alert(‘Hello, World!’);
consoleオブジェクト • デバッグ用のコンソール出力メソッドを提供
– JavaのSystem.out.printlnメソッドに相当 – Rubyのputsメソッドに相当
• 右クリックのポップアップメニューからエラー，警告，メッセージ（情報），ログの表示切替が可能
• IE9以降はconsoleオブジェクトのメソッドを利用したデバッグを推奨
13
consoleオブジェクトのメソッド 説明
console.log(message) メッセージをコンソールに出力
console.info(message) 情報アイコン付きでメッセージをコンソールに出力
console.warn(message) 警告アイコン付きでメッセージをコンソールに出力
console.error(message) エラーアイコン付きでメッセージをコンソールに出力
変数・データ型
• 変数宣言はvarを用いる – 変数の長さは１文字以上 – 変数の 初の文字に使えるのは，英字，アンダー
スコア（_），ドル記号($) • ○ $total，_firstName，top100
– 空白文字と(_と$以外の)特殊文字は使えない • × 5to10，first name，#total，world!
14
変数・データ型 • 基本データ型は数値、文字列、論理値の3種類
– ex3.html • 数値
• 文字列 • 論理値
15
var num = 1; console.log(num); num = 3.14 console.log(num);
var message = ‘Hello, World!’; console.log(message);
var bool = true; console.log(bool); bool = false; console.log(bool);
演算子（よく使われるもの） • ex4.html，ex5.html，ex6.html • 算術演算子
– +（加算），-（減算），*（乗算），/（除算），%（余剰） – ++（インクリメント），--（デクリメント）
• 論理演算子 – &&（論理積），||（論理和），!（否定）
• 比較演算子 – <（小なり），<=（以下），>（大なり），>=（以上） – ==（等しい），!=（等しくない）
• 代入演算子 – =（代入），+=（加算），-=（減算），*=（乗算） – /=（除算），%=（余剰）
• console.assert(条件, メッセージ) – 条件が満たされない場合にメッセージを表示 16
p q p && q
true true true
true false false
false true false
false false false
p q p || q
true true true
true false true
false true true
false false false
p !p
true false
false true
関数
• 再利用可能なJavaScriptコードのかたまりに名前をつけたもの • ex7.html
function 関数名（引数） {
定義内容 return 戻り値;
}
17
関数名（引数）; var num = 関数名（引数）;
定義方法
呼び出し方法
document.writeメソッド • document.write(引数)－引数をHTMLとして表示させる
• ex8.html
18
var str = "Hello, World"; document.write("<p>" + str + "</p>"); document.write("<p style='color: red;'>" + str + "</p>");
promptメソッド • prompt(引数)－引数をメッセージとして表示し，ユーザからの入力情報
（文字列）を取得するメソッド • 正式にはwindow.promptだが，「window.」は省略可能 • ex9.html
19
var value = prompt("値を入力してください．"); alert(value); document.write('<h1>promptメソッド</h1>'); document.write('<h1>' +value + '</h1>');
演習問題１
• promptメソッドとdocument.writeメソッドを用いて，ユーザから入力されたテキストと文字の色に応じて，表示内容を変化させるJavaScriptプログラムを書きなさい
20
条件分岐 • ex10.html, ex11.html • if文
• switch文
21
if (条件1) { 文1;
} else if (条件2) { 文2; ・・・・・
} else { 文N;
}
条件の部分には， 論理値（true or false)
が入る
switch (テストデータ) { case マッチデータ１:
文１; break;
case マッチデータ２: 文２; break;
default: 文３; break;
}
break文を使って他の選択肢が実行されないようにする
マッチする選択肢が なかったときに実行
繰り返し • ex12.html • for文
• while文
22
for (初期化; テスト; 更新) { アクション;
}
初期化; while (テスト) {
アクション; 更新;
}
parseInt関数とparseFloat関数
• parseInt(引数) – 引数で文字列を渡すと数値に変換
• parseFloat(引数) – 引数で文字列を渡すと浮動小数点に変換
• ex13.html
23
演習問題2
• 演習問題１を拡張して，指定した文字列と色を，指定した回数表示するJavaScriptプログラムを書きなさい
24
演習問題3 • 3択クイズのJavaScriptプログラムを作成しなさい
– document.writeメソッドで，クイズの問題と選択肢を表示しなさい – promptメソッドにより番号を入力し，正解か不正解かをdocument.write
メソッドで表示しなさい
• 3択クイズの例：
25
