JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptをHTMLファイルに埋め込む方法をわかりやすく解説

JavaScriptをHTMLファイルに埋め込む方法は、大きく分けて2つあります。
<script>タグ内に直接コードを記述する「インライン方式」と、src属性で外部の.jsファイルを読み込む「外部ファイル方式」です。

ここでは、両方の方法を組み合わせた具体的なサンプルコードを紹介します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="script.js" defer></script>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>Embed javascript in html file</h1>
<div class="result"></div>
<script>
    let resEle = document.querySelector(".result");
    resEle.innerHTML += "Inline javaScript loaded" + "<br>";
</script>
</body>
</html>

script.js（外部ファイル）

resEle.innerHTML += 'External JavaScript loaded ';

実行結果

上記のコードを実行すると、ブラウザには次のように表示されます。

JavaScriptをHTMLファイルに埋め込む方法をわかりやすく解説

コードのポイント

  • インライン方式：<body>タブ内の<script>タグに直接JavaScriptを書くことで、その位置で即座にスクリプトが実行されます。短い処理に向いています。
  • 外部ファイル方式：src属性で「script.js」を指定することで、HTMLとは別ファイルに管理されたJavaScriptを読み込めます。コードの再利用性や保守性が高まります。
  • defer属性：<head>内で外部スクリプトを読み込む場合にdeferを付けると、HTMLの解析が完了した後にスクリプトが実行されるため、DOMの構築を待ってから安全に処理できます。

このように、用途に応じてインラインと外部ファイルを使い分けることで、効率的にJavaScriptをHTMLへ組み込むことができます。

  1. 【サンプルコード付き】JavaScriptファイルを動的に読み込む方法を解説

    JavaScriptファイルを動的に読み込むことで、ページの初期表示を高速化したり、必要なタイミングで必要なスクリプトだけを取得したりできます。ここでは、ボタンをクリックしたときに外部のJavaScriptファイルを読み込むサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <tit

  2. JavaScriptでテキストボックスの入力値を取得して表示する方法

    JavaScriptでは、valueプロパティを使ってテキストボックスに入力された値を取得し、innerHTMLを使うことでその値を段落（<p>要素）に表示することができます。この仕組みは、フォームの入力内容をリアルタイムに画面へ反映させたい場合などによく使われる基本的なテクニックです。 コード例 以下が実際のサンプルコードです。 <!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">