Embed Size (px)
Citation preview
1
JavaScript 演習1
JavaScript 演習の概要• 1回目
– JavaScriptの概要–開発環境の整備– JavaScriptの基本文法
• 2回目– イベント処理
• 3回目– DOM (Document Object Model)
2
JavaScript 演習1の内容• JavaScriptとは• JavaScriptの開発環境整備と書き方• alertメソッド• コンソールへの出力方法
• 変数・データ型
• 演算子，console.assertメソッド• 関数
• document.body.innerHTML• promptメソッド• 演習問題１−１• 条件分岐
• 繰り返し
• 文字列を数値に変換する方法
• 演習問題１−２• 演習問題１−３ 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
Ajax (Asynchronous JavaScript and XML)
Webアプリケーションモデル従来のWeb
アプリケーションモデル
Webサーバー
データベース、バックエンド処理、レガシーシステム
サーバーサイドシステム
ユーザーインターフェース
ブラウザー
Httpリクエスト
HTTP（ｓ）通信
HTML＋CSSデータ
ユーザーインターフェース
Ajaxエンジン
ブラウザー
データベース、バックエンド処理、レガシーシステム
WebまたはXMLサーバー
サーバーサイドシステム
XMLHttpリクエスト非同期制御
XMLデータHTTP（ｓ）通信
HTML＋CSSデータJavaScript
コール
ブラウザーによってAjaxエンジン自体や、呼び出し方法が異なる
二重構造
非同期実現
クライアント
サーバー
クライアント
サーバー
従来のWebアプリ（同期→ユーザが待たされる）
Ajax Webアプリ（非同期→ユーザが快適）
ユーザー側の活動 ユーザー側の活動 ユーザー側の活動
システム処理 システム処理
データ送信
データ送信
データ送信
データ送信
クライアント側処理
データ送信
データ送信
データ送信
データ送信
ユーザー側の活動
入力 表示 入力 入力 入力表示 表示 表示
データ送信
待ち時間がある
L
待ち時間がない
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→Webページの骨格のみを担当。表現力は紙の文書と同程度。
• CSS→Webページのデザインを担当。通常はHTMLと組み合わせて用いる。
• JavaScript→Webページを動的なものにする。通常はHTMLと組み合わせて用いる。
HTMLとCSSとJavaScriptの違い
JavaScript
CSS
JavaScript
CSS
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
11
Windows版のZip archiveをダウンロードして，Zドライブ以下に保存して解凍してください．Code.exeから実行できます．
Visual Studio Code お薦めショートカット
12
ショートカットキー 説明
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 次（前）のエラー・警告に移動
JavaScriptコンソール起動方法
13
JavaScriptコンソール起動方法
14
JavaScriptの書き方• HTMLファイル内に書く方法
– <head>タグ内に以下のように記述– ex1.html
<script><!--ここにスクリプトを書く
//--></script>
• 別のテキストファイルに書く方法• ex2.html, js/ex2.js
<script src="ファイル名.js"></script>
15
HTML5以前は，type属性が必要（HTML5からデフォルトとなった）<script type="text/javascript”></script>
alertメソッド• ポップアップウィンドウに指定したメッセージを表示するメソッド
• 正式にはwindow.alertだが，「window.」は省略可能
16
alert ( ‘表示するテキスト’ ) ;+ + + +
alert(‘Hello, World!’);
コンソールへの出力方法• デバッグ用のコンソール出力メソッドを提供
– JavaのSystem.out.printlnメソッドに相当– Rubyのputsメソッドに相当
• Filterアイコンからエラー，警告，メッセージ（情報），ログの表示切替が可能
• 通常は，console.logを用いれば良い
17
consoleオブジェクトのメソッド 説明
console.log(message) メッセージをコンソールに出力
console.info(message) 情報アイコン付きでメッセージをコンソールに出力
console.warn(message) 警告アイコン付きでメッセージをコンソールに出力
console.error(message) エラーアイコン付きでメッセージをコンソールに出力
変数・データ型• 変数宣言はvarを用いる
–変数の長さは１文字以上–変数の 初の文字に使えるのは，英字，アンダースコア（_），ドル記号($)• ○ $total，_firstName，top100
–空白文字と(_と$以外の)特殊文字は使えない• × 5to10，first name，#total，world!
• ECMAScript6からはletとconstが追加された– let: 再宣言不可– const: 再宣言と再代入不可–変数のスコープがvarと異なる–可能であれば，varよりもletとconstを利用すべき 18
変数・データ型• 基本データ型は数値、文字列、論理値の3種類
– ex3.html, js/ex3.js• 数値
• 文字列
• 論理値
19
let num = 1;console.log(num);num = 3.14console.log(num);
const message = ‘Hello, World!’;console.log(message);
let bool = true;console.log(bool);bool = false;console.log(bool);
演算子（よく使われるもの）• ex4.html，ex5.html，ex6.html,
js/ex4.js, js/ex5.js, js/ex6.js• 算術演算子
– +（加算），-（減算），*（乗算），/（除算），%（余剰）– ++（インクリメント），--（デクリメント）
• 論理演算子– &&（論理積），||（論理和），!（否定）
• 比較演算子– <（小なり），<=（以下），>（大なり），>=（以上）– ==（等しい），!=（等しくない）
• 代入演算子– =（代入），+=（加算），-=（減算），*=（乗算）– /=（除算），%=（余剰）
20
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
関数
• 再利用可能なJavaScriptコードのかたまりに名前をつけたもの• ex7.html, js/ex7.js
function 関数名（引数）{
定義内容return 戻り値;
}
21
関数名（引数）;let num = 関数名（引数）;
定義方法
呼び出し方法
document.body.innerHTML• 要素.innerHTML: 要素内のHTML文書を置き換える
• ex8-1.html, js/ex8-1.js, css/ex8.css
22
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>";
文字列への変数の埋め込み（ECMAScript 2015の新機能）
• バッククォートで文字列を囲うことで，文字列中の改行や${変数名}で，変数を埋め込むことが可能になった
– ex8-2.html, js/ex8-2.js, css/ex8.css
23
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>";
promptメソッド• prompt(引数)－引数をメッセージとして表示し，ユーザからの入力情報（文字列）を取得するメソッド
• 正式にはwindow.promptだが，「window.」は省略可能• ex9.html, js/ex9.js
24
const value = prompt("値を入力してください．");alert(value);document.body.innerHTML = '<h1>promptメソッド</h1>';document.body.innerHTML += `<h1>${value}</h1>`;
演習問題１−１promptメソッドとdocument.body.innerHTMLを用いて，ユーザから入力されたテキストと文字の色に応じて，表示内容を変化させるJavaScriptプログラムを書きなさい
25
条件分岐• ex10.html, ex11.html, js/ex10.js, js/ex11.js• if文
• switch文
26
if (条件1) {文1;
} else if (条件2) {文2;・・・・・
} else {文N;
}
条件の部分には，論理値（true or false)
が入る
switch (テストデータ) {caseマッチデータ１:
文１;break;
caseマッチデータ２: 文２;break;
default:文３;break;
}
break文を使って他の選択肢が実行されないようにする
マッチする選択肢がなかったときに実行
繰り返し• ex12.html, js/ex12.js• for文
• while文
27
for (初期化; テスト; 更新) {アクション;
}
初期化;while (テスト) {
アクション;更新;
}
文字列を数値に変換する方法
• parseInt(引数)– 引数に数値文字列を渡すと整数に変換– 実数文字列を渡した場合，小数点以下は無視される
• parseFloat(引数)– 引数に数値文字列を渡すと浮動小数点数に変換
• Number(引数)– 引数に数値文字列を渡すと数値に変換– 数値以外の文字列を渡した場合，NaNが返る
• isNaN(引数)– 引数に渡された文字列が数値文字列でない場合にtrueを返す（数値文字列の場合はfalseを返す）
• ex13.html, js/ex13.js28
演習問題１−２演習問題１を拡張して，指定した文字列と色とフォントサイズを，指定した回数表示するJavaScriptプログラムを書きなさい
29
演習問題１−３• 3択クイズのJavaScriptプログラムを作成しなさい
– document.body.innerHTMLを用いて，クイズの問題と選択肢を表示しなさい– promptメソッドにより番号を入力し，正解か不正解かを
document.body.innerHTMLを用いて表示しなさい– 正解の時と不正解の時で，フォントの色などを変更してみてください
30
3択クイズの例
