2023.12.28

HTML内のJavaScriptコード配置のトラブルシューティングの要点

marugotoyoten

cs50のYoutube動画「HTML内のJavaScriptコード配置のトラブルシューティングの要点」について要点と要約をまとめました

３つの要点

要点１
HTML内のスクリプトタグにJavaScriptコードを適切に配置することは、特にウェブページが複雑になるにつれて、機能性と効率性を維持するために重要です。
要点２
スピーカーは、属性値を削除し、イベントハンドラーとして割り当てられた無名関数に置き換えることで、コードをリファクタリングする方法を実演します。
要点３
HTMLのボディの最下部にスクリプトタグを移動することにより、JavaScriptコードが実行される前に必要な要素がDOMに存在することを保証し、エラーを防止します。

要約

HTML内のJavaScriptコードの適切な配置の重要性
スピーカーは、特にスクリプトタグ内ではなく属性値内にJavaScriptコードを適切に配置することの重要性を説明します。これは、ウェブページが長くなり、複雑になるにつれてますます重要になります。

コードのリファクタリングとエラーの修正
スピーカーは、フォームタグのOn Submit属性を削除し、代わりに無名関数をOn Submitハンドラーとして割り当てるスクリプトを作成することで、コードをリファクタリングする方法を実演します。この関数には、実行する必要のあるコードと、フォームが通常通りに送信されないようにするためのreturn falseステートメントが含まれています。

スクリプトタグの配置の修正
スピーカーは、スクリプトがHTML内でフォーム要素が宣言される前に実行されるためにエラーが発生すると説明します。これにより、「cannot set property on submit of null」というエラーが発生します。問題を修正するために、スピーカーは、スクリプトタグをヘッドからボディの最下部に移動することを提案し、JavaScriptコードが実行されるときに必要な要素がDOMに既に存在していることを保証します。

エラーの解決と結論
この解決策に従うことで、スピーカーはエラーを正常に解決し、フォームが送信されるときに期待された出力が表示されることを実証します。スピーカーは、これが最もクリーンな設計ではないかもしれないが、操作の正しい順序を保証し、必要な要素がDOMに存在しないことによるエラーを防止すると認識しています。

▼今回の動画