1
🟨 What is JavaScript?
JavaScript is a scripting language used to make web pages interactive. It can:
Respond to user events (click, mouseover, keypress)
Validate forms
Create dynamic content
Communicate with servers (AJAX)
JavaScript is embedded in HTML to add behavior to the webpage.
🟨 How to Use JavaScript in HTML
There are 3 main ways to include JavaScript in HTML:
1. ✅ Inline JavaScript (inside HTML element)
html
CopyEdit
<!DOCTYPE html>
<html>
<body>
<button onclick="alert('Hello, World!')">Click Me</button>
</body>
</html>
🔷 Output: A button labeled "Click Me". When clicked, a popup alert shows "Hello, World!".
2. ✅ Internal JavaScript (inside <script> tag)
html
CopyEdit
<!DOCTYPE html>
<html>
<body>
<h2 id="demo">Welcome!</h2>
<script>
document.getElementById("demo").innerHTML = "Hello from JavaScript!";
</script>
</body>
</html>
🔷 Output: The text Welcome! is replaced with Hello from JavaScript!.
2
3. ✅ External JavaScript (separate .js file)
html
CopyEdit
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<h2 id="demo">Loading...</h2>
</body>
</html>
js
CopyEdit
// script.js
document.getElementById("demo").innerHTML = "Loaded from external JS!";
🔷 Output: The text Loading... changes to Loaded from external JS!.
🟨 JavaScript Basics in HTML
1. ✅ Variables
html
CopyEdit
<script>
let name = "Alice";
document.write("Hello, " + name);
</script>
🔷 Output: Hello, Alice
2. ✅ Functions
html
CopyEdit
<!DOCTYPE html>
<html>
<body>
<button onclick="greet()">Say Hi</button>
<script>
function greet() {
alert("Hi there!");
3
}
</script>
</body>
</html>
🔷 Output: Clicking the button shows an alert Hi there!.
3. ✅ Events
html
CopyEdit
<!DOCTYPE html>
<html>
<body>
<p onmouseover="this.innerHTML='Hovered!'">Hover over this text.</p>
</body>
</html>
🔷 Output: When you hover the mouse over the text, it changes to Hovered!.
4. ✅ Conditional Statements
html
CopyEdit
<script>
let age = 18;
if (age >= 18) {
document.write("Eligible to vote");
} else {
document.write("Not eligible");
}
</script>
🔷 Output: Eligible to vote
5. ✅ Loops
html
CopyEdit
<script>
for (let i = 1; i <= 3; i++) {
document.write("Line " + i + "<br>");
}
</script>
🔷 Output:
4
scss
CopyEdit
Line 1
Line 2
Line 3
6. ✅ Changing Style with JavaScript
html
CopyEdit
<!DOCTYPE html>
<html>
<body>
<p id="para">Hello!</p>
<button onclick="document.getElementById('para').style.color='red'">Change
Color</button>
</body>
</html>
🔷 Output: Text changes to red when button is clicked.
7. ✅ Form Validation Example
html
CopyEdit
<!DOCTYPE html>
<html>
<body>
<form onsubmit="return validateForm()">
Name: <input type="text" id="name"><br>
<input type="submit" value="Submit">
</form>
<script>
function validateForm() {
let x = document.getElementById("name").value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</body>
</html>
🔷 Output: If you submit an empty name, an alert will show: “Name must be filled out”.
5
🟨 Summary Table
Method Placement When to Use
Inline JS Inside HTML tags For very small, simple scripts
Internal JS Inside <script> For page-specific JS
External JS .js file + <script src=""> For reusable or large code
ChatGPT said:
OOPs (Object-Oriented Programming) Concepts in JavaScript
JavaScript supports Object-Oriented Programming (OOP) through its prototypes and classes.
OOP allows you to create reusable, organized, and modular code. JavaScript implements
OOP using the following core concepts:
✅ 1. Objects
Objects are collections of properties (key-value pairs) and methods.
Created using:
o Object Literals
o Constructor Functions
o Classes (ES6+)
javascript
CopyEdit
let person = {
name: "John",
age: 30,
greet: function() {
console.log("Hello, " + this.name);
}
};
person.greet(); // Output: Hello, John
✅ 2. Class
Introduced in ES6 as a syntactic sugar over prototype-based inheritance.
Used to create objects with a blueprint.
javascript
CopyEdit
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a sound.`);
}
6
let dog = new Animal("Dog");
dog.speak(); // Output: Dog makes a sound.
✅ 3. Encapsulation
Hides the internal state and requires all interaction to be performed through an object's
methods.
In modern JavaScript, private fields use #.
javascript
CopyEdit
class Car {
#speed = 0; // private property
accelerate() {
this.#speed += 10;
console.log("Speed:", this.#speed);
}
}
let myCar = new Car();
myCar.accelerate(); // Speed: 10
// myCar.#speed; // ❌ Error: Private field
✅ 4. Inheritance
One class (child) inherits properties and methods from another class (parent).
Uses extends keyword.
javascript
CopyEdit
class Animal {
speak() {
console.log("Animal speaks");
}
}
class Dog extends Animal {
speak() {
console.log("Dog barks");
}
}
let dog = new Dog();
dog.speak(); // Output: Dog barks
✅ 5. Polymorphism
Same method name behaves differently depending on the object (method overriding).
7
javascript
CopyEdit
class Animal {
makeSound() {
console.log("Some sound");
}
}
class Cat extends Animal {
makeSound() {
console.log("Meow");
}
}
let a = new Animal();
let c = new Cat();
a.makeSound(); // Output: Some sound
c.makeSound(); // Output: Meow
✅ 6. Abstraction
Hiding complex implementation details and showing only the necessary features.
JavaScript doesn’t have true abstract classes but we can simulate abstraction using base
classes and throwing errors in base methods:
javascript
CopyEdit
class Shape {
getArea() {
throw "getArea() must be implemented";
}
}
class Circle extends Shape {
constructor(radius) {
super();
this.radius = radius;
}
getArea() {
return Math.PI * this.radius * this.radius;
}
}
let circle = new Circle(5);
console.log(circle.getArea()); // Output: 78.54...
✅ Summary of OOP Concepts in JavaScript
Concept Description
Object Container for data (properties) and behavior (methods)
8
Concept Description
Class Blueprint for creating objects
Encapsulation Bundling data + methods; hiding details
Inheritance Acquiring properties/methods from another class
Polymorphism Same method behaves differently in different contexts
Abstraction Hiding unnecessary complexity from the user
