超初心者でも大丈夫
JavaScriptを使ってみよう

HTMLにプラスする機能として、動きをつけるのが、JavaScriptです。現在のWebページ作成に欠かせないものになっています。Webサーフィンをしていると、背景に雪が降っていたり、時計が動いていたり、文字がいろいろ変化したりと、楽しいページを見かけます。また、画面上でクリックするとそれに反応してメッセージを表示したり、入力フォームで入力し、ボタンをクリックすると、それによって何らかの処理がなされるようなページもあります。それらの多くは、JavaScriptを使っています。ブラウザに拡張する機能を追加することなく、特別なソフトを使う必要もなく今まで通り、メモ帳でHTMLファイルの中に直接JavaScriptを記述するだけです。 JavaScriptを宣言すれば、ブラウザが<script>タグと認識し実行してくれます。 HTMLでページを作成できる方なら誰でも簡単に使えます。

「あっ、いいなぁー」と思ったスクリプトは、ソースをそのままコピーしてHTMLファイルに貼り付ければ使えるので、超初心者の方でもタグを少し理解できれば、簡単に利用できる感動のスクリプトです。HTMLだけでは物足りないなぁと思ったらJavaScriptを取り入れてみましょう。 ここでは、基本的で、実用的で、シンプルなスクリプトを紹介したいと思います。

JavaScriptの基本

「background」のナビゲーションバー
  1. 複数の画像をクリックで一枚ずつ表示させよう
  2. 画像の上にマウスを重ねて画像を変えよう(画像一枚)
  3. 画像の上にマウスを重ねて画像を変えよう(複数画像)
  4. 画像をクリックしてダイアログで説明させよう
  5. 画像入れ替え用のボタンを付けよう
  6. サブウィンドウに画像を表示しよう
  7. 複数の写真を自動的に入れ替えよう
  8. 画像の説明をテキストフィールドに表示しよう
  9. 小さい画像を複数並べてクリックで大きいサイズの画像を表示しよう
「font」のナビゲーションバー
  1. プルダウンメニューを使って選択したページにGO!ボタンで行こう
  2. プルダウンメニューの項目をクリックして、選択したページに行こう
  3. テキストボックスの文字をスクロールしよう
  4. プルダウンメニューの画像名を選択し表示しよう
「text」のナビゲーションバー
  1. 背景色を好きな色に切り替えよう
  2. クリックでBGMを選ぶようにしよう
「border」のナビゲーションバー
  1. タイトルをカラフルにしよう
  2. タイプライターのように文字を一文字ずつ表示させよう
  3. ステータスバーにメッセージを表示しよう
「link」のナビゲーションバー
  1. 現在の時間を表示しよう
  2. フォームに現在の時間をリアルタイムで表示しよう
  3. タイトルバーに現在の時間をリアルタイムで表示しよう
  4. ステータスバーに現在の時間をリアルタイムで表示しよう
  5. 日付表示に画像を使ってみよう
「position」のナビゲーションバー
  1. ボタンをクリックしてサブウィンドウを表示しよう
  2. サブウィンドウ画面をいろいろ設定しよう
  3. サブウィンドウをボタンを使って閉じよう
  4. 同じサブウィンドウで表示するページを切り替えよう

※大半のブラウザは JavaScript であるとして認識しますが、JavaScriptが実際はうまく動作するかは、ブラウザが決めます。 各ブラウザやバージョンによってもをサポートしていない場合があります。

JavaScriptのソースの記載にあたり、 「OpenSpace」を運営されている古籏 一浩氏からソースを参照させていただいく事に関して承諾を得ております。
松村氏のバナー素敵な写真は松村氏の「日野の植物」からお借りしています。