10月の授業日記

10/3 JavaScript

JavaScriptとは

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

基本書式

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

オブジェクト

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

  • window.document

ドットでつないでいく

メゾット

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

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

イベントハンドラ

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

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

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

今日の一言

後期最初の授業、なかなか難しい

10/10 関数

JavaScript

オブジェクトメソッド (値)

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

プロパティを表示させる

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

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

 

ウィンドーを開く

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

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

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

関数

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

関数の定義法

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

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

関数の呼び出し

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

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

10/17 DW によるJavaScript

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

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

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

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

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

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

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

外部jsファイル

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

<sclipt src="jsファイルへのパス"></sclipt>(終了タグ要)

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

DWによるJavaScript

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

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

ビヘイビア

DWでのJSのプリセット

10/17 DW によるJavaScript

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

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

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

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

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

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

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

外部jsファイル

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

<sclipt src="jsファイルへのパス"></sclipt>(終了タグ要)

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

DWによるJavaScript

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

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

ビヘイビア

DWでのJSのプリセット

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

ビヘイビア復習

画像を入れ替える

スワップイメージ

ビヘイビアによる切替

元のイメージを挿入しそれに設定する

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

css

 

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

JSコマンドワーク

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

jQuery

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

Datepicker

注意点

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