INTRODUCTION TO JAVASCRIPT
✅ What is JavaScript?
✔ High-level, interpreted programming language
✔ Used to make webpages interactive & dynamic
✔ Runs inside the browser (client-side)
✅ Why JavaScript?
✔ Adds interactivity (buttons, forms, animations)
✔ Validates input – Input value should be Correct, complete and acceptable
✔ Controls webpage behaviour -Responding to User Actions, Changing Page Content Dynamically,
Hiding elements, Handling Calculations / Logic etc
✔ Used in web, mobile, backend ([Link])
✅ JavaScript vs HTML vs CSS
Language Purpose
HTML Structure (skeleton)
CSS Styling (appearance)
JavaScript Behavior (logic & actions)
JAVASCRIPT INPUT & OUTPUT (I/O)
Output Methods
Method Use
[Link]() Writes to page
alert() Popup message
[Link]() Debugging
innerHTML Writes to element
✅ Examples
[Link]("Hello");
alert("Welcome");
[Link]("Debug");
[Link]("demo").innerHTML = "Text";
Input Methods
Method Description
prompt() Takes input (string)
confirm() OK / Cancel
Form fields Real applications
let name = prompt("Enter name:");
let ok = confirm("Continue?");
let value = [Link]("id").value;
TYPE CONVERSION
✅ Why Needed?
✔ prompt() → returns string
✔ Math operations → need numbers
Implicit Conversion
"5" + 2 // "52"
"5" * 2 // 10
Explicit Conversion
Function Converts To
Number() Number
String() String
Boolean() Boolean
let n = Number("123");
APPLYING JAVASCRIPT
✅ 1. Internal JavaScript
✔ Code written inside HTML file
✔ Uses <script> tag
Example
<script>
alert("Hello Students");
</script>
Use When
✔ Small scripts
✔ Quick demos
✅ 2. External JavaScript
✔ Code in separate .js file
✔ Linked using src
<script src="[Link]"></script>
Advantages
✔ Clean HTML
✔ Reusable
✔ Easier maintenance
Can we place <script> in <head> or
<body>?
YES — both are valid
JavaScript can be written:
✔ Inside <head>
✔ Inside <body>
But the behaviour differs.
1. Script in <head>
<head>
<script>
// JS code
</script>
</head>
✅ Characteristics
✔ Loads before page content
✔ Good for functions, libraries, setup code
⚠ Problem
If JS tries to access elements:
[Link]("demo")
❌ Element may not exist yet → Error
2. Script in <body>
<body>
<script>
// JS code
</script>
</body>
✅ Characteristics
✔ Loads after HTML elements
✔ Safe for DOM manipulation
✔ Preferred for beginners
Key Difference
Feature <head> Script <body> Script
Loading Time Before content After content
DOM Access Risky (early) Safe
Use Case Functions, libs DOM updates
Performance May delay render Faster display
Example Problem
❌ Script in <head> (Error)
<head>
<script>
[Link]("demo").innerHTML = "Hello";
</script>
</head>
<body>
<p id="demo"></p>
</body>
JS runs first → <p> not loaded → NULL error
✅ Script in <body> (Works)
<body>
<p id="demo"></p>
<script>
[Link]("demo").innerHTML = "Hello";
</script>
</body>
✔ Element exists → Works
Best Practice (Modern Websites)
Place scripts:
✔ At end of <body>
OR
✔ Use defer in <head>
<script src="[Link]" defer></script>
✔ Loads in parallel
✔ Executes after HTML parsed
JAVASCRIPT OBJECTS
✅ What is an Object?
✔ Collection of properties + methods
Pre-defined Objects (Built-in)
Object Purpose
document HTML page control
window Browser window
array List of values
Math Calculations
String Text operations
RegExp Pattern matching
Date Date & time
✅ document Object
✔ Access page elements
✔ Modify content
[Link]
[Link]("id")
[Link]()
✅ window Object
✔ Alerts, prompts, timers
[Link]()
[Link]()
[Link]()
✅ Array Object
✔ Store multiple values
let arr = [10, 20, 30];
[Link]
[Link](40)
✅ Math Object
[Link]()
[Link]()
[Link]()
[Link]()
✅ String Object
[Link]
[Link]()
[Link]()
[Link]()
✅ RegExp Object
✔ Pattern matching
let pattern = /[A-Z]/;
[Link]("Hello")
✅ Date Object
let d = new Date();
[Link]()
[Link]()
[Link]()
USER-DEFINED OBJECTS
✅ Definition
Object created by programmer.
✅ Example
let student = {
name: "Lokesh",
age: 20,
greet: function() {
return "Hello " + [Link];
}
};
✅ Concepts
✔ Properties
✔ Methods
✔ Constructors
✔ Accessors (get/set)
CONDITIONAL STATEMENTS
✅ if Statement
if(condition) { }
✅ if–else
if(age >= 18)
alert("Eligible");
else
alert("Not Eligible");
✅ switch Statement
switch(day) {
case 1: ...
break;
}
LOOPS
Loop Use
for Known iterations
while Condition-based
do-while Executes at least once
for(let i=1; i<=10; i++) { }
🔁 Special Loops
Loop Purpose
for-in Object properties
for-of Iterable values
forEach() Array iteration
FUNCTIONS
✅ What is a Function?
✔ Reusable block of code
function greet() {
alert("Hello");
}
With Parameters
function sum(a, b) {
return a + b;
}
EVENTS IN JAVASCRIPT
✅ What is an Event?
✔ User action triggers code
Event Trigger
onclick Click
onchange Value change
onmouseover Mouse hover
onload Page load
<button onclick="greet()">Click</button>
FORM VALIDATION BASICS
✅ Why?
✔ Prevent wrong input
✔ Improve UX
✔ Security
✅ Example Rules
✔ Name length
✔ Mobile digits
✔ Email pattern