W poprzedniej lekcji poznali\u015bmy, do czego s\u0142u\u017cy JavaScript. Teraz przejdziemy do podstaw programowania<\/strong>, czyli:<\/p>\n JavaScript sprawia, \u017ce strona staje si\u0119 bardziej interaktywna, a u\u017cytkownik mo\u017ce \u201erozmawia\u0107\u201d ze stron\u0105 \u2013 wprowadza\u0107 dane, naciska\u0107 przyciski, dostawa\u0107 odpowiedzi.<\/p>\n Efekt: Na stronie wy\u015bwietli si\u0119 tekst z u\u017cyciem zmiennych.<\/p>\n Efekt: Program sprawdza warto\u015b\u0107 liczby i wy\u015bwietla odpowiedni komunikat.<\/p>\n Efekt: Po wpisaniu wieku i klikni\u0119ciu przycisku, na stronie wy\u015bwietli si\u0119 odpowiedni komunikat.<\/p>\n Efekt: Ka\u017cde klikni\u0119cie przycisku zwi\u0119ksza licznik na stronie.<\/p>\n Napisz stron\u0119, na kt\u00f3rej u\u017cytkownik wpisze swoje imi\u0119 w polu tekstowym, a po klikni\u0119ciu przycisku pojawi si\u0119 komunikat:\n\u201eWitaj, [imi\u0119 u\u017cytkownika]!\u201d<\/p>\n Napisz program, kt\u00f3ry poprosi u\u017cytkownika o podanie liczby i sprawdzi, czy liczba jest parzysta<\/strong> czy nieparzysta<\/strong>.<\/p>\n Stw\u00f3rz prost\u0105 stron\u0119 z przyciskiem \u201eLosuj liczb\u0119\u201d.\nPo klikni\u0119ciu na stronie ma pojawi\u0107 si\u0119 losowa liczba od 1 do 10.<\/p>\n Zaprojektuj stron\u0119, kt\u00f3ra liczy pole prostok\u0105ta.\nU\u017cytkownik podaje d\u0142ugo\u015b\u0107<\/strong> i szeroko\u015b\u0107<\/strong>, a program wy\u015bwietla wynik.<\/p>\n Zr\u00f3b stron\u0119 z przyciskiem \u201eZmie\u0144 kolor t\u0142a\u201d<\/strong>, kt\u00f3ry losowo wybierze jeden z trzech kolor\u00f3w (np. czerwony, zielony, niebieski).<\/p>","protected":false},"excerpt":{"rendered":"\n
\n2. Przyk\u0142ady<\/h2>\n
Przyk\u0142ad 1 \u2013 zmienne i operacje<\/h3>\n
<!DOCTYPE html>\n<html>\n<head>\n\n<title>Zmienne w JS<\/title>\n<\/head>\n<body>\n <script>\n let imie = "Anna";\n let wiek = 16;\n document.write("Cze\u015b\u0107, mam na imi\u0119 " + imie + " i mam " + wiek + " lat.");\n <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
\nPrzyk\u0142ad 2 \u2013 instrukcja warunkowa<\/h3>\n
<!DOCTYPE html>\n<html>\n<head>\n\n<title>Instrukcje warunkowe<\/title>\n<\/head>\n<body>\n <script>\n let liczba = 10;\n if (liczba > 5) {\n alert("Liczba jest wi\u0119ksza ni\u017c 5!");\n } else {\n alert("Liczba jest mniejsza lub równa 5.");\n }\n <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
\nPrzyk\u0142ad 3 \u2013 funkcja sprawdzaj\u0105ca wiek<\/h3>\n
<!DOCTYPE html>\n<html>\n<head>\n\n<title>Sprawdzanie wieku<\/title>\n<\/head>\n<body>\n <input id="wiek" type="number" placeholder="Podaj swój wiek">\n <button onclick="sprawdz()">Sprawd\u017a<\/button>\n <p id="wynik"><\/p>\n\n <script>\n function sprawdz() {\n let w = Number(document.getElementById("wiek").value);\n if (w >= 18) {\n document.getElementById("wynik").innerHTML = "Jeste\u015b pe\u0142noletni!";\n } else {\n document.getElementById("wynik").innerHTML = "Jeste\u015b niepe\u0142noletni.";\n }\n }\n <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
\nPrzyk\u0142ad 4 \u2013 prosty licznik klikni\u0119\u0107<\/h3>\n
<!DOCTYPE html>\n<html>\n<head>\n\n<title>Licznik<\/title>\n<\/head>\n<body>\n <button onclick="zwieksz()">Kliknij mnie<\/button>\n <p id="licznik">Klikni\u0119cia: 0<\/p>\n\n <script>\n let liczbaKlikniec = 0;\n function zwieksz() {\n liczbaKlikniec++;\n document.getElementById("licznik").innerHTML = "Klikni\u0119cia: " + liczbaKlikniec;\n }\n <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
\n3. Zadania dla uczni\u00f3w<\/h2>\n
Zadanie 1<\/h3>\n
\nZadanie 2<\/h3>\n
\nZadanie 3<\/h3>\n
\nZadanie 4<\/h3>\n
\nZadanie 5 (dla ch\u0119tnych)<\/h3>\n
\n