JavaScript od podstaw — w stronę INF.03

let liczba = 42;
console.log(liczba);

const PI = 3.14159;
alert(PI);

let imie = "Anna";
let nazwisko = "Kowalska";
let wiek = 19;

console.log(imie + " " + nazwisko + " ma " + wiek + " lat.");

let kolor = prompt("Podaj swój ulubiony kolor:");
console.log("Twój ulubiony kolor to: " + kolor);

<div id="wynik"></div>

let a = 30;
let b = 10;

document.getElementById("wynik").innerHTML = a + b;

let a = 50;
let b = 20;

document.getElementById("wynik").innerHTML = "<h1>" + (a + b) + "</h1>";

let a = 100;
let b = 200;

document.getElementById("wynik").innerHTML = `<h1>${a + b}</h1>`;

let tekst = "";
for (let i = 1; i <= 100; i++) {
  tekst += i;
  if (i < 100) tekst += ", ";
}

document.getElementById("wynik").innerHTML = tekst;

let tabela = "<table id='kwadraty'>";
for (let i = 0; i <= 9; i++) {
  tabela += `<tr><td>${i}</td><td>${i * i}</td></tr>`;
}
tabela += "</table>";

document.getElementById("wynik").innerHTML = tabela;

#kwadraty, #kwadraty td {
  border: 1px solid #333;
  border-collapse: collapse;
  padding: 4px 10px;
}

let licznik = 10;
while (licznik < 5) {
  console.log("To nie wykona się ani razu");
  licznik++;
}

let licznik2 = 10;
do {
  console.log("To wykona się raz, mimo że warunek jest fałszywy");
  licznik2++;
} while (licznik2 < 5);

let liczba = 7;
let opis = document.getElementById("opis");

if (liczba > 0) {
  opis.innerHTML = "<h1>Liczba większa od zera.</h1>";
} else {
  opis.innerHTML = "Zero lub liczba ujemna.";
}

let liczba = -4;

document.getElementById("opis").innerHTML =
  liczba > 0 ? "dodatnia" : "0/ujemna";

let liczba = 0;
let opis = document.getElementById("opis");

if (liczba > 0) {
  opis.innerHTML = "<h1>Liczba większa od zera.</h1>";
} else if (liczba < 0) {
  opis.innerHTML = "Liczba ujemna.";
} else {
  opis.innerHTML = "Zero";
}

let ocena = 4;
let opisOceny = "";

switch (ocena) {
  case 1: opisOceny = "niedostateczny"; break;
  case 2: opisOceny = "dopuszczający"; break;
  case 3: opisOceny = "dostateczny"; break;
  case 4: opisOceny = "dobry"; break;
  case 5: opisOceny = "bardzo dobry"; break;
  case 6: opisOceny = "celujący"; break;
  default: opisOceny = "nieprawidłowa ocena";
}

document.getElementById("opisoceny").innerHTML = opisOceny;

function policzSume(a, b) {
  return a + b;
}

console.log(policzSume(12, 8));

function sprawdzParzystosc(liczba) {
  return liczba % 2 === 0;
}

console.log(sprawdzParzystosc(17));
console.log(sprawdzParzystosc(20));

let liczby = [5, 12, 17, 23, 123, 45, 54];

console.log(liczby);
console.log(liczby.length);

let liczby = [5, 12, 17, 23, 123, 45, 54];
let tekst = "";

for (const l of liczby) {
  tekst += l + ", ";
}

document.getElementById("tablica").innerHTML = tekst;

let liczby = [5, 12, 17, 23, 123, 45, 54];

liczby.push(201, 1);
console.log(liczby);

liczby.pop();
console.log(liczby.length, liczby);

let osoby = ["Zenek", "Tomasz", "Adam", "Ewa", "Krzysztof"];

osoby.sort();
console.log(osoby);

<button id="btnPowitaj">Powitaj!</button>
<div id="wynik"></div>

document.getElementById("btnPowitaj").addEventListener("click", function () {
  document.getElementById("wynik").innerHTML = "<h1>Witaj świecie!</h1>";
  document.getElementById("btnPowitaj").style.display = "none";
});

<input type="range" id="suwak" min="0" max="100" value="0">
<div id="liczba">0</div>

document.getElementById("suwak").addEventListener("input", function () {
  document.getElementById("liczba").innerHTML = this.value;
});

<button>jeden</button>
<button>dwa</button>
<button>trzy</button>
<div id="opis"></div>

const przyciski = document.querySelectorAll("button");

for (const przycisk of przyciski) {
  przycisk.addEventListener("click", function () {
    document.getElementById("opis").innerHTML = "Kliknąłeś na przycisk " + this.innerHTML;
  });
}

