Challenge programming

JavaScript

配列 | Array

変数では変数１つにつき1つのデーターを保存するだけでしたが、配列を使うと、複数のデーターを1つにまとめてグループ化することができる。

HTML、Javascript <body>

<script>
var todo = ['game','work','sport','sleep'];
document.write(todo[0]);
</script>
</body>


簡単な解説

配列に登録されているデータには、最初のものから順に0,1,2・・・と番号がつきます。この番号のことをインデックス番号、またはインデックスといいます。

配列データを読み取るには、上記のようにインデックス番号を入力します。


配列の各項目をすべて読み取る | Read all the items in the array

HTML、Javascript <body>


<script>
var todo = ['game','work','sport','sleep'];
for(var i = 0; i < todo.length; i++){
document.write(todo[i]);
console.log(todo[i]);
}
</script>
</body>


Let's check! : F12 →　console

簡単な解説

変数iを定義して0を代入し、iに１ずつ足しながら繰り返しつつ、そのiを配列のインデックスとして使います。

lengthプロパティは、その配列に登録されているデータの個数を表します。

「変数iがtodo.lengthより小さければ繰り返す」という条件にしてます。

この繰り返し文により、どんな配列であってもすべてのデータを読み取ることができるようになります。


項目を追加する| Add item

HTML、Javascript <body>


<script>
var todo = ['game','work','sport','sleep'];
todo.push('study')
for(var i = 0; i < todo.length; i++){
document.write(todo[i]);
console.log(todo[i]);
}
</script>
</body>

簡単な解説

配列はオブジェクトです。オブジェクトということは、メソッドとプロパティがあります。

そこで、今回はpushメソッドを使って追加しています。

メソッド意味
.pop()配列の最後のデータを削除する。
.shift()配列の最初のデータを削除する。
.unshift(データ1,データ2・・)配列の最初にデータ1、データ2を追加する。

項目をHTMLに書き出す　| Export items to HTML

todo list

HTML <section>
<h2>todo list</h2>
<ul id="list">
</ul>
</section>

JavaScript <script>
var todo = ['game','work','sport','sleep'];
todo.push('study')
for(var i = 0; i < todo.length; i++){
var li = document.createElement('li');
li.textContent = todo[i];
document.getElementById('list').appendChild(li);
}
</script>

簡単な解説

var li = document.createElement('li');createElementメソッドで<li></li>タグを作ります。それを変数liに代入します。
li.textContent = todo[i]; 生成した変数liのコンテンツに配列todoのインデックスi番目データを指定します。
document.getElementById('list').appendChild(li); idのlist要素を取得し、そこに子要素として挿入できるappendChildでli要素を加えます。

この本を参考にして学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円弱ならコスパよく、買っておいてよかったと満足してます。


私は人から丁寧に教わりたい、という人にはこちらもどうぞ。

キャリアアップに必要なスキルを取得しよう。

オンラインで受講ができるスクールですので、全国どこからでも。

ぺージの先頭に戻る(Return to top of page)


©2020年9月 Challenge programming

プライバシーポリシー