A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from http://developer.mozilla.org/ja/docs/Learn_web_development/Core/Scripting/Test_your_skills/Loops below:

スã‚ルテスト: ループ - ウェブ開発のå¦ç¿’ | MDN

スキルテスト: ループ

このスキルテストの目的は、あなたがループするコードを理解したかどうかを判定することです。

メモ: 手助けが必要な場合は、スキルテスト使用ガイドをお読みください。また、コミュニケーションチャネルのいずれかを使用して、私たちに連絡することもできます。

DOM 操作: 有益なもの

下記の問題の中には、 DOM を操作するコードを書くことを求められるものがあります。例えば、新しい HTML 要素を作成し、そのテキストコンテンツが特定の文字列値と等しくなるように設定し、ページ上の既存の要素の中にその要素を入れるというようなことです。すべて JavaScript を使用します。

このコースの中ではまだ明確に教えていませんが、この API を使用する例をいくつか見ていると思いますので、問題にうまく答えるためにはどのような DOM API が必要なのかを調べてみてください。私たちの DOM スクリプト操作入門チュートリアルが良い出発点になるでしょう。

ループ 1

最初のループの課題では、単純なループを作成して、指定された myArray の項目をすべて読み込み、リストアイテム(つまり、 <li> 要素)として画面に出力し、指定された list に追加します。

* {
  box-sizing: border-box;
}

p {
  color: purple;
  margin: 0.5em 0;
}
const myArray = ["tomatoes", "chick peas", "onions", "rice", "black beans"];
const list = document.createElement("ul");
const section = document.querySelector("section");
section.appendChild(list);

// 以上のコードは編集しないでください。

// ここにコードを追加
ここをクリックすると、模範解答を表示します。

完成した JavaScript は、次のようになるでしょう。

// ...
// 以上のコードは編集しないでください。

for (let item of myArray) {
  const listItem = document.createElement("li");
  listItem.textContent = item;
  list.appendChild(listItem);
}
ループ 2

この次の課題では、名前を指定されたら、名前と電話番号を保有するオブジェクトの配列を検索し、名前を見つけたら名前と電話番号を段落に出力し、ループを実行する前に終了する単純なプログラムを書いていただきます。

始めに 3 つの変数が与えられています。

メモ: オブジェクトについてまだ読んでいなくても心配しないでください。これで知る必要があるのは、メンバーと値のペアにアクセスする方法だけです。オブジェクトについては JavaScript オブジェクトの基礎チュートリアルで読むことができます。

この課題を完成させるには、次のようにします。

  1. (phonebook) 配列を反復処理して、指定された name を検索するループを記述してください。前回の課題で使用していない種類のループを使用しましょう。
  2. name が見つかったら、それを関連付けられた number とともに、指定された段落 (para) の textContent に「<name> の電話番号は <number> です」という形で書き込みます。その後、ループが実行を完了する前にループを終了してください。
  3. name を指定されたオブジェクトが 1 つも含まれていない場合、指定された段落の textContent に「電話帳に名前が見つかりません」と表示してください。
const name = "Mustafa";
const para = document.createElement("p");

const phonebook = [
  { name: "Chris", number: "1549" },
  { name: "Li Kang", number: "9634" },
  { name: "Anne", number: "9065" },
  { name: "Francesca", number: "3001" },
  { name: "Mustafa", number: "6888" },
  { name: "Tina", number: "4312" },
  { name: "Bert", number: "7780" },
  { name: "Jada", number: "2282" },
];

const section = document.querySelector("section");
section.appendChild(para);

// 以上のコードは編集しないでください。

// ここにコードを追加
ここをクリックすると、模範解答を表示します。

完成した JavaScript は、次のようになるでしょう。

// ...
// 以上のコードは編集しないでください。

for (let i = 0; i < phonebook.length; i++) {
  if (phonebook[i].name === name) {
    para.textContent = `${phonebook[i].name} の電話番号は ${phonebook[i].number} です。`;
    break;
  }

  if (i === phonebook.length - 1) {
    para.textContent = "電話帳に名前が見つかりません";
  }
}
ループ 3

この最後の課題では、指定されたテスト関数を実行して、 500 から 2 までのすべての数値が素数であるかどうかを検査し、素数を表示します。

次のものが提供されます。

この課題を完成させるには、次のようにします。

  1. ループを使用して 2 から 500 までの数を逆に読み(1 は素数として数えられません)、指定された isPrime() 関数を実行します。
  2. 素数でないそれぞれの数について、次のループの反復処理に進みます。素数である各数値について、区切り文字とともに段落の textContent に追加します。

前回までの 2 つの課題では使用しなかった種類のループを使用しましょう。

let i = 500;
const para = document.createElement("p");
const section = document.querySelector("section");
function isPrime(num) {
  for (let i = 2; i < num; i++) {
    if (num % i === 0) {
      return false;
    }
  }
  return true;
}
// 以上のコードは編集しないでください。

// ここにコードを追加

// 以下のコードは編集しないでください。

section.appendChild(para);
ここをクリックすると、模範解答を表示します。

完成した JavaScript は、次のようになるでしょう。

// ...
// 以上のコードは編集しないでください。

do {
  if (isPrime(i)) {
    para.textContent += `${i}, `;
  }
  i--;
} while (i > 1);

// 以下のコードは編集しないでください。
// ...

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4