JAVA SCRIPT
What is JavaScript?
JavaScript (JS) is a high-level, interpreted programming language used to make web pages interactive.
It is one of the core technologies of the web, along with HTML (structure) and CSS (style).
Key Features of JavaScript
✔ Client-Side Scripting – Runs in the browser, making websites dynamic.
✔ Interpreted Language – Does not need compilation; browsers execute it directly.
✔ Lightweight & Fast – Designed for quick execution in web applications.
✔ Object-Oriented – Uses objects for flexibility and code reusability.
✔ Event-Driven & Asynchronous – Handles user actions and supports APIs like AJAX for real-time
updates.
✔ Cross-Platform – Works on all major browsers (Chrome, Firefox, Edge, etc.).
How JavaScript Works in a Web Page
When a web page loads, the browser’s JavaScript engine executes the JS code. It can:
Manipulate HTML and CSS
Handle user events (clicks, input, scrolling, etc.)
Communicate with servers (fetch data, send requests)
Store data locally (cookies, local storage)
Basic HTML instructions
1️. alert() Function
• The alert() function displays a pop-up message (alert box) in the browser.
• It is used to show important notifications or warnings to the user.
EX: alert("Hello, welcome to JavaScript!"); ⏎
2. Math Operations
• It performs the basic mathematical operations
EX: 2+2 ⏎
3. [Link] = 'text'; ⏎
• [Link] modifies the entire HTML content inside the <body> tag.
• It overwrites everything currently in the body of the webpage.
4. prompt() (Taking User Input)
• prompt() displays a dialog box asking the user to enter a value.
• Returns the input as a string.
EX: prompt("Enter your name:"); ⏎
5. confirm() (Getting User Confirmation)
shows a dialog box with "OK" and "Cancel".
Returns:
• true → If the user clicks OK
• false → If the user clicks Cancel
EX: confirm("Do you want to continue?"); ⏎
6. [Link]() (Writing Directly to the Page)
• [Link]() directly writes content into the webpage.
• It replaces everything in the <body> if called after the page loads.
EX: [Link]("Hello, World!"); ⏎
Feature [Link] [Link]()
When Used After the page loads Before/during page load
Replaces entire document after
Effect Modifies existing HTML
load
Preserves Other No (erases everything if used after
Yes (modifies body only)
Elements? load)
Update part of the webpage
Use Case Write static content when loading
dynamically
USING THE JAVA SCRIPT WITH HTML
Ways to Use JavaScript in HTML
JavaScript can be added to an HTML document in three main ways:
1️.Inline JavaScript (Inside HTML elements)
[Link] JavaScript (Inside <script> tag in the HTML file)
3️.External JavaScript (Using a separate .js file and linking it to HTML)
1️.Inline JavaScript (Inside HTML Elements)
JavaScript code is written directly inside an HTML tag using event attributes such as onclick,
onmouseover, etc.
Suitable for small actions like handling button clicks, alerts, etc.
Syntax:
<element event="JavaScript code">
• <element> → Any HTML tag (e.g., <button>, <a>, <p>)
• event → JavaScript event (e.g., onclick, onmouseover, onload)
• JavaScript code → The JavaScript action that executes when the event occurs
[Link] JavaScript (Inside <script> Tag in HTML)
JavaScript is written inside a <script> tag within the same HTML document.
Ideal for page-specific scripts where JavaScript interacts with multiple elements on the same page.
Syntax:
<script>
// JavaScript code here
</script>
• <script> → Defines a JavaScript block inside the HTML document.
• JavaScript code → Any valid JavaScript statements, functions, or variables.
Example Placement:
<head>
<script>
// JavaScript function that runs when called
function showMessage() {
alert("Hello from JavaScript!");
}
</script>
</head>
<body>
<button Me</button>
</body>
[Link] JavaScript (Using a .js File)
JavaScript is written in a separate file with a .js extension and linked to an HTML file.
Best for large scripts, reusability, and cleaner HTML structure.
Step 1️: Create an External JavaScript File (file name : [Link])
// JavaScript function
function showMessage() {
alert("Hello from an external JavaScript file!");
}
Step 2: Link the JavaScript File in HTML
<!DOCTYPE html>
<html>
<head>
<title>External JavaScript Example</title>
<script src="[Link]"></script> <!-- Linking external JS file -->
</head>
<body>
<button Me</button>
</body>
</html>
• <script> → Defines JavaScript inclusion in HTML.
• src="[Link]" → Specifies the external JavaScript file to be loaded.
JavaScript Variables: (let, var, and const)
• JavaScript provides three ways to declare variables:
1️.var – The old way (function-scoped, can be re-declared).
[Link] – The modern way (block-scoped, cannot be re-declared).
3️.const – For constant values (block-scoped, cannot be changed).
Feature var let const
Scope Function-scoped Block-scoped Block-scoped
Can Be Re-
Yes No No
declared?
Can Be Updated? Yes Yes No
Avoid using in modern Preferred for variables that Preferred for
Use Case
JS change constants
1️. var (Function-Scoped, Can Be Re-declared)
• Declares a variable that can be re-declared and updated.
• Function-scoped → Accessible only inside the function where it is declared.
• Does NOT have block scope → Accessible outside {} blocks (e.g., if, for).
• Avoid var in modern JavaScript due to unpredictable behavior.
Syntax:
var variable_name = "str"; // Declaring a variable
var variable_name = "str"; // Re-declaring (Allowed)
name = "str"; // Updating (Allowed)
Function Scope Example:
function test() {
var x = 1️0;
[Link](x); // Output: 1️0
}
[Link](x); // Error: x is not defined (because var is function-scoped)
No Block Scope Example:
if (true) {
var y = 20;
}
[Link](y); // Output: 20 (var is not limited to the if block)
2. let (Block-Scoped, Cannot Be Re-declared)
• Declares a variable that can be updated but NOT re-declared.
• Block-scoped → Only accessible inside {} where it is defined.
• Use let instead of var for better control over variable scope.
let variable_name = value; // Declaring a variable
variable_name = value; // Updating (Allowed)
let variable_name = value; // Error: Cannot re-declare in the same scope
Block Scope Example:
if (true) {
let a = 50;
[Link](a); // Output: 50
}
[Link](a); // Error: a is not defined (because let is block-scoped)
3️. const (Block-Scoped, Cannot Be Changed)
• Declares a constant that cannot be updated or re-declared.
• Block-scoped → Like let, it is only accessible inside {}.
• Must be assigned a value when declared.
Syntax:
const PI = 3️.1️4; // Declaring a constant
PI = 3️.1️41️5; // Error: Cannot reassign a constant
const PI = 3️.1️5; // Error: Cannot re-declare a constant
Block Scope Example:
if (true) {
const b = 1️00;
[Link](b); // Output: 1️00
}
[Link](b); // Error: b is not defined (because const is block-scoped)
Objects and Arrays with const
• const prevents reassignment, but objects and arrays can still be modified.
const person = { name: "John" };
[Link] = "Doe"; // Allowed (modifying property)
person = { age: 3️0 }; // Error (cannot reassign a new object)
When to Use What?
Use let → When a variable needs to be updated later.
Use const → For values that should never change (e.g., API keys, Pi, etc.).
Avoid var → Unless maintaining older code.
