وب Dev Day 7: راهنمای JavaScript قسمت 2

    


    
    
This is a paragraph.

Document
 ├── html
 │    ├── head
 │    │    ├── title
 │    ├── body
 │         ├── h1 (id="heading")
 │         ├── p (class="text")

let heading = document.getElementById("heading");
console.log(heading.textContent);  
// Output: "Hello, DOM!"

let paragraphs = document.getElementsByClassName("text");
console.log(paragraphs[0].textContent);  
// Output: "This is a paragraph."

let allHeadings = document.getElementsByTagName("h1");
console.log(allHeadings[0].textContent);  
// Output: "Hello, DOM!"

let heading = document.querySelector("#heading"); // Selects by ID
let paragraph = document.querySelector(".text"); // Selects first element with class
let allParagraphs = document.querySelectorAll(".text"); // Selects all elements with class

console.log(heading.textContent);  
// Output: "Hello, DOM!"

document.getElementById("heading").innerHTML = "Hello, JS!";

document.getElementById("heading").textContent = "Hello, JavaScript!";

let newPara = document.createElement("p");
newPara.textContent = "This is a new paragraph!";
document.body.appendChild(newPara);

let element = document.getElementById("heading");
element.parentNode.removeChild(element);

document.getElementById("heading").style.color = "blue";

document.getElementById("heading").addEventListener("click", function() {
    alert("Heading clicked!");
});

function greet() {
    console.log("Heading clicked!");
}

let heading = document.getElementById("heading");
heading.addEventListener("click", greet);
heading.removeEventListener("click", greet);

let link = document.querySelector("a");
console.log(link.getAttribute("href"));  
// Output: The URL inside the `href` attribute

let link = document.querySelector("a");
link.setAttribute("href", "https://example.com");
console.log(link.getAttribute("href"));  
// Output: "https://example.com"

let button = document.querySelector("button");

if (button.hasAttribute("disabled")) {
    console.log("Button is disabled");
} else {
    console.log("Button is enabled");
}

let input = document.querySelector("input");
input.removeAttribute("disabled");

let box = document.querySelector(".box");
box.classList.add("active");

box.classList.remove("active");

box.classList.toggle("hidden");

console.log(box.classList.contains("hidden"));  
// Output: true or false

let button = document.querySelector("button");
console.log(button.getAttribute("data-user-id"));  
// Output: User ID stored in `data-user-id`

console.log(button.dataset.userId);  
// Output: User ID stored in `data-user-id`

button.dataset.status = "active";
console.log(button.dataset.status);  
// Output: "active"

let button = document.querySelector("button");

// Disable the button
button.setAttribute("disabled", true);

// Enable the button
button.removeAttribute("disabled");

let box = document.querySelector(".box");
box.style.backgroundColor = "blue";
box.style.color = "white";
box.style.padding = "20px";

box.style.cssText = "background: red; color: white; padding: 15px;";

box.classList.add("highlight");

box.classList.remove("highlight");

box.classList.toggle("hidden");

console.log(box.classList.contains("hidden"));  
// Output: true or false

let child = document.querySelector(".child");
console.log(child.parentNode);   
console.log(child.parentElement);

Feature                 Method
Get Parent Element  parentNode, parentElement
Get Child Elements  firstElementChild, lastElementChild
Get Sibling Elements    nextElementSibling, previousElementSibling
Scroll to Section   scrollIntoView()
Redirect to URL         window.location.href
Reload Page         window.location.reload()
Navigate History    window.history.back() / forward()

let newPara = document.createElement("p"); // Create 
 element
newPara.textContent = "This is a new paragraph!"; // Add text

document.body.appendChild(newPara); // Append to body

let parentDiv = document.getElementById("container");

let newDiv = document.createElement("div");
newDiv.textContent = "Hello, this is a new div!";
newDiv.classList.add("new-box");

parentDiv.appendChild(newDiv);

let list = document.getElementById("list");
let newItem = document.createElement("li");
newItem.textContent = "New Item";

let firstItem = list.firstElementChild; // Get first item
list.insertBefore(newItem, firstItem);  // Insert before it

