トップ > インターネット > ホームページ作成・素材 > HTMLの基礎−タグを覚えてウェブページを作ろう!−

ホームページはHTMLタグの知識とテキストエディタさえあれば作成できます。またタグを理解していればサイトの細かい部分まで手が届きます。でも、わからない・・そんな方にお送りする初心者向けのHTMLタグ講座「HTMLの基礎」。

RSS


メルマガの登録・解除

登録した方には、メルマ!からオフィシャルメルマガ(無料)をお届けします。



HTMLの基礎 Vol.63 簡単なjavascript 【ボタンを押すと背景色を変更する】

発行日:9/9

*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

    HTMLの基礎 −タグを覚えてウェブページを作ろう!−

      2005/09/09(Fri) Vol.63       執筆:ykr
              http://ykr.main.jp/html/index.html

*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   

    1.簡単なjavascriptを使用する

      ボタンを押すと背景色を変更する

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   


  ※発行システムの不具合なのか、いつもどおり配送登録していたにもか
  かわらず、大幅に配送が遅れたようです。申し訳ありません。(これを
  打っている今まだ、配信されていないのですが・・)

  9月になりようやく周りの環境などが、平常通りになってきたような気
  がします。今月も祝日があるようですが、自分の休みがあまり無い為、
  休日も好きではないです。

  さて、今回はHTML文書に簡単なjavascriptを記述してみます。
  javascriptはブラウザさえあれば動作するので手軽に使用することがで
  きます。しかし、設定などでOFFにしている場合などは別ですが・・

  それでは今回も最後までお付き合い宜しくお願いいたします。


  ※注意  HTMLのバージョンは4.01です。
       発刊時点で非推奨とされてるものも掲載しています。
       表示確認しているブラウザは、WinIE6、WinNN7、MacIE5.2
       MacNN7です。その他のブラウザでの表示は未確認ですので
       意図したとおりにならないことがあります。

       ここで言う「スタイルシート」とはCSS(カスケーディン
       グスタイルシート)の事を指しています。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


  今回解説するjavascriptは「ボタンをクリックすると背景色が変わる」
  といったものです。(余り実用性は無いですが)

  javascriptを使用する際に気をつけなくてはいけないのは、OSやブラ
  ウザのバージョンや種類によっては、動作しない物もあるということで
  す。まあこれはjavascriptに限らず何にでも言える事ですが・・

  それでは、以下に簡単な例のソースを記述しましたので、ご覧下さい。
  手間を省く為に、書いたほうが良いと思われるタグ・又は記述する事が
  必須であるタグなども省略し、最低限の物だけ記述していますので、実
  際にはこの通りにはせず、meta情報等のタグを記述した方が良いでしょ
  う。

  javascriptには<head>間に記述する方法、<body>間に記述する方法、
  外部ファイルを読み込む方法、タグ内に記述する方法がありますが、こ
  こでは<head>間に記述します。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


<html>
<head>
<title>Background Color</title>
<script language="JavaScript">
<!--
function bgC()
{document.bgColor='#ff9999';}

function bgC2()
{document.bgColor='#9999ff';}
//-->
</script>
</head>

<body>
<form>
<input type="button" value="ピンク" onclick="bgC()">
<br>
<input type="button" value="ブルー" onclick="bgC2()">
</form>
</body>
</html>


 ※ ドキュメントタイプなどは全部省きましたが、実際は記述して下さい


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


  ブラウザで上記のソースを記述したHTML文書を表示させて見て下さ
  い。「ピンク」「ブルー」と書かれたボタンが表示され、それぞれのボ
  タンをクリックすると背景色が変わると思います。

  ここで記述したjavascriptのソースは以下の通りです。


----------------------------------------------------------------------


<script language="JavaScript">
<!--
function bgC()
{document.bgColor='#ff9999';}

function bgC2()
{document.bgColor='#9999ff';}
//-->
</script>


