Transcript 演習1
JavaScript 演習１ 山口研究室 後期博士課程3年 玉川 奨 (たまがわ すすむ) 居室：24－604 / 23－620 mail : [email protected] 1 JavaScript(言語）とは • 情報システムのプログラミング →ソースコード記述，外部ファイル保存， コンパイル，テスト，デバッグ．．． →大変な作業 • もっと手軽なプログラミング →特別な言語処理系は不要！ →Webブラウザだけで実行可能 （実際は，HTMLファイル内or外部ファイル として記述保存） 2 WebブラウザはWebページ閲覧に使うはず。 なんでプログラムが動くの？ • 通常は，Webページ閲覧のために，Webブラウザ（IE）を開く. →今回は(特別に），プログラミングするためにIEを開く． でもIEはWebページを閲覧（提示）するんだから， 一体，IEのどこにプログラムを入力するんだ？ 入力箇所はあります．それはURL欄 でもそこはネットのアドレスを入力する欄でしょう． プログラムなんか入力したらエラーになるよ． 通常はhttp://～によりアドレスを指定します。 http://JavaScriptプログラム文 とすれば 確かにエラーになります。確認しましょう。 3 失敗 http://alert(hello) vs. 成功 http://yahoo http://alert(hello)をURL欄に入力して実行 サーバが見つかりませんでした www.alert(hello).com という 名前のサーバが見つかりませんでした。 http: HTTPプロトコル // ホスト記述の開始を表す（ルート） alert(hello) をwww.alert(hello).comに解釈して www ：Webサーバ名 alert(hello).com ドメイン名 ネット上にそのサーバが存在しなかった。 ※ちなみに http://yahoo なら成功する。 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 従来のWeb アプリケーションモデル ブラウザー ユーザーインターフェース Ajax (Asynchronous JavaScript and XML) Webアプリケーションモデル ブラウザーによって Ajaxエンジン自体や、 呼び出し方法が 異なる ブラウザー ユーザーインターフェース HTML ＋CSSデータ JavaScript コール Httpリクエスト 二 重 構 造 Ajaxエンジン HTTP（ｓ）通信 HTML＋CSS データ 非同期実現 XMLHttp リクエスト 非同期制御 HTTP（ｓ）通信 XMLデータ Webサーバー WebまたはXMLサーバー データベース、バックエンド処理、 レガシーシステム サーバーサイドシステム データベース、バックエンド処理、 レガシーシステム サーバーサイドシステム 従来のWebアプリ（同期→ユーザが待たされる） 時間軸 待ち時間がある クライアント ユーザー側の活動 ユーザー側の活動 ▶ ユーザー側の活動 データ送信 データ データ データ 送信 送信 送信 サーバー データ 送信 システム処理 システム処理 Ajax Webアプリ（非同期→ユーザが快適） 待ち時間がない クライアント ユーザー側の活動 入力 表示 入力 表示 入力 表示 入力 表示 クライアント側処理 データ データ データ 送信 送信 送信 サーバー サーバーサイドの処理 サーバーサイドの処理 サーバーサイドの処理 データ 送信 Ajaxエンジンが 通信を担当する サーバーサイドの処理 JavaScript 演習（3回）目的 • HTML・ＣＳＳのおさらいと、流行り（？）の Web2.0技術JavaScriptプログラミング • DHTML作成を通じて、見て動くプログラムの 楽しさ • COM実験への基礎知識 11 HTML 12 HTMLの構造 • <!DOCTYPE> ドキュメントタイプの宣言 • <HTML>～</HTML> HTML文書だということの宣言 – <HEAD>～</HEAD> 文書のヘッダ情報 • <META /> その文書に関するメタ情報 • <TITLE>～</TITLE> 文書のタイトル – <BODY></BODY> 文書本体 <!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>テストページ</title> </head> <body> </body> </html> HTMLタグの一例 • <h1>～<h6> 見出しをつける • <p> 一つの段落を表す • <br> 改行 • <ul>,<ol> 順序の無し,ありのリスト • <li> リストの項目 • <a> リンクの開始 <html> <head> <title>テストページ</title> </head> <body> <h1>見出し1</h1> <h2>見出し2</h2> <p>HelloWorld!</p> Hello<br>World! <ol type="a"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ol> <p><a href="./htmlEx2.html">サンプルその２</a></p> <p><img src="./ex.jpg"></p> </body> </html> • <img> 画像の表示 htmlEx1.html CSS 15 CSSの書き方 Webページのデザインを定義 • HTMLファイル内に書く方法 – <head>タグ内に以下のように記述 – htmlEx3.html <style type="text/css"> ここにスタイルを記述 </style> • 別のテキストファイルに書く方法 • htmlEx2.html, cssEx.css <link rel="stylesheet" type="text/css" href="ファイル名.css "> 16 CSSの書式 • セレクタ { プロパティ: 値; プロパティ: 値 } セレクタ：スタイル適用対象の選択 プロパティ：‘font-size’ や ‘line-height’ のよう なレンダリング特性 値：プロパティに指定可能な値が定義 • とほほのスタイルシート入門 – http://www.tohoho-web.com/css/ JavaScript 18 JavaScriptの書き方 • HTMLファイル内に書く方法 – <head>タグ内に以下のように記述 – ex1.html <script type="text/javascript"> <!-ここにスクリプトを書く //--> </script> • 別のテキストファイルに書く方法 • ex2.html, ex1.js <script type="text/javascript" src="ファイル名.js"></script> 19 HTMLとCSSとJavaScriptの違い HTML CSS JavaScript 外部ファイル CSS JavaScript • HTML →Webページの骨格のみ を担当。表現力は紙の文 書と同程度。 • CSS →Webページのデザイン を担当。通常はHTMLと 組み合わせて用いる。 • JavaScript →Webページを動的なも のにする。通常はHTML と組み合わせて用いる。 内容 • • • • • • • • • • • alert関数 変数・データ型 演算子 関数 document.write関数 prompt関数 演習問題１ 条件分岐 繰り返し parseInt関数とparseFloat関数 演習問題２ 21 alert関数 • ポップアップウィンドウに指定したメッセージを表示 する関数 • デバッグに利用可能 – JavaのSystem.out.printlnメソッドに相当 – Rubyのputsメソッドに相当 • 関数 – 再利用可能なJavaScriptコードのかたまりに名前をつけ たもの alert + ( + ‘表示するテキスト’ + ) + ; alert(‘Hello, World!’); 22 変数・データ型 • 変数宣言はvarを用いる – 変数の長さは１文字以上 – 変数の最初の文字に使えるのは，英字，アンダー スコア（_），ドル記号($) • ○ $total，_firstName，top100 – 空白文字と(_と$以外の)特殊文字は使えない • × 5to10，first name，#total，world! 23 変数・データ型 • 基本データ型は数値、文字列、論理値の3種類 – ex3.html • 数値 • 文字列 • 論理値 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); 24 演算子（よく使われるもの） • ex4.html，ex5.html，ex6.html • 算術演算子 – +（加算），-（減算），*（乗算），/（除算），%（余剰） – ++（インクリメント），--（デクリメント） • 論理演算子 – &&（論理積），||（論理和），!（否定） • 比較演算子 p q p && q p q p || q true true true true true true true false false true false true false true false false true true false false false false false false p !p true false false true – <（小なり），<=（以下），>（大なり），>=（以上） – ==（等しい），!=（等しくない） • 代入演算子 – =（代入），+=（加算），-=（減算），*=（乗算） – /=（除算），%=（余剰） 25 関数 • 再利用可能なJavaScriptコードのかたまりに名前を つけたもの • ex7.html 定義方法 function 関数名（引数） { 定義内容 return 戻り値; } 呼び出し方法 関数名（引数）; var num = 関数名（引数）; 26 document.write関数 • document.write(引数)－引数をHTMLとして表示させる • ex8.html var str = "Hello, World"; document.write("<p>" + str + "</p>"); document.write("<p style='color: red;'>" + str + "</p>"); 27 prompt関数 • prompt(引数)－引数をメッセージとして表示し，ユーザから の入力情報（文字列）を取得する関数 • ex9.html var value = prompt("値を入力してください．"); alert(value); document.write('<h1>prompt関数</h1>'); document.write('<h1>' +value + '</h1>'); 28 演習問題１ • prompt関数とdocument.write関数を用いて ，ユーザから入力されたテキスト，文字の色， 文字のサイズ（%）に応じて，表示内容を変化 させるJavaScriptプログラムを書きなさい 29 条件分岐 • ex10.html, ex11.html if (条件1) { • if文 文1; } else if (条件2) { 文2; ・・・・・ } else { 文N; } 条件の部分には， 論理値（true or false) が入る • switch文 マッチする選択肢が なかったときに実行 switch (テストデータ) { case マッチデータ１: 文１; break; case マッチデータ２: 文２; break; default: 文３; break; } break文を使って他の選択肢が 実行されないようにする 30 繰り返し • ex12.html • for文 for (初期化; テスト; 更新) { アクション; } • while文 初期化; while (テスト) { アクション; 更新; } 31 parseInt関数とparseFloat関数 • parseInt(引数) – 引数で文字列を渡すと数値に変換 • parseFloat(引数) – 引数で文字列を渡すと浮動小数点に変換 • ex13.html 32 演習問題2 • “Hello!”という文字列をユーザが入力した数だけ表 示するJavaScriptプログラムを作成しなさい • 行数を5で割った余りが1の場合には赤色，２の場 合には緑色，３の場合には黄色，4の場合には黒，0 の場合には青色，さらに，3の倍数の場合には 200%の大きさで”Hello!”を表示しなさい 33