Szczegółowe omówienie tworzenia aplikacji Szybka Matma:
Link do powyższego omówienia aplikacji Szybka Matma: https://youtu.be/uAv2AzDzLOc?t=1587
Treść zadania: https://oki.org.pl/szybka-matma-zadanie/
Kod aplikacji – instrukcja pobrania na dole: https://oki.org.pl/wp-content/uploads/2022/11/szybka_matma.html
Skrócone omówienie całej aplikacji: https://youtu.be/uAv2AzDzLOc?t=5770
Kolejne etapy tworzenia naszego kodu:
Otwieramy plik index.html: https://youtu.be/uAv2AzDzLOc?t=1778
–
Jak się uczyć na podstawie tego zadania? https://youtu.be/QgLyXYmFQeU?t=2019
Pamiętaj by zajrzeć max 1 raz – wtedy się rozwijasz: https://youtu.be/pkLXuuOe_qA?t=3625
Lista zadań z rozwiązaniami: https://oki.org.pl/lista-zadan-materialy.php
Samouczek – przygotowanie do Olimpiad: https://oki.org.pl/tutorial/
Zajęcia: https://oki.org.pl/harmonogram-zajec/
Informacje o zajęciach: https://oki.org.pl/newsletter.php
–
Jak uruchomić / pobrać aplikację Szybka Matma?
Poniżej jest kod wynikowy który utworzyliśmy w trakcie naszych zajęć.
1. Kliknij na poniższy link prawym klawiszem myszy i wybierz “zapisz jako”:
https://oki.org.pl/wp-content/uploads/2022/11/szybka_matma.html
2. Zapisz plik w dowolnym katalogu.
3. Dwukrotnie kliknij na nazwie pliku.
Otworzy się przeglądarka i uruchomi się program który animuje ruch kaktusa.
4. By zmienić kod, wygląd,… -> Kliknij prawym klawiszem na zapisanym pliku i wybierz “Otwórz za pomocą” a następnie wybierze “Notatnik” lub dowolny inny edytor. Rekomenduję użycie Visual Studio Code zamiast notatnika: https://youtu.be/Ck6k19b7FVU?t=994
Alternatywnie
1. Skopiuj cały poniższy kod i umieść w notatniku.
2. Zapisz zwartość notatnika z wklejonym właśnie kodem jako plik szybka_matma.html
Zwróć uwagę by był to plik szybka_matma.html a nie szybka_matma.html.txt lub szybka_matma.html.txt. Wyjaśnienie: https://youtu.be/wrkLDPqZ1Js?t=1532
3. Kliknij dwukrotnie na pliku szybka_matma.html
Powinna otworzyć się domyślna przeglądarka i uruchomić aplikację.
–
Strona www - kod aplikacji Szybka Matma
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<strong>Szybka MATMA!</strong>
<br /><i>by Super Code</i>
<div style="margin-top: 30px;">
<label>Liczba dwójkowa:</label>
<input id="pole_liczba_dwojkowa">
</div>
<div style="margin-top: 15px;">
<button onclick="ZamienNaDziesietna()" style="background-color: chocolate;">
Zamień na dziesiętną
</button>
</div>
<div style="margin-top: 15px;">
<label>Liczba dziesiętna:</label>
<input id="pole_liczba_dziesietna" readonly="readonly">
</div>
<script>
//Funkcja ktora zamienia liczbe dwojkowa w polu "pole_liczba_dwojkowa"
//na liczbe dziesietna i wpisuje ja do pola "pole_liczba_dziesietna"
//Funckja uruchamiana przez zdarzenia onclick button-a
function ZamienNaDziesietna(zdarzenie) {
let liczba_dwojkowa, liczba_dziesietna;
let cyfra_dwojkowa, potega_dwojki;
liczba_dwojkowa = document.getElementById("pole_liczba_dwojkowa").value;
liczba_dziesietna = 0;
potega_dwojki = 1;
while (liczba_dwojkowa > 0) {
cyfra_dwojkowa = liczba_dwojkowa%10; //bierzemy 1 albo 0
liczba_dziesietna = liczba_dziesietna + cyfra_dwojkowa*potega_dwojki;
liczba_dwojkowa = (liczba_dwojkowa-cyfra_dwojkowa)/10; //zabranie ostatniej cyfry
potega_dwojki = potega_dwojki*2; //kolejna potega dwojki dla nast. petli
}
document.getElementById("pole_liczba_dziesietna").value = liczba_dziesietna;
}
</script>
</body>
</html>