10月の授業日記

JavaScriptとは

基本書式

1. オブジェクト.メゾット＝（値）；
2. オブジェクト.プロパティ＝値；

オブジェクト

ブラウザのパーツのJSでの呼称

• window.document

ドットでつないでいく

メゾット

オブジェクトができる機能を実行する

• window.alert();
• document.write();

プロパティ

オブジェクトのもつ設定を変える

• document.bgColor＝値；

イベントハンドラ

• ユーザーのアクション（ブラウザに対する働きかけ）に応じて命令を実行できる
• タグの属性

＜タグ　イベントハンドラ＝”命令文”＞

• 簡単な命令ならこの中に直接記述できる
• htmlのイベントハンドラをきっかけにJSがhtmlやcssを制御できる

きょうのひとこと

色んなボタンを作れて楽しい目が痛いなあ

JavaScript

オブジェクト、メソッド（値）

オブジェクト、プロパティ＝値

プロパティを表示させる

• document.write(オブジェクト.プロパティ)

文字列ではない数値や値を示す時にはクオートは入れない

ウインドーを開く

• わたしのひみつ

ウインドーをサイズ指定して開く

• わたしのひみをサイズ指定して開いた

• 各オプションの間はカンマで区切る
• サイズ指定は同一オプション＝クオート内をカンマで区切る

関数

複数の命令をひとまとめにして名前をつけたセット

関数の定義法

function　関数名（引数）{命令文}

引数は値などを入れるときの入れ物。使わない場合でも空で（）だけつけておく

関数の呼び出し

＜タグ　イベントハンドラ＝”関数名（引数）”＞

複数の命令をシンプルに実行できる

• 関数クイズ

きょうのひとこと

クイズ作ったりボタン作れたり楽しかった(^O^)！！

関数を利用してウィンドーを開く

• ９月

関数に変数を利用してウィンドーを開く

• ７月
• ６月

変数を利用するとひとつの関数で様々なバリエーションが作れる

function　関数名（変数名）{変数,'ウィンド名','width=X,height=y'}

引数を変数（クオート入れない）にすればイベントハンドラの引数の値を代入できる

<タグ　イベントハンドラ＝”関数名（変数に代入する値”）＞

外部jsファイル

スクリプトを記述した拡張子.jsのファイルにリンクすれば外部ファイルに記述したスクリプトを実行できる

＜script src="jsファイルのパス"＞＜/script＞(終了タグ要)

外部ファイルに記述されてる関数等をイベントハンドラで呼び出す使用法が多い

• うらない
バナー表示

DWによるJavaScript

DWにはスクリプトを記述しなくてもjsによるページが作れるプリセットが搭載されている

• ビヘイビアー
• ロールオーバーイメージ
• jQuery UI

ビヘイビア

DWでのjsのプリセット

• ウィンドーを開く
• プロパティの変更
• テキスト変更
• きょうのひとこと

ビヘイビア復習

• アラート

画像を入れ替える

スワップイメージ

ビヘイビアによる切り替え

ロールオーバーイメージ

挿入からリンク付きで設定できる

CSS

なるちゃん

• ブロックレベル化し背景画像に指定すれば同じペースで異なるテキストで使いまわせる
• a:hoverで背景画像をチェンジ

jsフレームワーク

外部スクリプトの大規模化したものがフレームワーク

jQuery

• もっとも普及しているフレームワークのひとつ

Datepiker

注意点

• ファイルを動かさない
• コードを改変しない

きょうのひとこと

ポートフォリオのページをしっかり作ります・・・・