JavaScript 演習 1
2 JavaScript 演習の概要 1 回目 JavaScript の概要 開発環境 JavaScript の基本文法 1 2 回目 JavaScript の基本文法 2 イベント処理 1 3 回目 イベント処理 2 4 回目 DOM (Document Object Model)
3 JavaScript 演習 1 の内容 JavaScriptとは JavaScriptの開発環境整備と書き方 alertメソッド コンソールへの出力方法 演習問題 1 1 変数 データ型 演算子,console.assertメソッド 関数 演習問題 1 2 document.body.innerhtml 演習問題 1 3
4 JavaScript( 言語 ) とは 情報システムのプログラミング ソースコード記述, 外部ファイル保存, コンパイル, テスト, デバッグ... 大変な作業 もっと手軽なプログラミング 特別な言語処理系は不要! Web ブラウザだけで実行可能 ( 実際は,HTML ファイル内 or 外部ファイルとして記述保存 )
5 1990 年代 :JavaScript は不遇 Java 言語とは全く異なる, 簡易型プログラミング ( スクリプト = 台本 ) 言語 コンパイラではなくインタープリタ オブジェクト指向型スクリプト言語 C 言語に似た手続き型言語のようなスタイルで書かれる NetScape 社でサーバ負荷軽減のために開発 90 年代後半は, セキュリティの脆弱性, ブラウザによって挙動が異なるなど, 問題の多かった言語
6 2005-: JavaScriptは脚光 2000年頃から AmazonやGoogleといった企業が採用 2005年 Google Mapの登場により状況が一変 ユーザ満足度 ユーザエクスペリエンス を重視し たリッチクライアントに対応したWebサイトが続々登 場 サーバからクライアントへの転送データ量の減少 直感的な操作が可能 Gmail, Googleサジェスト, Amazon Web Service, ドラッグアンドドロップ, タブページ, Widgetなどなど 入力値チェックなどにも利用
従来のWeb アプリケーションモデル ブラウザー Ajax (Asynchronous JavaScript and XML) Webアプリケーションモデル ブラウザーによって Ajaxエンジン自体や 呼び出し方法が 異なる ブラウザー ユーザーインターフェース ユーザーインターフェース HTML CSSデータ JavaScript コール Httpリクエスト 二 重 構 造 Ajaxエンジン HTTP ｓ 通信 HTML CSSデータ 非同期実現 XMLHttp リクエスト 非同期制御 HTTP ｓ 通信 XMLデータ Webサーバー WebまたはXMLサーバー データベース バックエンド処理 レガシーシステム サーバーサイドシステム データベース バックエンド処理 レガシーシステム サーバーサイドシステム
8 従来のWebアプリ 同期 ユーザが待たされる 時間軸 待ち時間がある クライアント ユーザー側の活動 ユーザー側の活動 ユーザー側の活動 データ送信 データ データ データ 送信 送信 送信 サーバー データ 送信 システム処理 システム処理 Ajax Webアプリ 非同期 ユーザが快適 クライアント 待ち時間がない ユーザー側の活動 入力 表示 入力 表示 入力 表示 入力 表示 クライアント側処理 データ データ データ 送信 送信 送信 サーバー サーバーサイドの処理 サーバーサイドの処理 サーバーサイドの処理 データ 送信 Ajaxエンジンが 通信を担当する サーバーサイドの処理
9 ECMAScript 2015 (ES6) ECMAScript 2015 2015 年 6 月にリリース クラス, モジュール,let, const など様々な機能が追加 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/ 最新版は 2017 年 6 月に公開された ECMAScript2017
10 HTML と CSS と JavaScript の違い HTML Web ページの骨格のみを担当 表現力は紙の文書と同程度 CSS Web ページのデザインを担当 通常は HTML と組み合わせて用いる JavaScript Web ページを動的なものにする 通常は HTML と組み合わせて用いる HTML CSS JavaScript 外部ファイル CSS JavaScript
11 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
12 Visual Studio Code お薦めショートカット ショートカットキー 説明 Ctrl + P 指定したファイルに移動 Ctrl + Shift + P コマンド パレット ( 全機能が一覧できる ) を表示 (? でヘルプ ) Ctrl + Tab / Ctrl + Shift + Tab Ctrl + 左クリック 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 最近利用したファイルに移動リンク先 (JSファイル,CSSファイル, 変数, 関数など ) を開くシンボル ( 変数や関数など ) に移動変数や関数の定義場所に移動シンボル名 ( 変数名, 関数名, ファイル名など ) を変更ファイルを開く / ファイルを保存分割したエディタを左から順番にフォーカスエディタを分割 / エディタを閉じる開いているファイル内の検索フォルダ内のファイルを対象に検索開いているファイル内の文字列置換コードをフォーマット次 ( 前 ) のエラー 警告に移動
13 JavaScript コンソール起動方法
14 JavaScript コンソール起動方法
15 JavaScriptの書き方 HTMLファイル内に書く方法 <head>タグ内に以下のように記述 ex1.html <script> <!-ここにスクリプトを書く //--> </script> 別のテキストファイルに書く方法 ex2.html, js/ex2.js <script src="ファイル名.js"></script>
16 alertメソッド ポップアップウィンドウに指定したメッセージ を表示するメソッド 正式にはwindow.alertだが window. は 省略可能 alert + ( + 表示するテキスト + ) + ; alert( Hello, World! );
17 コンソールへの出力方法 デバッグ用のコンソール出力メソッドを提供 JavaのSystem.out.printlnメソッドに相当 Rubyのputsメソッドに相当 Filterアイコンからエラー 警告 メッセージ 情報 ログの表示切替が可能 通常は console.logを用いれば良い consoleオブジェクトのメソッド 説明 console.log(message) メッセージをコンソールに出力 console.info(message) 情報アイコン付きでメッセージをコン ソールに出力 console.warn(message) 警告アイコン付きでメッセージをコン ソールに出力 console.error(message) エラーアイコン付きでメッセージをコン ソールに出力
18 演習問題１ １ js/ex2.jsのalertとconsole.logメソッドの 引数を修正して 動作を確認してみ てください 例 Hello, World! を こんにちは に変更してみるなど
変数 データ型 19 変数宣言はvarを用いていた 非推奨 変数の長さは１文字以上 変数の最初の文字に使えるのは 英字 アンダースコア _ ドル記号($) $total _firstname top100 空白文字と(_と$以外の)特殊文字は使えない 5to10 first name #total world! ECMAScript6からはletとconstが追加された let: 再宣言不可 const: 再宣言と再代入不可 変数のスコープがvarと異なる 可能であれば varよりもletとconstを利用すべき
変数 データ型 20 基本データ型は数値 文字列 論理値の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 = ; console.log(bool); bool = ; console.log(bool);
21 演算子 よく使われるもの ex4.html ex5.html ex6.html, js/ex4.js, js/ex5.js, js/ex6.js 算術演算子 p q p && q p q p q + 加算 - 減算 * 乗算 / 除算 % 余剰 ++ インクリメント -- デクリメント 論理演算子 && 論理積 論理和! 否定 比較演算子 < 小なり <= 以下 > 大なり >= 以上 == 等しい!= 等しくない 代入演算子 = 代入 += 加算 -= 減算 *= 乗算 /= 除算 %= 余剰 p!p
22 関数 再利用可能な JavaScript コードのかたまりに名前をつけたもの ex7.html, js/ex7.js 定義方法 function 関数名 ( 引数 ) { 定義内容 return 戻り値 ; } 呼び出し方法 関数名 ( 引数 ); let num = 関数名 ( 引数 );
23 演習問題 1 2 1. js/ex7.js に二つの数値を引数にとって 乗算をした結果を返す関数 mul を追加してください 2. mul 関数に num1 と num2 を引数として渡して num 変数にその結果を格納して コンソールに出力するプログラムを作成してください
24 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>";
25 文字列への変数の埋め込み 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>`
26 演習問題 1 3 1. js/ex8-2.js の str 変数や document.body.innerhtml の内容を修正して動作を確認してください 2. css/ex8.css に.style1 をコピーして.style2 を追加し 適当なフォントのサイズや色を指定してください 3. js/ex8-2.js に name 変数を追加して自分の名前を格納し 私の名前は です と.style2 をスタイルシートのクラスとして指定して表示してください