Robi: Aggiunta categoria JavaScrpt

2014-11-30T15:58:11Z

Aggiunta categoria JavaScrpt

Robi il 15:56, 30 nov 2014

2014-11-30T15:56:36Z

Robi: Inserito codice base

2014-11-30T15:47:27Z

Inserito codice base

Nuova pagina

File index.html:

<!DOCTYPE html> <html lang="it">     <head>         <meta charset="utf-8">

        <meta name="description" content="">         <meta name="author" content="Roberto Naldi">

        <link rel="shortcut icon" href="1417151246_56297.ico" />         <link rel="stylesheet" type="text/css" href="jsframe01.css" />                  <title>Inizio</title>     </head>

    <body onload="settaggiBase();">         <div>             <header>                 <h1>CoderDojo Firenze</h1>             </header>

            <section id="sezStoria">                 <h1 id="titolo"> </h1>

                 

                <section id="scelte">                         <a href="#scelta1" id="scelta1" onclick="raggiungiLuogo(this);">nbsp;</a>                         <a href="#scelta2" id="scelta2" onclick="raggiungiLuogo(this);">nbsp;</a>                 </section>             </section>                          <section id="sezComandi">                 <h1>Crea la tua storia!</h1>                 <form>                     <fieldset>                         <legend>Usa questi campi per aggiungere nuove situazioni</legend>                         <div>                             <label>Un titolo per questa situazione:</label>                             <input type="text" placeholder="Es. La Sala del Tesoro" id="nuovoTitolo" />                         </div>                         <div>                             <label>Descrivi cosa c’è e cosa succede:</label>                             <textarea cols="60" rows="10" placeholder="Ti trovi in un grande..." id="nuovaDescri"></textarea>                         </div>                         <div class="bordato">                             Se non è il finale, dovrai offrire almeno un’azione da compiere; sarebbero meglio due.                             <div>                                 <label>Descrivi qui la prima scelta:</label>                                 <input type="text" placeholder="Esco dalla porta..." id="nuovaScelta1" />                             </div>                             <div>                                 <label>Scrivi il nome della situazione in cui si andrà a finire:</label>                                 <input type="text" placeholder="es. ScalaRipida" id="nuovoLuogo1" class="corto" />                             </div>                             <hr />                             <div>                                 <label>Descrivi qui la seconda scelta:</label>                                 <input type="text" placeholder="Passo dalla finestra..." id="nuovaScelta2" class="corto" />                             </div>                             <div>                                 <label>Scrivi il nome della situazione in cui si andrà a finire:</label>                                 <input type="text" placeholder="es. Terrazza" id="nuovoLuogo2" class="corto" />                             </div>                         </div>                         <div>                             Attenzione! Il primo nome deve essere “Inizio”!                             <label>Il nome che il pc userà per ritrovare questa situazione:</label>                             <input type="text" placeholder="es. StanzaBlu" id="nuovoNome" class="corto" />                         </div>                         <div>                             <label>Per caricare in memoria clicka qui:</label>                             <input type="button" value="Registra" class="corto" onclick="registraLuogo();" />                         </div>                     </fieldset>                     <div>                         <label>Quando hai finito clicka qui:</label>                         <input type="button" value="Dammi lista" class="corto" onclick="listaDaCopiare();" />                     </div>                 </form>             </section>                          <section id="sezDaCopiare"> </section>

            <footer>                 © Copyright by Coder Dojo Firenze             </footer>         </div>         <script type="text/javascript" src="fm01.js"></script>         <script type="text/javascript" src="settaggi.js"></script>     </body> </html>

File fm01.js

/*--------------------------------------------------------------  *             VARIABILI GLOBALI  -------------------------------------------------------------*/

/*  * Contenitore di tutti i luoghi esistenti  */ var luoghi = {};

/*  * Contenitore per i luoghi che saranno creati  */ var nuoviLuoghi = {};

/*  * Connessioni 'permanenti' ad elementi HTML  * Le seguenti variabili servono per ridurre le chiamate  * a document.getElementById  */ var htmlTitolo = document.getElementById("titolo"); var htmlDescrizione = document.getElementById("descrizione"); var htmlScelta1 = document.getElementById("scelta1"); var htmlScelta2 = document.getElementById("scelta2"); var htmlNuovoNome = document.getElementById("nuovoNome"); var htmlNuovoTitolo = document.getElementById("nuovoTitolo"); var htmlNuovaDescrizione = document.getElementById("nuovaDescri"); var htmlNuovaScelta1Des = document.getElementById("nuovaScelta1"); var htmlNuovaScelta1Nome = document.getElementById("nuovoLuogo1"); var htmlNuovaScelta2Des = document.getElementById("nuovaScelta2"); var htmlNuovaScelta2Nome = document.getElementById("nuovoLuogo2");

