takahiro_itazuriの公倍数的ブログ

本やWebを通して学習したことをまとめるブログです。最大公約数(つまり、共通部分)的なという表現と対比して、「なるべく包括的にカバーしつつ、更に+αの要素も加えられたらいいな」という意味で公倍数的ブログと名付けました。

基礎文法

「JavaScript攻略」の第一回です。

Hello world!」出力

まず「index.html」というhtmlファイルを作成します。
(※Webページのトップページは「index.html」という名前を付けるというのが常識です。また様々なブラウザでデフォルトのトップページとして認識されます。)
そして下記のように書いて、Chromeで開いてみてください。
Hello world」と書かれたアラートが表示されます。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta lang="en">
        <script>
            alert("Hello world!");
        </script>
    </head>
    <body>

    </body>
</html>

HTML5以前では、scriptタグでは以下のように書く必要がありました。

<script type="javascript">

</script>

スクリプトの外部ファイル化

先程はHTML内にJavaScriptを記述しましたが、別のファイルに記述することができます。

「script.js」というファイルを作成し、先程の「index.html」には次のように記述します。

<script src="script.js"></script>

「script.js」には先程のscriptタグ内に書いてあったスクリプトをそのまま書きます。

alert("Hello world!");

記述のルール

文末にセミコロン(;)をつける

先程のアラート表示の時の文末にも書いてあったようにセミコロンで区切りとします。

文の途中で空白や改行、タグを入れることが可能

文末のセミコロンで区切りとするため、途中に空白や改行を入れることができます。

alert(
    "Hello world!"  
    )   ;

大文字と小文字は区別される

下記のように記述するとエラーがでます。

Alert("Hello world!");

コメントの挿入

プログラムを後から読みやすくするために、コメントを入れることができます。下記のように「//」か「/* */」で書こうことでコメントを入れることができます。

// アラート出力
alert("Hello world!");
/*
アラート出力終了
*/

変数

変数の宣言

型は暗黙的に存在しますが、全て「var」で宣言します。

var integer = 1;
var script = "Hello world";

宣言時に値を入れないと、「未定義値(undefined)」という値が割り当てられます。

変数名の決め方

次の点を意識して変数名を決めるといいでしょう。

  1. 名前と中身が一致しているか
  2. 長すぎないか
  3. 見た目が紛らわしくないか
  4. 予め決められた記法で統一する
  5. 基本的に英単語を利用する

データ型

データ型 概要
数値型 数値
文字列型 シングルクォートもしくはダブルクォートで囲まれた文字の集合
真偽型 trueもしくはfalse
特殊型 nullかundefined(未定義)
配列 データの集合(インデックスアクセス)
オブジェクト データの集合(名前でアクセス)
関数 一連の処理の集合

演算子

算術演算子

演算子 概要
+ 加算 1+2
- 減算 1-2
* 乗算 1*2
/ 除算 1/2
% 剰余 3%2
++ 前置加算 x=2;a=x++;//a=2
++ 後置加算 x=2;a=++x;//a=3
-- 前置減算 x=2;a=x--;//a=2
-- 後置減算 x=2;a=--x;//a=1
var a = 3;
var b = 2;

alert(a+b); // 5
alert(a-b); // 1
alert(a*b); // 6
alert(a/b); // 1.5
alert(a%b); // 1

代入演算子

演算子 概要
= 代入 x=1
+= 左辺の値に右辺の値を加算して代入 x=3;x+=2: //x=5
-= 左辺の値から右辺の値を減算して代入 x=3;x-=2; //x=1
*= 左辺の値に右辺の値を乗算して代入 x=3;x*=2; //x=6
/= 左辺の値を右辺の値で除算して代入 x=3;x/=2; //x=1.5
%= 左辺の値を右辺の値で除算した余りを代入 x=3;x%=2; //x=1

代入における注意点として、配列、オブジェクト、関数は参照型と呼ばれ、アドレスを代入しているだけなので、元の値を変更すると、代入先も変更される(参照渡し)。

比較演算子

演算子 概要
== 左辺と右辺の値が等しい場合はtrue 3==3 //true
!= 左辺と右辺の値が等しくない場合はtrue 3!=3 //false
< 左辺の値が右辺の値より小さい場合はtrue 3<4 //true
<= 左辺の値が右辺の値以下ならばtrue 3<=3 //true
> 左辺の値が右辺の値より大きい場合はtrue 4>3 //true
>= 左辺の値が右辺の値以上ならばtrue 4>=4 //true
=== 左辺と右辺の値が等しくデータ型も同じ場合true 3===3 //true
!== 左辺と右辺の値が等しくない、またはデータ型が異なる場合false 3!==3 //true
? 「条件式?式1:式2」条件式がtrueの場合は式1、falseの場合は式2。 (x==1)?1:0

論理演算子

演算子 概要
&& AND演算子。左右の式がともにtrueの場合はtrue 10==10 && 5==5 //true
|| OR演算子。左右の式のどちらかがtrueの場合はtrue 10==10 && 5==6 //true
! NOT演算子。falseをtrueに、trueをfalseに。 !(10==10) //false

条件分岐(if文、switch文)

与えた条件式がtrueかfalseかで処理を変えることが可能。

if文

var x = 10;
if (x < 5) {
  alert("xは5より小さい");
}
else if(x > 5) {
  alert("xは5より大きい");
}
else {
  alert("xは5");
}

上記のコードではif、else if、elseの順番に条件を判定していきます。elseはそうでなければという意味です。

switch文

var sex = "male";
switch(sex) {
  case "male":
    alert("男性");
    break;
  case "female":
    alert("女性");
    break;
  default:
    alert("どちらでもない");
}

breakを忘れないようにしましょう。defaultはどれにも当てはまらなかったときに使用。