[JavaScript] JavaScriptの定義方法３パターン

投稿日：2016年10月10日更新日：2018年5月3日

JavaScriptを定義方法には以下３通りあります。

HTML内のscript領域に定義する
別ファイルにに定義する
イベント部分に定義する

１．HTML内script領域に定義する

HTML内に scriptタグで囲った領域を作り、その中にJavaScriptを記述します。

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <script>
   function test(){
    alert('アラートです');
    return false;
   }
  </script>
</head>
<body>
  <input type="button" value="ボタン" onclick="test();"/>
</body> 
</html>

<head>

function test(){

alert('アラートです');

return false;

}

</script>

</head>

<body>

</body>

</html>

解説

一般的にheadエリア内に記述しますが、bodyエリア内に記述してもＯＫです。

２．別ファイルにに定義する

JavaScriptを定義したファイルを作成して、HTMLから参照する方法です。

function test(){
  alert('アラートです');
  return false;
}

function test(){

alert('アラートです');

return false;

}

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <script src="sample.js"></script>
</head>
<body>
  <input type="button" value="ボタン" onclick="test();"/>
</body> 
</html>

<head>

</head>

<body>

</body>

</html>

解説

JavaScriptファイルの参照は、HEADエリア内で<script src="sample.js"></script>のように記述します。
別ファイルに定義したJavaScriptの文字コードがHTMLと異なる場合は、
<script src="sample.js" charset="Shift_JIS" ></script>
のようにcharsetを指定することもできます。

３．イベント部分に定義する

HTMLのイベントハンドラ部分に直接JavaScriptを定義します。

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
</head>
<body>
  <input type="button" value="ボタン" onclick="alert('アラートです');return false;"/>
</body> 
</html>

<head>

</head>

<body>

</body>

</html>

解説

複数のJavaScriptコードを書きたい場合は、;(セミコロン)で区切って記述します。

執筆者：とら