Changes between Version 6 and Version 7 of HowTo/JavaScriptTutorial


Ignore:
Timestamp:
Jun 18, 2010, 2:40:06 PM (14 years ago)
Author:
村山 俊之
Comment:

--

Legend:

Unmodified
Added
Removed
Modified

  • HowTo/JavaScriptTutorial

    v6 v7  
    338338  window.num = 10;  // さっきの num = 10 と同じ意味
    339339}}}
     340
     341=== HTML をいじる ===
     342
     343さて、ここからが本題です。メッセージボックスだけ出せても大したプログラムは作れませんので、実際に既に画面に表示されている内容を変更する方法について踏み込んでみることにしましょう。
     344
     345!JavaScript を用いて、 Web ブラウザ上の画面表示を変更するには、どうすればよいでしょうか? その答えの一つとして、 Web ブラウザが読み込んでいる HTML の内容を、 !JavaScript から書き換えてしまう、という方法があります。
     346
     347まず準備として、以下の HTML ファイルを見てください。
     348
     349{{{
     350<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
     351<html>
     352
     353<head>
     354        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     355        <meta http-equiv="content-script-type" content="text/javascript">
     356        <title>HTML look in test</title>
     357</head>
     358
     359<body>
     360
     361<p>これは、<strong>innerHTML プロパティ</strong>のテストです。</p>
     362
     363</body>
     364
     365</html>
     366}}}
     367
     368この HTML ファイルは、部分的に強調表示を行ってはいるものの、文が 1行表示されるだけの非常に簡単なものです。このファイルの中に 1つだけ存在するパラグラフ、すなわち <p> タグの中に記述された HTML を !JavaScript から参照するには、どうすればよいでしょうか?
     369
     370その答えに当たるプログラムを、以下に示します。このプログラムは、先ほどの文の下にボタンが表示され、それをクリックすると、その文の HTML がメッセージボックスに表示されます。
     371
     372{{{
     373<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
     374<html>
     375
     376<head>
     377  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     378  <meta http-equiv="content-script-type" content="text/javascript">
     379  <title>HTML look in test</title>
     380  <script type="text/javascript" language="JavaScript"><!--
     381function lookInnerHtml() {
     382    var p = document.getElementById("main_paragraph");  // HTML を参照したいパラグラフを取得
     383    alert(p.innerHTML); // HTML をメッセージボックスに表示する
     384}
     385  //--></script>
     386</head>
     387
     388<body>
     389
     390<p id="main_paragraph">これは、<strong>innerHTML プロパティ</strong>のテストです。</p>
     391
     392<form>
     393  <p><input type="button" value="HTML を表示" onclick="lookInnerHtml();"></p>
     394</form>
     395
     396</body>
     397
     398</html>
     399}}}
     400
     401それでは解説していきましょう。まず、 HTML を参照しようとしている <p> 要素についてですが、
     402
     403{{{
     404<p id="main_paragraph">これは、<strong>innerHTML プロパティ</strong>のテストです。</p>
     405}}}
     406
     407よく見ると、 <p> タグに '''id 属性''' が記述されています。こうすることで、個々の HTML 要素にユニークな ID を指定することができます。
     408
     409これを踏まえて、ボタンをクリックしたときに呼び出される lookInnerHtml() 関数の実装を見てみましょう。
     410
     411{{{
     412function lookInnerHtml() {
     413    var p = document.getElementById("main_paragraph");  // HTML を参照したいパラグラフを取得
     414    alert(p.innerHTML); // HTML をメッセージボックスに表示する
     415}
     416}}}
     417
     418'''document''' オブジェクト (言うまでもなく、正式名称は window.document です) は、Web ブラウザに読み込まれた HTML 文書を操作する際に用いるオブジェクトです。 window オブジェクトと同様、さまざまな機能があり、多くの属性とメソッドを持っていますが、その中でも document.getElementById() メソッドは、今後もっとも頻繁に利用するメソッドの一つです。このメソッドは、先ほどの id 属性に記述した ID で HTML 要素を検索し、その HTML 要素をオブジェクトとして取得する、というものです。
     419
     420すなわち、
     421
     422{{{
     423    var p = document.getElementById("main_paragraph");  // HTML を参照したいパラグラフを取得
     424}}}
     425
     426と記述することによって、変数 p に、「main_paragraph」という ID が設定された要素、すなわち先ほどの <p> タグが、 !JavaScript 言語で扱うオブジェクトとなって代入される、という処理が行われることになります。
     427
     428次に、いつもの alert() メソッドによってメッセージボックスを表示しようとしていますが、その引数に注目してください。
     429
     430{{{
     431    alert(p.innerHTML); // HTML をメッセージボックスに表示する
     432}}}
     433
     434document.getElementById() メソッドなどによって取得された HTML 要素オブジェクトも、これまたさまざまな属性やメソッドを持っています。その中の一つ、 innerHTML 属性は、まさにその属性が内包する HTML そのものを、文字列として保持する、というものです。これによって、 <p> ～ </p> の間に挟まれている文の HTML が、メッセージボックスにそのまま表示される、というわけです。
     435
     436それでは、逆にこの innerHTML 属性に対して文字列を代入した場合、何が起きるでしょうか? すでにご想像の通り、まさに、代入したとおりに HTML が書き換わり、その内容に合わせて画面の表示も変化します!!
     437
     438以下のサンプルプログラムは、入力欄に HTML の文字列を入力し、ボタンを押すと、下の枠の中に、入力した HTML を Web ブラウザが解釈した結果が表示される、というものです。
     439