Edukacja / Informatyka / Pomoce info

Komputer pod lupą: dokumentacja i instrukcja obsługi

Komputer pod lupą to przeglądarkowy model prostego komputera dla uczniów szkoły podstawowej i średniej. Pokazuje, jak procesor pobiera rozkazy z pamięci, dekoduje je i wykonuje, jak dane płyną szynami oraz jak komputer komunikuje się z klawiaturą i ekranem. Każdy krok ma objaśnienie prostym językiem.

1. Wymagania

Aktualna przeglądarka: Chrome, Edge, Firefox, Safari, Opera.

Komputer, tablet, tablica interaktywna albo smartfon. Na dużym ekranie najlepiej widać wszystkie części naraz.
Włączona obsługa JavaScript.
Nie trzeba niczego instalować ani zakładać konta.

2. Szybki start

Otwórz komputer.komputerowka.pl. Załadowany jest program Dodawanie dwóch liczb.
Naciśnij Następny krok i przeczytaj objaśnienie pod płytką. Naciskaj dalej, krok po kroku.
Gdy procesor dojdzie do rozkazu WEJŚCIE, klawiatura zacznie pulsować. Wpisz liczbę, np. 7, i naciśnij ⏎.
Przy drugim rozkazie WEJŚCIE wpisz np. 5.
Na ekranie pojawi się wynik 12. Rozkaz STOP kończy program.
Reset przywraca stan początkowy.

3. Budowa płytki

Model wygląda jak płytka drukowana. Części łączą miedziane ścieżki, czyli szyny.

Procesor (CPU), na środku

Element

Opis

Jednostka sterująca

Pokazuje fazę cyklu (1 · Pobierz, 2 · Dekoduj, 3 · Wykonaj), bieżący rozkaz i jego znaczenie po polsku.

PC, licznik rozkazów

Numer komórki, z której zostanie pobrany następny rozkaz (4 bity).

IR, rejestr rozkazów

Pobrany rozkaz (8 bitów). Pierwsze 4 diody (zielone) to kod rozkazu, ostatnie 4 to adres.

A, akumulator

Liczba, na której procesor właśnie pracuje (8 bitów).

ALU

Pokazuje wykonywane działanie, np.

1	7 + 5 = 12

Lampka Z

Świeci, gdy akumulator jest równy zero. Na niej opiera się rozkaz SKOK_GDY_0.

Lampka P

Świeci po przepełnieniu, gdy wynik nie zmieścił się w 8 bitach.

Zegar

Liczy takty. Każdy mały krok procesora to jeden takt, a dioda błyska przy każdym.

Każdy rejestr ma diody pokazujące bity. Czerwona świecąca dioda to 1, ciemna to 0.

Pamięć RAM, po prawej

16 komórek ponumerowanych od 0 do 15. Każda mieści 8 bitów, czyli liczbę od 0 do 255.
Każda komórka pokazuje swój numer (dziesiętnie i binarnie), zawartość (rozkaz albo liczbę) i zawartość w bitach.
Zielony pasek po lewej oznacza komórkę wskazywaną przez licznik PC.
Niebieskie podświetlenie oznacza odczyt z komórki, a złote zapis do niej.
Rozkazy wyświetlają się na biało, liczby (dane) na złoto, a puste komórki jako „—”.

Szyny

Szyna	Kolor paczki	Co przenosi
Szyna adresowa	niebieski	numer komórki pamięci, od procesora do pamięci
Szyna danych	złoty	zawartość komórki, w obie strony
Wejście	fioletowy	liczbę z klawiatury do procesora
Wyjście	fioletowy	liczbę z procesora na ekran

Podczas przesyłania szyna rozświetla się, a wzdłuż niej przesuwa się paczka z wartością.

Klawiatura i ekran, po lewej

Klawiatura z wyświetlaczem i klawiszami 0–9, C (kasuj) i ⏎ (zatwierdź).
Ekran w stylu dawnego monitora pokazuje ostatnie wypisane liczby.

4. Sterowanie

Pasek nad płytką:

