Articles
Wprowadzenie do JavaScript
JavaScript i HTML

JavaScript i HTML

Ten artykuł wyjaśnia JavaScript i HTML.

YouTube Video

Obiekt window w JavaScript

Obiekt window w JavaScript jest obiektem globalnym w środowisku przeglądarki, dostarczającym funkcje i informacje związane ze stroną internetową oraz oknem przeglądarki. Ponieważ window jest globalnym zakresem przeglądarki, cały kod JavaScript uruchamiany w przeglądarce staje się częścią obiektu window. Obiekt window odgrywa ważną rolę w uruchamianiu JavaScript w środowisku przeglądarki, dostarczając wiele API i właściwości.

Kluczowe cechy obiektu window

Właściwości 

 1// Get and display the document's title
 2console.log(window.document.title);
 3
 4// Get and display the current URL
 5console.log(window.location.href);
 6
 7// Go back to the previous page
 8window.history.back();
 9
10// Display the browser's user agent
11console.log(window.navigator.userAgent);
12
13// Display the width and height of the viewport
14console.log(`Width: ${window.innerWidth}, Height: ${window.innerHeight}`);
  • window.document: Uzyskuje dostęp do bieżącego dokumentu HTML.
  • window.location: Zarządza bieżącym URL-em i nawigacją w przeglądarce.
  • window.history: Uzyskuje dostęp do historii przeglądarki i umożliwia nawigację do przodu i do tyłu.
  • window.navigator: Dostarcza informacji o przeglądarce i urządzeniu.
  • window.innerWidth / window.innerHeight: Pobiera szerokość i wysokość obszaru widoku.

Metody 

 1// Show an alert
 2window.alert('Hello, this is an alert!');
 3
 4// Show a confirmation dialog
 5if (window.confirm('Are you sure you want to proceed?')) {
 6    console.log('User clicked OK');
 7} else {
 8    console.log('User clicked Cancel');
 9}
10
11// Show a prompt dialog
12const userInput = window.prompt('Please enter your name:');
13console.log(`Hello, ${userInput}!`);
14
15// Open a new tab
16window.open('https://www.example.com', '_blank');
17
18// Display a message after 3 seconds
19window.setTimeout(() => {
20    console.log('This message appears after 3 seconds!');
21}, 3000);
22
23// Display a message every second
24const intervalId = window.setInterval(() => {
25    console.log('This message appears every second!');
26}, 1000);
27
28// Clear the interval after 5 seconds
29setTimeout(() => {
30    clearInterval(intervalId);
31    console.log('Interval cleared.');
32}, 5000);
  • window.alert(): Wyświetla okno alertu.
  • window.confirm(): Wyświetla okno dialogowe proszące o potwierdzenie użytkownika i zwraca wynik OK lub Anuluj.
  • window.prompt(): Wyświetla okno dialogowe proszące o wprowadzenie danych przez użytkownika i pobiera wprowadzoną wartość.
  • window.open(): Otwiera nowe okno lub kartę.
  • window.setTimeout() / window.setInterval(): Ustawia licznik, aby wykonać funkcję po określonym czasie lub w regularnych odstępach.

Obsługa zdarzeń 

 1// Display a message when the page is fully loaded
 2window.onload = () => {
 3    console.log('Page is fully loaded!');
 4};
 5
 6// Display a message when the window is resized
 7window.onresize = () => {
 8    console.log('Window resized! New size:', window.innerWidth, 'x', window.innerHeight);
 9};
10
11// Display a message when the page is being scrolled
12window.onscroll = () => {
13    console.log('Page is being scrolled!');
14};
  • window.onload: Zdarzenie wykonywane, gdy strona jest w pełni załadowana.
  • window.onresize: Zdarzenie wykonywane, gdy zmienia się rozmiar okna.
  • window.onscroll: Zdarzenie, które jest wywoływane, gdy użytkownik przewija stronę.

Rola jako zmienna globalna 

1var myVar = 10;
2console.log(window.myVar); // 10
  • Obiekt window przechowuje zmienne globalne i funkcje. Innymi słowy, zadeklarowane zmienne i funkcje automatycznie stają się własnościami obiektu window.

Manipulacja DOM w JavaScript

Manipulacja DOM (Model Obiektowy Dokumentu) w JavaScript jest używana do dynamicznej interakcji z elementami na stronie internetowej. DOM reprezentuje strukturę dokumentu HTML jako drzewo, które można zmieniać za pomocą JavaScript, aby modyfikować strukturę i kontrolować wyświetlanie strony.

Podstawy DOM

DOM traktuje HTML strony jako obiekty, umożliwiając dostęp i modyfikację elementów oraz atrybutów. Użyj obiektu document, aby uzyskać dostęp do dokumentu HTML.

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <title>Example of DOM Manipulation</title>
 5  </head>
 6  <body>
 7    <div id="content">Hello, World!</div>
 8    <button id="changeText">Change Text</button>
 9  </body>
10</html>

Pobieranie elementów DOM

