JavaScript Cheat Sheet for Web Development?

<script type="text/javascript">

 //Add JS code here

</script>

<script src="filename.js"></script>

One line comments: //

Multi-line comments: /* comment here */

var: The most common variable. Can be reallocated but only accessible within a function.

Const: Can’t be reassigned and not accessible before appearing within the code.

let: Just like const, however, let variable can be reassigned

Numbers: var age = 25

Variables: var x

Text (strings): var a = "init"

Operations: var b = 1 + 2 + 3

True or False statements: var c = true

Constant numbers: const PI = 3.14

Objects: var name = {firstName:"John", lastName:”Wick"}

var student = {

    firstName:"John",

    lastName:"Wick",

    age:25,

    nationality:"British"

};

var dogs = ["Poodle", " Bulldog ", "Labrador"];

concat( ): Join various arrays into one

indexOf( ): Returns the first position of given element at which it appears in an array

join( ): Combine elements of an array into a single string and return it

lastIndexOf( ): Gives the last position of given element at which it appears in an array

pop( ): Eliminates the last element of an array

push( ): Add new element at the end

reverse( ): Sort elements in a descending order

shift( ): Remove the first element of an array

slice( ): Pulls a copy of a portion of an array into a new array

sort( ): Sorts elements alphabetically

splice( ): Adds elements in a specified way and position

toString( ): Converts elements to strings

unshift( ): Adds a new element to the beginning

valueOf( ): Returns the primitive value of the specified object

+ : Addition

- : Subtraction

*: Multiplication

/ : Division

(...) : Grouping. Operations within brackets are executed first

%: Modulo (remainder )

++ : Postfix Increment

-- :  Postfix Decrement

== : Equal to

=== : Both equal value and type

!= : Not equal

!== : Neither equal value nor equal type

> , < : Greater than, Less than

>= : Greater than or equal to

<= : Less than or equal to

?: Ternary operator

&& : Logical AND

|| : Logical OR

!: Logical NOT

& : AND

| : OR

~ : NOT

^ : XOR

<< : Left Shift

>> : Right Shift

>>> : Zero Fill Right Shift

function name(parameter1, parameter2, parameter3) {

 // function role

}

alert() : Display data in an alert box

confirm() : Opens up a yes/no dialogue box and returns true/false depending on user response

console.log() : Transcribes information to the browser console

document.write() : Transcribes directly to the HTML document

prompt() : User input dialogue box

decodeURI() : Decodes a Uniform Resource Identifier (URI) produced by encodeURI

decodeURIComponent() : Decodes a URI component

encodeURI() : Encodes URI into UTF-8

encodeURIComponent() : Same as above but for URI components

eval() : Evaluates JS code presented as a string

isFinite() : Defines if a passed value is a finite number

isNaN() : Defines whether a value is NaN or otherwise

Number() : Returns a number transformed from its argument

parseFloat() : Analyzes an argument and returns a floating-point number

parseInt() : Analyzes its argument and returns an integer

for (before loop; condition for loop; execute after loop) {

    // what to do within the loop

}

for : The most used way to create a loop in JS

while : Lay down conditions under which a loop executes

do while : Similar to the while loop but it executes at least once

break : Used to stop and exit the cycle at specific conditions

continue : Skip parts of the cycle if specific conditions are fulfilled

if (condition) {

    // what to do if condition is fulfilled

} else {

    // what to do if condition is not fulfilled

}

var person = "John Wick";

\' : Single quote

\" : Double quote

\\ : Backslash

\b : Backspace

\f : Form feed

\n : New line

\r : Carriage return

\t : Horizontal tabulator

\v : Vertical tabulator

\charAt() : Returns a character to a specified position

charCodeAt() : Provides the Unicode of a character at that position

concat() : Concatenates (connects) two or more strings

fromCharCode() : Returns a string created from the specified sequence of UTF-16 code

indexOf() : Provides the position of the first incidence of a specified text within a string

lastIndexOf() : Same as above but with the last occurrence

match() : Retrieves the matches of a string against a search pattern

replace() : Find and replace specific text in a string

search() : Executes a search for a matching text

slice() : Extracts a section of a string as a new string

split() : Splits a string object into an collection of strings

substr() :  Similar to slice() but extracts a substring

substring() : Like slice() but can’t accept negative guides

toLowerCase() : Change strings to lower case

toUpperCase() : Change strings to upper case

valueOf() : Returns the original value of a string object

e : Evaluates a replacement

i : Carry out case-insensitive matching

g : Carry out global matching

m : Performs multiple line matching

s : Treats strings as a single line

x : Allow comments in the pattern

. : Find a single character

\w : Word character

\W : Non-word character

\d : A digit

\D : A non-digit character

\s : Whitespace character

\S : Non-whitespace character

\b : A match at the beginning or end of a word

\B : A match not at the beginning or end of a word

\0 : NUL character

\n : A new line character

\f : Form feed character

\r : Carriage return character

\t : Tab character

\v : Vertical tab character

\xxx : The character specified by an octal number xxx

\xdd : Character specified by a hexadecimal number dd

\uxxxx : Unicode character specified by a hexadecimal number XXXX

n+ : Matches any string with at least one n

n* : String with zero or more occurrences of n

n? : String with zero or one occurrence of n

n{X} : String with a sequence of X n’s

n{X,Y} : Strings that contain a sequence of X to Y n’s

n{X,} : Matches any string with a sequence of at least X n’s

n$ : String with n at the end of it

^n : String with n at the beginning of it

?=n : Any string that is followed by a specific string n

?!n : String that is not followed by a specific string ni

MAX_VALUE : Maximum numeric value

MIN_VALUE : Smallest positive numeric value

NaN : “Not-a-Number” value

NEGATIVE_INFINITY : Negative Infinity value

POSITIVE_INFINITY : Positive Infinity value

toExponential() : Returns the string with a rounded number

toFixed() : Returns the string with a specified number of decimals

toPrecision() : String of a number written with a specified length

toString() : Returns a number as a string

valueOf() : Returns a number as a number

E : Euler’s number

LN2 : Natural logarithm of 2

LN10 : Natural logarithm of 10

LOG2E : Base 2 logarithm of E

LOG10E : Base 10 logarithm of E

PI : The number PI

SQRT1_2 : Square root of 1/2

SQRT2 : The square root of 2

abs(x) : Returns the positive value of x

acos(x) : The arccosine of x

asin(x) : Arcsine of x

atan(x) : Arctangent of x as a numeric value

ceil(x) : Value of x rounded up to its nearest integer

cos(x) : The cosine of x in radians

exp(x) : Value of Ex

floor(x) : The value of x rounded down to its nearest integer

pow(x,y) : X to the power of Y

sin(x) : The sine of x (x is in radians)

tan(x) : Tangent of an angle

Date() : Creates a date object with the current date and time

Date(2020, 7, 13, 2, 45, 10, 0) : Custom date object with a year, month, day, hour, minutes, seconds, milliseconds

Date("2020-07-13") : Date as a string

getDate() : Day of the month (1-31)

getDay() :  Weekday as a number (0-6)

getFullYear() : Year (yyyy)

getHours() : Hour (0-23)

getMinutes() : Minute (0-59)

getMonth() :  Month as a number (0-11)

getUTCDate() : The day (date) of the month according to universal time

closed : Whether a window has been closed or not

defaultStatus : Sets or returns the default text in the status

frames : All <iframe> elements in the current window

history : Provides the History object for the window

innerHeight : Inner height of content area

innerWidth : Inner width of content area

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

outerHeight : Outer height including toolbars/scrollbars

outerWidth : Outer width including toolbars/scrollbars

pageXOffset : Number of pixels horizontally

pageYOffset : Number of pixels vertically

parent : Parent window of the current window

screenLeft : Horizontal coordinate of the window

screenTop : Vertical coordinate of the window

self : Returns the current window

alert() : Displays an alert box

close() : Closes the current window

confirm() : Dialogue box with an OK and Cancel button

open() : Opens new browser window

print() : Prints the content

prompt() : Dialogue box for visitor’s input

stop() : Stops the window from loading

onclick :When the user clicks on an element

oncontextmenu : User right-clicks on an element

ondblclick : Double click on an element

onmousedown : User presses a mouse button over an element

onmouseenter : Pointer moves onto an element

onmouseleave : Pointer moves away from an element

onmouseup : User releases a mouse button while over an element

onkeydown : User pressing a key down

onkeypress : When user starts pressing a key

onkeyup : User releases a key

onabort : Loading of a media is terminated

onbeforeunload : It occurs before the document is about to be unloaded

onerror : Error while loading an external file

onhashchange : Changes to the anchor part of a URL

onload : Object has loaded

onpagehide : User go away from a webpage

onpageshow : User comes to a webpage

onresize : Document view is resized

onscroll : Element’s scrollbar is scrolled

onunload : It occurs when a page has unloaded

onblur : An element loses focus

onchange : The content of a form element changes

onfocus : Element gets focus

onfocusin : When an element is about to get focus

onfocusout : Element is about to lose focus

oninput : User input on an element

oninvalid : Element is invalid

onreset : A form is reset

onsearch : User enters something in a search field

onselect : Text selection by user

onsubmit : Form is submitted

ondrag : When element is dragged

ondragend : User has completed dragging the element

ondragenter : Dragged element gets a drop target

ondragleave : Dragged element leaves the drop target

ondragover : Dragged element comes on top of the drop target

ondragstart : User starts to drag an element

ondrop : Dragged element is dropped on the target

oncopy : Content of an element copied by the user

oncut : User cuts an element’s content

onpaste : Content is pasted by the user

onabort : Loading is cancelled

oncanplay : Media can start playing by browser

ondurationchange : Duration of the media changes

onerror : While loading an external file error occurs

onloadeddata : Date of media is loaded

onloadstart :  Browser looks for specified media

onpause : Media is paused

onplay : The media is on play

onprogress : Media is downloading by browser

onseeking : User starts moving / skipping

onsuspend : Browser is deliberately not loading media

ontimeupdate : Media playing position has changed

onvolumechange : Change in media volume (including mute)

onwaiting : Media paused but likely to resume (e.g., buffering)

animationend : CSS animation has been completed

animationiteration : CSS animation has been repeated

animationstart : CSS animation has started

transitionend : Dismissed on a CSS transition completion

onmessage : Message is received via event source

onoffline : Browser starts working offline

ononline : Browser starts working online

onpopstate : Window’s history changes

onshow : A <menu> element is displayed as a context menu

onstorage : Web Storage area has been updated

ontoggle : The <details> element is opened or closed by user

onwheel : Mouse wheel scrolls up or down above an element

ontouchcancel : Screen-touch has been disturbed

ontouchend : User’s finger is detached from a touch-screen

ontouchmove : A finger has been dragged on the screen

ontouchstart : Touch of finger is placed on the screen

try : Allows you set up a block of code for testing errors

catch : Define a block of code to execute in case of an error

throw : Instead of the standard JS errors it creates custom error messages

finally : Allows you execute code irrespective of the result, after try and catch method

JS also has a built-in error object with a couple of properties:

name : Sets or yields the name of error

message : Sets or returns an error message in a form of string

The error property can result in six different values:

EvalError : Error occurs in the eval() function

RangeError : Number is “out of range”

ReferenceError : An prohibited reference has happened

SyntaxError : A syntax error has happened

TypeError : A typo error has happened

URIError : encodeURI() error has occurred