JavaScript i HTML

Articles

JavaScript i HTML

Ten artykuł wyjaśnia JavaScript i HTML.

YouTube Video

javascript-html-dom.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8      box-sizing: border-box;
  9    }
 10
 11    body {
 12      margin: 0;
 13      padding: 2em;
 14      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 15      background-color: #f7f9fc;
 16      color: #333;
 17      line-height: 1.6;
 18    }
 19
 20    .container {
 21      max-width: 800px;
 22      margin: 0 auto;
 23      padding: 1em;
 24      background-color: #ffffff;
 25      border: 1px solid #ccc;
 26      border-radius: 10px;
 27      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 28    }
 29
 30    h1, h2 {
 31      font-size: 1.5rem;
 32      color: #007bff;
 33      margin-top: 0.5em;
 34      margin-bottom: 0.5em;
 35      border-left: 5px solid #007bff;
 36      padding-left: 0.6em;
 37      background-color: #e9f2ff;
 38    }
 39
 40    button {
 41      display: block;
 42      margin: 1em auto;
 43      padding: 0.75em 1.5em;
 44      font-size: 1rem;
 45      background-color: #007bff;
 46      color: white;
 47      border: none;
 48      border-radius: 6px;
 49      cursor: pointer;
 50      transition: background-color 0.3s ease;
 51    }
 52
 53    button:hover {
 54      background-color: #0056b3;
 55    }
 56
 57    #output {
 58      margin-top: 1em;
 59      background-color: #1e1e1e;
 60      color: #0f0;
 61      padding: 1em;
 62      border-radius: 8px;
 63      min-height: 200px;
 64      font-family: Consolas, monospace;
 65      font-size: 0.95rem;
 66      overflow-y: auto;
 67      white-space: pre-wrap;
 68    }
 69
 70    .highlight {
 71      outline: 3px solid #ffc107; /* yellow border */
 72      background-color: #fff8e1;  /* soft yellow background */
 73      transition: background-color 0.3s ease, outline 0.3s ease;
 74    }
 75
 76    .active {
 77      background-color: #28a745; /* green background */
 78      color: #fff;
 79      box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 80      transition: background-color 0.3s ease, box-shadow 0.3s ease;
 81    }
 82  </style>
 83</head>
 84<body>
 85  <div class="container">
 86    <h1>JavaScript Console</h1>
 87    <button id="executeBtn">Execute</button>
 88    <div id="output"></div>
 89  </div>
 90
 91  <div class="container">
 92    <h2>HTML Sample</h2>
 93    <div id="content">Hello, World!</div>
 94    <button id="changeText">Change Text</button>
 95  </div>
 96
 97  <script>
 98    // Override console.log to display messages in the #output element
 99    (function () {
100      const originalLog = console.log;
101      console.log = function (...args) {
102        originalLog.apply(console, args);
103        const output = document.getElementById('output');
104        output.textContent += args.map(String).join(' ') + '\n';
105      };
106    })();
107
108    document.getElementById('executeBtn').addEventListener('click', () => {
109      // Prevent multiple loads
110      if (document.getElementById('externalScript')) return;
111
112      const script = document.createElement('script');
113      script.src = 'javascript-html-dom.js';
114      script.id = 'externalScript';
115      //script.onload = () => console.log('javascript-html-dom.js loaded and executed.');
116      //script.onerror = () => console.log('Failed to load javascript-html-dom.js.');
117      document.body.appendChild(script);
118    });
119  </script>
120</body>
121</html>

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(`Title: ${window.document.title}`);
 3
 4// Get and display the current URL
 5console.log(`URL: ${window.location.href}`);
 6
 7// Go back to the previous page
 8// Note: this will navigate back in history, so be careful when running it
 9console.log("Navigating back to the previous page...");
