かなこと仲良く数学、無料のオンライン学習塾

主に数学と数学に関するプログラミングを扱っています。小学生~大学入試までの算数と数学の問題と詳しい解説をしていきます。普通の生徒はコメント欄で質問し放題です! 特別生徒は一名募集していて毎週日曜日に専用の問題が出て、ツイッターで質問し放題です笑

初心者のjavascript配列大実験のコーナー~めちゃめちゃわかりやすいです

~初心者のjavascript配列大実験~

早速自分で作った自動ツール←みなさんもクリックで見出しを作りました。
やっぱりすごい便利です。笑

今日はjavaの配列を大実験していきたいと思います。
果たしてプログラムはちゃんと動くのでしょうか?笑
初心者なのでかなりわかりやすいと思います。難しい言葉を使えないので笑

divで囲んでspanクラスをたくさん作る

<div id="tabemono">
<span class="jikken1"  javaclass="osushi1">お寿司</span>
<span class="jikken1"  javaclass="yainiku1">焼肉</span>
<span class="jikken1"  javaclass="onabe1">お鍋</span>


<span class="jikken1"  javaclass="osush2">お寿司</span>
<span class="jikken1"  javaclass="yakiniku2">焼肉</span>
<span class="jikken1"  javaclass="onabe2">お鍋</span>

</div>

変えた所には蛍光マーカーを入れています。


実際の表示はこんな感じです。

お寿司 焼肉 お鍋
お寿司 焼肉 お鍋


レベル1笑 id=tabemonoの要素を取り出す

idから要素を取り出すのはdocument.getElementById(id)を使います。

var elem =document.getElementById('tabemono');

レベル2 その中からさらに要素を取り出す

次に要素

ここでいうと要素はjavaclass="osushi1"のosushi1に当たります。

さらに要素を取り出すのにはelement.getAttribute()を使います。

var youso=elem.getAttribute(javaclass)

で取り出してみます。

でもこれだと


javaclass="osushi1"
javaclass="yakiniku1"
javaclass="onabe1"

のどれを取ったらいいのかわからないのでレベル3でどれを取るか決めます。

レベル3 その中からどれを取るか決める

osushi1,yakiniku1,onabe1からどれを取るかはchildren[]という謎の配列を使います。

children[0]でosushi1
children[1]でyakiniku1
children[2]でonabe1
childeren[3]でosushi2・・・
で取れるはずです。

var youso=elem.children[0].getAttribute('javaclass');
今回はosushi1を取ってみます。

レベル4 ちゃんと要素が取り出せたか知る方法

ちゃんと取り出せたか知るために

<p id="rei">ここに結果が出るようにします。</p>


実際にはこう記述します。

var elem2 =document.getElementById('rei');

で<p id="rei">タグの中の文章を取り出してその文章をプログラムの結果と置き換えることで ちゃんとできたかがわかります。

ちゃんとプログラムが動けば表示は下のように変わります。

プログラム実行前 <p id="rei">ここに結果が出るようにします。</p>

↓↓↓↓↓

プログラム実行後 <p id="rei">プログラムの結果</p>

となります。

タグの中の文章を置き換えるにはinnerHTMLを使います。

elem2.innnerHTML(youso);
でyousoに入っているosushi1がプログラムの結果として表示されます。

レベル5 プログラム実行ボタンの作成

ボタンを作ってプログラムを動かす時は何はともあれこれ

button onclick=("好きな名前");

を使います。

<button onclick="jikkou()">プログラムを実行する</button>

実際にはこうなります。

レベル6 実際のプログラムを書く

<script>
function jikkou(){    //functionはプログラム実行宣言!
var elem2 =document.getElementById('rei');
var elem=document.getElementById('tabemono');
var youso=elem.children[0].getAttribute('javaclass')
elem2.innerHTML =(youso);
alert("成功");
}
</script>

ちゃんとプログラムが動けばここがosushi1になります。

無事動きました!

まだ続きますが、体調が悪くなるといけないので一度アップします

レベル7 新たな配列を作ってリスト化する

今度はosushi1,yakiniku1.onabe1を取り出して新たな配列に入れてリスト化してみます。

新たな配列の作成をします。

var list=[];
これで作成できました。

次にchildren[0]=osushi1, children[1]=yakiniku1, children[2]=onabe1 と入っているので

新たな変数var =i;を作って
list.push(elem3.children[i].getAttribute('javaclass'));
としi=0, i=1, i=2の時の要素 osushi1, yakiniku1, onabe1をlistに入れます。

配列に入れていくにはpushを使います。

またこの時に使うのがループ文です。

i=0からはじまってiを一つずつ増やしていってiが3以上になればプログラムをストップさせます。

for(var i=0;i<3;i++){  //++は一つずつ増やすの意味です。
list.push(elem3.children[i].getAttribute('javaclass'));
}

これでlist[0]=osushi1, list[1]=yakiniku1, list[2]=onabe1と入ってるはずです。

レベル8 再びボタンを作る

<button onclick="jikkou2()">プログラムを実行する</button>

実際のプログラムを書く

<script>
function jikkou2(){
var elem3=document.getElementById('tabemono');
var list=[];
for(var i=0;i<3;i++){
list.push(elem3.children[i].getAttribute('javaclass'));
}
alert(list[0]+list[1]+list[2]);
}
</script>

今度はアラート画面で結果を表示させてみます。

うまくいけばアラート画面にosushi1yakiniku1onabe1と表示されるはずです。

うまくいきました!