JavaScript組み込みの基本

HTML内に記述する

JavaScriptはHTML内に埋め込んで使用するので、<script>タグと</script>タグの間に記述します。type属性で「MIMEタイプ」と呼ばれる形式でスクリプト言語の種類を指定します。JavaScriptは、「text/javascript」と指定します。コードをコメントアウトしているのは、未対応ブラウザでコード自体が表示されてしまうのを防止するためです。

XHTMLとの互換性を考慮する場合はCDATAセクションを設けその中にコードを記述しますが、HTML5環境では必要ありません。「document.writeln」は文字列を表示する命令です。

<!--HTML5-->
<script type="text/javascript">
<!--
document.writeln('Hello World!');
-->
</script>
<!--XHTMLとの互換性を考慮する場合-->
<script type="text/javascript">
//<![CDATA[
document.writeln('Hello World!');
//]]>
</script>

MIMEタイプ（Multipurpose Internet Mail Extensions type）は、ファイルやデータの種類を識別するためのインターネット標準のフォーマットです。もともとは電子メールでさまざまなデータ（テキスト、画像、音声、動画など）を送受信できるようにするために開発されましたが、現在ではHTTPを含む多くのインターネットプロトコルで広く利用されています。

外部ファイルとして読み込む

scriptタグのソース属性で外部のJavaScriptファイルを読み込みます。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>sample001</title>
</head>
<body>
  <script type="text/javascript" src="js/helloworld.js"></script>
  <noscript>ブラウザの設定でJavaScriptをオンにしてご覧ください</noscript>
</body>
</html>

<script>タグを記述する場所

  • 任意の場所
    • コンテンツにテキストを出力したい場合など
  • </body＞タグの直前
    • コンテンツの読み込み完了後にスクリプトを実行したい場合
  • <head>タグ内
    • 事前に読み込ませたい関数などがある場合

JavaScript疑似プロトコル

<a>タグのハイパーテキスト・リファレンスにJavaScriptを埋め込むことができます。「https:」などの代わりに「JavaScript:」という疑似プロトコルを指定して動作させます。

See the Pen alert test by Miki Iwamura (@robby_b9) on CodePen.