// la seguente variabile tiene traccia del luogo dove siamo // in questo momento var gloPosizione;

 /*--------------------------------------------------------------  *     Oggetto base che rappresenta un luogo  *  * Un 'luogo' rappresenta il nucleo della narrazione.  -------------------------------------------------------------*/ // Creo il costruttore di luogo function luogo(nome, titolo, descrizione) {     // Proprieta'     this.luogoNome = nome; // nome sara' usato per identificare il luogo     this.luogoTitolo = titolo;     this.luogoDescrizione = descrizione;     this.alternative = {         vaiA1 : { testo : "testo a schermo", posto : "PrimaScelta"},         vaiA2 : { testo : "testo a schermo", posto : "SecondaScelta"}     }; }

/*--------------------------------------------------------------  * settaggiBase() inizializza gli oggetti  *     -------------------------------------------------------------*/ function settaggiBase() {     elencaLuoghi();     gloPosizione = luoghi["Inizio"];     storiaASchermo(); }

function raggiungiLuogo(partenza) {     var tmpPosizione;          // Il valore di 'partenza' a questo punto è simile a:     // file:///C:/...index.html#scelta1     // A noi ci servono gli ultimi 7 caratteri (scelta1/2)     // Quindi, 7imo carattere prima della fine, una string di 7 caratteri     partenza = partenza.toString();     partenza = partenza.substr(partenza.length - 7, 7);

    switch(partenza) {         case "scelta1":             tmpPosizione = gloPosizione.alternative.vaiA1.posto;             break;         case "scelta2":             tmpPosizione = gloPosizione.alternative.vaiA2.posto;             break;         default:             alert("Errore nel programma!\nFunzione raggiungiLuogo\nIstruzione switch\nPartenza = " + partenza);             return;     }          gloPosizione = luoghi[tmpPosizione];     storiaASchermo(); }

function storiaASchermo () {     htmlTitolo.innerHTML = gloPosizione.luogoTitolo;     htmlDescrizione.innerHTML = gloPosizione.luogoDescrizione;     htmlScelta1.innerHTML = gloPosizione.alternative.vaiA1.testo;     htmlScelta2.innerHTML = gloPosizione.alternative.vaiA2.testo; }

