JavaScript 演習の概要
•
1回目
–
JavaScriptの概要
–
開発環境
–
JavaScriptの基本文法1
•
2回目
–
JavaScriptの基本文法2
–
イベント処理1
•
3回目
–
イベント処理2
•
4回目
JavaScript 演習1の内容
•
JavaScriptとは
•
JavaScriptの開発環境整備と書き方
•
alertメソッド
•
コンソールへの出力方法
•
演習問題１−１
•
変数・データ型
•
演算子，console.assertメソッド
•
関数
•
演習問題１−2
•
document.body.innerHTML
•
演習問題１−3
3JavaScript(言語）とは
•
情報システムのプログラミング
→ソースコード記述，外部ファイル保存，
コンパイル，テスト，デバッグ．．．
→大変な作業
•
もっと手軽なプログラミング
→特別な言語処理系は不要！
→
Webブラウザだけで実行可能
（実際は，HTMLファイル内or外部ファイル
として記述保存）
1990年代：JavaScript は不遇
•
Java言語とは全く異なる,簡易型プログラミング（スク
リプト＝台本）言語。
コンパイラではなくインタープリ
タ。
•
オブジェクト指向型スクリプト言語。C言語に似た手続
き型言語のようなスタイルで書かれる。
•
NetScape社でサーバ負荷軽減のために開発。
•
90年代後半は，セキュリティの脆弱性，ブラウザによっ
て
挙動が異なるなど，問題の多かった言語
52005-: JavaScriptは脚光
•
2000年頃から
–
AmazonやGoogleといった企業が採用
•
2005年
Google Mapの登場により状況が一変
–
ユーザ満足度（ユーザエクスペリエンス）を重視し
たリッチクライアントに対応したWebサイトが続々登
場
–
サーバからクライアントへの転送データ量の減少
–
直感的な操作が可能
• Gmail, Googleサジェスト, Amazon Web Service,
• ドラッグアンドドロップ, タブページ, Widgetなどなど
Ajax (Asynchronous JavaScript and XML) Webアプリケーションモデル
従来のWeb
アプリケーションモデル
Webサーバー データベース、バックエンド処理、 レガシーシステム サーバーサイドシステム ユーザーインターフェースブラウザー
Httpリクエスト HTTP（ｓ）通信 HTML＋CSSデータ ユーザーインターフェースAjaxエンジン
ブラウザー
データベース、バックエンド処理、 レガシーシステム WebまたはXMLサーバー サーバーサイドシステム XMLHttp リクエスト 非同期制御 HTTP（ｓ）通信 XMLデータ HTML ＋CSSデータ JavaScript コール ブラウザーによって Ajaxエンジン自体や、 呼び出し方法が 異なる二
重
構
造
非同期実現クライアント サーバー クライアント サーバー
従来のWebアプリ（同期→ユーザが待たされる）
Ajax Webアプリ（非同期→ユーザが快適）
ユーザー側の活動 ユーザー側の活動 ユーザー側の活動 システム処理 システム処理 データ 送信 データ 送信 データ 送信 データ送信 クライアント側処理 データ 送信 データ送信 データ送信 データ送信 ユーザー側の活動 入力 表示 入力 表示 入力 表示 入力 表示 データ送信 待ち時間がある 待ち時間がない サーバーサイドの処理 サーバーサイドの処理 サーバーサイドの処理 サーバーサイドの処理時間軸
▶ Ajaxエンジンが 通信を担当する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
HTML
と
CSS
と
JavaScript
の
違い
•
HTML
→Webページの
骨格
のみ
を担当。表現力は
紙の文
書
と同程度。
•
CSS
→Webページの
デザイン
を担当。通常は
HTML
と
組み合わせて用いる。
•
JavaScript
→Webページを
動的
なも
のにする。通常は
HTML
と組み合わせて用いる。
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
ショートカットキー 説明
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コンソール起動方法
JavaScriptの書き方
•
HTMLファイル内に書く方法
– <head>タグ内に以下のように記述 – ex1.html 15<script>
<!--ここにスクリプトを書く
//-->
</script>
• 別のテキストファイルに書く方法
• ex2.html, js/ex2.js
<script src="
ファイル名.js
"></script>
alertメソッド
•
ポップアップウィンドウに指定したメッセージ
を表示するメソッド
•
正式にはwindow.alertだが，「window.」は
省略可能
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!」を「こんにちは」
に変更してみるなど
変数・データ型
•
変数宣言は
var
を用いていた（
非推奨
）
–
変数の長さは１文字以上
–
変数の最初の文字に使えるのは，英字，アンダースコア
（_），ドル記号($)
• ○ $total，_firstName，top100–
空白文字と(_と$以外の)特殊文字は使えない
• × 5to10，first name，#total，world!
•
ECMAScript6からは
let
と
const
が追加された
–
let: 再宣言不可
–
const: 再宣言と再代入不可
–
変数のスコープがvarと異なる
–
可能であれば，varよりもletとconstを利用すべき
変数・データ型
•
基本データ型は
数値
、
文字列
、
論理値
の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;
演算子（よく使われるもの）
•
ex4.html，ex5.html，ex6.html,
js/ex4.js, js/ex5.js, js/ex6.js
•
算術演算子
– +（加算），-（減算），*（乗算），/（除算），%（余剰） – ++（インクリメント），--（デクリメント）•
論理演算子
– &&（論理積），||（論理和），!（否定）•
比較演算子
– <（小なり），<=（以下），>（大なり），>=（以上） – ==（等しい），!=（等しくない）•
代入演算子
– =（代入），+=（加算），-=（減算），*=（乗算） – /=（除算），%=（余剰） 21 p q p && qtrue 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 戻り値;
}
関数名（引数）;
let num = 関数名（引数）;
定義方法
呼び出し方法
演習問題１−2
1.
js/ex7.jsに二つの数値を引数にとって、
乗算をした結果を返す関数mulを追加し
てください
2.
mul関数にnum1とnum2を引数として渡
して、num変数にその結果を格納して、
コンソールに出力するプログラムを作
成してください
23document.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>';
文字列への変数の埋め込み
（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>';