Feature                        Method
Create an Element          createElement("tag")
Add Text                   element.textContent = "Text"
Append to End                  appendChild(element)
Insert Before                  insertBefore(newElement, referenceElement)
Insert at Specific Position    insertAdjacentHTML(position, html)
Prepend Element                prepend(element)
Clone Element                  cloneNode(true)

let element = document.getElementById("box");
element.remove();

let parent = document.getElementById("container");
let child = document.getElementById("child");

parent.removeChild(child);

Feature                       Method
Remove an element         element.remove()
Remove a child                parent.removeChild(child)
Remove first/last child       firstElementChild.remove() / lastElementChild.remove()
Remove all children       innerHTML = ""
Remove using parent       parentNode.removeChild(element)
Remove multiple elements      querySelectorAll().forEach(el => el.remove())

let button = document.getElementById("myButton");

button.addEventListener("click", function() {
    console.log("Button clicked!");
});

Click Me

let button = document.getElementById("myButton");

button.onclick = function() {
    alert("Button clicked!");
};

let btn = document.getElementById("myButton");

btn.addEventListener("click", () => {
    alert("Button clicked using addEventListener!");
});

let box = document.getElementById("box");

box.onmouseenter = function() {
    box.style.backgroundColor = "yellow";
};

box.onmouseleave = function() {
    box.style.backgroundColor = "white";
};

element.addEventListener("event", function);

element.addEventListener("event", function);

let button = document.getElementById("myButton");

button.addEventListener("click", function() {
    console.log(this);  // Logs the button element
    this.style.backgroundColor = "blue"; // Changes button color
});

document.addEventListener("keydown", (event) => {
    console.log(`Key pressed: ${event.key}`);
});

| Event | Description |
|-------|------------|
| `submit` | Fires when a form is submitted |
| `focus` | Fires when an input field gains focus |
| `blur` | Fires when an input field loses focus |
| `change` | Fires when an input value changes (for dropdowns, checkboxes, etc.) |
| `input` | Fires when the user types in an input field |
| `reset` | Fires when the form is reset |

let form = document.getElementById("myForm");

form.addEventListener("submit", (event) => {
    event.preventDefault(); // Prevent page reload
    console.log("Form submitted!");
});

document.getElementById("myForm").addEventListener("submit", function(event) {
    event.preventDefault(); // Prevent page reload

    let name = document.querySelector("#name").value;
    let email = document.querySelector("#email").value;
    let message = document.querySelector("#message").value;

    console.log(`Name: ${name}, Email: ${email}, Message: ${message}`);
});

document.getElementById("myForm").addEventListener("submit", function(event) {
    event.preventDefault();

    let form = event.target;
    let name = form.elements["name"].value;
    let email = form.elements["email"].value;

    console.log(`Name: ${name}, Email: ${email}`);
});

document.getElementById("myForm").addEventListener("submit", function(event) {
    event.preventDefault();

    let agree = document.querySelector("#agree").checked;
    let gender = document.querySelector('input[name="gender"]:checked').value;

    console.log(`Agreement: ${agree}, Gender: ${gender}`);
});

Feature                    Method
Get Input Value            document.querySelector("#id").value
Get Checkbox Value     document.querySelector("#id").checked
Get Selected Radio Value document.querySelector('input[name="name"]:checked').value
Get Dropdown Value     document.querySelector("#id").value
Extract All Form Data      new FormData(form).entries()
Send Data to Server    fetch("URL", { method: "POST", body: formData })

element.addEventListener("change", function(event) {
    console.log(event.target.value);
});

element.addEventListener("input", function(event) {
    console.log(event.target.value);
});

    Click Me

document.getElementById("child").addEventListener("click", () => {
    console.log("Child clicked!");
});

document.getElementById("parent").addEventListener("click", () => {
    console.log("Parent clicked!");
});

document.getElementById("child").addEventListener("click", (event) => {
    event.stopPropagation();
    console.log("Child clicked!");
});

document.getElementById("parent").addEventListener("click", () => {
    console.log("Parent clicked!");
});

let buttons = document.querySelectorAll(".btn");

buttons.forEach(button => {
    button.addEventListener("click", () => {
        console.log("Button clicked!");
    });
});

document.getElementById("parent").addEventListener("click", (event) => {
    if (event.target.matches(".btn")) {
        console.log(`Button Clicked: ${event.target.textContent}`);
    }
});