function caricaLuoghi(name, tit, descr, a1_testo, a1_luogo, a2_testo, a2_luogo) {     var tmpLuogo = new luogo;

    tmpLuogo.luogoNome = name;     tmpLuogo.luogoTitolo = tit;     tmpLuogo.luogoDescrizione = descr;     tmpLuogo.alternative.vaiA1.testo = a1_testo;     tmpLuogo.alternative.vaiA1.posto = a1_luogo;     tmpLuogo.alternative.vaiA2.testo = a2_testo;     tmpLuogo.alternative.vaiA2.posto = a2_luogo;          luoghi[tmpLuogo.luogoNome] = tmpLuogo; }

 function registraLuogo() {     var tmpLuogo = new luogo;

    tmpLuogo.luogoNome = htmlNuovoNome.value;     tmpLuogo.luogoTitolo = htmlNuovoTitolo.value;     tmpLuogo.luogoDescrizione = htmlNuovaDescrizione.value;     tmpLuogo.alternative.vaiA1.testo = htmlNuovaScelta1Des.value;     tmpLuogo.alternative.vaiA1.posto = htmlNuovaScelta1Nome.value;     tmpLuogo.alternative.vaiA2.testo = htmlNuovaScelta2Des.value;     tmpLuogo.alternative.vaiA2.posto = htmlNuovaScelta2Nome.value;

    nuoviLuoghi[tmpLuogo.luogoNome] = tmpLuogo;          htmlNuovoNome.value = "";     htmlNuovoTitolo.value = "";     htmlNuovaDescrizione.value = "";     htmlNuovaScelta1Des.value = "";     htmlNuovaScelta1Nome.value = "";     htmlNuovaScelta2Des.value = "";     htmlNuovaScelta2Nome.value = ""; }

 function listaDaCopiare() {     //alert("listaDaCopiare()");     inizioListaDaCopiare();     var rifSezDaCopiare = document.getElementById("sezDaCopiare");

    for(var indice in nuoviLuoghi) {         if (nuoviLuoghi.hasOwnProperty(indice)) {             var elemento = nuoviLuoghi[indice];                          var pNome = document.createElement("p");             var tnNome = document.createTextNode('var nome = "' + elemento.luogoNome + '";');             pNome.appendChild(tnNome);                          var pTitolo = document.createElement("p");             var tnTitolo = document.createTextNode('var titolo = "' + elemento.luogoTitolo + '";');             pTitolo.appendChild(tnTitolo);                          var pDescrizione = document.createElement("p");             var tnDescrizione = document.createTextNode('var descrizione = "' + elemento.luogoDescrizione + '";');             pDescrizione.appendChild(tnDescrizione);                          var pVaiA1_testo = document.createElement("p");             var tnVaiA1_testo = document.createTextNode('var vaiA1_testo = "' + elemento.alternative.vaiA1.testo + '";');             pVaiA1_testo.appendChild(tnVaiA1_testo);                          var pVaiA1_luogo = document.createElement("p");             var tnVaiA1_luogo = document.createTextNode('var vaiA1_luogo = "' + elemento.alternative.vaiA1.posto + '";');             pVaiA1_luogo.appendChild(tnVaiA1_luogo);                          var pVaiA2_testo = document.createElement("p");             var tnVaiA2_testo = document.createTextNode('var vaiA2_testo = "' + elemento.alternative.vaiA2.testo + '";');             pVaiA2_testo.appendChild(tnVaiA2_testo);                          var pVaiA2_luogo = document.createElement("p");             var tnVaiA2_luogo = document.createTextNode('var vaiA2_luogo = "' + elemento.alternative.vaiA2.posto + '";');             pVaiA2_luogo.appendChild(tnVaiA2_luogo);                          var pCaricaLuoghi = document.createElement("p");             var tnCaricaLuoghi = document.createTextNode('caricaLuoghi(nome, titolo, descrizione, vaiA1_testo, vaiA1_luogo, vaiA2_testo, vaiA2_luogo);');             pCaricaLuoghi.appendChild(tnCaricaLuoghi);

            rifSezDaCopiare.appendChild(pNome);             rifSezDaCopiare.appendChild(pTitolo);             rifSezDaCopiare.appendChild(pDescrizione);             rifSezDaCopiare.appendChild(pVaiA1_testo);             rifSezDaCopiare.appendChild(pVaiA1_luogo);             rifSezDaCopiare.appendChild(pVaiA2_testo);             rifSezDaCopiare.appendChild(pVaiA2_luogo);             rifSezDaCopiare.appendChild(pCaricaLuoghi);

        }     }          var pGraffaFinale = document.createElement("p");     var tnGraffaFinale = document.createTextNode("}");     pGraffaFinale.appendChild(tnGraffaFinale);     rifSezDaCopiare.appendChild(pGraffaFinale); }

 function inizioListaDaCopiare () {     // La prima parte della lista deve essere     // function elencaLuoghi() {     var pEleLuoghi = document.createElement("p");     var tnEleLuoghi = document.createTextNode("function elencaLuoghi() {");     pEleLuoghi.appendChild(tnEleLuoghi);

    // a questo punto si può decidere se costringere ad un inizio     // standard oppure no.     // Il primo luogo si deve chiamare "Inizio"     // con la 'I' maiuscola          /*var pNome = document.createElement("p");     var tnNome = document.createTextNode('var nome = "Inizio";');     pNome.appendChild(tnNome);

    var pTitolo = document.createElement("p");     var tnTitolo = document.createTextNode('var titolo = "Il gioco dei bivi";');     pTitolo.appendChild(tnTitolo);

    var pDescrizione = document.createElement("p");     var tnDescrizione = document.createTextNode('var descrizione = "Stai per iniziare un’avventura scritta da qualcuno della tua età!";');     pDescrizione.appendChild(tnDescrizione);

    var pVaiA1_testo = document.createElement("p");     var tnVaiA1_testo = document.createTextNode('var vaiA1_testo = "Inizia";');     pVaiA1_testo.appendChild(tnVaiA1_testo);

    var pVaiA1_luogo = document.createElement("p");     var tnVaiA1_luogo = document.createTextNode('var vaiA1_luogo = "InizioGioco";');     pVaiA1_luogo.appendChild(tnVaiA1_luogo);

    var pVaiA2_testo = document.createElement("p");     var tnVaiA2_testo = document.createTextNode('var vaiA2_testo = "Rinuncia";');     pVaiA2_testo.appendChild(tnVaiA2_testo);

    var pVaiA2_luogo = document.createElement("p");     var tnVaiA2_luogo = document.createTextNode('var vaiA2_luogo = "FineGioco";');     pVaiA2_luogo.appendChild(tnVaiA2_luogo);

    var pCaricaLuoghi = document.createElement("p");     var tnCaricaLuoghi = document.createTextNode('caricaLuoghi(nome, titolo, descrizione, vaiA1_testo, vaiA1_luogo, vaiA2_testo, vaiA2_luogo);');     pCaricaLuoghi.appendChild(tnCaricaLuoghi);*/

    var rifSezDaCopiare = document.getElementById("sezDaCopiare");     rifSezDaCopiare.appendChild(pEleLuoghi);     /*rifSezDaCopiare.appendChild(pNome);     rifSezDaCopiare.appendChild(pTitolo);     rifSezDaCopiare.appendChild(pDescrizione);     rifSezDaCopiare.appendChild(pVaiA1_testo);     rifSezDaCopiare.appendChild(pVaiA1_luogo);     rifSezDaCopiare.appendChild(pVaiA2_testo);     rifSezDaCopiare.appendChild(pVaiA2_luogo);     rifSezDaCopiare.appendChild(pCaricaLuoghi);*/ }

 // Funzione per conoscere le dimensioni di un oggetto JavaScript function dimOggetto(oggetto) {     var contatore = 0;       if (typeof oggetto == "object") {           if (Object.keys) {              contatore = Object.keys(oggetto).length;         } else if (window._) {              contatore = _.keys(oggetto).length;         } else if (window.$) {              contatore = $.map(oggetto, function() { return 1; }).length;         } else {              for (var key in oggetto) if (oggetto.hasOwnProperty(key)) contatore++;         }        }        return contatore; }

