JavaScript演習

Size: px

Start display at page:

Download "JavaScript演習"

せぴあさわなか
5 years ago
Views:

1 JavaScript 演習 1

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

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

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

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

6 2005-: JavaScriptは脚光 2000年頃から AmazonやGoogleといった企業が採用 2005年 Google Mapの登場により状況が一変ユーザ満足度ユーザエクスペリエンスを重視し

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

Httpリクエスト二重構造 Ajaxエンジン HTTP ｓ通信 HTML CSSデータ非同期実現 XMLHttp リクエスト非同期制御 HTTP ｓ通信

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

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

9 9 ECMAScript 2015 (ES6) ECMAScript 年 6 月にリリースクラス, モジュール,let, const など様々な機能が追加 262/6.0/ 参考 Web サイト ECMAScript6 compatibility table 最新版は 2017 年 6 月に公開された ECMAScript2017

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

11 11 JavaScript 開発環境 Web ブラウザ : Google Chrome テキストエディタ : Visual Studio Code ドキュメント

12 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 13 JavaScript コンソール起動方法

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

15 15 JavaScriptの書き方 HTMLファイル内に書く方法 <head>タグ内に以下のように記述 ex1.html <script> <!-ここにスクリプトを書く //--> </script> 別のテキストファイルに書く方法 ex2.html, js/ex2.js <script src="ファイル名.js"></script>

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

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

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

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

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

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

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

5回目(JavaScript1)

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