JavaScript 演 習 1 1
1 回 目 JavaScript 演 習 の 概 要 JavaScriptの 概 要 開 発 環 境 の 整 備 JavaScriptの 基 本 文 法 2 回 目 イベント 処 理 3 回 目 DOM (Document Object Model) 2
JavaScript 演 習 1の 内 容 JavaScriptとは JavaScriptの 開 発 環 境 整 備 と 書 き 方 alertメソッド コンソールへの 出 力 方 法 変 数 データ 型 演 算 子,console.assertメソッド 関 数 document.body.innerhtml promptメソッド 演 習 問 題 1 1 条 件 分 岐 繰 り 返 し 文 字 列 を 数 値 に 変 換 する 方 法 演 習 問 題 1 2 演 習 問 題 1 3 3
JavaScript( 言 語 )とは 情 報 システムのプログラミング ソースコード 記 述, 外 部 ファイル 保 存, コンパイル,テスト,デバッグ... 大 変 な 作 業 もっと 手 軽 なプログラミング 特 別 な 言 語 処 理 系 は 不 要! Webブラウザだけで 実 行 可 能 ( 実 際 は,HTMLファイル 内 or 外 部 ファイル として 記 述 保 存 ) 4
1990 年 代 : JavaScript は 不 遇 Java 言 語 とは 全 く 異 なる, 簡 易 型 プログラミング(スクリプト= 台 本 ) 言 語 コンパイラではなくインタープリタ オブジェクト 指 向 型 スクリプト 言 語 C 言 語 に 似 た 手 続 き 型 言 語 のようなスタイルで 書 かれる NetScape 社 でサーバ 負 荷 軽 減 のために 開 発 90 年 代 後 半 は,セキュリティの 脆 弱 性,ブラウザによって 挙 動 が 異 なるなど, 問 題 の 多 かった 言 語 5
2005-: JavaScriptは 脚 光 2000 年 頃 から AmazonやGoogleといった 企 業 が 採 用 2005 年 Google Mapの 登 場 により 状 況 が 一 変 ユーザ 満 足 度 (ユーザエクスペリエンス)を 重 視 した リッチクライアントに 対 応 したWebサイトが 続 々 登 場 サーバからクライアントへの 転 送 データ 量 の 減 少 直 感 的 な 操 作 が 可 能 Gmail, Googleサジェスト, Amazon Web Service, ドラッグアンドドロップ, タブページ, Widgetなどなど 入 力 値 チェックなどにも 利 用 6
従 来 の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エンジンが 通 信 を 担 当 する サーバーサイドの 処 理 サーバーサイドの 処 理 サーバーサイドの 処 理 サーバーサイドの 処 理
ECMAScript 2015 (ES6) ECMAScript 2015 2015 年 6 月 にリリース http://www.ecma-international.org/ecma-262/6.0/ 参 考 Webサイト http://es6-features.org/ http://exploringjs.com/ ECMAScript6 compatibility table https://kangax.github.io/compat-table/es6/ Babel https://babeljs.io/ https://babeljs.io/repl/ 9
HTMLとCSSとJavaScriptの 違 い HTML CSS JavaScript 外 部 ファイル CSS JavaScript HTML Webページの 骨 格 のみ を 担 当 表 現 力 は 紙 の 文 書 と 同 程 度 CSS Webページのデザイン を 担 当 通 常 はHTMLと 組 み 合 わせて 用 いる JavaScript Webページを 動 的 なも のにする 通 常 はHTML と 組 み 合 わせて 用 いる
JavaScript 開 発 環 境 Webブラウザ: Google Chrome テキストエディタ: Visual Studio Code https://code.visualstudio.com/download ドキュメント https://code.visualstudio.com/docs http://www.atmarkit.co.jp/ait/articles/1507/10/news028.html Windows 版 のZip archiveをダウンロードして, Zドライブ 以 下 に 保 存 して 解 凍 してください. Code.exeから 実 行 できます. 11
Visual Studio Code お 薦 めショートカット ショートカットキー 説 明 Ctrl + P 指 定 したファイルに 移 動 Ctrl + Shift + P コマンド パレット( 全 機 能 が 一 覧 できる)を 表 示 (?でヘルプ) Ctrl + Tab / Ctrl + Shift + Tab 最 近 利 用 したファイルに 移 動 Ctrl + 左 クリック リンク 先 (JSファイル,CSSファイル, 変 数, 関 数 など)を 開 く Ctrl + Shift + O シンボル( 変 数 や 関 数 など)に 移 動 F12 変 数 や 関 数 の 定 義 場 所 に 移 動 F2 シンボル 名 ( 変 数 名, 関 数 名,ファイル 名 など)を 変 更 Ctrl + O / Ctrl + S ファイルを 開 く /ファイルを 保 存 Ctrl + 1 / Ctrl + 2 / Ctrl + 3 分 割 したエディタを 左 から 順 番 にフォーカス Ctrl + / Ctrl + W エディタを 分 割 / エディタを 閉 じる Ctrl + F 開 いているファイル 内 の 検 索 Ctrl + Shift + F フォルダ 内 のファイルを 対 象 に 検 索 Ctrl + H 開 いているファイル 内 の 文 字 列 置 換 Shift + Alt + F コードをフォーマット F8 / Shift + F8 次 ( 前 )のエラー 警 告 に 移 動 12
JavaScriptコンソール 起 動 方 法 13
JavaScriptコンソール 起 動 方 法 14
JavaScriptの 書 き 方 HTMLファイル 内 に 書 く 方 法 <head>タグ 内 に 以 下 のように 記 述 ex1.html <script> <!-- ここにスクリプトを 書 く //--> </script> 別 のテキストファイルに 書 く 方 法 ex2.html, js/ex2.js <script src="ファイル 名.js"></script> HTML5 以 前 は,type 属 性 が 必 要 (HTML5からデフォルトとなった) <script type="text/javascript ></script> 15
alertメソッド ポップアップウィンドウに 指 定 したメッセージを 表 示 するメソッド 正 式 にはwindow.alertだが, window. は 省 略 可 能 alert + ( + 表 示 するテキスト + ) + ; alert( Hello, World! ); 16
コンソールへの 出 力 方 法 デバッグ 用 のコンソール 出 力 メソッドを 提 供 JavaのSystem.out.printlnメソッドに 相 当 Rubyのputsメソッドに 相 当 Filterアイコンからエラー, 警 告,メッセージ( 情 報 ),ログの 表 示 切 替 が 可 能 通 常 は,console.logを 用 いれば 良 い consoleオブジェクトのメソッド console.log(message) console.info(message) console.warn(message) console.error(message) 説 明 メッセージをコンソールに 出 力 情 報 アイコン 付 きでメッセージを コンソールに 出 力 警 告 アイコン 付 きでメッセージを コンソールに 出 力 エラーアイコン 付 きでメッセージ をコンソールに 出 力 17
変 数 データ 型 変 数 宣 言 はvarを 用 いる 変 数 の 長 さは1 文 字 以 上 変 数 の 最 初 の 文 字 に 使 えるのは, 英 字,アンダー スコア(_),ドル 記 号 ($) $total,_firstname,top100 空 白 文 字 と(_と$ 以 外 の) 特 殊 文 字 は 使 えない 5to10,first name,#total,world! ECMAScript6からはletとconstが 追 加 された let: 再 宣 言 不 可 const: 再 宣 言 と 再 代 入 不 可 変 数 のスコープがvarと 異 なる 可 能 であれば,varよりもletとconstを 利 用 すべき 18
変 数 データ 型 基 本 データ 型 は 数 値 文 字 列 論 理 値 の3 種 類 ex3.html, js/ex3.js 数 値 let num = 1; console.log(num); num = 3.14 console.log(num); 文 字 列 論 理 値 const message = Hello, World! ; console.log(message); let bool = true; console.log(bool); bool = false; console.log(bool); 19
演 算 子 (よく 使 われるもの) ex4.html,ex5.html,ex6.html, js/ex4.js, js/ex5.js, js/ex6.js 算 術 演 算 子 +( 加 算 ),-( 減 算 ),*( 乗 算 ),/( 除 算 ),%( 余 剰 ) ++(インクリメント),--(デクリメント) 論 理 演 算 子 &&( 論 理 積 ), ( 論 理 和 ),!( 否 定 ) 比 較 演 算 子 <( 小 なり),<=( 以 下 ),>( 大 なり),>=( 以 上 ) ==( 等 しい),!=( 等 しくない) 代 入 演 算 子 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 20
関 数 再 利 用 可 能 なJavaScriptコードのかたまりに 名 前 を つけたもの ex7.html, js/ex7.js 定 義 方 法 function 関 数 名 ( 引 数 ) { 定 義 内 容 return 戻 り 値 ; } 呼 び 出 し 方 法 関 数 名 ( 引 数 ); let num = 関 数 名 ( 引 数 ); 21
document.body.innerhtml 要 素.innerHTML: 要 素 内 のHTML 文 書 を 置 き 換 える ex8-1.html, js/ex8-1.js, css/ex8.css document.body.innerhtml = '<h1>document.body.innerhtml</h1>'; const str = 'Hello, World'; document.body.innerhtml += '<p>' + str + '</p>'; document.body.innerhtml += "<p style='color: red;'>" + str + "</p>"; 22
文 字 列 への 変 数 の 埋 め 込 み (ECMAScript 2015の 新 機 能 ) バッククォートで 文 字 列 を 囲 うことで, 文 字 列 中 の 改 行 や${ 変 数 名 }で, 変 数 を 埋 め 込 むこ とが 可 能 になった ex8-2.html, js/ex8-2.js, css/ex8.css const str = 'Hello, World'; document.body.innerhtml += '<p>' + str + '</p>'; document.body.innerhtml += "<p style='color: red;'>" + str + "</p>"; const str = 'Hello, World'; document.body.innerhtml += `<p>${str}</p>`; document.body.innerhtml += `<p style='color: red;'>${str}</p>` 23
promptメソッド prompt( 引 数 )- 引 数 をメッセージとして 表 示 し,ユーザからの 入 力 情 報 ( 文 字 列 )を 取 得 するメソッド 正 式 にはwindow.promptだが, window. は 省 略 可 能 ex9.html, js/ex9.js const value = prompt(" 値 を 入 力 してください."); alert(value); document.body.innerhtml = '<h1>promptメソッド</h1>'; document.body.innerhtml += `<h1>${value}</h1>`; 24
演 習 問 題 1 1 promptメソッドとdocument.body.innerhtmlを 用 いて,ユーザから 入 力 されたテキストと 文 字 の 色 に 応 じて, 表 示 内 容 を 変 化 させるJavaScriptプログラ ムを 書 きなさい 25
条 件 分 岐 ex10.html, ex11.html, js/ex10.js, js/ex11.js 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 文 を 使 って 他 の 選 択 肢 が 実 行 されないようにする 26
繰 り 返 し ex12.html, js/ex12.js for 文 for ( 初 期 化 ; テスト; 更 新 ) { アクション; } while 文 初 期 化 ; while (テスト) { アクション; 更 新 ; } 27
文 字 列 を 数 値 に 変 換 する 方 法 parseint( 引 数 ) 引 数 に 数 値 文 字 列 を 渡 すと 整 数 に 変 換 実 数 文 字 列 を 渡 した 場 合, 小 数 点 以 下 は 無 視 される parsefloat( 引 数 ) 引 数 に 数 値 文 字 列 を 渡 すと 浮 動 小 数 点 数 に 変 換 Number( 引 数 ) 引 数 に 数 値 文 字 列 を 渡 すと 数 値 に 変 換 数 値 以 外 の 文 字 列 を 渡 した 場 合,NaNが 返 る isnan( 引 数 ) 引 数 に 渡 された 文 字 列 が 数 値 文 字 列 でない 場 合 にtrueを 返 す( 数 値 文 字 列 の 場 合 はfalseを 返 す) ex13.html, js/ex13.js 28
演 習 問 題 1 2 演 習 問 題 1を 拡 張 して, 指 定 した 文 字 列 と 色 と フォントサイズを, 指 定 した 回 数 表 示 する JavaScriptプログラムを 書 きなさい 29
演 習 問 題 1 3 3 択 クイズのJavaScriptプログラムを 作 成 しなさい document.body.innerhtmlを 用 いて,クイズの 問 題 と 選 択 肢 を 表 示 しなさい promptメソッドにより 番 号 を 入 力 し, 正 解 か 不 正 解 かを document.body.innerhtmlを 用 いて 表 示 しなさい 正 解 の 時 と 不 正 解 の 時 で,フォントの 色 などを 変 更 してみてください 3 択 クイズの 例 30