JavaScript (JS) is one of the most popular programming languages used to create dynamic and interactive websites.
It allows developers to add functionalities like animations, form validation, real-time updates, and much more to their web pages.
In this guide, we’ll explore JavaScript’s basics with examples you can try in real time.
What Is JavaScript?
JavaScript is a client-side scripting language that enables you to implement complex features on web pages. It works alongside HTML (structure) and CSS (styling) to create a complete web experience.
For example:When you click a button and see a popup message, that’s JavaScript.
Auto-updating clocks and calculators? That’s JavaScript too!-
Three Ways to Use JavaScript
You can include JavaScript in your projects in three main ways:
1. Inline JavaScript
This is when the JavaScript code is written directly inside an HTML element using the onclick, onmouseover, or similar attributes.
Example:
<!DOCTYPE html>
<html>
<body>
<button onclick=”alert(‘Hello World!’)”>Click Me</button></body>
</html>
2. Internal JavaScript
Internal JavaScript is written inside a <script> tag within your HTML document.
Example:
<!DOCTYPE html>
<html>
<head>
<script>
function greet() { alert(‘Welcome to JavaScript!’); } </script>
</head>
<body>
<button onclick=”greet()”>Click Me</button>
</body>
</html>
3. Introduction to JavaScript for Beginners
—
What Is JavaScript?
JavaScript is a client-side scripting language that enables you to implement complex features on web pages. It works alongside HTML (structure) and CSS (styling) to create a complete web experience.
For example:
When you click a button and see a popup message, that’s JavaScript.
Auto-updating clocks and calculators? That’s JavaScript too!
—
Three Ways to Use JavaScript
You can include JavaScript in your projects in three main ways:
1. Inline JavaScript
This is when the JavaScript code is written directly inside an HTML element using the onclick, onmouseover, or similar attributes.
Example:
<!DOCTYPE html>
<html>
<body>
<button onclick=”alert(‘Hello World!’)”>Click Me</button>
</body>
</html>
2. Internal JavaScript
Internal JavaScript is written inside a <script> tag within your HTML document.
Example:
<!DOCTYPE html>
<html>
<head>
<script>
function greet() {
alert(‘Welcome to JavaScript!’);
}
</script>
</head>
<body>
<button onclick=”greet()”>Click Me</button>
</body>
</html>
3. External JavaScript
External JavaScript is written in a separate .js file and linked to your HTML document using the <script> tag.
Example:
HTML File (index.html)
<!DOCTYPE html>
<html>
<head>
<script src=”script.js”></script>
</head>
<body>
<button onclick=”greet()”>Click Me</button>
</body>
</html>
JavaScript File (script.js)
function greet() {
alert(‘This is from an external file!’);
}
—
JavaScript Syntax
JavaScript has a clean and simple syntax. Here are some key points:
Case-sensitive: myVariable and MyVariable are different.
Statements end with a semicolon (optional but recommended).
Curly braces {} are used to group code blocks.
Example:
let name = “John”; // Declare a variable
if (name === “John”) {
console.log(“Hello John!”); // Output in the console
}
—
JavaScript Object.method
In JavaScript, objects can have methods, which are just functions tied to the object.
Example:
let person = {
name: “Alice”,
greet: function() {
return “Hello ” + this.name;
}
};
console.log(person.greet()); // Output: Hello Alice
—
JavaScript Variable.method
Variables in JavaScript can also use methods depending on their type (e.g., strings, numbers).
Example:
let message = “hello world”;
console.log(message.toUpperCase()); // Output: HELLO WORLD
let num = 123.456;
console.log(num.toFixed(2)); // Output: 123.46
—
JavaScript Class.method
Classes in JavaScript define objects with properties and methods.
Example:
class Car {
constructor(brand) {
this.brand = brand;
}
honk() {
return `${this.brand} says Honk Honk!`;
}
}
let myCar = new Car(“Toyota”);
console.log(myCar.honk()); // Output: Toyota says Honk Honk!
—
Event Handling in JavaScript
Event handling allows you to execute code in response to user actions like clicks, keystrokes, or mouse movements.
Example 1: Click Event
<!DOCTYPE html>
<html>
<body>
<button id=”myButton”>Click Me</button>
<script>
document.getElementById(“myButton”).addEventListener(“click”, function() {
alert(“Button clicked!”);
});
</script>
</body>
</html>
Example 2: Mouseover Event
<!DOCTYPE html>
<html>
<body>
<h1 id=”heading”>Hover over me!</h1>
<script>
document.getElementById(“heading”).addEventListener(“mouseover”, function() {
this.style.color = “red”;
});
</script>
</body>
</html>
Example 3: Keydown Event
<!DOCTYPE html>
<html>
<body>
<input type=”text” id=”inputField” placeholder=”Type something”>
<script>
document.getElementById(“inputField”).addEventListener(“keydown”, function(event) {
console.log(“Key pressed: ” + event.key);
});
</script>
</body>
</html>
—
Conclusion
