Javascript入門

# **概要**
## **Javascriptとは**
- ブラウザに実装されているスクリプト言語
- 動きのあるウェブサイトやユーザーインターフェースなどを作るのに使う

## **リファレンス**
- MDN javascriptで検索すると出てくる
- https://developer.mozilla.org/ja/docs/Web/JavaScript

# **javascriptの書き方**
## **htmlファイル内への記述**
```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <script>
    // ここにjavascriptを記述する
    console.log("hello world!");
  </script>
</body>
</html>
```

## **外部ファイルへの記述**
```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <script src="myscript.js"></script>
</body>
</html>
```

```js:myscript.js
console.log("hello world from myscript.js!");
```

# **変数とデータ型**
## **変数**
- データにつけるラベルのようなもの
- `var`で宣言をする

```js:変数の宣言とデータの格納
var msg = "hellow world!";
```

## **データ型**
- 文字列
- 数値
- 真偽値
  - 文字列：　空文字以外だったらtrue
  - 数値：　0かNaN（Not a Number）以外だったらtrue
  - true / false
  - object：　null以外だったらtrue
  - underfined, null => false
- オブジェクト
  - 配列
  - 関数
  - 組み込みオブジェクト
- undefined 定義されていない
- null 何もない

## **数値を扱う**
- 数値
  - 整数値
  - 実数値
  - マイナス値
- 演算子
  - 四則演算子
  - 代入演算子
  - 単項演算子

## **文字列を扱う**
- 文字列
  - 特殊文字列
      - 改行　`\n`
      - タブ `\t`
- 演算子
  - 文字列結合

# **条件分岐**
## **if文**
```js:if文
var score = 80;
if(score > 60){
  console.log("OK!");
}
```

```js:if+else文
var score = 80;
if(score > 60){
  console.log("OK!");
}else{
  console.log("OK!");
}
```

```js:if+else_if文
var score = 80;
if(score > 60){
  console.log("OK!");
}else if(score > 40){
  console.log("soso...");
}else{
  console.log("NG!");
}
```

### **比較＆論理演算子**
|演算子|説明|
|:--:|:--:|
|>|より大きい|
|<|より小さい|
|<=|より小さいまたは等しい|
|>=|より大きいまたは等しい|
|==|等しい|
|===|厳密に等しい|
|!=|等しくない|
|!==|厳密に等しくない|
|&&|AND条件|
|｜｜|OR条件|


## **三項演算子**
### **三項演算子とは**
- ある条件下においてif-else文を書き換える事ができる構文

```js:if-else文
var a, b, c
if (条件) {
  a = b;
}else{
  a = c;
}
```

```js:三項演算子での書き換え
a = (条件) ? b : c;
```

## **switch文**
- ある変数が取りうる値が複数あって、それに応じて処理を振り分けたい場合に使うとすっきり書ける構文

```js
var signal = "red";
switch(signal){
  case "red":
    console.log("stop!");
    break;
  case "blue":
  case "green":
    console.log("go!");
    break;
  case "yellow":
    console.log("slow down!");
    break;
  default:
    console.log("wrong signal");
    break;
}
```

# **繰り返し処理**
## **while文**
```js
var i = 0;
while(i < 10){
  console.log(i);
  i++;
}
```

## **do ... while文**
```js
do {
  console.log(i);
  i++;
} while(i < 10)
```

- while文との違いは条件判定が先に行われるか後に行われるかの違いのみ

## **for文**
```js
for(var i = 0; i < 10; i++){
  console.log(i);
}
```

### **break**
- 処理を抜ける

```js
for(var i = 0; i < 10; i++){
  if(i === 5){
    break;
  }
  console.log(i);
}
```

```text:実行結果
0
1
2
3
4
```

### **continue**
- 処理をスキップする

```js
for(var i = 0; i < 10; i++){
  if(i === 5){
    continue;
  }
  console.log(i);
}
```

```text:実行結果
0
1
2
3
4
6
7
8
9
```

