HTMLと連携(外部ファイルとして)実行

2024-10-312024-11-18

今回のコードは、HTMLファイルとJavaScriptファイルを組み合わせて、ウェブページに「Hello, World!」というテキストを表示するシンプルな例です。

▼

▼

▼

▼

HTML

<!DOCTYPE html>: HTML5のDOCTYPE宣言を指定しています。
<html>: HTML文書のルート要素を示します。
<head>: ページのヘッダー情報を含むセクションです。ここでは、外部スタイルシート（style.css）と外部JavaScriptファイル（JavaScript.js）を読み込んでいます。
<link rel="stylesheet" href="style.css">: 外部スタイルシート（style.css）を読み込むための<link>要素です。
<script src="JavaScript.js" defer></script>: 外部JavaScriptファイル（JavaScript.js）を読み込むための<script>要素です。defer属性は、スクリプトの実行をページ読み込み後に遅延させるためのものです。
<body>: ページの実際のコンテンツを含むセクションです。
<div id="result"></div>: テキストを表示するための<div>要素を定義しています。id属性が”result”に設定されているため、後でJavaScriptからこの要素を取得できます

JavaScript

document.addEventListener("DOMContentLoaded", function() { ... });: DOMの構築が完了した際に実行するコードを定義しています。つまり、HTMLの要素が全て読み込まれてからJavaScriptの処理が行われます。
var resultDiv = document.getElementById("result");: id属性が”result”の要素を取得して、resultDivという変数に格納しています。
resultDiv.innerHTML = "Hello, World!";: resultDivに関連付けられた<div>要素の内部にテキストを挿入しています。ここでは、”Hello, World!”というテキストを表示しています。

コード

CopyCode


    <!DOCTYPE html>
    
    <html>

    <head>

        <link rel="stylesheet" href="style.css">
        
        <script src="JavaScript.js" defer></script>

    </head>
    
    <body>

        <div id="result"></div>

    </body>
    
    </html>


　（今回は空ファイルです。）

            
    document.addEventListener("DOMContentLoaded", function() {

        var resultDiv = document.getElementById("result");

        resultDiv.innerHTML = "Hello, World!";

        });

よかったらシェアしてね！