.
Introduction to JavaScript
JavaScript is a scripting language used to create dynamic and interactive web pages. It
runs in the web browser and works together with
HTML (structure)
CSS (design)
JavaScript Variables and Data Types
Variables
A variable is a container used to store data values.
Example:
var x = 10;
var name = "Rahul";
Modern JavaScript also uses:
let age = 20;
const pi = 3.14;
Types of Variables
1. var – Old method
2. let – Block scoped
3. const – Constant value
3. Declaring Variables
Variables can be declared using:
var variableName;
Example:
var number;
number = 50;
Or directly:
var number = 50;
4. Data Types in JavaScript
JavaScript supports different types of data.
1. Number
Stores numeric values.
let x = 100;
2. String
Stores text.
let name = "Shailesh";
3. Boolean
True or False value.
let result = true;
4. Null
let value = null;
5. Object
let person = {
name: "Rahul",
age: 20
};
5. JavaScript Statements and Operators
Statements
Statements are instructions executed by JavaScript.
Example:
let x = 10;
let y = 20;
let sum = x + y;
Operators
Operators perform operations on variables.
Types of Operators
1. Arithmetic Operators
Operator Example
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus
Example:
let c = a + b;
2. Assignment Operators
Operator Example
= x=5
+= x += 2
-= x -= 2
3. Comparison Operators
Operator Example
== Equal
!= Not equal
> Greater than
< Less than
4. Logical Operators
Operator Meaning
&& AND
! NOT
6. Control Structures
Control structures control the flow of program execution.
Types:
1. Conditional statements
2. Loop statements
7. Conditional Statements
Used for decision making.
1. if Statement
if (x > 10) {
[Link]("Greater");
}
2. if–else Statement
if (x > 10) {
[Link]("Greater");
} else {
[Link]("Smaller");
}
3. switch Statement
switch(day) {
case 1:
[Link]("Monday");
break;
case 2:
[Link]("Tuesday");
break;
}
8. Loop Statements
Loops repeat code multiple times.
1. for Loop
for(let i=1; i<=5; i++){
[Link](i);
}
2. while Loop
let i=1;
while(i<=5){
[Link](i);
i++;
}
3. do–while Loop
let i=1;
do{
[Link](i);
i++;
}while(i<=5);
9. Object-Based Programming
JavaScript supports object-based programming.
Objects contain:
Properties
Methods
Example:
let student = {
name: "Shailesh",
age: 20,
show: function(){
[Link]([Link]);
}
};
10. Functions
Functions are blocks of reusable code.
Function Syntax
function functionName(){
statements;
}
Example:
function add(a,b){
return a+b;
}
Call function:
add(5,3);
11. Executing Deferred Scripts
Deferred scripts are executed after HTML is loaded.
Example:
<script src="[Link]" defer></script>
Advantages:
Faster page loading
Avoids blocking HTML parsing
12. Objects in JavaScript
Objects store multiple values.
Example:
let car = {
brand: "Toyota",
model: "2022",
color: "Black"
};
Access property:
[Link]
13. Message Boxes in JavaScript
Message boxes interact with the user.
Types:
1. Alert box
2. Confirm box
3. Prompt box
14. Alert Box
Displays a message.
Example:
alert("Welcome to Website");
15. Confirm Box
Used to confirm user action.
Example:
confirm("Are you sure?");
Returns:
true
false
16. Prompt Box
Used to get user input.
Example:
prompt("Enter your name");
17. JavaScript with HTML
JavaScript can be used inside HTML.
Example:
<button >
<script>
function show(){
alert("Hello");
}
</script>
18. Events in JavaScript
An event occurs when the user interacts with a webpage.
Examples:
Click
Hover
Key press
Page load
19. Event Handlers
Event handlers execute JavaScript code when an event occurs.
Example:
<button Me</button>
Common Events:
Event Description
onclick Mouse click
onload Page load
onmouseover Mouse hover
Onkeydown Key pressed
20. Forms in JavaScript
Forms collect user data.
Example HTML form:
<form>
Name: <input type="text">
Password: <input type="password">
</form>
JavaScript is used for:
Form validation
Data processing
Example:
function validate(){
if([Link]==""){
alert("Enter Name");
}
}
21. Forms Array
Form elements can be accessed using arrays.
Example:
[Link][0]
Access element:
[Link][0].elements[0]
Or by name:
[Link]["login"]["username"]
