Javascript parte prima

Introduzione internet from Bruno Migliaretti

Materiali prodotti durante la lezione

esempio1.html

<!doctype html>
<!--
  Modifica del contenuto HTML di un elemento della pagina
  web al click di un bottone
-->
<html>

<head>
  <title>Primo esercizio</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script>
    alert('Prima del caricamento');
  </script>
</head>

<body>
  <p id="demo">La data di oggi è: </p>
  <button id="bottone" onclick="document.getElementById('demo').innerHTML+=Date()">Cliccami e vedrai la data</button>
  <script>
    "use strict";
    var messaggio = 'Dopo il caricamento';
    alert(messaggio);
  </script>
</body>

</html>

esempio2.html

<!doctype html>
<!--
  Utilizzo dei metodi dell'oggetto String
-->
<html>

<head>
  <title>Page Title</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1.0">
</head>

<body>
  <h1>Elaborazione stringhe</h1>
  <p id="demo"></p>
  <script>
    var str = "Rosso, giallo, blu, verde";
    var messaggio = "";
    messaggio += "Stringa originale: " + str + "<br>";
    messaggio += "In maiuscolo: " + str.toUpperCase() + "<br>";
    messaggio += "La substring giallo è alla posizione " + str.indexOf("giallo") + "<br>";
    messaggio += "La substringa alla posizione 7 è: " + str.substr(7, 6) + "<br>";
    messaggio += "La substringa da 7 a 13 è: " + str.substring(7, 13) + "<br>";
    messaggio += "La stringa trasformata in array: " + str.split(',');
    document.getElementById('demo').innerHTML = messaggio;
  </script>
</body>

</html>

Array.html

<!doctype html>
<!--
  Aggiungi e togli elementi ad un array utilizzando Array.push() e Array.pop()
-->
<html>

<head>
  <title>Page Title</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1.0">
</head>

<body>

  <h1>Aggiungo elementi a un array</h1>
  <input type="text" id="demo" placeholder="Inserisci un testo" />
  <button id="inserisci">Memorizza</button>
  <button id="togli">Elimina ultimo inserito</button>
  <p id="messaggio"></p>

  <script>
    var mioArray = [];
    document.getElementById('inserisci').onclick = function() {
      var testo = document.getElementById('demo').value;
      var num = mioArray.push(testo);
      var str = "";
      str = "Adesso il mio array è : " + mioArray + "<br>" + "L'array contiene " + num + " elementi.";
      document.getElementById('messaggio').innerHTML = str;
    };
    document.getElementById('togli').onclick = function() {
      var elemento = mioArray.pop();
      document.getElementById('messaggio').innerHTML = "Adesso il mio array è: " +
        mioArray + "<br>" + "È stato tolto l'elemento " + elemento;
    }
  </script>
</body>

</html>

timer.html

<!doctype html>
<!--
  Uso di Date.now() per calcolare il tempo trascorso 
  tra due eventi
-->
<html>

<head>
  <title>Page Title</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1.0">
</head>

<body>
  <button id="start">Start</button>
  <button id="stop">Stop</button>
  <p id="messaggio"></p>
  <script>
    var timeStart;
    document.getElementById('start').onclick = function() {
      timeStart = Date.now();
    }
    document.getElementById('stop').onclick = function() {
      var tempoTrascorso = Date.now() - timeStart;
      document.getElementById('messaggio').innerHTML = "Sono trascorsi " + tempoTrascorso +
        " millisecondi";
    }
  </script>
</body>

</html>

orologio.html

<!doctype html>

<html>

<head>
  <title>Page Title</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1.0">
</head>

<body>
  <h1>
      <span id="giorno"></span> <span id="data"></span> <span id="mese"></span> <span id="anno"></span> <span id="ore"></span>:<span id="minuti"></span>:<span id="secondi"></span>
    </h1>
  <script>
    var giorni = ["Domenica", "Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato"];
    var mesi = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio",
      "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"];


    function aggiornaOrologio() {
      var adesso = new Date();
      var ora = adesso.getHours();
      var min = adesso.getMinutes();
      var sec = adesso.getSeconds();
      document.getElementById('giorno').innerHTML = giorni[adesso.getDay()];
      document.getElementById('data').innerHTML = adesso.getDate();
      document.getElementById('mese').innerHTML = mesi[adesso.getMonth()];
      document.getElementById('anno').innerHTML = adesso.getFullYear();
      document.getElementById('ore').innerHTML = ora < 10 ? "0" + ora : ora;
      document.getElementById('minuti').innerHTML = min < 10 ? "0" + min : min;
      document.getElementById('secondi').innerHTML = sec < 10 ? "0" + sec : sec;
    }
    aggiornaOrologio();
    
    setInterval(aggiornaOrologio, 1000);

  </script>
</body>

</html>

 

Torna all'inizio