The Definitive Guide To JavaScript Part 2

Dealing with Dates in JavaScript

You can also work with and modify dates and time with JavaScript. This is the next chapter in the JavaScript cheat sheet.

Setting Dates

Date() — Creates a new date object with the current date and time
Date(2017, 5, 21, 3, 23, 10, 0) — Create a custom date object. The numbers represent a year, month, day, hour, minutes, seconds, milliseconds. You can omit anything you want except for a year and month.
Date("2017-06-23") — Date declaration as a string

Pulling Date and Time Values

getDate() — Get the day of the month as a number (1-31)
getDay() — The weekday as a number (0-6)
getFullYear() — Year as a four-digit number (yyyy)
getHours() — Get the hour (0-23)
getMilliseconds() — The millisecond (0-999)
getMinutes() — Get the minute (0-59)
getMonth() — Month as a number (0-11)
getSeconds() — Get the second (0-59)
getTime() — Get the milliseconds since January 1, 1970
getUTCDate() — The day (date) of the month in the specified date according to universal time (also available for day, month, full year, hours, minutes etc.)
parse — Parses a string representation of a date and returns the number of milliseconds since January 1, 1970

Set Part of a Date

setDate() — Set the day as a number (1-31)
setFullYear() — Sets the year (optionally month and day)
setHours() — Set the hour (0-23)
setMilliseconds() — Set milliseconds (0-999)
setMinutes() — Sets the minutes (0-59)
setMonth() — Set the month (0-11)
setSeconds() — Sets the seconds (0-59)
setTime() — Set the time (milliseconds since January 1, 1970)
setUTCDate() — Sets the day of the month for a specified date according to universal time (also available for day, month, full year, hours, minutes etc.)

DOM Mode

The DOM is the Document Object Model of a page. It is the code of the structure of a webpage. JavaScript comes with a lot of different ways to create and manipulate HTML elements (called nodes).

Node Properties

attributes — Returns a live collection of all attributes registered to an element
baseURI — Provides the absolute base URL of an HTML element
childNodes — Gives a collection of an element’s child nodes
firstChild — Returns the first child node of an element
lastChild — The last child node of an element
nextSibling — Gives you the next node at the same node tree level
nodeName —Returns the name of a node
nodeType — Returns the type of a node
nodeValue — Sets or returns the value of a node
ownerDocument — The top-level document object for this node
parentNode — Returns the parent node of an element
previousSibling — Returns the node immediately preceding the current one
textContent — Sets or returns the textual content of a node and its descendants

Node Methods

appendChild() — Adds a new child node to an element as the last child node
cloneNode() — Clones an HTML element
compareDocumentPosition() — Compares the document position of two elements
getFeature() — Returns an object which implements the APIs of a specified feature
hasAttributes() — Returns true if an element has any attributes, otherwise false
hasChildNodes() — Returns true if an element has any child nodes, otherwise false
insertBefore() — Inserts a new child node before a specified, existing child node
isDefaultNamespace() — Returns true if a specified namespaceURI is the default, otherwise false
isEqualNode() — Checks if two elements are equal
isSameNode() — Checks if two elements are the same node
isSupported() — Returns true if a specified feature is supported on the element
lookupNamespaceURI() — Returns the namespace URI associated with a given node
lookupPrefix() — Returns a DOMString containing the prefix for a given namespace URI if present
normalize() — Joins adjacent text nodes and removes empty text nodes in an element
removeChild() — Removes a child node from an element
replaceChild() — Replaces a child node in an element

Element Methods

getAttribute() — Returns the specified attribute value of an element node
getAttributeNS() — Returns string value of the attribute with the specified namespace and name
getAttributeNode() — Gets the specified attribute node
getAttributeNodeNS() — Returns the attribute node for the attribute with the given namespace and name
getElementsByTagName() — Provides a collection of all child elements with the specified tag name
getElementsByTagNameNS() — Returns a live HTMLCollection of elements with a certain tag name belonging to the given namespace
hasAttribute() — Returns true if an element has any attributes, otherwise false
hasAttributeNS() — Provides a true/false value indicating whether the current element in a given namespace has the specified attribute
removeAttribute() — Removes a specified attribute from an element
removeAttributeNS() — Removes the specified attribute from an element within a certain namespace
removeAttributeNode() — Takes away a specified attribute node and returns the removed node
setAttribute() — Sets or changes the specified attribute to a specified value
setAttributeNS() — Adds a new attribute or changes the value of an attribute with the given namespace and name
setAttributeNode() — Sets or changes the specified attribute node
setAttributeNodeNS() — Adds a new namespaced attribute node to an element

