10月の授業日記

10/03 JavaScript

JavaScriptとは

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

 

基本文系

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

オブジェクト

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

  • window.document

ドットで繋いでいく

メソッド

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

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

イベントハンドラ

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

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

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

きょうのひとこと

最初からなんだか別世界のような感覚でした。これからできることがもっと増えていくかと思うと楽しみです。

10/10 関数

JavaScriptの基本文系

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

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

プロパティを表示させる

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

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

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

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

関数

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

関数の定義法

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

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

関数の呼び出し

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

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

きょうのひとこと

なんだか数学みたいなややこしさが出てきてこんがらがってきました。がんばらねば。

10/17 DWによるJavaScript

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

  • 9月を780*600で開く

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

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

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

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

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

外部JSファイル

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

<script src=jsファイルへのパス></script>※要終了タグ

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

DWによるJavaScript

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

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

ビヘイビアー

DWでのJSのプリセット(ウィンドウ>ビヘイビアー)

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

ビヘイビア復習

画像を入れ替える

スワップイメージ

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

ロールオーバーイメージ

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

CSS

せんせい

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

JSフレームワーク

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

jQuery

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

DatePicker

注意点

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

きょうのひとこと

急激なスパルタ間で冷や汗ものでしたがなんとかできたような気がします。