{"id":1053,"date":"2024-10-18T17:59:17","date_gmt":"2024-10-18T12:29:17","guid":{"rendered":"https:\/\/www.mrcoder701.com\/?p=1053"},"modified":"2024-10-18T17:59:19","modified_gmt":"2024-10-18T12:29:19","slug":"javascript-cheatsheet","status":"publish","type":"post","link":"https:\/\/www.mrcoder701.com\/2024\/10\/18\/javascript-cheatsheet\/","title":{"rendered":"JavaScript Cheatsheet"},"content":{"rendered":"

A JavaScript cheat sheet with the most important concepts, functions, methods, and more. A complete quick reference for beginners.<\/p>

JavaScript Basics<\/strong><\/h1>

On Page Script<\/h3>

Adding internal JavaScript to HTML<\/p>

<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
<<\/span>script<\/span> <\/span>type<\/span>=<\/span>"<\/span>text\/javascript<\/span>"<\/span>> \/\/JS code goes here <\/<\/span>script<\/span>><\/span><\/span><\/code><\/pre><\/div>
External JS File<\/h3>
Adding external JavaScript to HTML<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
<<\/span>script<\/span> <\/span>src<\/span>=<\/span>"<\/span>filename.js<\/span>"<\/span>><\/<\/span>script<\/span>><\/span><\/span>\n<\/span><\/code><\/pre><\/div>
Functions<\/h3>
JavaScript Function syntax<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
function<\/span> <\/span>functionName<\/span>() {<\/span><\/span>\n    <\/span>\/\/ function body <\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>
DOM Element<\/h3>
Changing content of a DOM Element<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
document.<\/span>getElementById<\/span>(<\/span>"<\/span>elementID<\/span>"<\/span>).innerHTML <\/span>=<\/span> <\/span>"<\/span>Hello World!<\/span>"<\/span>;<\/span><\/span><\/code><\/pre><\/div>
Output<\/h3>
This will print the value of a in JavaScript console<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
console.<\/span>log<\/span>(a);<\/span><\/span><\/code><\/pre><\/div>
\n  <\/path>\n<\/svg><\/div><\/div>
<\/p>
Conditional Statements<\/h1>
Conditional statements are used to perform operations based on some conditions.<\/p>
If Statement<\/h3>
The block of code to be executed, when the condition specified is true.<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
if<\/span> (condition) {<\/span><\/span>\n    <\/span>\/\/ block of code to be executed if the condition is true<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>
<\/p>
If-else Statement<\/h3>
If the condition for the if block is false, then the else block will be executed.<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
if<\/span> (condition) {<\/span><\/span>\n    <\/span>\/\/ block of code to be executed if the condition is true<\/span><\/span>\n} <\/span>else<\/span> {<\/span><\/span>\n    <\/span>\/\/ block of code to be executed if the condition is false<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>
<\/p>
Else-if Statement<\/h3>
A basic if-else ladder<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
if<\/span> (condition1) {<\/span><\/span>\n    <\/span>\/\/ block of code to be executed if condition1 is true<\/span><\/span>\n} <\/span>else<\/span> <\/span>if<\/span> (condition2) {<\/span><\/span>\n    <\/span>\/\/ block of code to be executed if the condition1 is false and condition2 is true<\/span><\/span>\n} <\/span>else<\/span> {<\/span><\/span>\n    <\/span>\/\/ block of code to be executed if the condition1 is false and condition2 is false<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>
<\/p>
Switch Statement<\/h3>
Switch case statement in JavaScript<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
switch<\/span> (expression) {<\/span><\/span>\n    <\/span>case<\/span> x:<\/span><\/span>\n        <\/span>\/\/ code block<\/span><\/span>\n        <\/span>break<\/span>;<\/span><\/span>\n    <\/span>case<\/span> y:<\/span><\/span>\n        <\/span>\/\/ code block<\/span><\/span>\n        <\/span>break<\/span>;<\/span><\/span>\n    <\/span>default<\/span>:<\/span><\/span>\n        <\/span>\/\/ code block<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>
\n  <\/path>\n<\/svg><\/div><\/div>
<\/p>
Iterative Statements (Loops)<\/h1>
Iterative statement facilitates programmer to execute any block of code lines repeatedly and can be controlled as per conditions added by the programmer.<\/p>
For Loop<\/h3>
For loop syntax in JavaScript<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
for<\/span> (initialization; condition; incrementation;) {<\/span><\/span>\n    <\/span>\/\/ code block to be executed<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>
<\/p>
Example:<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
for<\/span> (<\/span>let<\/span> i <\/span>=<\/span> <\/span>0<\/span>; i <\/span><<\/span> <\/span>5<\/span>; i<\/span>++<\/span>) {<\/span><\/span>\n    text <\/span>+=<\/span> <\/span>"<\/span>Iteration number: <\/span>"<\/span> <\/span>+<\/span> i <\/span>+<\/span> <\/span>"<\/span><br><\/span>"<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>
<\/p>
While Loop<\/h3>
Runs the code till the specified condition is true<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
while<\/span> (condition) {<\/span><\/span>\n    <\/span>\/\/ code block to be executed<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>
<\/p>
Do While Loop<\/h3>
A do while loop is executed at least once despite the condition being true or false<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
do<\/span> {<\/span><\/span>\n    <\/span>\/\/ run this code in block<\/span><\/span>\n    i<\/span>++<\/span>;<\/span><\/span>\n} <\/span>while<\/span> (condition);<\/span><\/span><\/code><\/pre><\/div>
\n  <\/path>\n<\/svg><\/div><\/div>
<\/p>
Strings<\/h1>
The string is a sequence of characters that is used for storing and managing text data.<\/p>
charAt method<\/h3>
Returns the character from the specified index.<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
str.<\/span>charAt<\/span>(<\/span>3<\/span>)<\/span><\/span><\/code><\/pre><\/div>
<\/p>
concat method<\/h3>
Joins two or more strings together.<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
str1.<\/span>concat<\/span>(str2)<\/span><\/span><\/code><\/pre><\/div>
<\/p>
index of method<\/h3>
Returns the index of the first occurrence of the specified character from the string else -1 if not found.<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
str.<\/span>indexOf<\/span>(<\/span>'<\/span>substr<\/span>'<\/span>)<\/span><\/span><\/code><\/pre><\/div>
<\/p>
match method<\/h3>
Searches a string for a match against a regular expression.<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
str.<\/span>match<\/span>(<\/span>\/<\/span>(<\/span>chapter <\/span>\\d<\/span>+<\/span>(<\/span>\\.<\/span>\\d<\/span>)<\/span>*<\/span>)<\/span>\/<\/span>i<\/span>;)<\/span><\/span><\/code><\/pre><\/div>
<\/p>
replace method<\/h3>
Searches a string for a match against a specified string or char and returns a new string by replacing the specified values.<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
str1.<\/span>replace<\/span>(str2)<\/span><\/span><\/code><\/pre><\/div>
<\/p>
search method<\/h3>
Searches a string against a specified value.<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
str.<\/span>search<\/span>(<\/span>'<\/span>term<\/span>'<\/span>)<\/span><\/span><\/code><\/pre><\/div>
<\/p>
split method<\/h3>
Splits a string into an array consisting of substrings.<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
str.<\/span>split<\/span>(<\/span>'<\/span>\\n<\/span>'<\/span>)<\/span><\/span><\/code><\/pre><\/div>
<\/p>
substring method<\/h3>
Returns a substring of a string containing characters from the specified indices.<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
str.<\/span>substring<\/span>(<\/span>0<\/span>,<\/span>5<\/span>)<\/span><\/span><\/code><\/pre><\/div>
\n  <\/path>\n<\/svg><\/div><\/div>
<\/p>
Arrays<\/h1>
The array is a collection of data items of the same type. In simple terms, it is a variable that contains multiple values.<\/p>
variable<\/h3>
Containers for storing data.<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
var<\/span> fruit <\/span>=<\/span> [<\/span>"<\/span>element1<\/span>"<\/span>, <\/span>"<\/span>element2<\/span>"<\/span>, <\/span>"<\/span>element3<\/span>"<\/span>];<\/span><\/span><\/code><\/pre><\/div>
<\/p>
concat method<\/h3>
Joins two or more arrays together.<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
concat<\/span>()<\/span><\/span><\/code><\/pre><\/div>
<\/p>
indexOf method<\/h3>
Returns the index of the specified item from the array.<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
indexOf<\/span>()<\/span><\/span><\/code><\/pre><\/div>
<\/p>
join method<\/h3>
Converts the array elements to a string.<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
join<\/span>()<\/span><\/span><\/code><\/pre><\/div>
<\/p>
pop method<\/h3>
Deletes the last element of the array.<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
pop<\/span>()<\/span><\/span><\/code><\/pre><\/div>
<\/p>
reverse method<\/h3>
This method reverses the order of the array elements.<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
reverse<\/span>()<\/span><\/span><\/code><\/pre><\/div>
<\/p>
sort method<\/h3>
Sorts the array elements in a specified manner.<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
sort<\/span>()<\/span><\/span><\/code><\/pre><\/div>
<\/p>
toString method<\/h3>
Converts the array elements to a string.<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
toString<\/span>()<\/span><\/span><\/code><\/pre><\/div>
<\/p>
valueOf method<\/h3>
returns the relevant Number Object holding the value of the argument passed<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
valueOf<\/span>()<\/span><\/span><\/code><\/pre><\/div>
\n  <\/path>\n<\/svg><\/div><\/div>
<\/p>
Number Methods<\/h1>
JS math and number objects provide several constant and methods to perform mathematical operations.<\/p>
toExponential method<\/h3>
Converts a number to its exponential form.<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
toExponential<\/span>()<\/span><\/span><\/code><\/pre><\/div>
<\/p>
toPrecision method<\/h3>
Formats a number into a specified length.<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
toPrecision<\/span>()<\/span><\/span><\/code><\/pre><\/div>
<\/p>
toString method<\/h3>
Converts an object to a string<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
toString<\/span>()<\/span><\/span><\/code><\/pre><\/div>
<\/p>
valueOf method<\/h3>
Returns the primitive value of a number.<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
valueOf<\/span>()<\/span><\/span><\/code><\/pre><\/div>
\n  <\/path>\n<\/svg><\/div><\/div>
<\/p>
Maths Methods<\/h1>
ceil method<\/h3>
Rounds a number upwards to the nearest integer, and returns the result<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
ceil<\/span>(x)<\/span><\/span><\/code><\/pre><\/div>
<\/p>
exp method<\/h3>
Returns the value of E^x.<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
exp<\/span>(x)<\/span><\/span><\/code><\/pre><\/div>
<\/p>
log method<\/h3>
Returns the logarithmic value of x.<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
log<\/span>(x)<\/span><\/span><\/code><\/pre><\/div>
<\/p>
pow method<\/h3>
Returns the value of x to the power y.<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
pow<\/span>(x,y)<\/span><\/span><\/code><\/pre><\/div>
<\/p>
random method<\/h3>
Returns a random number between 0 and 1.<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
random<\/span>()<\/span><\/span><\/code><\/pre><\/div>
<\/p>
sqrt method<\/h3>
Returns the square root of a number x<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
sqrt<\/span>(x)<\/span><\/span><\/code><\/pre><\/div>
\n  <\/path>\n<\/svg><\/div><\/div>
Dates<\/h1>
Date object is used to get the year, month and day. It has methods to get and set day, month, year, hour, minute, and seconds.<\/p>
Pulling Date from the Date object<\/h3>
Returns the date from the date object<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
getDate<\/span>()<\/span><\/span><\/code><\/pre><\/div>
<\/p>
Pulling Day from the Date object<\/h3>
Returns the day from the date object<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
getDay<\/span>()<\/span><\/span><\/code><\/pre><\/div>
<\/p>
Pulling Hours from the Date object<\/h3>
Returns the hours from the date object<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
getHours<\/span>()<\/span><\/span><\/code><\/pre><\/div>
<\/p>
Pulling Minutes from the Date object<\/h3>
Returns the minutes from the date object<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
getMinutes<\/span>()<\/span><\/span><\/code><\/pre><\/div>
<\/p>
Pulling Seconds from the Date object<\/h3>
Returns the seconds from the date object<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
getSeconds<\/span>()<\/span><\/span><\/code><\/pre><\/div>
<\/p>
Pulling Time from the Date object<\/h3>
Returns the time from the date object<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
getTime<\/span>()<\/span><\/span><\/code><\/pre><\/div>
\n  <\/path>\n<\/svg><\/div><\/div>
<\/p>
Mouse Events<\/h1>
Any change in the state of an object is referred to as an Event. With the help of JS, you can handle events, i.e., how any specific HTML tag will work when the user does something.<\/p>
click<\/h3>
Fired when an element is clicked<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
element.<\/span>addEventListener<\/span>(<\/span>'<\/span>click<\/span>'<\/span>, () <\/span>=><\/span> {<\/span><\/span>\n    <\/span>\/\/ Code to be executed when the event is fired<\/span><\/span>\n});<\/span><\/span><\/code><\/pre><\/div>
<\/p>
oncontextmenu<\/h3>
Fired when an element is right-clicked<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
element.<\/span>addEventListener<\/span>(<\/span>'<\/span>contextmenu<\/span>'<\/span>, () <\/span>=><\/span> {<\/span><\/span>\n    <\/span>\/\/ Code to be executed when the event is fired<\/span><\/span>\n});<\/span><\/span><\/code><\/pre><\/div>
dblclick<\/h3>
Fired when an element is double-clicked<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
element.<\/span>addEventListener<\/span>(<\/span>'<\/span>dblclick<\/span>'<\/span>, () <\/span>=><\/span> {<\/span><\/span>\n    <\/span>\/\/ Code to be executed when the event is fired<\/span><\/span>\n});<\/span><\/span><\/code><\/pre><\/div>
mouseenter<\/h3>
Fired when an element is entered by the mouse arrow<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
element.<\/span>addEventListener<\/span>(<\/span>'<\/span>mouseenter<\/span>'<\/span>, () <\/span>=><\/span> {<\/span><\/span>\n    <\/span>\/\/ Code to be executed when the event is fired<\/span><\/span>\n});<\/span><\/span><\/code><\/pre><\/div>
mouseleave<\/h3>
Fired when an element is exited by the mouse arrow<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
element.<\/span>addEventListener<\/span>(<\/span>'<\/span>mouseleave<\/span>'<\/span>, () <\/span>=><\/span> {<\/span><\/span>\n    <\/span>\/\/ Code to be executed when the event is fired<\/span><\/span>\n});<\/span><\/span><\/code><\/pre><\/div>
mousemove<\/h3>
Fired when the mouse is moved inside the element<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
element.<\/span>addEventListener<\/span>(<\/span>'<\/span>mousemove<\/span>'<\/span>, () <\/span>=><\/span> {<\/span><\/span>\n    <\/span>\/\/ Code to be executed when the event is fired<\/span><\/span>\n});<\/span><\/span><\/code><\/pre><\/div>
\n  <\/path>\n<\/svg><\/div><\/div>
<\/p>
Keyboard Events<\/h1>
keydown<\/h3>
Fired when the user is pressing a key on the keyboard<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
element.<\/span>addEventListener<\/span>(<\/span>'<\/span>keydown<\/span>'<\/span>, () <\/span>=><\/span> {<\/span><\/span>\n    <\/span>\/\/ Code to be executed when the event is fired<\/span><\/span>\n});<\/span><\/span><\/code><\/pre><\/div>
keypress<\/h3>
Fired when the user presses the key on the keyboard<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
element.<\/span>addEventListener<\/span>(<\/span>'<\/span>keypress<\/span>'<\/span>, () <\/span>=><\/span> {<\/span><\/span>\n    <\/span>\/\/ Code to be executed when the event is fired<\/span><\/span>\n});<\/span><\/span><\/code><\/pre><\/div>
keyup<\/h3>
Fired when the user releases a key on the keyboard<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
element.<\/span>addEventListener<\/span>(<\/span>'<\/span>keyup<\/span>'<\/span>, () <\/span>=><\/span> {<\/span><\/span>\n    <\/span>\/\/ Code to be executed when the event is fired<\/span><\/span>\n});<\/span><\/span><\/code><\/pre><\/div>
\n  <\/path>\n<\/svg><\/div><\/div>
<\/p>
Errors<\/h1>
Errors are thrown by the compiler or interpreter whenever they find any fault in the code, and it can be of any type like syntax error, run-time error, logical error, etc. JS provides some functions to handle the errors.<\/p>
try and catch<\/h3>
Try the code block and execute catch when err is thrown<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
try<\/span> {<\/span><\/span>\n    Block <\/span>of<\/span> code to <\/span>try<\/span><\/span>\n    }<\/span><\/span>\ncatch<\/span> (err) {<\/span><\/span>\n    Block <\/span>of<\/span> code to handle errors<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>
\n  <\/path>\n<\/svg><\/div><\/div>
<\/p>
Window Methods<\/h1>
Methods that are available from the window object<\/p>
alert method<\/h3>
Used to alert something on the screen<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
alert<\/span>()<\/span><\/span><\/code><\/pre><\/div>
blur method<\/h3>
The blur() method removes focus from the current window.<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
blur<\/span>()<\/span><\/span><\/code><\/pre><\/div>
setInterval<\/h3>
Keeps executing code at a certain interval<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
setInterval<\/span>(() <\/span>=><\/span> {<\/span><\/span>\n    <\/span>\/\/ Code to be executed<\/span><\/span>\n}, <\/span>1000<\/span>);<\/span><\/span><\/code><\/pre><\/div>
setTimeout<\/h3>
Executes the code after a certain interval of time<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
setTimeout<\/span>(() <\/span>=><\/span> {<\/span><\/span>\n    <\/span>\/\/ Code to be executed<\/span><\/span>\n}, <\/span>1000<\/span>);<\/span><\/span><\/code><\/pre><\/div>
close<\/h3>
The Window. close() method closes the current window<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
window.<\/span>close<\/span>()<\/span><\/span><\/code><\/pre><\/div>
confirm<\/h3>
The window.confirm() instructs the browser to display a dialog with an optional message, and to wait until the user either confirms or cancels<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
window.<\/span>confirm<\/span>(<\/span>'<\/span>Are you sure?<\/span>'<\/span>)<\/span><\/span><\/code><\/pre><\/div>
open<\/h3>
Opens a new window<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
window.<\/span>open<\/span>(<\/span>"<\/span>https:\/\/www.codewithharry.com<\/span>"<\/span>);<\/span><\/span><\/code><\/pre><\/div>
prompt<\/h3>
Prompts the user with a text and takes a value. Second parameter is the default value<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
var<\/span> name <\/span>=<\/span> <\/span>prompt<\/span>(<\/span>"<\/span>What is your name?<\/span>"<\/span>, <\/span>"<\/span>Harry<\/span>"<\/span>);<\/span><\/span><\/code><\/pre><\/div>
scrollBy<\/h3>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
window.<\/span>scrollBy<\/span>(<\/span>100<\/span>, <\/span>0<\/span>); <\/span>\/\/ Scroll 100px to the right<\/span><\/span><\/code><\/pre><\/div>
<\/p>
scrollTo<\/h3>
Scrolls the document to the specified coordinates.<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
window.<\/span>scrollTo<\/span>(<\/span>500<\/span>, <\/span>0<\/span>); <\/span>\/\/ Scroll to horizontal position 500<\/span><\/span><\/code><\/pre><\/div>
<\/p>
clearInterval<\/h3>
Clears the setInterval. var is the value returned by setInterval call<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
clearInterval<\/span>(var)<\/span><\/span><\/code><\/pre><\/div>
clearTimeout<\/h3>
Clears the setTimeout. var is the value returned by setTimeout call<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
clearTimeout<\/span>(var)<\/span><\/span><\/code><\/pre><\/div>
<\/p>
stop<\/h3>
Stops the further resource loading<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
stop<\/span>()<\/span><\/span><\/code><\/pre><\/div>
\n  <\/path>\n<\/svg><\/div><\/div>
<\/p>
Query\/Get Elements<\/h1>
The browser creates a DOM (Document Object Model) whenever a web page is loaded, and with the help of HTML DOM, one can access and modify all the elements of the HTML document.<\/p>
querySelector<\/h3>
Selector to select first matching element<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
document.<\/span>querySelector<\/span>(<\/span>'<\/span>css-selectors<\/span>'<\/span>)<\/span><\/span><\/code><\/pre><\/div>
querySelectorAll<\/h3>
A selector to select all matching elements<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
document.<\/span>querySelectorAll<\/span>(<\/span>'<\/span>css-selectors<\/span>'<\/span>, <\/span>...<\/span>)<\/span><\/span><\/code><\/pre><\/div>
getElementsByTagName<\/h3>
Select elements by tag name<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
document.<\/span>getElementsByTagName<\/span>(<\/span>'<\/span>element-name<\/span>'<\/span>)<\/span><\/span><\/code><\/pre><\/div>
getElementsByClassName<\/h3>
Select elements by class name<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
document.<\/span>getElementsByClassName<\/span>(<\/span>'<\/span>class-name<\/span>'<\/span>)<\/span><\/span><\/code><\/pre><\/div>
Get Element by Id<\/h3>
Select an element by its id<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
document.<\/span>getElementById<\/span>(<\/span>'<\/span>id<\/span>'<\/span>)<\/span><\/span><\/code><\/pre><\/div>
\n  <\/path>\n<\/svg><\/div><\/div>
<\/p>
Creating Elements<\/h2>
Create new elements in the DOM<\/p>
createElement<\/h3>
Create a new element<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
document.<\/span>createElement<\/span>(<\/span>'<\/span>div<\/span>'<\/span>)<\/span><\/span><\/code><\/pre><\/div>
createTextNode<\/h3>
Create a new text node<\/p>
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
document.<\/span>createTextNode<\/span>(<\/span>'<\/span>some text here<\/span>'<\/span>)<\/span><\/span><\/code><\/pre><\/div>
\n  <\/path>\n<\/svg><\/div><\/div>
A Note From the Author<\/h1>
Thank you so much for taking the time to read the story. If you found my article helpful and interesting, please share your thoughts in the comment section, and don\u2019t forget to share and clap<\/p>
Let\u2019s Get in Touch!<\/strong><\/p>