Ćwiczenia JavaScript

🔁 Pętla for

for (let i = 1; i <= 10; i++) {
  document.querySelector('#for-zad1').textContent += i + "\n";
}
    

let suma = 0;
for (let i = 1; i <= 100; i++) {
  suma += i;
}
document.querySelector('#for-zad2').textContent = "Suma: " + suma;
    

for (let i = 1; i <= 20; i++) {
  if (i % 2 === 0) {
    document.querySelector('#for-zad3').textContent += i + "\n";
  }
}
    

let liczba = 5;
for (let i = 1; i <= 10; i++) {
  document.querySelector('#for-zad4').textContent += liczba + " x " + i + " = " + (liczba * i) + "\n";
}
    

let tekst = "JavaScript";
for (let i = 0; i < tekst.length; i++) {
  document.querySelector('#for-zad5').textContent += tekst[i] + "\n";
}
    

🔁 Pętla while

let i = 1;
while (i <= 10) {
  document.querySelector('#while-zad1').textContent += i + "\n";
  i++;
}
    

let suma = 0;
let i = 1;
while (i <= 100) {
  suma += i;
  i++;
}
document.querySelector('#while-zad2').textContent = "Suma: " + suma;
    

let i = 1;
while (i <= 20) {
  if (i % 2 !== 0) {
    document.querySelector('#while-zad3').textContent += i + "\n";
  }
  i++;
}
    

let liczba = 123456789;
let ilosc = 0;
while (liczba > 0) {
  liczba = Math.floor(liczba / 10);
  ilosc++;
}
document.querySelector('#while-zad4').textContent = "Liczba cyfr: " + ilosc;
    

let tekst = "Informatyka";
let i = 0;
while (i < tekst.length) {
  document.querySelector('#while-zad5').textContent += tekst[i] + "\n";
  i++;
}
    

🔁 Pętla do...while

let i = 1;
do {
  document.querySelector('#do-while-zad1').textContent += i + "\n";
  i++;
} while (i <= 10);
    

let suma = 0;
let i = 1;
do {
  suma += i;
  i++;
} while (i <= 100);
document.querySelector('#do-while-zad2').textContent = "Suma: " + suma;
    

let i = 1;
do {
  if (i % 3 === 0) {
    document.querySelector('#do-while-zad3').textContent += i + "\n";
  }
  i++;
} while (i <= 30);
    

let tekst = "Technik";
let i = 0;
do {
  document.querySelector('#do-while-zad4').textContent += tekst[i] + "\n";
  i++;
} while (i < tekst.length);
    

let liczba = 101;
do {
  if (liczba % 17 === 0) {
    document.querySelector('#do-while-zad5').textContent = "Znaleziono: " + liczba;
    break;
  }
  liczba++;
} while (true);
    

🔧 Funkcje

Zadanie 1

Stwórz funkcję, która przyjmuje dwie liczby i zwraca ich sumę.

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

Wynik:

Zadanie 2

Stwórz funkcję, która przyjmuje imię użytkownika i wyświetla powitanie.

function powitanie(imie) {
  return "Witaj, " + imie + "!";
}
  

Wynik:

Zadanie 3

Stwórz funkcję, która zwraca największą z dwóch liczb.

function najwieksza(a, b) {
  return a > b ? a : b;
}
  

Wynik:

Zadanie 4

Stwórz funkcję, która przyjmuje tablicę liczb i zwraca ich średnią.

function srednia(tablica) {
  let suma = 0;
  for (let i = 0; i < tablica.length; i++) {
    suma += tablica[i];
  }
  return suma / tablica.length;
}
  

Wynik:

Zadanie 5

Stwórz funkcję, która sprawdza, czy liczba jest liczbą pierwszą.

function czyPierwsza(liczba) {
  if (liczba < 2) return false;
  for (let i = 2; i <= Math.sqrt(liczba); i++) {
    if (liczba % i === 0) {
      return false;
    }
  }
  return true;
}
  

Wynik:

🧳 Obiekty

Zadanie 1

Stwórz obiekt reprezentujący samochód z właściwościami: marka, model, rok produkcji, oraz metodą, która wyświetla pełne informacje o samochodzie.

const samochod = {
  marka: "Toyota",
  model: "Corolla",
  rok: 2015,
  informacje: function() {
    return this.marka + " " + this.model + ", " + this.rok;
  }
};
  

Wynik:

Zadanie 2

Stwórz obiekt "osoba", który zawiera imię, wiek oraz metodę, która zwraca wiek osoby za 5 lat.

const osoba = {
  imie: "Jan",
  wiek: 25,
  wiekZa5Lat: function() {
    return this.wiek + 5;
  }
};
  

Wynik:

Zadanie 3

Stwórz obiekt "kontoBankowe" z właściwościami saldo i właściciel, oraz metodą do wpłacania i wypłacania pieniędzy.

