JavaScript Cheat Sheet

By | October 1, 2021
JavaScript Cheat Sheet

JavaScript is the most powerful tool for front-end development. Nonetheless, with continuous updates and frameworks (and NodeJS) added to the roster, JS can also be used for the backend. This JavaScript cheat sheet tries to cover all the basics of JS.

We have also provided the code snippets pertaining to different JS concepts, which you can use if you get confused with the syntax. Moreover, this JavaScript cheat sheet aims to serve as the perfect reference for your JS learning.

Vamware

JavaScript Cheat Sheet

Let’s start this JavaScript cheat sheet with how we can include JavaScript in an HTML file. There are 2 ways of doing so:

1. Internal Including of Java Script

In this, we write the JavaScript code in the HTML pages itself inside the <script> tag.

Example

<script type="text/javascript">
// Code here     
   </script>

2. External Including of JavaScript

In this method, we create a JavaScript document with an extension of .js and include it in the HTML page.

Example

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

Comments in JavaScript

Comments are used to provide additional information about the code. In JS we use // to add a single line as a comment and /* to add multiple lines as a comment.

Example:

Single line comments - // single line comment
Multi-line comments - /* Multi line comment*/

Java Script Variable

In JS, we have 3 keywords that we can use to declare a variable:

Variable Description Code Snippet
var var keyword is used to assign a variable. As JavaScript is a dynamic language so we do not need to specify the specific data type. var num_1 = 10;
const This keyword is used to assign a variable. Once we assign a variable with const we cannot modify its value. const num_2 = 20;
let It is similar to const, but a let variable can be reassigned though it can’t be re-declared. let num_2 = 30;

 Data Types in JavaScript

Data type Code Snippet
Number var x = 100;
String var x = “100”;
Boolean var x =true;
null var x = null;
Object
var x = { name:  "Sam",
age:  "29"
}

Array in JavaScript

var arr = [1,2,3,4,5,6]

Array Methods

Methods Description
concat() Merges arrays to make a single array.
indexOf() To get the index of a value.
join() Combines all the elements of an array to make it a string.
lastIndexOf() Gives the last position of the array.
pop() Removes the last element from an array.
push() Adds a new element at the end of an array.
reverse() Reverses the array elements.
shift() Removes the first element of the array.
slice() Creates a new sequence of an array from the existing one.
sort() Sorts the elements of the array.
splice() Adds elements in a specified way and position.
toString() Converts elements to string.
unshift() Adds an element at the beginning of an array.
valueOf() Returns the position of the element.

Operators in JavaScript

In JS we have many types of operators, namely arithmetic, conditional, logical and bitwise operators. We use operators to perform a specific task, and the operators always need operands to work.

Arithmetic Operators

 Operators Operator Name Code snippet
+ Addition 1 + 2 //3
Subtraction 2 – 1 //1
* Multiplication 2*2   //2
/ Division 4/2  //2
% Modules or remainder 10%2  //0
++ Increment
x=2;
x++  //3
decrement
x=2;
3-- //2

Comparison: It returns a true or false value.

Operators Operator Name
== Equal to
=== Equal value and data type
!= Not equal
!== Not equal value and data type
> Greater than
< Less than
>= Greater than and equal to
<= Less than and equal to
? Ternary Operator

Logical Operator: It operates on a Boolean value.

Operators Operator Name
&& And
|| Or
! Not

Bitwise Operator:

Operators Operator Name
& AND statement
| OR statement
~ Not
^ XOR
<< Left shift
>> Right Shift
>>> Zero fill right shift

Function

Functions are used to perform a specific task.

User-defined functions in JavaScript:

function function_name (parameters)
{
//function task
}

Show Output on the Screen

In JS, we have some inbuilt functions to display output i.e. print something on the screen.

