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アプリ（非同期→ユーザが快適）
ユーザー側の活動 ユーザー側の活動 ユーザー側の活動
システム処理 システム処理
データ 送信
データ 送信
データ 送信
データ 送信
クライアント側処理
データ 送信
データ 送信
データ 送信
データ 送信
ユーザー側の活動
入力 表示 入力 入力 入力 表示 表示 表示
データ送信
待ち時間がある
待ち時間がない
サーバーサイドの処理 サーバーサイドの処理 サーバーサイドの処理 サーバーサイドの処理
時間軸 ▶
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関数
• 変数・データ型
• 演算子
• 関数
• document.write関数
• prompt関数
• 演習問題１
• 条件分岐
• 繰り返し
• parseInt関数とparseFloat関数
• 演習問題２
11
alert関数 • ポップアップウィンドウに指定したメッセージを表示する関数
• デバッグに利用可能
– JavaのSystem.out.printlnメソッドに相当
– Rubyのputsメソッドに相当
• 関数
– 再利用可能なJavaScriptコードのかたまりに名前をつけたもの
12
alert ( ‘表示するテキスト’ ) ; + + + +
alert(‘Hello, World!’);
変数・データ型
• 変数宣言はvarを用いる
–変数の長さは１文字以上
–変数の最初の文字に使えるのは，英字，アンダースコア（_），ドル記号($)
• ○ $total，_firstName，top100
–空白文字と(_と$以外の)特殊文字は使えない
• × 5to10，first name，#total，world!
13
変数・データ型 • 基本データ型は数値、文字列、論理値の3種類
– ex3.html
• 数値
• 文字列
• 論理値
14
var num = 1;
alert(num);
num = 3.14
alert(num);
var message = ‘Hello, World!’;
alert(message);
var bool = true;
alert(bool);
bool = false;
alert(bool);
演算子（よく使われるもの） • ex4.html，ex5.html，ex6.html
• 算術演算子
– +（加算），-（減算），*（乗算），/（除算），%（余剰）
– ++（インクリメント），--（デクリメント）
• 論理演算子
– &&（論理積），||（論理和），!（否定）
• 比較演算子
– <（小なり），<=（以下），>（大なり），>=（以上）
– ==（等しい），!=（等しくない）
• 代入演算子
– =（代入），+=（加算），-=（減算），*=（乗算）
– /=（除算），%=（余剰）
15
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 戻り値;
}
16
関数名（引数）; var num = 関数名（引数）;
定義方法
呼び出し方法
document.write関数
• document.write(引数)－引数をHTMLとして表示させる
• ex8.html
17
var str = "Hello, World"; document.write("<p>" + str + "</p>"); document.write("<p style='color: red;'>" + str + "</p>");
prompt関数 • prompt(引数)－引数をメッセージとして表示し，ユーザからの入力情報（文字列）を取得する関数
• ex9.html
18
var value = prompt("値を入力してください．");
alert(value);
document.write('<h1>prompt関数</h1>');
document.write('<h1>' +value + '</h1>');
演習問題１
• prompt関数とdocument.write関数を用いて，ユーザから入力されたテキスト，文字の色，文字のサイズ（%）に応じて，表示内容を変化させるJavaScriptプログラムを書きなさい
19
条件分岐 • ex10.html, ex11.html
• if文
• switch文
20
if (条件1) {
文1;
} else if (条件2) {
文2;
・・・・・ } else {
文N;
}
条件の部分には，
論理値（true or false)
が入る
switch (テストデータ) {
case マッチデータ１:
文１;
break;
case マッチデータ２:
文２;
break;
default:
文３;
break;
}
break文を使って他の選択肢が実行されないようにする
マッチする選択肢が
なかったときに実行
繰り返し
• ex12.html
• for文
• while文
21
for (初期化; テスト; 更新) {
アクション;
}
初期化;
while (テスト) {
アクション;
更新;
}
parseInt関数とparseFloat関数
• parseInt(引数)
–引数で文字列を渡すと数値に変換
• parseFloat(引数)
–引数で文字列を渡すと浮動小数点に変換
• ex13.html
22
演習問題2
• “Hello!”という文字列をユーザが入力した数だけ表示するJavaScriptプログラムを作成しなさい
• 行数を5で割った余りが1の場合には赤色，２の場合には緑色，３の場合には黄色，4の場合には黒，0
の場合には青色，さらに，3の倍数の場合には200%の大きさで”Hello!”を表示しなさい
23
