Kurs JavaScript z przykładami

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8" />
  <title>Skrypt wewnetrzny</title>
</head>
<body>
  <h1 id="tytul">Strona</h1>

  <!-- skrypt tuz przed </body>, gdy HTML jest juz wczytany -->
  <script>
    const tytul = document.getElementById("tytul")
    tytul.textContent = "Zmieniono przez JavaScript"
    console.log("Skrypt wewnetrzny dziala")
  </script>
</body>
</html>

<!-- plik: index.html -->
<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8" />
  <title>Skrypt zewnetrzny</title>
  <!-- defer: skrypt uruchomi sie po zbudowaniu strony -->
  <script src="skrypt.js" defer></script>
</head>
<body>
  <h1 id="tytul">Strona</h1>
</body>
</html>

/* plik: skrypt.js */
const tytul = document.getElementById("tytul")
tytul.textContent = "Tekst z pliku zewnetrznego"
console.log("Skrypt zewnetrzny dziala")

const imie = "Anna"
let wiek = 18
const czyPelnoletni = wiek >= 18

console.log(imie, typeof imie)          // Anna string
console.log(wiek, typeof wiek)          // 18 number
console.log(czyPelnoletni, typeof czyPelnoletni) // true boolean

const imie = "Anna"
const wiek = 18

const komunikat = `Uczen ${imie} ma ${wiek} lat.`
console.log(komunikat) // Uczen Anna ma 18 lat.

const punkty = 75

if (punkty >= 90) {
  console.log("Ocena: 5")
} else if (punkty >= 75) {
  console.log("Ocena: 4")
} else if (punkty >= 50) {
  console.log("Ocena: 3")
} else {
  console.log("Ocena: 2")
}
// Ocena: 4

const wiek = 16
const bilet = wiek < 18 ? "ulgowy" : "normalny"
console.log(`Bilet: ${bilet}`) // Bilet: ulgowy

let suma = 0
for (let i = 1; i <= 5; i++) {
  console.log(i)
  suma += i
}
console.log("Suma:", suma) // Suma: 15

let i = 1
let suma = 0
while (i <= 5) {
  suma += i
  i++
}
console.log("Suma:", suma) // Suma: 15

function poleProstokata(a, b) {
  return a * b
}

console.log(poleProstokata(4, 5)) // 20
console.log(poleProstokata(3, 7)) // 21

const poleKwadratu = (a = 1) => a * a

console.log(poleKwadratu(5)) // 25
console.log(poleKwadratu())  // 1 (uzyto wartosci domyslnej)

const oceny = [3, 4, 5, 2, 4]
let suma = 0

for (let i = 0; i < oceny.length; i++) {
  suma += oceny[i]
}
console.log("Suma ocen:", suma) // Suma ocen: 18

const oceny = [3, 4, 5, 2, 4]
const suma = oceny.reduce((acc, o) => acc + o, 0)
const srednia = suma / oceny.length

console.log(`Srednia: ${srednia.toFixed(2)}`) // Srednia: 3.60

const uczen = {
  imie: "Marek",
  klasa: "3A",
  przedstaw() {
    return `${this.imie} z klasy ${this.klasa}`
  },
}

console.log(uczen.imie)         // Marek
console.log(uczen.przedstaw())  // Marek z klasy 3A

const produkty = [
  { nazwa: "Mysz", cena: 50 },
  { nazwa: "Monitor", cena: 800 },
]

for (const p of produkty) {
  console.log(`${p.nazwa}: ${p.cena} zl`)
}
// Mysz: 50 zl
// Monitor: 800 zl

const naglowek = document.getElementById("tytul")
naglowek.textContent = "Nowy tytul strony"

const akapit = document.querySelector(".opis")
akapit.style.color = "green"

const lista = document.querySelector("#lista")
const owoce = ["jablko", "gruszka", "sliwka"]

owoce.forEach((owoc) => {
  const li = document.createElement("li")
  li.textContent = owoc
  lista.appendChild(li)
})

const przycisk = document.querySelector("#klik")

przycisk.addEventListener("click", () => {
  alert("Kliknieto przycisk!")
})

const pole = document.querySelector("#imie")
const wynik = document.querySelector("#powitanie")

pole.addEventListener("input", (e) => {
  wynik.textContent = `Witaj, ${e.target.value}!`
})

const form = document.querySelector("#formularz")
const login = document.querySelector("#login")

form.addEventListener("submit", (e) => {
  e.preventDefault()
  if (login.value === "") {
    alert("Podaj login!")
  } else {
    alert("Formularz wyslany")
  }
})

const email = document.querySelector("#email")
const haslo = document.querySelector("#haslo")
const info = document.querySelector("#info")

function sprawdz() {
  if (!email.value.includes("@")) {
    info.textContent = "Niepoprawny e-mail"
  } else if (haslo.value.length < 8) {
    info.textContent = "Haslo min. 8 znakow"
  } else {
    info.textContent = "Dane poprawne"
  }
}

const dzis = new Date()
const d = dzis.getDate()
const m = dzis.getMonth() + 1  // miesiace liczone od 0
const r = dzis.getFullYear()

console.log(`${d}-${m}-${r}`) // np. 11-9-2026

// zapis
localStorage.setItem("nick", "admin")

// odczyt
const nick = localStorage.getItem("nick")
console.log(nick) // admin

// zapis obiektu
const ustawienia = { motyw: "ciemny", jezyk: "pl" }
localStorage.setItem("ust", JSON.stringify(ustawienia))
const odczyt = JSON.parse(localStorage.getItem("ust"))
console.log(odczyt.motyw) // ciemny