開発ツール

• エラーコンソール (Chrome,Safari, Firefox)
• Firefox拡張:Firebug

基礎編

• JavaScript記述場所、コメント化
  • alert()、console.log()で確認
• 変数
  • 数値の計算
  • 文字列の足し算
  • 配列変数
• 繰り返し（for文）
• 分岐(if ... else)
• ランダム(乱数)
  • 確率での占い
• 関数(function)
  • ボタン占い
• イベントリスナーの定義(addEventListener)

event

• いろんなイベント
• window.onloadの注意点

• onloadの上書き
• addEventListenerでのonload処理の追加 (ライブラリのonload上書きを解消)

windowの操作

• 別ウインドウで開く / window.open()
• ウインドウを閉じる / window.close()
  • ウインドウを最前面に出す / ウインドウ名.focus
• ウインドウを移動する / moveTo(x,y)
• ウインドウの大きさを調整する / resizeTo(w,h)
• 画面一杯の大きさにする
• 画面の1/4の大きさで、画面の中心に配置する
• おまけ：画面をブルブルさせる

ロールオーバー

• CSSでのロールオーバー
  • 画像置換：text-indent
  • 画像置換：padding-top
  • 背景画像一枚
  • CSSシグネチャ
• Dreamweaverのビヘイビア
• rollover.js によるロールオーバー(外部JavaScript)
  • HTML内埋め込み版
• jQueryでのシンプルなロールオーバー

文字列の処理

• 文字列の検索／置換／分割／取り出す
• ブラウザ判別
  • UserAgent ：ブラウザ情報一覧
  • ブラウザ分岐で各ブラウザ毎のCSSを読込む
• 正規表現による検索／置換

フォーム操作

• HTMLのフォーム要素
  • form
  • input
  • textarea
  • checkbox
  • radio
  • select,option
  • hidden
  • button
  • submit
• 入力内容のチェック方法
  • CSS装飾版

DOM(Document Object Model)操作

• document.getElementById("ID名")
• document.getElementsByTagName("タグ名");
  • 1 サンプル：外部リンクにclass属性を入れる
  • 2 サンプル：リンク先のファイルの拡張子毎ににclass属性を入れる

jQueryを使ってみよう

• 表示/非表示
• スライド、フェーディング
• アニメーション
• ナビゲーションメニュー
• コンテンツ内のスライド切替サンプル
  • 縦スクロール
  • 横スクロール
  • フェードイン
  • フェードインアウト
  • カスタマイズ(animate)
• jQuery UI
  • アコーディオン(accordion)
  • カレンダー(datepicker)

ライブラリ編

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

link

• JavaScript入門 (全25回) - プログラミングならドットインストール
• とほほのJavaScriptリファレンス
• JavaScript入門
• イヌでもわかるJavaScript講座
• 初心者のためのJavaScript入門 － ＠IT
• jQuery
• jQuery 日本語リファレンス