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

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

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>