javascript 1 - yamaguti.comp.ae.keio.ac.jp›ž目(javascript1).pdf · •...
Post on 28-Oct-2019
6 Views
Preview:
TRANSCRIPT
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メソッド• 演習問題1−1• 条件分岐
• 繰り返し
• 文字列を数値に変換する方法
• 演習問題1−2• 演習問題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
Ajax (Asynchronous JavaScript and XML)
Webアプリケーションモデル従来のWeb
アプリケーションモデル
Webサーバー
データベース、バックエンド処理、レガシーシステム
サーバーサイドシステム
ユーザーインターフェース
ブラウザー
Httpリクエスト
HTTP(s)通信
HTML+CSSデータ
ユーザーインターフェース
Ajaxエンジン
ブラウザー
データベース、バックエンド処理、レガシーシステム
WebまたはXMLサーバー
サーバーサイドシステム
XMLHttpリクエスト非同期制御
XMLデータHTTP(s)通信
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を用いる
–変数の長さは1文字以上–変数の 初の文字に使えるのは,英字,アンダースコア(_),ドル記号($)• ○ $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>`;
演習問題1−1promptメソッドと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マッチデータ1:
文1;break;
caseマッチデータ2: 文2;break;
default:文3;break;
}
break文を使って他の選択肢が実行されないようにする
マッチする選択肢がなかったときに実行
繰り返し• ex12.html, js/ex12.js• for文
• while文
27
for (初期化; テスト; 更新) {アクション;
}
初期化;while (テスト) {
アクション;更新;
}
文字列を数値に変換する方法
• parseInt(引数)– 引数に数値文字列を渡すと整数に変換– 実数文字列を渡した場合,小数点以下は無視される
• parseFloat(引数)– 引数に数値文字列を渡すと浮動小数点数に変換
• Number(引数)– 引数に数値文字列を渡すと数値に変換– 数値以外の文字列を渡した場合,NaNが返る
• isNaN(引数)– 引数に渡された文字列が数値文字列でない場合にtrueを返す(数値文字列の場合はfalseを返す)
• ex13.html, js/ex13.js28
演習問題1−2演習問題1を拡張して,指定した文字列と色とフォントサイズを,指定した回数表示するJavaScriptプログラムを書きなさい
29
演習問題1−3• 3択クイズのJavaScriptプログラムを作成しなさい
– document.body.innerHTMLを用いて,クイズの問題と選択肢を表示しなさい– promptメソッドにより番号を入力し,正解か不正解かを
document.body.innerHTMLを用いて表示しなさい– 正解の時と不正解の時で,フォントの色などを変更してみてください
30
3択クイズの例
top related