JavaScript Basics
Set of JavaScript basic syntax to odd, execute and write basic programming paradigms in
Javascript
On Page Script
Adding internal JavaScript to HTML
External JS File
Adding external JavaScript to HTML
Functions
Javascript Function syntax
DOM Element
Changing content of o DOM Element
Core Q ena A
Output
This will print the value of a in JavaScript console
Condit
Conditional statements ore used to perform operations based on some conditions.
nal StatementsIf Statement
The block of code to be executed, when the condition specified is true.
if (condition) {
If-else Statement
IF the condition for the if block is false, then the else block will be executed.
outst ed
oewe
Else-if Statement
Abas e ladder
PCC mt
} else if (condition2) {
oe we
Switch Statement
Switch case statement in Javascript
switch (expression) {
rs
eos
default: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
OM CUrtstvEer SCL reste U List|
Ceuta eee eects
Example:
While Loop
Runs the code till the specified condition is true
while (condition)
Seem C aac
Do While Loop
‘A do while loop is executed at least once despite the condition being true or false
Pres eet Ger
} while (conditic
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.concat method
Joins two or more strings together.
Base (str2)
index of method
Returns the index of the first occurrence of the specified character from the string else -1 ifnot
found.
match method
Searches a string for a match against a regular expression.
replace method
Searches a string for a match against a specified string or char and returns a new string by
replacing the specified values.
ae (str2)
search method
Searches a string against a specified value.
split method
Splits a string into an array consisting of substrings.
substring method
Retums a substring of a string containing characters from the specified indices.Arrays
The array is a collection of data items of the same type. In simple terms, itis a variable that
contains multiple values.
variable
Containers for storing data.
RO io Sa 5 A i
concat method
Joins two or more arrays together.
indexOf method
Returns the index of the specified item from the array.
join method
Converts the array elements to a string.
pop method
Deletes the last element of the array.
reverse method
This method reverses the order of the array elements.
sort method
Sorts the array elements in a specified manner.toString method
Converts the array elements to a string,
0)
valueOf method
returns the relevant Number Object holding the value of the argument passed
)
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,
(
toPrecision method
Formats 0 number into a specified length.
toString method
Converts an object to a string
valueOf method
Returns the primitive value of a number.Maths Methods
ceil method
Rounds o number upwards to the nearest integer, and returns the result
exp method
Returns the value of EAx.
os)
log method
Returns the logarithmic value of x.
Co)
pow method
Returns the value of x to the power y.
(uy)
random method
Returns a random number between 0 and 1
sqrt method
Returns the square root of a number x
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 objectReturns the date from the date object
Pulling Day from the Date object
Returns the day from the date object
Pulling Hours from the Date object
Returns the hours from the date object
Pulling Minutes from the Date object
Returns the minutes from the date object
Pulling Seconds from the Date object
Returns the seconds from the date object
Pulling Time from the Date object
Returns the time from the date object
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, ie, how any specific HTML tag will work when the user does something.
click
Fired when an elements clickedoncontextmenu
Fired when an element is right-clicked
element (
@ executed when the
dbiclick
Fired when an element is double-clicked
Sons
n3
mouseenter
Fired when an element is entered by the mouse arrow
mouseleave
Fired when an element is exited by the mouse arrow
mousemove
Fired when the mouse is moved inside the elementKeyboard Events
keydown
Fired when the user is pressing a key on the keyboard
keypress
Fired when the user presses the key on the keyboard
»O>¢
De executed when the event is fired
keyup
Fired when the user releases a key on the keyboard
St
De
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
CPL an
Window Methods
Methods that are available from the window objectalert method
Used to alert something on the screen
blur method
The blur() method removes focus from the current window.
setinterval
Keeps executing code at a certain interval
ETT)
setTimeout
Executes the code after a certain interval of time
close
The Window. close() method closes the current window
crore 0
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
oun ( )
open
Opens a new windowwindow.open("https: //waw. codewithharry com");
prompt
Prompts the user with a text and takes a value. Second parameter is the default value
SR ee 1s ae
scrollBy
CeO neeran ET e CER)
scrollTo
Scrolls the document to the specified coordinates.
Dror merate
clearinterval
Clears the setinterval. var is the value returned by setinterval call
tris
clearTimeout
Clears the setTimeout. var is the value returned by setTimeout call
stop
Stops the further resource loading
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
querySelectorAll
A selector to select all matching elements
Cooma ae
getElementsByTagName
Select elements by tag name
Cia cise
getElementsByClassName
Select elements by class name
Perera cies eet TE @Rg Eee ID)
Get Element by Id
Select an element by its id
ae ei
Creating Elements
Create new elements in the DOM
createElement
Create a new element
Cem ai
createTextNode
Create a new text node