Building Interactive Websites - Piano Player

Javascript文法1,2レッスンを終え、いよいよインタラクティブサイトレッスンに入りました!
DOMとJavaScript、そしてJavaScriptとDOMの活動部分を聞いた後、Piano Playerプロジェクトを実行しました.
質問する
あなたは音楽教育会社が雇ったウェブ開発者です.このクライアントは、初心者のピアノ学習を支援するインタラクティブなゲームを作成したいと考えています.JavaScriptでDOMイベントを使用してPiano Playerを作成!

トラブルシューティング

コード学院は、完了したhtml、cssファイル、および作成したjavascriptファイルを親切にロードしました.しかし、インタラクティブなWebサイトを作成するには、HTML階層を理解してこそ、それを制御できるAPIをよりよく使用できると思います.html、cssを再作成しました.

HTML構造をキャプチャ!

div vs section
divとsectionの違いを明確に説明できないので、今回はまとめてみました.
divは「コンテナ」ロールとしてドキュメントに意味がありません.本当に造形のためだけならdivを使ったほうがいいです.
逆にsectionは「論理パーティション」の役割として、トピックに関連するコンテンツを組み合わせます.簡単に言えば、1冊の本の中で章を章のラベルに分けるように想像すればいい.各章にはタイトルがあります.だからタイトルラベルも一緒に書きます.
理解に役立つ感謝の文章2編
How to properly use h1 in HTML5
HTML5 best practices; section/header/aside/article elements

節でh 1ラベルを書くかh 2ラベルを書くかというのも少し混同されていますが、以下の説明は非常にはっきりしていて、理解させられます.
タイトルはtitleではありません.タイトルは本のタイトル、headingは章のタイトルです.
タイトルを持つ本にはheadingというセクションがあります.

完成したhtml外観

しょっぱいコップわぁ~とっても素敵なhtmlが誕生しましたピアノのように飾りましょう

CSSの適用

JavaScript

インタラクティブな動作を実現するために、いくつかの問題が塞がれていて、解決の過程で本当に面白いです.解決できなかったみたいだけど解決できる快感がよかった!グラム!
+)私と同じコード学院の章の人に混乱をもたらすかもしれない注意事項

コードアカデミーの問題はオーディオがありませんが、面白そうなので入れました.

コード学院が提供した歌詞のアルファベットNote部分はオーディオピアノキーボードの音に適していないので、私に適したアルファベットNoteに変更しました.楽譜の違いの原因はこれなので、混乱しないでください:)!

htmlは、既存のidおよびclassを変更するために、再作成中にパッケージ化およびスタイル化するのに同様に適している.だからcssも違うつまりDOM要素が違います.

敵が封鎖された部分と解決過程を覚えておくために。

質問する
アクティブオブジェクトとしてのDOM要素はkeyであるが、keynoteを押して起動してもよい.このとき、key要素の背景ではなく、keynoteの背景が灰色になる.
解決する
イベントがトリガーされると、e変数名(イベント略称)に設定されたイベントオブジェクトをパラメータとしてイベント関数に渡すことができます.そしてconsole.log(e)を記入した後、keynoteをクリックしてkeynoteのアクティブオブジェクト値を表示すると、親ノードが見つかりました!parentNodeのclassName値を用いて変数targetがサブノードであるか否かを判定した後、サブノードであれば親ノードに値を再割り当てする.

function keyPlay(e) {
  let target = e.target;
  target =
    target.parentNode.className === "key" ||
    target.parentNode.className === "black-key"
      ? target.parentNode
      : target;
  target.style.backgroundColor = "var(--color-gray)";

質問する
キーボードを押すと、すぐに同じキーボードを連続して押すと、新しい音ではなく、前の割り込み音になります.
また、キーボード上でマウスをクリックした瞬間に音声が途切れるので、実際のピアノのように音が途切れることはなく、途切れ途切れになってしまうので気まずいです.今の状況は下図で表現されています.

トラブルシューティング
最初に、mousedown点keyplayイベントハンドラによって、keyのオーディオがplay()に再生される.mouseupでkeyReturnイベントハンドラによってkeyのオーディオがpause()に中断される.
ここで間違ったことを理解したのは、pause()がオーディオを終了していないことです.つまり、再生中のオーディオを停止します.
したがって、再再生したい場合は、audio.load()を使用して再ロードしてからaudio.play()を起動する必要があります.
また、実際のピアノはキーボードを押すと音がすぐに終わるのではなく、空気を通して伝播します.したがって、pause()は不要である.

function keyPlay(e) {
  let target = e.target;
  target =
    target.parentNode.className === "key" ||
    target.parentNode.className === "black-key"
      ? target.parentNode
      : target;
  target.style.backgroundColor = "var(--color-gray)";
  switch (target.id) {
    case "c-key":
      noteC.load();
      noteC.play();
      break;
      
    // 다른 case문···
  }
}
notes.forEach((note) => note.addEventListener("mousedown", keyPlay));

質問する
CSSのvisibilityとhiddenの違いがわからず、CSSのDocument.hiddenの両方が使用されました.
解決するdocument.hiddenはWeb APIであり、JavaScriptに対応するDOM要素を非表示にするDocument.hiddenである.ブール値documentおよびtrueに非表示に設定できます.
逆に、falseはCSSにおいて対応するラベルを隠す役割を果たしている.visibilityの値に設定して非表示にすることができます.
また、hiddenとdisplay:noneの違いも理解できる.

visibility:hidden display:noneページにはこのラベルがまったく見えません.したがって、ブラウザ画面ではレンダリングされないため、[レンダリングツリー](Render Tree)には表示されません.ただし、DOM要素アクションを使用してhtml要素をdisplay:noneに変更すると、レンダリングツリーに表示されます.
つまり、再描画も再描画も実行する必要がある再描画費用です.

display:block逆に、visibility:hiddenはタグをレンダリングしてスペースを割り当てていますが、ページには表示されません.
つまり、再描画のみを実行する再描画コストが高い.

参考記事
What is the difference between visibility:hidden and display:none?

完了!

完成したコードはここで私のgithubにアップロードします!
コード学院のインタラクティブなウェブサイトの章に入って、WebAPIでDOM要素を操作して、面白くて面白いです:“明らかに、方法のほかに、他の方法でコードを減らすことができて、これはあまりにも効率的ではありません!”という考えが生まれた.
以前、「javascriptの半分、条件文、配列、オブジェクトなど、今後どのように使用しますか?」考えたことがある場合は、JavaScriptから学んだ構文を使用してDOM要素を明確に選択する方法や、イベントを効率的に実行する方法などを考えることができます.
そしてアルゴリズムを学ぶ必要があると思います!!
最後にこのプロジェクトは終わりではなく、発展を続けます.
一番やりたいことは、ユーザーが押したキーボードの音を保存してファイルにダウンロードする機能です!
可能かどうかはわかりませんが、その中で繰り返される憂鬱と涼しい旅を楽しみに行きます!