Javascript Fundamentals
J avaScript is a programming language that runs in web browsers, allowing web pages
to become interactive, dynamic, and responsive. Unlike HTML (structure) and CSS
(styling), JavaScript adds behavior to web pages.
Key Characteristics
● Client-Side Execution: Runs entirely in the user's browser. It enables dynamic
content and interactive elements without constant communication with a server.
● Interactivity: Responds to user actions (clicks, typing, scrolling)
● Dynamic Updates: Can modify page content without reloading
● Event-Driven: Reacts to events like clicks, form submissions, etc.
● Versatile: Used for everything from simple animations to complex web
applications
Common Uses
● Form Validation: Check user input before submission
● Dynamic Content: Update page without refreshing
● Animations: Create interactive animations
● API Calls: Fetch data from servers
Simple Example:
!DOCTYPE html>
<
<html>
<head>
<title>JS Demo</title>
</head>
<body>
<h1 id="greeting">Hello Visitor!</h1>
<button onclick="changeText()">Change Text</button>
<button onclick="showTime()">Show Time</button>
<script>
function changeText() {
[Link]("greeting").innerHTML = "Welcome to JavaScript!";
}
function showTime() {
const now = new Date();
alert("Current time: " + [Link]());
}
</script>
</body>
</html>
Variable
ontainers for Storing Data. 3 ways:var, let, const
C
var: Declares a function-scoped or globally-scopedvariable, optionally initializing it to a
value
let: Declares a block-scoped local variable, optionally initializing it to a value
c onst: Same of let. However, the value of const variablescan NOT be changed through
reassignment and even can NOT be redeclared.
Data Type
1. P rimitive values: string, number, boolean, Special numeric (Infinity, -Infinity, NaN)
bigInt, hugeNumber, null etc.
2. Non-Primitive (Reference): Object - Collection of key-value pairs, array, functions,
Date, regular expressions
variables and data [Link]
Function Call
basic function call [Link]
DOM
OM as a tree representation of an HTML page:TheDOM (Document Object Model) is
D
the browser’s in-memory representation of a web page. Think of it as a hierarchical tree
where every piece of the page is a node in that tree. The root is the Document node,
then branches for <html>, <head>, <body>, and so on. Each element becomes a node
with parent/child and sibling relationships:
his tree model lets scripts and the browser traverse, inspect, modify, add, or remove
T
parts of the page easily.
How browsers interpret HTML into objects (parsing → DOM)
. F
1 etch HTML: browser receives the HTML document.
2. Tokenization & Parsing: the HTML parser reads themarkup and converts it into
tokens (start tags, end tags, text).
3. Tree construction: the parser builds the DOM tree from those tokens. For each
start tag it creates an element node and pushes it onto the tree; for text it creates
text nodes.
4. Resource discovery:as it parses it may find externalresources (CSS, JS,
images).
a. CSS files are fetched and parsed into the CSSOM (CSS Object Model).
b. JavaScript may run during parsing (synchronously if <script> without
defer/async), and scripts can read/modify the DOM as it’s being built.
5. D OM + CSSOM→ Render Tree: once you have DOM + CSSOMthe browser
constructs a render tree (only visible nodes, styled).
6. Layout & Paint: browser computes layout (geometry)and paints pixels.
ey point: the DOM is created progressively while the parser runs. Scripts executed
K
during parsing can see and change the DOM immediately — that’s why script
placement (head vs defer/async vs end of body) matters.
Selecting Elements
[Link]():Selects a single elementby its unique ID.
[Link]():Selects multipleelements that share the
d
same class. Returns a live HTMLCollection (NOT an array).
[Link]():Selects all elementsby tag name (like p,
div, li, button).
[Link]():Selects the first matchingelement using CSS
selectors.
[Link]()
[Link]
Selecting Children
[Link]
How to read or change DOM content
[Link]
Changing HTML Elements
You can also change the value of an HTML attribute.
Changing CSS properties
s a general rule of thumb, in order to get the style property name in javascript, you
A
should change the CSS property name to camelCase!
Adding HTML Elements
Removing Existing HTML Elements
Replacing HTML Elements