10window.history.back();
11
12// Display the browser's user agent
13console.log(`User Agent: ${window.navigator.userAgent}`);
14
15// Display the width and height of the viewport
16console.log(`Viewport Width: ${window.innerWidth}`);
17console.log(`Viewport 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: To zdarzenie jest wywoływane, gdy strona zostanie w pełni załadowana.
window.onresize: To zdarzenie jest wywoływane, gdy okno zostanie zmienione.
window.onscroll: To zdarzenie 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.

Pobieranie elementów DOM

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

document.getElementById(): Pobiera element według atrybutu id.
document.getElementsByClassName(): Pobiera elementy według nazwy klasy. Zwraca HTMLCollection. HTMLCollection to dynamiczna kolekcja, która odzwierciedla zmiany w DOM w czasie rzeczywistym.
document.getElementsByTagName(): Pobiera elementy według nazwy tagu. Zwraca HTMLCollection.
document.querySelector(): Używa selektora CSS, aby pobrać pierwszy pasujący element.
document.querySelectorAll(): Używa selektora CSS, aby pobrać wszystkie pasujące elementy. Zwraca NodeList. NodeList to statyczna kolekcja, która przechowuje stan w momencie pobierania i nie odzwierciedla późniejszych zmian w DOM.

Przykład: `getElementById` i `querySelector`

1<div id="content">Hello, World!</div>
2<button id="changeText">Change Text</button>

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"
3console.log(id);

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(): Dodaje klasę.
remove(): Usuwa klasę.
toggle(): Dodaje lub usuwa klasę w zależności od tego, czy już istnieje.
contains(): Sprawdza, 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: Uzyskuje dostęp do węzła nadrzędnego.
childNodes: Uzyskuje dostęp do węzłów potomnych. Możesz uzyskać dostęp do wszystkich typów węzłów, nie tylko węzłów elementów takich jak tagi HTML, ale także węzłów tekstowych i komentarzy.
firstChild / lastChild: Uzyskuje dostęp do pierwszego i ostatniego elementu potomnego.
nextSibling / previousSibling: Uzyskuje dostęp do następnego i poprzedniego elementu rodzeństwa.

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// Get the container element where the HTML will be inserted
 2const content = document.getElementById('content');
 3
 4// Create the <ul> element with id="list"
 5const list = document.createElement('ul');
 6list.id = 'list';
 7
 8// Add initial list items
 9const item1 = document.createElement('li');
10item1.textContent = 'Item 1';
11list.appendChild(item1);
12
13const item2 = document.createElement('li');
14item2.textContent = 'Item 2';
15list.appendChild(item2);
16
17// Create the <button> element with id="addItem"
18const addItemButton = document.createElement('button');
19addItemButton.id = 'addItem';
20addItemButton.textContent = 'Add Item';
21
22// Append the list and button to the content container
23content.appendChild(list);
24content.appendChild(addItemButton);
25
26// Add event listener to the button
27addItemButton.addEventListener('click', () => {
28    const newItem = document.createElement('li');
29    newItem.textContent = 'New Item';
30    list.appendChild(newItem);
31});

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 Shadow DOM w JavaScript

JavaScript i HTML

YouTube Video

Obiekt window w JavaScript

Kluczowe cechy obiektu window

Właściwości

Metody

Obsługa zdarzeń

Rola jako zmienna globalna

Manipulacja DOM w JavaScript

Podstawy DOM

Pobieranie elementów DOM

Przykład: getElementById i querySelector

Manipulacja DOM

Zmiana tekstu

Zmiana atrybutów

Zmiana CSS

Manipulowanie klasami

Tworzenie i usuwanie elementów DOM

Tworzenie nowych elementów

Usuwanie Elementów

Dodawanie zdarzeń

Poruszanie się po drzewie DOM

Przykład: Dodawanie nowego elementu do listy

Podsumowanie

YouTube Video

Obiekt `window` w JavaScript

Kluczowe cechy obiektu `window`

Przykład: `getElementById` i `querySelector`