Working with the User Browser

Besides HTML elements, JavaScript is also able to take into account the user browser and incorporate its properties into the code.

Window Properties

closed — Checks whether a window has been closed or not and returns true or false
defaultStatus — Sets or returns the default text in the status bar of a window
document — Returns the document object for the window
frames — Returns all <iframe> elements in the current window
history — Provides the History object for the window
innerHeight — The inner height of a window’s content area
innerWidth — The inner width of the content area
length — Find out the number of <iframe> elements in the window
location — Returns the location object for the window
name — Sets or returns the name of a window
navigator — Returns the Navigator object for the window
opener — Returns a reference to the window that created the window
outerHeight — The outer height of a window, including toolbars/scrollbars
outerWidth — The outer width of a window, including toolbars/scrollbars
pageXOffset — Number of pixels the current document has been scrolled horizontally
pageYOffset — Number of pixels the document has been scrolled vertically
parent — The parent window of the current window
screen — Returns the Screen object for the window
screenLeft — The horizontal coordinate of the window (relative to the screen)
screenTop — The vertical coordinate of the window
screenX — Same as screenLeft but needed for some browsers
screenY — Same as screenTop but needed for some browsers
self — Returns the current window
status — Sets or returns the text in the status bar of a window
top — Returns the topmost browser window

Window Methods

alert() — Displays an alert box with a message and an OK button
blur() — Removes focus from the current window
clearInterval() — Clears a timer set with setInterval()
clearTimeout() — Clears a timer set with setTimeout()
close() — Closes the current window
confirm() — Displays a dialogue box with a message and an OK and Cancel button
focus() — Sets focus to the current window
moveBy() — Moves a window relative to its current position
moveTo() — Moves a window to a specified position
open() — Opens a new browser window
print() — Prints the content of the current window
prompt() — Displays a dialogue box that prompts the visitor for input
resizeBy() — Resizes the window by the specified number of pixels
resizeTo() — Resizes the window to a specified width and height
scrollBy() — Scrolls the document by a specified number of pixels
scrollTo() — Scrolls the document to specified coordinates
setInterval() — Calls a function or evaluates an expression at specified intervals
setTimeout() — Calls a function or evaluates an expression after a specified interval
stop() — Stops the window from loading

Screen Properties

availHeight — Returns the height of the screen (excluding the Windows Taskbar)
availWidth — Returns the width of the screen (excluding the Windows Taskbar)
colorDepth — Returns the bit depth of the color palette for displaying images
height — The total height of the screen
pixelDepth — The color resolution of the screen in bits per pixel
width — The total width of the screen

JavaScript Events

Events are things that can happen to HTML elements and are performed by the user. The programming language can listen for these events and trigger actions in the code. No JavaScript cheat sheet would be complete without them.

Mouse

onclick — The event occurs when the user clicks on an element
oncontextmenu — User right-clicks on an element to open a context menu
ondblclick — The user double-clicks on an element
onmousedown — User presses a mouse button over an element
onmouseenter — The pointer moves onto an element
onmouseleave — Pointer moves out of an element
onmousemove — The pointer is moving while it is over an element
onmouseover — When the pointer is moved onto an element or one of its children
onmouseout — User moves the mouse pointer out of an element or one of its children
onmouseup — The user releases a mouse button while over an element

Keyboard

onkeydown — When the user is pressing a key down
onkeypress — The moment the user starts pressing a key
onkeyup — The user releases a key

Frame

onabort — The loading of a media is aborted
onbeforeunload — Event occurs before the document is about to be unloaded
onerror — An error occurs while loading an external file
onhashchange — There have been changes to the anchor part of a URL
onload — When an object has loaded
onpagehide — The user navigates away from a webpage
onpageshow — When the user navigates to a webpage
onresize — The document view is resized
onscroll — An element’s scrollbar is being scrolled
onunload — Event occurs when a page has unloaded

Form

onblur — When an element loses focus
onchange — The content of a form element changes (for <input>, <select> and <textarea>)
onfocus — An element gets focus
onfocusin — When an element is about to get focus
onfocusout — The element is about to lose focus
oninput — User input on an element
oninvalid — An element is invalid
onreset — A form is reset
onsearch — The user writes something in a search field (for <input="search">)
onselect — The user selects some text (for <input> and <textarea>)
onsubmit — A form is submitted

Drag

