1
JavaScript(言語）とは
• 情報システムのプログラミング
→ソースコード記述，外部ファイル保存，
コンパイル，テスト，デバッグ．．．
→大変な作業
• もっと手軽なプログラミング
→特別な言語処理系は不要！
→
Web
ブラウザだけで実行可能
（実際は，
HTMLファイル内or外部ファイル
として記述保存）
21990
年代：
JavaScript
は不遇
• Java言語とは全く異なる,簡易型プログラミング（スクリプト＝ 台本）言語。コンパイラではなくインタープリタ。 • オブジェクト指向型スクリプト言語。C言語に似た手続き型言 語のようなスタイルで書かれる。 • NetScape社でサーバ負荷軽減のために開発。 • 90年代後半は，セキュリティの脆弱性，ブラウザによって 挙動が異なるなど，問題の多かった言語 32005-: 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アプリ（非同期→ユーザが快適） ユーザー側の活動 ユーザー側の活動 ユーザー側の活動 システム処理 システム処理 データ 送信 データ 送信 データ 送信 データ送信 クライアント側処理 データ 送信 データ送信 データ送信 データ送信 ユーザー側の活動 入力 表示 入力 表示 入力 表示 入力 表示 データ送信 待ち時間がある L 待ち時間がない J サーバーサイドの処理 サーバーサイドの処理 サーバーサイドの処理 サーバーサイドの処理 時間軸 ▶ Ajaxエンジンが 通信を担当する
•
HTML
→
Webページの
骨格
の
みを担当。表現力は
紙
の文書
と同程度。
•
CSS
→
Webページの
デザイ
ン
を担当。通常は
HTM
L
と組み合わせて用
いる。
•
JavaScript
→
Webページを
動的
な
ものにする。通常は
HTML
と組み合わせて
用いる。
HTML
と
CSS
と
JavaScript
の
違い
JavaScript CSS JavaScript CSS HTML 外部ファイルJavaScript
実行
JavaScriptコンソール起動方法
• WebブラウザーにはJSコンソールが付与。
JSスクリプトを実行し確認できる。
• F12（開発者ツール）を押す。
その後
Consoleタブを選択。
• 最下行がJSスクリプト入力画面
• 実行：Ctr+Enter or 右下の↓をクリック。
それでは
Webブラウザーを起動して
F12を押してください。
9JavaScriptの書き方
• HTMLファイル内に書く方法 – <head>タグ内に以下のように記述 – ex1.html <script type="text/javascript"> <!-- ここにスクリプトを書く //--> </script> • 別のテキストファイルに書く方法 • ex2.html, ex1.js<script type="text/javascript" src="ファイル名.js"></script>
内容
• alertメソッドとconsoleオブジェクト • 変数・データ型 • 演算子，console.assertメソッド • 関数 • document.writeメソッド • promptメソッド • 演習問題１ • 条件分岐 • 繰り返し • parseInt関数とparseFloat関数 • 演習問題２ • 演習問題３ 11
alertメソッド
• ポップアップウィンドウに指定したメッセージを表
示するメソッド
• デバッグに利用可能
– 正式にはwindow.alertだが，「window.」は省略可能 12 alert + ( + ‘表示するテキスト’ + + ) ; alert(‘Hello, World!’);consoleオブジェクト
• デバッグ用のコンソール出力メソッドを提供 – JavaのSystem.out.printlnメソッドに相当 – Rubyのputsメソッドに相当 • 右クリックのポップアップメニューからエラー，警告，メッセー ジ（情報），ログの表示切替が可能 • IE9以降はconsoleオブジェクトのメソッドを利用したデバッグ を推奨 13 consoleオブジェクトのメソッド 説明 console.log(message) メッセージをコンソールに出力 console.info(message) 情報アイコン付きでメッセージを コンソールに出力 console.warn(message) 警告アイコン付きでメッセージを コンソールに出力 console.error(message) エラーアイコン付きでメッセージ をコンソールに出力変数・データ型
• 変数宣言は
var
を用いる
– 変数の長さは１文字以上
– 変数の最初の文字に使えるのは，英字，アンダー
スコア（
_），ドル記号($)
• ○ $total，_firstName，top100– 空白文字と(_と$以外の)特殊文字は使えない
• × 5to10，first name，#total，world!
変数・データ型
• 基本データ型は
数値
、
文字列
、
論理値
の
3種類
– ex3.html
• 数値
• 文字列
• 論理値
15 var num = 1; console.log(num); num = 3.14 console.log(num);var message = ‘Hello, World!’; console.log(message);
var bool = true; console.log(bool); bool = false;
演算子（よく使われるもの）
• ex4.html，ex5.html，ex6.html • 算術演算子 – +（加算），-（減算），*（乗算），/（除算），%（余剰） – ++（インクリメント），--（デクリメント） • 論理演算子 – &&（論理積），||（論理和），!（否定） • 比較演算子 – <（小なり），<=（以下），>（大なり），>=（以上） – ==（等しい），!=（等しくない） • 代入演算子 – =（代入），+=（加算），-=（減算），*=（乗算） – /=（除算），%=（余剰）
• console.assert(条件, メッセージ)
– 条件が満たされない場合にメッセージを表示 16 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 function 関数名（引数） { 定義内容 return 戻り値; } 17 関数名（引数）; var num = 関数名（引数）; 定義方法 呼び出し方法document.writeメソッド
• document.write(引数)－引数をHTMLとして表示させる
• ex8.html
18
var str = "Hello, World";
document.write("<p>" + str + "</p>");
prompt
メソッド
• prompt(引数)－引数をメッセージとして表示し，ユーザからの入力情報 （文字列）を取得するメソッド • 正式にはwindow.promptだが，「window.」は省略可能 • ex9.html 19
var value = prompt("値を入力してください．"); alert(value);
document.write('<h1>promptメソッド</h1>'); document.write('<h1>' +value + '</h1>');
