Changes between Version 8 and Version 9 of HowTo/JavaScriptTutorial


Ignore:
Timestamp:
Jun 18, 2010, 3:12:00 PM (14 years ago)
Author:
村山 俊之
Comment:

--

Legend:

Unmodified
Added
Removed
Modified

  • HowTo/JavaScriptTutorial

    v8 v9  
    438438以下のサンプルプログラムは、入力欄に HTML の文字列を入力し、ボタンを押すと、下の枠の中に、入力した HTML を Web ブラウザが解釈した結果が表示される、というものです。
    439439
     440{{{
     441<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
     442<html>
     443
     444<head>
     445  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     446  <meta http-equiv="content-script-type" content="text/javascript">
     447  <title>HTML modify test</title>
     448  <script type="text/javascript" language="JavaScript"><!--
     449function displayHtml() {
     450    var textarea = document.getElementById("html_input");
     451    var view = document.getElementById("result_view");
     452    view.innerHTML = textarea.value;
     453}
     454  //--></script>
     455</head>
     456
     457<body>
     458
     459<form>
     460  <p><textarea id="html_input" cols="80" rows="5"></textarea></p>
     461  <p><input type="button" value="表示する" onclick="displayHtml();"></p>
     462</form>
     463
     464<div id="result_view" style="width: 720px; height: 540px; border: 1px solid #000;"></div>
     465
     466</body>
     467
     468</html>
     469}}}
     470
     471解説しましょう。まずは HTML で記述された部分。
     472
     473{{{
     474<form>
     475  <p><textarea id="html_input" cols="80" rows="5"></textarea></p>
     476  <p><input type="button" value="表示する" onclick="displayHtml();"></p>
     477</form>
     478
     479<div id="result_view" style="width: 720px; height: 540px; border: 1px solid #000;"></div>
     480}}}
     481
     482入力欄となる <textarea> 要素、および結果を表示する領域となる <div> 要素のそれぞれに、 id 属性による ID が設定されています。
     483
     484<div> 要素には style 属性も設定されていますが、これは表示領域を固定の大きさの枠として表示する為のものです。
     485
     486次に、ボタンをクリックしたときに呼び出される displayHtml() 関数の実装を見てみましょう。
     487
     488{{{
     489function displayHtml() {
     490    var textarea = document.getElementById("html_input");
     491    var view = document.getElementById("result_view");
     492    view.innerHTML = textarea.value;
     493}
     494}}}
     495
     496最初の 2行で、 ID を設定していた 2つの HTML 要素のオブジェクトを取得し、それぞれ別個の変数に代入しているのが分かると思います。
     497
     498そして、 3行目で <div> 要素の innerHTML 属性に、 <textarea> 要素の value 属性を代入しています。
     499
     500{{{
     501    view.innerHTML = textarea.value;
     502}}}
     503
     504<textarea> 要素や <input> 要素、 <select> 要素といった、いわゆるフォーム部品を document.getElementById() などによって取得したオブジェクトには、ほとんどの場合 value という属性が用意されています。これは、その Web ページを閲覧しているユーザーが、実際にフォーム部品に入力した値を参照する属性です。この属性も、逆に代入することが可能で、その場合、代入された値でフォーム部品の表示が反映されることになります。
     505