夢は小さいほどいいと思っているんです。本気になれるから。

夢を持つことが大事なんじゃなく、本気になるのが大事。(糸井重里)

JavaScriptの基本的な書き方

JavaScriptの基本的な書き方(2-1/p24)

See the Pen p24 by r.shimizu (@r_shimizu) on CodePen.

まず、JsのコードをHTMLのファイルに組み込むのはスクリプトタグのタグの役目です。

<script>Jsのコード</script>

上記のtype属性を見てください。旧来のHTMLでは、style要素とscript要素には、type属性を指定する必要がありました。
HTML5の場合はデフォルトのtype属性がJavaScriptなのでtype属性を特別記載する必要はないそうです
HTML5からは、type属性を省略することができます。

上のコードは、下記にも書き換えが可能。
これは、スクリプトコードの外部化で書き換えています。

helloEx.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>

<script src="helloEx.js"></script>

</head>
<body>
</body>
</html>

helloEx.js

document.write("hello world");

上記の実行結果は、code penでの実行結果と同じです。

コードの外部化のメリットは

  • レイアウトとスクリプトを分けることで、コードを他のページで再利用できる
  • スクリプトを外部化することで、HTMLファイルそのものの見通しが良くなる

外部スクリプトとインラインスクリプトを併用する場合の注意点

外部スクリプトとインラインスクリプトを併用する場合、以下のような書き方はできません。
f:id:pbrsk:20160801193011p:plain

上記の実行結果は、「hello world3」だけです。src属性を指定した場合、scriptタグ配下のコンテンツは無視されからです。

スクリプトタグを記述する場所は3つです。

  • 『body要素の中(任意のどこか)』

テストするときとかこれが多いらしい。

  • 『bodyタグの閉じタグの直前』

これが一般的らしい

  • 『head要素の中』

Jsのルールに、関数を呼び出すためのscriptタグよりも、定義する関数のscriptタグを先に記述しないとダメ!っていうのがあるためです。
たとえば、bodyタグ配下で呼び出す必要がある関数は事前にheadタグ配下で読み込んでおく必要がああったりします。

この記述する場所というのが結構重要になってきます。最近のJavaScript業界ではbodyタグの閉じタグの直前にscriptタグを記述するのが一般的な作法となっています。
その理由としてすべてのブラウザではJavaScriptを読み込んで処理している間は他のレンダリング(HTML要素の読み込み)を中断するという処理になっているからです。
HTML5から非同期で読み込みできるasync属性などが追加されましたが、そういった特別な事をしていない限りほぼ全てのブラウザで同じようにレンダリングが行われます。
例えばhead要素にJavaScriptを書いてしまうとJavaScriptが読み込まれた瞬間には、ページを構成している全てのHTML要素の読み込みが終わっておらず、何かHTML要素を操作するJavaScriptが記述されていた場合は『要素が読み込まれた後に処理を実行して!』という記述を追加しないといけません。
bodyタグの閉じタグの直前にJavaScriptを記述すればほぼ全てのHTML要素が読み込まれた状態でJavaScriptの読み込みを始めることができるのでスムーズな処理を構築することができます。

wp-p.info

アンカータグにスクリプトを埋め込む 〜JavaScript擬似プロトコル

リンクをクリックした時にダイアログを開きたい場合が、という場合に使います。
ちょっとしたスクリプトを埋め込む方法ですが、以外と利用するので覚えておきます。

See the Pen p29 by r.shimizu (@r_shimizu) on CodePen.


参考書籍 JavaScript本格入門