7回目(JavaScript1)

Size: px

Start display at page:

Download "7回目(JavaScript1)"

いとはとりこし
7 years ago
Views:

1 JavaScript 演習 1 1

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

3 JavaScript 演習 1の内容 JavaScriptとは JavaScriptの開発環境整備と書き方 alertメソッドコンソールへの出力方法変数データ型演算子,console.assertメソッド関数 document.body.innerhtml promptメソッド演習問題 1 1 条件分岐繰り返し文字列を数値に変換する方法演習問題 1 2 演習問題 1 3 3

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

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

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 と組み合わせて用いる

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

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); 19

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 false true 20

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

22 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

23 文字列への変数の埋め込み (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

24 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

25 演習問題 1 1 promptメソッドとdocument.body.innerhtmlを用いて,ユーザから入力されたテキストと文字の色に応じて, 表示内容を変化させるJavaScriptプログラムを書きなさい 25

26 条件分岐 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

27 繰り返し ex12.html, js/ex12.js for 文 for ( 初期化 ; テスト; 更新 ) { アクション; } while 文初期化 ; while (テスト) { アクション; 更新 ; } 27

28 文字列を数値に変換する方法 parseint( 引数 ) 引数に数値文字列を渡すと整数に変換実数文字列を渡した場合, 小数点以下は無視される parsefloat( 引数 ) 引数に数値文字列を渡すと浮動小数点数に変換 Number( 引数 ) 引数に数値文字列を渡すと数値に変換数値以外の文字列を渡した場合,NaNが返る isnan( 引数 ) 引数に渡された文字列が数値文字列でない場合にtrueを返す( 数値文字列の場合はfalseを返す) ex13.html, js/ex13.js 28

29 演習問題 1 2 演習問題 1を拡張して, 指定した文字列と色とフォントサイズを, 指定した回数表示する JavaScriptプログラムを書きなさい 29

30 演習問題択クイズのJavaScriptプログラムを作成しなさい document.body.innerhtmlを用いて,クイズの問題と選択肢を表示しなさい promptメソッドにより番号を入力し, 正解か不正解かを document.body.innerhtmlを用いて表示しなさい正解の時と不正解の時で,フォントの色などを変更してみてください 3 択クイズの例 30

JavaScript演習

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