Lesson: JavaScript Fundamentals (Client-Side)
What Is JavaScript?
JavaScript is the programming language of the Web — a core technology alongside
HTML and CSS. It adds interactivity and dynamic behavior to web pages. JavaScript runs in
the browser, letting the page respond to user actions such as clicks, typing, and page loading.
It can update and change HTML and CSS after the page loads.
It can validate input, calculate values, show/hide elements, and more.
JavaScript can manipulate the Document Object Model (DOM), which
represents the structure of a webpage in the browser.
W3Schools provides a complete tutorial covering from basics up to advanced topics
1. How JavaScript Works (Client-Side)
Client-side JavaScript runs in the user’s browser, not on the server.
This means the browser interprets and executes the JavaScript code as the page
loads or when events happen.
Main Points:
Browser contains a JavaScript engine (e.g., Chrome’s V8) that executes JS.
JS can change the content and style of a web page dynamically.
It reacts to user events — like clicks, mouse movements, form submissions,
etc.
JavaScript Syntax Basics
2. Inserting JavaScript
JavaScript is placed into HTML pages using <script> tags:
It can be written directly in HTML or in an external .js file.
3. Core Fundamentals
Variables
Variables store data values. JavaScript uses keywords like let, const, and var.
Variables let you reuse and manipulate values.
Data Types
Common JavaScript data types:
String — text ("Hello")
Number — numeric (25)
Boolean — true/false (true)
Undefined / Null — empty/unknown (undefined)
Operators
Used to perform operations on values:
Arithmetic (+, -, *, /)
Comparison (==, ===, >, <)
Functions
Functions are reusable blocks of code that perform tasks.
Call a function by its name: greet();
4. Interacting with HTML DOM
The DOM (Document Object Model) is a representation of the web page structure.
JavaScript can:
Change element content
Change styles dynamically
Add or remove elements
Respond to events like clicks or key presses
Example:
5. Events in JavaScript
Events are actions performed by the user or browser (like clicking a button).
Examples:
onclick — user clicks a button
onchange — user changes input text
onload — page has finished loading
Example:
Quick Summary of What JavaScript Can Do
JavaScript is used to:
Modify HTML
Change CSS styles
Validate user input
Create animations
Handle events
Build interactive web pages
In-Class Activity (30–40 minutes) - Activity: Simple Interactive Webpage (Individual)
Objective: Create a webpage with interactive JavaScript features using what we learned.
Instructions:
1. Create an HTML file named [Link]
2. Add the following features using JavaScript:
A. A button that shows an alert when clicked.
B. A text input and a button that shows the input value when clicked.
C. A paragraph that changes color when the mouse hovers over it.
3. Use both:
A. Embedded JavaScript (<script>)
B. DOM manipulation ([Link](...))
4. At the end, share your code with the class.
You can use the W3Schools JavaScript Tutorial for reference and examples during the
activity: [Link] or use AI for assistance.
