JavaScript,jQuery,CSS,HTMLの達人

JavaScriptとjQueryとCSSとHTMLの使い方やサンプルのブログ

JavaScript の基本 ~ JavaScript を記述する場所 ~

f:id:vw-dsg:20200601063255p:plain

JavaScript の記述場所 ~

JavaScript を記述する場所は以下の3つです。スクリプトの長さや使用する目的に応じてこの3つの記述場所を使い分けるようにします。

① jsファイルを作成してHTML文書とリンクする

サイズが大きい(長い)スクリプトをHTML内に記述してしまうと、後に修正や管理に時間がかかるようになってしまうので、スクリプトのサイズが大きくなるのがわかっている場合は、最初から外部にjsファイルを作ってリンクした方が良いでしょう。

(リンクの記述方法)<script src="jsファイルの場所"></script>

JavaScript 説明

② HTML文書内の <head></head> タグ内に記述する

あまり大きくないスクリプトであればHTMLに記述します。HTML基本的には<head></head>タグ内に記述しますが、実は<head></head>タグの外に書いても動きます。ただし、動くタイミングが遅くなるので注意が必要です。HTML5になってから「type="text/javascript"」は不要になりました。

<head>
    <script>
 ~ ここに JavaScript を記述 ~
    </script>
</head>

以下のように記述しても動きます。(以前の書き方)

<head>
    <script type="text/javascript">
 ~ ここに JavaScript を記述 ~
    </script>
</head>

③ HTML要素に直接記述する

HTML要素のタグに直接記述することもできますが、あまり多用するとHTMLソースが見づらくなり後からの編集に時間がかかるようになるので注意が必要です。

(例)

<div onclick="alert('クリックされました!')">クリックしてください!</div>

END