On Page JavaScript
Syntax of addding internal JavaScript into HTML
<script type="text/javascript"> // JavaScript code come here </script>
External JavaScript File
Syntax of linking externally JavaScript file with HTML
<script src="file-name.js"></script>
DOM (Document Object Model)
document.getElementById("ElementID").innerHTML = "Hello World!";
Output
It will print the output
console.log(f);
Functions
Syntax od JavaScript Function
function NameOfFunction() {
// Body of Function
}
Conditional Statements
These statements are used to display outputs based on specific instructions
If Statement
It display the block of code when the condition is true
if (condition) {
// Block of code can be executed if the the condition is true
}
If-else Statement
It display the first block of code if the condition is true and display the second block of code if condition is false
if (condition) {
// Block of code can be executed if the the condition is true
} else {
// Block of code can be executed if the the condition is False
}
Else-If Statement
It is used to display the multiple blocks of code
if (condition1) {
// Block of code can be executed if the the condition is true
} else if(condition2) {
// Block of code can be executed if the the condition1 is False
} else {
// Block of code can be executed if the the condition1 and condition2 is False
}
Switch Statement
It is the alternative of if-else statement
switch (expression) {
case a:
// Block of code
break;
case y:
// Block of code
break;
default:
// Block of code
}
Iterative Statements (Loops)
These statements are used to display the block of code till the condition is true
While Loop
It display the block of code till the given condition is true
while (condition) {
// Block of code
}
Do While Loop
It is used to display the block of code at least one time
do {
// block of code
i++
} while (condition);
For Loop
It is also used to display the block of code till the condition is true but in for loop you can also declare / initalize varable with condition
for (initalization; condition; increment/decrement;) {
//Block of code
}
Strings
A string is a data type which is used to store a sequence of characters
Concat Method
It is used to join two or more strings together.
stri3.concat(stri4)
CharAt Method
It is used to return the character fromm the specified index specified by coder
stri.charAt(2)
Index of Method
It returns the position (index) of the first ocurrance of the specified character from the string. If it find not that position then it returns -1
stri.indexOf('subs')
Match Method
It is used to retrive a string for a match against a regular expression
stri.match(/(unit \e+(\.\e)*)/i;)
Replace Method
It is used to replace a string by a specific string specified by coder
stri1.replace(stri2)
Search Method
It retrive a string against a specific value specified by coder
stri.search('team')
Substring Method
It returns a substring from a string containing characters from one specific position (index) to another specific position (index)
stri.substring(2, 6)
Split Method
It divide a string into an array containing substrings
stri.split('\t')
Arrays
The array consist of data items of same type. We also says that it is a variable which contains zero or more values or items
Variable
Syntax of making array variable
var animal = ["cat", "dog", "lion"]
Concat Method
It helps to joining two or more arrays together
concat()
Indexof Method
It returns the specific value from the array according to the position (index)
indexOf()
Join Method
It is used to convert the array into a string
join()
Reverse Method
It reverse the order of elements in the array
reverse()
Sort Method
It sort the items of array in specific order.
sort()
Pop Method
It will delete the last element from the array
pop()
Valueof Method
It returns the relevant number object which holding the value of the argument passed
valueOf()
Tostring Method
It converts the element of an array into a string
toString()
Number Methods
JS (JavaScript) math and number objects give many constant and methods to perform mathematical operations
ToExponential Method
It is used to convert a simple number into exponential form
toExponential()
Tostring Method
It is used to convert an object into a string
tostring()
Toprecision method
It is used to giving a formats to a numbers into a specified lenghth by coder
toPrecision()
Valueof Method
It is used to returns a primitive value of a number
valueOf()
Maths Methods
Ceil Method
It round up a number to the nearest integer
ceil(y)
Log Method
It is used to calcuate the log of a number
log(y)
Power Method
It is used to return the value of a to b
pow(a, b)
Exp Method
It is used to return the value of E^y
exp(y)
Random Method
It is used to generate a random number between 0 and 1
random()
Sqrt Method
It is used to generate the square root of a number y
sqrt(y)
Dates
Date object is used to get the date, month, year.
Getting Date from the Data Object
It return the date from the date object
getDate()
Getting Day from the Data Object
IT return the day from the date object
getDay()
Getting Hours from the Data Object
It return the hours from the date object
getHours()
Getting Minutes from the Data Object
It return the minutes from the date object
getMinutes()
Getting Seconds from the Data Object
It return the Seconds from the date object
getSeconds()
Getting Time from the Data Object
It return the time from the date object
getTime()
Mouse Events
Click
This event is fired when an element is clicked
element.addEventListener('click', () => {
// When the event is fired then the code is to be executed
});
Oncontextmenu
This event is fired when an element is right clicked
element.addEventListener('contextmenu', () => {
// When the event is fired then the code is to be executed
});
Dblclick
This event is fired when an element is double clicked
element.addEventListener('dblclick', () => {
// When the event is fired then the code is to be executed
});
Mouseleave
This event is fired when an element is exited by the mouse arrow
element.addEventListener('mouseleave', () => {
// When the event is fired then the code is to be executed
});
Mousemove
This event is fired when the mouse is moved inside the element
element.addEventListener('mousemove', () => {
// When the event is fired then the code is to be executed
});
Mouseenter
This event is fired when an element is entered by the mouse arrow
element.addEventListener('mouseenter', () => {
// When the event is fired then the code is to be executed
});
Keyboard Events
Keydown
This event is fired when the user pressed a key on the keyboard
element.addEventListener('keydown', () => {
// When the event is fired then the code is to be executed
});
Keyup
This event is fired when the user released a key on the keyboard
element.addEventListener('keyup', () => {
// When the event is fired then the code is to be executed
});
Keypress
This event is fired when the user released a key on the keyboard
element.addEventListener('keypress', () => {
// When the event is fired then the code is to be executed
});
Errors
Try and Catch
In Js try and catch is used to handle errors. It allows you to try the code block and catch any errors that occur or preventing the program from the crashing
try {
Code block to try
}
catch (err) {
Code block to handle errors
}
Window Methods
Alert Method
It is used to alert something on screen
alert()
Blur Method
It is used to remove the focus from the current window
blur()
SetTimeout
It execute the code after the certain interval of time
setTimeout(() => {
// Code is to be executed
}, 2000);
SetInterval
It is used to keep executing the code at a certain interval
setInterval(() => {
// Code is to be executed
}, 2000);
Confirm
It says the browser to show a dialog with a message and to wait until the user confirm or cancel it
window.confirm('can u ready?')
Open
It is used to open a new window
window.open("https://www.micronirala.com")
Close
It close the current window
window.close()
Prompt
It gives prompt to the user with some text and get a value (as a input). Second parameter (USA) is the default value
var city = prompt("what is your city name?", "USA")
Scrollto
It is used to scroll the document to the specified coordinate (position)
window.scrollTo(800, 0); //Scroll to horizantal coordinate (position) 800
Scrollby
window.scrollBy(200, 0); //Scroll 200px to the right coordinate (position)
Clearinterval
It can help to clear the setinterval. "var" is the value which can returned by setinterval call
clearInterval(var)
Cleartimeout
It is used to clear the settimeout. "var" is the value which can returned by settimeout call
window.close()
Stop
It stop the further resource to be load
stop()
Creating Elements
It is used to create new elements in the DOM (Document Object Model)
Createelement
It helps to make a new element
document.createElement('div')
Createtextnode
It helps to create a new text node
document.createTextNode('text')
Query or Get Elements
When the web page is load then the browser create a DOM. Coder can access and modify the elements of HTML document with the help of HTML DOM (document Object Model)
Queryselectorall
It is used to select all matching elements
document.querrySelectorAll('css-selectors', ..)
Queryselector
It is used to select first matching element
document.querrySelector('css-selectors', ..)
GetelementsByclassname
It help to select the elements by class name
document.getElementByClassName('class-name')
Getelementbyid
It is used to select the elements by its id
document.getElementById('id')
GetelementsbytagName
It helps to select the elements by tag name
document.getElementByTagName('element-name')
Leave a Comment