Week 3: JavaScript Essentials for Web Applications
1. Introduction to JavaScript
JavaScript is a client-side scripting language that makes web pages interactive. It runs directly in
the browser and allows dynamic manipulation of HTML and CSS.
Use Cases:
Validating form inputs
Responding to user actions (clicks, hover, typing)
Fetching data dynamically (AJAX / APIs)
Animations and DOM manipulation
2. JavaScript Syntax and Data Types
Basic Syntax:
Statements end with a semicolon ;
Blocks of code are enclosed in { }
Comments:
// Single line comment
/* Multi-line comment */
Data Types:
1. String → "Hello"
2. Number → 25, 3.14
3. Boolean → true or false
4. Null → null
5. Undefined → variable declared but not assigned
6. Object → {name: "Eric", age: 25}
7. Array → [1, 2, 3, 4]
Example:
let name = "Eric";
let age = 25;
let isStudent = true;
3. Variables, Operators, and Expressions
Variable Declaration:
var (function-scoped)
let (block-scoped)
const (block-scoped, cannot be reassigned)
let message = "Hello World";
const pi = 3.14;
Operators:
Arithmetic: + - * / %
Assignment: = += -=
Comparison: == === != !== > < >= <=
Logical: && || !
Example:
let a = 10, b = 20;
[Link](a + b); // 30
4. Conditional Statements
Used to control program flow.
If-Else Example:
let age = 18;
if (age >= 18) {
[Link]("You can vote");
} else {
[Link]("You are too young");
}
Switch Statement:
let color = "red";
switch(color) {
case "red":
[Link]("Stop");
break;
case "green":
[Link]("Go");
break;
default:
[Link]("Wait");
}
5. Loops
Used to repeat tasks.
For Loop:
for(let i = 0; i < 5; i++) {
[Link]("Count:", i);
}
While Loop:
let i = 1;
while(i <= 3) {
[Link](i);
i++;
}
6. Functions
Functions are reusable blocks of code.
Declaration:
function greet(name) {
return "Hello " + name;
}
[Link](greet("Eric"));
Arrow Function (ES6):
const add = (x, y) => x + y;
[Link](add(5, 3));
7. DOM Manipulation
The DOM (Document Object Model) allows JavaScript to interact with HTML.
Accessing Elements:
[Link]("demo").innerHTML = "Hello DOM!";
[Link](".btn").[Link] = "red";
Creating Elements:
let p = [Link]("p");
[Link] = "New Paragraph";
[Link](p);
8. Events
JavaScript can react to events like button clicks or input changes.
Inline Event Example:
<button onclick="alert('Button clicked!')">Click Me</button>
Event Listener Example:
[Link]("btn").addEventListener("click", () => {
alert("Button Clicked!");
});
9. ES6 Features
1. let and const:
Provide block-level scoping and prevent redeclaration.
2. Arrow Functions:
Shorter syntax for writing functions.
3. Template Literals:
let name = "Eric";
[Link](`Welcome, ${name}!`);
4. Default Parameters:
function multiply(a, b = 2) {
return a * b;
}
[Link](multiply(5)); // 10
10. Practical Session: Interactive Webpage
Objective:
Create a webpage with form validation and button events.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Interactive Form</title>
</head>
<body>
<h2>Registration Form</h2>
<form id="userForm">
Name: <input type="text" id="name"><br><br>
Email: <input type="email" id="email"><br><br>
<button type="button" id="submitBtn">Submit</button>
</form>
<p id="result"></p>
<script src="[Link]"></script>
</body>
</html>
JavaScript ([Link]):
[Link]("submitBtn").addEventListener("click", function() {
let name = [Link]("name").value;
let email = [Link]("email").value;
if (name === "" || email === "") {
alert("All fields are required!");
} else {
[Link]("result").innerHTML =
`Thank you, ${name}. Your email ${email} has been recorded.`;
}
});
Summary
By the end of this week, learners should be able to:
Understand JavaScript fundamentals and ES6 syntax
Use control structures (if, loops, functions)
Manipulate DOM elements dynamically
Handle browser events for interactivity
Build a small interactive webpage (e.g., form validation)
Week 3: JavaScript Essentials for Web Applications
Concepts
JavaScript syntax and data types
Variables, operators, and expressions
Conditional statements, loops, and functions
DOM manipulation and events
ES6 features (let/const, arrow functions, template literals)
Practical
Create an interactive webpage (form validation, button events)
Part A: Multiple Choice Questions
1. Which of the following is a correct way to declare a variable in JavaScript?
A. int x = 10;
B. let x = 10;
C. var: x = 10;
D. dim x = 10;
2. Which of the following is not a JavaScript data type?
A. String
B. Boolean
C. Float
D. Undefined
3. What is the output of the following code?
let x = 5 + "5";
[Link](x);
A. 10
B. 55
C. Error
D. NaN
4. The keyword const in JavaScript means:
A. The value cannot change after assignment
B. The variable can be redeclared
C. The variable can be reassigned
D. It creates a local variable in a function
5. Which of the following is a valid comment in JavaScript?
A. /* comment */
B. // comment
C. Both A and B
D. <! comment !>
6. What does the === operator do?
A. Compares only values
B. Compares values and data types
C. Assigns a value
D. Checks only data types
7. Which loop executes at least once even if the condition is false?
A. for
B. while
C. do...while
D. foreach
8. How do you write an arrow function in JavaScript?
A. function => {}
B. ( ) -> {}
C. ( ) => {}
D. ( ) <- {}
9. Which method adds an element to the end of an array?
A. push()
B. pop()
C. shift()
D. concat()
10. Which function displays a message in an alert box?
A. prompt()
B. alert()
C. [Link]()
D. confirm()
11. Which object represents the current web page in JavaScript?
A. window
B. screen
C. document
D. form
12. What is the result of the following?
typeof null;
A. "object"
B. "null"
C. "undefined"
D. "boolean"
13. Which method is used to attach an event to an element?
A. attachEvent()
B. addEventListener()
C. onEvent()
D. setEvent()
14. What will the following code output?
let x = 10;
x += 5;
[Link](x);
A. 10
B. 15
C. 5
D. Error
15. Which of the following correctly accesses the value of an input field with id email?
A. [Link]
B. getElementById("email")
C. [Link]("email").value
D. [Link]()
16. What will this code print?
[Link](2 == "2");
[Link](2 === "2");
A. true false
B. false true
C. true true
D. false false
17. Which keyword is used to declare a block-scoped variable in JavaScript?
A. var
B. let
C. scope
D. static
18. Template literals are enclosed by which symbols?
A. ' '
B. " "
C. ` ` (backticks)
D. ( )
19. Which statement about JavaScript functions is true?
A. They must always return a value
B. They can be stored in variables
C. They can’t take parameters
D. They can only be defined once
20. What does the DOM stand for?
A. Document Oriented Model
B. Document Object Model
C. Data Object Model
D. Dynamic Object Method
Part B: Scenario-Based Practical Questions
1. Form Validation:
Create a registration form with fields: username, email, and password.
Write JavaScript code that:
Ensures no field is left empty
Password must be at least 8 characters
Displays a custom message if validation fails
2. Button Color Change:
Create a button labeled "Change Color".
When clicked, the background color of the entire page should change randomly.
3. Dynamic List:
Make a text input and an "Add Item" button.
When the user enters text and clicks the button, the item should appear in a list below.
Use DOM methods like createElement() and appendChild().
4. Greeting Web App:
Ask the user to input their name using an input field.
When they click “Greet Me”, display a message like:
“Hello [name], welcome to my website!”
Use template literals for the display.
5. Real-Time Character Counter:
Create a text area and show a live count of how many characters the user has typed.
If the count exceeds 100, display a warning message in red.
