JavaScript 演習 1 1
JavaScript 演習の概要 1 回目 JavaScriptの概要 開発環境 JavaScriptの基本文法 1 2 回目 JavaScriptの基本文法 2 イベント処理 1 3 回目 イベント処理 2 4 回目 DOM (Document Object Model) 2
JavaScript 演習 1 の内容 JavaScriptとは JavaScriptの開発環境整備と書き方 alertメソッド コンソールへの出力方法 演習問題 1 1 変数 データ型 演算子,console.assertメソッド 関数 演習問題 1 2 document.body.innerhtml 演習問題 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
演習問題 1 1 js/ex2.js の alert と console.log メソッドの 引数を修正して 動作を確認してみてく ださい 例 : Hello, World! を こんにちは に変更してみるなど 18
変数 データ型 変数宣言は var を用いていた ( 非推奨 ) 変数の長さは 1 文字以上 変数の最初の文字に使えるのは, 英字, アンダースコア (_), ドル記号 ($) $total,_firstname,top100 空白文字と (_ と $ 以外の ) 特殊文字は使えない 5to10,first name,#total,world! ECMAScript6 からは let と const が追加された let: 再宣言不可 const: 再宣言と再代入不可 変数のスコープが var と異なる 可能であれば,var よりも let と const を利用すべき 19
変数 データ型 基本データ型は数値 文字列 論理値の 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); 20
演算子 ( よく使われるもの ) 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 21 false true
関数 再利用可能な JavaScript コードのかたまりに名前をつけたもの ex7.html, js/ex7.js 定義方法 function 関数名 ( 引数 ) { 定義内容 return 戻り値 ; } 呼び出し方法関数名 ( 引数 ); let num = 関数名 ( 引数 ); 22
演習問題 1 2 1. js/ex7.js に二つの数値を引数にとって 乗算をした結果を返す関数 mul を追加してください 2. mul 関数に num1 と num2 を引数として渡して num 変数にその結果を格納して コンソールに出力するプログラムを作成してください 23
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>"; 24
文字列への変数の埋め込み (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>` 25
演習問題 1 3 1. js/ex8-2.js の str 変数や document.body.innerhtml の内容を修正して動作を確認してください 2. css/ex8.css に.style1 をコピーして.style2 を追加し 適当なフォントのサイズや色を指定してください 3. js/ex8-2.js に name 変数を追加して自分の名前を格納し 私の名前は です と.style2 をスタイルシートのクラスとして指定して表示してください 26