【JS学習マラソン】第4回　1.2.1 Hello, world!

JavaScript学習マラソンの第4回は、

「現代の JavaScript チュートリアル」パート１の2.1「Hello, world!」です。

Hello, world! https://ja.javascript.info/hello-world

を読んでみます。

<script>タグ

チュートリアルでは、JavaScriptをHTMLページに組み込んで使う方法で練習しています。

HTMLページにJavaScriptのプログラムを埋め込むには、<script>タグを使います。

f:id:jsstudy:20190103145740p:plain

<script>タグの使い方

www.htmq.com

<script> - スクリプト - とほほのWWW入門

コードを直接書く方法
コードを書いた外部ファイルを読み込む方法

ちょっとした短いコードなら、(1)「直接書く」方法でもOKですが、長くなると見づらくなるので、(2)「外部ファイルを読み込む」方法にします。

JavaScriptのコードを直接書く場合は、<script>と</script>の間に書きます。

<script>
  alert( 'Hello, world!' );
</script>

外部ファイルを読み込む場合は、<script>タグのsrc属性でファイル名を指定します。

<script src="/path/to/script.js"></script>

他にも細々と、<script>タグの使い方の注意点が説明されていました。

原則として、最もシンプルなスクリプトだけをHTML内に置きます。より複雑なものは別のファイルに置きます。

ファイル分割のメリットは、ブラウザがダウンロードしてそれをブラウザのキャッシュに保存するためです。

以降、同じスクリプトが必要な他のページは、ダウンロードする代わりにキャッシュから取得します。そのため、ファイルは実際には一度だけダウンロードされます。

これはネットワーク通信量を節約しページをより速くします。

外部ファイルを読み込む方法にすると、同じファイルなら１回読み込めば、キャッシュ（保存）されて、表示の高速化につながるそうです。

お～、いいね！ｗ