HTML5 プロフェッショナル認定試験 Level.2の要点[Javascript編]

HTML5認定試験のLevel.2に合格したので、要点メモを共有します。
[API編](https://qiita.com/tfuruya/items/ffb5709b4cceef3672a7)に続いて、Javascript編。

# javascript
## 変数の型
|型名|内容|参照型|
|--------|--------|--------|
|Undefined型|値が未定義||
|Null型|値がNull||
|Boolean型|true or flase ||
|String型|文字列||
|Number|数字（123, 22.91）||
|Object| オブジェクト|◯|
|Reference Specification| 参照|◯|
|List Specification|Array型とも|◯|
|Completion|ステート状態(break, continue, return, throw) |◯|

### 数値型への型変換
|型名|結果|
|--------|--------|
|Undefined|NaN|
|Null|+0|
|Boolean|true-->1, false-->+0|
|String|8, 10, 16進数のみ数値、それ以外はNaN|
|Object|オブジェクト.toNumber()で数値を取得|

### 8/16進数
```javascript
i10 = 10
i8 = 067; //8進数は0をつける
i16 = 0xa1; //16進数は0xをつける

```

## 無名関数
```javascript
var triangle =  function(base, height) {
  var area = base * height /2;
  return area;
}

// 宣言以降のみ呼び出し可能
console.log(triangle(2, 3))
// >>> 3
```

## Event
- イベントハンドラ
 - 一つしか設定できない
 - `<button type=submit onsubmit="window.alert("submit")>`
 - document.body.onclick=function(){alert()}
- イベントリスナ
 - 複数設定可能
 - `document.getElementById('test').addEventLinstener("click", function(){window.alert("OK")}, false)`


### Windowイベント
- onafterprint
- onbeforeprint
- onbeforeunload Webページ遷移直前
- onblur フォーカスが外れた
- onerror Javascriptエラー発生
- onfocus フォーカスされた
- onhashchange URLの＃以降が変更
- onload Webページ読み込み完了
- onmessage メッセージ受信
- onoffline
- ononline
- onpagehide 元のページが隠れた
- onpageshow Webページ読み込み完了（キャッシュも対象）
- onpopstate 戻る進むボタンで履歴取り出し
- onredo
- onresize
- onstorage ローカル・セッションストレージが変更された
- onundo 
- onunload


### Form Event
- oblur フォーカスが外れた
- onchange 変更された
- onfocus フォーカスされた
- onformcahnge フォームの値が変更された
- onforminput フォームの値が入力された
- oninput テキスト要素が入力された
- oninvalid 要素の無効な値が入力された
- onselect 選択された
- onsubmit 送信ボタン(type=submit)が押された

### Keyboard Event
- onkeydown
- onkeypress キーが押して離された
- onkeyup キーが離された

### Mouse Event
- onclick
- oncntextmenu
- onblclick ダブルクリック
- ondrag
- ondragend　ドラッグが終わった
- ondragenter ドロップ目標にドラッグされた
- ondragleave ドロップ目標からドラッグが外れた
- ondragover ドロップ目標にドラッグされている
- ondragstart
- ondrop ドロップ目標にドロップされた
- onmousedown ボタンが押された
- onmousemove マウスポインタが移動された
- onmouseout マウスポインタが要素から外れた
- onmouseover マウスポインタが要素上に入った
- onmouseup ボタンを離した
- onmousewheel マウスホイールを回転させた
- onscroll スクロールバーを操作した

### Touch Event
- ontouchstart 指が置かれた
- ontouchmove 指がドラッグされた
- ontouchend 指が離れた

### カスタムイベント
カスタムイベントを呼び出すには、引数としてEventオブジェクトを指定して、dispatchEvent()を実行する。
`btn.dispatchEvent(new Event(‘customEvent’));`


## DOM
- getElementById()
- getElementsByTagName()
 - リスト
- getElementsByClassName()
 - リスト
- parentNode 親要素
- previousSibiling 兄弟要素で前にある要素
- nextSibiling 兄弟要素で次にある要素
- firstChild 最初の子要素
- lastChild 最後の子要素

### プロパティ
|プロパティ|意味|
|--------|--------|
|attributes[]|ノードの属性リスト|
|childNodes[]|子ノードのリスト|
|className|クラス名|
|clientWidth|要素内部幅|
|clientLeft|要素左ボーダー幅|
|clientTop|要素上ボーダー幅|
|dir|テキスト方向; ltr/rtr|
|id|ID名|
|interHTML|ノード内のHTML要素|
|interText|ノード内のプレーンテキスト|
|textContent|ノード内のプレーンテキスト|
|lang|言語コード|
|localName|ローカル名（XML固有＜タグ名：ローカル名＞）|
|namespaceURI|名前空間のURI|
|nodeName|ノード名|
|nodeType|ノード型; 要素：１、属性：２、テキストノード：３|
|nodeValue|ノードの値|
|offsetHeight|要素高さ|
|offsetWidth|要素幅|
|scrollWidth|スクロールビュー幅|
|scrollHeight|スクロールビュー高さ|
|style|style属性の宣言オブジェクト|
|tagName|要素名|
|tabIndex|タブインデックス番号|
|title|タイトル属性|

### ノード作成
- createElement()
- createAttribute()
- createTextNode()
- createCDATASection()
CDATAセクションのノード作成
- createComment()
コメントノード作成
- createEntityReference()
実態を参照するノードを作成
- createProcessingInstruction()
処理命令のノードを作成
- createDocumentFragment()
ドキュメントフラグメントのノードを作成

上記は`appencChild()　最後の仔`か`insertBefore()　第２パラメータで指定したノード直前に挿入`で既存ノードに追加
また、ノード削除は`removeChild()`

```javascript
function appendElement() {
  var divs = document.getElementsByTagName('div');
  var div = divs.item(0);
  var p = document.createElement('p');
  p.innerHTML = "append paragraph";
  div.appendChild(p);
}

function deleteElement() {
  var divs = document.getElementsByTagName('div');
  var div = divs.item(0);
  div.removeChild(div.firstChild);
}
```

### 属性操作
- `createAttribute()` 属性ノード生成
- `setAttributeNode()` 　引数（属性ノード）を追加
- `hasAttribute()` 　パラメータに指定された属性有無を返却
- `removeAttribute()` パラメータで指定された属性の削除

```javascript
function addAttribute() {
  var attrStyle = document.createAttribute('style')
  attrStyle.nodeValue = 'background-color: #cf6; width: 300px; '
  var target = document.getElementById('target')
  target.setAttributeNode(attrStyle);
}

function delAttribute() {
  var target = document.getElementById('target')
  target.deleteAttribute('style');
}
```

## ウィンドウオブジェクト
### プロパティ
- closed
- defaultStatus
- document
- frames
- history
- innerHeight
- innerWidth
- length
- location
- name
- navigator
- opener　親ウィンドウオブジェクト
- outerHeight ウィンドウ外側高さ
- outerWidth ウィンドウ外側幅
- pageXOffset
- pageYOffset
- parent 親ウィンドウオブジェクト（フレーム使用時）
- screenTop スクリーン上のウィンドウ縦位置
- screenX スクリーン上のX座標
- self

### メソッド
- alert() 警告ダイアログ
- close() 閉じる
- confirm() 確認ダイアログ
- open() ウィンドウ生成
- postMessage(msg, targetOrigin)
 - クロスドメイン間通信
 - targetOriginは、`スキーム＋ホスト名＋ポート番号`
- print()
- prompt()　パラメータで指定されたメッセージを入力ダイアログに出力
- setInterval() 指定した処理を定期的に実行
 - ms単位で指定
- setTimeout() 指定した処理を一定時間後に一度だけ実行

```javascript
<script>
window.onload = function() {
  var disp = document.getElementsByTagName('p').item(0);
  var intervalTimer = window.setInterval(
    function() {
      var currentDate = new Date()
      // ロケールに合わせた現在時刻を表示
      disp.innerHTML = cuurentDate.toLocaleTimeString();
    }, 1000)
}
</script>
```