Temat 8: Obiekty w JavaScript
📘 Teoria
🔹 Czym jest obiekt?
Obiekt to struktura zawierająca:
- właściwości (dane)
- metody (funkcje)
document.write("Hello World");
🔹 Najważniejsze obiekty
- window
- document
- location
- string
- date
- math
- array
🪟 Obiekt WINDOW
| Element | Opis |
|---|---|
| 📏 length | liczba ramek |
| 📊 status | tekst w pasku stanu |
| 🔔 alert() | okno informacyjne |
| ❓ confirm() | okno wyboru |
| ⌨️ prompt() | pobieranie danych |
alert("Witaj");
let x = prompt("Podaj dane");
📄 Obiekt DOCUMENT
| Element | Opis |
|---|---|
| 📝 write() | wyświetla tekst |
| 🎯 getElementById() | pobiera element |
| 🎨 bgColor | ustawia kolor tła |
| 📄 title | tytuł strony |
document.write("Tekst");
document.bgColor = "black";
🌐 Obiekt LOCATION
| Element | Opis |
|---|---|
| 🔗 href | adres strony |
| 🌍 host | serwer |
| 🔄 reload() | odświeża stronę |
document.write(location.href);
🔤 Obiekt STRING
| Metoda | Opis |
|---|---|
| 📏 length | długość tekstu |
| 🔠 toUpperCase() | wielkie litery |
| 🔡 toLowerCase() | małe litery |
| ✂️ substring() | fragment tekstu |
| 🎨 fontcolor() | kolor tekstu |
let txt="JavaScript";
document.write(txt.length+"
");
document.write(txt.toUpperCase()+"
");
document.write(txt.substring(0,4));
📅 Obiekt DATE
| Metoda | Opis |
|---|---|
| 📆 getFullYear() | rok |
| 📅 getMonth() | miesiąc |
| 📍 getDate() | dzień |
| ⏰ getHours() | godzina |
let d = new Date();
document.write(d.getFullYear()+"
");
document.write(d.getMonth()+"
");
document.write(d.getDate());
📐 Obiekt MATH
| Metoda | Opis |
|---|---|
| 📐 sqrt() | pierwiastek |
| ⚡ pow() | potęga |
| 🎲 random() | liczba losowa |
| 🔽 floor() | zaokrąglenie w dół |
document.write(Math.sqrt(25)+"
");
document.write(Math.pow(2,3)+"
");
document.write(Math.floor(Math.random()*10));
📊 Obiekt ARRAY
| Metoda | Opis |
|---|---|
| ➕ push() | dodaje element |
| ➖ pop() | usuwa element |
| 🔀 sort() | sortuje |
| 🔄 reverse() | odwraca |
let tab = [1,2,3];
document.write(tab[0]+"
");
document.write(tab.length);
let tab = [];
for(let i=0;i<5;i++){
tab[i]=Number(prompt("Podaj"));
}
🧠 Ćwiczenia
- Wyświetl aktualną datę
- Wylosuj liczbę 1–10
- Wypisz długość tekstu
- Utwórz tablicę i wypisz elementy
- Wyświetl adres strony
let d = new Date();
document.write(d+"
");
document.write(Math.floor(Math.random()*10));
let t="abc";
document.write(t.length);
📊 Zadania egzaminacyjne
- Oblicz pierwiastek liczby podanej przez użytkownika (prompt) i wyświetl wynik w przeglądarce.
- Wygeneruj 10 liczb losowych z zakresu 1–100 i wyświetl je w jednej linii.
- Utwórz tablicę 5 liczb podanych przez użytkownika i oblicz ich sumę.
- Wyświetl aktualną datę i godzinę w przeglądarce.
- Utwórz skrypt, który za pomocą okna dialogowego wczyta liczbę i obliczy jej pierwiastek kwadratowy, a wynik wyświetli w oknie przeglądarki.
- Utwórz skrypt, który wygeneruje liczby z zakresu <1,50> dla dwudziestoelementowej tablicy, wyszuka w niej wartości podzielne przez 3, wyświetli je oraz obliczy ich średnią arytmetyczną.
// Zadanie pierwiastek
let x = Number(prompt("Podaj liczbę:"));
document.write(Math.sqrt(x));
// Tablica + średnia
let tab = [];
let suma = 0;
for(let i=0;i<20;i++){
tab[i] = Math.floor(Math.random()*50)+1;
if(tab[i] % 3 == 0){
document.write(tab[i]+"
");
suma += tab[i];
}
}
document.write("Średnia: "+(suma/20));
📝 Test (10 pytań)
1. document służy do:
2. Math.sqrt:
3. Date:
4. Array:
5. location.href:
6. length:
7. random:
8. write:
9. prompt:
10. obiekt: