JavaScript Cheatsheet
☰Fullscreen
Table of Content:
- JavaScript Basics
- On Page Script
- External JS File
- Functions
- DOM Element
- Output
- Conditional Statements
- If Statement
- If-else Statement
- Else-if Statement
- Switch Statement
- Iterative Statements (Loops)
- For Loop
- While Loop
- Do While Loop
- Strings
- charAt method
- concat method
- index of method
- match method
- replace method
- search method
- split method
- substring method
- Arrays
- variable
- concat method
- indexOf method
- join method
- pop method
- reverse method
- sort method
- toString method
- valueOf method
- Number Methods
- toExponential method
- toPrecision method
- toString method
- valueOf method
- Maths Methods
- ceil method
- exp method
- log method
- pow method
- random method
- sqrt method
- Dates
- Pulling Date from the Date object
- Pulling Day from the Date object
- Pulling Hours from the Date object
- Pulling Minutes from the Date object
- Pulling Seconds from the Date object
- Pulling Time from the Date object
- Mouse Events
- click
- oncontextmenu
- dblclick
- mouseenter
- mouseleave
- mousemove
- Keyboard Events
- keydown
- keypress
- keyup
- Errors
- try and catch
- Window Methods
- alert method
- blur method
- setInterval
- setTimeout
- close
- confirm
- open
- prompt
- scrollBy
- scrollTo
- clearInterval
- clearTimeout
- stop
- Query/Get Elements
- querySelector
- querySelectorAll
- getElementsByTagName
- getElementsByClassName
- Get Element by Id
- Creating Elements
- createElement
- createTextNode
- Stay Ahead of the Curve! Check out these trending topics and sharpen your skills.
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
<span class="pln"> </span><span class="tag"><script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="tag">></span><span class="pln"> </span><span class="com">//JS code goes here </span><span class="tag"></script></span><span class="pln"> </span>
External JS File
Adding external JavaScript to HTML
<span class="pln"> </span><span class="tag"><script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"filename.js"</span><span class="tag">></script></span>
Functions
JavaScript Function syntax
<span class="pln"> </span><span class="kwd">function</span><span class="pln"> nameOfFunction</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="com">// function body </span><span class="pln"> </span><span class="pun">}</span>
DOM Element
Changing content of a DOM Element
<span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"elementID"</span><span class="pun">).</span><span class="pln">innerHTML </span><span class="pun">=</span><span class="pln"> </span><span class="str">"Hello World!"</span><span class="pun">;</span>
Output
This will print the value of a in JavaScript console
<span class="pln"> console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">a</span><span class="pun">);</span>
Conditional Statements
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.
<span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">condition</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="com">// block of code to be executed if the condition is true</span><span class="pln"> </span><span class="pun">}</span>
If-else Statement
If the condition for the if block is false, then the else block will be executed.
<span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">condition</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="com">// block of code to be executed if the condition is true</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="com">// block of code to be executed if the condition is false</span><span class="pln"> </span><span class="pun">}</span>
Else-if Statement
A basic if-else ladder
<span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">condition1</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="com">// block of code to be executed if condition1 is true</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">condition2</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="com">// block of code to be executed if the condition1 is false and condition2 is true</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="com">// block of code to be executed if the condition1 is false and condition2 is false</span><span class="pln"> </span><span class="pun">}</span>
Switch Statement
Switch case statement in JavaScript
<span class="pln"> </span><span class="kwd">switch</span><span class="pln"> </span><span class="pun">(</span><span class="pln">expression</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">case</span><span class="pln"> x</span><span class="pun">:</span><span class="pln"> </span><span class="com">// code block</span><span class="pln"> </span><span class="kwd">break</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">case</span><span class="pln"> y</span><span class="pun">:</span><span class="pln"> </span><span class="com">// code block</span><span class="pln"> </span><span class="kwd">break</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">default</span><span class="pun">:</span><span class="pln"> </span><span class="com">// code block</span><span class="pln"> </span><span class="pun">}</span>
Iterative Statements (Loops)
Iterative statement facilitates programmer to execute any block of code lines repeatedly and can be controlled as per conditions added by the programmer.
For Loop
For loop syntax in javascript
<span class="pln"> </span><span class="kwd">for</span><span class="pln"> </span><span class="pun">(</span><span class="pln">initialization</span><span class="pun">;</span><span class="pln"> condition</span><span class="pun">;</span><span class="pln"> incrementation</span><span class="pun">;)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="com">// code block to be executed</span><span class="pln"> </span><span class="pun">}</span>
Example:
<span class="pln"> </span><span class="kwd">for</span><span class="pln"> </span><span class="pun">(</span><span class="kwd">let</span><span class="pln"> i </span><span class="pun">=</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> i </span><span class="pun"><</span><span class="pln"> </span><span class="lit">5</span><span class="pun">;</span><span class="pln"> i</span><span class="pun">++)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> text </span><span class="pun">+=</span><span class="pln"> </span><span class="str">"Iteration number: "</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> i </span><span class="pun">+</span><span class="pln"> </span><span class="str">"<br>"</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span>
While Loop
Runs the code till the specified condition is true
<span class="pln"> </span><span class="kwd">while</span><span class="pln"> </span><span class="pun">(</span><span class="pln">condition</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="com">// code block to be executed</span><span class="pln"> </span><span class="pun">}</span>
Do While Loop
A do while loop is executed at least once despite the condition being true or false
<span class="pln"> </span><span class="kwd">do</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="com">// run this code in block</span><span class="pln"> i</span><span class="pun">++;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">while</span><span class="pln"> </span><span class="pun">(</span><span class="pln">condition</span><span class="pun">);</span>
Strings
The string is a sequence of characters that is used for storing and managing text data.
charAt method
Returns the character from the specified index.
<span class="pln"> str</span><span class="pun">.</span><span class="pln">charAt</span><span class="pun">(</span><span class="lit">3</span><span class="pun">)</span>
concat method
Joins two or more strings together.
<span class="pln"> str1</span><span class="pun">.</span><span class="pln">concat</span><span class="pun">(</span><span class="pln">str2</span><span class="pun">)</span>
index of method
Returns the index of the first occurrence of the specified character from the string else -1 if not found.
<span class="pln"> str</span><span class="pun">.</span><span class="pln">indexOf</span><span class="pun">(</span><span class="str">'substr'</span><span class="pun">)</span>
match method
Searches a string for a match against a regular expression.
<span class="pln"> str</span><span class="pun">.</span><span class="pln">match</span><span class="pun">(</span><span class="str">/(chapter \d+(\.\d)*)/</span><span class="pln">i</span><span class="pun">;)</span>
replace method
Searches a string for a match against a specified string or char and returns a new string by replacing the specified values.
<span class="pln"> str1</span><span class="pun">.</span><span class="pln">replace</span><span class="pun">(</span><span class="pln">str2</span><span class="pun">)</span>
search method
Searches a string against a specified value.
<span class="pln"> str</span><span class="pun">.</span><span class="pln">search</span><span class="pun">(</span><span class="str">'term'</span><span class="pun">)</span>
split method
Splits a string into an array consisting of substrings.
<span class="pln"> str</span><span class="pun">.</span><span class="pln">split</span><span class="pun">(</span><span class="str">'\n'</span><span class="pun">)</span>
substring method
Returns a substring of a string containing characters from the specified indices.
<span class="pln"> str</span><span class="pun">.</span><span class="pln">substring</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="lit">5</span><span class="pun">)</span>
Arrays
The array is a collection of data items of the same type. In simple terms, it is a variable that contains multiple values.
variable
Containers for storing data.
<span class="pln"> </span><span class="kwd">var</span><span class="pln"> fruit </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[</span><span class="str">"element1"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"element2"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"element3"</span><span class="pun">];</span>
concat method
Joins two or more arrays together.
<span class="pln"> concat</span><span class="pun">()</span>
indexOf method
Returns the index of the specified item from the array.
<span class="pln"> indexOf</span><span class="pun">()</span>
join method
Converts the array elements to a string.
<span class="pln"> </span><span class="kwd">join</span><span class="pun">()</span>
pop method
Deletes the last element of the array.
<span class="pln"> pop</span><span class="pun">()</span>
reverse method
This method reverses the order of the array elements.
<span class="pln"> reverse</span><span class="pun">()</span>
sort method
Sorts the array elements in a specified manner.
<span class="pln"> sort</span><span class="pun">()</span>
toString method
Converts the array elements to a string.
<span class="pln"> toString</span><span class="pun">()</span>
valueOf method
returns the relevant Number Object holding the value of the argument passed
<span class="pln"> valueOf</span><span class="pun">()</span>
Number Methods
JS math and number objects provide several constant and methods to perform mathematical operations.
toExponential method
Converts a number to its exponential form.
<span class="pln"> toExponential</span><span class="pun">()</span>
toPrecision method
Formats a number into a specified length.
<span class="pln"> toPrecision</span><span class="pun">()</span>
toString method
Converts an object to a string
<span class="pln"> toString</span><span class="pun">()</span>
valueOf method
Returns the primitive value of a number.
<span class="pln"> valueOf</span><span class="pun">()</span>
Maths Methods
ceil method
Rounds a number upwards to the nearest integer, and returns the result
<span class="pln"> ceil</span><span class="pun">(</span><span class="pln">x</span><span class="pun">)</span>
exp method
Returns the value of E^x.
<span class="pln"> exp</span><span class="pun">(</span><span class="pln">x</span><span class="pun">)</span>
log method
Returns the logarithmic value of x.
<span class="pln"> log</span><span class="pun">(</span><span class="pln">x</span><span class="pun">)</span>
pow method
Returns the value of x to the power y.
<span class="pln"> pow</span><span class="pun">(</span><span class="pln">x</span><span class="pun">,</span><span class="pln">y</span><span class="pun">)</span>
random method
Returns a random number between 0 and 1.
<span class="pln"> random</span><span class="pun">()</span>
sqrt method
Returns the square root of a number x
<span class="pln"> sqrt</span><span class="pun">(</span><span class="pln">x</span><span class="pun">)</span>
Dates
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.
Pulling Date from the Date object
Returns the date from the date object
<span class="pln"> getDate</span><span class="pun">()</span>
Pulling Day from the Date object
Returns the day from the date object
<span class="pln"> getDay</span><span class="pun">()</span>
Pulling Hours from the Date object
Returns the hours from the date object
<span class="pln"> getHours</span><span class="pun">()</span>
Pulling Minutes from the Date object
Returns the minutes from the date object
<span class="pln"> getMinutes</span><span class="pun">()</span>
Pulling Seconds from the Date object
Returns the seconds from the date object
<span class="pln"> getSeconds</span><span class="pun">()</span>
Pulling Time from the Date object
Returns the time from the date object
<span class="pln"> getTime</span><span class="pun">()</span>
Mouse Events
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.
click
Fired when an element is clicked
<span class="pln"> element</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">'click'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">=></span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="com">// Code to be executed when the event is fired</span><span class="pln"> </span><span class="pun">});</span>
oncontextmenu
Fired when an element is right-clicked
<span class="pln"> element</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">'contextmenu'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">=></span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="com">// Code to be executed when the event is fired</span><span class="pln"> </span><span class="pun">});</span>
dblclick
Fired when an element is double-clicked
<span class="pln"> element</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">'dblclick'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">=></span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="com">// Code to be executed when the event is fired</span><span class="pln"> </span><span class="pun">});</span>
mouseenter
Fired when an element is entered by the mouse arrow
<span class="pln"> element</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">'mouseenter'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">=></span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="com">// Code to be executed when the event is fired</span><span class="pln"> </span><span class="pun">});</span>
mouseleave
Fired when an element is exited by the mouse arrow
<span class="pln"> element</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">'mouseleave'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">=></span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="com">// Code to be executed when the event is fired</span><span class="pln"> </span><span class="pun">});</span>
mousemove
Fired when the mouse is moved inside the element
<span class="pln"> element</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">'mousemove'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">=></span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="com">// Code to be executed when the event is fired</span><span class="pln"> </span><span class="pun">});</span>
Keyboard Events
keydown
Fired when the user is pressing a key on the keyboard
<span class="pln"> element</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">'keydown'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">=></span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="com">// Code to be executed when the event is fired</span><span class="pln"> </span><span class="pun">});</span>
keypress
Fired when the user presses the key on the keyboard
<span class="pln"> element</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">'keypress'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">=></span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="com">// Code to be executed when the event is fired</span><span class="pln"> </span><span class="pun">});</span>
keyup
Fired when the user releases a key on the keyboard
<span class="pln"> element</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">'keyup'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">=></span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="com">// Code to be executed when the event is fired</span><span class="pln"> </span><span class="pun">});</span>
Errors
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.
try and catch
Try the code block and execute catch when err is thrown
<span class="pln"> </span><span class="kwd">try</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">Block</span><span class="pln"> </span><span class="kwd">of</span><span class="pln"> code to </span><span class="kwd">try</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">catch</span><span class="pln"> </span><span class="pun">(</span><span class="pln">err</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">Block</span><span class="pln"> </span><span class="kwd">of</span><span class="pln"> code to handle errors </span><span class="pun">}</span>
Window Methods
Methods that are available from the window object
alert method
Used to alert something on the screen
<span class="pln"> alert</span><span class="pun">()</span>
blur method
The blur() method removes focus from the current window.
<span class="pln"> blur</span><span class="pun">()</span>
setInterval
Keeps executing code at a certain interval
<span class="pln"> setInterval</span><span class="pun">(()</span><span class="pln"> </span><span class="pun">=></span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="com">// Code to be executed</span><span class="pln"> </span><span class="pun">},</span><span class="pln"> </span><span class="lit">1000</span><span class="pun">);</span>
setTimeout
Executes the code after a certain interval of time
<span class="pln"> setTimeout</span><span class="pun">(()</span><span class="pln"> </span><span class="pun">=></span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="com">// Code to be executed</span><span class="pln"> </span><span class="pun">},</span><span class="pln"> </span><span class="lit">1000</span><span class="pun">);</span>
close
The Window. close() method closes the current window
<span class="pln"> window</span><span class="pun">.</span><span class="pln">close</span><span class="pun">()</span>
confirm
The window.confirm() instructs the browser to display a dialog with an optional message, and to wait until the user either confirms or cancels
<span class="pln"> window</span><span class="pun">.</span><span class="pln">confirm</span><span class="pun">(</span><span class="str">'Are you sure?'</span><span class="pun">)</span>
open
Opens a new window
<span class="pln"> window</span><span class="pun">.</span><span class="pln">open</span><span class="pun">(</span><span class="str">"https://www.codewithharry.com"</span><span class="pun">);</span>
prompt
Prompts the user with a text and takes a value. Second parameter is the default value
<span class="pln"> </span><span class="kwd">var</span><span class="pln"> name </span><span class="pun">=</span><span class="pln"> prompt</span><span class="pun">(</span><span class="str">"What is your name?"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"Harry"</span><span class="pun">);</span>
scrollBy
<span class="pln"> window</span><span class="pun">.</span><span class="pln">scrollBy</span><span class="pun">(</span><span class="lit">100</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">);</span><span class="pln"> </span><span class="com">// Scroll 100px to the right</span>
scrollTo
Scrolls the document to the specified coordinates.
<span class="pln"> window</span><span class="pun">.</span><span class="pln">scrollTo</span><span class="pun">(</span><span class="lit">500</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">);</span><span class="pln"> </span><span class="com">// Scroll to horizontal position 500</span>
clearInterval
Clears the setInterval. var is the value returned by setInterval call
<span class="pln"> clearInterval</span><span class="pun">(</span><span class="kwd">var</span><span class="pun">)</span>
clearTimeout
Clears the setTimeout. var is the value returned by setTimeout call
<span class="pln"> clearTimeout</span><span class="pun">(</span><span class="kwd">var</span><span class="pun">)</span>
stop
Stops the further resource loading
<span class="pln"> stop</span><span class="pun">()</span>
Query/Get Elements
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.
querySelector
Selector to select first matching element
<span class="pln"> document</span><span class="pun">.</span><span class="pln">querySelector</span><span class="pun">(</span><span class="str">'css-selectors'</span><span class="pun">)</span>
querySelectorAll
A selector to select all matching elements
<span class="pln"> document</span><span class="pun">.</span><span class="pln">querySelectorAll</span><span class="pun">(</span><span class="str">'css-selectors'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">...)</span>
getElementsByTagName
Select elements by tag name
<span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementsByTagName</span><span class="pun">(</span><span class="str">'element-name'</span><span class="pun">)</span>
getElementsByClassName
Select elements by class name
<span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementsByClassName</span><span class="pun">(</span><span class="str">'class-name'</span><span class="pun">)</span>
Get Element by Id
Select an element by its id
<span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'id'</span><span class="pun">)</span>
Creating Elements
Create new elements in the DOM
createElement
Create a new element
<span class="pln"> document</span><span class="pun">.</span><span class="pln">createElement</span><span class="pun">(</span><span class="str">'div'</span><span class="pun">)</span>
createTextNode
Create a new text node
<span class="pln"> document</span><span class="pun">.</span><span class="pln">createTextNode</span><span class="pun">(</span><span class="str">'some text here'</span><span class="pun">)</span>
No Questions Data Available.
No Program Data.