JavaScript: JavaScript is a programming and scripting language widely used in web
development. It plays a crucial role in both front-end and back-end development, enabling
dynamic and interactive user experiences.
JavaScript is the world's most popular programming language.
JavaScript is the programming language of the Web.
JavaScript is easy to learn.
JavaScript Can Change HTML Content
JavaScript Can Change HTML Attribute Values
JavaScript Can Change HTML Styles (CSS)
JavaScript Can Hide HTML Elements
JavaScript Can Show HTML Elements
Application of Js
Web Development: Adding interactivity and behavior to static sites
Web Applications: to create robust web applications. When we explore a map in
Google Maps.
Server Applications: With the help of Node.js, JavaScript made its way from client to
server and Node.js is the most powerful on the server side.
Games: Not only in websites, but JavaScript also helps in creating games. The
combination of JavaScript and HTML 5 makes JavaScript popular in game
development as well
Machine Learning: This JavaScript ml5.js library can be used in web development by
using machine learning.
Mobile Applications: JavaScript can also be used to build an application for non-web
contexts. The features and uses of JavaScript make it a powerful tool for creating
mobile applications
Output Methods in Js:
Writing into an HTML element, using document.getElementById(“
“ ) .innerHTML=”message”;
Writing into the HTML output using document.write();
Writing into an alert box, using window.alert();
Writing into the browser console, using console.log();
Six other escape sequences are valid in JavaScript:
Code Result
\b Backspace
\f Form Feed
\n New Line
\r Carriage Return
\t Horizontal Tabulator
\v Vertical Tabulator
There are 3 ways to include JavaScript in HTML:
External JavaScript: create a separate js file and link it to the html file using –
<script src="FILE.JS"></script>
Internal JavaScript: add a block of code in the HTML document itself (specially in
between <head></head or right before closing of </body>– <script>DO
SOMETHING</script>
Inline JavaScript: directly add JavaScript to an HTML element – <input
type="button" value="Test" onclick="FUNCTION()">
JavaScript has 2 main Datatypes
Primitive
o String
o Number
o Integer
o Boolean
o Undefined
Non-Primitive
o RegExp
o Array
o Object
Note: Variables are memory container that has name and used to store value for
the program.
JavaScript Variables can be declared in 3 ways:
Using var: To declare global variable. Mostly accepted by all version of browser
Using let: To declare local variable. Used when const cannot be used.
Using const: To declare both local and global variable but the value cannot be
changed during program execution. Mostly used in today’s gen browser.
The general rules for constructing names for variables (unique identifiers) are:
Names can contain letters, digits, underscores, and dollar signs.
Names must begin with a letter.
Names can also begin with $ and _ (but we will not use it in this tutorial).
Names are case sensitive (y and Y are different variables).
Reserved words (like JavaScript keywords) cannot be used as names.
Types of JavaScript Operators
There are different types of JavaScript operators:
Arithmetic Operators
Assignment Operators
Comparison Operators
String Operators
Logical Operators
Bitwise Operators
Ternary Operators
Type Operators
Arithmetic Operator:
Operato Description
r
+ Addition
- Subtraction
* Multiplication
** Exponentiation (ES2016)
/ Division
% Modulus (Division Remainder)
++ Increment
-- Decrement
Assignment Operator
Operator Example Same As
= x=y x=y
+= x += y x=x+y
-= x -= y x=x-y
*= x *= y x=x*y
/= x /= y x=x/y
%= x %= y x=x%y
**= x **= y x = x ** y
Comparison Operator/ Logical Operator
Operato Description
r
== equal to
=== equal value and equal type
!= not equal
!== not equal value or not equal type
> greater than
< less than
>= greater than or equal to
<= less than or equal to
? ternary operator
Typeof Operator
Operator Description
typeof Returns the type of a variable
instanceof Returns true if an object is an instance of an
object type
Bitwise Operator
Operato Description Example Same Resul Decima
r as t l
& AND 5&1 0101 & 0001 1
0001
| OR 5|1 0101 | 0101 5
0001
~ NOT ~5 ~0101 1010 10
^ XOR 5^1 0101 ^ 0100 4
0001
<< left shift 5 << 1 0101 1010 10
<< 1
>> right shift 5 >> 1 0101 0010 2
>> 1
>>> unsigned right 5 >>> 1 0101 0010 2
shift >>> 1
Image Methods:
document.getElementById('myImage').src='location of image to be changed';
Basic String Methods
Javascript strings are primitive and immutable: All string methods produce a new string
without altering the original string.
String length
String charAt()
String charCodeAt()
String at()
String [ ]
String slice()
String substring()
String substr()
String toUpperCase()
String toLowerCase()
String concat()
String trim()
String trimStart()
String trimEnd()
String padStart()
String padEnd()
String repeat()
String replace()
String replaceAll()
String split()
Maths Objects methods:
Math.E // returns Euler's number
Math.PI // returns PI
Math.SQRT2 // returns the square root of 2
Math.SQRT1_2 // returns the square root of 1/2
Math.LN2 // returns the natural logarithm of 2
Math.LN10 // returns the natural logarithm of 10
Math.LOG2E // returns base 2 logarithm of E
Math.LOG10E // returns base 10 logarithm of E
Date Methods:
Method Description
setDate() Set the day as a number (1-31)
setFullYear() Set the year (optionally month and day)
setHours() Set the hour (0-23)
setMillisecond Set the milliseconds (0-999)
s()
setMinutes() Set the minutes (0-59)
setMonth() Set the month (0-11)
setSeconds() Set the seconds (0-59)
setTime() Set the time (milliseconds since January 1, 1970)
Basic Array Methods
Array length
Array toString()
Array at()
Array join()
Array pop()
Array push()
Array shift()
Array unshift()
Array delete()
Array concat()
Array copyWithin()
Array flat()
Array splice()
Array toSpliced()
Array slice()
Number Method Description
toString() Returns a number as a string
toExponential() Returns a number written in exponential notation
toFixed() Returns a number written with a number of decimals
toPrecision() Returns a number written with a specified length
valueOf() Returns a number as a number
Events in js
Event Description
onchange An HTML element has been changed
onclick The user clicks an HTML element
onmouseove The user moves the mouse over an HTML element
r
onmouseout The user moves the mouse away from an HTML
element
onkeydown The user pushes a keyboard key
onload The browser has finished loading the page
