JavaScriptの使用法

JavaScript の使用法

HTML 内のスクリプトは、<script> タグと </script> の間に配置する必要があります。

スクリプトは HTML ページの <body> セクションと <head> に配置できます。

<script> タグ

HTML ページに JavaScript を挿入するには、<script> タグを使用します。

<script>
alert("My first JavaScript");
</script>

上記のコードを理解する必要があります。ブラウザは <script> と </script> の間の JavaScript コードを解釈して実行することを理解してください。

＆lt; body＆gt;

JavaScript 関数とイベント

上記の例の JavaScript ステートメントは、ページが読み込まれるときに実行されます。

通常、ユーザーがボタンをクリックしたときなど、イベントが発生したときにコードを実行する必要があります。 JavaScript コードを関数に入れると、イベントの発生時にその関数を呼び出すことができます。

<head> または <body> 内の JavaScript

HTML ドキュメントには無制限の数のスクリプトを含めることができます。

スクリプトは HTML の <body> セクションまたは <head> セクションに含めることができます。

通常のアプローチは、関数を <head> セクションまたはページの下部に配置することです。こうすることで、ページのコンテンツを妨げずに同じ場所に配置できます。

<head>

の JavaScript 関数この例では、HTML ページの <head> セクションに JavaScript 関数を配置します。

ボタンがクリックされるとこの関数が呼び出されます:
インスタンス

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP中文网(php.cn)</title>
</head>
<body>
<p>
    JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
    document.write("<h1>这是一个标题</h1>");
    document.write("<p>这是一个段落。</p>");
</script>
<p>
    您只能在 HTML 输出流中使用 <strong>document.write</strong>。
    如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
</body>
</html>

プログラムを実行して試してください

<body> この中で場合、私たちはJavaScript 関数を HTML ページの <body> セクションに配置します。

ボタンをクリックするとこの関数が呼び出されます:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP中文网(php.cn)</title>
    <script>
        function myFunction(){
            document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
        }
    </script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>

プログラムを実行して試してみましょう

外部JavaScript

スクリプトを外部ファイルに保存することもできます。外部ファイルには、複数の Web ページで使用されるコードが含まれることがよくあります。

外部 JavaScript ファイルのファイル拡張子は .js です。

外部ファイルを使用する必要がある場合は、<script> タグの "src" 属性に .js ファイルを設定してください:

例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>PHP中文网(php.cn)</title> 
</head>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
<script>
function myFunction(){
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</body>
</html>

スクリプトを < head> またはでの実際の操作の効果は、