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>