HTML、CSS、および JavaScript は、フロントエンド開発で使用される 3 つの主要な言語です。 HTML はマークアップ言語、CSS はスタイリング言語です。
JavaScript は、主に Web およびモバイル アプリケーションのクライアント側の作成に使用されるオブジェクト指向プログラミング言語です。 このオープンソースの動的言語は、その柔軟性と理解しやすさから、最もよく使用されるプログラミング言語の 1 つになりました。
HTML5 と CSS3 を使用すると、静的な Web サイトを作成できます。 ただし、このようなサイトに双方向性を追加するには、ブラウザーが理解できる JavaScript などのプログラミング言語を使用する必要があります。
この記事では、HTML で JavaScript を使用する必要がある理由、HTML に JavaScript コードを追加するためのさまざまなアプローチ、および 2 つの言語を組み合わせるためのベスト プラクティスについて説明します。
HTML で JavaScript を使用することが重要な理由
- 対話性の追加: 対話性は、ブラウザをリロードせずにリアルタイムでユーザーの入力/アクションに応答します。 たとえば、クリックするたびに 1 ずつ増加するカウンターを作成できます。 もう 1 つの例は、送信ボタンをクリックするたびにフィードバックが送信されたことをユーザーに伝える応答です。
- クライアント側の検証: JavaScript を使用して、フォーム上の正しいデータを取得できます。 たとえば、このプログラミング言語を使用して、電子メール形式、パスワードの長さ、使用する文字の組み合わせによって、サインアップ ページでのユーザー入力を検証できます。
- DOM 操作: JavaScript は、Web ページのコンテンツを動的に変更することを容易にするドキュメント オブジェクト モデル (DOM) を提供します。 このテクノロジーを導入すると、Web ページをリロードしなくても、ユーザーの入力に基づいてページのコンテンツが自動的に更新されます。
- ブラウザー間の互換性: JavaScript は、最新のすべてのブラウザーと互換性があります。 したがって、HTML、CSS、および JavaScript を使用して作成された Web ページは、さまざまなブラウザーで完全に機能します。
前提条件
- HTML の基本的な理解: 基本的な HTML タグを理解し、ボタンを追加し、HTML を使用してフォームを作成できること。
- CSS の基本的な理解: ID、クラス、要素セレクターなどの CSS の概念を理解しています。
- コード エディター: VS Code や Atom などのコード エディターを使用できます。 システムにソフトウェアをインストールしたくない場合は、オンラインの JavaScript コンパイラを使用することもできます。
HTML で JavaScript を使用する方法
JavaScript コードを HTML に追加するには、主に 3 つの方法があります。 それぞれのアプローチと、それが最も適している場所を探ります。
＃1。 タグの間にコードを埋め込む
この方法では、JavaScript と HTML コードを同じファイル (HTML ファイル) に含めることができます。 プロジェクト フォルダを作成することから始めて、それがどのように機能するかを示します。 これらのコマンドを使用して開始できます。
mkdir javascript-html-playground cd javascript-html-playground
2 つのファイルを作成します。 index.html と style.css
このスターター コードを HTML ファイルに追加します。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" /> </head> <body> <div class="form-container"> <form> <label for="name">Name:</label> <input type="text" id="name" /> <br /> <label for="email">Email:</label> <input type="email" id="email" /> <br /> <label for="message">Message:</label> <textarea id="message" name="message" rows="5" cols="30" required ></textarea> <br /> <input type="submit" value="Submit" /> </form> </div> </body> </html>
このスターター コードを CSS ファイルに追加します。
.form-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"],
input[type="email"],
textarea {
display: block;
margin-bottom: 10px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 8px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 5px 10px;
border: none;
border-radius: 2.5px;
font-size: 8px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
Web ページがレンダリングされると、次のようになります。
送信ボタンをクリックしたときに「送信済み」と表示される簡単な JavaScript コードを追加できるようになりました。 JavaScript でリファクタリングされた HTML コードは次のようになります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />
</head>
<body>
<div class="form-container">
<form>
<label for="name">Name:</label>
<input type="text" id="name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" />
<br />
<label for="message">Message:</label>
<textarea
id="message"
name="message"
rows="5"
cols="30"
required
></textarea>
<br />
<input type="submit" value="Submit" onclick="submitted()" />
</form>
</div>
<script>
function submitted() {
alert("submitted");
}
</script>
</body>
</html>
送信ボタンをクリックすると、次のようなものが表示されます。
Pros of embedding JavaScript code between <script> … </script> tags
- Fast to implement: Working on the same file can save you time as you can reference your JavaScript code from HTML code from the same file.
- Easy to read code: The presence of <script> tags separates HTML from JavaScript codes, making it easier to read and debug.
Cons of embedding JavaScript code between <script> … </script> tags
- Makes it hard to reuse code: If you have several forms in your app, it means you will create JavaScript code for every form.
- Slows performance: Big code blocks on the HTML document can slow loading speeds.
#2. Inline Code by using JavaScript code directly inside HTML
Instead of enclosing the above JavaScript code in <script> …. </script> tags, you can add it directly to the HTML code. We will use the same HTML code and style sheet (style.css).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />
</head>
<body>
<div class="form-container">
<form>
<label for="name">Name:</label>
<input type="text" id="name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" />
<br />
<label for="message">Message:</label>
<textarea
id="message"
name="message"
rows="5"
cols="30"
required
></textarea>
<br />
<input type="submit" value="Submit" onclick="alert('inline submit')" />
</form>
</div>
</body>
</html>
[送信]をクリックすると、ブラウザーに「インライン送信」という言葉が表示された小さなウィンドウが表示されます。
JavaScript をインライン コードとして追加する利点
- 迅速な実装: HTML および JavaScript コードを記述するために、あるドキュメントから別のドキュメントに移動する必要はありません。
- 小さなアプリに最適: 対話性をあまり必要としない小さなアプリの場合は、インライン JavaScript が最適です。
JavaScript をインライン コードとして追加することの短所
- コードは再利用できません。アプリに複数のフォームがある場合は、フォームごとに JavaScript コードを作成します。
- パフォーマンスが低下する: HTML ドキュメントに大きなコード ブロックがあると、読み込み速度が遅くなる可能性があります。
- コードの可読性: コードベースが拡大し続けると、コードの可読性が低下します。
＃3。 外部 JavaScript ファイルの作成
アプリケーションが大きくなるにつれて、JavaScript コードを HTML ファイルに直接追加するのは得策ではないことに気付くでしょう。 また、HTML ファイルに多くのコードがある場合、Web ページの読み込み速度が遅くなる可能性があります。
JavaScript コードを運ぶ新しいファイル script.js を作成します。
HTML ファイルに script.js ファイルをインポートします。
<head> <script src="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/script.js"></script> </head>
新しく更新された HTML ページには、このコードが含まれます。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" /> <script src="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/script.js"></script> </head> <body> <div class="form-container"> <form> <label for="name">Name:</label> <input type="text" id="name" /> <br /> <label for="email">Email:</label> <input type="email" id="email" /> <br /> <label for="message">Message:</label> <textarea id="message" name="message" rows="5" cols="30" required ></textarea> <br /> <input type="submit" value="Submit" /> </form> </div> </body> </html>
このコードを script.js ファイルに追加します。
document.addEventListener("DOMContentLoaded", function() {
const form = document.querySelector("form");
form.addEventListener("submit", function(event) {
event.preventDefault();
alert("external JS sheet submit");
});
});
この JavaScript は次のことを行います。
- DOMContentLoaded イベントが発生するのを待つイベント リスナーがあります。
- DOMContentLoaded イベントが発生した後、コールバック関数が実行されます。
- このコードは、querySelector を使用してフォームを選択します。
- submit イベントがトリガーされたときに、DOM がデフォルトの動作 (ページを更新するか、新しいページに移動する) を選択するのを防ぐために、event.preventDefault() を使用します。
- submit イベントが発生すると、「外部 JS シート送信」というメッセージが発生します。
HTML 内の JavaScript: ベスト プラクティス
- ファイル サイズを小さくする: ファイル サイズが大きいほど、ブラウザーでの読み込みに時間がかかります。 縮小すると、意味やパフォーマンスを変更することなく、ソース コード内の不要な文字がすべて削除されます。 Yahoo YUI Compressor や HTMLMinifier などのツールを使用して、コンパクトなコードベースを作成できます。
- コードを整理する: これにより、読みやすく、保守しやすくなります。 Prettier などの拡張機能を使用して、コードを整理できます。
- 外部ライブラリを使用する: ライブラリがアプリの特定のタスクを実行できる場合、コードを最初から記述する必要はありません。 ただし、同じプロジェクトで同じ目的を達成する複数のライブラリを使用することは避けてください。
- JavaScript の配置を最適化する: JavaScript コードを HTML ファイルに追加する場合は、必ず HTML コードの後に配置してください。