5回目(JavaScript1)

Size: px

Start display at page:

Download "5回目(JavaScript1)"

りえかみこ
5 years ago
Views:

1 JavaScript 演習 1 1

2 JavaScript 演習の概要 1 回目 JavaScriptの概要開発環境 JavaScriptの基本文法 1 2 回目 JavaScriptの基本文法 2 イベント処理 1 3 回目イベント処理 2 4 回目 DOM (Document Object Model) 2

3 JavaScript 演習 1 の内容 JavaScriptとは JavaScriptの開発環境整備と書き方 alertメソッドコンソールへの出力方法演習問題 1 1 変数データ型演算子,console.assertメソッド関数演習問題 1 2 document.body.innerhtml 演習問題 1 3 3

4 JavaScript( 言語 ) とは情報システムのプログラミングソースコード記述, 外部ファイル保存, コンパイル, テスト, デバッグ... 大変な作業もっと手軽なプログラミング特別な言語処理系は不要! Web ブラウザだけで実行可能 ( 実際は,HTML ファイル内 or 外部ファイルとして記述保存 ) 4

5 1990 年代 : JavaScript は不遇 Java 言語とは全く異なる, 簡易型プログラミング ( スクリプト = 台本 ) 言語コンパイラではなくインタープリタオブジェクト指向型スクリプト言語 C 言語に似た手続き型言語のようなスタイルで書かれる NetScape 社でサーバ負荷軽減のために開発 90 年代後半は, セキュリティの脆弱性, ブラウザによって挙動が異なるなど, 問題の多かった言語 5

Web サイトが続々登場サーバからクライアントへの転送データ量の減少直感的な操作が可能 Gmail, Google サジェスト,

6 2005-: JavaScript は脚光 2000 年頃から Amazon や Google といった企業が採用 2005 年 Google Map の登場により状況が一変ユーザ満足度 ( ユーザエクスペリエンス ) を重視したリッチクライアントに対応した Web サイトが続々登場サーバからクライアントへの転送データ量の減少直感的な操作が可能 Gmail, Google サジェスト, Amazon Web Service, ドラッグアンドドロップ, タブページ, Widget などなど入力値チェックなどにも利用 6

7 従来の Web アプリケーションモデルユーザーインターフェース Http リクエストブラウザー HTTP(s) 通信 Web サーバー HTML+CSS データデータベースバックエンド処理レガシーシステムサーバーサイドシステムブラウザーによって Ajax エンジン自体や呼び出し方法が異なる Ajax (Asynchronous JavaScript and XML) Web アプリケーションモデルブラウザーユーザーインターフェース JavaScript コール XMLHttp リクエスト非同期制御 Ajax エンジン非同期実現 HTTP(s) 通信 HTML +CSS データ Web または XML サーバーデータベースバックエンド処理レガシーシステムサーバーサイドシステム二重構造 XML データ

8 クライアント従来の Web アプリ ( 同期ユーザが待たされる ) ユーザー側の活動データ送信ユーザー側の活動データ送信データ送信待ち時間がある L データ送信時間軸ユーザー側の活動データ送信サーバーシステム処理システム処理 Ajax Web アプリ ( 非同期ユーザが快適 ) クライアントユーザー側の活動待ち時間がない J 入力表示入力表示入力表示入力表示サーバークライアント側処理データ送信データ送信データ送信データ送信 Ajaxエンジンが通信を担当するサーバーサイドの処理サーバーサイドの処理サーバーサイドの処理サーバーサイドの処理

9 ECMAScript 2015 (ES6) ECMAScript 年 6 月にリリース参考 Webサイト ECMAScript6 compatibility table Babel 9

10 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.

11 JavaScript 開発環境 Webブラウザ : Google Chrome テキストエディタ : Visual Studio Code ドキュメント Windows 版の Zip archive をダウンロードして, Z ドライブ以下に保存して解凍してください. Code.exe から実行できます. 11

12 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

13 JavaScript コンソール起動方法 13

14 JavaScript コンソール起動方法 14

15 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

16 alert メソッドポップアップウィンドウに指定したメッセージを表示するメソッド正式には window.alert だが, window. は省略可能 alert + ( + 表示するテキスト + ) + ; alert( Hello, World! ); 16

17 コンソールへの出力方法デバッグ用のコンソール出力メソッドを提供 Java の System.out.println メソッドに相当 Ruby の puts メソッドに相当 Filter アイコンからエラー, 警告, メッセージ ( 情報 ), ログの表示切替が可能通常は,console.log を用いれば良い consoleオブジェクトのメソッド console.log(message) console.info(message) console.warn(message) console.error(message) 説明メッセージをコンソールに出力情報アイコン付きでメッセージをコンソールに出力警告アイコン付きでメッセージをコンソールに出力エラーアイコン付きでメッセージをコンソールに出力 17

18 演習問題 1 1 js/ex2.js の alert と console.log メソッドの引数を修正して動作を確認してみてください例 : Hello, World! をこんにちはに変更してみるなど 18

19 変数データ型変数宣言は var を用いていた ( 非推奨 ) 変数の長さは 1 文字以上変数の最初の文字に使えるのは, 英字, アンダースコア (_), ドル記号 ($) $total,_firstname,top100 空白文字と (_ と $ 以外の ) 特殊文字は使えない 5to10,first name,#total,world! ECMAScript6 からは let と const が追加された let: 再宣言不可 const: 再宣言と再代入不可変数のスコープが var と異なる可能であれば,var よりも let と const を利用すべき 19

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 = true; console.log(bool); bool = false; console.log(bool); 20

21 演算子 ( よく使われるもの ) 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

22 関数再利用可能な JavaScript コードのかたまりに名前をつけたもの ex7.html, js/ex7.js 定義方法 function 関数名 ( 引数 ) { 定義内容 return 戻り値 ; } 呼び出し方法関数名 ( 引数 ); let num = 関数名 ( 引数 ); 22

23 演習問題 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.

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>"; 24

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>` 25

26 演習問題 js/ex8-2.js の str 変数や document.body.innerhtml の内容を修正して動作を確認してください 2. css/ex8.css に.style1 をコピーして.style2 を追加し適当なフォントのサイズや色を指定してください 3. js/ex8-2.js に name 変数を追加して自分の名前を格納し私の名前はですと.style2 をスタイルシートのクラスとして指定して表示してください 26

JavaScript演習

JavaScript演習 JavaScript 演習 1 2 JavaScript 演習の概要 1 回目 JavaScript の概要開発環境 JavaScript の基本文法 1 2 回目 JavaScript の基本文法 2 イベント処理 1 3 回目イベント処理 2 4 回目 DOM (Document Object Model) 3 JavaScript 演習 1 の内容 JavaScriptとは JavaScriptの開発環境整備と書き方