Start using Javascript
Filter

Start using Javascript

by Soeng Souy /
Share

Getting Started with JavaScript 

JavaScript (JS) is a powerful programming language used for making websites interactive. It runs in the browser and can also be used on the server (Node.js).

1️⃣ Adding JavaScript to a Web Page

📌 Method 1: Inline JavaScript

Write JavaScript directly inside HTML tags.

<button onclick="alert('Hello, JavaScript!')">Click Me</button>

📌 Method 2: Internal JavaScript (Inside <script> Tag)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My First JS</title>
</head>
<body>
    <button id="myButton">Click Me</button>

    <script>
        document.getElementById("myButton").addEventListener("click", function() {
            alert("Hello from JavaScript!");
        });
    </script>
</body>
</html>

📌 Method 3: External JavaScript (Recommended)

1️⃣ Create a JS file: script.js
2️⃣ Link it in HTML

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

3️⃣ Write JavaScript in script.js

console.log("JavaScript is running!");

2️⃣ JavaScript Basics

📌 Variables (var, let, const)

var name = "Alice";  // Old way (Avoid using var)
let age = 25;        // Can be changed
const PI = 3.14;     // Cannot be changed

📌 Data Types

let text = "Hello";    // String
let number = 100;      // Number
let isTrue = true;     // Boolean
let fruits = ["Apple", "Banana"]; // Array
let person = { name: "Bob", age: 30 }; // Object

📌 Operators

let sum = 10 + 5;  // Addition
let diff = 10 - 5; // Subtraction
let isEqual = (10 === 10); // Comparison

3️⃣ Functions in JavaScript

📌 Regular Function

function greet(name) {
    return "Hello, " + name;
}
console.log(greet("Alice"));

📌 Arrow Function (ES6)

const greet = (name) => `Hello, ${name}`;
console.log(greet("Bob"));

4️⃣ JavaScript Events

Events are actions like clicks, keypresses, or mouse movements.

📌 Example: Click Event

document.getElementById("myButton").addEventListener("click", function() {
    alert("Button Clicked!");
});

5️⃣ JavaScript DOM Manipulation

The DOM (Document Object Model) allows JavaScript to change HTML content.

📌 Changing Text Content

document.getElementById("myButton").innerText = "Clicked!";

📌 Changing HTML Content

document.getElementById("myDiv").innerHTML = "<h2>New Content</h2>";

📌 Changing CSS Styles

document.getElementById("myButton").style.backgroundColor = "blue";

6️⃣ Loops & Conditions

📌 If-Else Condition

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

📌 For Loop

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

📌 While Loop

let count = 0;
while (count < 3) {
    console.log("Count:", count);
    count++;
}

7️⃣ JavaScript Fetch API (AJAX)

📌 Fetch Data from an API

fetch("https://jsonplaceholder.typicode.com/users")
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log("Error:", error));

8️⃣ JavaScript Local Storage

📌 Store Data in Browser

localStorage.setItem("username", "Alice");
console.log(localStorage.getItem("username")); // Output: Alice

📌 Remove Data

localStorage.removeItem("username");

 Summary

✅ JavaScript makes web pages dynamic.
✅ Use let and const instead of var.
✅ Manipulate HTML using the DOM.
✅ Fetch data from an API using fetch().
✅ Store data in LocalStorage.

Now you’re ready to start coding JavaScript! 💡
🚀 Let me know if you need more help!

Tag
Soeng Souy

Soeng Souy

Website that learns and reads, PHP, Framework Laravel, How to and download Admin template sample source code free.

Post a Comment

CAN FEEDBACK
close