HTML5認定試験のLevel.2に合格したので、要点メモを共有します。
API編に続いて、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進数

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

無名関数

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()

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() パラメータで指定された属性の削除

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() 指定した処理を一定時間後に一度だけ実行

<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>

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

javascript

変数の型

数値型への型変換

8/16進数

無名関数

Event

Windowイベント

Form Event

Keyboard Event

Mouse Event

Touch Event

カスタムイベント

DOM

プロパティ

ノード作成

属性操作

ウィンドウオブジェクト

プロパティ

メソッド