JAVASCRIPT HANDWRITTEN NOTES
Part 4
1. INTRODUCTION TO JAVASCRIPT
© What is JavaScript ?
> JavaScript is a lightweight, interpreted programming language
used to make web pages interactive and dynamic.
It is one of the core technologies of the web along
with HTML and CSS.
* Why JavaScript ?
> It allows us to add behavior to web pages.
It can update and change both HTML and CSS
* Where does JavaScript run ?
> In the Browser (Client-side)
> On the Server using Node. js (Server-side)
* Role of JavaScript in Web Development
HTML css JavaScript
fogether they
Structure [>| Style and |——>| Behavior and idles eBlade
of the page Design Interactivity OM oeee
2. HOW JAVASCRIPT WORKS ?
User action JavaScript bon Changes. are
(Click, Type, |—>] Code |] gta [>] visible on
Scroll, ete.) Executes a the page
Note : DOM (Document Object Model) is a representation of the
HTML structure that JavaScript can access and manipulate.
3. YOUR FIRST JAVASCRIPT CODE
© Example :
Output in Console :
Helle, JavaSeript | —> You can check the output by
opening browser console 4. VARIABLES IN JAVASCRIPT
Variables are used to store data values
+ Tn JavaScript, we can declare variables using
var, let and const
Example
ver a = 10;
var let const let b = 20;
const ¢ = 305
+ Function scoped | + Block scoped + Block scoped
+ Can be re-declared | + Cannot be + Cannot be
a= 15; I allowed
Can be updated | revdelared re-declared Tess Fr clsoed
+ Hoisted with | + Can be updated | + Cannot be updated = 35; // not allowed
undefined. + Heised but in |» Must be initialised
Temporal. Dead at the time of EL ze
Zone (TDZ) declaration SE oleae
instead of var
2. DATA TYPES IN JAVASCRIPT
Data types are basically used to define the type of value a variable can hold
Symbol (ESC)
Data. Types
Primitive (7) Non-Primitive / Reference
: =a + Object
«© Number oh
Ore Spe
+ Undefined
+ Null
BigInt (£52020)
TYPEOF OPERATOR
Example
let name = “Aman”; I) String
let age = 22; 11 Namber
let Student = trues 11 Boolean
let x; H Undefined
let y = null; 11 Null
let id = Symbol(‘id’); UL Symbol
let big = 1234567890123456789012345678901234567840n; // BigInt
let obj = {name "Aman"}; Uf Object
let arr = (1, 2, 3]5 I Brrag
function greet() MI Function
typeof operator is used to find the type of a variable.
Example
console log (typeof “Aman”)
console-log (typeof 22);
console. log (typeof true);
console-log (typeof null) ;
console log (typeof Lt, 2, 3]
console-log (typeof functionl
5H ang
H rarber
7 boolean
console log (typeof undefined); /f undefined
H object
console log (typeof frame: "Aman"}); // object
5M object
YD; M1 function
Note :
'
| + typeof null returns “object” (this i a
| known bug. in JavaScript)
| 4 Arrays and Objects both return object"
' 4. OPERATORS IN JAVASCRIPT
+ Operators are used to perform operations on variables and values
Types of Operators
Type Description
Arithmetic Used for mathematical, operations
Assignment Used to assign values
Comparison. Used to compare two values ae
Logical Used to combine multiple conditions eeu
Unary Used with a single operand Y=
Ternary Shorthand if. else condition ? expel + expr2
Arithmetic Operators :
| Example =
+ Addition | Wt a = 10, b=3
=__Siblrecfien’ | console..log(a +b) ; 33
+ Multiplication | console. log(a ~ 6); Nt
[maa | console-log(a * b); 1 30
% Modulus (remainder) 1 console. log(a / b); Hf 3.333.
++ Trerement ' yt
~~ Decrement t Wa
t Wr
Comparsion Operators :
1 Example
ce fell 5 ! jis
I= Not equal to sn -
p | console H) false (type different)
> Greater than {
| console W true
eee corel Whee
Greater then or equal to ' . iets
fees ae te
Strict equal (value ond type) |“
| console. log(5 <= 4); se
Strict nob equal (value and type) | Pe AY Hi $e
Logical Operators : , Example : | Ternary Operator :
4B — Logical AND |} console-log(true && false); // false | condition 7 expri : expr?
I] Logical OR | [Link](trus II false); // true | Example
egies NOT! Gs econese Lara) ee) een Se
let result = age >= 18 ? “Adult” : “Minor”;
console. log (result); — // Adult 5. CONTROL STATEMENTS
+ These statements are used 42 control the flow of execution
2) if statement
J (condition) {
Ms code
}
4) switch statement
switch (variable) {
case valued:
MW code
break;
ease value2:
MH code
break;
default:
HW code
b) if-else statement
@) if-else if-else ladder
if (condition) { F (conditions) {
We code if true fh cxha.
Poe } else if (condition?) {
is MW code
H cade if, false ae
i W code
}
e) Loops
saree Flow
for Coin; lon rena amt)
3 ae
False
+ while loop es
Tohile Ceondition’)
Mi Execute Code
3
+ do. .while loop i
eG Next Statement }e—J
W eode
} while Ceonsditign);
6. FUNCTIONS IN JAVASCRIPT
+ A function is a block of code designed to perform a particular task.
+ Function Declaration
= Function Expression.
© Arrow Function.
faa palGaryT
‘console log ( “Hello, "+ name);
}
greet ("Amen"); // Function Call
const greet» function
console log ("Hell
h
greet ("Aman”);
const greet = (name) => {
console. log (Hello, "+ name);
hb
greet (“Aman”);
Note : Functions help in code reusability and keep our code organized.
7. COMMENTS IN JAVASCRIPT
I) This is a single line comment
,
This is
a multi-line
comment,
ey
Example
conslelog(10); //- prints. 10
console: tog(20); /* prints 20 on
two line comment */
console log(30); // prints 30 | 8. ARRAYS IN JAVASCRIPT
+ Array is a special type of object used to store
multiple values in a single variable,
Common. Array Methads
+ Index of on array starts from 0 + push) > adds element ak the ond
Example * pop) > removes last element
let fruits = [“Apple”, “Banana”, “Mango” ); © shift() removes first. element
oO 1 2 # unshift() > adds element at the beginning
index —> | Apple. Banana | Mango + Length > returns mumber of elements
+ indexOf() > returns index of element
Accessing Elements Example
+ fruits[0] > Apple let feuits = ["Apple”, "Bonana”, "Mango"];
+ fruits[1] > Banana fruits push (“Orange”) ; HH. Uhpple”, “Banana”, “Mango”, “Orange” ]
+ fruits(2] > Mango fruits. pop) a a
consle. tog (fruts(4)); UW Banana
4. OBJECTS IN JAVASCRIPT
+ Object is a collection of key-value. pairs
+ Tk is used to store related data and more complex entities
Example
Lat person = { Aecessing Object Properties
name: “Aman”,
age: 22,
city: “Dalni* + personage") > 22
+ [Link] > Aman
i
+ [Link] > Delhi
40. _TYPE_CONVERSION
+ TevaScript automatically converts one type into another
Example
cancle lg (person name)
conde log ptr Za5e°1);
lek person + { name: “Aman”, age: 22, city: "Delhi" };
W dman
22
# Tivo types : Implicit Conversion and Explicit Conversion
Implicit Conversion (Automatic)
+ undefined +1 NoN (Not a Number)
+2 =» "52" (string) to.
2 Ss 3 Coumber Y a
stu tt > 2 (number) t
sft > 4 (number) i
valle {=> 1 —“‘Grambar) !
Explicit Comerson (Manual)
String to Number : Number ("123")
Number to Sting : String (123)
Boson to String : String (true)
Shing be Nanker + pareTab(“45")
> 123
tas
erate
45
porsefloak ("45,67") > 45.67
Example +
lt a + "10"; 1 let b+ 20;
console-Log (typeef a); Uy string —\—conacle. Log (typesf. String (b))5 M1 shing
console. lag (typeof Number(a)); // number
console tog (typeof (a+ b));
Using ("1020") 44. STRING METHODS
+ Strings ore used to represent and manipulate text
Common String Methods
Example
Method
Length. Returns length of the string
tollpperCase() | Converts string to uppercase
tolowerCase() | Converts string to lowercase
trim() Removes uhitespace from both ends
sice(start, end) | Extracts part of a string
replace(old, new) | Replaces a value in string
includes(value) | Checks if string contains value
let mag = “Hello JavaScript”;
console log (meg. Length) ; 46
console log ([Link]());,//) HELLO. JAVASCRIPT
console og [Link]()); // hello javascript
console: log (msg-trim()) j MH “Helle TavaSerigt
console. log ([Link](6,10)); // Java.
console. log ([Link]( "JavaScript", “J5")); // Hello JS
concole log (msg. includes( Java"); // true
412. TEMPLATE
+ Template literals
LITERALS.
allow embedded expressions and multi-line strings
Example ae
rs i wis
let age = 2: Hello, Aman ! eda i
let meg = Use bocktick (*) instead
Hello, ${name} ! giana ese single or double quotes
You are $foge} years old
console «log (msg) ;
43. CONDITIONAL (TERNARY) OPERATOR
+ Short hand if...else statement
Use $£} to embed variables
or expressions
Example
let age = 18;
condition ? expression-if-true : expression if flee
“Minor”;
lek result = (age >= 48) ? “Adult”
44. EVENTS IN JAVASCRIPT
+ Events are actions or occurrences that happen in. the
+ TovaSeript can be used to handle these events
Common Events
console log (result); // Adult
lick mouseover | [ mouseout eydoun,
Occurs when | | Occurs when | | Ocers when | | Occurs when
an elenent | | mouse printer | | mouse pointer| | a key is
is licked. | | moves over. | | moves out presse,
browser. Example (click event)
document gAElenenBIA oa")
edaGventistena(“ehick”, function() {
aoe alert (“Button Clicked !");
Gear wn! | yy
a form ie i
snbmittel. | HTML + Click Me eee eee hahaa
15. DOM (DOCUMENT OBJECT MODEL)
+ DOM represents the structure of an HTML document as a. tree.
+ TovaScript can access ond update the content, structure and
style of the page using the DOM
Example:
Accessing DOM Elements :
Document + document getElementByld() > by id
{ + document. getElementsByClassName() > by class
uu + document. getElementsByTagNamel) > by tag
= + document .querySelector() > by ess. selector
= cor + document .querySelectorAll() > all matching
| Example:
poe Ht ° Hello DOM¢/ka>
My Page | Welcomes /p>
Hello This iso let ht = document. getElementByld (“title”);
reste
16. EVENT HANDLING
+ Events are actions that eccur in the browser
+ We can respond to events using event listeners
Uk p = document. getElementsByClassName( “text” (01;
ht innerText = "Hello. JavaScript”;
peimerText = “Welcome to JS";
Common Events Example (click event)
Event. Description
