JavaScript Sample

1-6-2ランダムおみくじ

「占う」ボタンをクリック

JavaScript Sample 一覧へ戻る

著者：我流天性がらくた屋 ( Twitter : @Garyuten )

開発ツール

エラーコンソール (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でのロールオーバー
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を使ってみよう

表示/非表示
スライド、フェーディング
アニメーション
ナビゲーションメニュー
コンテンツ内のスライド切替サンプル
jQuery UI
- アコーディオン(accordion)
- カレンダー(datepicker)

ライブラリ編

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

link

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