1 山口研究室 後期博士課程 2 年 玉川 奨 ( たまがわ すすむ ) 居室： 24 － 604 / 23 － 620 mail : JavaScript 演習１

JavaScript( 言語）とは 情報システムのプログラミング → ソースコード記述，外部ファイル保存， コンパイル，テスト，デバッグ．．． → 大変な作業 もっと手軽なプログラミング → 特別な言語処理系は不要！ →Web ブラウザだけで実行可能 （実際は， HTML ファイル内 or 外部ファイル として記述保存） 2

Web ブラウザは Web ページ閲覧に使うはず。 なんでプログラムが動くの？ 通常は， Web ページ閲覧のために， Web ブラウザ（ IE ） を開く. → 今回は ( 特別に），プログラミングするために IE を開く ．  でも IE は Web ページを閲覧（提示）するんだから， 一体， IE のどこにプログラムを入力するんだ？ 入力箇所はあります．それは URL 欄  でもそこはネットのアドレスを入力する欄でしょう． プログラムなんか入力したらエラーになるよ． 通常は ～によりアドレスを指定します。 プログラム文 とすれば 確かにエラーになります。確認しましょう。 3

失敗 vs. 成功 を URL 欄に入力して実行 サーバが見つかりませんでした という 名前のサーバが見つかりませんでした。 http: HTTP プロトコル // ホスト記述の開始を表す（ルート） alert(hello) を に解釈して www ： Web サーバ名 alert(hello).com ドメイン名 ネット上にそのサーバが存在しなかった。 ※ちなみに なら成功する。 4

URL の復習 URL （ネット上の情報資源を一意に決定する方法）であり， 他のサーバが持つ情報資源を利用する時， http プロトコルを宣言す る。 : http ：ハイパーテキスト転送プロトコル用スキーム ftp ：ファイル転送プロトコル用スキーム mailto ： 電子メールアドレス用スキーム file ： ホストのファイルシステム用スキーム ．．． （非公式） javascript: JavaScript プログラム用スキーム 5

Web ブラウザーでプログラミング！ ※アラートウィンドウ出現 →1 行プログラミング アドレス欄を削除し， javascript:alert(“hello”); と入力して改行 ( 実行） ※ copy&paste すると変なコードが 挿入されて動かないかも！？ 小さな（アラート＝警告）ウィンドウが出現しましたか ？ 出現したら,ok ボタンをクリックして小ウィンドウを閉 じましょう ※インタラクション →3 行プログラミング javascript: ans=prompt(" １＋１２ "); document.write(ans);document.write(" は正解です ") 6

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

2005-: JavaScript は脚光 2000 年頃から –Amazon や Google といった企業が採用 2005 年 Google Map の登場により状況が一変 ・ユーザ満足度（ユーザエクスペリエンス）を重視した リッチクライアントに対応した Web サイトが続々登場 ・サーバからクライアントへの転送データ量の減少 直感的な操作が可能 Gmail, Google サジェスト, Amazon Web Service, ドラッグアンドドロップ, タブページ, Widget など など ↑ 入力値チェックなどにも利 用 8

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

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

JavaScript 演習（ 3 回）目的 HTML ・ＣＳＳのおさらいと、流行り （？）の Web2.0 技術 JavaScript プログラ ミング DHTML 作成を通じて、見て動くプログラ ムの楽しさ COM 実験への基礎知識 11

HTML 12

HTML の構造 ドキュメントタイプの宣言 ～ HTML 文書だということの宣言 – ～ 文書のヘッダ情報 その文書に関するメタ情報 ～ 文書のタイトル – 文書本体 テストページ

HTML タグの一例 ～ 見出しをつける 一つの段落を表す 改行, 順序の無し, ありのリスト リストの項目 リンクの開始 画像の表示 テストページ 見出し 1 見出し 2 HelloWorld! リスト 1 リスト 2 リスト 3 サンプルその２ htmlEx1.html

CSS 15

CSS の書き方 HTML ファイル内に書く方法 – タグ内に以下のように記述 –htmlEx3.html ここにスタイルを記述 別のテキストファイルに書く方法 htmlEx2.html, cssEx.css 16 Web ページのデザインを定義

CSS の書式 セレクタ { プロパティ : 値 ; プロパティ : 値 } セレクタ：スタイル適用対象の選択 プロパティ： ‘font-size’ や ‘line-height’ の ようなレンダリング特性 値：プロパティに指定可能な値が定義 とほほのスタイルシート入門 –

JavaScript 18

JavaScript の書き方 HTML ファイル内に書く方法 – タグ内に以下のように記述 –ex1.html <!-- ここにスクリプトを書く //--> 別のテキストファイルに書く方法 ex2.html, ex1.js 19

HTML →Web ページの骨格の みを担当。表現力は紙 の文書と同程度。 CSS →Web ページのデザイ ンを担当。通常は HTML と組み合わせて 用いる。 JavaScript →Web ページを動的な ものにする。通常は HTML と組み合わせて 用いる。 HTML と CSS と JavaScript の 違い JavaScript CSS JavaScript CSS HTML 外部ファイ ル

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

alert 関数 ポップアップウィンドウに指定したメッセージ を表示する関数 デバッグに利用可能 –Java の System.out.println メソッドに相当 –Ruby の puts メソッドに相当 関数 – 再利用可能な JavaScript コードのかたまりに名前をつ けたもの 22 alert( ‘ 表示するテキスト ’ ); alert(‘Hello, World!’);

変数・データ型 変数宣言は var を用いる – 変数の長さは１文字以上 – 変数の最初の文字に使えるのは，英字，アン ダースコア（ _ ），ドル記号 ($) ○ $total ， _firstName ， top100 – 空白文字と (_ と $ 以外の ) 特殊文字は使えない × 5to10 ， first name ， #total ， world! 23

変数・データ型 基本データ型は数値、文字列、論理値の 3 種 類 –ex3.html 数値 文字列 論理値 24 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 算術演算子 –+ （加算）， - （減算）， * （乗算）， / （除算）， % （ 余剰） –++ （インクリメント）， -- （デクリメント） 論理演算子 –&& （論理積）， || （論理和）， ! （否定） 比較演算子 – （大なり）， >= （以上 ） –== （等しい）， != （等しくない） 代入演算子 –= （代入）， += （加算）， -= （減算）， *= （乗算） –/= （除算）， %= （余剰） 25 pqp && q true false truefalse pqp || q true falsetrue falsetrue false p!p truefalse true

関数 再利用可能な JavaScript コードのかたまりに名 前をつけたもの ex7.html function 関数名（引数） { 定義内容 return 戻り値 ; } 26 関数名（引数） ; var num = 関数名（引数） ; 定義方法 呼び出し方法

document.write 関数 document.write( 引数 ) －引数を HTML として表示させる ex8.html 27 var str = "Hello, World"; document.write(" " + str + " ");

prompt 関数 prompt( 引数 ) －引数をメッセージとして表示し，ユーザ からの入力情報（文字列）を取得する関数 ex9.html 28 var value = prompt(" 値を入力してください． "); alert(value); document.write(' prompt 関数 '); document.write(' ' +value + ' ');

演習問題１ prompt 関数と document.write 関数を用いて ，ユーザから入力されたテキスト，文字 の色，文字のサイズ（ % ）に応じて，表示 内容を変化させる JavaScript プログラムを 書きなさい 29

条件分岐 ex10.html, ex11.html if 文 switch 文 30 if ( 条件 1) { 文 1; } else if ( 条件 2) { 文 2; ・・・・・ } else { 文 N; } 条件の部分には， 論理値（ true or false) が入る switch ( テストデータ ) { case マッチデータ１ : 文１ ; break; case マッチデータ２ : 文２ ; break; default: 文３ ; break; } break 文を使って他の選択肢が 実行されないようにする マッチする選択肢が なかったときに実行

繰り返し ex12.html for 文 while 文 31 for ( 初期化 ; テスト ; 更新 ) { アクション ; } 初期化 ; while ( テスト ) { アクション ; 更新 ; }

parseInt 関数と parseFloat 関数 parseInt( 引数 ) – 引数で文字列を渡すと数値に変換 parseFloat( 引数 ) – 引数で文字列を渡すと浮動小数点に変換 ex13.html 32

演習問題 2 “Hello!” という文字列をユーザが入力した数だけ 表示する JavaScript プログラムを作成しなさい 行数を 5 で割った余りが 1 の場合には赤色，２の 場合には緑色，３の場合には黄色， 4 の場合には 黒， 0 の場合には青色，さらに， 3 の倍数の場合 には 200% の大きさで ”Hello!” を表示しなさい 33