What is JavaScript?
JavaScript is a high-level, interpreted programming language used to make web pages interactive, dynamic, and functional.
Unlike HTML (structure) and CSS (style), JavaScript adds behavior to web pages — things like:
Responding to user actions (clicks, typing, etc.)
Changing HTML content or styles dynamically
Creating popups, sliders, animations
Validating forms
Fetching data from servers (AJAX)
Building modern applications (React, Angular, Vue)
---
🧾 JavaScript Overview
Feature Description
Language Type Scripting language for web development
Runs In Web browsers (client-side) and on servers (Node.js)
Syntax Similar To C, Java
Supported By All modern browsers (Chrome, Firefox, Edge, Safari, etc.)
File Extension .js
---
📄 JavaScript Syntax Basics
// This is a comment
let name = "John"; // Declare a variable
alert("Hello " + name); // Show a popup
---
🔰 Where to Write JavaScript
1. Inline
<button onclick="alert('Button clicked!')">Click Me</button>
2. Internal Script
<script>
alert("Hello from internal JavaScript!");
</script>
3. External File
script.js
console.log("Hello from external JS file");
HTML
<script src="script.js"></script>
---
🔤 JavaScript Variables and Data Types
Declaration:
let age = 25;
const name = "Alice";
var city = "New York";
Data Types :
String: "Hello"
Number: 100, 3.14
Boolean: true, false
Array: ["apple", "banana"]
Object: {name: "John", age: 30}
Null: null
Undefined: undefined
---
🔁 Control Statements
if Statement
let age = 20;
if (age >= 18) {
console.log("Adult");
} else {
console.log("Minor");
}
Loops
for Loop
for (let i = 1; i <= 5; i++) {
console.log("Count: " + i);
}
while Loop
let i = 0;
while (i < 3) {
console.log("i is " + i);
i++;
}
---
📦 Functions
function greet(name) {
return "Hello, " + name;
}
let message = greet("Alice");
console.log(message); // Output: Hello, Alice
---
🎯 DOM Manipulation (Dynamic HTML)
The DOM (Document Object Model) lets JavaScript interact with HTML elements.
Example: Change Text on Button Click
<!DOCTYPE html>
<html>
<body>
<p id="demo">Hello</p>
<button onclick="changeText()">Click Me</button>
<script>
function changeText() {
document.getElementById("demo").innerHTML = "You clicked the button!";
}
</script>
</body>
</html>
Events in JavaScript
JavaScript can react to events like click, hover, input, load, etc.
<input type="text" oninput="console.log('Typing...')">
---
📤 Form Validation Example
<form onsubmit="return validateForm()">
<input type="text" id="username" required>
<input type="submit" value="Submit">
</form>
<script>
function validateForm() {
let user = document.getElementById("username").value;
if (user == "") {
alert("Username must be filled out");
return false;
}
return true;
}
</script>
---
⚙️ Working with Arrays
let fruits = ["apple", "banana", "cherry"];
fruits.push("orange"); // Add
console.log(fruits[1]); // Access
console.log(fruits.length); // Length
---
🧱 JavaScript Object Example
let person = {
name: "John",
age: 30,
greet: function() {
return "Hi, I'm " + this.name;
}
};
console.log(person.greet()); // Output: Hi, I'm John
---
⚡ JavaScript with CSS
<p id="box">Hover me</p>
<script>
document.getElementById("box").onmouseover = function() {
this.style.color = "red";
};
</script>
Comments
Post a Comment