【JavaScript入門】基本的な「単語」と「文法」の理解のための忘備録

ざっくり言うと、「ブラウザを操作するためのプログラミング言語」

HTMLやCSSだけではできないことをするために使う

HTML/CSSで作られた静的なページに対して、JavaScriptで動きをつけていく


- ブラウザを操作する
- HTMLやCSSにはできないことをするために使う
- HTMLやCSSをリアルタイムに書き換える




#コンソールに書いてみる

```javascript
console.log('hogehoge');

//□□は○○を△△せよ
//consoleはhogehogeをlogせよ
```
![スクリーンショット 0001-10-20 午後3.40.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448787/b9ba1cf2-ee5c-e9bb-a12c-8294b025ad50.png)

□□オブジェクト
指示を出す相手

○○をメソッド
オブジェクトに対して具体的な実行内容を指示する部分

△△をパラメータ
指示に必要な詳細情報、何を出力するのか？



#JavaScriptを書く場所

- HTML`</body>`の直前
- javascriptファイルをHTMLに読み込ませる

**外部ファイルに書いて読み込ませるのが一般的**


```html
<script>
console.log('hogehoge');
</script>
</body>
```

##新しいJavaScriptとして実行する

ブラウザには、ストリクトモード（strict mode）というものがある

古いJavaScriptを実行するモードと、新しいJavaScriptを実行するモードがあり、この新しいJavaScriptを実行するモードがストリクトモードと呼ばれる。

新しいES6のコードは、ストリクトモードでなくとも動作するが、ミスを防ぐための検出機能などがうまく動かない場合もあるらしい。

JavaScriptの先頭には、ストリクトモードの記述をする必要がある

```javascript
'use strict';
```


```html
<script>
'use strict';
</script>
```


#コメントの書き方

CSSと一緒

```javascript
//単一行コメント

/*
複数行
にまたがる
コメント
*/
```

#アラート　ダイアログボックスを表示させる

alertメソッド

```javascript
'use strict';
window.alert('アラート文');
```

![スクリーンショット 0001-10-20 午後3.42.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448787/bb85f6d3-aeb5-1cca-05a6-123312240211.png)


##確認ダイアログボックス

同じダイアログボックスでも、ユーザーに確認を促すもの
confirmメソッドは、alertメソッドとは違って**戻り値**を返す。

confirmはOKかキャンセルをユーザーにクリックさせ、どちらかのボタンをクリックした時に、trueかfalseの値を返してくる。

クリックされたボタンで次の動きを変えることが可能

```javascript
'use strict';
if(window.confirm('ダイアログボックス')){
  //true[ok]の場合
} else {
  //false[キャンセル]の場合
}
```


#HTMLを書き換える

HTMLを書き換えるには、

HTMLの要素を取得 `getElementById`
要素のコンテンツを書き換える `textContent`

これらを使ってHTML要素のテキストを書き換えていく。

```html
<h1 id="change">JavaScript入門</h1>
```

```javascript
'use strict';
document.getElementById('change').textContent = 'Ruby入門';
```

これで、HTMLのテキストが書き換えらる。



#変数と定数

##変数とは

戻り値を後の処理でも使いたい場合、変数に定義しておけば便利。
JavaScriptの処理の高速化にもなる。



- 変数を定義
- 変数にデータを代入
- 変数からデータを読み取る
- 変数のデータを書き換える

###変数を定義する
まず、変数を定義する。

変数の定義方法については、色々ある。

|予約語|説明|
|:-:|:-:|
|なし|意図しない結果になることがある。あまり推奨されない|
|var|ES5で主流の書き方。現在でも使われている|
|let|ES2015で追加された。varより少し制限あるが、副作用が少ない|
|const|ES2015で追加された。一度しか代入できない定数で使う。値を書き替えてはいけないことを明示したい時に使う|

```javascript
let answer
```
answerという名前の変数を定義
変数の名前はわかりやすいものを使う


###変数にデータを代入

変数に保存しておきたいデータを入れる
代入演算子（＝）を使う。

「＝」は、`右側のデータを左側に代入する`と言う意味


```javascript
let answer = window.confirm('ダイアログボックス');
```

confirmメソッドは、戻り値があるので、
ユーザーの操作によって、変数に格納される値が変わります。

例えば、


```javascript
let answer = window.confirm('ダイアログボックス');

//ユーザーがOKを選択した場合

let answer = 'true';
//trueが変数に代入される
```


###変数からデータを読み取る

```javascript
console.log(answer);
```
###変数のデータを書き換える

```javascript
answer = 'no';
```

ただし、変数がそのデータを保持していられるのは、そのページが表示されている間だけ。


##変数名の付け方
無条件に好きな名前をつけられるわけではないので注意

変数名の命名条件
- アンダースコア(_)、ダラー($)、数字が利用可能。(-)などは使えない
- 半角スペースは使えない
- 1文字目に数字は使えない
- 予約語は使えない

[JavaScript　予約語一覧](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Reserved_Words)

**条件ではないが、気をつけるポイント**

- 1文字の変数名にしない
- 変数名は英単語でつける

##定数とは
定義した時に代入したデータを後から書き換えることができない変数のこと。
定数の場合は、letではなく`const`を使う


#条件分岐(if)

```javascript
if(条件A){
    //Aがtrueだった場合の処理
} else if (条件B) {
    //Bがtrueだった場合の処理
} else {
   //どちらともfalseだった場合の処理
}
```


#比較演算子

|演算子|意味|
|:--|---|
|a === b|aとbが同じ|
|a !== b|aとbが同じでない|
|a < b|aがbより小さい|
|a <= b|aがb以下|
|a > b|aがbより大きい|
|a >= b|aがb以上|



#参考リンク
- [JavaScript|MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript
)
- [JavaScript|リファレンス](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference
)