JavaScriptをブラウザで動かす
JavaScriptは、かつてはWebブラウザで動作するプログラミング言語でした。しかし、現在では「Node.js」などの技術を使いブラウザ以外でもJavaScriptが使われています。例えば、プログラミングやWebサイトの制作を行なっている人の中にはATOMというテキストエディタを使ったことがある人も多いと思います。このテキストエディタのATOMはNode.jsを使いJavaScriptで作られています。
ただし、JavaScriptの基本は、やはりブラウザで動作させることです。より複雑なプログラムを書くためにも基本を知らなければなりません。まずは、JavaScriptをブラウザで動かすことを覚えましょう。
JavaScriptの記述
JavaScriptをWebブラウザで動かすには、HTMLファイルの中にJavaScriptのコードを記述します。そのJavaScriptのコードを記述するには、「HTMLファイルの中に直接書く」方法と「別のファイルを用意する」方法の二つの方法があります。
HTMLファイルに直接記述する
JavaScriptのコードをHTMLファイルに直接書く場合は「<script> 〜 </script>」の間に記述します。例えば、ページを開いたらダイアログで「こんにちは」と表示させる場合は次のようなコードとなります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TEST</title>
</head>
<body>
<script>
window.alert("こんにちは");
</script>
</body>
</html>scriptタグはどこに書いても大丈夫です。上の例ではbodyタグの間に書いてきますが、headタグの中に記述しても問題はありません。
別のファイルを用意する
JavaScriptをHTMLファイルとは別のファイルに記述したい場合はscriptタグのsrc属性を使い「<script src=”ファイル名”></script>」としてファイルを読み込みます。上記のダイアログを表示するコードを「hello.js」というファイルに記述した場合のHTMLファイルは次のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TEST</title>
<script src="hello.js"></script>
</head>
<body></body>
</html>なお、「hello.js」の中身はHTMLファイルに直接書いた場合と同じなので『window.alert(“こんにちは”);』と一行で記述するだけです。このような簡単なプログラムではファイルを別に用意するメリットはあまりありませんが、大きなコードになればなるほど、外部ファイルに記述した方がメンテナンス性が良くなります。
defer属性とasync属性
通常、WebブラウザーはHTMLファイルに記述されたコードを上から順に読み込んでいきます。このとき、コードの途中にscriptタグがあると、そこで一度コードの読み込みを停止してJavaScriptのコードの読み込みと実行が行われます。
しかし、scriptタグにdefer属性やasync属性を指定して「<script src=”hello.js” defer></script>」などとすることで、JavaScriptのコード読み込み中にHTMLの読み込みが停止されることを防ぐことができます。
deferとasyncの違いはJavaScriptの実行タイミングです。
defer属性
scriptタグにdefer属性を指定した場合、WebブラウザーがHTMLをすべて読み込み終わってからJavaScriptが実行されます。また、defer属性を持つscriptタグが複数ある場合は上から順に実行されます。
async属性
scriptタグにasync属性を指定した場合はHTMLとは非同期で読み込まれたJavaScriptのファイルが使用可能になった時点で実行されます。async属性の場合、defer属性のように実行順序を指定することはできません。そのため、他のJavaScriptファイルと連動して動作するようなファイルには指定しないよう注意してください。
