JavaScriptの使用法


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

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

<script> タグ

HTML ページに JavaScript を挿入するには、<script> タグを使用してください。

<script> と </script> は JavaScript に開始位置と終了位置を指示します。

<script> と </script> の間の行には JavaScript が含まれています:

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

上記のコードを理解する必要はありません。ブラウザは <script> ="text/javascript" の間の JavaScript コードを解釈して実行することを理解してください。これはもう必要ありません。 JavaScript は、HTML5 だけでなく、最新のすべてのブラウザーでもデフォルトのスクリプト言語です。


＆lt; body＆gt; [例を実行] ボタンをクリックして、オンラインの例を表示します

JavaScript 関数とイベント

上記の例の 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>

この例では、HTML ページの <body> セクションに JavaScript 関数を配置します。
ボタンをクリックするとこの関数が呼び出されます:
インスタンス

<!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> または <body> に配置すると、実際の実行効果は <script> タグに記述した場合とまったく同じになります。

myScript.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>
<p><b>注释：</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p>
<script src="myScript.js"></script>
	
</body>
</html>
lamp外部スクリプトには <script> タグを含めることはできません。