const kontoBankowe = {
  saldo: 1000,
  wlasciciel: "Anna",
  wplac: function(kwota) {
    this.saldo += kwota;
    return this.saldo;
  },
  wyplac: function(kwota) {
    if (this.saldo >= kwota) {
      this.saldo -= kwota;
      return this.saldo;
    } else {
      return "Niewystarczające środki!";
    }
  }
};
  

Wynik:

Zadanie 4

Stwórz obiekt "film" z właściwościami tytuł, reżyser, rok oraz metodą, która zwraca pełny tytuł filmu.

const film = {
  tytul: "Inception",
  rezyser: "Christopher Nolan",
  rok: 2010,
  pelnyTytul: function() {
    return this.tytul + " (" + this.rok + ")";
  }
};
  

Wynik:

Zadanie 5

Stwórz obiekt "pracownik" z właściwościami: imię, stanowisko, wynagrodzenie oraz metodą, która podwyższa wynagrodzenie o określoną kwotę.

const pracownik = {
  imie: "Marek",
  stanowisko: "Programista",
  wynagrodzenie: 5000,
  podwyzka: function(kwota) {
    this.wynagrodzenie += kwota;
    return this.wynagrodzenie;
  }
};
  

Wynik:

⚡ Zdarzenia

Zadanie 1

Dodaj do przycisku zdarzenie kliknięcia, które wyświetli alert z tekstem "Przycisk kliknięty".

document.getElementById("przycisk1").addEventListener("click", function() {
  alert("Przycisk kliknięty");
});
  

Zadanie 2

Stwórz pole tekstowe, które po wprowadzeniu tekstu wyświetli komunikat "Wpisano tekst".

document.getElementById("input1").addEventListener("input", function() {
  // zamiast console.log wyświetl w divie
  document.getElementById("outputInput1").textContent = "Wpisano tekst";
});
  

Zadanie 3

Dodaj do formularza zdarzenie submit, które zapobiega domyślnemu wysłaniu formularza i wyświetla dane z formularza na stronie.

document.getElementById("form1").addEventListener("submit", function(event) {
  event.preventDefault();
  document.getElementById("outputForm1").textContent = "Dane formularza: " + JSON.stringify({
    imie: document.getElementById("imie").value,
    email: document.getElementById("email").value
  }, null, 2);
});
  

Zadanie 4

Stwórz przycisk, który po kliknięciu zmienia kolor tła na zielony.

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

Zadanie 5

Stwórz pole tekstowe, które po utracie fokusu wyświetli komunikat "Fokus utracony".

document.getElementById("input2").addEventListener("blur", function() {
  document.getElementById("outputInput2").textContent = "Fokus utracony";
});
  

📑 Formularze

Zadanie 1

Stwórz formularz z polami: imię, nazwisko oraz email. Po kliknięciu przycisku "Wyślij" wyświetl na stronie wprowadzone dane.

document.getElementById("form11").addEventListener("submit", function(event) {
  event.preventDefault();
  document.getElementById("outputForm11").textContent = JSON.stringify({
    imie: document.getElementById("imie11").value,
    nazwisko: document.getElementById("nazwisko11").value,
    email: document.getElementById("email11").value
  }, null, 2);
});
  

Zadanie 2

Stwórz formularz logowania, w którym użytkownik podaje nazwę użytkownika i hasło. Po kliknięciu "Zaloguj" wyświetl komunikat na stronie.

document.getElementById("loginForm").addEventListener("submit", function(event) {
  event.preventDefault();
  let username = document.getElementById("username").value;
  let password = document.getElementById("password").value;
  let outputLogin = document.getElementById("outputLogin");

  if (username === "admin" && password === "1234") {
    outputLogin.textContent = "Zalogowano pomyślnie!";
  } else {
    outputLogin.textContent = "Niepoprawna nazwa użytkownika lub hasło.";
  }
});
  

Zadanie 3

Dodaj do formularza przycisk resetowania, który będzie czyścił wszystkie wprowadzone dane.

document.getElementById("resetBtn").addEventListener("click", function() {
  document.getElementById("form2").reset();
});
  

Zadanie 4

Stwórz formularz z polem tekstowym i przyciskiem. Po kliknięciu przycisku wyświetl wprowadzony tekst w divie poniżej formularza.

document.getElementById("form3").addEventListener("submit", function(event) {
  event.preventDefault();
  let text = document.getElementById("tekst").value;
  document.getElementById("outputForm3").textContent = "Wprowadzony tekst: " + text;
});
  

Zadanie 5

Stwórz formularz do rejestracji, który wymaga, by użytkownik zaakceptował regulamin przed wysłaniem formularza. Jeśli użytkownik nie zaznaczy zgody, wyświetl komunikat błędu.

document.getElementById("registerForm").addEventListener("submit", function(event) {
  event.preventDefault();
  let outputRegister = document.getElementById("outputRegister");
  if (!document.getElementById("regulamin").checked) {
    outputRegister.textContent = "Musisz zaakceptować regulamin.";
  } else {
    outputRegister.textContent = "Formularz wysłany!";
  }
});
  

📑 Zastosowanie formularzy w JavaScript

Zadanie 1