Element	Działanie
Lista programów	Wybór gotowego programu albo pustej pamięci.
Następny krok	Wykonuje jeden mały krok cyklu i czeka. Najlepszy do nauki.
Cały rozkaz	Wykonuje wszystkie kroki bieżącego rozkazu (pobierz, dekoduj, wykonaj) i zatrzymuje się przed następnym.
Uruchom / Pauza	Automatyczne wykonywanie programu. Ponowne kliknięcie zatrzymuje go po bieżącym kroku.
Reset	Zatrzymuje program, przywraca pamięć do stanu z początku programu, zeruje rejestry, ekran i zegar.
Prędkość	Suwak od 1 (najwolniej) do 5 (najszybciej). Zmienia tempo animacji i trybu automatycznego.
Bity	Pokazuje lub ukrywa zapis binarny i diody. Wyłączenie upraszcza widok dla młodszych klas.

Po rozkazie STOP przyciski wykonywania są nieaktywne. Naciśnij Reset, żeby zacząć od nowa.

5. Cykl rozkazowy krok po kroku

Każdy rozkaz przechodzi przez trzy fazy. Przy włączonej opcji Następny krok widać każdy krok osobno, a pod płytką pojawia się objaśnienie.

1. Pobieranie (3 kroki)

Procesor wysyła zawartość PC szyną adresową do pamięci.
Pamięć odsyła zawartość komórki szyną danych, a trafia ona do rejestru IR.
PC zwiększa się o 1.

2. Dekodowanie (1 krok) Jednostka sterująca dzieli 8 bitów z IR na kod rozkazu (4 bity) i adres (4 bity) i pokazuje znaczenie rozkazu po polsku.

3. Wykonanie (1–3 kroki, zależnie od rozkazu) Na przykład DODAJ wymaga wysłania adresu, odebrania liczby z pamięci i obliczenia w ALU.

Ważne: PC zwiększa się już w fazie pobierania, a nie po wykonaniu. Dlatego rozkaz SKOK po prostu nadpisuje PC nową wartością.

6. Lista rozkazów

Każdy rozkaz zajmuje jedną komórkę: 4 bity kodu i 4 bity adresu (n).

Kod

Rozkaz

Co robi

0000

STOP

Kończy program.

0001

WEJŚCIE

Pobiera liczbę z klawiatury do akumulatora A. Jeśli bufor klawiatury jest pusty, czeka.

0010

WYJŚCIE

Wysyła liczbę z akumulatora na ekran.

0011

ŁADUJ n

Kopiuje liczbę z komórki n do akumulatora. Komórka n się nie zmienia.

0100

ZAPISZ n

Zapisuje akumulator w komórce n. Poprzednia zawartość znika.

0101

DODAJ n

A = A + zawartość komórki n.

0110

ODEJMIJ n

A = A − zawartość komórki n.

0111

SKOK n

Następny rozkaz zostanie pobrany z komórki n.

1000

SKOK_GDY_0 n

Jeśli A = 0 (świeci lampka Z), skacze do komórki n. W przeciwnym razie idzie dalej po kolei.

Przykład kodowania:

DODAJ 15

0101

(5) +

1111

(15) =

01011111

= 95 dziesiętnie.

Co się stanie, gdy procesor trafi na liczbę zamiast rozkazu?

Pusta komórka ma wartość 0, a
1
0000
to STOP, więc program się zatrzyma.
Kody od
1
1001
do
1
1111
nie oznaczają żadnego rozkazu. Procesor zgłasza nieznany rozkaz i się zatrzymuje.

To dobra okazja, żeby pokazać, że w pamięci program i dane wyglądają tak samo.

7. Gotowe programy

Dodawanie dwóch liczb

Komórka	Zawartość
0	WEJŚCIE
1	ZAPISZ 15
2	WEJŚCIE
3	DODAJ 15
4	WYJŚCIE
5	STOP
15	dane: 0

Uczy: podstawowego cyklu, użycia pamięci jako „schowka”, wejścia i wyjścia.

Odliczanie 5…0

Komórka	Zawartość
0	ŁADUJ 12
1	WYJŚCIE
2	ODEJMIJ 13
3	SKOK_GDY_0 5
4	SKOK 1
5	WYJŚCIE
6	STOP
12	dane: 5
13	dane: 1

Uczy: pętli i warunku. Wynik na ekranie: 5, 4, 3, 2, 1, 0. Zmień liczbę w komórce 12, żeby odliczać od innej wartości.

Podwajanie liczby

Komórka	Zawartość
0	WEJŚCIE
1	ZAPISZ 15
2	DODAJ 15
3	WYJŚCIE
4	STOP

Uczy: przepełnienia. Wpisz liczbę większą niż 127, np. 200. Wynik to 144 zamiast 400, a zapala się lampka P (patrz rozdział 10).

