JavaScript勉強会

JavaScriptの学習日記

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

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

「現代の JavaScript チュートリアル」パート1の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>タグでJavaScriptのプログラムを埋め込む方法は、2種類あります。

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

 

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

 

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

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

 

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

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

 

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

 

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

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

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

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

 

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

お~、いいね!w

 

まとめ

(教材のサマリーを引用) 

  • ページにJavaScriptコードを追加するには、<script> を利用します。
  • type と language 属性は必要ありません。
  • 外部ファイルのスクリプトは、<script src="path/to/script.js"></script> で挿入できます。

 

 

 

スラスラ読める JavaScript ふりがなプログラミング (ふりがなプログラミングシリーズ)

スラスラ読める JavaScript ふりがなプログラミング (ふりがなプログラミングシリーズ)