Stwórz formularz do obliczania wieku użytkownika na podstawie daty urodzenia. Po kliknięciu przycisku oblicz wyświetl wiek użytkownika.

document.getElementById("ageForm").addEventListener("submit", function(event) {
  event.preventDefault();
  let birthDate = new Date(document.getElementById("birthDate").value);
  let age = new Date().getFullYear() - birthDate.getFullYear();
  alert("Twój wiek to: " + age + " lat");
});
  

Zadanie 2

Stwórz formularz do konwersji jednostek. Użytkownik podaje wartość w metrach, a formularz konwertuje ją na centymetry, kilometry i milimetry.

document.getElementById("unitForm").addEventListener("submit", function(event) {
  event.preventDefault();
  let meters = parseFloat(document.getElementById("meters").value);
  document.getElementById("cm").textContent = meters * 100 + " cm";
  document.getElementById("km").textContent = meters / 1000 + " km";
  document.getElementById("mm").textContent = meters * 1000 + " mm";
});
  

Zadanie 3

Stwórz formularz do obliczania powierzchni prostokąta. Użytkownik podaje długość i szerokość, a po kliknięciu przycisku formularz wyświetla wynik.

document.getElementById("rectangleForm").addEventListener("submit", function(event) {
  event.preventDefault();
  let length = parseFloat(document.getElementById("length").value);
  let width = parseFloat(document.getElementById("width").value);
  let area = length * width;
  alert("Powierzchnia prostokąta: " + area + " m²");
});
  

Zadanie 4

Stwórz formularz, który po kliknięciu przycisku zmienia tło strony na kolor wprowadzony przez użytkownika w formularzu.

document.getElementById("colorForm").addEventListener("submit", function(event) {
  event.preventDefault();
  let color = document.getElementById("colorInput").value;
  document.body.style.backgroundColor = color;
});
  

Zadanie 5

Stwórz formularz do obliczania średniej arytmetycznej z trzech liczb. Użytkownik podaje trzy liczby, a formularz wyświetla wynik.

document.getElementById("averageForm").addEventListener("submit", function(event) {
  event.preventDefault();
  let num1 = parseFloat(document.getElementById("num1").value);
  let num2 = parseFloat(document.getElementById("num2").value);
  let num3 = parseFloat(document.getElementById("num3").value);
  let average = (num1 + num2 + num3) / 3;
  alert("Średnia arytmetyczna: " + average);
});
  

📑 Zastosowanie formularzy w JavaScript

Zadanie 1

Stwórz formularz, który oblicza pole powierzchni koła na podstawie promienia podanego przez użytkownika.

document.getElementById("circleForm").addEventListener("submit", function(event) {
  event.preventDefault();
  let radius = parseFloat(document.getElementById("radius").value);
  let area = Math.PI * Math.pow(radius, 2);
  alert("Pole powierzchni koła: " + area.toFixed(2) + " cm²");
});
  

Zadanie 2

Stwórz formularz, który pozwala użytkownikowi dodać dwie liczby i wyświetlić ich sumę.

document.getElementById("sumForm").addEventListener("submit", function(event) {
  event.preventDefault();
  let num1 = parseFloat(document.getElementById("num1").value);
  let num2 = parseFloat(document.getElementById("num2").value);
  let sum = num1 + num2;
  alert("Suma: " + sum);
});
  

Zadanie 3

Stwórz formularz do obliczania ceny po rabacie. Użytkownik podaje cenę oraz wartość rabatu, a formularz oblicza nową cenę po rabacie.

document.getElementById("discountForm").addEventListener("submit", function(event) {
  event.preventDefault();
  let price = parseFloat(document.getElementById("price").value);
  let discount = parseFloat(document.getElementById("discount").value);
  let newPrice = price - (price * (discount / 100));
  alert("Cena po rabacie: " + newPrice.toFixed(2) + " zł");
});
  

Zadanie 4

Stwórz formularz, który oblicza średnią arytmetyczną z trzech liczb podanych przez użytkownika.

document.getElementById("averageForm").addEventListener("submit", function(event) {
  event.preventDefault();
  let num1 = parseFloat(document.getElementById("num1").value);
  let num2 = parseFloat(document.getElementById("num2").value);
  let num3 = parseFloat(document.getElementById("num3").value);
  let average = (num1 + num2 + num3) / 3;
  alert("Średnia arytmetyczna: " + average.toFixed(2));
});
  

Zadanie 5

Stwórz formularz, który na podstawie wprowadzonego tekstu wyświetla liczbę słów w tym tekście.

document.getElementById("wordCountForm").addEventListener("submit", function(event) {
  event.preventDefault();
  let text = document.getElementById("textInput").value;
  let wordCount = text.split(/\s+/).filter(function(word) {
    return word.length > 0;
  }).length;
  alert("Liczba słów: " + wordCount);
});
  

Zadanie 1: Pole powierzchni koła

Zadanie 2: Suma dwóch liczb

Zadanie 3: Cena po rabacie

Zadanie 4: Średnia arytmetyczna

Zadanie 5: Liczba słów w tekście