■ Comprehensive JavaScript Workshop
Notes
Prepared by: Hafijur
A complete JavaScript learning guide for beginners and workshop participants. Includes
detailed theory, syntax, examples, and exercises.
Part 1: JavaScript Basics
JavaScript (JS) is the programming language of the web. It allows you to make web pages
interactive and dynamic. HTML provides the structure, CSS provides styling, and JS adds
behavior.
Ways to run JS:
1. Inside HTML tags 2. External JS file (linked using <script src='[Link]'>) 3. Using the
browser console (press F12 → Console tab)
Variables store data values and are declared using let, const, or var.
let name = 'Hafijur'; const pi = 3.14; var age = 20;
Rules: - Use let for changeable values. - Use const for constants. - var is old and should
be avoided.
Exercise: Declare your name and age using let and print them to the console.
Part 2: Data Types and Operators
JavaScript has primitive and non-primitive data types.
Examples of data types:
let name = 'Riya'; // String let age = 20; // Number let isStudent = true;
// Boolean let fruits = ['Apple', 'Mango']; // Array let student =
{name:'Aarav', roll:21}; // Object
Operators in JavaScript include arithmetic (+, -, *, /), comparison (==, ===, !=), and logical
(&&, ||, !).
let a = 10, b = 5; [Link](a > b && a != 0);
Exercise: Create two numbers and compare them using all comparison operators.
Part 3: Control Flow
Conditional statements control decision-making in JS.
if (age >= 18) { [Link]('You can vote'); } else { [Link]('Not
eligible'); }
Loops are used to execute code multiple times.
for(let i=1; i<=5; i++) { [Link]('Count:', i); }
Exercise: Write a loop to print numbers from 1 to 10.
Part 4: Functions
Functions are reusable blocks of code that perform a specific task.
function greet(name) { [Link]('Hello ' + name); } greet('Hafijur');
Arrow Function (modern):
const add = (a, b) => a + b; [Link](add(5,7));
Exercise: Write a function to find the square of a number.
Part 5: DOM Manipulation
The DOM (Document Object Model) lets JavaScript interact with HTML elements.
Welcome Click function changeText() {
[Link]('heading').innerText = 'Hello JavaScript!'; }
Exercise: Create a button that changes the background color when clicked.
Part 6: Events
Events allow JavaScript to respond to user actions like clicks, typing, or mouse
movements.
[Link]('btn').addEventListener('click', () => {
alert('Button Clicked!'); });
Exercise: Make an input box that displays what the user types in real-time.
Part 7: Timing and Local Storage
Timing functions are used to delay or repeat actions.
setTimeout(() => [Link]('Hello after 2s'), 2000); setInterval(() =>
[Link]('Repeating...'), 1000);
Local Storage stores small data in the browser.
[Link]('name', 'Hafijur');
[Link]([Link]('name'));
Part 8: Quick Cheat Sheet
A quick summary of important concepts and syntax.
Variables: let, const Condition: if, else, switch Loop: for, while
Function: function name(){} Array: push(), pop() Object: { key: value }
DOM: getElementById(), querySelector() Event: addEventListener()
Part 9: Practice Questions
1. Print numbers from 1 to 10. 2. Write a function that adds two numbers. 3. Create an
array of colors and print them. 4. Make an object 'student' with name, roll, marks. 5. Add a
button that changes text on click. 6. Write a program that prints all even numbers from 1 to
20.
