JavaScript 入 門 1
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
従 来 のWeb アプリケーションモデル ユーザーインターフェース Httpリクエスト ブラウザー HTTP(s) 通 信 Webサーバー HTML+CSS データ データベース バックエンド 処 理 レガシーシステム サーバーサイドシステム ブラウザーによって Ajaxエンジン 自 体 や 呼 び 出 し 方 法 が 異 なる Ajax (Asynchronous JavaScript and XML) Webアプリケーションモデル ブラウザー ユーザーインターフェース JavaScript コール XMLHttp リクエスト 非 同 期 制 御 Ajaxエンジン 非 同 期 実 現 HTTP(s) 通 信 HTML +CSSデータ WebまたはXMLサーバー データベース バックエンド 処 理 レガシーシステム サーバーサイドシステム 二 重 構 造 XMLデータ
クライアント 従 来 のWebアプリ( 同 期 ユーザが 待 たされる) ユーザー 側 の 活 動 データ 送 信 ユーザー 側 の 活 動 データ 送 信 データ 送 信 待 ち 時 間 がある L データ 送 信 時 間 軸 ユーザー 側 の 活 動 データ 送 信 サーバー システム 処 理 システム 処 理 Ajax Webアプリ( 非 同 期 ユーザが 快 適 ) クライアント ユーザー 側 の 活 動 待 ち 時 間 がない J 入 力 表 示 入 力 表 示 入 力 表 示 入 力 表 示 サーバー クライアント 側 処 理 データ 送 信 データ 送 信 データ 送 信 データ 送 信 Ajaxエンジンが 通 信 を 担 当 する サーバーサイドの 処 理 サーバーサイドの 処 理 サーバーサイドの 処 理 サーバーサイドの 処 理
HTMLとCSSとJavaScriptの 違 い HTML CSS JavaScript 外 部 ファイル CSS JavaScript HTML Webページの 骨 格 の みを 担 当 表 現 力 は 紙 の 文 書 と 同 程 度 CSS Webページのデザイ ンを 担 当 通 常 はHTM Lと 組 み 合 わせて 用 いる JavaScript Webページを 動 的 な ものにする 通 常 は 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メソッド 演 習 問 題 1 条 件 分 岐 繰 り 返 し parseint 関 数 とparseFloat 関 数 演 習 問 題 2 演 習 問 題 3 11
alertメソッド ポップアップウィンドウに 指 定 したメッセージを 表 示 するメソッド デバッグに 利 用 可 能 正 式 にはwindow.alertだが, window. は 省 略 可 能 alert + ( + 表 示 するテキスト + ) + ; alert( Hello, World! ); 12
consoleオブジェクト デバッグ 用 のコンソール 出 力 メソッドを 提 供 JavaのSystem.out.printlnメソッドに 相 当 Rubyのputsメソッドに 相 当 右 クリックのポップアップメニューからエラー, 警 告,メッセー ジ( 情 報 ),ログの 表 示 切 替 が 可 能 IE9 以 降 はconsoleオブジェクトのメソッドを 利 用 したデバッグ を 推 奨 consoleオブジェクトのメソッド console.log(message) console.info(message) console.warn(message) console.error(message) 説 明 メッセージをコンソールに 出 力 情 報 アイコン 付 きでメッセージを コンソールに 出 力 警 告 アイコン 付 きでメッセージを コンソールに 出 力 エラーアイコン 付 きでメッセージ をコンソールに 出 力 13
変 数 データ 型 変 数 宣 言 はvarを 用 いる 変 数 の 長 さは1 文 字 以 上 変 数 の 最 初 の 文 字 に 使 えるのは, 英 字,アンダー スコア(_),ドル 記 号 ($) $total,_firstname,top100 空 白 文 字 と(_と$ 以 外 の) 特 殊 文 字 は 使 えない 5to10,first name,#total,world! 14
変 数 データ 型 基 本 データ 型 は 数 値 文 字 列 論 理 値 の3 種 類 ex3.html 数 値 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); 15
演 算 子 (よく 使 われるもの) ex4.html,ex5.html,ex6.html 算 術 演 算 子 +( 加 算 ),-( 減 算 ),*( 乗 算 ),/( 除 算 ),%( 余 剰 ) ++(インクリメント),--(デクリメント) 論 理 演 算 子 &&( 論 理 積 ), ( 論 理 和 ),!( 否 定 ) 比 較 演 算 子 <( 小 なり),<=( 以 下 ),>( 大 なり),>=( 以 上 ) ==( 等 しい),!=( 等 しくない) 代 入 演 算 子 =( 代 入 ),+=( 加 算 ),-=( 減 算 ),*=( 乗 算 ) /=( 除 算 ),%=( 余 剰 ) console.assert( 条 件, メッセージ) 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 戻 り 値 ; } 呼 び 出 し 方 法 関 数 名 ( 引 数 ); var num = 関 数 名 ( 引 数 ); 17
document.writeメソッド document.write( 引 数 )- 引 数 をHTMLとして 表 示 させる ex8.html var str = "Hello, World"; document.write("<p>" + str + "</p>"); document.write("<p style='color: red;'>" + str + "</p>"); 18
promptメソッド prompt( 引 数 )- 引 数 をメッセージとして 表 示 し,ユーザからの 入 力 情 報 ( 文 字 列 )を 取 得 するメソッド 正 式 にはwindow.promptだが, window. は 省 略 可 能 ex9.html var value = prompt(" 値 を 入 力 してください."); alert(value); document.write('<h1>promptメソッド</h1>'); document.write('<h1>' +value + '</h1>'); 19
演 習 問 題 1 promptメソッドとdocument.writeメソッドを 用 いて,ユーザから 入 力 されたテキストと 文 字 の 色 に 応 じて, 表 示 内 容 を 変 化 させるJavaScript プログラムを 書 きなさい 20
条 件 分 岐 ex10.html, ex11.html if 文 switch 文 マッチする 選 択 肢 が なかったときに 実 行 if ( 条 件 1) { 文 1; } else if ( 条 件 2) { 文 2; } else { 文 N; } switch (テストデータ) { case マッチデータ1: 文 1; break; case マッチデータ2: 文 2; break; default: 文 3; break; } 条 件 の 部 分 には, 論 理 値 (true or false) が 入 る break 文 を 使 って 他 の 選 択 肢 が 実 行 されないようにする 21
繰 り 返 し ex12.html for 文 for ( 初 期 化 ; テスト; 更 新 ) { アクション; } while 文 初 期 化 ; while (テスト) { アクション; 更 新 ; } 22
parseint 関 数 とparseFloat 関 数 parseint( 引 数 ) 引 数 で 文 字 列 を 渡 すと 数 値 に 変 換 parsefloat( 引 数 ) 引 数 で 文 字 列 を 渡 すと 浮 動 小 数 点 に 変 換 ex13.html 23
演 習 問 題 2 演 習 問 題 1を 拡 張 して, 指 定 した 文 字 列 と 色 を, 指 定 した 回 数 表 示 するJavaScriptプログ ラムを 書 きなさい 24
演 習 問 題 3 3 択 クイズのJavaScriptプログラムを 作 成 しなさい document.writeメソッドで,クイズの 問 題 と 選 択 肢 を 表 示 しなさい promptメソッドにより 番 号 を 入 力 し, 正 解 か 不 正 解 かをdocument.write メソッドで 表 示 しなさい 3 択 クイズの 例 : 25