検索結果: Atelier

隠居のお勉強：JavaScript Basic (9) Break and Continue

　JavaScript の勉強が、１週間ほど空いているので再開することにした。

　W3Schools の次のレッスンは、Loop で使う break と continue である。

二つの特殊なコマンド break, continue をloop の中で使うことができる。

break コマンドは、loop の途中である条件になれば、その loop を中止する。
例を次に示す。
<html>
<body>
<script type="text/javascript">
var i=0;
for (i=0;i<=10;i++)
{
if (i==3)
{
break;
}
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>

結果は次の通りになる。
The number is 0
The number is 1
The number is 2

continue コマンドは、loop の途中である条件になる場合のみloop を実行しないが、loop は続ける。
例を次に示す。
<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3)
{
continue;
}
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>

結果は次の通りになる。
The number is 0
The number is 1
The number is 2
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9
The number is 10

　構文は理解できたが、どのような時に使われているのか分からない。

　なお、このようなエントリーを編集するときに、< や > を使う場合には、< >　とエンコードしなければならないが、今回から HTML エンコードホームというサービスを使わせてもらうことにした。
　W3Schools などの example コードをこのページのエンコード前ボックスにコピペ（copy & paste）すれば、エンコードされた結果がエンコード後ボックスに表示されるので、これをエントリー編集画面にコピペすればよい。
　今までは、< などを一つずつ< などと書き直していたのでずいぶん楽になった。
　今頃気がつくのは、老齢化現象の一つと思うが。

　W3Schools JavaScript Tutorial の Loop の項まで学習して、Customaize History 履歴ページでのリスト番号を降順にする方法に使っている Expert が書いた次の JavaScript が少し理解できるようになったので、私の理解できた範囲でコメント文に記した。

<script>
var o = document.getElementById("hoge");
//getElementById メソッドは指定ID（この場合："hoge"）のエレメント（この場合<ol>を指定する。
//"hoge"は、HTMLの<ol id="hoge"> というように指定している。
var max = o.childNodes.length;
//<ol id="hoge"> 要素内の子ノード（この場合、<li>..</li>）の数を変数 max に与える。参考：AllAbout JavaScript
for(var i = 0;i < max;i ++)
//隠居のお勉強：for loop の例
{
o.childNodes[i].value = max - i;
//子ノード<li>の i 番目に、(最大番号- i )を代入する。結果は、番号が降順になる。
}
</script>

　なお、 Customaize History 履歴ページの番号降順設定は、上の JavaScript でInternetExplorer(IE) では上手くいっていたが、Mojilla 系の Firefox Netscape では番号が倍になり、原因が突き止められないまま放ってあった。
　今回改めて "childNodes.length" でネットサーチしてみると答えがあった。thescript.com というサイトのフォーラムによると、どうやら Mojilla 系では、 whitespace （空白スペース）をカウントの対象に入れるらしいことが分かった。
　そこで、Customaize History 履歴ページ(MovableType　のインデックス・テンプレートで作成している）の編集画面で編集しやすくするために入れていた </li>....<li> の間の空白スペースを削除すると、Mojilla 系でも IE と同じように、綺麗な降順番号を表示するようになった。<li>..</li> のタグ・セット間に必ず空白スペースが入っていたので、偶然数字が倍の偶数になっていたらしい。

　この世界、学習すべきことは五万とある。死ぬまで退屈することはないだろう。

Atelier

Atelierで“childNodes”タグの付いているブログ記事

隠居のお勉強：JavaScript Basic (9) Break and Continue

タグ:

隠居の JavaScript ：番号付きリストを降順にする。（追記）

タグ: