このチュートリアルは、プラットフォームに依存しないJavaScriptのコアについてです。もっと先に、Node.jsや他のプラットフォームについて学びます。
しかし、私たちは今スクリプトを動かすための動作環境が必要です。ちょうどこのチュートリアルはオンラインなので、ブラウザが良い選択肢です。もしも別の環境( Node.js など)に集中する予定がある場合に時間を費やさないように、ここでは、ブラウザ固有のコマンド(alertのような)が最小限になるようにします。チュートリアルの次のパート では、ブラウザの JavaScript に焦点を当てます。
では最初に、どうやってWebページにScriptを付け加えるか見てみましょう。サーバサイドでは、Node.jsの場合 "node my.js" のようにコマンドと一緒に実行するだけです。
“script” タグ
JavaScriptプログラムは、<script> タグを使用してHTML文書の任意の部分に挿入できます。
例:
<!DOCTYPE HTML>
<html>
<body>
<p>Before the script...</p>
<script>
alert( 'Hello, world!' );
</script>
<p>...After the script.</p>
</body>
</html>右上の “Play” ボタンをクリックすることでサンプルを実行することができます。
<script> タグはブラウザがこのタグを見つけたときに自動的に実行される JavaScript コードを含んでいます。
最新のマークアップ
<script> タグには最近ではほとんど利用しない属性がいくつかあり、古いコードの中で見つけることができます:
type属性:<script type=…>-
古い標準であるHTML4はこのタイプを持つことを必須としました。通常は
type="text/javascript"でした。今は必須ではありません。また、現在の標準ではこの属性の意味が完全に変わっています。現在は JavaScript モジュールとして使用することができます。ただ、これは高度なトピックであり、これに関してはチュートリアルの別の部分で説明します。 language属性:<script language=…>-
この属性はスクリプトの言語の表示を意味するためのものでした。JavaScript がデフォルトの言語であるため、この属性に意味はなく、これを使う必要はありません。
- スクリプトの前後のコメント
-
本当に昔の書籍やガイドでは、このような
<script>の中にコメントがある場合があります:<script type="text/javascript"><!-- ... //--></script>それらのコメントは
<script>タグを知らなかった古いブラウザでコードを隠すためのものです。しかし、過去15年以上で生まれた全てのブラウザはこのような問題は持っていません。このようなコメントはサインとして使えるので、私たちはここで言及します。もしもどこかでこれを見たら – そのコードは恐らく本当に古いか、調べる価値がないでしょう。
外部スクリプト
多くのJavaScriptコードを持っている場合、別々のファイルに置くことができます。
スクリプトファイルは、src 属性でHTMLに記述します。
<script src="/?originalUrl=https%3A%2F%2Fja.javascript.info%2F%26quot%3B%2Fpath%2Fto%2Fscript.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%253C%2Fcode">ここで /path/to/script.js はスクリプトファイルの絶対パスです(サイトルートからの)。また、現在のページからの相対パスで指定することもできます。例えば、src="/?originalUrl=https%3A%2F%2Fja.javascript.info%2F%26quot%3Bscript.js%26quot%3B%253C%2Fcode"> は現在のフォルダにある "script.js" を意味するでしょう。
完全なURLも同様に可能です。たとえば:
<script src="/?originalUrl=https%3A%2F%2Fja.javascript.info%2F%26quot%3Bhttps%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Flodash.js%2F3.2.0%2Flodash.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%253C%2Fcode">複数のスクリプトを使う場合は、複数のタグを使います:
<script src="/?originalUrl=https%3A%2F%2Fja.javascript.info%2F%26quot%3B%2Fjs%2Fscript1.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%26lt%3Bscript%2520src%3D%26quot%3B%2Fjs%2Fscript2.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%25E2%2580%25A6%253C%2Fcode">原則として、最もシンプルなスクリプトだけをHTML内に置きます。より複雑なものは別のファイルに置きます。
ファイル分割のメリットは、ブラウザがダウンロードしてそれをブラウザのキャッシュに保存するためです。
以降、同じスクリプトが必要な他のページは、ダウンロードする代わりにキャッシュから取得します。そのため、ファイルは実際には一度だけダウンロードされます。
これはネットワーク通信量を節約しページをより速くします。
src が設定された場合, スクリプトの中身は無視されます。1つの <script> タグは src 属性と中身のコード両方を持つことはできません。
これは動作しません:
<script src="/?originalUrl=https%3A%2F%2Fja.javascript.info%2F%26quot%3Bfile.js%26quot%3B%26gt%3B%2520%2520alert(1)%3B%2520%2F%2F%2520src%2520%25E3%2581%258C%25E8%25A8%25AD%25E5%25AE%259A%25E3%2581%2595%25E3%2582%258C%25E3%2581%25A6%25E3%2581%2584%25E3%2582%258B%25E3%2581%25AE%25E3%2581%25A7%25E3%2580%2581%25E3%2581%2593%25E3%2581%25AE%25E3%2582%25B3%25E3%2583%25B3%25E3%2583%2586%25E3%2583%25B3%25E3%2583%2584%25E3%2581%25AF%25E7%2584%25A1%25E8%25A6%2596%25E3%2581%2595%25E3%2582%258C%25E3%2581%25BE%25E3%2581%2599%25E3%2580%2582%26lt%3B%2Fscript%26gt%3B%253C%2Fcode">外部の <script src="/?originalUrl=https%3A%2F%2Fja.javascript.info%2F%26quot%3B%25E2%2580%25A6%26quot%3B%26gt%3B%253C%2Fcode"> もしくは、通常のコードをもつ <script> のどちらか一方にしなければなりません。
上の例は、2つのスクリプトに分けることで動作させることができます。:
<script src="/?originalUrl=https%3A%2F%2Fja.javascript.info%2F%26quot%3Bfile.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%26lt%3Bscript%26gt%3B%2520%2520alert(1)%3B%26lt%3B%2Fscript%26gt%3B%253C%2Fcode">サマリ
- ページにJavaScriptコードを追加するには、
<script>を利用します。 typeとlanguage属性は必要ありません。- 外部ファイルのスクリプトは、
<script src="/?originalUrl=https%3A%2F%2Fja.javascript.info%2F%26quot%3Bpath%2Fto%2Fscript.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%253C%2Fcode"> で挿入できます。
ブラウザスクリプトやそれらとWebページとのやり取りについては、学ぶことがまだまだあります。しかし、このチュートリアルのこのパートは JavaScript 言語に専念していることに留意してください。JavaScriptを実行するための方法としてここではブラウザを使っており、オンラインでの読み込みではとても便利ですが、数ある実行方法の1つでしかありません。
コメント
<code>タグを使ってください。複数行の場合は<pre>を、10行を超える場合にはサンドボックスを使ってください(plnkr, JSBin, codepen…)。