変数を使ってみよう

変数はvarの後に定義

var msg = "hello world"

データ型

文字列
数値
真偽値 (true / false)
オブジェクト
- 配列
- 関数
組み込みオブジェクト
- undefined 定義されていない
- null 何もない

文字列を使ってみよう

文字列"5"と数値5を+した場合は文字列の連結となり、"55"となってしまう

if文

基本構文は
if(条件){条件が真だった場合の処理}
条件が偽だった場合の処理はelse{}の中に続ける

等しいを表す条件は

等しくないは
!==
==, !=でもできるが、上記の方が厳密に比較できる。

真偽値と三項演算子

真偽値

文字列: 空文字以外だったらtrue
数値: 0かNaN以外だったらtrue
オブジェクト: null以外だったらtrue
undefined, nullはfalse

三項演算子

if(条件){a = b;} else { a = c; }
は
a = (条件)?b : c;
とかける

switch文

 変数の値によって処理を分岐させる

/*
            条件分岐
            switch
*/
var signal = "blue";
 
switch (signal) {
  case "red":
    console.log("stop!");
    break;
  case "green":
  case "blue":
    console.log("go!");
    break;
  case "yellow":
    console.log("slow down!");
    break;
  default:
    console.log("wrong signal");
    break;
}

while, do ... while

/*
ループ処理
while
do ... while
*/

var i = 0;
while (i < 10) {
console.log(i);
i++;
}
 var i = 200;
do {
  console.log(i);
  i++;
} while (i < 10);

処理が条件判定の前に行われるか、あとに行われるかが異なる

for文

whileとやることは同じで書き方が異なる

/*
ループ処理
for
break ループ処理を抜ける
continue ループ処理を1回スキップ
var i = 0;
while (i < 10) {
console.log(i);
i++;
}
*/
 
for (var i = 0; i < 10; i++) {
  if (i === 5) {
    // break;
    continue;
  }
  console.log(i);
}

alert confirm prompt

alertはダイアログボックスを出して、okを押させる
confirmはダイアログボックスを出して、okを押せばtrue,キャンセルを押せばfalseを返す
promptは入力ボックスを出して、入力してokを押せばその値を返し、キャンセルを押せばnullを返す
promptの第一引数はメッセージ、第二引数は初期値

関数

function 関数名(引数) {
処理
return 返り値
}

ローカル変数

関数内で定義した変数は関数の中でのみ用いることができる

無名関数

var 変数名 = function(引数) {
処理
return 返り値
}

即時関数

(関数を定義)(引数);
とすると、直後に実行される関数を定義できる
この関数定義では関数名を省略できる(無名関数)

即時関数で変数を囲むことで、ローカル変数を定義出来る

setInterval setTimeout

var i = 0;
function show() {
  console.log(i++);
}
setInterval(function() {
  show();
}, 1000);

1000ミリ秒ごとにshow関数を実行する
setIntervalは前の処理が終わったかどうかは考慮せず、次の処理に進むため、クラッシュする可能性がある 
setTimeoutにすると、1000ミリ秒後に1回処理を実行するが、これでループを実現することができる。これなら前の処理が上手く行かなければ止まる

var i = 0;
function show() {
  console.log(i++);
  var tid = setTimeout(function() {
　　  show();
  }, 1000);
  if (i > 3) {
    clearTimeout(tid);
  }
}
show();

配列

[]

オブジェクト

{プロパティ名: 値, ・・・}
それぞれのペアをプロパティという
オブジェクト.プロパティ名
の形で、その値を取得できる 

メソッド

オブジェクトのプロパティの値に関数が来た場合メソッドと呼ぶ
メソッド内のthisはそのオブジェクトを呼び出す

組み込みオブジェクト

String
Array
Math
Date

Stringオブジェクトを作成するには

var s = new String("uno")

 ```Javascript
var s = "uno"


 とすると、文字列リテラルという別のものを作成するが、メソッドを呼ぶと、文字列オブジェクトに一時的に変換されるので、同様に扱える 
s.length
s.replace("", "")　//
s.substra(1, 3)　//部分文字列をとってくる

## Array

Stringと同様に

```Javascript
var a = new Array()
var a = []

のどちらでも

unshift 先頭に追加
push 末尾に追加
shift 先頭を削除
pop 末尾を削除
splice(場所, 削除する要素数, 追加したいものを順番に)

Math

newする必要がなく
Math.ceil 切り上げ
Math.floor 切り捨て
Math.round 四捨五入
Math.random() ランダムな数字を生成

Date

月は0~11であることに注意

window

 ブラウザをwindowオブジェクトで扱える
window.location.href = ''
で他のurlに飛ばせる
window.outerHeight
でwindowの高さを取得できる

window.document
は今開いてるページを表す
これを操作することで、動的にページの一部を書き換えたり、新しい要素を追加したりできる
windowは省略可能で、documentのみでもアクセスできる。
documentにアクセスするためのいろいろな命令を、document object model DOMという

DOMを操作する  var e = document.getElementById('')

でそのidのタグをとってくることができる
document.createElement('p')　pタグを作成
document.createTextNode('')　テキストを作成

var greet = document.createElement('p'),
    text = document.createTextNode('hello world');        document.body.appendChild(greet).appendChild(text);

イベントを設定する

document.getElementById('add').addEventListener('click', function() {
            var greet = document.createElement('p'),
                text = document.createTextNode('hello world');
            document.body.appendChild(greet).appendChild(text);
        });

addというidのエレメントがクリックされた場合に無名関数が実行される