初めてでも分かるJavaScriptの基礎知識とは？

JavaScriptとは？

Webサイトを制作するにあたり、Webページ内にあるコンテンツを動かしたり、操作したりするためには、プログラミング言語を使う必要があります。コンピュータにプログラミング言語を打って命令することで、さまざまな動きを加えることが可能になります。Webページ作成の際によく使われるプログラミング言語があります。

それはHTML、CSS、JavaScriptの３つになります。

Webサイト上にある文字は、全てHTMLによって作られていると言っても過言ではありません。HTMLはHyper Text Markup Language（ハイパー・テキスト・マークアップ・ランゲージ）の略称です。テキスト（文書）やレイアウトなどの構造を司るプログラミング言語になります。

HTMLを使えば、Web上に画像や文字を置くことはできますが、静止している状態のままになります。

CSSとはCascading Style Sheets（カスケーディング・スタイル・シート）の略称です。CSSはレイアウト、色やサイズなどのデザイン装飾を施すことができるプログラミング言語になります。

つまり、HTMLは文章内容、CSSは色やサイズなどのデザインやレイアウトを決めることができるのです。JavaScriptは、フロントエンドと呼ばれるユーザーとダイレクトにデータのやり取りをするWebブラウザ側で動作をするプログラミング言語です。Webサイトを制作する際には、JavaScriptはHTMLやCSSと共に使い、Webページに動作をつけるために使います。

例えば、ポップアップやカルーセル広告などもそれに当たります。また、Webサイト上にあるアニメーションなどを動かすことができるのです。どれもWebサイト制作には欠かせないプログラミング言語なのですね！

JavaScriptの書き方の基本とは？

JavaScriptを書く方法には２通りあります。

１つはHTMLファイルの中に書き込む方法、もう１つはHTMLファイルとは別のjsファイルを作成し、HTMLに参照させる方法です。

初めてプログラミングを行う場合には、HTMLファイルに直接書き込む方法の方が簡単で分かりやすいと思います。ＨＴＭＬファイルに直接書き込む方法からご説明します。

まず初めは、HTMLファイルを作成するところからスタートです。そして、パソコンのデスクトップの分かりやすい場所に、テキストドキュメントを作成します。デスクトップの画面上で、マウスで右クリックをし、メニューを出します。メニューの中の新規作成を選択し、さらにテキストドキュメントを選択します。

次に、テキストドキュメントの中のHTMLファイルにコード入力を行っていきます。

JavaScriptのコードを入力し終えたら、作成したファイルをHTML形式で保存しておきます。HTML形式で保存する方法は、「名前をつけて保存」をクリックし、ファイル形式を「テキストファイル」から「すべてのファイル」にし、ファイル名の一番後ろを「.html」という拡張子に変更すれば完了です。保存ができたらもう一度デスクトップに戻り、きちんとファイルができているか確認しましょう。

また、先程と同様にデスクトップ上で右クリックをし、ブラウザを選択してファイルを開きます。先程入力したコードのポップアップが出てくるので、それで作業完了となります。

そして、もう１つの方法であるjsファイルを作成し、ＨＴＭＬに参照させる方法についても手順を見ていきましょう。JavaScriptの部分に、jsファイルを呼び出して実行するためのコードを打ち込みます。

それから、デスクトップにjsファイルを作成します。

その後、デスクトップで右クリックをし、新規作成を選択し、新しいテキストドキュメントを作成するのです。テキストドキュメントのファイル名をjsファイルとして保存します。ＨＴＭＬファイル作成時と同様の手順で、ブラウザを選択してファイルを開き、ポップアップ表示がでれば完成です。

JavaScriptでは何ができる？

JavaScriptでできることは、さまざまあります。

それでは具体的にどのようなことができるのでしょうか？

まず、カルーセルバナーを自動でスクロールさせることができます。カルーセルは別名スライドショーとも呼ばれ、複数のバナーのスペースを少なくしてレイアウトする方法です。

次に、ポップアップウィンドウの表示ができます。ＥＣサイト等での申込欄の入力フォームの確認画面を動かすこともできます。サムネイル画像を枠内で画像を大きくして、アニメーション表示することができます。グローバルメニューにマウスを乗せると、下層のメニューまで表示することができます。

つまり、私たちが普段何気なく見ているWebサイト上での動きを伴うもの、JavaScriptのコード入力でできているものが多いと考えて間違いありません。

まとめ

Webページ作成の際によく使われるプログラミング言語は、HTML、CSS、JavaScriptの３つあり、その中でも動作を伴うコードはJavaScriptだということが分かりましたね！

Webサイト上でのポップアップやカルーセル広告なども、１つ１つがJavaScriptのコードを入力して、そのように動くよう命令することで動く仕組みなのです。

JavaScriptは、Webデザイナー初心者でも少し学習すれば使えるようになるプログラミング言語です。

JavaScriptを習得し、Webデザイナーとしての仕事の幅をもっと広げていきましょう！