<input type="number" id="pole">
<button id="btnPokaz">Pokaż</button>
<div id="wynik"></div>

document.getElementById("btnPokaz").addEventListener("click", function () {
  let liczba = document.getElementById("pole").value;
  console.log(typeof liczba);

  liczba = Number(liczba);
  console.log(typeof liczba);

  document.getElementById("wynik").innerHTML = `<h1>${liczba}</h1>`;
});

<input type="number" id="pole1">
+
<input type="number" id="pole2">
<button id="btnRowna">=</button>
<div id="wynik"></div>

document.getElementById("btnRowna").addEventListener("click", function () {
  let a = Number(document.getElementById("pole1").value);
  let b = Number(document.getElementById("pole2").value);

  document.getElementById("wynik").innerHTML = a + b;
});

<select id="pasmo">
  <option value="">Wybierz pasmo</option>
  <option value="Tatry">Tatry</option>
  <option value="Karkonosze">Karkonosze</option>
  <option value="Bieszczady">Bieszczady</option>
</select>
<div id="opis"></div>

const szczyty = {
  Tatry: "Rysy, 2499 m",
  Karkonosze: "Śnieżka, 1603 m",
  Bieszczady: "Tarnica, 1346 m"
};

document.getElementById("pasmo").addEventListener("change", function () {
  document.getElementById("opis").innerHTML = `${this.value}: ${szczyty[this.value]}`;
});

<input type="radio" name="cena" value="200"> 200 zł
<input type="radio" name="cena" value="300"> 300 zł
<input type="radio" name="cena" value="500"> 500 zł
<div id="wynik"></div>

const opcje = document.querySelectorAll('input[name="cena"]');

for (const opcja of opcje) {
  opcja.addEventListener("change", function () {
    document.getElementById("wynik").innerHTML = this.value;
  });
}

<button id="btnTlo">Zmień tło</button>

document.getElementById("btnTlo").addEventListener("click", function () {
  document.body.style.backgroundColor = "yellow";
});

<input type="range" id="suwak" min="0" max="500" value="300">
<span id="opis">300px</span>
<div id="kwadrat" style="width:300px; height:300px; background:#4FD1C5;"></div>

document.getElementById("suwak").addEventListener("input", function () {
  document.getElementById("kwadrat").style.width = this.value + "px";
  document.getElementById("kwadrat").style.height = this.value + "px";
  document.getElementById("opis").innerHTML = this.value + "px";
});

<input type="range" id="r" min="0" max="255" value="0">

let r = 0, g = 0, b = 0;

document.getElementById("r").addEventListener("input", function () {
  r = this.value;
  document.body.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
});

<span id="slowo" style="color:red;">czerwony</span>

document.getElementById("slowo").addEventListener("click", function () {
  const styl = getComputedStyle(this);
  console.log(styl.color);
});

let osoby = ["Jan Nowak", "Kazimierz Zyga", "Stefan Koc", "Ewa Mocek", "Mariusz Abramski"];

if (Array.isArray(osoby)) {
  document.getElementById("opis").innerHTML = "osoby to tablica";
} else {
  document.getElementById("opis").innerHTML = "osoby to nie tablica";
}

<div id="wynik1"></div>
<div id="wynik2"></div>

let osoby = ["Jan Nowak", "Kazimierz Zyga", "Stefan Koc", "Ewa Mocek", "Mariusz Abramski"];

document.getElementById("wynik1").innerHTML = osoby.join(", ");

let akapity = "";
for (const osoba of osoby) {
  akapity += `<p>${osoba}</p>`;
}
document.getElementById("wynik2").innerHTML = akapity;

let samochody = ["Fiat", "Skoda", "Volvo", "Mercedes", "Kia", "Opel", "Citroen"];

let doWyswietlenia = ["tajne", "tajne", ...samochody.slice(2)];
console.log(doWyswietlenia);

let osoby = ["Jan Nowak", "Kazimierz Zyga", "Stefan Koc", "Ewa Mocek", "Mariusz Abramski"];

let indeks = osoby.indexOf("Ewa Mocek");
let usuniete = osoby.splice(indeks, 1, "Maria Kapik", "Elżbieta Konf");

console.log(usuniete);
console.log(osoby);

let zdanie = "JavaScript jest językiem programowania webowego.";
let wyrazy = zdanie.split(" ");

let html = "";
for (const wyraz of wyrazy) {
  html += `<span style="background:yellow; margin-right:4px;">${wyraz}</span>`;
}

document.getElementById("wynik").innerHTML = html;