できる気になっているJSを改めてチュートリアルからやってみる 8日目

～～ ループの情報について ～～

最近ちょっとずつまた学びなおす必要が出てきたなぁと思い、いろいろプログラムを勉強しなおしているところなんですが、実はもう今使っている知識は古いのかもと思って、アップデートしようとおもいやってみる会。

実施するのは、この記事

MDN - Javascript

完全な初心者向けと書かれたチュートリアルは全然初心者向けではないって話。アップデートしていきましょう。

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);

みたいな？

アクティブラーニング確実にやったほうがいいわ。