JavaScriptは、様々な環境で動作する軽量なプログラミング言語です。Javaと名前が似ていますが、異なるプログラミング言語です。主にWebブラウザ上で使われており、Webページに動きをつけたり、計算をさせたり、様々なことができます。
「JavaScript」を一度覚えてしまえば、Webサイトを大きく変えることができます。
「JavaScript」の実行される一般的な場面としては、例えば次のようなものがあります。
- 画像がスライドして動く。
- クリックすると指定の位置まで画面がスクロールする。
- フォームにメールアドレスを入力したかをチェックする。
ところで、「JavaScript」という言葉を聞くと耳が痛くなる方は多いのではないでしょうか？
しかし、覚え始めてしまえば、以外とすんなり覚えられるケースが多いです。
ひとつの内容を理解することによって知識の幅がぐーんと広がるイメージなので、立ち止まらずに学び、突き進んでいきましょう。
この記事では、JavaScriptの基本中の基本、記入する場所と記入の仕方について詳しく解説してきます。
JavaScriptの記入場所
<html> <head> <!-----------①ヘッダーのの中に記入------> </head> <body> <!--②<a href="タグ内に記入"></a>------> <!---------③ボディ内の最下部に記入------> <!--------【④外部ファイルの読み込み】------> </body> </html>
記入場所は主に４種類あります。
①ヘッダー要素の配下
ヘッダー内に記入します。ここに書いたJavaScriptは、body部分より先に読み込まれます。 先読みしておきたい画像や関数（処理をひとまとめにしたもの）などを記入します。しかし、その読み込みが終わるまでサイト表示に関する処理が一旦ストップしてしまいます。（=表示速度が遅くなる。）
②タグの中に記入
最近ではあまり見かけなくなりました。タグの中にイベントを組み込んで、そこに直接JavaScriptを記入できます。 関数を呼び出したり、簡単なスクリプトを記入します。
③ボディ要素の配下
何かを表示するようなスクリプトの場合、実際に表示する位置に記入します。最近はbody最下部にJavaScriptを記述することが良いとされています。一般的に、JavaScriptによる処理は、ページが全て準備できてから行うべきものであるはずなので、これによる弊害はほぼありません。
④外部ファイルへ記載
複数のページで同じ処理を行いたい場合は、直接ページには記入せず、外部ファイルにスクリプトを書いて、 それを各ページが読み込むようにします。外部ファイルの読み込みの仕方をこの後説明していきます。
JavaScriptをHTMLに組み込む基本的な記法
●構文（インラインスクリプト）
<script type="text/javascript"> JavaScriptのコード </script>
type属性はスクリプトの種類を表します。一般的には「text/javascript」以外を指定することはありません。
HTML5では、そもそも「text/javascript」がデフォルト値になっているため、省略することも可能です。
外部スクリプトをインポートする
JavaScriptのコードは、外部ファイルとして別に定義することも可能です。
●HTMLの場合
<script type="text/javascript" src="javascriptのファイルパス/javascript.js"></script>
●WordPressの場合
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/javascript.js"></script>
コードの外部化には、以下のようなメリットがあります。
- レイアウトとスクリプトを分離することによって、コードを再利用しやすくなる。
- スクリプトを外部化することで、htmlファイルの行数が少なくなる。
これらの理由から、本格的なアプリ開発では、できる限りJavaScriptは外部ファイル化するべきです。
外部スクリプトとインラインスクリプトを併用するときの
注意点
<script type="text/javascript" src="javascriptのファイルパス/javascript.js">
window.alert('こんにちは、世界！') //←無視される
</script>
この記述の場合インラインスクリプトは機能しません。
src属性を指定した場合、<script>要素配下のコンテンツは無視されるためです。
もし、外部スクリプトとインラインスクリプトを併用する場合には以下のように別にしなければなりません。
<script type="text/javascript" src="javascriptのファイルパス/javascript.js">
<script type="text/javascript">
window.alert('こんにちは、世界！')
</script>
アンカータグにスクリプトを埋め込む
<script>要素で記述する他に、アンカータグのhref属性に、「JavaScript:〜;」の形式でスクリプトを埋め込むこともできます。
この記法をJavaScript疑似プロトコルといいます。
<a href="JavaScript:スクリプトコード;">リンクテキスト</a>
JavaScript機能が無効の環境で代替コンテンツを表示させる
ブラウザはJavaScriptの機能を無効にすることもできます。その場合に表示すべき代替コンテンツが<noscript>要素です。
本来ページ開発者は、JavaScriptが動作していない場合でも、必要最低限のコンテンツは閲覧できるようにするべきです。
しかしページの構造上どうしてもJavaScriptに依存せざるをえない場合には、ユーザーにブラウザのJavaScriptを有効化した上で、アクセスして欲しい旨を伝えることも可能です。
あるいは、代替テキストによって別ページへのリンクを貼ることも親切と言えるでしょう。
<noscript>JavaScriptが利用できません。</noscript>
まとめ
いかがでしたか?
ここからがJavaScriptのスタートになります。
JavaScriptにも代替テキストがあることは知っていましたか？
画像もリンク先が無い場合に表示させるalt属性を打ち込みますよね。
全てはユーザビリティのために。
開発者のみなさん、最高のパフォーマンスで閲覧者を満足させましょう！