10月の授業日記

JavaScriptとは

基本文系

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

オブジェクト

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

• window.document

ドットでつないでいく

メソッド

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

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

プロパティ

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

• document.bgColor=値;

イベントハンドラ

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

＜タグ　イベントハンドラ＝”命令文”＞

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

今日の一言

今まで警告などを制作するなんて考えたこともありませんでしたが、この機能が使えることでよりコーディングの幅が広がるなと思いました。10月の授業日記のヘッダーが表示されないなどのアクシデントもありましたが、無事に解決できたので良かったです。ありがとうございました。

JavaScriptの基本文系

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

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

プロパティを表示させる

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

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

ウインドーを開く

• わたしのひみつ

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

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

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

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

window.open('secret.html','mado','width=xx,height=xx');

関数

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

関数の定義法

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

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

関数の呼び出し

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

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

• 関数クイズ

今日の一言

クイズで楽しくfunctionを知ることが出来たので良かったです。ですが

コードで設定すると時間がかかってしまうところがネックに感じました。

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

• 9月

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

• 7月
• 6月

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

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

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

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

外部JSファイル

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

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

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

• うらない
• バナー表示

DWによるJavaScript

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

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

ビヘイビアー

DWでのJSのプリセット

• ウインドーを開く
• プロパティの変更
• テキスト変更
• 今日のひとこと

ビヘイビア復習

• アラート

画像を入れる

スワップイメージ

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

ロールオーバーイメージ

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

CSS

とらお

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

JSフレームワーク

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

JQuery

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

DatePicker

注意点

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

今日の一言

DatePickerの機能にとても驚きました。扱いには細心の注意が必要ですが、すごく簡単でわかりやすいと思います。カレンダー機能以外には、どんなものがあるのか気になりました。ポートフォリオのランダム機能も遊び心があって楽しいと思いました。