JavaScript – Session GrowTech Marathahalli, Bengaluru Page 1
Introduction to JavaScript
Full Stack Development Program
JS GrowTech Marathahalli, Bengaluru
Made by: Arun Kumar
■ Session Overview
What is JavaScript? Role in Web Dev Theory + Demo
Introduction to JS & Types Theory + Live Code
Variables & Data Types Theory + Live Code
Operators & Control Structures Theory + Code
Functions & Objects (intro) Theory + Code
Hands-on Exercises Lab
Q&A; + Recap Discussion
■ Students already know HTML & CSS. Connect every JS concept to what they already know — the DOM,
styles, and page structure.
GrowTech Marathahalli, Bengaluru | Full Stack Development Program Made by: Arun Kumar
JavaScript – Session GrowTech Marathahalli, Bengaluru Page 2
PART 1 — What is JavaScript?
1.1 The Role of JavaScript in Web Development
JavaScript is the only programming language that runs natively in the browser. While HTML gives structure
and CSS gives style, JavaScript gives behaviour. Together they form the three pillars of the web.
HTML Skeleton of the page — elements, tags, content
CSS Skin of the page — colors, fonts, layout
JavaScript Muscles — makes things move, react, and think
1.2 Where does JS run?
• Browser — Chrome, Firefox, Safari all have a built-in JS engine (V8 in Chrome).
• Server — [Link] lets JS run on the server (we will cover this later in the course).
• Everywhere — mobile apps, desktop apps, IoT devices.
■■ Live Demo: Open Chrome DevTools (F12) Console type 2 + 2 and press Enter. JS is already
running on every webpage!
1.3 How to include JavaScript in HTML
There are three ways — always prefer the external file approach in real projects:
Ways to include JavaScript
<!-- 1. Inline (avoid for real projects) -->
<button Me</button>
<!-- 2. Internal Script Tag -->
<script>
[Link]('Hello from internal script');
</script>
<!-- 3. External File (BEST PRACTICE) -->
<script src="[Link]" defer></script>
■■ Always place the script tag at the bottom of body OR use the 'defer' attribute — this ensures HTML loads
before JS runs.
GrowTech Marathahalli, Bengaluru | Full Stack Development Program Made by: Arun Kumar
JavaScript – Session GrowTech Marathahalli, Bengaluru Page 3
PART 2 — Variables & Data Types
2.1 Declaring Variables — var vs let vs const
In modern JavaScript (ES6+), we use let and const. The old var is still valid but has quirky scoping rules
Variable Declaration
// var — OLD way, function-scoped, avoid it
var name = 'Alice';
// let — block-scoped, value CAN change
let age = 25;
age = 26; // ■ allowed
// const — block-scoped, value CANNOT be reassigned
const PI = 3.14159;
// PI = 3; ■ TypeError: Assignment to constant variable
// Best Practice: always start with const, switch to let only if needed
■ Analogy for students: const is like a pen — once you write, it stays. let is like a pencil — you can erase and
rewrite.
2.2 Data Types
JavaScript has 7 primitive types + Objects. Students coming from HTML/CSS will find this the most new
concept:
String 'Hello' / "World" Text — use single or double quotes
Number 42 / 3.14 / -10 JS has only ONE number type (no int/float split)
Boolean true / false Only two values — used in conditions
Undefined let x; x is undefined Variable declared but not assigned
Null let val = null Intentional empty value (developer sets it)
BigInt 9007199254740991n Very large numbers — rare, mention briefly
Symbol Symbol('id') Unique identifier — advanced, mention only
typeof operator — use this to check data types
// Check the type of any value using typeof
[Link](typeof 'Hello'); // 'string'
[Link](typeof 42); // 'number'
GrowTech Marathahalli, Bengaluru | Full Stack Development Program Made by: Arun Kumar
JavaScript – Session GrowTech Marathahalli, Bengaluru Page 4
[Link](typeof true); // 'boolean'
[Link](typeof undefined); // 'undefined'
[Link](typeof null); // 'object' famous JS quirk!
[Link](typeof []); // 'object'
[Link](typeof {}); // 'object'
■■ typeof null returns 'object' — this is a well-known JavaScript bug from 1995 that was never fixed to
maintain backward compatibility. Tell students to remember this quirk!
GrowTech Marathahalli, Bengaluru | Full Stack Development Program Made by: Arun Kumar
JavaScript – Session GrowTech Marathahalli, Bengaluru Page 5
PART 3 — Type Coercion & Conversion
3.1 Implicit Coercion (JS does it automatically)
JavaScript is loosely typed — it tries to convert types automatically. This can cause unexpected bugs:
Implicit Type Coercion Examples
[Link]('5' + 3); // '53' string concatenation wins
[Link]('5' - 3); // 2 arithmetic conversion
[Link](true + 1); // 2 true becomes 1
[Link](false + 1); // 1 false becomes 0
[Link]('' == false); // true loose equality danger!
[Link](0 == false); // true another loose equality trap
3.2 Explicit Conversion (you control it)
Explicit Type Conversion
// To String
String(42) // '42'
String(true) // 'true'
(42).toString() // '42'
// To Number
Number('42') // 42
Number('') // 0
Number('hello') // NaN (Not a Number)
parseInt('42px') // 42 (stops at non-numeric)
parseFloat('3.14') // 3.14
// To Boolean
Boolean(0) // false
Boolean('') // false
Boolean(null) // false
Boolean('hello') // true
Boolean(42) // true
■ Golden Rule: Always use === (strict equality) instead of == (loose equality). === checks both value AND
type — no surprises!
GrowTech Marathahalli, Bengaluru | Full Stack Development Program Made by: Arun Kumar
JavaScript – Session GrowTech Marathahalli, Bengaluru Page 6
PART 4 — Operators & Control Structures
4.1 Operators Quick Reference
Arithmetic + - * / % ** 10 % 3 1 (modulo) / 2**3 8 (power)
Assignment = += -= *= /= x += 5 is same as x = x + 5
Comparison == != === !== > < >= <= Always prefer === over ==
Logical && || ! true && false false | !true false
Ternary condition ? val1 : val2 age>=18 ? 'Adult' : 'Minor'
4.2 if / else if / else
if / else if / else
let score = 75;
if (score >= 90) {
[Link]('Grade: A');
} else if (score >= 75) {
[Link]('Grade: B'); // this runs
} else if (score >= 60) {
[Link]('Grade: C');
} else {
[Link]('Grade: F');
4.3 Loops
Loop Types
// for loop — when you know the count
for (let i = 0; i < 5; i++) {
[Link]('Count:', i); // 0, 1, 2, 3, 4
}
// while loop — when you don't know the count
let i = 0;
while (i < 5) {
[Link]('Count:', i);
i++;
}
GrowTech Marathahalli, Bengaluru | Full Stack Development Program Made by: Arun Kumar
JavaScript – Session GrowTech Marathahalli, Bengaluru Page 7
// for...of — looping over arrays (modern & clean)
let fruits = ['Apple', 'Mango', 'Banana'];
for (let fruit of fruits) {
[Link](fruit);
4.4 switch Statement
switch Statement
let day = 'Monday';
switch (day) {
case 'Monday':
[Link]('Start of work week!');
break;
case 'Friday':
[Link]('Almost weekend!');
break;
default:
[Link]('Regular day');
}
// Remember: always add 'break' — without it, execution falls through!
GrowTech Marathahalli, Bengaluru | Full Stack Development Program Made by: Arun Kumar
JavaScript – Session GrowTech Marathahalli, Bengaluru Page 8
PART 5 — Functions & Objects (Introduction)
5.1 Functions — Reusable blocks of code
A function is a reusable block of code. Think of it like a custom HTML tag — you define it once and use it
many times:
Three ways to write functions
// 1. Function Declaration
function greet(name) {
return 'Hello, ' + name + '!';
}
[Link](greet('Alice')); // Hello, Alice!
// 2. Function Expression
const add = function(a, b) {
return a + b;
};
[Link](add(3, 4)); // 7
// 3. Arrow Function (ES6) — modern shorthand
const multiply = (a, b) => a * b;
[Link](multiply(3, 4)); // 12
// Arrow with multiple lines needs curly braces + return
const square = (n) => {
let result = n * n;
return result;
};
■ Arrow functions are the most used in modern React development. Get students comfortable with them early
— they'll see them everywhere!
5.2 Objects — Key-Value pairs
Objects store related data together. Connect to HTML: an element has properties like id, class, style — that's
just an object!
Objects
// Creating an Object
const student = {
name: 'Alice',
age: 22,
course: 'Full Stack',
isActive: true
GrowTech Marathahalli, Bengaluru | Full Stack Development Program Made by: Arun Kumar
JavaScript – Session GrowTech Marathahalli, Bengaluru Page 9
};
// Accessing properties
[Link]([Link]); // Alice (dot notation)
[Link](student['course']); // Full Stack (bracket notation)
// Adding / updating properties
[Link] = 'Bangalore'; // adds new property
[Link] = 23; // updates existing
// Object with a method (function inside object)
const person = {
name: 'Bob',
greet() {
return 'Hi, I am ' + [Link];
}
};
[Link]([Link]()); // Hi, I am Bob
GrowTech Marathahalli, Bengaluru | Full Stack Development Program Made by: Arun Kumar
JavaScript – Session GrowTech Marathahalli, Bengaluru Page 10
✏■ Hands-on Exercises
Instructions for Trainer: Give students 30 minutes. Walk around and help. Encourage them to use
[Link] to debug.
✏■ Exercise 1: Hello JavaScript
■ Create an HTML file with an external JS file linked.
■ In your JS file, use [Link] to print your name, age, and course name.
■ Use typeof to print the type of each variable.
■ Open the browser console and verify your output.
Expected: name: Alice | age: 22 | course: Full Stack
✏■ Exercise 2: Temperature Converter
■ Write a function convertToCelsius(fahrenheit) that converts Fahrenheit to Celsius.
■ Formula: C = (F - 32) × 5/9
■ Test it with: 32°F 0°C, 98.6°F 37°C, 212°F 100°C
■ Use const for the function, log results with a clear message like '32°F = 0°C'
Expected: 32°F = 0°C | 98.6°F = 37°C | 212°F = 100°C
✏■ Exercise 3: Grade Calculator
■ Create a function getGrade(score) that returns a grade string.
■ 90-100 'A', 75-89 'B', 60-74 'C', below 60 'F'
■ Use if/else if/else inside the function.
■ Test with scores: 95, 80, 65, 45 and log each result.
Expected: 95 A | 80 B | 65 C | 45 F
✏■ Exercise 4: Student Profile Object
GrowTech Marathahalli, Bengaluru | Full Stack Development Program Made by: Arun Kumar
JavaScript – Session GrowTech Marathahalli, Bengaluru Page 11
■ Create an object called myProfile with properties: name, age, city, hobbies (array), and a method
introduce().
■ The introduce() method should return a sentence using all properties.
■ Add a new property 'course' after creation using dot notation.
■ Log the full object and also call the introduce() method.
Expected: Hi, I'm Alice, 22 from Bangalore. I love coding, chess. I study Full Stack.
✏■ Exercise 5: FizzBuzz (Bonus)
■ Use a for loop from 1 to 50.
■ If the number is divisible by 3 print 'Fizz'
■ If divisible by 5 print 'Buzz'
■ If divisible by both 3 and 5 print 'FizzBuzz'
■ Otherwise print the number. Hint: use the % (modulo) operator.
Expected: 1 2 Fizz 4 Buzz Fizz 7 8 Fizz Buzz 11 Fizz 13 14 FizzBuzz ...
GrowTech Marathahalli, Bengaluru | Full Stack Development Program Made by: Arun Kumar
JavaScript – Session GrowTech Marathahalli, Bengaluru Page 12
■ Quick Reference — Student Cheatsheet
Variable Declaration
const PI = 3.14; // cannot reassign
let counter = 0; // can reassign
// var oldWay = 'avoid'; // avoid in modern JS
Data Types
typeof 'text' // 'string'
typeof 42 // 'number'
typeof true // 'boolean'
typeof undefined // 'undefined'
typeof null // 'object' (quirk!)
typeof [] // 'object'
typeof {} // 'object'
Equality — Always use ===
5 === 5 // true ■ checks value + type
5 === '5' // false ■ number vs string
5 == '5' // true ■ avoid — loose equality
Arrow Functions
const greet = (name) => 'Hello, ' + name;
const add = (a, b) => a + b;
const square = n => n * n; // single param: no brackets needed
Common String Methods
let s = 'JavaScript';
[Link] // 10
[Link]() // 'JAVASCRIPT'
[Link]() // 'javascript'
[Link]('Script') // true
[Link](0, 4) // 'Java'
[Link]('') // ['J','a','v','a',...]
Useful console methods
[Link]('message', variable); // basic logging
[Link]('Error message'); // red error log
[Link]('Warning'); // yellow warning
GrowTech Marathahalli, Bengaluru | Full Stack Development Program Made by: Arun Kumar
JavaScript – Session GrowTech Marathahalli, Bengaluru Page 13
[Link]([{a:1},{a:2}]); // tabular view
[Link](); // clear the console
■ Assessment — to be done before next session
1. Complete all 5 exercises if not finished in class.
2. Build a simple calculator page — HTML form + JS functions for add, subtract, multiply, divide.
3. Read about Arrays in JavaScript (we start Day 2 with Arrays and Array methods).
4. Explore: MDN Web Docs JavaScript Guide
[Link]
Next Session Preview: Variables & Datatypes deep dive, then Promises, Callbacks, and ES6 features.
GrowTech Marathahalli, Bengaluru | Full Stack Development Program Made by: Arun Kumar
