JavaScript演習

(1)

1

(2)

JavaScript(言語）とは

• 情報システムのプログラミング

→ソースコード記述，外部ファイル保存，

コンパイル，テスト，デバッグ．．．

→大変な作業

• もっと手軽なプログラミング

→特別な言語処理系は不要！

→

Webブラウザだけで実行可能

（実際は，HTMLファイル内or外部ファイル

として記述保存）

2

(3)

1990年代： JavaScript は不遇

• Java言語とは全く異なる,簡易型プログラミング（スクリプト＝台本）言語。コンパイラではなくインタープリタ。 • オブジェクト指向型スクリプト言語。C言語に似た手続き型言語のようなスタイルで書かれる。 • NetScape社でサーバ負荷軽減のために開発。 • 90年代後半は，セキュリティの脆弱性，ブラウザによって挙動が異なるなど，問題の多かった言語 3

(4)

2005-: JavaScriptは脚光

• 2000年頃から

– AmazonやGoogleといった企業が採用 2005年 Google Mapの登場により状況が一変・ユーザ満足度（ユーザエクスペリエンス）を重視したリッチクライアントに対応したWebサイトが続々登場・サーバからクライアントへの転送データ量の減少直感的な操作が可能

Gmail, Googleサジェスト, Amazon Web Service,

ドラッグアンドドロップ, タブページ, Widgetなどなど

↑入力値チェックなどにも利用

(5)

Ajax (Asynchronous JavaScript and XML) Webアプリケーションモデル従来のWeb アプリケーションモデル Webサーバーデータベース、バックエンド処理、レガシーシステムサーバーサイドシステムユーザーインターフェースブラウザー Httpリクエスト HTTP（ｓ）通信 HTML＋CSS データユーザーインターフェース Ajaxエンジンブラウザーデータベース、バックエンド処理、レガシーシステム WebまたはXMLサーバーサーバーサイドシステム XMLHttp リクエスト非同期制御 XMLデータ HTTP（ｓ）通信 HTML ＋CSSデータ JavaScript コールブラウザーによって Ajaxエンジン自体や、呼び出し方法が異なる二重構造 非同期実現

(6)

クライアント サーバー クライアント サーバー 従来のWebアプリ（同期→ユーザが待たされる） Ajax Webアプリ（非同期→ユーザが快適）ユーザー側の活動 _{ユーザー側の活動} _{ユーザー側の活動} システム処理システム処理 データ 送信 データ 送信 データ 送信 データ _送信 クライアント側処理 データ 送信 データ _送信 データ _送信 データ _送信 ユーザー側の活動入力表示入力表示入力表示入力表示データ送信 待ち時間がある  待ち時間がない  サーバーサイドの処理サーバーサイドの処理サーバーサイドの処理サーバーサイドの処理時間軸 ▶ Ajaxエンジンが 通信を担当する

(7)

• HTML

→Webページの

骨格

のみ

を担当。表現力は

紙の文

書

_{と同程度。}

• CSS

→Webページの

デザイン

を担当。通常は

HTML

と

組み合わせて用いる。

• JavaScript

→Webページを

動的

なも

のにする。通常は

_HTML

と組み合わせて用いる。

HTML

と

CSS

と

JavaScript

の

違い

JavaScript CSS JavaScript CSS HTML 外部ファイル

(8)

JavaScript 実行

(9)

JavaScriptコンソール起動方法

• WebブラウザーにはJSコンソールが付与。

JSスクリプトを実行し確認できる。

• F12（開発者ツール）を押す。

その後Consoleタブを選択。

• 最下行がJSスクリプト入力画面

• 実行：Ctr+Enter or 右下の↓をクリック。

それではWebブラウザーを起動して

F12を押してください。

9

(10)

JavaScriptの書き方

• HTMLファイル内に書く方法 – <head>タグ内に以下のように記述 – ex1.html <script type="text/javascript">  </script> • 別のテキストファイルに書く方法 • ex2.html, ex1.js

(11)

内容

• alert関数 • 変数・データ型 • 演算子 • 関数 • document.write関数 • prompt関数 • 演習問題１ • 条件分岐 • 繰り返し • parseInt関数とparseFloat関数 • 演習問題２ 11

(12)

alert関数

• ポップアップウィンドウに指定したメッセージを表示

する関数

• デバッグに利用可能

– JavaのSystem.out.printlnメソッドに相当 – Rubyのputsメソッドに相当

• 関数

– 再利用可能なJavaScriptコードのかたまりに名前をつけたもの 12 alert + ( + ‘表示するテキスト’ + ) + ; alert(‘Hello, World!’);

(13)

変数・データ型

• 変数宣言は

var

を用いる

– 変数の長さは１文字以上

– 変数の最初の文字に使えるのは，英字，アンダー

スコア（_），ドル記号($)

• ○ $total，_firstName，top100

– 空白文字と(_と$以外の)特殊文字は使えない

• × 5to10，first name，#total，world!

(14)

変数・データ型

• 基本データ型は

数値

、

文字列

、

論理値

_の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);

(15)

演算子（よく使われるもの）

• ex4.html，ex5.html，ex6.html

• 算術演算子

– +（加算），-（減算），*（乗算），/（除算），%（余剰） – ++（インクリメント），--（デクリメント）

• 論理演算子

– &&（論理積），||（論理和），!（否定）

• 比較演算子

– <（小なり），<=（以下），>（大なり），>=（以上） – ==（等しい），!=（等しくない）

• 代入演算子

– =（代入），+=（加算），-=（減算），*=（乗算） – /=（除算），%=（余剰） ₁₅ 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

(16)

関数

• 再利用可能なJavaScriptコードのかたまりに名前を

つけたもの

• ex7.html function 関数名（引数） { 定義内容 return 戻り値; } 16 関数名（引数）; var num = 関数名（引数）; 定義方法呼び出し方法

(17)

document.write関数

• document.write(引数)－引数をHTMLとして表示させる

• ex8.html

17 var str = "Hello, World";

document.write("<p>" + str + "</p>");

(18)

prompt関数

• prompt(引数)－引数をメッセージとして表示し，ユーザから

の入力情報（文字列）を取得する関数 • ex9.html

18

var value = prompt("値を入力してください．"); alert(value);

document.write('<h1>prompt関数</h1>'); document.write('<h1>' +value + '</h1>');

(19)

演習問題１

• prompt関数とdocument.write関数を用いて

，ユーザから入力されたテキスト，文字の色，

文字のサイズ（%）に応じて，表示内容を変化

させるJavaScriptプログラムを書きなさい

19

(20)

条件分岐

• 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文を使って他の選択肢が実行されないようにするマッチする選択肢がなかったときに実行

(21)

繰り返し

• ex12.html

• for文

• while文

21 for (初期化; テスト; 更新) { アクション; } 初期化; while (テスト) { アクション; 更新; }