HTML スクリプト

JavaScript を使うことで、HTML ページはよりダイナミックでインタラクティブなものになります。

HTML スクリプト

例

HTML ドキュメントにスクリプトを挿入する方法を説明します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>HTML スクリプト例</title>
</head>
<body>

<h1>HTML スクリプトの例</h1>

<!-- スクリプトを挿入 -->
<script>
    document.write("Hello World!");
</script>

</body>
</html>

`<noscript>` タグの使用

スクリプトをサポートしていない、または無効にしているブラウザに対処する方法。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>noscript タグの例</title>
</head>
<body>

<h1>noscript タグの例</h1>

<script>
    document.write("Hello World!");
</script>

<noscript>
    <p>申し訳ありませんが、あなたのブラウザは JavaScript をサポートしていません!</p>
</noscript>

</body>
</html>

HTML `<script>` タグ

<script> タグはクライアントサイドスクリプト（通常は JavaScript）を定義するために使用されます。

<script> 要素はスクリプト文を含むことも、src 属性を使って外部スクリプトファイルを指すこともできます。

例: 外部スクリプトファイルの使用

以下是一个简单的外部JavaScriptファイルを使用する例です。まず、外部JavaScriptファイルを作成し、次にそのファイルをHTMLドキュメントにリンクします。

ステップ1: 外部JavaScriptファイルを作成

ファイル名: myscript.js

内容:

// myscript.js
function displayMessage() {
    alert("Hello from an external JavaScript file!");
}

ステップ2: HTMLドキュメントに外部JavaScriptファイルをリンク

内容:

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>外部JavaScriptファイルの例</title>
    <script src="/myscript.js"></script> <!-- 外部JavaScriptファイルのリンク -->
</head>
<body>

<h1>外部JavaScriptファイルの例</h1>

<button type="button" onclick="displayMessage()">クリックしてね！</button>

</body>
</html>

この例では、myscript.js という外部JavaScriptファイルを作成し、その中に displayMessage という関数を定義しています。次に、index.html ファイルの <head> セクションでこの外部ファイルをリンクし、ボタンがクリックされたときに displayMessage 関数が呼び出されるようにしています。

JavaScript 体験

JavaScript は画像操作、フォーム検証、コンテンツの動的更新に最もよく使われます。

例: HTML に直接出力する

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScript 出力例</title>
</head>
<body>

<h1>JavaScript 出力例</h1>

<script>
    document.write("<p>これは段落です。</p>");
</script>

</body>
</html>

例: イベント応答

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScript イベント例</title>
</head>
<body>

<h1>JavaScript イベント例</h1>

<button type="button" onclick="myFunction()">クリックしてね！</button>

<script>
    function myFunction() {
        alert("ボタンがクリックされました！");
    }
</script>

</body>
</html>

例: HTML スタイルを処理する

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScript スタイル例</title>
</head>
<body>

<h1 id="demo">JavaScript スタイル例</h1>

<script>
    document.getElementById("demo").style.color = "#ff0000";
</script>

</body>
</html>