Suma 1 + 2 + … + n

Komórka	Zawartość
0	WEJŚCIE
1	ZAPISZ 14
2	ŁADUJ 14
3	SKOK_GDY_0 10
4	DODAJ 15
5	ZAPISZ 15
6	ŁADUJ 14
7	ODEJMIJ 13
8	ZAPISZ 14
9	SKOK 2
10	ŁADUJ 15
11	WYJŚCIE
12	STOP
13	dane: 1
14	dane: n (licznik)
15	dane: suma

Uczy: pętli z licznikiem i sumowania. Dla n = 4 wynik to 10. Uwaga: dla n powyżej 22 suma przekroczy 255.

Pusta pamięć

Wszystkie komórki mają wartość 0. To punkt wyjścia do pisania własnego programu.

8. Klawiatura i ekran

Wpisywanie liczb

Wpisuj cyfry klawiszami na ekranie albo cyframi na klawiaturze komputera. Maksymalnie 3 cyfry.
C kasuje wpisywaną liczbę, a ⏎ ją zatwierdza.
Liczby powyżej 255 są obcinane do 255, bo tyle mieści 8-bitowa komórka.

Bufor klawiatury

Liczby można wpisać wcześniej, zanim program o nie poprosi. Trafiają wtedy do bufora klawiatury (widać je pod klawiszami), a rozkazy WEJŚCIE pobierają je po kolei. Przydaje się to w trybie Uruchom, żeby program nie zatrzymywał się na wpisywanie.

Gdy bufor jest pusty, a procesor wykonuje WEJŚCIE, klawiatura pulsuje na fioletowo i procesor czeka.

Ekran

Pokazuje ostatnie sześć wypisanych liczb. Reset czyści ekran.

9. Pisanie własnego programu

Wybierz z listy Pusta pamięć albo zacznij od dowolnego programu i go zmieniaj.
Kliknij komórkę pamięci. Pod pamięcią otworzy się edytor.
Wybierz rodzaj zawartości:
- Rozkaz: wybierz rozkaz z listy (z jego kodem binarnym) i numer komórki, jeśli rozkaz go wymaga,
- Liczba: wpisz wartość od 0 do 255.
Kliknij Zapisz w komórce. Komórka mignie na złoto, a na liście programów pojawi się Mój program.
Wyczyść ustawia komórce wartość 0. Zamknij chowa edytor.
Naciśnij Następny krok albo Uruchom, żeby sprawdzić program.

Wskazówki:

Program zaczyna się zawsze od komórki 0.
Dane trzymaj na końcu pamięci (komórki 12–15), żeby nie wchodziły programowi w drogę.
Kliknięcie komórki w trakcie działania programu robi Reset i otwiera edytor.
Reset przywraca Twój program do wersji z edytora. Zmiany zrobione przez rozkazy ZAPISZ podczas działania znikają.
Twój program istnieje tylko do odświeżenia strony. Zapisz go w zeszycie albo zrób zrzut ekranu.

Przykład: wypisz liczbę trzy razy

Komórka	Rozkaz
0	WEJŚCIE
1	WYJŚCIE
2	WYJŚCIE
3	WYJŚCIE
4	STOP

10. Liczby, bity i przepełnienie

Każda komórka i akumulator mają 8 bitów, więc mieszczą liczby od 0 do 255.
Jeśli wynik dodawania przekroczy 255, licznik „przekręca się” jak licznik kilometrów w samochodzie: wynik − 256. Przykład: 200 + 200 = 400 → 400 − 256 = 144.
Jeśli wynik odejmowania jest ujemny, licznik przekręca się w drugą stronę: wynik + 256. Przykład: 3 − 5 = −2 → −2 + 256 = 254.
W obu przypadkach zapala się lampka P (przepełnienie), a objaśnienie wyjaśnia, co się stało.

Prawdziwe komputery mają ten sam problem, tylko z większymi liczbami (32 lub 64 bity).

11. Skróty klawiszowe

Klawisz

Działanie

–

Wpisz cyfrę na klawiaturze modelu

Enter

Zatwierdź liczbę (⏎)

Backspace

Usuń ostatnią wpisaną cyfrę

Tab

Przejdź do kolejnego przycisku

Skróty nie działają, gdy aktywne jest pole formularza, np. w edytorze komórki.

12. Instalacja na własnym serwerze

Aplikacja to jeden statyczny plik

