JavaScriptについて

今週のコラムを担当する金苗です。
あっという間に2週目になりました。

前回のコラムでHTML、CSSについて書かせていただきましたが、
今回もWebサイトに欠かせないもう一つの言語であるJavaScriptに触れていこうかと思います。

皆さんは通販サイトなどのトップページで画像が横に動いたり、商品の画像をクリックすると拡大したりするのを見たことがありますでしょうか？
それらの大半はJavaScriptが使用されています。

1990年代はじめにLiveScriptという名前で生まれしたが、企業との提携があり、
その提携先企業が開発し評判だったプログラミング言語のJavaであったことから、JavaScriptへと変更されました。

JavaScriptの最大の特徴は、プログラミング言語の中で唯一ブラウザで動作することができるところです。
つまり、ユーザーの操作を起点に内部処理が始まるというWebサービスにおいて最も大切な機能を備えています。

JavaScriptをHTMLファイル内に書く場合は、HTMLタグのように以下のタグを使用します。

<script></script>

このタグ内に書かれたものがHTML、CSSを読み込んだ後に読み込まれます。

大まかに分けて以下の3つの機能をになります。
●ユーザー操作で内部処理が発動する
　JavaScriptは、ユーザーがブラウザでおこなった操作をトリガーに、さまざまな処理を発動させることができます。
　検知できる操作には、下記のようなものが挙げられます。

　・マウスのドラッグ＆ドロップ
　・フォーム入力値のリアルタイム検知
　・フォーム送信
　・Webページの読込完了時
　・Webページの遷移時
　・クリック、ダブルクリック、ホバー時
　・ウィンドウのスクロール時

　冒頭でお聞きした、画像が横に動いたりするものですね。

 

●Webサイトに動きをつける
　HTML、CSSのみでサイトを作ることはできますが、

　上記のユーザー操作にJavaScriptを使ってアニメーションを追加することでより魅力あるサイトを作ることができます。
　JavaScriptを使えば、
　「クリックしたらポップアップウィンドウが立ち上がる」
　「スクロールしたら画像がフェードインする」
　などの“動き”をつけることができます。

 

●非同期通信
　非同期通信とは、サイトを更新することなく表示内容を更新できるというものです。

　ユーザーは「ページの読込に3秒かかると半分以上の人が離脱する」といわれるほどサイト速度にストレスを感じやすいといわれています。
　ストレスを減らしてよりユーザー体験を高めることで、サイトへのアクセスを増やすことにも繋がります。

今回は、JavaScriptについて書かせていただきましたが、調べれば調べるほど奥が深いものだと感じることができますので、
ぜひ、調べて実際に触れてみるのもいいかもしれません。