10/03 JavaScript

JavaScriptとは

html 文章の構造を定義
css 文章の見栄えを修飾
JavaScript ユーザーのアクションに応じてブラウザを制御

基本書式

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

オブジェクト

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

  • windou.document

ドットでつないでいく

メソッド

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

  • windou.aleat();
  • document.write();

イベントハンドラ

  • ユーザーのアクション（ブラウザに対する働きかけ）に応じて命令を実行できる
  • タグの属性
＜タグ イベントハンドラ＝”命令文”＞
  • 簡単な命令ならこの中に直接記述できる
  • htmlのイベントハンドラをきっかけにJSがhtmlやcssを制御できる

プロパティ

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

  • document.bgColor=値.

10/12 関数

JavaScriptの基本文系

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

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

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

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

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

プロパティを表示させる

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

関数

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

関数の定義法

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

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

関数の呼び出し

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

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

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

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

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

7月

6月

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

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

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

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

外部JSファイル

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

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

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

ライブライトフレームワーク

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

代表的なもの

  • JQurey
  • Spry＞adobe純正でDWのインターフェースに雲こまれていた

DWによるJavaScript

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

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

ビヘイビア

DWでのJSのスクリプト

10/24 ライブラリ/フレームワーク/

ビヘイビアの練習

画像を入れ替える

スワップイメージ

ビヘイビアによる切替

ロールオーバーイメージ


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

CSS

せんせい

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

Jsフレームワーク

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

jQuery

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

jQuery UI

adobe独自のフレームワークSpryをjQuery用に手直ししたもの

挿入し保存すると必要なファイルがサイト内へコピー・リンクされる

Datepicker

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

フレームワークの注意点

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