JavaScript is the most powerful tool of the front-end development, and with continuous updates & frameworks JavaScript can also be used as the back-end tool. Here in this article, we have provided a cheat sheet for all the basic JavaScript. We have also provided the code snippet which you can directly copy if somewhere you get confused with the syntax.
Basic JavaScript Cheatsheet
We can include JavaScript in our HTML file in two ways.
Internal Including of Java Script
In this, we write the JavaScript code in the HTML pages itself inside the <script> tag
<script type="text/javascript"> // Code here </script>
External Including of JavaScript
In this method, we create a JavaScript document with an extension of .js and include it to our HTML page.
<script src="myscript.js"></script
Comments in JavaScript
Comments are used to provide additional information about the code.
In JS we use // to comment out a single line and /* to comment out multiple lines
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 | const is a keyword which 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 but not 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() | Join arrays to make one single array |
| indexOf() | To get the index of a value |
| join() | Combine all elements of an Array to make it a string |
| lastIndexOf() | Give the last position of the array |
| pop() | Remove the last element of the array |
| push() | Add new element at the end of an array |
| reverse() | Revere the array element |
| shift() | Remove the first element of the array |
| slice() | Create a new sequence of an array from the existing one |
| sort() | Sort the elements of the array |
| splice() | Add elements in a specified way and position |
| toString() | Convent elements to the string |
| unshift() | Add an element at the beginning of an array |
| valueOf() | Return the position of the element |
Operators in JavaScript
In JS we have many types of Operators, such as Arithmetic, conditional, logical and Bitwise operator operators.
Operators are the special symbol, we use 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 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 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 Screen
In JS we have some inbuilt functions which are used to show output or print something on the screen.
| Output Function | Description | Code Snippet |
| alert() | An alert box show 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 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() | Decode a Uniform Resource iIdentifiers(URI) |
| decodeURIComponent() | Decode a URI component |
| endodeURI() | Encode a URI into UTF-8 |
| encodeURIComponent() | Encode URI components |
| eval() | Evaluate the code represent in the string format |
| isFinite() | Evaluate whether the value is finite or not |
| isNaN() | Evaluate whether the value is NaN or Not |
| Number() | Convert the string into a number |
| parseFloat() | Parse the value and return into a floating-point number |
| parseInt() | Parse the value and return an Integer |
Loops in JavaScript
Loop is used to iterate over a block of Statement again and again till a certain condition.
In JS we have 3 types of statements that can loop over a statement.
| Loop | Description | Code Snippet |
| for | We use for a 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 how many times, we need to iterate over a block | while(i<10)
{ console.log(i); i++; } |
| do while | No matter what, even the condition is false at first place to do while will execute a minimum 1 time. | do
{ console.log(i) i++; }while(i<10) |
break: Break is a keyword we use in 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 (condtion)
{
//code if the statement is true
}
else
{
//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() | Return the position of the character inside a string. |
| charCodeAt() | Provide the Unicode of the character |
| Concat() | Join two or more strings into one |
| fromCharCode() | Return a string created from the specified sequence of UTF-16 code units |
| indexOf() | Returns the position of the character |
| lastIndexOf() | Provide 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() | Replace a text with another |
| search() | Return the position of a text in a string |
| slice() | Extract a sequence of string |
| split() | Split the string into an array |
| substr() | Extract a sequence of string depend on a specified number of characters |
| substring() | Similar to slice() but does not work with -ve indices |
| toLoweCase() | Covert the string to lowercase |
| toUpperCase() | Convert the string to upper case |
| valueOf() | Return 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 pattern |
| u | Ungreedy pattern |
| Brackets | Description |
| [abc] | Find any characters from a, b and c |
| [^abc] | Find any character except abc |
| [0-9] | Find any digit 0 to 9 |
| [A-z] | Find any character from a to z and A to Z |
| (a | b | c) | Find any of the alternatives separated with | |
Math and Numbers
NaN = Not A Number
| Number Methods | Description |
| toExponential() | Return a string with a rounded number written as 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) | Return a positive value of n |
| acos(n) | Arccosine of n in radian |
| 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) | Return the maximum value |
| min(1,2,3,5,12,42) | Return the minimum value |
| pow(n,m) | n to the power m |
| random() | Return a random value between 1 or 0 |
| sin(n) | The sine of x in radian |
| sqrt(n) | The square root of n |
| tan(n) | The tangent of angle n |
Dates in JS
Date()= Return 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 weeday |
| 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 universal time (also available for day, month, fullyear, hours, minutes etc.) |
| getMonth() | Get the month(0-11) |
| Set Date Methods | Description |
| setDate() | Set the date |
| setFullYear() | Set the year |
| setHours | Set hours |
| setMilliseconds | Set milliseconds |
| setMinutes | Set minutes |
| setMonths() | Set months |
| setSeconds() | Set seconds |
| setTime() | Set time |
| setUTCDate() | Sets the day of the month for a specified date according to 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() | Clone the HTML element |
| compareDocumentPosition() | Compare the document position of two elements |
| getFeature() | Returns an object which 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 fals |
| insertBefore() | Insert 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() | Return the attribute value |
| getAttributeNS() | Return the string value of the attribute with namespace |
| getAttributeNode() | Get the specific attribute node |
| getAttributeNodeNS() | Return the attribute node for the attribute with the given namespace |
| getElementsByTagName() | Get 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
You may also Interested In: