Scratch (Blockly)

W e‑materiale Wyodrębnianie cyfr z danej liczbyD7SRZbIlaWyodrębnianie cyfr z danej liczby opisaliśmy algorytmalgorytmalgorytm wyodrębniania cyfr liczby za pomocą języka ScratchScratchScratch. Teraz rozwiążemy ten sam problem za pomocą platformy Google BlocklyBlocklyGoogle Blockly oraz języka Python.

1. Interaktywna treść merytoryczna1Interaktywna treść merytoryczna

2. Multimedium2Multimedium

3. Zestaw ćwiczeń interaktywnych3Zestaw ćwiczeń interaktywnych

4. Słownik4Słownik

5. Bibliografia5Bibliografia

Przykładowy program w języku ScratchScratchScratch, który rozwiązuje problem wyodrębniania cyfr liczby podanej przez użytkownika

Znamy już język programowania Scratch zaprojektowany przez Mitchela Resnicka i rozwijany przez MIT Media Lab. Zapoznajmy się z tym, w jaki sposób zmienić program zapisany z wykorzystaniem języka Scratch w program w języku Python.

R1JrEZPMUYcBl

Ilustracja przedstawia program zapisany z wykorzystaniem języka Scratch. Widoczne są następujące bloki. Blok pierwszy. Kiedy kliknięto zieloną flagę. Blok drugi. Zapytaj podaj liczbę naturalną i czekaj. Blok trzeci. Ustaw liczba na odpowiedź. Blok czwarty z pętlą. Powtarzaj, aż liczba będzie równa zero. Pierwszy element pętli. Ustaw cyfrana reszta z dzielenia liczba przez dziesięć. Blok drugi pętli. Powiedz cyfra przez trzy sekund. Trzeci blok pętli. Ustaw liczba na liczba minus cyfra podzielone przez dziesięć.

Omówienie poszczególnych bloków programu realizujących algorytmalgorytmalgorytm

1. Rozpoczynamy od bloku Kiedy kliknięto [zieloną flagę].

RJK67DPOvsKDg

Ilustracja przedstawia jeden z bloków programu Scratch z napisem kiedy kliknięto oraz zieloną flagą.

2. Następnie pobieramy od użytkownika liczbę. W języku Scratch używamy do tego bloku zapytaj. W dalszej kolejności odpowiedź użytkownika przypisujemy do zmiennej liczba za pomocą bloku ustaw. W języku Scratch zmienną musimy wcześniej utworzyć, dodając ją w sekcji ZMIENNE.

RWWZmZf5RZqHN

Ilustracja przedstawia dwa bloki programu Scratch. Pierwszy z nich z napisem: zapytaj podaj liczbę naturalną i czekaj. Drugi z napisem: ustaw liczba na odpowiedź.

Odpowiadający kod w Pythonie:

liczba = input("Podaj zawartość zmiennej: ")

Przykładowy kod uruchomiony w IDLE.

R1I0eIk5nfXYL

Zrzut ekranu przedstawia okno IDLE. Dodana została następująca linijka tekstu. Podaj zawartość zmiennej dwukropek dwadzieścia dziewięć tysięcy osiemset czterdzieści trzy. W oknie ze skryptem tekstowym pojawia się zapis. Zmienna równa się input początek nawiasu okrągłego początek cudzysłowu podwójnego Podaj zawartość zmiennej dwukropek koniec cudzysłowu, koniec nawiasu.

Ważne!

W języku Scratch nie ma rozróżnienia między tym, czy użytkownik podaje liczbę, czy tekst. W języku Python ta różnica również nie jest widoczna. Wszystko, co użytkownik wprowadzi za pomocą funkcji input(), w języku Python jest tekstem (<class 'str'>).

Możemy to sprawdzić, uruchamiając kod w IDLE:

Linia 1. zmienna znak równości input otwórz nawias okrągły cudzysłów Podaj zawartość zmiennej dwukropek cudzysłów zamknij nawias okrągły. Linia 2. print otwórz nawias okrągły cudzysłów Zmienna zawiera dwukropek cudzysłów przecinek zmienna zamknij nawias okrągły. Linia 3. print otwórz nawias okrągły cudzysłów Typ danych to dwukropek cudzysłów przecinek type otwórz nawias okrągły zmienna zamknij nawias okrągły zamknij nawias okrągły.

zmienna = input("Podaj zawartość zmiennej: ")
print("Zmienna zawiera:", zmienna)
print("Typ danych to:", type(zmienna))

Oto efekt:

Ru1wm4xqdy9m8

Zrzut ekranu przedstawia okno IDLE, gdzie dodane zostały kolejne linijki tekstu: w pierwszej dodanej linijce zostało napisane: Zmienna zawiera dwukropek trzy tysiące osiemdziesiąt pięć, w kolejnej dodanej linijce zapisano: Typ danych to dwukropek znak większości class pojedynczy cudzysłów s t r koniec cudzysłowu znak mniejszości. . W oknie ze skryptem tekstowym pojawia się dodatkowy zapis: print początek nawiasu okrągłego cudzysłów podwójny zmienna zawiera dwukropek koniec cudzysłowu przecinek zmienna koniec nawiasu okrągłego. W kolejnej linijce znajduje się zapis: print początek nawiasu okrągłego cudzysłów podwójny Typ danych to dwukropek koniec cudzysłowu przecinek type początek nawiasu okrągłego zmienna podwójny koniec nawiasu okrągłego.

Możemy sprawdzić, jak długi (z ilu znaków się składa) jest tekst podany przez użytkownika. Służy do tego funkcja len("tekst"):

Linia 1. zmienna znak równości cudzysłów tekst cudzysłów. Linia 2. print otwórz nawias okrągły cudzysłów Długość zmiennej dwukropek cudzysłów przecinek len otwórz nawias okrągły zmienna zamknij nawias okrągły zamknij nawias okrągły. Linia 3. kratka Efekt dwukropek. Linia 4. Długość zmiennej dwukropek 5.

zmienna = "tekst"
print("Długość zmiennej:", len(zmienna))
# Efekt:
Długość zmiennej: 5

Musimy zamienić ciąg znaków na liczbę. Dokonamy tego, używając funkcji int().

Przykład do wykorzystania w IDLE:

Linia 1. zmienna znak równości int otwórz nawias okrągły input otwórz nawias okrągły cudzysłów Podaj zawartość zmiennej dwukropek cudzysłów zamknij nawias okrągły zamknij nawias okrągły. Linia 2. print otwórz nawias okrągły cudzysłów Zmienna zawiera dwukropek cudzysłów przecinek zmienna zamknij nawias okrągły. Linia 3. print otwórz nawias okrągły cudzysłów Typ danych to dwukropek cudzysłów przecinek type otwórz nawias okrągły zmienna zamknij nawias okrągły zamknij nawias okrągły.

zmienna = int(input("Podaj zawartość zmiennej: "))
print("Zmienna zawiera:", zmienna)
print("Typ danych to:", type(zmienna))

Efekt wykonania wygląda następująco (w kodzie zaznaczona jest funkcja int()):

R17UBEKPkDHcN

Zrzut ekranu przedstawia okno IDLE, gdzie typ danych zmienia się z class s t r class i n t. W oknie skryptu tekstowego zmienia się treść pierwszej linijki i teraz brzmi: zmienna równa się i n t początek nawiasu okrągłego input początek nawiasu okrągłego początek cudzysłowu Podaj zawartość zmiennej dwukropek koniec cudzysłowu, podwójny koniec nawiasu. Pozostała treść skryptu nie ulega zmianie.

W ten sposób uzyskujemy liczbę całkowitą (<class 'int'>) z wartości podanej przez użytkownika, która została pobrana przez funkcję input().

3. Kolejnym krokiem jest pętla warunkowa. W języku Scratch wykonujemy operacje tak długo, aż zmienna liczba nie osiągnie wartości 0, wówczas kończymy operacje.

R1BloRompM8wV

Ilustracja przedstawia jeden z bloków programu Scratch z napisem powtarzaj aż liczba równa się zero.

Aby w języku Python osiągnąć taki sam efekt, należy skorzystać z instrukcji while. Pętla wykonuje się tak długo, jak długo zmienna liczba ma wartość większą niż 0.

while liczba > 0:
  # instrukcje weanątrz pętli

Pomimo że warunki wyglądają inaczej, pętle działają podobnie. Operacje w pętli while (Python) wykonywane są tak długo, jak długo warunek jest prawdziwy. Zwrócenie przez warunek wartości False kończy pętlę (w tym przypadku działanie pętli się zakończy, gdy wartość zmiennej liczba będzie wynosić 0).

Natomiast w języku Scratch instrukcje wewnętrzne pętli wykonywane są tak długo, jak długo warunek ma wartość False. Zwrócenie przez warunek wartości True kończy pętlę.

Bloki kodu wewnątrz pętli

4. Wyodrębniamy najmniej znaczącą cyfrę liczby za pomocą obliczania reszty z dzielenia (operator %).

R1cb0HEU7HE2R

Ilustracja przedstawia jeden z bloków programu Scratch z napisem ustaw lista rozwijana cyfra koniec listy na reszta z dzielenia liczba przez dziesięć.

Odpowiadający kod w języku Python:

cyfra = liczba % 10

5. Wypisujemy na ekranie tę cyfrę.

RPBzWefSMFot9

Ilustracja przedstawia jeden z bloków programu Scratch z napisem powiedz cyfra przez trzy sekund.

Odpowiadający kod w języku Python:

print(cyfra)
# lub
print("Cyfra to:", cyfra)
# lub
print("Cyfra to: " + str(cyfra))

6. Obliczamy nową wartość zmiennej liczba, stosując dzielenie całkowite przez 10.

RS3Fm90aCqvqG

Ilustracja przedstawia jeden z bloków programu Scratch z napisem ustaw lista rozwijana liczba koniec listy rozwijanej, na liczba minus cyfra podzielone przez dziesięć.

Odpowiadający kod w Pythonie:

liczba = liczba // 10

Ważne!

Możemy użyć bloku podłoga, który obliczoną wartość wyrażenia zaokrągla w dół do najbliższej liczby całkowitej:

R1ApObofbKcZa

Ilustracja przedstawia jeden z bloków programu Scratch z napisem ustaw lista rozwijana liczba koniec listy rozwijanej, na lista rozwijana podłoga koniec listy rozwijanej z liczba podzielona przez dziesięć.

W języku Python odpowiada mu funkcja floor(x) z modułustandardowe modułymodułu math.

Linia 1. import math. Linia 2. liczba znak równości math kropka floor otwórz nawias okrągły liczba prawy ukośnik 10 zamknij nawias okrągły.

import math
liczba = math.floor(liczba / 10)

Nie jest to jednak sposób polecany (nie należy do dobrych praktyk programowania).

Oto całkowity kod w Pythonie i efekt jego wykonania:

liczba = int(input("Podaj zawartość zmiennej: "))
while liczba > 0:
    cyfra = liczba % 10
    print("Kolejna cyfra to:", cyfra)
    liczba = liczba // 10

Przykładowy program uruchomiony w IDLE:

RxMpd158G4G5j

Zrzut ekranu przedstawia okno IDLE, w którym znajduje się następujący zapis: poda zawartość zamiennej dwukropek siedemdziesiąt osiem tysięcy sześćset czterdzieści pięć. Kolejne pięć linii mają taką samą treść, która brzmi: Kolejna cyfra to dwukropek, w kolejnych linijkach po dwukropku znajdują się następujące liczby: pięć, cztery, sześć, osiem oraz siedem. W oknie o nazwie cyfry z liczby znajduje się następująca treść. W pierwszej linijce: liczba równa się i n t początek nawiasu okrągłego input początek nawiasu okrągłego początek cudzysłowu podwójnego Podaj zawartość zmiennej dwukropek, koniec cudzysłowu, podwójny koniec nawiasu. W kolejnej linijce: while liczna znak większości zero dwukropek. Dalej: cyfr równa się liczba procent dziesięć. Kolejna linijka: print początek nawiasu okrągłego początek podwójnego cudzysłowu Kolejna cyfra to dwukropek koniec cudzysłowu, przecinek cyfra koniec nawiasu. Treść ostatniej linijki brzmi: liczba równa się liczba ukośnik ukośnik dziesięć.

Istnieje podobna do języka Scratch platforma, BlocklyBlocklyBlockly, która pozwala stworzyć program realizujący algorytm za pomocą bloczków, a następnie zamienić go na kod źródłowy w jednym z kilku języków programowania, np.:

• JavaScript

• Python

• PHP

• Lua

• Dart.

Przyjrzyjmy się temu, jak może wyglądać proces tworzenia algorytmu wyodrębniania cyfr liczby w konkretnym języku programowania.

Prezentujemy przykładowy program realizujący algorytm wyodrębniania cyfr liczby w Blockly oraz wygenerowany kod w Pythonie.

R9UCPtgSEybzL

Ilustracja przedstawia program napisany w środowisku Scratch. W pierwszym bloku znajduje się zapis przypisz początek listy rozwijanej liczba koniec listy wartość, obok przypięty jest puzzel z liczbą osiemset czterdzieści siedem tysięcy sześćset jeden. Kolejny blok posiada napis powtarzaj dopóki oraz wykonaj i obejmuje wszystkie pozostałe puzzle programu. Obok napisu powtarzaj dopóki znajduje się puzzel z treścią: lista rozwiana liczba koniec listy, początek listy rozwijanej znak większości koniec listy zero. Poniżej znajduje się blok z napisem: Wydrukuj, utwórz tekst z podwójny cudzysłów nasza liczba to dwukropek koniec cudzysłowu. Do bloku tego podpięty jest puzzel z listą rozwijaną, z której wybrana jest liczba. Dalej mamy blok z napisem: Przypisz, lista rozwijana cyfra koniec listy, wartość, reszta z dzielenia, lista rozwijana liczba koniec listy, przez dziesięć. Dalej: Wydrukuj, utwórz tekst z podwójny cudzysłów Kolejna cyfra to to dwukropek koniec cudzysłowu. Do tego bloku podpięty jest puzzel z listą rozwijaną, z której wybrana została cyfra. W ostatniej linijce znajdują się puzzle tworzące treść: przypisz lista rozwijana liczba koniec listy, wartość, lista rozwijana zaokrąglij w dół, koniec listy, lista rozwijana liczba koniec listy, lista rozwiana ukośnik koniec listy dziesięć.

Wersja w języku Python – kod wygenerowany w Blockly

RBYFsBpffoqZJ

Grafika przedstawia interfejs komponentu do wprowadzania kodu źródłowego. Widoczne są przyciski pozwalające wybrać języki programowania takie jak: Bloki, JavaScript, Python, PHP, Lua, Dart, XML oraz przyciski Krok po kroku, kosz i start.

import math

liczba = None
cyfra = None


liczba = 847601
while liczba > 0:
    print('Nasza liczba to:' + str(liczba))
    cyfra = liczba % 10
    print('Kolejna cyfra to:' + str(cyfra))
    liczba = math.floor(liczba / 10)

liczba = 847601
wynik = math.floor(liczba / 10)
print(wynik)

import math
liczba = 847601
wynik = math.floor(liczba / 10)
print(wynik)

import math

liczba = None
cyfra = None

liczba = 847601
while liczba > 0:
    print('Nasza liczba to:' + str(liczba))
    cyfra = liczba % 10
    print('Kolejna cyfra to:' + str(cyfra))
    liczba = math.floor(liczba / 10)

import math

liczba = 847601
while liczba > 0:
    print('Nasza liczba to:' + str(liczba))
    cyfra = liczba % 10
    print('Kolejna cyfra to:' + str(cyfra))
    liczba = math.floor(liczba / 10)

Analiza kodu wygenerowanego przez platformę Blockly

1. W pierwszym wierszu znajduje się instrukcja, w której dodawany jest moduł math za pomocą instrukcji import. Ta instrukcja nie ma swojego odpowiednika w blokach Blockly. Blockly sprawdza, z jakich bloków korzystaliśmy, i automatycznie dodaje odpowiednie biblioteki w trakcie tłumaczenia na inne języki.

import math

2. Inicjacja zmiennych. Wszystkim zmiennym, które pojawiają się w programie, Blockly przypisuje wartość None, czyli nic. Może to być przydatne na przykład w sytuacji, gdy chcemy zainicjować zmienną bez konkretnej wartości lub przekazać wartość, która nie ma znaczenia w danym kontekście. Warto zauważyć, że w języku Python nie ma konieczności inicjowania zmiennych, ale w wielu innych językach programowania zmienna przed pierwszym użyciem musi być zainicjowana. Oznacza to, że trzeba określić jej typ. Do dobrych praktyk programistycznych należy również nadanie jej wartości początkowej.

3. Następnie Blockly nadpisuje wartość zmiennej (zgodnie ze stworzonym blokiem). W Blockly jest to widoczne jako blok przypisania wartości do zmiennej.

RTIdYcUuxkYVW

Ilustracja przedstawia dwa połączone bloki programu Scratch pierwszy z napisem przypisz, lista rozwijana liczba koniec listy, wartość, na drugim znajduje się liczba: osiemset czterdzieści siedem tysięcy sześćset jeden.

liczba = None
cyfra = None

liczba = 847601

liczba = None
liczba = 12
print(liczba)
 # efekt: 12

liczba = 12
print(liczba)
 # efekt: 12

3. W programie wykorzystaliśmy blok powtarzaj dopóki, którego odpowiednikiem w języku Python jest pętla warunkowa while, a więc dopóki spełniony jest warunek logiczny (wartość zmiennej liczba jest większa niż 0).

R1CzUPdYuvQAZ

Ilustracja przedstawia dwa połączone bloki programu Scratch pierwszy z napisem: powtarzaj, lista rozwijana dopóki koniec listy, na drugim znajduje się zapis: lista rozwijana liczba koniec listy, lista rozwijana znak większości koniec listy, zero.

