JavaScript Cheatsheet

Read Time:8 Minute, 21 Second

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

Enter fullscreen mode Exit fullscreen mode

External JS File

Adding external JavaScript to HTML

Enter fullscreen mode Exit fullscreen mode

Functions

JavaScript Function syntax

Enter fullscreen mode Exit fullscreen mode

DOM Element

Changing content of a DOM Element

Enter fullscreen mode Exit fullscreen mode

Output

This will print the value of a in JavaScript console

Enter fullscreen mode Exit fullscreen mode

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.

Enter fullscreen mode Exit fullscreen mode

If-else Statement

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

Enter fullscreen mode Exit fullscreen mode

Else-if Statement

A basic if-else ladder

Enter fullscreen mode Exit fullscreen mode

Switch Statement

Switch case statement in JavaScript

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

Example:

Enter fullscreen mode Exit fullscreen mode

While Loop

Runs the code till the specified condition is true

Enter fullscreen mode Exit fullscreen mode

Do While Loop

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

Enter fullscreen mode Exit fullscreen mode

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.

Enter fullscreen mode Exit fullscreen mode

concat method

Joins two or more strings together.

Enter fullscreen mode Exit fullscreen mode

index of method

Returns the index of the first occurrence of the specified character from the string else -1 if not found.

Enter fullscreen mode Exit fullscreen mode

match method

Searches a string for a match against a regular expression.

Enter fullscreen mode Exit fullscreen mode

replace method

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

Enter fullscreen mode Exit fullscreen mode

search method

Searches a string against a specified value.

Enter fullscreen mode Exit fullscreen mode

split method

Splits a string into an array consisting of substrings.

Enter fullscreen mode Exit fullscreen mode

substring method

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

Enter fullscreen mode Exit fullscreen mode

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.

Enter fullscreen mode Exit fullscreen mode

concat method

Joins two or more arrays together.

Enter fullscreen mode Exit fullscreen mode

indexOf method

Returns the index of the specified item from the array.

Enter fullscreen mode Exit fullscreen mode

join method

Converts the array elements to a string.

Enter fullscreen mode Exit fullscreen mode

pop method

Deletes the last element of the array.

Enter fullscreen mode Exit fullscreen mode

reverse method

This method reverses the order of the array elements.

Enter fullscreen mode Exit fullscreen mode

sort method

Sorts the array elements in a specified manner.

Enter fullscreen mode Exit fullscreen mode

toString method

Converts the array elements to a string.

Enter fullscreen mode Exit fullscreen mode

valueOf method

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

Enter fullscreen mode Exit fullscreen mode

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.

Enter fullscreen mode Exit fullscreen mode

toPrecision method

Formats a number into a specified length.

Enter fullscreen mode Exit fullscreen mode

toString method

Converts an object to a string

Enter fullscreen mode Exit fullscreen mode

valueOf method

Returns the primitive value of a number.

Enter fullscreen mode Exit fullscreen mode

Maths Methods

ceil method

Rounds a number upwards to the nearest integer, and returns the result

Enter fullscreen mode Exit fullscreen mode

exp method

Returns the value of E^x.

Enter fullscreen mode Exit fullscreen mode

log method

Returns the logarithmic value of x.

Enter fullscreen mode Exit fullscreen mode

pow method

Returns the value of x to the power y.

Enter fullscreen mode Exit fullscreen mode

random method

Returns a random number between 0 and 1.

Enter fullscreen mode Exit fullscreen mode

sqrt method

Returns the square root of a number x

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

Pulling Day from the Date object
Returns the day from the date object

Enter fullscreen mode Exit fullscreen mode

Pulling Hours from the Date object
Returns the hours from the date object

Enter fullscreen mode Exit fullscreen mode

Pulling Minutes from the Date object
Returns the minutes from the date object

Enter fullscreen mode Exit fullscreen mode

Pulling Seconds from the Date object
Returns the seconds from the date object

Enter fullscreen mode Exit fullscreen mode

Pulling Time from the Date object
Returns the time from the date object

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

oncontextmenu

Fired when an element is right-clicked

Enter fullscreen mode Exit fullscreen mode

dblclick

Fired when an element is double-clicked

Enter fullscreen mode Exit fullscreen mode

mouseenter