JavaScript posiada wiele metod dostępu do elementów w DOM.

  • document.getElementById(): Uzyskanie elementu na podstawie atrybutu id
  • document.getElementsByClassName(): Uzyskanie elementów na podstawie nazwy klasy (HTMLCollection)
  • document.getElementsByTagName(): Uzyskanie elementów na podstawie nazwy tagu (HTMLCollection)
  • document.querySelector(): Uzyskanie pierwszego pasującego elementu przy użyciu selektora CSS
  • document.querySelectorAll(): Uzyskanie wszystkich pasujących elementów przy użyciu selektora CSS (NodeList)

Przykład: getElementById i querySelector 

1const content = document.getElementById('content');
2console.log(content.textContent); // "Hello, World!"
3
4const button = document.querySelector('#changeText');

Manipulacja DOM

Na uzyskanych elementach można wykonać różne operacje.

Zmiana tekstu

Aby zmienić tekst elementu, użyj textContent lub innerHTML.

  • textContent: Pobierz lub zmień zawartość tekstową elementu. Tagi HTML nie są interpretowane.
  • innerHTML: Pobierz lub zmień zawartość HTML elementu. Ciągi zawierające tagi HTML również są przetwarzane.
1content.textContent = 'Hello, world!';  // Change the text
2button.innerHTML = '<strong>Click to change</strong>';  // Change including HTML

Zmiana atrybutów

Użyj funkcji setAttribute() i getAttribute() do zmiany atrybutów elementu.

1button.setAttribute('disabled', 'true');  // Disable the button
2const id = content.getAttribute('id');  // Get the "content"

Zmiana CSS

Użyj właściwości style, aby zmienić style CSS.

1content.style.color = 'red';  // Change the text color to red
2content.style.fontSize = '20px';  // Change the font size

Manipulowanie klasami

Użyj classList, aby dodać lub usunąć klasy z elementu.

  • add(): Dodaj klasę
  • remove(): Usuń klasę
  • toggle(): Dodaj lub usuń klasę w zależności od jej obecności
  • contains(): Sprawdź, czy klasa istnieje
1content.classList.add('highlight');  // Add a class
2button.classList.toggle('active');   // Toggle a class

Tworzenie i usuwanie elementów DOM

Tworzenie nowych elementów

Użyj document.createElement(), aby utworzyć nowy element i dodać go do DOM.

1const newDiv = document.createElement('div');  // Create a new div element
2newDiv.textContent = 'This is a new element';
3document.body.appendChild(newDiv);  // Append to the body element

Usuwanie Elementów

Użyj metody remove(), aby usunąć element.

1newDiv.remove();  // Remove the created element

Dodawanie zdarzeń

W ramach manipulacji DOM możesz dodać obsługę zdarzeń reagujących na interakcje użytkownika. Użyj addEventListener(), aby obsługiwać zdarzenia, takie jak kliknięcia czy interakcje z klawiaturą.

1button.addEventListener('click', () => {
2    content.textContent = 'The text has been changed';
3});

W tym przykładzie kliknięcie przycisku zmienia tekst elementu #content.

Poruszanie się po drzewie DOM

Możesz poruszać się po DOM, aby uzyskać dostęp do elementów nadrzędnych i sąsiednich.

  • parentNode: Uzyskaj dostęp do węzła nadrzędnego
  • childNodes: Uzyskaj dostęp do węzłów podrzędnych (wszystkich typów)
  • firstChild / lastChild: Pierwszy/ostatni element podrzędny
  • nextSibling / previousSibling: Następny/poprzedni element sąsiedni
1const parent = content.parentNode;  // Get the parent element
2const firstChild = parent.firstChild;  // Get the first child element
3console.log(firstChild);

Przykład: Dodawanie nowego elementu do listy

Oto przykład dodawania nowego elementu do listy.

 1<ul id="list">
 2  <li>Item 1</li>
 3  <li>Item 2</li>
 4</ul>
 5<button id="addItem">Add Item</button>
 6
 7<script>
 8    const list = document.getElementById('list');
 9    const addItemButton = document.getElementById('addItem');
10
11    addItemButton.addEventListener('click', () => {
12        const newItem = document.createElement('li');
13        newItem.textContent = 'New Item';
14        list.appendChild(newItem);
15    });
16</script>

W tym kodzie kliknięcie przycisku "Dodaj element" dodaje nowy element <li> do listy.

Podsumowanie

  • Manipulowanie DOM w JavaScript pozwala pobierać, zmieniać, tworzyć i usuwać elementy w dokumencie HTML.
  • Możesz pobierać elementy, używając metod takich jak getElementById() i querySelector().
  • Użyj textContent lub innerHTML, aby zmienić tekst i HTML, oraz setAttribute(), aby manipulować atrybutami.
  • Użyj createElement(), aby tworzyć nowe elementy, oraz remove(), aby je usuwać.
  • Możesz tworzyć interaktywne strony internetowe, które reagują na działania użytkownika poprzez obsługę zdarzeń.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video

Funkcje generatorów w JavaScript