10月の授業日記

JavaScriptとは

基本文型

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

数値は（値）　文字列は（'値'）

オブジェクト

ブラウザのパーツのJSでの呼称　処理を行う対象

• window.document

ドットで繋いでいく（ドットは階層を表す

メソッド

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

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

プロパティ

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

• document.bgColor=値；

bgColorのように途中から大文字になったりする

イベントハンドラ

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

＜タグ イベントハンドラ="命令文"＞

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

今日の一言

セミコロン　セサミ

JavaScriptの基本文系

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

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

プロパティを表示させる

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

文字列ではない数値や値を示す時にはクオートを入れない＝入れるとオブジェクト.プロパティと画面に表示される

ウィンドウを開く

• 私の秘密

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

• 私の秘密をサイズ指定して開いた

window.open('URL','ウィンドウ名','width=xx,height=xx')

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

関数

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

関数の定義法

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

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

関数の呼び出し

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

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

• 関数クイズ

今日の一言

半角スペース

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

• 9月を780*600で開く

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

• 7月
• 6月

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

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

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

＜タグ イベントハンドラ="関数名（'変数に代入する値'）"＞

外部JSファイル

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

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

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

• 占い
• バナー表示

DWによるJavaScript

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

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

ビヘイビアー

DWでのJSのプリセット（ウィンドウ＞ビヘイビアー）

• ウィンドウを開く
• プロパティの変更
• テキスト変更
• 今日の一言

ビヘイビア復習

• アラート

画像を入れ替える

スワップイメージ

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

ロールオーバーイメージ（挿入＞HTML＞ロールオーバーイメージ）

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

CSS

ボタン

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

JSフレームワーク

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

JQuery

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

DatePicker

注意点

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

今日の一言

ビビビビビビビヘイビア