Embed Size (px)
Citation preview
JavaScript(言語）とは
• 情報システムのプログラミング
→ソースコード記述，外部ファイル保存，
コンパイル，テスト，デバッグ．．．
→大変な作業
• もっと手軽なプログラミング
→特別な言語処理系は不要！
→Webブラウザだけで実行可能
（実際は，HTMLファイル内or外部ファイル
として記述保存）
2
WebブラウザはWebページ閲覧に使うはず。
なんでプログラムが動くの？
• 通常は，Webページ閲覧のために，Webブラウザ（IE）を開く.
→今回は(特別に），プログラミングするためにIEを開く．
でもIEはWebページを閲覧（提示）するんだから，
一体，IEのどこにプログラムを入力するんだ？
入力箇所はあります．それはURL欄
でもそこはネットのアドレスを入力する欄でしょう．
プログラムなんか入力したらエラーになるよ．
通常はhttp://～によりアドレスを指定します。
http://JavaScriptプログラム文 とすれば
確かにエラーになります。確認しましょう。
3
失敗 http://alert(hello) vs. 成功 http://yahoo
http://alert(hello)をURL欄に入力して実行
サーバが見つかりませんでした
www.alert(hello).com という
名前のサーバが見つかりませんでした。
http: HTTPプロトコル
// ホスト記述の開始を表す（ルート） alert(hello) をwww.alert(hello).comに解釈して
www ：Webサーバ名
alert(hello).com ドメイン名
ネット上にそのサーバが存在しなかった。
※ちなみに http://yahoo なら成功する。
4
URLの復習
• URL（ネット上の情報資源を一意に決定する方法）であり，
他のサーバが持つ情報資源を利用する時，httpプロトコルを宣言する。
<スキーム名>:<スキームにおける固有表現>
http：ハイパーテキスト転送プロトコル用スキーム
ftp：ファイル転送プロトコル用スキーム
mailto： 電子メールアドレス用スキーム
file： ホストのファイルシステム用スキーム
．．．
（非公式）javascript: JavaScriptプログラム用スキーム
5
Webブラウザーでプログラミング！
※アラートウィンドウ出現→1行プログラミング
• アドレス欄を削除し，javascript:alert(“hello”);
と入力して改行(実行） ※copy&pasteすると変なコードが
挿入されて動かないかも！？
• 小さな（アラート＝警告）ウィンドウが出現しましたか？
出現したら,ok ボタンをクリックして小ウィンドウを閉じましょう
※インタラクション→3行プログラミング
• javascript: ans=prompt("１＋１２");
document.write(ans);document.write("は正解です")
6
90年代： JavaScript は不遇
• Java言語とは全く異なる,簡易型プログラミング（スクリプト＝台本）言語。コンパイラではなくインタープリタ。
• オブジェクト指向型スクリプト言語。C言語に似た手続き型言語のようなスタイルで書かれる。
• NetScape社でサーバ負荷軽減のために開発。
• 90年代後半は，セキュリティの脆弱性，ブラウザによって
挙動が異なるなど，問題の多かった言語
7
2005-: JavaScriptは脚光
• 2000年頃から – AmazonやGoogleといった企業が採用
2005年 Google Mapの登場により状況が一変 ・ユーザ満足度（ユーザエクスペリエンス）を重視した
リッチクライアントに対応したWebサイトが続々登場 ・サーバからクライアントへの転送データ量の減少 直感的な操作が可能 Gmail, Googleサジェスト, Amazon Web Service,
ドラッグアンドドロップ, タブページ, Widgetなどなど
↑入力値チェックなどにも利用 8
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エンジンが
通信を担当する
JavaScript 演習（3回）目的
• HTML・ＣＳＳのおさらいと、流行り（？）のWeb2.0技術JavaScriptプログラミング
• DHTML作成を通じて、見て動くプログラムの楽しさ
• COM実験への基礎知識
11
HTML
12
HTMLの構造 • <!DOCTYPE>
ドキュメントタイプの宣言
• <HTML>～</HTML>
HTML文書だということの宣言
– <HEAD>～</HEAD>
文書のヘッダ情報
• <META />
その文書に関するメタ情報
• <TITLE>～</TITLE>
文書のタイトル
– <BODY></BODY>
文書本体
<!DOCTYPE HTML PUBLIC "-
//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>テストページ</title>
</head>
<body>
</body>
</html>
HTMLタグの一例 • <h1>～<h6>
見出しをつける
• <p>
一つの段落を表す
• <br>
改行
• <ul>,<ol>
順序の無し,ありのリスト
• <li>
リストの項目
• <a>
リンクの開始
• <img>
画像の表示
<html>
<head>
<title>テストページ</title>
</head>
<body>
<h1>見出し1</h1>
<h2>見出し2</h2>
<p>HelloWorld!</p>
Hello<br>World!
<ol type="a">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>
<p><a href="./htmlEx2.html">サンプルその２</a></p>
<p><img src="./ex.jpg"></p>
</body>
</html>
htmlEx1.html
CSS
15
CSSの書き方
• HTMLファイル内に書く方法 – <head>タグ内に以下のように記述
– htmlEx3.html
<style type="text/css">
ここにスタイルを記述
</style>
• 別のテキストファイルに書く方法
• htmlEx2.html, cssEx.css
<link rel="stylesheet" type="text/css" href="ファイル名.css ">
16
Webページのデザインを定義
CSSの書式
• セレクタ { プロパティ: 値; プロパティ: 値 }
セレクタ：スタイル適用対象の選択
プロパティ：‘font-size’ や ‘line-height’ のようなレンダリング特性
値：プロパティに指定可能な値が定義
• とほほのスタイルシート入門
– http://www.tohoho-web.com/css/
JavaScript
18
JavaScriptの書き方
• HTMLファイル内に書く方法 – <head>タグ内に以下のように記述
– ex1.html
<script type="text/javascript"> <!-- ここにスクリプトを書く //--> </script>
• 別のテキストファイルに書く方法
• ex2.html, ex1.js
<script type="text/javascript" src="ファイル名.js"></script>
19
• HTML
→Webページの骨格のみを担当。表現力は紙の文書と同程度。
• CSS
→Webページのデザインを担当。通常はHTMLと組み合わせて用いる。
• JavaScript
→Webページを動的なものにする。通常はHTMLと組み合わせて用いる。
HTMLとCSSとJavaScriptの違い
JavaScript
CSS
JavaScript
CSS
HTML
外部ファイル
内容
• alert関数
• 変数・データ型
• 演算子
• 関数
• document.write関数
• prompt関数
• 演習問題１
• 条件分岐
• 繰り返し
• parseInt関数とparseFloat関数
• 演習問題２
21
alert関数 • ポップアップウィンドウに指定したメッセージを表示する関数
• デバッグに利用可能
– JavaのSystem.out.printlnメソッドに相当
– Rubyのputsメソッドに相当
• 関数
– 再利用可能なJavaScriptコードのかたまりに名前をつけたもの
22
alert ( ‘表示するテキスト’ ) ; + + + +
alert(‘Hello, World!’);
変数・データ型
• 変数宣言はvarを用いる
–変数の長さは１文字以上
–変数の最初の文字に使えるのは，英字，アンダースコア（_），ドル記号($)
• ○ $total，_firstName，top100
–空白文字と(_と$以外の)特殊文字は使えない
• × 5to10，first name，#total，world!
23
変数・データ型 • 基本データ型は数値、文字列、論理値の3種類
– ex3.html
• 数値
• 文字列
• 論理値
24
var num = 1;
alert(num);
num = 3.14
alert(num);
var message = ‘Hello, World!’;
alert(message);
var bool = true;
alert(bool);
bool = false;
alert(bool);
演算子（よく使われるもの） • ex4.html，ex5.html，ex6.html
• 算術演算子
– +（加算），-（減算），*（乗算），/（除算），%（余剰）
– ++（インクリメント），--（デクリメント）
• 論理演算子
– &&（論理積），||（論理和），!（否定）
• 比較演算子
– <（小なり），<=（以下），>（大なり），>=（以上）
– ==（等しい），!=（等しくない）
• 代入演算子
– =（代入），+=（加算），-=（減算），*=（乗算）
– /=（除算），%=（余剰）
25
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
function 関数名（引数） {
定義内容 return 戻り値;
}
26
関数名（引数）; var num = 関数名（引数）;
定義方法
呼び出し方法
document.write関数
• document.write(引数)－引数をHTMLとして表示させる
• ex8.html
27
var str = "Hello, World"; document.write("<p>" + str + "</p>"); document.write("<p style='color: red;'>" + str + "</p>");
prompt関数 • prompt(引数)－引数をメッセージとして表示し，ユーザからの入力情報（文字列）を取得する関数
• ex9.html
28
var value = prompt("値を入力してください．");
alert(value);
document.write('<h1>prompt関数</h1>');
document.write('<h1>' +value + '</h1>');
演習問題１
• prompt関数とdocument.write関数を用いて，ユーザから入力されたテキスト，文字の色，文字のサイズ（%）に応じて，表示内容を変化させるJavaScriptプログラムを書きなさい
29
条件分岐 • ex10.html, ex11.html
• if文
• switch文
30
if (条件1) {
文1;
} else if (条件2) {
文2;
・・・・・ } else {
文N;
}
条件の部分には，
論理値（true or false)
が入る
switch (テストデータ) {
case マッチデータ１:
文１;
break;
case マッチデータ２:
文２;
break;
default:
文３;
break;
}
break文を使って他の選択肢が実行されないようにする
マッチする選択肢が
なかったときに実行
繰り返し
• ex12.html
• for文
• while文
31
for (初期化; テスト; 更新) {
アクション;
}
初期化;
while (テスト) {
アクション;
更新;
}
parseInt関数とparseFloat関数
• parseInt(引数)
–引数で文字列を渡すと数値に変換
• parseFloat(引数)
–引数で文字列を渡すと浮動小数点に変換
• ex13.html
32
演習問題2
• “Hello!”という文字列をユーザが入力した数だけ表示するJavaScriptプログラムを作成しなさい
• 行数を5で割った余りが1の場合には赤色，２の場合には緑色，３の場合には黄色，4の場合には黒，0
の場合には青色，さらに，3の倍数の場合には200%の大きさで”Hello!”を表示しなさい
33