File settaggi.js:

function elencaLuoghi() {     var nome = "Inizio";     var titolo = "Il gioco dei bivi";     var descrizione = "Stai per iniziare un’avventura scritta da qualcuno della tua età!";     var vaiA1_testo = "Inizia";     var vaiA1_luogo = "InizioGioco";     var vaiA2_testo = "Rinuncia";     var vaiA2_luogo = "FineGioco";

    caricaLuoghi(nome, titolo, descrizione, vaiA1_testo, vaiA1_luogo, vaiA2_testo, vaiA2_luogo);

    nome = "InizioGioco";     titolo = "Il Castello Maledetto";     descrizione = "Ti trovi fuori da un castello dall’aspetto tetro. Davanti a te c’è un ponte levatoio del tutto allo scoperto. Sotto di te un fossato pieno d'acqua. Cosa fai?";     vaiA1_testo = "Attraverso il ponte levatoio";     vaiA1_luogo = "PuntoMorto";     vaiA2_testo = "Mi tuffo nel fossato";     vaiA2_luogo = "PuntoMorto";

    caricaLuoghi(nome, titolo, descrizione, vaiA1_testo, vaiA1_luogo, vaiA2_testo, vaiA2_luogo);

    nome = "FineGioco";     titolo = "Il Castello Maledetto";     descrizione = "Peccato! Speravo tanto tu ci volessi giocare... Ora cosa farai?";     vaiA1_testo = "Spengo il computer e vado a nanna.";     vaiA1_luogo = "PuntoMorto";     vaiA2_testo = "Imparo qualcos’altro.";     vaiA2_luogo = "PuntoMorto";

    caricaLuoghi(nome, titolo, descrizione, vaiA1_testo, vaiA1_luogo, vaiA2_testo, vaiA2_luogo); }

File jsframe01.css:

