SIM-08 Python nel Browser con Skulpt - Simulatore Interattivo | Prof. Giagnotti

🐍 SIMULATORE 08 · Python nel Browser

Simulatore Python con Skulpt — Esegui Codice Python Direttamente nel Browser

Interprete Python 100% client-side: niente server, niente installazione. Scrivi, esegui e testa algoritmi di rete (subnet, parità, checksum) con persistenza locale e esempi pronti da incollare.

A cura di Prof. Giagnotti · Corso Tecnologie Informatiche 2026 · Modulo Programmazione per le Reti

⏱️ 20 min 📶 Livello: Base/Intermedio 🧩 Focus: Skulpt Interpreter ⚡ Interattivo JS + Python

🎯

Obiettivi di apprendimento

Al termine saprai usare Python nel browser, capire Skulpt e applicarlo a problemi di reti.

✓Definire cos'è un interprete Python in-browser e come Skulpt traduce Python in JavaScript.

✓Distinguere cosa funziona e cosa no: limitazioni I/O, moduli, input() e performance.

✓Scrivere script Python base: print, variabili, if, for, funzioni, liste.

✓Applicare Python a casi di rete: calcolo parità, subnet mask, conversione IP, validazione.

✓Debuggare errori comuni di sintassi, indentazione e tipi nel simulatore.

📑 Indice — 7 Sezioni

1. Cos'è il simulatore Python nel browser 2. Come funziona Skulpt — dal codice Python al JS 3. Simulatore interattivo — editor con Skulpt 4. Esempi pratici per reti e algoritmi 5. Errori comuni, limitazioni e debug 6. Verifica / Esercizio 7. Riepilogo

1. Cos'è il simulatore Python nel browser

📌 Definizione operativa

Un simulatore Python browser-based è un interprete Python riscritto in JavaScript (qui Skulpt) che esegue codice Python direttamente nella scheda, senza server. Output va in un <pre>, storage in localStorage, esecuzione asincrona con Promise.

Perché utile a scuola di reti? Perché puoi prototipare in 10 secondi algoritmi che altrimenti richiederebbero installazione: calcolo bit di parità, somma checksum, validazione IPv4, conversione binario-decimale, generazione tabella FLSM. Zero attrito, zero pip install.

01 · ZERO INSTALL

Client-only

Niente Python locale. Funziona anche su Chromebook o tablet. Offline dopo primo load CDN.

02 · ISTANTANEO

Feedback immediato

Esecuzione in <200ms per script didattici. Ideale per cicli prova-errore durante lezione.

03 · DIDATTICO RETI

Focus algoritmi

Testi subnet, parity, CRC in Python invece di JS, poi porti stessa logica in Packet Tracer / script.

💬 Nota del docente — perché Python per reti?

In industria gli script di automazione Cisco, validazione config, parsing log e calcolo subnet sono quasi sempre in Python. Questo simulatore ti allena alla sintassi che poi userai con Netmiko, ipaddress, ecc. Skulpt copre molte delle funzionalità necessarie per iniziare a esercitarsi con Python nel browser.

2. Come funziona Skulpt — interpretazione Python → JS

Skulpt non compila via WebAssembly: è un interprete Python 2/3 scritto a mano in JS. Legge sorgente, parser → AST, poi eval in runtime JS che simula oggetti Python (PyObject, dict, list). Moduli standard essenziali sono forniti da skulpt-stdlib.js.

Componente	Ruolo	Dettaglio
textarea.python-code	Input utente	Dark editor, font JetBrains Mono, localStorage `sim08_python_2026`
Sk.configure	Config runtime	`output: outfFactory()` appende testo, `read: builtinRead` serve stdlib
Sk.misceval.asyncToPromise	Esecuzione	Promise asincrona; cattura eccezioni → `err.toString()` in output
Limiti	Compatibilità	No file I/O reale, no socket, no input() bloccante, no pip, moduli limitati (math, random ok)

⚠️ Differenze vs CPython reale

Skulpt implementa Python 3-ish ma non tutto: time.sleep può non funzionare, open() legge solo file virtuali di stdlib, input() non è supportato in modo nativo. Per reti, usa funzioni pure (no rete). Se vedi ExternalError controlla indentazione e moduli.

3. Simulatore interattivo — editor Python con Skulpt

Scrivi sotto, premi Esegui ▶. Il codice viene salvato automaticamente. Reset riporta l'esempio di benvenuto. Usa i chip per caricare snippet pronti.

Scrivi il tuo codice Python qui sotto, premi Esegui e visualizza il risultato. Il codice viene salvato automaticamente nel browser. Usa 4 spazi per indentare.

📝 Editor Python (dark)

Output terminaleSkulpt 1.2.0

💡 Suggerimento d'uso in classe

Fai scrivere prima lo pseudo-codice per FLSM (rete /26 → 62 host). Poi traduci in Python: host = 2**(32-prefix)-2. Verifica con questo simulatore. Infine confronta con calcolo manuale. Il ciclo manuale → codice → simulatore fissa il concetto.

4. Esempi pratici per reti e algoritmi

Tre snippet pronti da incollare con Copia. Coprono print/variabili/if/for/funzioni + casi di reti.

ESEMPIO 1 · Base Python — print, var, if, for, funzione