ondrag — An element is dragged
ondragend — The user has finished dragging the element
ondragenter — The dragged element enters a drop target
ondragleave — A dragged element leaves the drop target
ondragover — The dragged element is on top of the drop target
ondragstart — User starts to drag an element
ondrop — Dragged element is dropped on the drop target

Clipboard

oncopy — User copies the content of an element
oncut — The user cuts an element’s content
onpaste — A user pastes the content in an element

Media

onabort — Media loading is aborted
oncanplay — The browser can start playing media (e.g. a file has buffered enough)
oncanplaythrough — The browser can play through media without stopping
ondurationchange — The duration of the media changes
onended — The media has reached its end
onerror — Happens when an error occurs while loading an external file
onloadeddata — Media data is loaded
onloadedmetadata — Metadata (like dimensions and duration) are loaded
onloadstart — The browser starts looking for specified media
onpause — Media is paused either by the user or automatically
onplay — The media has been started or is no longer paused
onplaying — Media is playing after having been paused or stopped for buffering
onprogress — The browser is in the process of downloading the media
onratechange — The playing speed of the media changes
onseeked — User is finished moving/skipping to a new position in the media
onseeking — The user starts moving/skipping
onstalled — The browser is trying to load the media but it is not available
onsuspend — The browser is intentionally not loading media
ontimeupdate — The playing position has changed (e.g. because of fast forward)
onvolumechange — Media volume has changed (including mute)
onwaiting — Media paused but expected to resume (for example, buffering)

Animation

animationend — A CSS animation is complete
animationiteration — CSS animation is repeated
animationstart — CSS animation has started

Other

transitionend — Fired when a CSS transition has completed
onmessage — A message is received through the event source
onoffline — The browser starts to work offline
ononline — The browser starts to work online
onpopstate — When the window’s history changes
onshow — A <menu> element is shown as a context menu
onstorage — A Web Storage area is updated
ontoggle — The user opens or closes the <details> element
onwheel — Mouse wheel rolls up or down over an element
ontouchcancel — Screen-touch is interrupted
ontouchend — User’s finger is removed from a touch-screen
ontouchmove — A finger is dragged across the screen
ontouchstart — A finger is placed on the touch-screen

Errors

When working with JavaScript, different errors can occur. There are several ways of handling them:

try — Lets you define a block of code to test for errors
catch — Set up a block of code to execute in case of an error
throw — Create custom error messages instead of the standard JavaScript errors
finally — Lets you execute code, after try and catch, regardless of the result

Error Name Values

JavaScript also has a built-in error object. It has two properties:

name — Sets or returns the error name
message — Sets or returns an error message in a string from

The error property can return six different values as its name:

EvalError — An error has occurred in the eval() function
RangeError — A number is “out of range”
ReferenceError — An illegal reference has occurred
SyntaxError — A syntax error has occurred
TypeError — A type error has occurred
URIError — An encodeURI() error has occurred

Explicit Conversions

The simplest way to perform an explicit type conversion is to use the Boolean(), Number(), and String() functions.

Any value other than nullor undefinedhas atoString() method.

n.toString(2);

binary

n.toString(8);

octal

n.toString(16);

hex

let n = 123456.789;

n.toFixed(0)

“123457”

n.toFixed(5)

“123456.78900”

n.toExponential(3)

“1.235e+5”

n.toPrecision(7)

“123456.8”

n.toPrecision(10)

“123456.7890”

parseInt("3 blind mice")

parseFloat(" 3.14 meters")

3.14

parseInt("-12.34")

-12

parseInt("0xFF")

255

Types, Values, and Variables

Links

Resource

URL

MDN

https://developer.mozilla.org/en-US/docs/Web/JavaScript

Run Snippets

https://developers.google.com/web/tools/chrome-devtools/javascript/snippets

Explicit Conversions

The simplest way to perform an explicit type conversion is to use the Boolean(), Number(), and String() functions.

Any value other than nullor undefinedhas atoString() method.

n.toString(2);

binary

n.toString(8);

octal

n.toString(16);

hex

let n = 123456.789;

n.toFixed(0)

“123457”

n.toFixed(5)

“123456.78900”

n.toExponential(3)

“1.235e+5”

n.toPrecision(7)

“123456.8”

n.toPrecision(10)

“123456.7890”

parseInt("3 blind mice")

parseFloat(" 3.14 meters")

3.14

parseInt("-12.34")

-12

parseInt("0xFF")

255

parseInt("0xff")

255

parseInt("-0XFF")

-255

