JavaScript入門
はじめに
- このJavaScript入門はエンジニア向けではなく、社内の新卒マーケターや新卒データアナリスト向けに最低限身に着けてほしいJavaScriptの知識に絞ってまとめています
- エンジニアの観点だと物足りない情報も多々あると思いますのでご留意ください
- HTML/JS/CSSは「実際に触ってみる」と覚えが早いと思うので後述のjsFiddleなどのサービスを活用しながら実際に手を動かしながらこの記事を読み進めることをお勧めします。
JavaScriptとは
JavaScriptとはブラウザを「動かす」ためのプログラム言語です。Web上の処理の動きを行うことができます。
《例》
- カルーセルバナーの自動スクロール処理
- ポップアップウィンドウの表示処理
- グローバルナビゲーションメニューの開閉処理
- FAQアコーディオンの開閉処理
- 検索一覧画面におけるフィルタ条件に応じた検索結果の変化
- 保険や携帯の料金シミュレーション
例：表示制御
例：条件判定制御
例：演算制御
JavaScriptの変数・データ型
JavaScriptの変数とは、プログラムで文字列や数値などのデータに名前をつけて繰り返し利用できるようにする機能です。変数は「値を入れる入れ物」のようなもので、名前のラベルが貼ってあり、プログラムの実行中にいつでも呼び出すことができます。
JavaScriptの変数宣言
JavaScriptで変数を利用するにはvar/let/const等を用いて変数の宣言を行う必要があります。
データ型：文字列
シングルクォーテーション(')またはダブルクォーテーション(")で全体を囲んで表します。
データ型：数値
123や-2といった数値を変数に入れる場合はクォーテーションで括る必要はありません。
（補足）式と演算子
数値は四則演算などを行うことが可能です。
データ型：論理値（真偽値）
論理値には true または false のどちらかを取ります。クォーテーションで括る必要はありません。
JavaScriptオブジェクト（location）
JavaScriptのLocationオブジェクトは、現在表示されているウェブページのURLを抽出したり、別のページへ遷移する場合などに便利なオブジェクトです。URLや、ホスト名・パス・プロトコルなどの情報を得ることが出来ます。
前述の自身らで定義をする変数とは異なり、デフォルトで様々な情報が格納されています。
location.href
URL全体を取得します。location.hrefを任意の値に変更するとそのURLに遷移します。
<p id="location_href" class="item"></p>
<a id="location_href_link" href="#" target="_blank">Googleにリンクします</a>
<script>
//pタグ（id=location_href）にlocation.hrefの値を挿入
$("#location_href").text(location.href); //表示しているURLをpタグに挿入
//クリックした時にイベント発火
$("#location_href_link").click(function(){
location.href = "https://google.co.jp"; //aタグ押下時にGoogleにリンク
});
</script>
location.host
現在のURLのホスト名を取得します。（例：https://test.com/の【test.com】）
<p id="location_host" class="item"></p>
<script>
//pタグ（IDはlocation_host）にlocation.hostを挿入
$("#location_host").text(location.host);
</script>
location.pathname
現在のURLのパス部分を取得します。（例：https://test.com/aaa/の【/aaa/】）
<p id="location_pathname" class="item"></p>
<script>
//pタグ（IDはlocation_pathname）にlocation.pathnameを挿入
$("#location_pathname").text(location.pathname);
</script>
location.protocol
現在のURLのプロトコルを取得します。（例：https://test.com/aaa/の【https:】）
<p id="location_protocol" class="item"></p>
<script>
//pタグ（IDはlocation_protocol）にlocation.protocolを挿入
$("#location_protocol").text(location.protocol);
</script>
JavaScriptオブジェクト（document）
documentオブジェクトはブラウザ上で表示されたドキュメント情報を取得できます。
document.title
現在のURLのページタイトルを取得します
<p id="document_title" class="item"></p>
<script>
//pタグ（IDはdocument_title）にdocument.titleを挿入
$("#document_title").text(document.title);
</script>
JavaScriptの制御文
JavaScriptの制御文は、プログラムの流れをコントロールするための文です。例えば、「もし～ならば」という条件を使うif文や、同じことを何度も繰り返すfor文やwhile文があります。これらを使うと、状況に応じてプログラムを制御することができるようになります。
《用途例》
- 偶数行と奇数行で処理を分けて制御したい
- チェックボックスを押した状態でボタンクリックした場合に制御したい
- 最下層までスクロールした場合に処理を実行したい場合に制御したい
- ECサイトにて商品数を閾値まで選択した場合に制御したい
if文
if文は、Webサイトでユーザーの行動や状態に応じて異なる動作をさせるために使われます。下記ではユーザーが入力した年齢に応じて異なるメッセージを表示するケースを紹介します。
// ユーザーの年齢
var age = 20; // 仮に年齢が20歳とする
if (age < 13) {
// 子供の場合の処理
console.log('子供料金のチケットをご案内します。');
} else if (age >= 13 && age < 18) {
// 青少年の場合の処理
console.log('青少年料金のチケットをご案内します。');
} else if (age >= 18 && age < 65) {
// 大人の場合の処理
console.log('大人料金のチケットをご案内します。');
} else {
// シニアの場合の処理
console.log('シニア料金のチケットをご案内します。');
}
Discussion