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