スキルテスト: 関数
このスキルテストの目的は、あなたが関数 — 再利用可能なコードブロック、独自の関数を作る、関数の返値を理解したかどうかを判定することです。
メモ: 手助けが必要な場合は、スキルテスト使用ガイドをお読みください。また、コミュニケーションチャネルのいずれかを使用して、私たちに連絡することもできます。
DOM 操作: 有益なもの
下記の問題の中には、 DOM を操作するコードを書くことを求められるものがあります。例えば、新しい HTML 要素を作成し、そのテキストコンテンツが特定の文字列値と等しくなるように設定し、ページ上の既存の要素の中にその要素を入れるというようなことです。すべて JavaScript を使用します。
このコースの中ではまだ明確に教えていませんが、この API を使用する例をいくつか見ていると思いますので、問題にうまく答えるためにはどのような DOM API が必要なのかを調べてみてください。私たちの DOM スクリプト操作入門チュートリアルが良い出発点になるでしょう。
関数 1
関数の最初の課題を完成させるには、次のようにします。
- 関数
chooseName()を定義します。これは、指定された配列 (names) から指定された段落 (para) にランダムな名前を出力します。 chooseName()を一度実行します。
const names = [
"Chris",
"Li Kang",
"Anne",
"Francesca",
"Mustafa",
"Tina",
"Bert",
"Jada",
];
const para = document.querySelector("p");
// 以上のコードは編集しないでください。
// ここにコードを追加
ここをクリックすると、模範解答を表示します。
最終的な JavaScript は次のようになります。
// ...
// 以上のコードは編集しないでください。
function chooseName() {
const randomNumber = Math.floor(Math.random() * names.length);
const choice = names[randomNumber];
para.textContent = choice;
}
chooseName();
関数 2
関数に関連する 2 つ目の課題では、指定された 5 つの入力変数に基づいて、指定された <canvas> （参照する変数 canvas、コンテキストは ctx で利用できる）に長方形を描画する関数を作成する必要があります。
x— 長方形の X 座標y— 長方形の Y 座標width— 長方形の幅height— 長方形の高さcolor— 長方形の色
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const x = 50;
const y = 60;
const width = 100;
const height = 75;
const color = "blue";
// 以上のコードは編集しないでください。
// ここにコードを追加
ここをクリックすると、模範解答を表示します。
最終的な JavaScript は次のようになります。
// ...
// 以上のコードは編集しないでください。
function drawSquare(x, y, width, height, color) {
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = color;
ctx.fillRect(x, y, width, height);
}
drawSquare(x, y, width, height, color);
関数 3
この課題では、課題 1 で出された問題に戻り、それを改善することを目指します。
この課題を完成させるには、次のようにしてください。
- 乱数を生成するコードを
random()という別の関数に再編成します。この関数は、乱数の範囲となる 2 つの一般的な引数を取り、その結果を返します。 chooseName()関数を更新して、乱数関数を使用するようにし、選択する配列を引数として受け取り（より柔軟になります）、結果を返すようにします。- 返された結果を段落 (
para) のtextContentに出力します。
const names = [
"Chris",
"Li Kang",
"Anne",
"Francesca",
"Mustafa",
"Tina",
"Bert",
"Jada",
];
const para = document.querySelector("p");
// 以上のコードは編集しないでください。
// 以下のコードを更新してください
function chooseName() {
const randomNumber = Math.floor(Math.random() * names.length);
const choice = names[randomNumber];
para.textContent = choice;
}
chooseName();
ここをクリックすると、模範解答を表示します。
最終的な JavaScript は次のようになります。
// ...
// 以上のコードは編集しないでください。
function random(min, max) {
const num = Math.floor(Math.random() * (max - min)) + min;
return num;
}
function chooseItem(array) {
const choice = array[random(0, array.length)];
return choice;
}
para.textContent = chooseItem(names);
関数 4
この課題では、名前の配列があり、 Array.filter() を使用して 5 文字より短い名前だけの配列を取得しています。フィルターには現在、名前の長さを調べる関数 isShort() が名前付きで渡され、名前が 5 文字未満の場合は true を返し、そうでない場合は false を返します。
この課題を完成させるには、isShort() 内の機能を、アロー関数として filter() の呼び出し内に直接含めるようにコードを更新します。どれだけコンパクトにできるかを試してみてください。
const names = [
"Chris",
"Li Kang",
"Anne",
"Francesca",
"Mustafa",
"Tina",
"Bert",
"Jada",
];
const para = document.querySelector("p");
// 以上のコードは編集しないでください。
// 以下のコードを更新してください
function isShort(name) {
return name.length < 5;
}
const shortNames = names.filter(isShort);
para.textContent = shortNames;
ここをクリックすると、模範解答を表示します。
最終的な JavaScript は次のようになります。
// ...
// 以上のコードは編集しないでください。
// 以下のコードを更新してください
const shortNames = names.filter((name) => name.length < 5);
para.textContent = shortNames;