JavaScript: 2008年3月アーカイブ
iGoogleで使われているアレです。
前回の記事より、さらにわかりやすく書いてみます。
初心者にとっては今回の方がわかりやすいかと思います。
実行サンプルはこちら (別ウィンドウで開きます)
タブの中身をHTMLでこのように書いておき、
前回の記事より、さらにわかりやすく書いてみます。
初心者にとっては今回の方がわかりやすいかと思います。
実行サンプルはこちら (別ウィンドウで開きます)
ソースコード
<html>
<head>
<title>超シンプルなタブメニュー</title>
<script>
function show1(){
content1.style.display="block";
content2.style.display="none";
content3.style.display="none";
}
function show2(){
content1.style.display="none";
content2.style.display="block";
content3.style.display="none";
}
function show3(){
content1.style.display="none";
content2.style.display="none";
content3.style.display="block";
}
</script>
<style>
#content1 { display:block; }
#content2 { display:none; }
#content3 { display:none; }
</style>
</head>
<body>
<span onclick="show1();">|タブ１|</span>
<span onclick="show2();">|タブ２|</span>
<span onclick="show3();">|タブ３|</span>
<br>
<div id="content1">コンテンツ１</div> ← タブ１の中身
<div id="content2">コンテンツ２</div> ← タブ２の中身
<div id="content3">コンテンツ３</div> ← タブ３の中身
</body>
</html>解説
ポイントは、タブの中身をHTMLでこのように書いておき、
<div id="content1">コンテンツ１</div>
<div id="content2">コンテンツ２</div> content1.style.display="none"; ← タブ１の内容を隠す
content2.style.display="block"; ← タブ２の内容を表示
プログラムを書いていて、下記のように配列を初期化することがよくあります。
配列 ＝ [
要素１,
要素２,
];このときいつもモヤモヤするのが、
最後の要素の後にカンマ(,)付けても大丈夫なんだっけ？
ということ。
つまり、この配列は要素が２個としてちゃんと解釈されるのかな？という不安です。
よい機会なので、JavaScript、PHP、Perlで挙動の違いをまとめてみました。
Perlの場合
@ary = ("foo", "bar",);
$count = @ary;
print $count;
→ 結果 ２PHPの場合
$ary = array( "foo", "bar", );
echo count($ary);
→ 結果 ２JavaScript （Firefox） の場合
var ary = ["foo","bar",];
alert(ary.length);
→ 結果 ： ２JavaScript （IE6） の場合
var ary = ["foo","bar",];
alert(ary.length);
→ 結果 ： ３結論。
IEのJavaScriptI(=JScript)は、最後のカンマのあとにもう一つ空の要素を生成する。
というわけで本日のまとめ。
[FOO,BAR,] を
３個と数える
JScript
字あまり ><
foreachを使ってますか？
初級プログラマに意外と知られていないforeach。
何が便利かというと、
カウンタや添え字(index)を意識せずに、配列の全要素に対してアクセスし、何らかの処理をすることができます。
foreachを使わない場合、
for(i=0;i<=n;i++){ print 配列名[i]; }一方、foreachを使えば楽ができます。
私はこのforeachが大好きです。
foreachのおかげで、配列が好きになりました。
以下、Perl , PHP, VBA, JavaScriptで、配列の全要素を表示する例です。
Perl ※
foreach my $item (@items) { print $item; }foreach ( $items as $item){ echo $item; }for(var i in items){ alert(items[i]);}For Each item In items
MsgBox item
Next※注１ Perlの場合は、さらに短く書けます。
foreach (@items){ print $_ ;} または
for(@items){ print $_;} または
print for @items;
※注２ VBAのこのコードは、厳密にはコレクションといって、配列とは別のものです。 しかし実質的には配列のように使えます。
