26
JavaScript 演習1
JavaScript 演習1
JavaScript 演習の概要
• 1回目
– JavaScriptの概要
– 開発環境
– JavaScriptの基本文法1
• 2回目
– JavaScriptの基本文法2
– イベント処理1
• 3回目
– イベント処理2
• 4回目
– DOM (Document Object Model)
2
JavaScript 演習1の内容
• JavaScriptとは
• JavaScriptの開発環境整備と書き方
• alertメソッド
• コンソールへの出力方法
• 演習問題１−１
• 変数・データ型
• 演算子，console.assertメソッド
• 関数
• 演習問題１−2
• document.body.innerHTML
• 演習問題１−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（ｓ）通信
HTML＋CSSデータ
ユーザーインターフェース
Ajaxエンジン
ブラウザー
データベース、バックエンド処理、レガシーシステム
WebまたはXMLサーバー
サーバーサイドシステム
XMLHttpリクエスト非同期制御
XMLデータHTTP（ｓ）通信
HTML＋CSSデータJavaScript
コール
ブラウザーによってAjaxエンジン自体や、
呼び出し方法が異なる
二重構造
非同期実現
クライアント
サーバー
クライアント
サーバー
従来のWebアプリ（同期→ユーザが待たされる）
Ajax Webアプリ（非同期→ユーザが快適）
ユーザー側の活動 ユーザー側の活動 ユーザー側の活動
システム処理 システム処理
データ送信
データ送信
データ送信
データ送信
クライアント側処理
データ送信
データ送信
データ送信
データ送信
ユーザー側の活動
入力 表示 入力 入力 入力表示 表示 表示
データ送信
待ち時間がある
待ち時間がない
サーバーサイドの処理 サーバーサイドの処理サーバーサイドの処理 サーバーサイドの処理
時間軸 ▶
Ajaxエンジンが通信を担当する
8
ECMAScript 2015 (ES6)
• ECMAScript 2015
– 2015年6月にリリース
– クラス，モジュール，let, constなど様々な機能が追加
– 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/
• 最新版は2017年6月に公開されたECMAScript2017
9
HTMLとCSSとJavaScriptの違い
• HTML→Webページの骨格のみを担当。表現力は紙の文書と同程度。
• CSS→Webページのデザインを担当。通常はHTMLと組み合わせて用いる。
• JavaScript→Webページを動的なものにする。通常はHTMLと組み合わせて用いる。
JavaScript
CSS
JavaScript
CSS
HTML
外部ファイル
10
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
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
JavaScriptコンソール起動方法13
JavaScriptコンソール起動方法14
JavaScriptの書き方
• HTMLファイル内に書く方法– <head>タグ内に以下のように記述
– ex1.html
15
<script><!--
ここにスクリプトを書く//--></script>
• 別のテキストファイルに書く方法
• ex2.html, js/ex2.js
<script src="ファイル名.js"></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)エラーアイコン付きでメッセージをコンソールに出力
演習問題１−１
• js/ex2.jsのalertとconsole.logメソッドの引数を修正して、動作を確認してみてください
–例： 「Hello, World!」を「こんにちは」に変更してみるなど
18
変数・データ型
• 変数宣言はvarを用いていた（非推奨）
– 変数の長さは１文字以上
– 変数の最初の文字に使えるのは，英字，アンダースコア（_），ドル記号($)
• ○ $total，_firstName，top100
– 空白文字と(_と$以外の)特殊文字は使えない
• × 5to10，first name，#total，world!
• ECMAScript6からはletとconstが追加された
– let: 再宣言不可
– const: 再宣言と再代入不可
– 変数のスコープがvarと異なる
– 可能であれば，varよりもletとconstを利用すべき
19
変数・データ型
• 基本データ型は数値、文字列、論理値の3種類
– ex3.html, js/ex3.js
• 数値
• 文字列
• 論理値
20
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
• 算術演算子
– +（加算），-（減算），*（乗算），/（除算），%（余剰）
– ++（インクリメント），--（デクリメント）
• 論理演算子
– &&（論理積），||（論理和），!（否定）
• 比較演算子
– <（小なり），<=（以下），>（大なり），>=（以上）
– ==（等しい），!=（等しくない）
• 代入演算子
– =（代入），+=（加算），-=（減算），*=（乗算）
– /=（除算），%=（余剰）
21
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
22
function 関数名（引数）{
定義内容return 戻り値;
}
関数名（引数）;let num = 関数名（引数）;
定義方法
呼び出し方法
演習問題１−2
1. js/ex7.jsに二つの数値を引数にとって、乗算をした結果を返す関数mulを追加してください
2. mul関数にnum1とnum2を引数として渡して、num変数にその結果を格納して、コンソールに出力するプログラムを作成してください
23
document.body.innerHTML24
• 要素.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>";
文字列への変数の埋め込み（ECMAScript 2015の新機能）
• バッククォートで文字列を囲うことで，文字列中の改行や${変数名}で，変数を埋め込むことが可能になった
– ex8-2.html, js/ex8-2.js, css/ex8.css
25
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>";
演習問題１−3
1. js/ex8-2.jsのstr変数やdocument.body.innerHTMLの内容を修正して動作を確認してください
2. css/ex8.cssに.style1をコピーして、.style2を追加し、適当なフォントのサイズや色を指定してください
3. js/ex8-2.jsにname変数を追加して自分の名前を格納し、「私の名前は〜です。」と.style2をスタイルシートのクラスとして指定して表示してください
26
![キリル数字 Cyrillic キリル数字は、数値の表現にス …occhann.jp/Documents/RosettaDoc408_Cyrillic.pdfなお、キリル数字では、[11]～[19]についてのみ、文字の並び順が[前後逆]になります。](https://static.documents.pub/doc/80x56/5f74acaf250dba11922098ba/ff-cyrillic-ffec-ff11i19eoeoee.jpg)
![contentscontents 3 勉強会での情報をチームで共有する勉強会での情報を文字が検索できるデータとしてチームで共有する [Evernote，Eye-Fi] ••••••](https://static.documents.pub/doc/80x56/5f52e3927e0d1c7688705e05/contents-contents-3-ffffoefoeoecfffffoe.jpg)