Fired when an element is entered by the mouse arrow

Enter fullscreen mode Exit fullscreen mode

mouseleave

Fired when an element is exited by the mouse arrow

Enter fullscreen mode Exit fullscreen mode

mousemove

Fired when the mouse is moved inside the element

Enter fullscreen mode Exit fullscreen mode

Keyboard Events

keydown
Fired when the user is pressing a key on the keyboard

Enter fullscreen mode Exit fullscreen mode

keypress

Fired when the user presses the key on the keyboard

Enter fullscreen mode Exit fullscreen mode

keyup

Fired when the user releases a key on the keyboard

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

Window Methods

Methods that are available from the window object

alert method

Used to alert something on the screen

Enter fullscreen mode Exit fullscreen mode

blur method

The blur() method removes focus from the current window.

Enter fullscreen mode Exit fullscreen mode

setInterval

Keeps executing code at a certain interval

Enter fullscreen mode Exit fullscreen mode

setTimeout

Executes the code after a certain interval of time

Enter fullscreen mode Exit fullscreen mode

close

The Window. close() method closes the current window

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

open

Opens a new window

Enter fullscreen mode Exit fullscreen mode

prompt

Prompts the user with a text and takes a value. Second parameter is the default value

Enter fullscreen mode Exit fullscreen mode

scrollBy

Enter fullscreen mode Exit fullscreen mode

scrollTo

Scrolls the document to the specified coordinates.

Enter fullscreen mode Exit fullscreen mode

clearInterval

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

Enter fullscreen mode Exit fullscreen mode

clearTimeout

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

Enter fullscreen mode Exit fullscreen mode

stop

Stops the further resource loading

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

querySelectorAll

A selector to select all matching elements

Enter fullscreen mode Exit fullscreen mode

getElementsByTagName

Select elements by tag name

Enter fullscreen mode Exit fullscreen mode

getElementsByClassName

Select elements by class name

Enter fullscreen mode Exit fullscreen mode

Get Element by Id

Select an element by its id

Enter fullscreen mode Exit fullscreen mode

Creating Elements

Create new elements in the DOM

createElement

Create a new element

Enter fullscreen mode Exit fullscreen mode

createTextNode

Create a new text node

Enter fullscreen mode Exit fullscreen mode

👉 For More Details Visit Here : BackLinks

Source: https://dev.to/backlinkss/javascript-cheatsheet-32eg

WP Ad Inserter plugin for WordPress

Tag Cloud

Java Java Logical Programs OTP Generation in Java python Recursion youtube video ASCII Upper and Lower Case blockchain javascript graph learn to code software development Successful Software Engineers breadth first search Java Array Programs Java Programs Uncategorized android ios programming kotlin web-development django data sql cybersecurity database swiftui serverless aws swift rust react background-position gradients loader mask grid nth-child pseudo elements indieweb WordPress Print Array without brackets C++ factorial Java String Programs Final Keyword Static Variable Axie Infinity Cryptokitties NFT games tool inserting MISC Tips Codes python code python projects python3 system info python project Bigginers How to Do Integrations Payment Gateways PHP checkout page in php Implement stripe payment gateway in Step by step in PHP integrate stripe gatway in php mysql payment gateway integration in php step by step payment gateway integration in php step by step with source code payment gateway integration in website PHP Integrate Stripe Payment Gateway Tutorial PHP shopping cart checkout code shopping cart in php stripe php checkout PHP/MySQL/JSON best international payment gateway does google pay accept international payments how to accept international payments in india paytm payment gateway razorpay codeigniter github razorpay custom checkout github razorpay get payment details razorpay integration in codeigniter github razorpay international payments Razorpay payment gateway integration in CodeIgniter razorpay payment gateway integration in php code Razorpay payment gateway integration with PHP and CodeIgniter Razorpay payment gateway setup in CodeIgniter Library & Frameworks Tips & Tricks UI/UX & Front-end coding birds online html code for google sign in login with google account in PHP login with google account using javascript login with google account using javascript codeigniter login with google account using php login with google account using php source code
CodeNewbie Season 22 Episode 8! From Opera to Code with Anna McDougall Previous post CodeNewbie Season 22 Episode 8! From Opera to Code with Anna McDougall
Git in 10 mins Next post Git in 10 mins

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.