Learn with Yasir

Share Your Feedback

JavaScript Basics

« Back Next »

Master JavaScript fundamentals with this beginner-friendly guide. Learn about variables, functions, user input, DOM manipulation, and external scripts through practical examples and interactive exercises.

Contents

🔹 Introduction to JavaScript

  • Understand how JavaScript interacts with HTML.

✅ Example 1: document.write()

<script>
    document.write("Hello World Wide Web");
</script>

✅ Example 2: alert()

<script>
    alert('Hello, world!');
</script>
  • Demonstrates basic interaction using pop-ups.

🔹 Script Placement in HTML

Goal: Learn where and how to place JavaScript in HTML.

✅ 1. Inside <body>

<body>
    <h1>Hello World</h1>
    <script>
        alert("This runs from inside the body!");
    </script>
</body>

✅ 2. Best practice: End of <body>

<body>
    <!-- HTML Content -->
    <script src="script.js"></script>
</body>

✅ 3. Modern approach with defer

<head>
    <script src="script.js" defer></script>
</head>

🔹 Working with Variables and Data Types

Goal: Learn to declare and use variables.

<script>
    var str = 'Hello world';
    document.write(str + "<br>");

    var a = 5, b = 10;
    var c = a + b;
    document.write("Sum: " + c + "<br>");

    var myVar = 1;
    myVar = "Allah is the Greatest";
    document.write("<h1>" + myVar + "</h1>");
</script>

🔹 Basic Functions

Goal: Learn to create and call functions.

✅ Function with alert()

<script>
    function greet() {
        alert("Welcome to JavaScript!");
    }
    greet();
</script>

✅ Multiplication Function

<script>
    function multiply(num1, num2) {
        return num1 * num2;
    }
    alert("Product: " + multiply(5, 6));
</script>

🔹 User Input with prompt()

<script>
    function doShowName() {
        var name = prompt("What is your name?");
        alert(name + ", you just did something awesome!");
    }
</script>
<button onclick="doShowName()">Click Here</button>
  • Introduces prompt() and user interaction.
  • Connects input with output using functions.

📌 onclick Event (JavaScript)

The onclick event in JavaScript runs when a user clicks on an HTML element—such as a button, link, or image. It’s commonly used to perform actions like submitting forms, showing messages, or toggling features.

🔗 For a detailed explanation, see:
👉 🖱️ What is the onclick Event in JavaScript?
👉 📘 What are Events in JavaScript?

🔹 Changing Content Dynamically (DOM)

Goal: Modify HTML using JavaScript.

✅ Example with innerHTML

<h1 id="demo">..............</h1>
<script>
    document.getElementById("demo").innerHTML = "Ya ALLAH!";
</script>

🔹 External JavaScript File

Goal: Organize JavaScript in separate files.

✅ HTML File

<h1 id="demo">ALLAH</h1>
<form>
    <input type="button" value="Click" onclick="msg()" />
</form>
<script src="scripts/hello.js"></script>

✅ scripts/hello.js

function msg() {
    document.getElementById("demo").innerHTML = "Ya ALLAH!....";
}

For real-world JavaScript examples, See Real-World JavaScript Examples for Beginners

🔖 Further Reading & References