10月の授業日記

JavaScriptとは

基本文系

1. オブジェクト.メソッド(値);
2. オブジェクト.プロパティ=値;

オブジェクト

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

• window.document

ドットで繋いでいく

メソッド

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

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

プロパティ

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

• document.bgColor=値;

イベントハンドラ

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

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

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

今日の一言

JavaScriptが使える様になるのは楽しみ

JavaScriptの基本文系

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

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

プロパティを表示させる

• document.write（オブジェクト.プロパティ）

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

• わたしのひみつ

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

window.open('url,'window名',width=xx,height=xx')

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

関数

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

関数の定義方

function 関数名(引数){命令文}

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

関数の呼びだし

＜タグ イベントハンドラ ="関数名(引数)"＞

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

• 関数クイズ

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

• 9月
  • 7月を何度も開く様な場合簡単になる
  • URL毎に関数を作らなければいけない

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

function 関数名(変数名){変数,'ウィンドウ名','width=X,height=Y'}

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

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

外部JSファイル

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

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

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

• うらない
• バナー表示

ライブラリとフレームワーク

• 外部jsファイルにパーツや画像などのファイルを組み込んだりしたものをライブラリやフレームワークと呼ぶ
• JSを記述できなくても様々な機能が利用でき、こうした方法が主流に

代表的なもの

• jQuery
• Spry>adobe純正でDWのインターフェイスに組み込まれていた

DWによるJavaScript

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

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

ビヘイビア

DWでのJSのプリセット

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

ビヘイビア復習

• アラート

画像を入れ替える

スワップイメージ

ビヘイビアによる入れ替え

ロールオーバーイメージ

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

CSS

ポテチ

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

JSフレームワーク

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

jQuery

• 最も普及しているフレームワークの一つ

Datepicker

注意点

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

今日の一言

ランダムで表示させるの面白い