はるばるITつれづれ人生

日々の出来ことエトセトラ

今、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のまだまだ入口ですが、少しずつ進めていきます。