今、javascript勉強してます。その3
今日は配列からです。
------------------------------------------------------------------------------------------------------
<h2>メイン</h2>
<ul class="list">
<script type="text/javascript">
var list = new Array('ホーム','人気ランキング','お問い合わせ');
for (var i=0; i<list.length; i++){
document.write('<li><a href="' + list[i] + '">' + list[i] + '</a></li>');
}
</script>
</ul>
--------------------------------------------------------------------------------------------------------
list変数に要素を複数(この場合ホーム、人気ランキング、お問い合わせ)格納
しています。
その後、for文で繰り返しHTMLのリストへ流しています。
そんなに難しくないですよね。
記事を書いている自分自身もjavascriptを勉強しながらです。
続いては連想配列です。
------------------------------------------------------------------------------------------------------
<script type="text/javascript">
var list = {
'all.html': ' ホーム',
'ranking.html': ' 人気ランキング',
'toiawase.html': ' お問い合わせ'
}
for( var v in list) {
document.write('<li><a href="' + v + '" title="' + m + ' に移動します">' +
list[v] + '</a></li>');
}
</script>
-------------------------------------------------------------------------------------------------
vというインデックスにはall.html、ranking.html、toiawase.htmlが格納される。
listにはホーム、人気ランキング、お問い合わせが格納される。
同じようにfor文で繰り返しHTMLのリストへ流しています。
ボタンをクリックしたら確認ボタンを表示
----------------------------------------------------------------------------------------------------------
<p><input id="kakunin" type="button" value="閉じる"></p>
<script type="text/javascript">
document.getElementById('kakunin').onclick = function() {
if(confirm('閉じますか?')){
window.close();
}else{
alert('閉じませんでした');
}
}
</script>
---------------------------------------------------------------------------------------------------------
getElementByIdメソッドでhtmlでid指定された要素を取得することができます。
クリックされたら、どうするかという動きのあるプログラムができるようになるます。
今回は配列関連でした。
シンプルといえばシンプルですが、javascriptの持つメソッドにより
配列だけでもいろいろな表現ができるようになるのだと
感じます。javascriptのまだまだ入口ですが、少しずつ進めていきます。