Systemy liczbowe –  Część 3. Kod zamiany liczb między systemami

Systemy liczbowe – Część 3. Kod zamiany liczb między systemami

W części pierwszej Matematyka i programowanie – systemy liczbowe – Część 1. Teoria opisaliśmy systemy liczbowe, skupiając się na systemach dwójkowym, ósemkowym, dziesiętnym oraz szesnastkowym. Zajęliśmy się też zamianą liczb z poszczególnych systemów liczbowy na jej odpowiednik w systemie dziesiętnym oraz na odwrót – z systemu dziesiętnego na inny.

W części drugiej Matematyka i programowanie – systemy liczbowe – Część 2. Algorytm pokazaliśmy algorytmy zamieniające liczby pomiędzy systemami.

W tej części zajmiemy się napisaniem kodu w istniejącym języku programowania, mianowicie w JavaScript

1. Zamiana liczb w systemie dowolnym na dziesiętny

W drugiej części zamieściliśmy algorytm w pseudokodzie na zamianę liczb w dowolnym systemie na dziesiętny. Przypomnijmy:

Poniżej kod tej samej funkcji w JavaScript:

Dla całkiem początkujących programistów (ci którzy już znają języki programowania w zasadzie mogą sobie tą część odpuścić, gdyż nawet nie znając JavaScript mogą się domyślić co przedstawiają poszczególne operatory i instrukcje) :

2. Zamiana liczb w systemie dziesiętnym na dowolny

Przypomnijmy sobie teraz algorytm zamiany liczb w systemie dziesiętnym na dowolny.

Poniżej przedstawiono ten sam kod w Javascript.

W zasadzie niewiele jest do wyjaśnienie w tym kodzie. Najważniejsze rzeczy ujęte są w tabeli w poprzednim podpunkcie. W zasadzie to tylko dwie rzeczy:

reszta.toString() – jest to funkcja zwracająca wartość zmiennej reszta w postaci łańcucha znaków, czyli stringu

Math.floor(liczba/system) – funkcja matematyczna zaokrąglająca w dół wartość w nawiasie – potrzebna jest, gdyż wynikiem dzielenia jest liczba rzeczywista, z ułamkiem. Poniżej przykłady:

Math.floor(4.76) = 4

Math.floor(4.16) = 4

W przypadku liczb dodatnich po prostu zwraca wartość całkowitą poprzez odrzucenie części ułamkowej.

3. Kalkulator zamiany liczb z różnych systemów

Skoro mamy już te dwie funkcje, można je wykorzystać praktycznie. Stwórzmy sobie kalkulator, który zadaną liczbę w konkretnym systemie liczbowym przedstawi nam także w innych systemach. Wygląd pokazano na poniższym rysunku:

Mamy okienko (input), w którym wpisujemy liczbę zgodną z zaznaczonym na zielono systemem: DEC (dziesiętny), BIN (dwójkowy), OCT (ósemkowy), HEX (szesnastkowy). Na rysunku zaznaczono, że wpisywana jest liczba w systemie dziesiętnym. Podczas wpisywania liczby, automatycznie jest ona przeliczana na inne systemy (liczba w wybranym systemie, jak np dziesiętny na ekranie – jest po prostu kopiowana z okienka wpisywania).

Zanim pokażemy samo działanie, zapoznajmy się z kodem takiej „zmieniarki”. Oczywiście, całość zapisujemy w pliku html, po czym odczytujemy bezpośrednio w przeglądarce. Wszelkie opisy zamieściłem w kodzie w komentarzach.

Zauważmy, że mamy cztery systemy liczbowe, a my zrobiliśmy tylko funkcje zamiany albo z dziesiętnego systemu na inny, albo z innego na dziesiętny. Brakuje nam zamiany z systemy dwójkowego na ósemkowy i szesnastkowy, z ósemkowego na dwójkowy i szesnastkowy oraz z szesnastkowego na dwójkowy i ósemkowy. Owszem, można dorobić jeszcze pozostałe funkcje, ale w zupełności te dwie nam wystarczą. Każdą liczbę w jakimkolwiek systemie zamienimy na dziesiętną a potem dziesiętną na inny dowolny. Po to mamy właśnie te dwie funkcje.

Wykorzystałem także framework jQuery do łatwiejszego odczytywania i przypisywania wartości elementom html. Całość zatem zawiera dwa pliki: plik jquery.js (w naszym przypadku akurat wersja 3.3.1 – czyli plik ma nazwę jquery-3.3.1.js, ale to nie ma znaczenia, można sobie ściągnąć dowolny aktualny, należy tylko pamiętać, by podać dobrą nazwę pliku js w pliku html) oraz systemy_liczbowe.html. Bibliotekę jQuery można ściągnąć stąd : https://jquery.com/download/.

Poniżej kod w pliku systemy_liczbowe.html (opisy działań w komentarzach, odpuściłem opisy samych funkcji zamieniających liczby pomiędzy systemami):

W następnej części pokażemy działający program zamiany liczb pomiędzy systemami.

Dodaj komentarz

Close Menu