JavaScript_1

JavaScript
成瀬基樹
平野敦
北浦繁
JavaScript
■
JavaScriptは現在の
ウェブアプリケーションに必須の技術
■
Google，Twitter，Wikipedia

■
Javaと完全に別物

■
Ajax
記法こそ似ているものの構造は全く別物
Webアプリケーションの処理をクライアントに行
わせることができる
歴史
ネットスケープコミュニケーションズが開発

Netscape Navigator2.0で実装
■
当時('95)大注目だったJavaを作った(故)サン･マイ
クロシステムズと提携関係にあったため、その名
をあやかってJavaScriptに変更された

(元：LiveScript)
■ Googleを筆頭に徐々に使い始められる

それまでは嫌われ者
■
その後JavaScriptによる非同期通信が発達

Ajax
■
JavaScriptの例
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>JavaScript Example</title>
<script type="text/javascript">
//<![CDATA[
function helloWorld(){
var str = "Hello World";
document.body.textContent = str;
}
//]]>
</script>
</head>
helloWorld();
<body onload="
">
<p>JavaScriptの世界へようこそ</p>
</body>
</html>
書き方
HTML文書内に書きこむ場合
<script type=”text/javascript”>
■
<!-処理
HTMLのコメントタグでくくる
//-->
</script>
外部ファイルに書き込む場合
<script type=”text/javascript” src=”hoge.js”>
</script>
■
文法-変数変数の宣言

ローカル変数
■


使用可能文字は
「a-zA-Z0-9$_」
※一文字目は数字禁止
グローバル変数


var 変数名
■
変数名
関数外で宣言すると
，varをつけてもグ
ローバル変数になる
■
型の指定をしない
基本データ型
基本データ型

boolean
■



true，false
number



数字（整数、実数）
string

特殊な値

null
■
undefined


文字列
未定義
NaN


値なし
数字ではない
Infinity

無限
文法
■
行末の「;」は省略可能であるが，
省略すべきではない
■
キャメル記法を用いることが多い

var heartCatch = true;
構文
演算子は基本的にCと同様
だが例外もあり
■

割り算は小数を返す
 alert(2/3);
If文
switch文
For文
while文
do while文
コメント文

引数を表示する
ダイアログをポップアップ
数値と文字列を足すと
文字列を返す
var hoge= 1+"String";
alert(typeof hoge);

データ型を文字列で返す
Cと同じ
文法：例題
とりあえずはろわ

alert()を使ってhelloworldを表示させよう
■
<html>
<head>
<title>はろわ</title>
</head>
<body>
(ここに処理を書く)
</body>
</html>
True or False

if文で以下の値の評価がtrue,falseどっちになる
か調べてみよう
 0, 1, "", [], null, undefined, NaN, Infinity
■
オブジェクト
■
■
オブジェクトの作り方
var hoge = new Hoge();
すべての型を
オブジェクトタイプ
として実装するゾ
基本オブジェクトの種類
Number
あまり使わない・・・
String
Boolean
Array
Math
Date
よく使う！
Function
Object
RegExp
オブジェクト-配列宣言
大きさの指定はしなくても良い

var 配列名 = new Array();
■
配列名[0] = "abc";
何でも入る
配列名[1] = 72;

var 配列名 = new Array("abc", 72);

var 配列名 = [“abc”, 72];
■
アクセス

var hoge =配列名[0];
ブラウザオブジェクト
ブラウザオブジェクトモデル

下図
■

オブジェクトからブラウザ上の値を
取得,変更できる
ブラウザオブジェクト
window

根っこの部分

ウィンドウが持っている値を保持
 要するに全部

プロパティ
■

メソッド
-

window.status
//ステータスバーの値
window.closed
//ウィンドウが閉じているか
window.document //documentオブジェクト
etc...
window.open()
//新たなウィンドウを作成する
window.alert()
//警告ダイアログ
window.setTimeout() //指定時間後に関数を実行
etc...
window.は省略できる
alert()
ブラウザオブジェクト
document

(window.)document

ページの情報を保持
■

プロパティ
-

メソッド
-

document.forms //Formオブジェクトの入った配列
document.bgColor //背景色
document.title //タイトル
etc...
document.open() //ひらいて
document.write() //かいて
document.close() //とじて
etc...
他にもいっぱい
文書内のオブジェクトを得る
■
JavaScriptからテキストフィールドにアクセス
HTML
<form name=”form1” >
<input type="text" name="text1" id=”formText1”/>
</form>
JavaScript
var foo = document.form1.text1;
var bar = document.getElementById(“formText1”);
fooとbarは
「<input type="text" name="text1" value="hoge" />」
というオブジェクトになる
■
ブラウザオブジェクト：例題
■
JavaScriptでHTML文書内にはろわを表示する
■
document.write(文字列);でbody内にかけるよ！
文法-関数function 関数名(引数){
//処理
}
無名関数
var 関数名 = function(引数){
//処理
}



戻り値の型，引数の型を指定しない
値を返す場合はCと同じ
return hoge;
呼び出し方もCと同じ
関数名(引数)
イベント
HTMLや，XHTMLの属性値として指定

○○が行われた場合に関数実行するように指示
■

「onsubmit」の様に接頭辞onを付けて全て小文字
イベント名
説明
mouseover
マウスがオブジェクトに合わさったとき
focus
オブジェクトがフォーカスを得たと
き
click
オブジェクトをクリックしたとき
contextmenu
コンテキストメニューが表示される
とき
load
イメージやページの読み込み終了時
submit
submitが実行されたとき
イベント：例題
■
ボタンを押すと警告ダイアログをポップアップする。
イベントで関数を呼び出そう。
必須課題
■
■
BMIを計算する
これと同じようなものを作る
任意課題
任意課題1

入力された値がメールアドレスかどうかチェック
■

■
参照：RFC5322
任意課題2

自由

Download Report