はじめに
このプロジェクトでは、「書く」ボタンをクリックするとランダムな挨拶を表示する祝日の挨拶カードを作成する方法を学びます。このプロジェクトは、JavaScript 関数、イベントリスナー、および DOM 操作をどのように使うかを理解するのに役立ちます。
👀 プレビュー
🎯 タスク
このプロジェクトでは、以下を学びます。
- プロジェクト環境をセットアップする方法
- 事前に定義された配列からランダムに挨拶を選択する関数を実装する方法
- 選択された挨拶を挨拶カードに表示する関数を実装する方法
- 「書く」ボタンにイベントリスナーを追加して挨拶の表示をトリガーする方法
🏆 成果
このプロジェクトを完了すると、以下のことができるようになります。
- JavaScript 関数を使ってランダムなコンテンツを生成する
- DOM を操作して HTML 要素のコンテンツを更新する
- 特定のアクションをトリガーするためにイベントリスナーを追加する
- 提供されたプロジェクト構造を使って手順を追って作業する
プロジェクト構造を設定する
このステップでは、プロジェクトファイルと構造をセットアップします。以下の手順に従ってこのステップを完了しましょう。
プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。
├── index.css
├── index.html
└── index.js
ここで：
index.cssはこのチャレンジのスタイルファイルです。index.jsはこのチャレンジで完成させる必要のある JavaScript ファイルです。index.htmlは挨拶カードのページです。
WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。
次に、VM の上部にある「Web 8080」を開き、手動で更新するとページが表示されます。
writeGreeting() 関数を実装する
このステップでは、提供された greetings 配列からランダムに挨拶を選択するための writeGreeting() 関数を実装します。
index.jsファイルを開きます。writeGreeting()関数を見つけ、// TODOのコメントを以下のコードに置き換えます。
return greetings[Math.floor((Math.random() * 10) % greetings.length)];
このコードは、greetings 配列内でランダムなインデックスを生成し、対応する挨拶を返します。
show() 関数を実装する
このステップでは、greetingDisplay 要素に挨拶を表示するための show() 関数を実装します。
index.jsファイルを開きます。show()関数を見つけ、// TODOのコメントを以下のコードに置き換えます。
greetingDisplay.innerHTML = writeGreeting();
このコードは、ランダムな挨拶を取得するために writeGreeting() 関数を呼び出し、その後、greetingDisplay 要素の innerHTML を設定して挨拶を表示します。
index.jsファイルを保存します。- VM 内の「Web 8080」ビューを更新して、動作する挨拶カードを確認します。「書く」ボタンをクリックして、ランダムな挨拶を表示します。
おめでとうございます！あなたは祝日の挨拶カードプロジェクトを完了しました。
まとめ
おめでとうございます！このプロジェクトを完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を行って練習することができます。
