JavaScriptドットインストールまとめ


##変数を使ってみよう
変数はvarの後に定義

```JavaScript
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文
 変数の値によって処理を分岐させる

```Javascript
/*
            条件分岐
            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

```Javascript
/*
ループ処理
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とやることは同じで書き方が異なる

```Javascript
/*
ループ処理
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

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

```Javascript
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オブジェクトを作成するには

```Javascript
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('')　テキストを作成

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

## イベントを設定する

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

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