while liczba > 0:

4. W kolejnym kroku wypisywana jest na ekranie wartość zmiennej liczba. W ten sposób można zaprezentować, jak zmienia się jej wartość w kolejnych iteracjach pętli.

ROUtRUOzeTceK

Ilustracja przedstawia bloki programu Scratch pierwszy z napisem: wydrukuj, drugi z napisem utwórz tekst z, do którego podpięte są dwa puzzle. Jeden z napisem w podwójnym cudzysłowie: Nasza liczba to dwukropek. Drugi podpięty puzzel to lista rozwijana, w której wybrana została liczba.

print('Nasza liczba to:' + str(liczba))

5. Następnie wyodrębniana jest ostatnia cyfra liczby. Wykonywana jest operacja obliczania reszty z dzielenia (w tym wypadku przez 10), to tzw. dzielenie modulomodulodzielenie modulo.

R1PWvrGWgzOmw

Ilustracja przedstawia bloki programu Scratch pierwszy z napisem: przypisz, lista rozwijana cyfra koniec listy, wartość. Kolejny puzzel ma napis reszta z dzielenia. Trzeci puzzel to lista rozwijana, w której wybrana została liczba. Ostatni puzzel posiada napis przez dziesięć.

cyfra = liczba % 10

6. W dalszej kolejności wypisywana jest na ekranie informacja o kolejnej cyfrze.

R1bkoMv2QNntj

Ilustracja przedstawia bloki programu Scratch pierwszy z napisem: wydrukuj, drugi z napisem utwórz tekst z, do którego podpięte są dwa puzzle. Jeden z napisem w podwójnym cudzysłowie: Kolejna cyfra to dwukropek. Drugi podpięty puzzel to lista rozwijana, w której wybrana została cyfra.

print('Kolejna cyfra to:' + str(cyfra))

7. Program dokonuje aktualizacji zmiennej liczba. Przypisywany jest jej zaokrąglony w dół wynik dzielenia przez 10.

RWazv4Mq2ykEE

Ilustracja przedstawia bloki programu Scratch pierwszy z napisem: przypisz, lista rozwijana liczba koniec listy, wartość. Kolejny puzzel ma napis lista rozwijana zaokrąglij w dół koniec listy. Trzeci puzzel to lista rozwijana, w której wybrana została liczba. Na kolejnym puzzlu również znajduje się lista rozwijana, gdzie wybrany został ukośnik. Ostatni puzzel posiada napis przez dziesięć.

liczba = math.floor(liczba / 10)

Zamiast funkcji floor() możliwe jest użycie dzielenia całkowitego, wykorzystując operator //.

Notatnik

Animacja (samouczek)

Zapoznaj się z filmem, aby utrwalić swoją wiedzę i zapoznać się ze sposobem przygotowania programu w Blockly.

Platforma Blockly, w której możesz wykonywać polecenia

Polecenie 3

Wykonaj w Blockly następujące polecenia:

• utwórz zmienną wynik,

• utwórz zaprezentowane polecenie, a potem wygeneruj kod w języku Python.

RpybvyvO3yVxj

Ilustracja przedstawia fragment programu napisanego w środowisku Scratch. W pierwszym bloku znajduje się zapis przypisz początek listy rozwijanej wynik koniec listy wartość. Z nim połączony jest blok z listą rozwijaną w której wybrano pierwiastek kwadratowy. Na końcu znajduje się puzzel z cyfrą dziewięć.

R1OgFmDhEAjza

Ra5C1on4IPEHA

R1JZliqSpKr8E

liczba = int(input("Podaj liczbę naturalną: "))
if liczba % 2 == 0:
    print("Liczba jest parzysta.")
else:
    print("Liczba jest nieparzysta.")

Zestaw ćwiczeń interaktywnych

Słownik

liczba = int(input('Podaj liczbę calkowitą: '))

liczba = float(input('Podaj liczbę zmiennoprzecinkową: '))

Bibliografia

• Jurkiewicz A., Python 3 - Projekty dla początkujących i pasjonatów, Helion, Gliwice 2021.

• Dokumentacja języka Python, docs.python.org, dostęp 27.02.2024.

• Łos K., Python dla nastolatków. Projekty graficzne z Python Turtle, Helion, Gliwice 2022.

• Platforma OSE IT‑Szkoła, Programowanie w Pythonie z Klubem Młodego Programisty, it‑szkola.edu.pl, dostęp 27.02.2024.

• Sysło M.M., Algorytmy, Helion, Gliwice 2016.