Script

Unità di apprendimento 6
Dal problema
al programma
Unità di apprendimento 6
Lezione 7
Un ambiente visuale per la
pseudocodifica:
Scratch e BYOB
In questa lezione impareremo:


cosa sono i nuovi ambienti didattici
visuali
a scrivere i primi programmi in BYOB
Cos’è Scratch


Scratch è un nuovo linguaggio di
programmazione visuale che, mediante un
approccio orientato agli oggetti
(denominati Sprites).
Rende semplice la creazione di storie
interattive, di giochi e di animazioni e
permette di condividere sul web le
“creazioni” con altri “programmatori”.
Cos’è Scratch



Scratch è sviluppato dal Media Lab del
MIT ed è supportato da contributi
finanziari della maggiori aziende
dell’informatica.
E’ completamente gratuito.
Si presenta con una semplice interfaccia
grafica molto intuitiva e permette all’utente
di scrivere veri e propri programmi “senza
scrivere il codice”.
Cos’è Scratch

Questo è il menù che si presenta
all’utente al suo avvio:
BYOB e Scratch


La versione più aggiornata di Scratch è
stata chiamata BYOB da Build Your Own
Blocks (costruisci i tuoi blocchi).
Consente all’utente di creare propri
blocchi personalizzabili secondo le diverse
esigenze ed aggiungerli ai blocchi
standard.
BYOB e Scratch

L’interfaccia di BYOB è “praticamente
identica” a Scratch:
Installazione di BYOB


Oggi (maggio 2014) è ancora disponibile
la versione 3.1.1, scaricabile dall’indirizzo
http://byob.berkeley.edu/ (in fondo alla
pagina, indicata come old version, dato
che la nuova versione è divenuta Snap!).
E’ anche presente nella cartella materiali
della sezione del sito www.hoepliscuola.it
riservata a questo volume.
Installazione di BYOB

Ad esempio, per le tutte le versioni del
sistema operativo Windows avviamo
BYOB 3.1.1 Setup.exe.
Installazione di BYOB


L’installazione avviene automaticamente:
al suo termine il programma viene
mandato in esecuzione.
Scegliamo la lingua (di default è English).
L’ambiente di lavoro

La finestra di BYOB è divisa in tre sezioni:
L’ambiente di lavoro

la prima sezione è suddivisa in due parti:
 nella parte superiore sono
elencati i gruppi di istruzioni
e controlli, individuabili per il
loro colore;
 selezionando un gruppo
dalla sezione superiore
vengono presentati tutti i
comandi disponili nella parte
inferiore.
L’ambiente di lavoro

la sezione di centrale è quella di lavoro ed è organizzata in tre
tabelle:
•
•
•
nella prima tabella si definiscono i programmi, che prendono il
nome di Script;
nella seconda si definiscono gli aspetti grafici, cioè si possono
disegnare gli oggetti che verranno animati (Sprite) , i diversi
costumi che questi indosseranno durante le loro azioni oppure
gli sfondi delle ambientazioni dello Stage dove gli Sprite
”prenderanno vita”;
nella terza si possono creare o importare i suoni che si
potranno associare agli Sprite (sono riconosciuti molti formati
di immagini: JPG, BMP, PNG, GIF, incluse le GIF animate).
L’ambiente di lavoro

Sopra le tabelle c’è un’area che contiene
le informazioni sullo Sprite corrente, cioè
quello che è stato selezionato e per il
quale si stanno scrivendo gli Script.
L’ambiente di lavoro

L’Area Informazioni Sprite mostra:
• il nome dello Sprite selezionato
• la sua posizione x-y
• la sua direzione
• il suo stato di blocco:
• se il lucchetto è sbloccato si può digitare
all’interno della casella per modificarne il
nome.
L’ambiente di lavoro



La direzione indica in quale direzione lo Sprite
si muoverà quando eseguirà un blocco di
movimento (0=su, 90=destra, 180=giù, -90=sinistra).
La linea blu sull’anteprima dello Sprite
mostrata indica graficamente la direzione
corrente dello Sprite.
E’ sufficiente “trascinarla” per modificarne la
direzione ed un doppio click sullo Sprite la
riporta nella direzione di partenza (direzione=90).
L’ambiente di lavoro

la sezione di destra è anch’essa suddivisa
in due parti:
• nella parte superiore avviene l’esecuzione dello
•
Script, cioè viene avviato e terminato il
programma e si visualizzano i risultati
dell’elaborazione;
nella parte inferiore sono presentati tutti gli
oggetti che ne fanno parte, dallo Stage agli
Sprite
L’ambiente di lavoro

Il menù superiore riporta le classiche
operazioni previste in ogni programma

In particolare il menu Aiuto permette di
accedere al manuale di riferimento di oltre
35 pagine disponibile in formato pdf con la
guida passo passo dalla realizzazione dei
primi Script alle strutture più complesse.
Gli elementi di un programma


Un programma BYOB può essere così
descritto
o “è un insieme di Script che vengono
associati ai singoli Sprite che si
muovono all’interno di uno Stage”.
Un programma BYOB è quindi
composto da tre elementi: Script ,
Sprite e Stage
Gli elementi di un programma

lo Stage è “il palcoscenico” dove si
evolve il programma e può essere:
• una fotografia che svolge un’azione passiva di
“abbellimento”;
• un disegno che interagisce con gli Sprite (ad
esempio il percorso di un labirinto, i bordi di
una pista per le biglie, ecc.).
Gli elementi di un programma



Gli Sprite: sono i soggetti che eseguono
le azioni, elencate negli Script;
Sono collocati automaticamente nello
Stage, pronti ad eseguire il programma a
loro assegnato;
Possono essere
• disegnati dall’utente
• venire selezionati tra quelli disponibili
Gli elementi di un programma


Gli Script: sono i veri e propri programmi,
composti da una sequenza di azioni
scelta dai menù dalla prima sezione
possono essere di Movimento, di
Controllo, di Suono, ecc.

Gli ecc.
Gli elementi di un programma

Per realizzare uno Script basta
• trascinare un comando dall’area dei
blocchi (tecnica drag and drop) alla
sezione centrale
• disporlo in colonna con gli altri, seguendo
gli incastri, come si dispongono i “mattoni
delle costruzioni”
Gli elementi di un programma

Si parte da due blocchi di controllo e
cioè dal blocco di avvio e dal blocco di
terminazione
Gli elementi di un programma



Ad uno Sprite possono essere associati
anche diversi Script
Ciascuno dei quali può essere attivato
da un particolare evento
Ad esempio la digitazione di un
particolare tasto può far modificare il
comportamento.
Gli elementi di un programma


ESEMPIO
Ad uno Sprite automobile ad esempio
possiamo associare due Script:
• il primo che la fa muovere continuamente
avanti ed indietro nello Stage;
• il secondo che alla pressione della barra
spaziatrice gli fa “suonare il clacson”.
Gli elementi di un programma

La figura seguente mostra un semplice
programma completo dei tre componenti
sopra indicati:
• uno Sprite (ball) che continua a rimbalzare;
• è posto all’interno dello Stage (muretto);
• si muove con velocità indicata in 4 passi
alla volta dal programma (Script).
Gli elementi di un programma

Lo Script viene mandato in esecuzione cliccando la
bandiera di avvio, o sul bordo superiore della
videata o direttamente sul blocco dello Script.
Primo programma in BYOB


Realizziamo una “invasione di fantasmi
sulla spiaggia di Malibù”
cliccando sull’icona che riportata una
cartella nella sezione degli Sprite
carichiamo tre fantasmi:
Primo programma in BYOB

Selezioniamo ora Stage per definire lo
sfondo della nostra applicazione:

selezioniamo prima Background, quindi
Nature ed infine il file beach_malibu
Primo programma in BYOB

Otteniamo la seguente situazione:
Primo programma in BYOB

Selezioniamo ora lo Sprite1 nella
sezione degli Stage e clicchiamo il tasto

in modo da visualizzare i controlli
disponibili.
Trasciniamo nella sezione centrale il
“blocco” che ci permette di avviare il
programma (blocco di inizio)

Primo programma in BYOB

quello finale che ferma tutte le
esecuzioni (blocco di terminazione)

ed un blocco che permette di effettuare
in ripetizione un insieme di istruzioni (in
questo caso 100 volte):
Primo programma in BYOB


Clicchiamo il menù dei blocchi di
Movimento;
selezioniamo due inserendoli nel blocco
di ripetizione dopo aver modificato il
valore proposto di default al valore 3;
Primo programma in BYOB

Avviamo l’esecuzione dello Sprite
cliccando sulla bandiera verde in alto a
destra nella finestra della terza sezione

il fantasma inizia a muoversi ma…
quando raggiunge il bordo della finestra
si “capovolge” prima di ritornare indietro
(il costume si “ribalta”)

Primo programma in BYOB

Si corregge questo contrattempo
selezionando tra gli “Stili di rotazione”
l’icona sotto evidenziata, in modo da far
tornare indietro il fantasma con lo
“stesso orientamento”.
Arricchiamo lo Script



Aggiungiamo degli effetti al nostro
programma;
per prima cosa … un po’ di musica
selezionando il bottone
dal pannello dei controlli
Arricchiamo lo Script



Allo Sprite3 associamo il file musicale
selezionandolo dalla cartella Suoni
cliccando su Importa
scegliendolo nella biblioteca di suoni
disponibili, organizzati per tipologia:
Arricchiamo lo Script


Importiamo SpaceRipple: viene
automaticamente “inserito” nei blocchi di
riproduzione;
a questo punto lo possiamo aggiungere
il comando nel nostro Script:
Arricchiamo lo Script


Come ultimo abbellimento facciamo
“parlare” lo Sprite2
Selezioniamo dal menù
il
blocco che visualizza un fumetto
contenente una frase e scriviamo il verso
«Haauuughh!».
Arricchiamo lo Script

lo Script associato
allo Sprite2 è
quindi:

mandandolo in
esecuzione
produce il risultato
riportato a lato:
Codifica esercizio
«costo per andare a scuola»

Per realizzare questo Script definiamo
alcune Variabili che devono essere
create nella apposita area prima della
scrittura del codice
Codifica esercizio
«costo per andare a scuola»

E’ possibile far visualizzare il contenuto
della variabile spuntando il check-box che
è vicino al nome della variabile:
Codifica esercizio
«costo per andare a scuola»



le operazioni matematiche vengono realizzate
con i blocchi Operatori
la comunicazione attraverso la composizione
di un blocco Aspetto con il blocco Operatori
consente l’unione di due “entità”, che in questo
caso sono una frase digitata direttamente nel
blocco ed una variabile.
Codifica esercizio
«costo per andare a scuola»

Lo Script completo
è il seguente:
Codifica esercizio
«invia un sms»

Linguaggio di progetto dell’algoritmo:

Per realizzare questo Script definiamo
due Variabili col nome di numeroTelefono
e messaggio
Codifica esercizio
«invia un sms»

Sono riportate due codifiche alternative:
Codifica esercizio
«travasiamo con i secchi»

Linguaggio di progetto dell’algoritmo:
Codifica esercizio
«travasiamo con i secchi»

Per realizzare
questo Script
definiamo due
Variabili
col
nome di
• secchio3
• secchio4
Arricchiamo lo Script