JavaScript演習

JavaScript 演習１
1
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
従来のWeb
アプリケーションモデル
ブラウザー
ユーザーインターフェース
Ajax (Asynchronous
JavaScript and XML)
Webアプリケーションモデル
ブラウザーによって
Ajaxエンジン自体
や、
呼び出し方法が
異なる
ブラウザー
ユーザーインターフェース
HTML
＋CSSデータ
JavaScript
コール
Httpリクエスト
二
重
構
造
Ajaxエンジン
HTTP（ｓ）通信
HTML＋CSS
データ
非同期実現
XMLHttp
リクエスト
非同期制御
HTTP（ｓ）通信
XMLデータ
Webサーバー
WebまたはXMLサーバー
データベース、バックエンド処
理、
レガシーシステム
サーバーサイドシステム
データベース、バックエンド処理、
レガシーシステム
サーバーサイドシステム
従来のWebアプリ（同期→ユーザが待たされる）
時間軸
待ち時間がある
クライアント

ユーザー側の活動
ユーザー側の活動
▶
ユーザー側の活動
データ送信
データ
データ
データ
送信
送信
送信
サーバー
データ
送信
システム処理
システム処理
Ajax Webアプリ（非同期→ユーザが快適）
待ち時間がない
クライアント

ユーザー側の活動
入力
表示
入力
表示
入力
表示
入力
表示
クライアント側処理
データ
データ
データ
送信
送信
送信
サーバー
サーバーサイドの処理
サーバーサイドの処理
サーバーサイドの処理
データ
送信 Ajaxエンジンが
通信を担当する
サーバーサイドの処理
JavaScript 演習（2回）目的
• 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>
JavaScript
15
内容
•
•
•
•
•
•
•
•
•
•
•
•
JavaScriptの書き方
• document.getElementById
関数
alert関数
• 演習問題３
変数・データ型
• レポート
演算子
関数
document.write関数
prompt関数
演習問題１
条件分岐
繰り返し
parseInt関数とparseFloat関数
演習問題２
16
JavaScriptの書き方
• HTMLファイル内に書く方法
– <head>タグ内に以下のように記述
– ex1.html
<script type="text/javascript">
<!-ここにスクリプトを書く
//-->
</script>
• 別のテキストファイルに書く方法
• ex2.html, ex1.js
<script type="text/javascript" src="ファイル名.js"></script>
17
alert関数
• ポップアップウィンドウに指定したメッセージを表示
する関数
• デバッグに利用可能
– JavaのSystem.out.printlnメソッドに相当
– Rubyのputsメソッドに相当
• 関数
– 再利用可能なJavaScriptコードのかたまりに名前をつけ
たもの
alert + ( + ‘表示するテキスト’ + ) + ;
alert(‘Hello, World!’);
18
変数・データ型
• 変数宣言はvarを用いる
– 変数の長さは１文字以上
– 変数の最初の文字に使えるのは，英字，アンダー
スコア（_），ドル記号($)
• ○ $total，_firstName，top100
– 空白文字と(_と$以外の)特殊文字は使えない
• × 5to10，first name，#total，world!
19
変数・データ型
• 基本データ型は数値、文字列、論理値の3種類
– ex3.html
• 数値
• 文字列
• 論理値
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);
20
演算子（よく使われるもの）
• ex4.html，ex5.html，ex6.html
• 算術演算子
– +（加算），-（減算），*（乗算），/（除算），%（余剰）
– ++（インクリメント），--（デクリメント）
• 論理演算子
– &&（論理積），||（論理和），!（否定）
• 比較演算子
p
q
p && q
p
q
p || q
true
true
true
true
true
true
true
false
false
true
false
true
false
true
false
false
true
true
false
false
false
false
false
false
p
!p
true
false
false
true
– <（小なり），<=（以下），>（大なり），>=（以上）
– ==（等しい），!=（等しくない）
• 代入演算子
– =（代入），+=（加算），-=（減算），*=（乗算）
– /=（除算），%=（余剰）
21
関数
• 再利用可能なJavaScriptコードのかたまりに名前を
つけたもの
• ex7.html
定義方法
function 関数名（引数）
{
定義内容
return 戻り値;
}
呼び出し方法
関数名（引数）;
var num = 関数名（引数）;
22
document.write関数
• document.write(引数)－引数をHTMLとして表示させる
• ex8.html
var str = "Hello, World";
document.write("<p>" + str + "</p>");
document.write("<p style='color: red;'>" + str + "</p>");
23
CSSの書式
• セレクタ { プロパティ: 値; プロパティ: 値 }
セレクタ：スタイル適用対象の選択
プロパティ：‘font-size’ や ‘line-height’ のよう
なレンダリング特性
値：プロパティに指定可能な値が定義
• とほほのスタイルシート入門
– http://www.tohoho-web.com/css/
prompt関数
• prompt(引数)－引数をメッセージとして表示し，ユーザから
の入力情報（文字列）を取得する関数
• ex9.html
var value = prompt("値を入力してください．");
alert(value);
document.write('<h1>prompt関数</h1>');
document.write('<h1>' +value + '</h1>');
25
演習問題１
• prompt関数とdocument.write関数を用いて
，ユーザから入力されたテキスト，文字の色，
文字のサイズ（%）に応じて，表示内容を変化
させるJavaScriptプログラムを書きなさい
26
条件分岐
• ex10.html, ex11.html
if (条件1) {
• if文
文1;
} else if (条件2) {
文2;
・・・・・
} else {
文N;
}
条件の部分には，
論理値（true or false)
が入る
• switch文
マッチする選択肢が
なかったときに実行
switch (テストデータ) {
case マッチデータ１:
文１;
break;
case マッチデータ２:
文２;
break;
default:
文３;
break;
}
break文を使って他の選択肢が
実行されないようにする
27
繰り返し
• ex12.html
• for文
for (初期化; テスト; 更新) {
アクション;
}
• while文
初期化;
while (テスト) {
アクション;
更新;
}
28
parseInt関数とparseFloat関数
• parseInt(引数)
– 引数で文字列を渡すと数値に変換
• parseFloat(引数)
– 引数で文字列を渡すと浮動小数点に変換
• ex13.html
29
演習問題2
• “Hello!”という文字列をユーザが入力した数だけ表
示するJavaScriptプログラムを作成しなさい
• 行数を5で割った余りが1の場合には赤色，２の場
合には緑色，３の場合には黄色，4の場合には黒，0
の場合には青色，さらに，3の倍数の場合には
200%の大きさで”Hello!”を表示しなさい
30
document.getElementById関数
• document.getElementById(引数)
– 引数で指定した要素オブジェクトを得る
• document.getElementById(引数).innerHTML
– 引数で指定した要素オブジェクトのHTMLを得る
• document.getElementById(引数).style.CSSプロ
パティ
– 引数で指定した要素オブジェクトのCSSプロパティを得る
– CSSプロパティ名は，基本的には「ハイフン(-)」を除去し，
ハイフンの後の文字を大文字に変換したものを用いる
– 参考： http://codepunk.hardwar.org.uk/css2js.htm
31
オブジェクトのイメージ
<body>
<body>
<h1
<h1
id="id1“
id="id1">Hello</h1>
style=‘color: red’>Hello, World</h1>
</body>
</body>
document.getElementById(“id”)
H1要素のオブジェクト
属性：
色 (style.color): black
HTMLテキスト (innerHTML): Hello
document.getElementById(“id”).style.color = ‘red’;
document.getElementById(“id”).innerHTML = ‘Hello, World’;
document.getElementById関数
ex14.html
JavaScript
function test() {
var h1Value = document.getElementById("id1").innerHTML;
alert(h1Value);
document.getElementById("id1").innerHTML = prompt('');
var item1 = document.getElementById("item1").innerHTML;
alert(item1);
var item2 = document.getElementById("item2").innerHTML;
alert(item2);
var item1 = document.getElementById("item3").innerHTML;
alert(item3);
document.getElementById("divid").innerHTML = "テスト";
document.getElementById("divid").style.color = "red";
document.getElementById("divid").style.fontSize = "200%";
document.getElementById("divid").style.backgroundColor = "black";
}
HTML
onload=‘関数名’
<body onload='test()'>
<h1 id="id1">document.getElementById関数</h1>
ドキュメントが完全に
読み込まれた後に指
定した関数を呼び出す
<ul>
divは「division（区画）」の略
<li id="item1">項目1</li>
<li id="item2">項目2</li>
<li id="item3">項目3</li>
</ul>
<div id="divid"></div>
</body>
他の要素をまとめて，構造化する際に
用いられる
JavaScriptで操作する対象になる
33
演習問題3
• div要素にid属性を指定し，JavaScriptプログラムに
よりdiv要素のCSSプロパティを設定し，以下の長方
形を表示するプログラムを作成せよ
<div style="position:absolute;
top:40; left:40;
width:150; height:250;
background-color:#0000FF;
border: thick solid red;
visibility: visible;">
</div>
ヒント
JavaScript
HTML
function showRect() {
document.getElementById(“rect”).style.・・・・
}
<body onload=“showRect()”>
<div id=“rect”></div>
34
</body>
レポート
• 演習問題１，２，３を以下のアドレスにメールで提出
– 提出先
• To：[email protected]
– 提出期限
• ５月２７日（金）１３：００まで：次回授業前まで
– メールの件名: 学籍番号_氏名_JS演習1
• ファイル名は以下のようにすること
– 学籍番号_氏名_JS演習問題1.html
– 学籍番号_氏名_JS演習問題2.html
– 学籍番号_氏名_JS演習問題3.html
学籍番号、アンダーバーは必ず半角でお願いします
35
問い合わせ先
• 第１研究室 24-604
• 第２研究室 23-620
E-mail: [email protected]
気軽にお越しください♪
優しい山口研メンバーが待ってます。

Download Report