----------------------------------------------------------------------


  とても簡単なものです。javascriptの本当に基礎的な説明は省きます。
  (どのプラグラミング言語でも基礎の考え方は、多少違いはあれど殆
  ど同じようなものです。理解できていれば、他にも応用が利きます)
  ソースの中身の部分を一つずつ見てみます。


----------------------------------------------------------------------


■ 背景色をピンク色に変化させる関数

function bgC()
{document.bgColor='#ff9999';}


■ 背景色を水色に変化させる関数

function bgC2()
{document.bgColor='#9999ff';}


----------------------------------------------------------------------


  簡単に説明するので、少し正確でない表現もあるかもしれませんが
  ご了承下さい。特に内容が理解できなくても問題ありません。
  (今はフリーで配布されている物も多いので・・)


function bgC()


  まず、2つとも書いてあることは殆ど同じです。functionは関数を表し
  ます。その後の、bgC と bgC2 は関数の名前を表します。
  { から } までは関数の中身を表し、関数が呼び出されると(呼び出
  し元といいます)関数(呼び出し先です)の中身を実行する事になるの
  です。


{document.bgColor='#ff9999';}


  で、肝心の中身ですが、「document」はブラウザの表示領域を意味しま
  す。ブラウザで文字や画像などが表示される場所の事です。
  その後に続く「bgColor」は背景色を意味し、これらをあわせて普通に
  読むと、「ブラウザの表示領域の背景色」という事になります。


  もうお分かりかと思いますが、その後に書かれた「#ff9999」は色を意味
  し、全てあわせると「ブラウザの表示領域の背景色を#ff9999に」という
  意味になるのです。つまり、呼び出し元から・・


  「bgC()」が呼び出されると {document.bgColor='#ff9999';}
  「bgC2()」が呼び出されると {document.bgColor='#9999ff';}


  が実行されることになります。


----------------------------------------------------------------------


  呼び出し元は、<body>内に記述されている、


<input type="button" value="ピンク" onclick="bgC()">
<br>
<input type="button" value="ブルー" onclick="bgC2()">


  の部分の「onclick="bgC()"」「onclick="bgC2()"」の部分にあたります。
  「onclick」は「クリックしたら」といった意味を持ち、この場合だと


  ピンクと表示されたボタンをクリックすれば「onclick="bgC()"」を実行

  ブルーと表示されたボタンをクリックすれば「onclick="bgC2()"」を実行


  することになるのです。
  非常に簡単な例ですね。結構細かく説明してしまいました。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


来週は・・・

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   

    1.簡単なjavascriptを使用する(part2)

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   

(予告なく変更する事があります)


■ 雑記 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■


  今回も最後まで付き合ってくださった方、お疲れ様でした。

  少し前から(8月半ば)メールマガジン発行システムの大幅な変更があ
  ったのですが、慣れていないからかものすごく使いにくいです。以前は
  とても単純で、何を押せばどうなるのか一目でわかる配置だったのです
  が、リニューアルしてからは機能はかなり増えたのだと思うのですが、
  項目が多すぎてどこを押せばどこに行くのかさっぱりです。
  (似たような名前の項目が多い為に迷うのです。私だけでなく結構仕様
  変更に関して良く思っていない方が多いようです。まあ慣れるまでの辛
  抱ですね。)

  今回は簡単なjavascriptのソースを解説しました。また引き続き来週も
  簡単なjavascriptについて触れてみることにします。
  次回のメルマガもどうぞ宜しくお願いいたします。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

■■■「HTMLの基礎」姉妹サイトです。よろしくお願いします。■■■■

■■■「全部まるごとスタイルシート」
■   http://ykr414.com/css/
■   スタイルシート辞典です。プロパティごと、または目的ごとに引
■   け、ブラウザの対応状況なども掲載しています。
■   HTMLに加える事で、より細かいレイアウトの指定が可能に。
■   コピーペーストするだけで利用できるテンプレートのページも。

