Changes between Version 21 and Version 22 of HowTo/JavaScriptTutorial


Ignore:
Timestamp:
Sep 10, 2010, 9:55:01 AM (14 years ago)
Author:
村山 俊之
Comment:

--

Legend:

Unmodified
Added
Removed
Modified

  • HowTo/JavaScriptTutorial

    v21 v22  
    2424
    2525{{{
     26#!text/html
    2627<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    2728<html>
    … …  
    5455
    5556{{{
     57#!text/html
    5658  <input type="button" value="hoge" onclick="alert('hoge');">
    5759}}}
    … …  
    8082
    8183{{{
    82 </html>
     84#!text/html
    8385<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    8486<html>
    … …  
    127129
    128130{{{
     131#!text/html
    129132  <input type="button" value="hoge" onclick="putHoge();">
    130133}}}
    … …  
    135138
    136139{{{
     140#!text/html
    137141  <script type="text/javascript" language="JavaScript"><!--
    138142function putHoge() {
    … …  
    158162
    159163{{{
     164#!js
    160165function putHoge() {
    161166}}}
    … …  
    173178
    174179{{{
     180#!text/html
    175181  <script type="text/javascript" language="JavaScript">
    176182// <![CDATA[
    … …  
    189195
    190196{{{
     197#!text/html
    191198<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    192199<html>
    … …  
    214221
    215222{{{
     223#!js
    216224function putHoge() {
    217225    var span = document.createElement("span");
    … …  
    239247
    240248{{{
     249#!text/html
    241250<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    242251<html>
    … …  
    279288
    280289{{{
     290#!text/html
    281291<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    282292<html>
    … …  
    301311
    302312{{{
     313#!text/html
    303314  <input type="button" value="hoge" onclick="alert('hoge');">
    304315}}}
    … …  
    307318
    308319{{{
     320#!js
    309321  alert('hoge');
    310322}}}
    … …  
    317329
    318330{{{
     331#!text/html
    319332  <input type="button" value="hoge" onclick="window.alert('hoge');">  <!-- alert('hoge'); と同じこと -->
    320333}}}
    … …  
    327340
    328341{{{
     342#!js
    329343  var num = 10;     // 変数 num を宣言し、値 10 で初期化する
    330344}}}
    … …  
    333347
    334348{{{
     349#!js
    335350  num = 10;         // 変数 num はまだ宣言されていないが…
    336351}}}
    … …  
    339354
    340355{{{
     356#!js
    341357  window.num = 10;  // さっきの num = 10 と同じ意味
    342358}}}
    … …  
    351367
    352368{{{
     369#!text/html
    353370<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    354371<html>
    … …  
    374391
    375392{{{
     393#!text/html
    376394<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    377395<html>
    … …  
    405423
    406424{{{
     425#!text/html
    407426<p id="main_paragraph">これは、<strong>innerHTML プロパティ</strong>のテストです。</p>
    408427}}}
    … …  
    413432
    414433{{{
     434#!js
    415435function lookInnerHtml() {
    416436    var p = document.getElementById("main_paragraph");  // HTML を参照したいパラグラフを取得
    … …  
    424444
    425445{{{
     446#!js
    426447    var p = document.getElementById("main_paragraph");  // HTML を参照したいパラグラフを取得
    427448}}}
    … …  
    432453
    433454{{{
     455#!js
    434456    alert(p.innerHTML); // HTML をメッセージボックスに表示する
    435457}}}
    … …  
    442464
    443465{{{
     466#!text/html
    444467<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    445468<html>
    … …  
    475498
    476499{{{
     500#!text/html
    477501<form>
    478502  <p><textarea id="html_input" cols="80" rows="5"></textarea></p>
    … …  
    490514
    491515{{{
     516#!js
    492517function displayHtml() {
    493518    var textarea = document.getElementById("html_input");
    … …  
    502527
    503528{{{
     529#!js
    504530    view.innerHTML = textarea.value;
    505531}}}
    … …  
    535561
    536562{{{
     563#!text/html
    537564これは、<strong>DOM</strong> を用いたサンプルです。
    538565}}}
    … …  
    541568
    542569{{{
     570#!js
    543571    var p = document.getElementById("main_paragraph");
    544572}}}
    … …  
    547575
    548576{{{
     577#!js
    549578    var text = document.createTextNode("これは、");
    550579    p.appendChild(text);
    … …  
    554583
    555584{{{
     585#!js
    556586    p.appendChild(document.createTextNode("これは、"));
    557587}}}
    … …  
    560590
    561591{{{
     592#!js
    562593    var strong = document.createElement("strong");      // <strong> 要素を生成
    563594    strong.appendChild(document.createTextNode("DOM")); // テキスト要素「DOM」を生成して <strong> 要素に追加
    … …  
    568599
    569600{{{
     601#!js
    570602    p.appendChild(document.createTextNode(" を用いたサンプルです。"));
    571603}}}
    … …  
    574606
    575607{{{
     608#!text/html
    576609<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    577610<html>
    … …  
    609642
    610643{{{
     644#!text/html
    611645<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    612646<html>
    … …  
    639673
    640674{{{
     675#!text/html
    641676<div style="
    642677  background: #09f;
    … …  
    653688
    654689{{{
     690#!text/css
    655691  position: absolute;
    656692}}}
    … …  
    663699
    664700{{{
     701#!js
    665702// 最初の表示位置、大きさ
    666703var pos_x = 0;
    … …  
    681718
    682719{{{
     720#!js
    683721  document.body.appendChild(div);
    684722}}}
    … …  
    691729
    692730{{{
     731#!js
    693732  // <div> 要素のスタイルを設定する
    694733  div.style.background = "#09f";
    … …  
    706745
    707746{{{
     747#!js
    708748  // <div> 要素のスタイルを設定する
    709749  with (div.style) {
    … …  
    721761
    722762{{{
     763#!js
    723764  document.body.appendChild(div);
    724765}
    … …  
    728769
    729770{{{
     771#!js
    730772// 矩形を右に動かす
    731773function moveRectangle() {
    … …  
    740782
    741783{{{
     784#!text/html
    742785<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    743786<html>
    … …  
    799842
    800843{{{
     844#!text/html
    801845<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    802846<html>
    … …  
    887931
    888932{{{
     933#!text/html
    889934<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    890935<html>