JavaScript Cheatsheet

JavaScript Basics
Set of JavaScript basic syntax to add, execute and write basic programming paradigms in Javascript

On Page Script
Adding internal JavaScript to HTML

External JS File
Adding external JavaScript to HTML

Functions
JavaScript Function syntax
JavaScript Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/javascript-cheatsheet

Conditional statements are used to perform operations based on some conditions.

If Statement
The block of code to be executed, when the condition specified is true.

if (condition) {
// block of code to be executed if the condition is true
}

If-else Statement
If the condition for the if block is false, then the else block will be executed.

if (condition) {
// block of code to be executed if the condition is true
} else {
// block of code to be executed if the condition is false
}

Else-if Statement
A basic if-else ladder

if (condition1) {
// block of code to be executed if condition1 is true
} else if (condition2) {
// block of code to be executed if the condition1 is false and condition2 is true
} else {
// block of code to be executed if the condition1 is false and condition2 is fals
}

Switch Statement

2 of 14 23-07-2021, 08:41
JavaScript Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/javascript-cheatsheet

Iterative statement facilitates programmer to execute any block of code lines repeatedly and can be co
as per conditions added by the programmer.

For Loop
For loop syntax in javascript

for (statement 1; statement 2; statement 3) {

// code block to be executed
}

While Loop
Runs the code till the specified condition is true

while (condition) {
// code block to be executed
}

Do While Loop
A do while loop is executed at least once despite the condition being true or false

do {
// run this code in block
i++;
} while (condition);

Strings
The string is a sequence of characters that is used for storing and managing text data.

charAt method

3 of 14 23-07-2021, 08:41
JavaScript Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/javascript-cheatsheet

str.indexOf('substr')

match method
Searches a string for a match against a regular expression.

str.match(/(chapter \d+(\.\d)*)/i;)

replace method
Searches a string for a match against a specified string or char and returns a new string by replacing
specified values.

str1.replace(str2)

search method
Searches a string against a specified value.

str.search('term')

split method
Splits a string into an array consisting of substrings.

str.split('\n')

substring method
Returns a substring of a string containing characters from the specified indices.

4 of 14 23-07-2021, 08:41
JavaScript Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/javascript-cheatsheet

Containers for storing data.

var fruit = ["element1", "element2", "element3"];

concat method
Joins two or more arrays together.

concat()

indexOf method
Returns the index of the specified item from the array.

indexOf()

join method
Converts the array elements to a string.

join()

pop method
Deletes the last element of the array.

pop()

reverse method
This method reverses the order of the array elements.

5 of 14 23-07-2021, 08:41
JavaScript Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/javascript-cheatsheet

valueOf method
returns the relevant Number Object holding the value of the argument passed

valueOf()

Number Methods
JS math and number objects provide several constant and methods to perform mathematical operatio

toExponential method
Converts a number to its exponential form.

toExponential()

toPrecision method
Formats a number into a specified length.

toPrecision()

toString method
Converts an object to a string

toString()

valueOf method
Returns the primitive value of a number.

6 of 14 23-07-2021, 08:41
JavaScript Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/javascript-cheatsheet

log method
Returns the logarithmic value of x.

log(x)

pow method
Returns the value of x to the power y.

pow(x,y)

random method
Returns a random number between 0 and 1.

random()

sqrt method
Returns the square root of a number x

sqrt(x)

Dates

7 of 14 23-07-2021, 08:41
JavaScript Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/javascript-cheatsheet

Pulling Hours from the Date object

Returns the hours from the date object

getHours()

Pulling Minutes from the Date object

Returns the minutes from the date object

getMinutes()

Pulling Seconds from the Date object

Returns the seconds from the date object

getSeconds()

Pulling Time from the Date object

Returns the time from the date object

getTime()

Mouse Events
Any change in the state of an object is referred to as an Event. With the help of JS, you can handle ev
i.e., how any specific HTML tag will work when the user does something.

click
Fired when an element is clicked

8 of 14 23-07-2021, 08:41
JavaScript Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/javascript-cheatsheet

element.addEventListener('dblclick', ()=>{
// Code to be executed when the event is fired
});

mouseenter
Fired when an element is entered by the mouse arrow

element.addEventListener('mouseenter', ()=>{
// Code to be executed when the event is fired
});

mouseleave
Fired when an element is exited by the mouse arrow

element.addEventListener('mouseleave', ()=>{
// Code to be executed when the event is fired
});

mousemove
Fired when the mouse is moved inside the element

element.addEventListener('mousemove', ()=>{
// Code to be executed when the event is fired
});

Keyboard Events

9 of 14 23-07-2021, 08:41
JavaScript Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/javascript-cheatsheet

element.addEventListener('keypress', ()=>{
// Code to be executed when the event is fired
});

keyup
Fired when the user releases a key on the keyboard

element.addEventListener('keyup', ()=>{
// Code to be executed when the event is fired
});

Errors
Errors are thrown by the compiler or interpreter whenever they find any fault in the code, and it can be
type like syntax error, run-time error, logical error, etc. JS provides some functions to handle the errors

try and catch

Try the code block and execute catch when err is thrown

try {
Block of code to try
}
catch(err) {

10 of 14 23-07-2021, 08:41
JavaScript Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/javascript-cheatsheet

blur()

setInterval
Keeps executing code at a certain interval

setInterval(() => {
// Code to be executed
}, 1000);

setTimeout
Executes the code after a certain interval of time

setTimeout(() => {
// Code to be executed
}, 1000);

close
The Window. close() method closes the current window

window.close()

confirm
The window.confirm() instructs the browser to display a dialog with an optional message, and to wait u
user either confirms or cancels

window.confirm('Are you sure?')

11 of 14 23-07-2021, 08:41
JavaScript Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/javascript-cheatsheet

window.scrollBy(100, 0); // Scroll 100px to the right

scrollTo
Scrolls the document to the specified coordinates.

window.scrollTo(500, 0); // Scroll to horizontal position 500

clearInterval
Clears the setInterval. var is the value returned by setInterval call

clearInterval(var)

clearTimeout
Clears the setTimeout. var is the value returned by setTimeout call

clearTimeout(var)

stop
Stops the further resource loading

stop()

12 of 14 23-07-2021, 08:41
JavaScript Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/javascript-cheatsheet

document.querySelectorAll('css-selectors', ...)

getElementsByTagName
Select elements by tag name

document.getElementsByTagName('element-name')

getElementsByClassName
Select elements by class name

document.getElementsByClassName('class-name')

Get Element by Id
Select an element by its id

document.getElementById('id')

Creating Elements
Create new elements in the DOM

createElement
Create a new element

document.createElement('div')

createTextNode

13 of 14 23-07-2021, 08:41
JavaScript Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/javascript-cheatsheet

You need to be logged in to post a comment!

Comments
No comments to display. Be the first person to post a comment!

Copyright © 2020-2021 CodeWithHarry.com

14 of 14 23-07-2021, 08:41