Web Programming - I (BCA Semester III)
Unit I: Introduction to JavaScript (Detailed Notes)
Learning Objectives
• Understand the purpose and features of JavaScript.
• Learn about syntax, data types, operators, functions, and control structures.
• Explore built-in and user-defined objects.
• Gain hands-on knowledge of event handling in web pages.
1. Features of JavaScript
JavaScript is a scripting language designed primarily for creating interactive and dynamic web content. It
runs on the client side, meaning it is processed by the user's web browser rather than the server.
Key Features:
• Lightweight: Small in size and easy to learn.
• Interpreted: Code is executed line by line by the browser.
• Dynamic Typing: Variables do not need a fixed type.
• Event-driven: JavaScript responds to user actions (clicks, typing, etc.).
• Platform-independent: Works across different browsers and operating systems.
• Object-based: Supports built-in and user-defined objects.
2. Structure and Basic Syntax
JavaScript can be written inside an HTML document or in external files with .js extension. Basic syntax
includes the use of semicolons, variables, and functions.
Embedding JavaScript in HTML:
<script>
alert("Welcome to JavaScript!");
</script>
Rules:
• Case-sensitive
• Statements end with ;
• Blocks are enclosed in {}
1
Example of a simple program:
let name = "John";
console.log("Hello, " + name);
3. JavaScript Data Types
JavaScript supports different kinds of data for storing and manipulating values.
Primitive Data Types:
• Number: For integers and floats (e.g., 5, 3.14)
• String: For text (e.g., "Hello")
• Boolean: true or false
• Null: Intentional absence of any value
• Undefined: Value not assigned
• Symbol: Unique and immutable value (advanced)
Non-Primitive Data Types:
• Object: Collection of key-value pairs
• Array: Ordered list of values
• Function: Block of reusable code
4. Operators in JavaScript
Operators are symbols that perform operations on variables and values.
Categories of Operators:
• Arithmetic: + , - , * , / , %
• Assignment: = , += , -= , *=
• Comparison: == , === , != , > , < , >= , <=
• Logical: && (and), || (or), ! (not)
• Bitwise: & , | , ^ , ~ , << , >>
Example:
let a = 10, b = 20;
console.log(a + b); // 30
2
5. Control Structures
Control structures determine how the flow of execution moves through the code.
Conditional Statements:
• if , if...else , else if , switch
Example:
let age = 18;
if (age >= 18) {
console.log("You are eligible to vote.");
} else {
console.log("Not eligible.");
}
Loops:
• for , while , do...while
Jump Statements:
• break , continue help manage loop execution
6. Dialog Boxes
JavaScript provides built-in dialog boxes to interact with users:
• alert(): Displays a pop-up with a message.
• confirm(): Asks for confirmation and returns true or false.
• prompt(): Accepts input from the user.
Example:
let user = prompt("Enter your name:");
alert("Welcome " + user);
7. Functions in JavaScript
Functions allow you to group code into reusable blocks.
Syntax:
3
function functionName(parameters) {
// code block
}
Example:
function greet(name) {
return "Hello " + name;
}
console.log(greet("Alice"));
Types of Functions:
• Built-in (e.g., parseInt() , isNaN() )
• User-defined
• Anonymous and arrow functions
• Recursive functions (call themselves)
8. Arrays
Arrays store multiple values in a single variable.
Declaration:
let colors = ["Red", "Green", "Blue"];
Common Methods:
• push() – Adds item to end
• pop() – Removes last item
• shift() , unshift() – Add/remove at beginning
• sort() , reverse() – Organize items
9. Document Object Model (DOM)
The DOM is a programming interface for web documents. It represents the page structure as a tree of
objects.
JavaScript uses DOM to:
• Access elements ( getElementById , getElementsByClassName )
4
• Modify content ( innerHTML , textContent )
• Change styles, attributes, or structure
Example:
document.getElementById("demo").innerHTML = "Text has been changed!";
10. Built-in Objects
JavaScript provides several built-in objects to perform various tasks:
Object Purpose
String String manipulation ( length , toUpperCase() )
Math Math operations ( Math.sqrt() , Math.random() )
Date Handle date/time ( Date() , getFullYear() )
Boolean Represents logical values
Number Handles numeric operations
11. User-defined Objects
JavaScript allows creation of custom objects using constructor functions and the this keyword.
Example:
function Student(name, age) {
this.name = name;
this.age = age;
this.display = function() {
return name + " is " + age + " years old.";
}
}
let s1 = new Student("Ravi", 21);
console.log(s1.display());
12. Event Handling
JavaScript can detect and respond to user interactions using events.
5
Common Events:
• onclick : When an element is clicked
• onmouseover : When mouse hovers over an element
• onchange : When form input changes
• onload : When page is loaded
Example:
<button onclick="alert('Hello, User!')">Click Me</button>
You can also assign events dynamically in JavaScript:
document.getElementById("btn").onclick = function() {
alert("Button clicked!");
};
Reference Books
1. Dr. S.B. Kishor et al., "Web Designing (HTML, JavaScript & VBScript)", Das Ganu Prakashan
2. Ian Pouncey & Richard York, "Beginning CSS", Wiley India
3. Lee Purcell & Mary Jane Mara, "The ABCs of JavaScript"
End of Detailed Notes for Unit I
