Zadania na lekcje

Konwerter systemów liczbowych

Javascript
Priorytet: Normalny Szkic

Zadanie 200: Konwerter systemów liczbowych

Wstęp

Zrozumienie systemów liczbowych jest jednym z fundamentów informatyki. Ludzie na co dzień posługują się systemem dziesiętnym (złożonym z cyfr 0-9), natomiast komputery do komunikacji i obliczeń używają głównie systemu dwójkowego (złożonego z 0 i 1) oraz systemu szesnastkowego (0-9 i A-F) do bardziej skrótowego zapisu adresów i kolorów. Język JavaScript posiada wbudowane mechanizmy, które w niezwykle prosty sposób pozwalają rzutować wartości liczbowe pomiędzy poszczególnymi systemami, co jest bardzo przydatne przy tworzeniu różnego rodzaju kalkulatorów czy narzędzi deweloperskich.

Cel zadania

Twoim zadaniem jest napisanie skryptu w języku JavaScript, który będzie potrafił przekonwertować liczbę podaną w jednym systemie liczbowym (np. dziesiętnym) na inny system (np. binarny, oktalny lub heksadecymalny).

Wymagania techniczne

  1. Zdefiniowanie zmiennych przechowujących liczbę testową.
  2. Wykorzystanie wbudowanych metod w JavaScript do konwersji z systemu dziesiętnego na inne popularne systemy.
  3. Wykorzystanie wbudowanych metod konwersji ze specyficznych systemów z powrotem na postać naturalną (dziesiętną).
  4. Wypisanie wyników w sposób sformatowany do konsoli deweloperskiej za pomocą console.log().

Kroki do wykonania

1. Konwersja z systemu dziesiętnego na inne systemy

W JavaScript każda zmienna typu liczbowego (Number) dziedziczy wbudowaną metodę .toString(radix), gdzie parametr radix (podstawa systemu) określa, na jaki docelowy system liczbowy ma zostać zamieniona ta wartość. Metoda ta zawsze uformuje nam wynik jako typ łańcucha znaków (String).

// Deklaracja liczby dziesiętnej
let liczbaDziesietna = 255;

// Zamiana na system dwójkowy (binarny - podstawa 2)
let systemBinarny = liczbaDziesietna.toString(2);
console.log(`Liczba 255 w systemie binarnym: ${systemBinarny}`); // Wynik: 11111111

// Zamiana na system ósemkowy (oktalny - podstawa 8)
let systemOktalny = liczbaDziesietna.toString(8);
console.log(`Liczba 255 w systemie oktalnym: ${systemOktalny}`); // Wynik: 377

// Zamiana na system szesnastkowy (heksadecymalny - podstawa 16)
let systemHeksadecymalny = liczbaDziesietna.toString(16);
console.log(`Liczba 255 w systemie heksadecymalnym: ${systemHeksadecymalny}`); // Wynik: ff

2. Konwersja z innych systemów na dziesiętny

Do odwrócenia tego procesu używamy globalnego polecenia parseInt(string, radix). Funkcja ta analizuje podany ciąg tekstowy (jako pierwszy argument) przyjmując instrukcję z jakiego systemu dany ciąg pochodzi (jako drugi argument), i finalnie przetwarza go i zwraca ze zmienionym typem na surową liczbę dziesiętną (Number).

// Zmienne w postaci łańcuchów znaków reprezentujące inne systemy
let stringBinarny = "101010";
let stringHeksadecymalny = "A3F";

// Zamiana z binarnego z powrotem na dziesiętny
let zBinarnegoNaDziesietny = parseInt(stringBinarny, 2);
console.log(`101010 binarnie to dziesiętnie: ${zBinarnegoNaDziesietny}`); // Wynik: 42

// Zamiana z szesnastkowego z powrotem na dziesiętny
let zHeksadecyNaDziesietny = parseInt(stringHeksadecymalny, 16);
console.log(`A3F heksadecymalnie to dziesiętnie: ${zHeksadecyNaDziesietny}`); // Wynik: 2623

Opanowanie na pamięć użycia toString(podstawa) (konwersja Z dziesiętnego) oraz parseInt("ciąg", podstawa) (konwersja NA dziesiętny) pozwala na stworzenie absolutnie każdego kalkulatora pod każdą szkolną formę liczbową.

Zadania dla chętnych

Poniżej znajdziesz 5 dodatkowych wytycznych mających na celu pogłębienie i zwielokrotnienie twoich doświadczeń programistycznych w oparciu o poznane funkcje. Rozwiąż je implementując w kodzie bez odgórnej instrukcji:

  1. Stworzenie uniwersalnej funkcji formatującej: Napisz własną deklarację funkcji function konwertujSystem(liczba, systemZ, systemNa), która będzie przyjmowała w parametrach liczbę jako łańcuch (string) i dwie wartości z informacją - "z jakiego na jaki". Twoja struktura metod w ciele z wykorzystaniem zagnieżdżenia funkcji powinna w zaledwie jednym ciągu (linijce z return) połączyć parseInt z toString.
  2. Dodanie wsparcia przedrostków notacyjnych: System heksadecymalny jest często zapisywany jako "0x", zaś binarny z notacją "0b". Zabezpiecz konwerter dodając polecenia na ciągach znakowych (np. startsWith() i replace()), które upewnią się, że przed konwersją ewentualne programistyczne prefiksy wejściowe zostaną cicho wyrzucone aby zapewnić parseInt() rzetelne cyfry do pracy.
  3. Zabezpieczenie literowe UpperCase na wyjściu: Wyniki toString(16) są rzutowane na małe angielskie litery (np. "ff", "a3c"). W środowisku inżynierskim przyjmuje się natomiast notację podawaną jako "FF" czy "A3C". Utwórz warunek wejściowy do wdrożenia łańcuchowej matody .toUpperCase(), podnosząc zwracany rezultat do wielkich liter zawsze tylko i wyłącznie, gdy zamiana jest ukierunkowana na system 16.
  4. Weryfikacja błędu poprawnej formy wejściowej: Funkcja parseInt() wygeneruje nieliczbą wartość oznaczaną jako NaN w przypadku, dając dla przykładu słowo "Helloworld" każąc założyć, ze systemem wejściowym była "podstawa dwójkowa" (zera i jedynki). Stwórz odpowiedniego "guarda" (zabezpieczenie oparte na stałej używając bloku if()), odpytującego globalną sprawdzarkę środowiskową isNaN(wynik). Jeżeli warunek przejdzie negatywnie, wstrzymaj wypluwanie znaków informując w terminalu o podaniu niedozwolonych przez konwerter znaków dla takiego wymiaru.
  5. Budowa interaktywnego web-kalkulatora z widokiem DOM: Jeżeli skrypt posiada już pewne bezpieczeństwo, wyprowadź z niego owoce. Zbuduj w standardowym pobocznym pliku index.html prosty widok interfejsu wykorzystujący 3 tagi wewnątrz formularza: pole wejściowe typu input text, pole wychodzące typu input text (readonly) oraz pole rozwijanej listy select, z tagami typującymi formy (np. 2, 8, 16). Odbierając w JS dane metodą zdarzeniową pod wpływem akcji wpisywania na klawiaturze – tj. addEventListener('input', callback) – sprawiaj by pole z rezultatem natychmiast uzupełniało się na żywo przeliczoną dynamicznie wielkością z dziesiętnego stringa przez Twoje główne funkcje logiki.