# **ユーザへの情報提示、確認要求**
## **alert**
```js
alert("hello");
```
![スクリーンショット 2016-05-07 10.28.58.png](https://qiita-image-store.s3.amazonaws.com/0/79134/f8757cfe-115d-25d5-6670-6046257a9f9f.png)


## **confirm**
- OKで`true`、キャンセルで`false`が返り値としてセットされる
- 使用例としては削除処理などの条件分岐での使用など

```js
var answer = confirm("are you ok?");
console.log(answer);
```
![スクリーンショット 2016-05-07 10.23.52.png](https://qiita-image-store.s3.amazonaws.com/0/79134/c5d11b6c-34e8-7947-df82-99c7c38ef4a8.png)


## **prompt**
- 入力した値を返り値としてセットされる
- 第二引数にデフォルトの返り値をセットできる
- 第二引数がない場合に何も入力しないと`null`が返り値としてセットされる

```js
var name = prompt("お名前は？", "名無しさん");
consolo.log(name);
```
![スクリーンショット 2016-05-07 10.39.37.png](https://qiita-image-store.s3.amazonaws.com/0/79134/9b0a8d00-5e9e-c42b-3ea9-2d0ca18320f9.png)

# **関数**
## **基本構文**
### **返り値無し**

```js
function 関数名(引数){
  処理;
}
```

```js
function hello(name){
  console.log("hello" + name);
}
```

### **返り値有り**

```js
function 関数名(引数){
  return 返り値;
}
```

```js
function hello(name){
  return "hello" + name;
}
var greet = hello("Tom");
console.log(greet);
```

## **ローカル変数**
- その関数の中でのみ有効な変数

## **無名関数・匿名関数**
- 関数にもデータ型があるので変数に入れることも可能
- その場合、関数名は省略可能
- それ自体が式になるので最後のセミコロンをつける

```js
var greet = function(name){
    var msg = "hello" + name;
    return msg;
};
```

## **即時関数**
- 定義した関数をすぐに呼び出したい場合に使用する
- 関数名は省略可能
- 即時関数を使用することによりローカル変数として安全に変数を扱える
- 複雑なコードを記述する際には即時関数を使うように心がける

```js
(function(name) {
  console.log("hello" + name);
})("Tom");
```

# **タイマー処理**
## **setInterval**
- 前の処理が終わったかどうか考えないので処理が重い場合は次々に新しい処理が実行されてブラウザがクラッシュされる問題がある
- 第二引数にミリ秒で指定できる

```js
var i = 0;
function show(){
  console.log(i++);
}

setTimeout(function(){
  show();
}, 1000);
```

## **setTimeout**
- 前の処理が終わったかどうか考慮するので、繰り返し処理によく使われる

```js:setTimeoutでループ処理を実装
var i = 0;
function show(){
  console.log(i++);
  setTimeout(function(){
    show();
  }, 1000);
}

show();
```

```js:setTimeoutでのループ処理を止める
var i = 0;
function show(){
  console.log(i++);
  var tid = setTimeout(function(){
    show();
  }, 1000);
  if(i > 3){
    clearTimeout(tid);
  }
}

show();
```

# **配列**
- グループ化されたデータ
- 色々なデータ型を格納可能

```js:配列
var score = [100, 300, 500];
```

```js:多次元配列
var score = [
  [1, 2, 3],
  [4, 5, 6]
];
```

# **オブジェクト**
- グループ化されたデータ
- 名前と値のペアがグループ化されたもの
- 名前をプロパティと呼ぶ

## **書き方**
```js
var user = {
  email: "example@gmail.com",
  score: 80
};

// アクセスの方法は下記
console.log(user["email"]);
console.log(user.email);
```

## **オブジェクトのメソッド**
- プロパティの値に関数が来た場合、その関数の事を**オブジェクトのメソッド**と呼ぶ

```js
var user = {
  email: "example@gmail.com",
  score: 80,
  greet: function(name){
    console.log("hello, " + name);
  }
};

user.greet("Tom");
```

### **this**
- メソッドの中で使える特殊なキーワード
- メソッド内で使うと、今自分がいるオブジェクトを参照することができる
- オブジェクトの中の他のプロパティにもアクセスできる

```js
var user = {
  email: "example@gmail.com",
  score: 80,
  greet: function(name){
    console.log("hello, " + name + "from" + this.email);
  }
};

user.greet("Tom");
```

## **組み込みオブジェクト**
- Javascriptが提供する組み込みオブジェクトの一つ
- 便利なメソッドやプロパティが使えるようになる

- リテラルに対してもオブジェクトのプロパティを使用することができる
- よく使われる組み込みオブジェクト
  - Stringオブジェクト
      - 文字列に関するオブジェクト
  - Arrayオブジェクト
      - 配列に関するオブジェクト
  - Mathオブジェクト
      - 数学に関するオブジェクト 
  - Dateオブジェクト
      - 日付に関するオブジェクト 

### **Stringオブジェクト**
- [リファレンス](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String)

```js:文字列オブジェクトに対して
var s = new String("example");
console.log(s.length);
console.log(s.replace("e", "E"));
console.log(s.substr(1, 3));
```

```js:文字列リテラルに対して
var s = "example";
console.log(s.length);
console.log(s.replace("e", "E"));
console.log(s.substr(1, 3));
```

```text:実行結果
7
Example
xam
```

### **Arrayオブジェクト**
- [リファレンス](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array)

#### 配列へ要素を追加する
- `unshift`
  - 配列の先頭へ要素を追加
- `push`
  - 配列の最後へ要素を追加

#### 配列から要素を削除する
- `shift`
  - 配列の先頭の要素を削除する
- `pop`
  - 配列の最後の要素を削除する

```js
var a = new Array(100, 300, 200);
// var a = [100, 300, 200];

console.log(a.length);
a.splice(1, 2, 800, 1000);
console.log(a);
```

```text:実行結果
3
[100, 800, 1000]
```

### **Mathオブジェクト**
- newする必要無し
- [リファレンス](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math)

```js
console.log(Math.PI);
console.log(Math.ceil(5.3));
console.log(Math.floor(5.3);
console.log(Math.round(5.3));
console.log(Math.random());
```

```text:実行結果
3.141592653589793
6
5
5
0.18007751712454434
```

### **Dateオブジェクト**
- [リファレンス](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date)

```js
// 現在の日付情報の取得
var d = new Date();
// 年の取得
console.log(d.getFullYear());
// 月の取得（０から始まる）
console.log(d.getMonth());
// Unixタイムの取得
console.log(d.getTime());
```

```text:実行結果
2016
4
1462602380710
```

```js
// 日付の指定もできる
var d = new Date(2014, 4, 16, 10, 30, 30);
console.log(d);
```

```text:実行結果
Fri May 16 2014 10:30:30 GMT+0900 (JST)
```

# **DOM**
- document object model
- ブラウザによって命令によって異なる場合がある

## **windowオブジェクト**
- ブラウザ自体からJavascriptを扱うためのオブジェクト

```js
// 
console.dir(window);
// windowの高さをJavascriptからアクセスし、取得
console.log(window.outerHeight);
// 今見てるページから別のページへ飛ばす
window.location.href = 'https://google.co.jp';
// 今開いてるページを取得
window.document;
```

## **DOMを操作**
- JavascriptではHTMLでidを付けておくと扱いやすい

```html:基本のHTML
<!DOCTYPE html>
 <html lang="ja">
 <head>
   <meta charset="UTF-8">
   <title>javascript practice</title>
   <style>
    .myStyle {
      font-weight: bold;
      border: 1px solid gray;
    }
   </style>
 </head>
 <body>
   <h1>見出し</h1>
   <p id="msg">Hello!</p>
 </body>
 </html>
```

```html:javascriptでDOM操作①
 <!DOCTYPE html>
 <html lang="ja">
 <head>
   <meta charset="UTF-8">
   <title>javascript practice</title>
   <style>
    .myStyle {
      font-weight: bold;
      border: 1px solid gray;
    }
   </style>
 </head>
 <body>
   <h1>見出し</h1>
   <p id="msg">Hello!</p>
   <script>
     var e = document.getElementById('msg');
     e.textContent = 'hello!';
     e.style.color = 'red';
     e.className = 'myStyle';
   </script>
 </body>
 </html>
```

```html:javascriptでDOM操作②
 <!DOCTYPE html>
 <html lang="ja">
 <head>
   <meta charset="UTF-8">
   <title>javascript practice</title>
   <style>
    .myStyle {
      font-weight: bold;
      border: 1px solid gray;
    }
   </style>
 </head>
 <body>
   <h1>見出し</h1>
   <p id="msg">Hello!</p>
   <script>
     var e = document.getElementById('msg');
     e.textContent = 'hello!';
     e.style.color = 'red';
     e.className = 'myStyle';

     var greet = document.createElement('p'),
         text = document.createTextNode('hello world!');
     document.body.appendChild(greet).appendChild(text);
   </script>
 </body>
 </html>
```

# **イベントの設定**
- 要件
  - あるボタンを押す度に'hello world!'が追加される

```html:javascriptでDOM操作②
 <!DOCTYPE html>
 <html lang="ja">
 <head>
   <meta charset="UTF-8">
   <title>javascript practice</title>
   <style>
    .myStyle {
      font-weight: bold;
      border: 1px solid gray;
    }
   </style>
 </head>
 <body>
   <h1>見出し</h1>
   <p id="msg">Hello!</p>
   <button id="add">Click!</button>
   <script>
     var e = document.getElementById('msg');
     e.textContent = 'hello!';
     e.style.color = 'red';
     e.className = 'myStyle';

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

   </script>
 </body>
 </html>
```