読者です 読者をやめる 読者になる 読者になる

jQueryに入る前にJavaScriptのおさらい(1)変数と演算子

JavaScript基礎

JavaScriptでおさえておくべきこと

  • 記述ルール
  • データ型
  • 演算型
  • 制御文
記述ルール(文法)
  • 変数は「var」で宣言をする
  • 文末には「;セミコロン」をつけます
  • 単行のコメントアウトは「//」
  • 複数行のコメントアウトは「/*……*/」
  • 改行・半角スペースを見栄えとして利用することは可能です

基本的な記述ルール

  • 大文字・小文字は区別する
  • センテンス内の空白(半角スペース)と改行は無視される
  • センテンスの区切りには「;セミコロン」をつけます
  • 単語やリテラルの中に空白や改行を入れることはできません

変数宣言

  • var命令でおこないます
  • var命令を使わずに宣言した変数はすべて「グローバル変数」とみなす
命名規則
  • 数値で始まらないこと
  • 予約語でないこと
  • 半角英字・半角アンダースコア・半角ドル記号、半角数字は2文字目以降なら可

データ型

  • 大きく基本型(プリミティブ型)と参照型に分類されます
  • 2つの違いは、「値そのものを扱うのか、値の格納されているアドレスを扱うのか
基本型
  • 真偽値(true / false)を扱うための「boolean
  • 文字列を扱うための「string
  • null値を扱うための「null
  • 未定義を扱うための「undefined
参照型
  • 配列を扱うための「array
  • オブジェクトを扱うための「object
  • 関数を扱うための「function

※データの型に格納できる値そのもの、または値の表現のことを「リテラル」と呼びます。

数値リテラル

  補足
整数リテラル 10進数リテラル 100、1、0など 日常的に表現する値
8進数リテラル 0500、0655など 頭に 0 を付ける
16進数リテラル 0xFF0000など 頭に 0x を付ける
浮動小数リテラル 1.1、3.14e5など 指数表現も可能

文字列リテラル
  • 文字列リテラルは、「シングルクォート」または「ダブルクォート」で値を囲みます
  • HTMLを含む文字列を生成する際に便利なため「シングルクォート」で記述することにします
配列リテラル
  • 配列リテラルは、カンマで区切った値をブラケット「[ ]」で囲んだ形式で表します
  • それぞれの要素には、インデックス番号(添字)をキーにアクセスします
  • インデックス番号は、「0」から始まります
  • 多次元配列を定義したい場合には、配列要素を入れ子にします
オブジェクトリテラル連想配列
  • オブジェクトとは、名前をキーにしてアクセスすることが可能な配列のようなもの
  • ハッシュ、連想配列と呼ぶこともあります
  • 通常の配列に比べて、任意の名前でプロパティにアクセスできるため、データの視認性や可読性が高くなります
  • 波括弧(カーリーブラケット)とコロンを使って表記します
  • または、ドット演算子を使って表記します
関数リテラル
  • JavaScriptでは関数もデータ型一種です
  • 関数を変数に代入して利用します

演算子

算術演算子
  • 標準的な四則演算をはじめ、数学的な演算をおこないます
  • 算術演算子は、見た目にもわかりやすく直感的に利用できるものがほとんどです

演算子 説明
+ 数値の加算 1+1

-

数値の減算 8-5
* 数値の乗算 2*4
/ 数値の除算 10/2
% 数値の剰余 10%4
++ 前置加算 x=3; a= ++x;
++ 後置加算 x=3; a= x++;
-- 前置減算 x=3; a= --x;
-- 後置減算 x=3; a= x--;

※加算演算子(+)は、オペランド(演算対象の変数やリテラル)のデータ型によって異なります。
 オペランドの一方が文字列の場合は、文字列連結として機能します。

JavaScriptは、数値の演算を内部的に2進数で行なっているため、計算に誤差が生じます
※値を一旦整数にしてから演算を行い、演算結果を小数点に戻すようにすると正しい結果を得ることができます。

f:id:web-design-lesson:20160515125434p:plain

代入演算子
  • 代入演算子は、変数に値をセット(代入)するために使用します

演算子 概要
= 値を代入する

x=10;

+= 左辺と右辺の値を加算した値を代入する x=10; x+=5;
-= 左辺と右辺の値を減算した値を代入する x=10; x-=5;
*= 左辺と右辺の値を乗算した値を代入する x=10; x*=2;
/= 左辺と右辺の値を除算した値を代入する x=10; x/=2;
%= 左辺と右辺の値を除算した余りの値を代入する x=10; x%=3;
&= 左辺の値を右辺の値で論理積演算した結果を代入する x=10; x&=5;
|= 左辺の値を右辺の値で論理和演算した結果を代入する x=10; x|=5;
^= 左辺の値を右辺の値で排他的論理和演算した結果を代入する x=10; x^=5;
<<= 左辺の値を右辺の値分左シフトした結果を代入する x=10; x<<=2;
>>= 左辺の値を右辺の値分右シフトした結果を代入する x=10; x>>=2;

比較演算子
  • 左辺と右辺の値を比較して、その結果をtrueかfalseで返します

演算子 概要
== 左辺と右辺の値が等しい場合にtrueを返す 1==1
!= 左辺と右辺の値が等しいない場合にtrueを返す 1!=1は、false
< 左辺が右辺の値より小さい場合にtrueを返す 1<2
<= 左辺が右辺以下の場合にtrueを返す 5<=5
> 左辺が右辺の値より大きい場合にtrueを返す 1>2は、false
>= 左辺が右辺以上の場合にtrueを返す 2>=3は、false
=== 左辺と右辺の値が同じ、かつデータの型も同じ場合にtrueを返す 7===7
!== 左辺と右辺の値、データ型のいずれかが異なる場合にtrueを返す 7!==7は、false
?: 条件演算子三項演算子 var i=1; (i=1)? 'a':'b'

論理演算子
  • 論理演算子とは、複数の条件式や論理値を論理的に結合し、その結果をtrueかfalseで返します
  • 「&&」と「||」は、左辺だけが評価され右辺が評価されない場合があります

※「&&」の場合、左辺がfalseと評価されたら、右辺は評価されません。
 「||」は、左辺がtrue評価されたら、右辺は評価されません
 この概念は「サーキット評価」とか「サーキット演算」とか「短絡演算」とか呼ばれています。

演算子 概要
&& 左右の式が共にtrueの場合にtrueを返す 10='10' && 'aa' == 'aa'の場合、false
|| 左右の式のどちらかがtrueの場合にtrueを返す 10='10' && 'aa' == 'aa'の場合、true
! 式がfalseの場合にtrueを返す !(10 === '10') の場合、true