javascript sample

Javascript 基礎一覧

開発ツール

• Firefoxエラーコンソール
• Firefox拡張:Firebug

基礎編

• 1-1 Javascript記述場所
  • HEAD内、BODY内、外部ファイル化
  • イベントハンドラはそのハンドラに合わせて。
  • コメント　/* ~*/, //
• 開発の手順
  • alert()で確認
  • Firebugでの確認
• 1-2 変数
  • 数値の計算
  • 文字列の足し算
  • 配列変数
• 1-3 繰り返し（for文）
• 1-4 分岐(if ... else)
• 1-5 ランダム(乱数)
  • 確率での占い
• 1-6 関数(function)
  • ボタン占い
• 1-7 イベントリスナーの定義(addEventListener)

応用編

1. windowの操作
   1. 1-1 別ウインドウで開く / window.open()
   2. 1-2 ウインドウを閉じる / window.close()
   • ウインドウを最前面に出す / ウインドウ名.focus
   3. 1-3 ウインドウを移動する / moveTo(x,y)
   4. 1-4 ウインドウの大きさを調整する / resizeTo(w,h)
   5. 1-5 画面一杯の大きさにする
   6. 1-6 画面の1/4の大きさで、画面の中心に配置する
   7. 1-7 おまけ：画面をブルブルさせる
2. ロールオーバー
   • 2-1 window.onloadの注意点
     • 2-1-1 onloadの上書き
     • 2-1-2 addEventListenerでのonload処理の追加 (ライブラリのonload上書きを解消)
   • CSSでのロールオーバー
     • 画像置換：text-indent
     • 画像置換：padding-top
     • CSSシグネチャ
   • Dreamweaverのビヘイビア
   • JSライブラリによるロールオーバー(rollover.js)
     • jQueryでのシンプルなロールオーバー
3. 文字列の処理
   • 文字列の検索／置換／分割／取り出す
   • ブラウザ判別
     • UserAgent ：ブラウザ情報一覧
     • ブラウザ分岐で各ブラウザ毎のCSSを読込む
   • 正規表現による検索／置換
4. フォーム操作
   • HTMLのフォーム要素
     • form
     • input
     • textarea
     • checkbox
     • radio
     • hidden
     • button
     • submi
   • 入力内容のチェック方法
   • フォームのデザイン例( PiF vol.8のスライドとデータを公開します - 我流天性 - がらくた屋 )
5. DOM(Document Object Model)操作
   • document.getElementById("ID名")
   • document.getElementsByTagName("タグ名");
     • 5-2-1 サンプル：外部リンクにclass属性を入れる
     • 5-2-2 サンプル：リンク先のファイルの拡張子毎ににclass属性を入れる
6. jQueryを使ってみよう
   • 表示/非表示
   • スライド、フェーディング
   • アニメーション
   • ナビゲーションメニュー
   • コンテンツ内のスライド切替サンプル
     • 縦スクロール
     • 横スクロール
     • フェードイン
     • フェードインアウト
     • カスタマイズ(animate)
   • jQuery UI
     • アコーディオン(accordion)
     • カレンダー(datepicker)
   • 参考サイト、ライブラリなどのまとめ

ライブラリ編

• Google Mapで地図を表示
• Shadowbox (写真スライド、外部HTML、HTML内要素表示)