10月の授業日記

JavaScriptとは

基本書式

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

オブジェクト

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

• window.document

ドットでつないでいく

メゾット

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

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

イベントハンドラ

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

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

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

きょうのひとこと

JavaとJavaScriptという名前は知っていましたが、JSの方がJavaの名前を真似したとは知りませんでした！

しかも色々応用のしがいがありそうで、すごく面白いです！

JavaScriptを使って、もっと色々な事に挑戦してみたいです！

後期もよろしくお願いします！

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

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

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

• 7月
• 6月

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

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

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

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

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

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

代表的なもの

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

外部JSファイル

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

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

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

• 占い
• バナー表示

DWによるJavaScript

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

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

ビヘイビア

DWでのJSのプリセット

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

ビヘイビア復習

• アラート

画像を入れ替える

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

ロールオーバーイメージ

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

CSS

なんかのボタン

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

JSフレームワーク

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

jQuery

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

jQuery UI

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

Datepiciker

日付をカレンダーから選べるjQueryのインターフェース

フレームワークの注意点

• 多くの外部ファイルを使用するのでファイル管理・リンク管理が重要
• コードが様々な場所に記述されるので移動・削除等しない

きょうのひとこと

途中が本当に難しくて何がどうなっているのかわかりませんでしたが、なんとか！

世のWebコーダーはすごいと感じた一日でした・・・。