■■■「コマンドプロンプトを使ってみよう!」
■   http://ykr414.com/dos/
■   コマンドプロンプトとは何かから始まり、バッチファイルの作成
■   法や、コマンド別・目的別に引けるコマンド辞典。
■   初心者でもわかるよう細かく説明。

■■■「伸び縮みマークアップ言語 XML」
■   http://ykr414.com/xml/
■   SGMLのサブセットであるXMLは、ネット上で扱うデータを
■   記述するためのデータフォーマットで、柔軟性のある言語構造を
■   持っており、プログラムで自在にデータを情報処理できます。そ
■   のXMLを実際に文書を作成しながら解説。随時追加更新。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■


・MAKERS     http://ykr414.net/
         ダイエットグッズ、美味しいもの、かわいいもの
         セレクトショップ。ちょっと珍しいグッズ・便利な
         サービスなどの情報も掲載。
         コラムなどのコンテンツもあります。

・YKR GALLERY   http://ykr414.com/gallery/
         CG、また実際に描いた絵を紹介するギャラリー。
         趣味で運営の為かなり更新が遅め。
         ・・・というか時間がなくて全く更新してません(汗)


*――*――*――*――*――*――*――*――*――*――*――*――*――*――*
  Auther    YKR
  Mail     ykr414@yahoo.co.jp
  URL      http://ykr.main.jp/html/index.html
         http://ykr414.com/
  Copyright   (C)2004 ykr414. All rights reserved.
  Attention   掲載記事の無断転載を禁じます
*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

最新の記事

ブックマークに登録する

TwitterでつぶやくLismeトピックスに追加するdel.icio.usに追加Buzzurlにブックマークニフティクリップに追加Yahoo!ブックマークに登録記事をEvernoteへクリップ
My Yahoo!に追加Add to Google

規約に同意してこのメルマガに登録/解除する

登録した方には、メルマ!からオフィシャルメルマガ(無料)をお届けします。


この記事へのコメント

コメントを書く


上の画像で表示されている文字を半角英数で入力してください。

※コメントの内容はこのページに公開されます。発行者さんだけが閲覧できるものではありません。
コメントの投稿時は投稿者規約への同意が必要です。

  1. コメントはありません。

このメルマガもおすすめ

  1. @(あっと)驚く!エクセル好きルアップ  

    最終発行日:
    2011/05/26
    読者数:
    4069人

    エクセル(Excel)の基礎から裏ワザまで... D-UP発行のマガジンは、1問1答の形式、詳細な解説付きで配信。さらに連動した懸賞サービスもあり、スキルとプレゼントを同時にゲット。映画情報もあるよ

  2. これ知ってます?Wordの小ワザ&便利ワザ

    最終発行日:
    2011/05/26
    読者数:
    4682人

    D-UPが送る、ほほー!っと納得ワード(Word)の小ワザ&便利ワザをクイズ形式で楽しく学んでいきます。知ってて損することはありません。あなたの文章にアクセントをつけてみませんか?懸賞のチャンスもWでお得。

  3. 全部フリーソフト!!

    最終発行日:
    2014/02/26
    読者数:
    4887人

    ネット上にはこんなに便利なソフトがいっぱい。仕事にも、遊びにも、あると絶対にお得で楽しいソフトを1つずつご紹介します。

  4. 高橋浩子の日本一“お気楽”なパソコンマガジン

    最終発行日:
    2017/02/25
    読者数:
    1131人

    「クスッと笑えてタメになる」をモットーとするテクニカルライター高橋浩子が魂を込めてお届けする週刊メルマガ。パソコン講座を中心に、便利ネタやおすすめサイトもご紹介。とにもかくにも、“お気楽”に楽しめる異色のエンターテイメントマガジンである。

  5. C#プログラミングレッスン

    最終発行日:
    2017/02/26
    読者数:
    971人

    C#での .NETプログラミングを易しく丁寧に解説するメールマガジンです。「C#プログラミング・レッスン」で、.NETプログラミングをマスターしましょう。

発行者プロフィール

過去の発行記事