parseInt("0.1")

parseInt(".1")

NaN: integers can’t start with “.”

parseFloat("$72.47")

NaN: numbers can’t start with “$”

Supply Radix

parseInt("11", 2)

parseInt("ff", 16)

255

parseInt("077", 8)

Conversion Idioms

x + ""

String(x)

+x

Number(x)

x-0

Number(x)

!!x

Boolean(x)

Destructuring Assignment

let [x,y] = [1,2];

let x=1, y=2

[x,y] = [x + 1,y + 1];

x = x + 1, y = y + 1

[x,y] = [y,x];

Swap the value of the two variables

Destructuring assignment makes it easy to work with functions that return arrays of values:

let [r,theta] = toPolar(1.0, 1.0);

function toPolar(x, y) {

return [Math.sqrt(x*x+y*y), Math.atan2(y,x)];

}

Variable destructuring in loops:

let o = { x: 1, y: 2 };

for(const [name, value] of Object.entries(o)) {

console.log(name, value); // Prints "x 1" and "y 2"

}

Note: The Object.entries() method returns an array of a given object's own enumerable string-keyed property [key, value] pairs, in the same order as that provided by a for...in loop. (The only important difference is that a for...in loop enumerates properties in the prototype chain as well).

The list of variables on the left can include extra commas to skip certain values on the right

[,x,,y] = [1,2,3,4];

x == 2; y == 4

Note: the last comma does not stand for a value.

To collect all unused or remaining values into a single variable when destructuring an array, use three dots (...)before the last variable name on the left-hand side

let [x, ...y] = [1,2,3,4];

y == [2,3,4]

let [first, ...rest] = "Hello";

first == “H”; rest ==[“e”,”l”,”l”,”o”]

Destructuring assignment can also be performed when the righthand side is an object value.

let transparent = {r: 0.0, g: 0.0, b: 0.0, a: 1.0};

let {r, g, b} = transparent;

r == 0.0; g == 0.0; b == 0.0

const {sin, cos, tan} = Math;

sin=Math.sin, cos=Math.cos, tan=Math.tan

Expressions and Operators

In JavaScript, the values nulland undefinedare the only two values that do not have properties. In a regular property access expression using . or [], you get a TypeError if the expression on the left evaluates to nullor undefined. You can use ?. and ?.[] syntax to guard against errors of this type.

You can also invoke a function using ?.() instead of ().

With the new ?.() invocation syntax, if the expression to the left of the ?. evaluates to null or undefined, then the entire invocation expression evaluates to undefinedand no exception is thrown.

Write the function invocation using ?.(), knowing that invocation will only happen if there is actually a value to be invoked

function square(x, log) {

log?.(x); // Call the function if there is one

return x * x;

}

Note that expression x++ is not always the same as x = x + 1.The ++ operator never performs string concatenation: it always converts its operand to a number and increments it. If x is the string "1", ++x is the number 2, butx + 1 is the string "11".

JavaScript objects are compared by reference, not by value. An object is equal to itself, but not to any other object. If two distinct objects have the same number of properties, with the same names and values, they are still not equal. Similarly, two arrays that have the same elements in the same order are not equal to each other.

NaNvalue is never equal to any other value, including itself! To check whether a value x is NaN, use x !==, or the global isNaN() function.

If both values refer to the same object, array, or function, they are equal. If they refer to different objects, they are not equal, even if both objects have identical properties.

Evaluating Expressions

JavaScript has the ability to interpret strings of JavaScript source code, evaluating them to produce a value.

eval("3+2")

Because of security issues, some web servers use the HTTP “Content-Security-Policy” header to disableeval() for an entire website.

First-Defined (??)

The first-defined operator ?? evaluates to its first defined operand: if its left operand is not null and not undefined, it returns that value.

a ?? b is equivalent to (a !== null && a !== undefined) ? a : b

?? is a useful alternative to ||. The problem with this idiomatic use is that zero, the empty string, and false are all falsyvalues that may be perfectly valid in some circumstances. In this code example, if maxWidthis zero, that value will be ignored. But if we change the || operator to ??, we end up with an expression where zero is a valid value.

let max = maxWidth || preferences.maxWidth || 500;

let max = maxWidth ?? preferences.maxWidth ?? 500;

delete Operator

Deleting an array element leaves a “hole” in the array and does not change the array’s length. The resulting array is sparse.

void Operator

Using the void operator makes sense only if the operand has side effects.

let counter = 0;

const increment = () => void counter++;

increment()

undefined

counter