Tym razem postawimy pierwsze kroki związane z obsługą JavaScript w naszym dokumencie HTML.
Wykorzystanie JavaScript w dokumencie HTML może nam się przydać w wielu sytuacjach. Przede wszystkim dodać troszkę dynamiki do naszych dokumentów, prezentując generujące się dane, wyliczenia, itp.
Przejdźmy do kilku przykładów.
JavaScript Ćwiczenie 1
Wypiszmy na stronie internetowej wynik jakiegoś prostego działania matematycznego. Niech to będzie suma liczby a i b.
Krok 1. Posłużmy się tutaj naszym uproszczonym kodem szkieletu dokumentu HTML z poprzednich ćwiczeń
<!DOCTYPE html>
<html lang="pl-PL">
<head>
<title>Ćwiczenie JS</title>
<!-- zewnętrzny plik JavaScript -->
<script src="skrypt.js" type="text/javascript" async defer></script>
</head>
<body>
<!-- kod naszego ćwiczenia -->
<div id="suma"></div>
</body>
</html>
Zwróćmy uwagę, że w naszym dokumencie, dodany został blok (div) zawierający id=”suma”. Od tej pory nasz kod skończymy w pliku skrypt.js, a dzięki identyfikatorowi (id) w div’ie, efekt pojawi się w tym miejscu w naszym HTML’u.
Kolejną rzeczą na którą należy zwrócić uwagę to zamieszczenie naszego JS’a. Skrypt musi najpierw „przeczytać dokument html” z pamięci podręcznej znaleźć id=”suma” i wiedząc, gdzie on się znajduje, wykorzystać innerHTML do zamieszczenia w nim naszej końcowej informacji.
Krok 2. Abyśmy mogli wykorzystać HTML dla elementu, na którym pracujemy, należy najpierw przypisać ten element do stałej (pamiętamy – const), za pomocą metody querySelector(), składnia jest następująca:
element = document.querySelector(selectors);
czyli deklarujemy stałą, powiedzmy o nazwie suma, z wykorzystaniem powyższej metody, naszym selektorem będzie #suma, czyli nasze id z diva z dokumentu HTML.
const wynikDodawania= document.querySelector("#suma");
ok, mamy stałą const nazwaną suma, która ma się wykonać w selektorze wynik-dodawania za pomocą metody querySelector.
Potrzebujemy teraz mieć co zaprezentować, co policzyć, dodajmy więc dwie zmienne, wspomniane na początku a i b i przypiszmy im jakieś wartości.
let a=7;
let b=13;
Aby wyświetlić wynik naszego dodawania, musimy skorzystać tym razem z inner.HTML. Najpierw rozpiszmy jak to ma wyglądać, później omówimy dlaczego tak się dzieje:
wynikDodawania.innerHTML='Wynik dodawania liczb: '+a+' oraz '+b+' wynosi '+(a+b);
A więc, zadeklarowana stała (const) wynikDodawania wyświetli zawartość 'Wynik dodawania liczb: '+a+' oraz '+b+' wynosi '+(a+b) za pomocą naszego innerHTMLa w dokumencie HTML między <div id="suma">O TUTAJ DOKŁADNIE</div>
JavaScript Ćwiczenie 2
Pamiętasz poprzednie ćwiczenia (znajdziesz je tutaj ) Przypomnijmy sobie działanie parseInt oraz prompt. Pamiętamy, że prompt, każe z klawiatury, w wyskakującym okienku, podobnie do alertu, wpisać string (ciąg znakowy) a parseInt pozwala nam zmienić typ danych string’a na integer.
Wprowadźmy więc odrobinę dynamiki do naszego poprzedniego ćwiczenia. Niech tym razem strona nasz prosi o dane do wyliczeń, które chcemy aby zrobił za nas nasz skrypt.
Na początku nic nie zmieniamy, nasz plik HTML nie zmienia się, tworzymy w pliku js identyczną stałą
const wynikDodawania= document.querySelector("#suma");
kolejno nasze dwie zmienne, musimy zmodyfikować, najpierw dodając funkcjonalność prompt (okna komunikatu do wpisania danych), kolejno pareseInt, dzięki któremu wiemy co się zmieni 🙂
let a=parseInt(prompt('Podaj liczbę a'));
let b=parseInt(prompt('Teraz podaj b'));
i na końcu, bez żadnych zmian
wynikDodawania.innerHTML='Wynik dodawania liczb: '+a+' oraz '+b+' wynosi '+(a+b);
JavaScript Ćwiczenie 3
Napiszmy teraz dowolny kalkulator, tutaj dla przykładu będzie kalkulator liczący proporcie. Uważam, że akurat to działanie matematyczne jest bardzo przydatna, choćby po to by policzyć zwrot jakiejś inwestycji czy okres jej zwrotu a to są przydatne rzeczy 🙂
Kod naszego skryptu wygląda następująco:
const proporcje= document.querySelector("#proporcje");
let liczbaSzukana = parseInt(prompt('Podaj szukaną liczbę'));
let stoProcent = parseInt(prompt('100% wynosi?'));
let procent = 100;
let wynik = ('Szukana liczba to '+((100*liczbaSzukana)/stoProcent));
proporcje.innerHTML=wynik;
JavaScript Ćwiczenie 4
Przekształć teraz kalkulator z ćwiczenia 3 i dodaj kod HTML, formatujący Twój wynik, może zmieniając tło, dodając kolor i wielkość czcionki itp. Mój przykład niżej
const proporcje= document.querySelector("#proporcje");
let liczbaSzukana = parseInt(prompt('Podaj szukaną liczbę'));
let stoProcent = parseInt(prompt('100% wynosi?'));
let procent = 100;
let wynik = ('<div style="width:800px;margin-left:auto;margin-right:auto;"><h1>Szukana liczba to '+((100*liczbaSzukana)/stoProcent)+'</h1><br><br><br><iframe width="560" height="315" src="https://www.youtube.com/embed/vwrE3_JsuqM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><br></div>');
proporcje.innerHTML=wynik;
JavaScript Ćwiczenie 5
Zmodyfikuj kod z ćwiczenia 4 tak, aby na początku trzeba było podać minimum 3 zmienne a sam skrypt w tym samym czasie, powinien dać wynik do 3-4 działań matematycznych. Przykład niżej, jednak Ty zrób swój własny „wielofunkcyjny kalkulator”.
const liczymySobie= document.querySelector("#kalkulatorki");
let a = parseInt(prompt('Podaj szukaną liczbę (też potęga)'));
let b = parseInt(prompt('100% wynosi?'));
let h = parseInt(prompt('wysokość trójkąta'));
let wynik = ('Proporcje<br>Szukana liczba to '+((100*a)/b));
let wynik2 = ('<br><br>Potęga '+b+'^'+a+' wynosi '+(b**a));
let wynik3 = ('<br><br>Odejmowanie '+b+'-'+a+' wynosi '+(b-a));
let wynik4 = ('<br><br>Pole trójąta 1/2 *'+a+'^'+h+' wynosi '+(0.5*a*h));
liczymySobie.innerHTML=wynik+wynik2+wynik3+wynik4;