Da WIKI CoderDojo Firenze.
Riga 2: | Riga 2: | ||
E' utile articolare in passi l'esercizio fornendo il seguente codice html: | E' utile articolare in passi l'esercizio fornendo il seguente codice html: | ||
− | < | + | <div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><span style="font-family:courier new,courier,monospace;"><html><br/> <head><br/> <title>Gioco dei bivi col JavaScript</title><br/> </head><br/> <body><br/> <h1>Gioco dei bivi col JavaScript</h1><br/> <div id="inizio"><br/> <h2>Davanti al ponte levatoio</h2><br/> <p>Ti trovi davanti a un castello che si dice contenga un prezioso tesoro.</p><br/> <p>Sembra un luogo molto pericoloso, ma il ponte levatoio è abbassato. Potrebbe essere una trappola?</p><br/> <p>Cosa preferisci, entrare dalla porta principale o attraversare il fossato a nuoto?</p><br/> <input type="button" value="mi getto nel fossato pieno d'acqua"/><br/> <input type="button" value="entro dalla porta principale" /><br/> </div> <br/> <div id="fossato"><br/> <h2>Il fossato intorno al Castello</h2><br/> <p>Ehm...</p><br/> <p>C’erano i coccodrilli...</p><br/> <p>Che brutta fine! Mi dispiace.</p><br/> <input type="button" value="ricomincia" /><br/> </div> <br/> <div id="salone"><br/> <h2>Il Salone del Castello</h2><br/> <p>Sei entrato nel castello.</p><br/> <p>C’è un grande salone, arredato con fasto. Saccheggi completamente il castello e diventi ricco!</p><br/> <p>Complimenti......</p><br/> <input type="button" name="ricomincia" value="ricomincia" /><br/> </div> <br/> </body><br/></html></span></div> |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | </html></ | + | |
Questo codice, se visualizzato nel browser, mostra i tre ambienti di gioco uno di seguito all'altro. | Questo codice, se visualizzato nel browser, mostra i tre ambienti di gioco uno di seguito all'altro. | ||
Il passo successivo utilizza lo stile <span style="font-family:courier new,courier,monospace;">display:none</span> per nascondere i tre <div> degli ambienti di gioco, il codice diventa: | Il passo successivo utilizza lo stile <span style="font-family:courier new,courier,monospace;">display:none</span> per nascondere i tre <div> degli ambienti di gioco, il codice diventa: | ||
− | <div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><span style="font-family:courier new,courier,monospace;"><html><br/> <head><br/> <title>Gioco dei bivi col JavaScript</title><br/> </head><br/> <body><br/> <h1>Gioco dei bivi col JavaScript</h1><br/> | + | <div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><span style="font-family:courier new,courier,monospace;"><html><br/> <head><br/> <title>Gioco dei bivi col JavaScript</title><br/> </head><br/> <body><br/> <h1>Gioco dei bivi col JavaScript</h1><br/> <div id="inizio" <span style="background-color:#FFFF00;">style="display:none"</span>><br/> <h2>Davanti al ponte levatoio</h2><br/> <p>Ti trovi davanti a un castello che si dice contenga un prezioso tesoro.</p><br/> <p>Sembra un luogo molto pericoloso, ma il ponte levatoio è abbassato. Potrebbe essere una trappola?</p><br/> <p>Cosa preferisci, entrare dalla porta principale o attraversare il fossato a nuoto?</p><br/> <input type="button" value="mi getto nel fossato pieno d'acqua"/><br/> <input type="button" value="entro dalla porta principale" /><br/> </div> <br/> <div id="fossato" <span style="background-color:#FFFF00;">style="display:none"</span>><br/> <h2>Il fossato intorno al Castello</h2><br/> <p>Ehm...</p><br/> <p>C’erano i coccodrilli...</p><br/> <p>Che brutta fine! Mi dispiace.</p><br/> <input type="button" value="ricomincia" /><br/> </div> <br/> <div id="salone" <span style="background-color:#FFFF00;">style="display:none"</span>><br/> <h2>Il Salone del Castello</h2><br/> <p>Sei entrato nel castello.</p><br/> <p>C’è un grande salone, arredato con fasto. Saccheggi completamente il castello e diventi ricco!</p><br/> <p>Complimenti......</p><br/> <input type="button" name="ricomincia" value="ricomincia" /><br/> </div> <br/> </body><br/></html></span></div> |
Versione delle 17:45, 29 ago 2014
Il gioco a bivi descritto nella sezione html rivisto con il Javascript. In pratica non si usano link a pagine diverse per passare da stanza a stanza, bensì si carica una pagina che contiene sia la parte grafica html che la parte di logica in javascript.
E' utile articolare in passi l'esercizio fornendo il seguente codice html:
<html>
<head>
<title>Gioco dei bivi col JavaScript</title>
</head>
<body>
<h1>Gioco dei bivi col JavaScript</h1>
<div id="inizio">
<h2>Davanti al ponte levatoio</h2>
<p>Ti trovi davanti a un castello che si dice contenga un prezioso tesoro.</p>
<p>Sembra un luogo molto pericoloso, ma il ponte levatoio è abbassato. Potrebbe essere una trappola?</p>
<p>Cosa preferisci, entrare dalla porta principale o attraversare il fossato a nuoto?</p>
<input type="button" value="mi getto nel fossato pieno d'acqua"/>
<input type="button" value="entro dalla porta principale" />
</div>
<div id="fossato">
<h2>Il fossato intorno al Castello</h2>
<p>Ehm...</p>
<p>C’erano i coccodrilli...</p>
<p>Che brutta fine! Mi dispiace.</p>
<input type="button" value="ricomincia" />
</div>
<div id="salone">
<h2>Il Salone del Castello</h2>
<p>Sei entrato nel castello.</p>
<p>C’è un grande salone, arredato con fasto. Saccheggi completamente il castello e diventi ricco!</p>
<p>Complimenti......</p>
<input type="button" name="ricomincia" value="ricomincia" />
</div>
</body>
</html>
<head>
<title>Gioco dei bivi col JavaScript</title>
</head>
<body>
<h1>Gioco dei bivi col JavaScript</h1>
<div id="inizio">
<h2>Davanti al ponte levatoio</h2>
<p>Ti trovi davanti a un castello che si dice contenga un prezioso tesoro.</p>
<p>Sembra un luogo molto pericoloso, ma il ponte levatoio è abbassato. Potrebbe essere una trappola?</p>
<p>Cosa preferisci, entrare dalla porta principale o attraversare il fossato a nuoto?</p>
<input type="button" value="mi getto nel fossato pieno d'acqua"/>
<input type="button" value="entro dalla porta principale" />
</div>
<div id="fossato">
<h2>Il fossato intorno al Castello</h2>
<p>Ehm...</p>
<p>C’erano i coccodrilli...</p>
<p>Che brutta fine! Mi dispiace.</p>
<input type="button" value="ricomincia" />
</div>
<div id="salone">
<h2>Il Salone del Castello</h2>
<p>Sei entrato nel castello.</p>
<p>C’è un grande salone, arredato con fasto. Saccheggi completamente il castello e diventi ricco!</p>
<p>Complimenti......</p>
<input type="button" name="ricomincia" value="ricomincia" />
</div>
</body>
</html>
Questo codice, se visualizzato nel browser, mostra i tre ambienti di gioco uno di seguito all'altro.
Il passo successivo utilizza lo stile display:none per nascondere i tre <div> degli ambienti di gioco, il codice diventa:
<html>
<head>
<title>Gioco dei bivi col JavaScript</title>
</head>
<body>
<h1>Gioco dei bivi col JavaScript</h1>
<div id="inizio" style="display:none">
<h2>Davanti al ponte levatoio</h2>
<p>Ti trovi davanti a un castello che si dice contenga un prezioso tesoro.</p>
<p>Sembra un luogo molto pericoloso, ma il ponte levatoio è abbassato. Potrebbe essere una trappola?</p>
<p>Cosa preferisci, entrare dalla porta principale o attraversare il fossato a nuoto?</p>
<input type="button" value="mi getto nel fossato pieno d'acqua"/>
<input type="button" value="entro dalla porta principale" />
</div>
<div id="fossato" style="display:none">
<h2>Il fossato intorno al Castello</h2>
<p>Ehm...</p>
<p>C’erano i coccodrilli...</p>
<p>Che brutta fine! Mi dispiace.</p>
<input type="button" value="ricomincia" />
</div>
<div id="salone" style="display:none">
<h2>Il Salone del Castello</h2>
<p>Sei entrato nel castello.</p>
<p>C’è un grande salone, arredato con fasto. Saccheggi completamente il castello e diventi ricco!</p>
<p>Complimenti......</p>
<input type="button" name="ricomincia" value="ricomincia" />
</div>
</body>
</html>
<head>
<title>Gioco dei bivi col JavaScript</title>
</head>
<body>
<h1>Gioco dei bivi col JavaScript</h1>
<div id="inizio" style="display:none">
<h2>Davanti al ponte levatoio</h2>
<p>Ti trovi davanti a un castello che si dice contenga un prezioso tesoro.</p>
<p>Sembra un luogo molto pericoloso, ma il ponte levatoio è abbassato. Potrebbe essere una trappola?</p>
<p>Cosa preferisci, entrare dalla porta principale o attraversare il fossato a nuoto?</p>
<input type="button" value="mi getto nel fossato pieno d'acqua"/>
<input type="button" value="entro dalla porta principale" />
</div>
<div id="fossato" style="display:none">
<h2>Il fossato intorno al Castello</h2>
<p>Ehm...</p>
<p>C’erano i coccodrilli...</p>
<p>Che brutta fine! Mi dispiace.</p>
<input type="button" value="ricomincia" />
</div>
<div id="salone" style="display:none">
<h2>Il Salone del Castello</h2>
<p>Sei entrato nel castello.</p>
<p>C’è un grande salone, arredato con fasto. Saccheggi completamente il castello e diventi ricco!</p>
<p>Complimenti......</p>
<input type="button" name="ricomincia" value="ricomincia" />
</div>
</body>
</html>