Web制作に携わり始めると次第に「JavaScript」という言葉を耳にすることが増えてきます。
このJavaScriptがWeb制作にどのように必要とされるのか今一つ、ピンとこない方も多いと思います。
今回はJavaScriptについて紹介していきます。
JavaScriptとは？
動的なWebページを作成する事ができるプログラミング言語です。
Webページ上の様々なコンテンツに動き（アニメーション）を設定、制御することができます。
例えば、ボタンにマウスをポイントしたときに、ボタンの色や画像を切り替えたり、下層メニューをドロップ表示したりすることができます。
なぜJavaScriptが必要なの？
HTMLだけでは動的効果が扱えないためです。
Webページは文書コンテンツであると同時にユーザーと対話するためのインターフェースとしての役割も兼ねています。
動きを持たないインターフェースは表示が単調で硬く、どのような操作を行っているのかを視覚的に確認する事が難しく、使いにくいものになってしまいます。
JavaScriptで動きを与えることで操作の流れを表示したり、HTMLだけでは設定できないレイアウトを制御することが可能になったり、視認性や操作性を向上させることができます。
どうやって記述するの？
JavaScriptの基本書式は次の通りです。
|
1 2 3 |
<script> オブジェクト . メソッド(引数) ; </script> |
JavaScriptの基本書式は、「オブジェクト」の「メソッド」に「引数」を指定する、です。
オブジェクトってなに？
その名の通り「もの」を表します。JavaScriptはブラウザのさまざまな「もの」を扱うことができます。
メソッドってなに？
「オブジェクト」が持っている「自分自身にできる操作」のことです。「引数」を与えることでさまざまな処理を実行します。
引数ってなに？
メソッドなどが実行されるときに渡される「データ」のことです。文字や数値などさまざまな値が使えます。
どこに記述するの？
HTML内に直接記述する方法と、外部ファイルに記述してリンクで読み込む方法があります。
HTMLに直接記述する場合
|
1 |
<script>オブジェクト . メソッド(引数) ;</script> |
script要素内にJavaScriptを記述します。
外部JavaScriptを使用する場合
|
1 |
<script scr="外部JavaScriptファイルへのパス"></script> |
具体的にどう書くの？
次のようにHTMLとJavaScriptを記述してみましょう。
|
1 2 3 4 5 6 7 8 |
<html> <head></head> <body> <script> document.write("こんにちは"); </script> </body> </html> |
結果は「こんにちは」と表示されます。
「document.write(“こんにちは”);」の内容は「document」オブジェクトの「write」メソッドで「こんにちは」と出力するという処理です。
「document」オブジェクトは頻繁に使用するオブジェクトのひとつで、ブラウザに表示される様々な情報（文字や画像など）を操作できます。
「document」オブジェクトは「write」メソッドを持っています。
「write」メソッドは指定された引数を書き出す（表示）します。
結果は単に文字を表示するだけですが、文字の出力はプログラムで最も基本的な処理の一つです。これにさまざまな処理を組み合わせて機能を作っていきます。
JacaScriptについての概要は以上となります。
最後に
HTML/CSSで基本的なWeb制作ができるようになったら次のスキルアップとしてJavaScriptを学習してプログラミング学習の第一歩としてみましょう。