Output Function Description Code Snippet
alert() An alert box shows a box. alert(“Hello world”)
confirm() It is similar to alert but it returns value in the form of true or false. confirm(“Are you 18+”)
console.log() It is used to write information on the browser console. console.log(“Hello world”)
document.write() It can write in the HTML document. document.write(“Hello world”)
prompt() It is used to take data from the user. prompt(“Enter Your name”)

 JavaScript Global Functions

Global Functions Description
decodeURI() Decodes a Uniform Resource Identifier (URI).
decodeURIComponent() Decodes a URI component.
endodeURI() Encodes a URI into UTF-8.
encodeURIComponent() Encodes URI components.
eval() Evaluates the code present in the string format.
isFinite() Checks whether the value is finite or not.
isNaN() Evaluates whether the value is NaN or not.
Number() Converts the string into a number.
parseFloat() Parses the value and returns a floating-point number.
parseInt() Parses the value and returns an integer.

Loops in JavaScript

Loop is used to iterate over a block of statement again and again until a certain condition is fulfilled. In JS, we have 3 types of statements that can loop over a statement:

Loop Description Code Snippet
for We use for loop when we are certain about how many times we are going to iterate over a block of code. for( var i=0; i<10; i++)

{

console.log(i);

}

while When we are not certain about the number of iterations, we use the while loop. while(i<10)

{

console.log(i);

i++;

}

do while Even if the condition is false, the do while loop will execute at least 1 time. do

{

console.log(i)

i++;

}while(i<10)

break: Break is a keyword we use in a loop to stop and exit the cycle of the loop.

continue: Continue is used to skip a cycle of the loop.

JavaScript If…Else:

 if (condition)
{
    //code executed if the statement is true.
}
else
{
    //executes this code if the condition is false.
}

Twists

A string is a collection of characters inside the double or single inverted commas.

var string = "This is a string"
Escape Characters = \

String Methods

Methods Description
charAt() Returns the position of the character inside a string.
charCodeAt() Provides the Unicode of the character.
Concat() Joins two or more strings into one.
fromCharCode() Returns a string created from the specified sequence of UTF-16 code units.
indexOf() Returns the position of the character.
lastIndexOf() Provides the last index of the character if there is more than one same character in the string.
match() Retrieves the matches of a string against a search pattern.
replace() Replaces a text with another.
search() Returns the position of a text in a string.
slice() Extracts a sequence of string.
split() Splits the string into an array.
substr() Extracts a sequence of string depending on a specified number of characters.
substring() Similar to slice() but does not work with -ve indices
toLoweCase() Converts the string to lowercase.
toUpperCase() Converts the strings to uppercase.
valueOf() Returns the primitive value of a string object.

Regular Expression

Pattern Modifier Name
e Evaluate Replacement
i Case-insensitive matching
g Global matching
m Multiple line matching
s Treat string as a single line
x Allow comments and whitespace in the pattern.
u Ungreedy pattern

 

Brackets Description
[abc] Finds any characters from a, b and c.
[^abc] Searches any character except a, b and c.
[0-9] Finds any digit from 0 to 9.
[A-z] Finds any character from a to z and A to Z.
(a | b | c) Searches any of the alternatives separated with |.

Math and Numbers

NaN = Not A Number
Number Methods Description
toExponential() Returns a string with a rounded number written as an exponential notation.
toFixed() Returns the string of a number with a specified number of decimals.
toPrecision() A string of a number written with a specified length.
toString() Returns a number as a string.

 

Math Methods Description
abs(n) Returns a positive value of n.
acos(n) Arccosine of n in radians.
asin(n) Arcsine of n in radians.
atan(n) The arctangent of n in numeric value.
ceil(n) The rounded-up value of n.
cos(n) Cosine of n.
exp(n) Ex of n.
floor(n) Rounded down value of n.
log(n) The natural logarithm of n.
max(1,2,3,5,12,42) Returns the maximum value.
min(1,2,3,5,12,42) Returns the minimum value.
pow(n,m) n to the power m.
random() Returns a random value between 1 and 0.
sin(n) The sine of x in radians.
sqrt(n) The square root of n.
tan(n) The tangent of angle n.

