100日後にエンジニアになるキミ - 23日目 - Javascript - JavaScriptの基礎6

今日もJavaScriptの続きになります。

前回のはこちら

[100日後にエンジニアになるキミ - 22日目 - Javascript - JavaScriptの基礎5](https://qiita.com/otupy/items/a1c55fe356406e36e3b3)

## 例外処理(try , catch)

プログラム上では様々なエラーが発生します。
エラーが発生すると、通常はそこでプログラムが停止してしまいます。

プログラムを動かし続けるには、こういったエラーに対処する必要があります。
例外処理はこういったエラーに対処するための構文です。

**例外処理の構文**

```js
try {
    処理;
} catch (e) {
    例外時の処理;
} finally {
    最後に行う処理;
}
```

エラーが発生しそうな部分を`try{}catch`で囲みます。


```js
try {
    a3=a10;
} catch (e) {
    console.log(e);
} finally {
    console.log('finish');
}
```
ReferenceError: a10 is not defined at <anonymous>:2:5
finish


エラーが発生すると、`catch`の部分のブロックが実行されます。
`finally`のブロックはエラーが有っても無くても最後に実行される部分になり
省略することが可能です。



**エラーの種類**

| 種類（オブジェクト名） | エラー内容 |
|:--|:--|
| Error | 一般的なエラー |
| TypeError | 型が間違っているエラー |
| ReferenceError | 存在しない変数が参照されたエラー |
| SyntaxError | 文法エラー |
| URIError | URIが間違っているエラー |
| RangeError | 値が配列内に存在しない、または値が許容範囲にないエラー |
| MediaError | Video APIまたはAudio APIに関するエラー |
| FileError | FileSystem APIに関するエラー |
| EvalError | evalメソッドが不適切に使用されたエラー |
| InternalError | JavaScriptエンジンの内部エラー |

プログラム上、文法などが間違っている場合はエラーになります。
このようにたくさんのエラーがあるので、エラーが発生する場合は
例外処理を行う必要が出てくる場合があります。

## ビルトイン関数

ビルトイン関数とは、プログラム言語に初めから備わっている関数になります。
通常「関数」は定義しなければ使えませんが、初めから定義されているものもあります。

主なビルトイン関数を見ていきましょう。

**変換**

引数のデータ型を変更することができる。

`Number(引数)`        : 文字列を数値に変換する
`parseInt(引数 , 10)` : 文字列を10進数に変換する
`parseInt(引数 , 16)` : 文字列を16進数に変換する
`parseInt(引数 , 2) ` : 文字列を2進数に変換する
`parseInt(引数 , 8) ` : 文字列を8進数に変換する
`parseFloat(引数)   ` : 文字列を小数点値に変換する

```js
console.log(Number('10'));
console.log(parseInt('11',10));
console.log(parseInt('11',16));
console.log(parseInt('11',2));
console.log(parseInt('11',8));
console.log(parseFloat('3.14'));
```
10
11
17
3
9
3.14

`String(引数) `: 文字列に変換する
`encodeURIComponent(文字列) `: URLエンコードする
`decodeURIComponent(文字列) `: URLデコードする

```js
let st = String(123);
console.log(st);
let url = 'http://sample.com/?a=';
let euc = encodeURIComponent(url+st);
console.log(euc);
let duc = decodeURIComponent(euc);
console.log(duc);
```
123
http%3A%2F%2Fsample.com%2F%3Fa%3D123
http://sample.com/?a=123

**文字列**

文字列に対して、色々な操作をすることができる。

`文字列.includes(検索文字列)  `  : 文字列に検索文字列があるか検索結果を返す
`文字列.startsWIth(検索文字列 )` : 検索文字で始まるかの判定結果を返す
`文字列.endsWIth(検索文字列 )   `: 検索文字で終わるかの判定結果を返す
`文字列.replace(検索文字,置換文字)   `: 文字の検索文字を置換文字にする
`文字列.slice(開始値(省略可),終了値)` : 文字列を開始終了位置で切り出す
`文字列.split(区切り文字)            `: 文字列を区切り文字で配列に分割する
`文字列.toLowerCase()               `: 文字列を小文字に変換する
`文字列.toUpperCase()                `: 文字列を大文字に変換する
`文字列.trim()                       `: 文字列の両端の空白を削除する


```js
let str1 = 'abcde';
let str2 = 'a,b,c';
let str3 = 'ABCDE';
let str4 = ' a c ';
console.log(str1.includes('bcd'));
console.log(str1.startsWith('abc'));
console.log(str1.endsWith('cde'));
console.log(str1.replace('a','x'));
console.log(str1.slice(1,4));
console.log(str2.split(','));
console.log(str3.toLowerCase());
console.log(str1.toUpperCase());
console.log(str4.trim());
```
true
true
true
xbcde
bcd
["a", "b", "c"]
abcde
ABCDE
a c


**数学**

数学的な計算をするための関数です。

`Math.abs(数値)      `: 数値の絶対値を返す
`Math.min(配列)      `: 配列の最小の値を返す
`Math.max(配列)     ` : 配列の最大の値を返す
`Math.random()      ` : 0以上1未満の乱数を返す
`Math.round(数値,桁)` : 小数点を桁で四捨五入(誤差が大きいので注意)

```js
let num1 = 123.45;
let arr1 = [1,2,3,4,5];
console.log(Math.abs(-1*num1));
console.log(Math.min(...arr1));
console.log(Math.max(...arr1));
console.log(Math.random());
console.log(Math.round(num1,2));
```
123.45
1
5
0.4373924234156359
123

HTMLとの兼ね合いもあり、数値計算や文字列操作は
よく使う関数なので覚えておきましょう。

## HTML要素の取得(document)

「document」オブジェクトはブラウザに読み込まれたウェブページを指し
「document」オブジェクトを用いるとHTML要素へアクセスできる。


**要素取得の書き方**


`document.head`                           : head要素を取得
`document.body`                           : body要素を取得
`document.cookie`                         : cookieを取得
`document.getElementById(要素名)`         : id属性の値で要素を取得
`document.getElementsByName(要素名)`      : name属性の値で要素を複数取得
`document.getElementsByClassName(要素名)` : class属性の値で要素を複数取得

「document」から`getElementById`で取得したものは「element(要素)」となる

`要素.textContent`:テキスト
`要素.className`:クラス名
`要素.id`:id名
`要素.name`:name名
`要素.content`:content
が取得できる。

`getElements`は複数形になるので配列が返ってくるので注意


```sample.html
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      onload = function(){
        let id = document.getElementById('id1');
        let na = document.getElementsByName('name1');
        let cl = document.getElementsByClassName('class1');
        console.log(id.textContent);
        console.log(na[0].textContent);
        console.log(cl[0].textContent);
      };
    </script>
  </head>
  <body>
    <div id='id1'>div1</div>
    <div name='name1'>div2</div>
    <div class='class1'>div3</div>
  </body>
</html>
```
div1
div2
div3



## HTML要素へ出力

JavaScriptから要素を探して、要素の内容を変更することができます。

`document.write(値)       `: 値を出力する
`element.innerHTML   = 値 `: テキストを値に書き換える(タグ出力する)
`element.textContent = 値 `: テキストを値に書き換える(テキスト出力する)
※ `document.write`の使用は推奨されていない

```html
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      onload = function(){
        let cl4 = document.getElementsByClassName('class4')[0];
        let cl5 = document.getElementsByClassName('class5')[0];

        cl4.innerHTML = '<h1>abcde</h1>';
        cl5.textContent = '<h2>abcde</h2>';
      };
    </script>
  </head>
  <body>
    <div class='class4'>div4</div>
    <div class='class5'>div5</div>
  </body>
</html>
```



<img width="270" alt="スクリーンショット 2020-04-12 17.20.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379626/77dc7c68-4869-0edb-521f-620510d46978.png">

上の例ではHTML読み込み時にタグの要素を書き換えています。
`innerHTML`ではタグ出力
`textContent`では文字出力になるので
うまく使い分けましょう。

## オブジェクトのデータ取得

JavaScriptではブラウザー内の
様々なオブジェクトからデータを取得することができます。

ブラウザーでの表示領域は`window`
表示されている画面は`screen`
ブラウザー情報は'navigator'
HTML文書の情報は`document`


`document.cookie       `:クッキーを取得
`document.documentElement.clientWidth `:ドキュメントの幅を取得
`navigator.userAgent   `:UserAgentを取得
`navigator.language    `:ブラウザの対応言語
`screen.width          `:画面の横幅を取得
`screen.height         `:画面の高さを取得
`window.outerWidth     `:表示領域の横幅を取得
`window.outerHeight    `:表示領域の高さを取得

```js
console.log(document.documentElement.clientWidth);
console.log(navigator.userAgent);
console.log(navigator.language);
console.log(screen.width);
console.log(screen.height);
console.log(window.outerWidth);
console.log(window.outerHeight);
```

150
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.122 Safari/537.36
ja
2560
1440
772
1010

サイトを見ている人のブラウザー情報などから、JavaScriptを用いて
様々な操作を行うことができるので、概念を押さえておきましょう。


## まとめ

JavaScriptではブラウザーやページから
様々な情報をオブジェクトとして受け取り
それを操作することができるので、概念と使い方を押さえておきましょう。

データ型を操作したり制御文で条件分岐させたりするので
今までの基礎編の文法を全て押さえておきましょう。


君がエンジニアになるまであと77日

## 作者の情報
乙pyのHP：
http://www.otupy.net/

Youtube：
https://www.youtube.com/channel/UCaT7xpeq8n1G_HcJKKSOXMw

Twitter：
https://twitter.com/otupython