# Esempio 1 - Fondamentali
nome = "Rete"
hosts = 14
print(f"Benvenuto in {nome} con {hosts} host")def check_hosts(n):
if n <= 0:
return "invalido"
elif n <= 14:
return "/28"
elif n <= 62:
return "/26"
else:
return "/24"for h in [5, 14, 20, 60, 100]:
print(f"{h} host → suggerito {check_hosts(h)}")

ESEMPIO 2 · Subnet FLSM + binario — ip in bin + calcolo host

# Esempio 2 - Subnet e conversione binaria
def ip_to_bin(ip):
return '.'.join(f"{int(o):08b}" for o in ip.split('.'))def calc_subnet(prefix):
host_bits = 32 - prefix
num_hosts = 2**host_bits - 2
mask = '.'.join(str((0xffffffff << (32-prefix) >> i) & 255) for i in [24,16,8,0])
return mask, num_hostsip = "192.168.1.0"
print(f"IP {ip} in binario: {ip_to_bin(ip)}")
for p in [24, 26, 28, 30]:
mask, hosts = calc_subnet(p)
print(f"/{p} → mask {mask} → host utili {hosts}")# Calcolo rete broadcast per /26 su 192.168.1.0
prefix = 26
host_count = 2**(32-prefix)
print(f"Blocco /{prefix}: {host_count} indirizzi, blocco successivo 192.168.1.{host_count}")

ESEMPIO 3 · Parità, checksum semplice, validazione IP

# Esempio 3 - Controllo errori + validazione
def parity_bit(bits, tipo='even'):
ones = bits.count('1')
if tipo == 'even':
return '0' if ones % 2 == 0 else '1'
else:
return '1' if ones % 2 == 0 else '0'def checksum_byte(data_bin_list):
# somma modulo 256
tot = sum(int(b, 2) for b in data_bin_list) % 256
return f"{tot:08b}"def valida_ip(ip):
parti = ip.split('.')
if len(parti) != 4:
return False
for p in parti:
if not p.isdigit() or not 0 <= int(p) <= 255:
return False
return True# Test parità
d = "1011001"
print(f"D={d} even parity={parity_bit(d,'even')} → T={d+parity_bit(d,'even')}")
print(f"D={d} odd  parity={parity_bit(d,'odd')} → T={d+parity_bit(d,'odd')}")# Test checksum
byte_list = ["10100011","00001111","11000000"]
print(f"Bytes {byte_list} → checksum {checksum_byte(byte_list)}")# Validazione
for ip in ["192.168.1.1","300.1.1.1","10.0.0"]:
print(f"{ip} valido? {valida_ip(ip)}")

5. Errori comuni, limitazioni e debug

INDENTAZIONE

IndentationError

Python vuole 4 spazi. Mix tab/spazi → errore. Skulpt lo segnala come IndentationError.

DUE PUNTI

SyntaxError :

Dimenticare : dopo if/for/def → SyntaxError. Controlla riga indicata nell'output.

MODULI

ImportError

Solo math, random, etc. Se importi socket o requests → File not found.

Errore visto in output	Causa tipica	Fix rapido
`SyntaxError: bad input`	Parentesi non chiusa, virgolette, `=` vs `==`	Rileggi riga, conta parentesi, usa == per confronto
`NameError: name 'x' is not defined`	Variabile non definita o typo	Definisci prima, controlla maiuscole
`TypeError: ...`	Somma str + int, int su None	Converti con int(), str(), usa f-string
`File not found` da builtinRead	import modulo non supportato	Togli import, reimplementa funzione a mano

⚠️ Debug rapido

Se output resta vuoto, hai dimenticato print() — Skulpt non stampa l'ultima espressione come REPL. Aggiungi print. Se vedi testo rosso, copia l'errore e incollalo in verifica sotto per ragionarci.

6. Verifica / Esercizio pratico

🔬 Attività — Lab Python Reti

Usa il simulatore sopra per risolvere, poi confronta output atteso.

Subnet host: scrivi funzione host_utili(prefix) che ritorna 2**(32-prefix)-2. Testa per /24, /26, /28, /30 e stampa.
Parità estesa: scrivi funzione che data lista di byte stringhe (es. ["1010","1100"]) calcola parity bit even per ogni byte e ritorna lista T=D+P. Conta quanti 1 totali in T.
Validatore CIDR: input stringa "192.168.5.0/26" → split IP e prefix → valida IP con funzione vista → calcola mask e host utili. Gestisci errori con print chiaro.

✅ Soluzione ragionata — traccia

1. def host_utili(p): return 2**(32-p)-2 + loop for. 2. Usa bits.count('1') %2 → parity, appendi. Somma popcount di T per verifica pari. 3. ip, pref = s.split('/') ; pref=int(pref) → try/except, poi riusa ip_to_bin e calc_subnet dell'esempio 2. Se invalido, stampa "CIDR non valido". Questo esercizio allena parsing + funzioni pure = base per automazione.

7. Riepilogo e concetti chiave

✓Skulpt = Python in JS: interprete client-side, zero server, output su <pre> via outfFactory, stdlib via builtinRead.

✓Esecuzione asincrona: asyncToPromise(importMainWithBody) + catch per mostrare errori in .python-output.

✓Persistenza locale: chiave sim08_python_2026, init automatico con querySelectorAll('.simulatore').

✓Applicazioni reti: parity, checksum, subnet mask, conversione IP binario, validazione — tutti implementabili senza moduli esotici.

✓Limiti reali: no file system reale, no socket, no input() bloccante, performance < CPython — ma ideale per didattica algoritmica.