はじめに▼読む▲閉じる
「JavaScript/DHTMLを使いたいけど勉強するのは面倒」という人のために、そのままコピー＆ペーストして使える自作JavaScript/DHTMLの数々をご紹介します。今までＣＧＩを使わなければできないと思っていたようなこともJavaScriptやDHTMLを使うと簡単にできるようになります。
「JavaScriptの小技」でご紹介するスクリプトは、ごくごく基本的な物なので著作権などは気にせず、ご自分のホームページにご自由にお使いください。ただ、無理にとは言いませんが、代わりに著書「10日でおぼえるJavaScript入門教室・新版」などを買っていただいたり、このページの宣伝をさりげなくしていただけると非常にうれしいです。（ただしホームページ素材集などとして販売したり出版物に転載するなどの商業目的の無断使用、および「JavaScript集」のような形での転用は禁止します）「JavaScriptの中技」の中のスクリプトも著作権表示を変更・削除しない限りご自由に使っていただいて構いません。
Internet Explorerのメニューで「表示(View)」→「ソース(Source)」を選ぶとスクリプトを見ることができます。Firefoxをお使いの方は「表示(View)」→「ページのソース(Document Source)」です。あるいはファイルをディスク上にセーブして後から見ることもできます。
コピーするのはhead部分のscriptタグで囲まれた部分と、もしあればstyleタグで囲まれた部分、それにbodyタグ内のイベントハンドラー（onload=で始まるもの）、body部分の<div id="main">より下にあるhtmlタグとスクリプトです。head部分のlinkタグやmetaタグはコピーする必要はありません。
JavaScript/DHTMLに関する注意事項▼読む▲閉じる
ホームページにアクセスした人がJavaScriptに対応していないブラウザー（Lynxとか）を使用している場合は当然のことながらJavaScriptは動きませんのでご注意ください。最近はほとんどなくなりましたが、ブラウザーによってはJavaScriptやCSS関係のバグがあって、うまく表示されなかったり、システムエラーを起こす場合もたまにあります。特にベータ版はバグが多いので覚悟してください。特に断りのない限り、当サイトのスクリプトはIE5.5以降、NN7以降、Mozilla、Firefox、Operaの正式版すべてで動作するように作ってあります。
おねがい・その他▼読む▲閉じる
当サイトへのリンクはご自由にしていただいてかまいませんが、このトップページにお願いします。雑誌・本への掲載は、URLとトップページのキャプチャー画面はＯＫですが、スクリプトの転載はご遠慮願います。
JavaScriptの小技▼見る▲閉じる
- 複数のページからリンクしている場合でも１つのボタンでリンク前のページに戻れる
- リンクの部分にマウスを合わせるとリンクの説明が表示される
- ファイルの最終更新年月日を表示（2000年対応・IE対応）
- 時間帯ごとに違ったメッセージを表示
- 本文中のテキストを動かす
- クイズの答え合わせ
- リアルタイムに時刻を表示（午前／午後）
- リアルタイムに時刻を表示（２４時間表示）
- 日付のカウントダウン
- メッセージを一定時間ごとに切り替える
- パスワードで他のページに飛ぶ（１）
- パスワードで他のページに飛ぶ（２）
- プルダウンメニュー式のリンク（１）
- プルダウンメニュー式のリンク（２）
- 自動的に次のページを読み込む
- 秒数のカウントダウン
- 誕生日のカウントダウン
- ２つ以上のプルダウンメニュー式リンク 2002. 3. 2
- 訪問回数の表示 2002. 3.25
- マウスを乗せると画像が変わる
- リロードするたびに表示内容が変わる
- クリッカブルマップに連動して説明を表示 2002. 8. 1
- 年齢表示を自動的に更新する 2003. 1. 1
- 順番に問題が出てくる３択式テスト 2003. 3.11
- 今月のカレンダーを小窓で表示 2003. 4.30
- 一定時間ごとに画像を切り替える 2003. 6.17
- 画面右端から画像が出てきて減速して止まる 2003. 8. 9
- ページ最上部まで減速しながらスクロールして止まる 2003. 8.23
- プルダウンメニューでページ内の表示を変える 2005. 6.17
- プルダウンメニューで他のプルダウンメニューの表示を変える 2005. 6.18
- 文字がタイプされるように一文字ずつ出てくる（１） 2005. 6.21
- 文字がタイプされるように一文字ずつ出てくる（２） 2005. 6.21
- カレンダーを使った日付の入力補助（Dojo使用） 2007.11. 3
JavaScriptの中技▼見る▲閉じる
JavaScriptでこんなことまでできる、という例です。少し手の込んだスクリプトですので、使用はフリーとしますが、著作権は放棄しません。著作権表示を削除したりしない（あるいは勝手に自分の名前に変えない）という条件さえ守っていただければ自由に使用していただいてかまいません。
- 超高速簡易データベース
- 丁半ばくち
- おみくじ
- 超高速簡易データベース（その２）
- テストの診断結果
- メッセージの一定回数表示 2002. 4. 3
- 任意の月のテーブル形式カレンダー作成支援プログラム 2003. 4.30
ホームページ作り一般▼見る▲閉じる
ホームページ作りに使われるJavaScript以外の技術やホームページ作りに役立つものについて簡単に解説します。
- スタイルシート（CSS）とは（準備中）
- PHPとは（準備中）
- MySQLとは（準備中）
- XMLとは（準備中）
- Ajaxとは（準備中）
- CGIが使えない環境でカウンター
- ホームページのアクセス数を増やす秘訣
スタイルシート（CSS）の小技（準備中）▼見る▲閉じる
スタイルシートについて知らなくてもそのままコピー＆ペーストで使える小技を紹介します。
- マウスポインターを合わせた時だけリンクの下線が現れる
JavaScript関連リンク▼見る▲閉じる
- Standard ECMA-262---ECMAScript言語仕様（英語）
- コアJavaScript 1.5レファレンス（英語）
- Firebug---Firefoxのアドオンとして使う、JavaScriptを使ったWebアプリケーションの開発ツール
- Prototype---JavaScriptとDOMを拡張した基本的なJavaScriptライブラリ
- Scriptaculous---Prototypeの上に作られた、UIをメインとしたJavaScriptライブラリ
- Dojo---基本的なユーティリティからDijitのような高度なアプリケーションコンポーネントまでカバーする機能豊富なJavaScriptライブラリ
- jQuery---JavaScriptライブラリ
- Ruby on Rails---Rubyを使ったWebアプリケーションフレームワーク（通称RoR）
- Rails Wiki---Ruby on Railsに関する日本語Wiki
All About JavaScript---All About JapanのJavaScriptガイド
All About ホームページ作成---All About Japanのホームページ作成ガイド
All About Webプロデュース･デザイン ---ビジネスとしてのWebプロデュース・デザイン・ユーザビリティーについてのガイド
All About ソフトウエアエンジニア ---ソフトウエアエンジニアのキャリア形成に役立つさまざまな情報
All Aboutビジネスへのネット活用---ビジネスにネットを活用するノウハウ（Ｗｅｂ・メルマガ・アフィリエイトなど）
- Hamba氏のJavaScript---ここで扱っていないようなJavaScriptも多数紹介しています。JavaScript関連のリンクも充実しています
- KIの実用Java Script
JavaScript小技集推薦図書
（Amazon.co.jpへ直接注文できます）
■JavaScript小技集作者の著書■
■10日でおぼえるJavaScript入門教室 新版
2008年2月発行
まったくのプログラミング初心者からある程度JavaScriptの知識のある人までを対象に書いたJavaScript入門書の決定版。名前空間・関数リテラル・クロージャを利用したローカル変数のプライベート化・オブジェクト指向JavaScript・DOMスクリプティング・JavaScriptによるCSS操作・Ajax・JavaScriptライブラリ（Prototype/Dojo/jQuery）・楽天などの公開WebサービスAPI（JSONP）を使ったマッシュアップサイトの作り方など、JavaScriptの言語としての特性を最大限に生かした、Web 2.0時代に通用する、最新のJavaScriptプログラミングの知識・手法が身につきます。
10日でおぼえるJavaScript入門教室 目次
第1日 はじめてのJavaScript
第2日 変数・配列・オブジェクト・関数
第3日 DOMを使う
第4日 JavaScriptで計算をする
第5日 CSSとJavaScript
第6日 JavaScriptプログラミングの新しいスタイル
第7日 総合制作Ⅰ
第8日 Ajaxの基本
第9日 JavaScriptライブラリ
第10日 総合制作Ⅱ
■基礎からのJavaScript 第3版（2006年）
上の「10日でおぼえるJavaScript入門教室」に比べるとオブジェクト指向的なトピックは少なく、より基本的な入門書。
■逆引きJavaScript（2003年）
ある程度JavaScriptに習熟した人のための、機能別のスクリプト集。
■その他お勧めの本■
■JavaScript 第5版→見る▲閉じる
JavaScriptの基本を理解した上でさらに理解を深めたいという上級者向けの解説書。DOMスクリプティング、Ajax、オブジェクト指向プログラミングなど最近のJavaScriptの動向をすべて盛り込んで改訂された第5版。前半でJavaScriptのオブジェクト、関数、配列、クラス、名前空間、モジュールなど大規模プロジェクトに必要な概念を詳細に解説し、後半はJavaScriptのレファレンスになっています。2007年発行（原書は2006年発行）。
■Dynamic HTML: The Definitive Reference→見る▲閉じる
2006年発行の第3版。DOM、JavaScript、XHTML、CSSの詳細なレファレンス。1300ページもあって分厚いですが、AjaxをはじめとするDOMスクリプティングに必要なものが一冊にまとまっているのが便利です。机の上に一冊あると役に立ちます。
■JavaScript & DHTMLクックブック →見る▲閉じる
"JavaScript Bible"などで有名なDanny Goodmanによる、DHTMLとJavaScriptで「～をするにはどうしたらいいか？」に答えてくれる本。2003年発行。（日本語版）2007年にAjaxなどを取り入れた第2版（英語版）が出ました。
■Prototype & Scriptaculous in Action →見る▲閉じる
Ajaxプログラミングで最近よく使われているJavaScriptライブラリのPrototypeとScriptaculousに関する解説書。かなり高度なJavaScriptの知識が必要です。この本を理解するにはまず「10日でおぼえるJavaScript入門教室」などでDOMスクリプティングとオブジェクト指向JavaScriptの基礎をしっかり勉強してから取り掛かるのをお勧めします。
■Agile Web Development on Rails→見る▲閉じる
Ajaxを使ったWebアプリケーションの開発プラットフォームとして定着してきたRuby on Rails入門書の定番。うまく構成されていて非常にわかりやすいです。日本語版（RailsによるアジャイルWebアプリケーション開発 第2版）もあります。
■Ajax on Rails →見る▲閉じる
Ruby on Railsを使った本格的アプリケーションを例にさまざまなテクニックを解説する、Ajaxの実用書。
 |
|||
| Prev | List | Random | Next |
リンク用ボタンです。ご自由にお使いください。