Dates in JS

Date()= Returns the current date in the form of a new date object.

Date Declaration

Date(yyyy,mm,dd,HH,MM,SS,MS): to create a new date object.

yyyy = year
mm = month
dd = day
HH = Hours
MM = Minutes
SS = seconds
MS = Milliseconds
Date("2019-11-29") = Date declaration as a string
Date("2019");
Date("2019-06-23T12:00:00-09:45");
Date("June 23 2019");
Date("Jun 23 2019 07:45:00 GMT+0100 (Tokyo Time)");

Date Methods

Get Date Methods Description
getDate() Get the date from the date object.
getDay() Get the weekday.
getFullYear() Get the year.
getHours() Get the hour(0-23).
getMilliseconds() Get the millisecond.
getMinutes() Get the minutes.
getSeconds() Get the second.
getTime() Get the milliseconds since January 1, 1970.
getUTCDate() The day (date) of the month in the specified date according to the universal time (also available for day, month, fullyear, hours, minutes etc.).
getMonth() Get the month(0-11).

 

Set Date Methods Description
setDate() Sets the date.
setFullYear() Sets the year.
setHours Sets hours.
setMilliseconds Sets milliseconds.
setMinutes Sets minutes.
setMonths() Sets months.
setSeconds() Sets seconds.
setTime() Sets the time.
setUTCDate() Sets the day of the month for a specified date according to the universal time (also available for day, month, fullyear, hours, minutes etc.).

 DOM in JavaScript

Node Methods Description
appendChid() Adds a new child node to an element as the last child node.
cloneNode() Clones the HTML element.
compareDocumentPosition() Compares the document position of two elements.
getFeature() Returns an object that implements the API of a specified feature.
hasAttributes() True if element has attributes else it return false.
hasChildNode() Returns true if an element has any child nodes, otherwise false.
insertBefore() Inserts a new child node before a specified existing child node.
isDefaultNamespace() True for default specified namespaceURI else false.
removeChild() Removes a child node from an element.
replaceChild() Replaces a child node in an element.

 

Elements Methods Description
getAttribute() Returns the attribute value.
getAttributeNS() Returns the string value of the attribute with namespace.
getAttributeNode() Gets the specific attribute node.
getAttributeNodeNS() Returns the attribute node for the attribute with the given namespace.
getElementsByTagName() Gets all the elements with a specific tag name.
getElemetsByTagNameNS() Returns a live HTMLCollection of elements with a certain tag name belonging to the given namespace.
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.

JavaScript Events

Mouse
  • onclick
  • oncontextmenu
  • ondblclick
  • onmousedown
  • onmouseenter
  • onmouseeleave
  • onmousemove
  • onmouseover

Keyboard

  • onkeydown
  • onkeypress
  • onkeyup

Form

  • onblur
  • onchange
  • onfocus
  • onfocusin
  • onfocusout
  • oninput
  • oninvalid
  • onrest
  • onsearch
  • onselect
  • onsubmit

Drag

  • ondrag
  • ondragend
  • ondragenter
  • ondragleave
  • ondragover
  • ondragstart
  • ondrop

Media

  • onabort
  • oncanplay
  • oncanplaythrough
  • ondurationchange
  • onended
  • onerror
  • onloadeddata
  • onloadedmetadata
  • onloadstart
  • onpause
  • onplay
  • onplaying
  • onprogress
  • onratechange
  • onseeked
  • onseeking
  • onstalled
  • onsuspend
  • ontimeupdate
  • onvolumechange
  • onwaiting

Conclusion

With this JavaScript cheat sheet, we tried to cover all the basics of the popular web scripting language. You can use this as a reference whenever in doubt.

What do you think about the JavaScript cheat sheet? Let us know in the comments.

People are also reading:

Leave a Reply

Your email address will not be published. Required fields are marked *