10月の授業日記

JavaScriptとは

基本文系

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

オブジェクト

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

• window.document

ドットでつないでいく

メソッド

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

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

イベントハンドラ

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

<タグ イベントハンドラ="命令文">

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

きょうのひとこと

JavaScriptってアプリケーションだと思っていた！

JavaScriptの基本文型

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

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

プロパティを表示させる

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

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

ウインドーを開く

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

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

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

関数

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

関数の定義法

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

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

関数の呼び出し

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

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

• 関数クイズ

きょうのひとこと

オリジナルの質問が作れるのが楽しぃ

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

• 9月

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

• 7月
• 6月

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

function 関数名(変数名){変数,'ウィンド名','window=x,window=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

注意点

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

jQuery UI

• adobe独自のフレームワークSparyをjQuery用に手直ししたもの
• 挿入し保存すると必要なファイルがサイト内へコピー・リンクされる

きょうのひとこと

苦戦しがちです…