Scribd
Upload
0 views6 pages

Web Programming Unit1

The document provides an introduction to JavaScript, covering its purpose, features, syntax, data types, operators, control structures, and event handling. It emphasizes JavaScript's role in creating interactive web content and includes examples of basic programming concepts such as functions, arrays, and the Document Object Model (DOM). Additionally, it lists reference books for further study.

Uploaded by

nikhilbaware07
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0 views6 pages

Web Programming Unit1

The document provides an introduction to JavaScript, covering its purpose, features, syntax, data types, operators, control structures, and event handling. It emphasizes JavaScript's role in creating interactive web content and includes examples of basic programming concepts such as functions, arrays, and the Document Object Model (DOM). Additionally, it lists reference books for further study.

Uploaded by

nikhilbaware07
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

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

You might also like