连续复制
一键复制
一键打包

JavaScript Cheat Sheet

Typed on 20170624 based on my manuscript.
This cheat Sheet is collected from book - DOM Scripting Web Design with JavaScript and the Document Object Model

Array and Associate Array

// Array
var arr = Array();
var arr = new Array();
var arr = ["string", 0, false];

// Associate Array
var dict = Array();
dict['a'] = 'value for key a';

  • Array is also Object

Object

var obj = Object();
obj.a = "value for attribute a";

var obj = { name: "Johann Huang", age: 24 }

Loop

for (var i = 0; i < arr.length; i ++) { }
arr.forEach();

Variable Scopes

  • Global

  • Function

var a = 1;
function() {
    global a;
}

Element Node

  • Attribute Node

  • Text Node

JS to generate HTML

  • .innerHTML works for HTML5 but not for W3C DOM

document.write("<p>this is a paragraph.</p>");

Methods

  • .createElement

  • .appendChild

  • .createTextNode

  • .parentElement.insertBefore(newElem, targetElem)

  • .parentNode

  • .nextSibling

  • .getElementById

  • .getElementsByTagName, .getElementsByTagName('*')

  • .getElementsByClass, .getElementsByClass('class1 class2')

  • .getAttribute

  • .setAttribute

  • .removeAttribute

  • .addEventListerner()

Attributes

  • .childNodes

  • .firstChild

  • .lastChild

  • .nodeType, 1 for element | 2 for attribute | 3 for text

  • .nodeValue

  • .parentNode

  • .nextSibling

  • .previousSibling

  • .style.property

  • .className

DOM Forms

  • forms

  • form.element.length

  • element.value

  • form.onsubmit

Position and Overflow

  • fixed, inherit, absolute, relative

  • scroll, hidden

asynchronous

  • setTimeout()

  • clearTimeout()

Link

onclick = "afunction(this); return false;"

psudo-protocal

javascript:;
#

window.open(url, name, feature);

Page Load Event

window.onload = function () {};
$.ready();

Element Event

.onclick = function () {}; // use `this` to reference the element
.onkeypress = function () {};

Type Convertion

parseInt()
parseFloat()

Math.ceil()
Math.floor()
Math.round()

.toLowerCase()

JS Old Browser Handling

  • Modernizr

Canvas

Ai -> Canvas

var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(), ctx.bezierCureTo(), ctx.lineTo()
ctx.closePath()

ctx.fill()
ctx.lineWidth =
ctx.strokeStyle =
ctx.stroke()

HTML5

  • video, audio

  • control

  • duration

  • paused

  • play

  • loadeddata

  • ended

  • input | type

  • email

  • url

  • date

  • number

  • range

  • search

  • tel

  • color

  • input | property

  • autocomplete

  • autofocus

  • form

  • min, max, step

  • pattern

  • placeholder

  • required

  • table, thead, tbody, tr, td, th

CSS Import

  • layout.css, @import url(layout.css)

  • color.css

  • typography,css

  • global.js