1	index.html

. Nie potrzebuje PHP, bazy danych ani instalacji.

Rozpakuj archiwum
1
komputer-pod-lupa.zip
.
Wgraj
1
index.html
do głównego katalogu subdomeny, np.
1
komputer.komputerowka.pl
.
Otwórz adres w przeglądarce.

SEO: w sekcji

<head>

jest zakomentowany adres kanoniczny. Odkomentuj go i wpisz właściwy adres:

1
2
&lt;link rel="canonical" href="https://komputer.komputerowka.pl/"&gt;

&lt;meta property="og:url" content="https://komputer.komputerowka.pl/"&gt;

Osadzenie w WordPressie (blok „Własny HTML”):

1
&lt;iframe src="https://komputer.komputerowka.pl/" style="width:100%;height:2400px;border:0" title="Komputer pod lupą"&gt;&lt;/iframe&gt;

Dla SEO lepiej linkować bezpośrednio do aplikacji niż ją osadzać.

Czcionki ładują się z Google Fonts. Bez dostępu do internetu aplikacja działa dalej, tylko z czcionkami zastępczymi.

13. Pomysły na lekcję

Lekcja 45 minut: „Co się dzieje w środku komputera?”

Czas	Aktywność
5 min	Pytanie na start: „Co robi komputer, gdy dodaje 7 + 5?”. Zbierz pomysły uczniów.
10 min	Pokaz na tablicy: program „Dodawanie dwóch liczb” w trybie Następny krok. Uczniowie czytają objaśnienia na głos i przewidują następny krok.
5 min	Części komputera: uczniowie pokazują na płytce procesor, pamięć, szyny, rejestry i ALU (słowniczek jest pod płytką).
10 min	Pętla: program „Odliczanie”. Uczniowie zmieniają liczbę w komórce 12 i sprawdzają działanie. Pytanie: która komórka tworzy pętlę?
10 min	Własny program w parach: pobierz liczbę i wypisz ją 3 razy, a dla szybszych odejmij dwie liczby.
5 min	Podsumowanie: cykl pobierz–dekoduj–wykonaj. Ile razy na sekundę robi to procesor 3 GHz?

Dodatkowe zadania:

Przepełnienie: w programie „Podwajanie” znajdź największą liczbę, która podwaja się poprawnie (127). Dlaczego właśnie ta?
Liczenie taktów: ile taktów zegara zajmuje program „Dodawanie” dla 7 + 5? Który rozkaz potrzebuje najwięcej kroków?
Program i dane: co się stanie, gdy w komórce 3 programu „Dodawanie” zapiszesz liczbę 200 zamiast rozkazu? Sprawdź i wyjaśnij.
Dla liceum: napisz program, który mnoży dwie liczby przez wielokrotne dodawanie. Wskazówka: potrzebny jest licznik i pętla, jak w programie „Suma”.

Podstawa programowa: budowa i zasada działania komputera, reprezentacja informacji, system dwójkowy, algorytmy z pętlą i warunkiem.

14. Rozwiązywanie problemów

Problem	Rozwiązanie
Przyciski kroków są nieaktywne	Program zakończył się rozkazem STOP albo nieznanym rozkazem. Naciśnij Reset.
Program się „zawiesił”	Prawdopodobnie czeka na liczbę: klawiatura pulsuje na fioletowo. Wpisz liczbę i naciśnij ⏎.
Program kręci się w nieskończoność	W programie jest pętla bez wyjścia. Naciśnij Reset i sprawdź rozkazy SKOK.
Wynik jest „dziwny”, np. 144 zamiast 400	To przepełnienie (lampka P). Patrz rozdział 10.
Mój program zniknął	Program żyje tylko do odświeżenia strony. Zapisz go w zeszycie.
Szyny są narysowane krzywo	Zmień rozmiar okna albo odśwież stronę, a szyny przerysują się same.
Za szybko albo za wolno	Użyj suwaka Prędkość albo trybu Następny krok.

15. Prywatność

Aplikacja nie wysyła żadnych danych na serwer, nie wymaga logowania i nie zapisuje niczego w przeglądarce. Po odświeżeniu strony wszystko wraca do stanu początkowego.

Aplikacja: komputer.komputerowka.pl Inne aplikacje: Tablice prawdy · Aparat Morse’a Więcej materiałów: komputerowka.pl

Zamów swoją Witrynę lub Aplikację internetową