できる気になっているJSを改めてチュートリアルからやってみる 8日目
~~ ループの情報について ~~
最近ちょっとずつまた学びなおす必要が出てきたなぁと思い、いろいろプログラムを勉強しなおしているところなんですが、実はもう今使っている知識は古いのかもと思って、アップデートしようとおもいやってみる会。
実施するのは、この記事
完全な初心者向けと書かれたチュートリアルは全然初心者向けではないって話。アップデートしていきましょう。
JavaScript の構成要素 をやってます。
今日はループ
ループはとっても大事よね。
for (let i = 0; i < 100; i++) {
ctx.beginPath();
ctx.fillStyle = 'rgba(255,0,0,0.5)';
ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
ctx.fill();
}
円をランダムなサイズでたくさん書くコード。たのしいよ。ぜひ本体サイトで試してほしい。
イテレータの条件について
for (let i = 0; i < cats.length; i++) {
info += cats[i] + '、';
}
i <= cats.length じゃなくて、 i < cats.length なのは0から始まるから。無意識にやりすぎてたけど、これ大事だわ。
break の使い方
const contacts = ['クリス:2232322', 'サラ:3453456', 'ビル:7654322', 'メアリー:9998769', 'ダイアン:9384975'];
const para = document.querySelector('p');
const input = document.querySelector('input');
const btn = document.querySelector('button');
btn.addEventListener('click', function() {
let searchName = input.value;
input.value = '';
input.focus();
for (let i = 0; i < contacts.length; i++) {
let splitContact = contacts[i].split(':');
if (splitContact[0] === searchName) {
para.textContent = splitContact[0] + ' の電話番号は ' + splitContact[1] + ' です。';
break;
} else {
para.textContent = '連絡先が見つかりません。';
}
}
});
簡単な検索とかもこれでいいのか。ためてた情報に、それが存在するのかを確認するために使うのもよさそう。
continueの使い方
let num = input.value;
for (let i = 1; i <= num; i++) {
let sqRoot = Math.sqrt(i);
if (Math.floor(sqRoot) !== sqRoot) {
continue;
}
para.textContent += i + ' ';
}
受け取った情報をその数だけ回して、偶数だけとか奇数だけみたいなのはよく使うかも。(このデモは数を受け取って、整数の平方である値のみを返す)
whileと do while
これの違いは、条件式がfalseの時に一回でも実行するか否か?なのか
let i = 0;
while (i < cats.length) {
if (i === cats.length - 1) {
info += 'and ' + cats[i] + '.';
} else {
info += cats[i] + ', ';
}
i++;
}
と
let i = 0;
do {
if (i === cats.length - 1) {
info += 'and ' + cats[i] + '.';
} else {
info += cats[i] + ', ';
}
i++;
} while (i < cats.length);
みたいな?
アクティブラーニング確実にやったほうがいいわ。
この記事が気に入ったらサポートをしてみませんか?