HTML Code

All Tutorial

JavaScript

Introduction to JavaScript 🚀

JavaScript (JS) is a lightweight, interpreted programming language used to create dynamic and interactive content on web pages. It is one of the core technologies of the web, along with HTML and CSS.

Why Use JavaScript?

✅ Makes web pages interactive
✅ Supports event handling (e.g., clicks, keypresses)
✅ Works with HTML & CSS to enhance UI/UX
✅ Can manipulate the DOM (Document Object Model)
✅ Used in both frontend (browser) and backend (Node.js)

Basic JavaScript Syntax

Here’s a simple JavaScript example:

<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Example</title>
</head>
<body>

<h1 id=“demo”>Hello, JavaScript!</h1>
<button onclick=“changeText()”>Click Me</button>

<script>
function changeText() {
document.getElementById(“demo”).innerHTML = “You clicked the button!”;
}
</script>

</body>
</html>

JavaScript Example

Hello, JavaScript!

Ways to Add JavaScript

  1. Inline JavaScript (inside an HTML element)
    <button onclick="alert('Hello!')">Click Me</button>

Internal JavaScript (inside a <script> tag)

<script>
console.log("Hello from JavaScript!");
</script>

  1. External JavaScript (using a separate file)
    <script src="script.js"></script>

  1. Basic JavaScript Concepts

    ✔ Variables: Store data

    let name = "John"; // Modern way (ES6) var age = 25; // Older way const PI = 3.14; // Constant

    ✔ Functions: Perform tasks

    function greet() { alert("Welcome to JavaScript!"); }

    ✔ Events: React to user actions

    <button onclick="greet()">Click Me</button>

    ✔ Conditionals: Control flow

    if (age > 18) { console.log("You are an adult."); } else { console.log("You are a minor."); }

    ✔ Loops: Repeat actions

    for (let i = 0; i < 5; i++) { console.log("Iteration " + i); }

  1. Where is JavaScript Used?

    🌍 Web Development – Frontend (React, Vue, Angular)
    ⚙ Backend Development – Node.js
    📱 Mobile Apps – React Native, Ionic
    🖥 Game Development – Phaser.js
    🤖 Machine Learning – TensorFlow.js

< Previous
Next >
Scroll to Top