JavaScript Basics

BALIYAN KING@Baliyan_king379 for

youtube channel subscribe now
Set of JavaScript basic syntax to add, execute
and write basic programming paradigms in
Javascript
On Page Script
Adding internal JavaScript to HTML
<script type="text/javascript"> //JS code goes
here </script>
Copy
Coding bootcamp
External JS File
Adding external JavaScript to HTML
<script src="filename.js"></script>
Copy
Functions
JavaScript Function syntax
function nameOfFunction() {
// function body
}
Copy
DOM Element
Changing content of a DOM Element
document.getElementById("elementID").inne
rHTML = "Hello World!";
Copy
Output
This will print the value of a in JavaScript
console
console.log(a);
Copy
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.
if (condition) {
// block of code to be executed if the
condition is true
}
Copy
If-else Statement
If the condition for the if block is false, then
the else block will be executed.
if (condition) {
// block of code to be executed if the
condition is true
} else {
// block of code to be executed if the
condition is false
}
Copy
Else-if Statement
A basic if-else ladder
if (condition1) {
// block of code to be executed if
condition1 is true
} else if (condition2) {
// block of code to be executed if the
condition1 is false and condition2 is true
} else {
// block of code to be executed if the
condition1 is false and condition2 is false
}
Copy
Switch Statement
Switch case statement in JavaScript
switch (expression) {
 case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}
Copy
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.
Computer programming courses
For Loop
For loop syntax in javascript
for (initialization; condition; incrementation;) {
// code block to be executed
}
Copy
Example:
for (let i = 0; i < 5; i++) {
text += "Iteration number: " + i + "<br>";
}
Copy
While Loop
Runs the code till the specified condition is
true
while (condition) {
// code block to be executed
}
Copy
Do While Loop
A do while loop is executed at least once
despite the condition being true or false
do {
// run this code in block
i++;
} while (condition);
Copy
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.
str.charAt(3)
Copy
concat method
Joins two or more strings together.
str1.concat(str2)
Copy
index of method
Returns the index of the first occurrence of
the specified character from the string else -1
if not found.
str.indexOf('substr')
Copy
match method
Searches a string for a match against a regular
expression.
str.match(/(chapter \d+(\.\d)*)/i;)
Copy
replace method
Searches a string for a match against a
specified string or char and returns a new
string by replacing the specified values.
str1.replace(str2)
Copy
search method
Searches a string against a specified value.
str.search('term')
Copy
split method
Splits a string into an array consisting of
substrings.
str.split('\n')
Copy
substring method
Returns a substring of a string containing
characters from the specified indices.
str.substring(0,5)
Copy
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.
var fruit = ["element1", "element2",
"element3"];
Copy
concat method
Joins two or more arrays together.
concat()
Copy
indexOf method
Returns the index of the specified item from
the array.
indexOf()
Copy
join method
Converts the array elements to a string.
join()
Copy
pop method
Deletes the last element of the array.
pop()
Copy
reverse method
This method reverses the order of the array
elements.
reverse()
Copy
sort method
Sorts the array elements in a specified
manner.
sort()
Copy
toString method
Converts the array elements to a string.
toString()
Copy
valueOf method
returns the relevant Number Object holding
the value of the argument passed
valueOf()
Copy
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.
toExponential()
Copy
toPrecision method
Formats a number into a specified length.
toPrecision()
Copy
toString method
Converts an object to a string
toString()
Copy
valueOf method
Returns the primitive value of a number.
valueOf()
Copy
Maths Methods
ceil method
Rounds a number upwards to the nearest
integer, and returns the result
ceil(x)
Copy
exp method
Returns the value of E^x.
exp(x)
Copy
log method
Returns the logarithmic value of x.
log(x)
Copy
pow method
Returns the value of x to the power y.
pow(x,y)
Copy
random method
Returns a random number between 0 and 1.
random()
Copy
sqrt method
Returns the square root of a number x
sqrt(x)
Copy
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
getDate()
Copy
Pulling Day from the Date object
Returns the day from the date object
getDay()
Copy
Pulling Hours from the Date object
Returns the hours from the date object
getHours()
Copy
Pulling Minutes from the Date object
Returns the minutes from the date object
getMinutes()
Copy
Pulling Seconds from the Date object
Returns the seconds from the date object
getSeconds()
Copy
Pulling Time from the Date object
Returns the time from the date object
getTime()
Copy
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
element.addEventListener('click', () => {
 // Code to be executed when the event is
fired
});
Copy
oncontextmenu
Fired when an element is right-clicked
element.addEventListener('contextmenu', ()
=> {
// Code to be executed when the event is
fired
});
Copy
dblclick
Fired when an element is double-clicked
element.addEventListener('dblclick', () => {
// Code to be executed when the event is
fired
});
Copy
mouseenter
Fired when an element is entered by the
mouse arrow
element.addEventListener('mouseenter', () =>
{
// Code to be executed when the event is
fired
});
Copy
mouseleave
Fired when an element is exited by the mouse
arrow
element.addEventListener('mouseleave', () =>
{
// Code to be executed when the event is
fired
});
Copy
mousemove
Fired when the mouse is moved inside the
element
element.addEventListener('mousemove', () =>
{
// Code to be executed when the event is
fired
});
Copy
Keyboard Events
keydown
Fired when the user is pressing a key on the
keyboard
element.addEventListener('keydown', () => {
// Code to be executed when the event is
fired
});
Copy
keypress
Fired when the user presses the key on the
keyboard
element.addEventListener('keypress', () => {
// Code to be executed when the event is
fired
});
Copy
keyup
Fired when the user releases a key on the
keyboard
element.addEventListener('keyup', () => {
// Code to be executed when the event is
fired
});
Copy
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
try {
Block of code to try
}
catch (err) {
Block of code to handle errors
}
Copy
Window Methods
Methods that are available from the window
object
alert method
Used to alert something on the screen
alert()
Copy
blur method
The blur() method removes focus from the
current window.
blur()
Copy
setInterval
Keeps executing code at a certain interval
setInterval(() => {
// Code to be executed
}, 1000);
Copy
setTimeout
Executes the code after a certain interval of
time
setTimeout(() => {
 // Code to be executed
}, 1000);
Copy
close
The Window. close() method closes the
current window
window.close()
Copy
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
window.confirm('Are you sure?')
Copy
open
Opens a new window
window.open("https://
www.codewithharry.com");
Copy
prompt
Prompts the user with a text and takes a
value. Second parameter is the default value
var name = prompt("What is your name?",
"Harry");
Copy
scrollBy
window.scrollBy(100, 0); // Scroll 100px to the
right
Copy
scrollTo
Scrolls the document to the specified
coordinates.
window.scrollTo(500, 0); // Scroll to horizontal
position 500
Copy
clearInterval
Clears the setInterval. var is the value
returned by setInterval call
clearInterval(var)
Copy
clearTimeout
Clears the setTimeout. var is the value
returned by setTimeout call
clearTimeout(var)
Copy
stop
Stops the further resource loading
stop()
Copy
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
document.querySelector('css-selectors')
Copy
querySelectorAll
A selector to select all matching elements
document.querySelectorAll('css-selectors', ...)
Copy
getElementsByTagName
Select elements by tag name
document.getElementsByTagName('element-
name')
Copy
getElementsByClassName
Select elements by class name
document.getElementsByClassName('class-
name')
Copy
Get Element by Id
Select an element by its id
document.getElementById('id')
Copy
Creating Elements
Create new elements in the DOM
createElement
Create a new element
document.createElement('div')
Copy
createTextNode
Create a new text node
document.createTextNode('some text here')