body {     background-color: #E6E6E6; }

header {     background-color: teal;     color: yellow;     margin-bottom: 3em; }

header h1 {     margin-left: 0;     text-align: center; }

footer {     background-color: blue;     color: yellow;     margin-top: 2em; }

footer p {     margin-left: 0;     text-align: center; }

fieldset > div {     margin-top: 1em; }

fieldset > div > div {     margin-top: 0.5em; }

hr {     margin: 1em 30%; }

input {     width: 25em; }

input.corto {     width: auto; }

#sezStoria {     border-style: ridge;     margin: auto 20%;     padding: 1em; }

#sezComandi {     border-style: ridge;     margin: auto 20%;     padding: 1em; }

#sezDaCopiare {     margin-top: 2em;     background-color: #FFFFCC; }

#sezDaCopiare p{     margin: 0 auto; }

.centrato {     margin-left: 0;     text-align: center; }

.bordato {     border-style: ridge;     padding: 0.5em; }

.grassetto {     font-weight: bold; }

.grande {     font-size: large; }
[[Category:Javascript|Category:Javascript]]

@@ Riga 376: / Riga 376: @@
 </pre>
 <br/>File settaggi.js
 <pre>function elencaLuoghi() {
 <pre>
 function elencaLuoghi() {
      var nome = "Inizio";
      var titolo = "Il gioco dei bivi";
@@ Riga 411: / Riga 409: @@
 </pre>
+<br/><br/>File jsframe01.css:
 <pre>body {
 <br/>File jsframe01.css:
 <pre>
 body {
     background-color: #E6E6E6;
+}
@@ Riga 502: / Riga 497: @@
 </pre>

Framework per gioco a bivi - Cronologia

Robi: Aggiunta categoria JavaScrpt

Robi il 15:56, 30 nov 2014

Robi: Ricaricato ex novo

Robi: Inserito codice base

@@ Riga 1: / Riga 1: @@
 File index.html:
 <pre><!DOCTYPE html>
 <pre>
 <!DOCTYPE html>
 <html lang="it">
    <head>
@@ Riga 42: / Riga 40: @@
              </div>
              <div>
-               <label>Descrivi cosa c&rsquo;&egrave; e cosa succede:</label>
+               <label>Descrivi cosa c’è e cosa succede:</label>
                <textarea cols="60" rows="10" placeholder="Ti trovi in un grande..." id="nuovaDescri"></textarea>
              </div>
              <div class="bordato">
-               <p>Se non &egrave; il finale, dovrai offrire almeno un&rsquo;azione da compiere; sarebbero meglio due.</p>
+               <p>Se non è il finale, dovrai offrire almeno un’azione da compiere; sarebbero meglio due.</p>
                <div>
                  <label>Descrivi qui la prima scelta:</label>
@@ Riga 66: / Riga 64: @@
              </div>
              <div>
-               <p class="centrato grassetto grande">Attenzione! Il primo nome deve essere &ldquo;Inizio&rdquo;!</p>
+               <p class="centrato grassetto grande">Attenzione! Il primo nome deve essere “Inizio”!</p>
                <label>Il nome che il pc userà per ritrovare questa situazione:</label>
                <input type="text" placeholder="es. StanzaBlu" id="nuovoNome" class="corto" />
@@ Riga 85: / Riga 83: @@
        <footer>
-         <p>&copy; Copyright by Coder Dojo Firenze</p>
+         <p>© Copyright by Coder Dojo Firenze</p>
        </footer>
      </div>
@@ Riga 94: / Riga 92: @@
 </pre>
 File fm01.js
 <pre>/*--------------------------------------------------------------
 <pre>
 /*--------------------------------------------------------------
   *             VARIABILI GLOBALI
   -------------------------------------------------------------*/
@@ Riga 147: / Riga 142: @@
      this.luogoDescrizione = descrizione;
      this.alternative = {
-         vaiA1 : { testo : "testo a schermo", posto : "PrimaScelta"},
+         vaiA1&nbsp;: { testo&nbsp;: "testo a schermo", posto&nbsp;: "PrimaScelta"},
-         vaiA2 : { testo : "testo a schermo", posto : "SecondaScelta"}
+         vaiA2&nbsp;: { testo&nbsp;: "testo a schermo", posto&nbsp;: "SecondaScelta"}
      };
+}
@@ Riga 380: / Riga 375: @@
 </pre>
+<pre>
-File settaggi.js
-−
-−
 <pre
 function elencaLuoghi() {
      var nome = "Inizio";
@@ Riga 421: / Riga 413: @@
-File jsframe01.css:
+<br/>File jsframe01.css:
-−
 <pre>
 body {
     background-color: #E6E6E6;