JavaScriptのコードを別ファイルに記述する


ccc

東京都内でサラリーマンをしているAI・育児ブロガー、CCCです。 AI(人工知能)と子育てに関する記事を執筆しています。 WebシステムをベースとしたAIを活用することで生活をより便利にする方法を紹介し、育児について衣食住における役立つグッズや情報を配信しています。


JavaScriptのコードを別ファイルに記述する方法を教えてください。


ccc

JavaScript はクライアント側で実行されるオブジェクト指向型のスクリプト言語です。主にブラウザ上で実行され、ユーザのアクションに応じて動的にWebページの内容を書き換えたり、フォームに入力された内容をチェックしたりといったことがクライアント側で実現できます。また、Ajaxという仕組みを利用することで、Webサーバーとブラウザとの間で非同期通信を行えるので、ページを切り替えることなくページの内容を書き換えることができます。Web系AIとJavaScriptの親和性はピカイチで、AIをWebブラウザから使うためのライブラリが公開されています。


ccc

今回はJavaScriptの使い方として、JavaScriptのコードを別ファイルに記述する方法をサンプルを用いて解説します。

JavaScriptのコードを別ファイルに記述する

別ファイルにJavaScriptのコードを記述ください。JavaScriptファイルの拡張子は.jsとするのが一般的です(今回はtest.jsとしました)。

document.write("Hello World from JavaScript");

script要素にファイルパスを指定する

HTMLページのscript要素にファイルパスを相対パスまたは絶対パスで指定します。

<script src="./test.js"></script>

サンプルコードを実行する

次のサンプルを実行してください。別ファイルに記述されたJavaScriptコードが実行されます。

<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<script src="./test.js"></script>

</body>
</html>

出力結果は次のようになります。

Hello World from JavaScript