Javascript parte seconda

Introduzione internet from Bruno Migliaretti

Materiali realizzati durante la lezione

orologio.html (completamento dell'esercizio)

<!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);

    function ciascuno(arr, trasforma) {
      for (var i = 0; i < arr.length; i++) {
        arr[i] = trasforma(arr[i]);
      }
    }
  </script>
</body>

</html>

Calcolatrice.html

<!doctype html>

<html>

<head>
  <title>Page Title</title>
  <meta charset="UTF-8">
  <!--	Impostazione dispositivi mobili -->
  <meta name="viewport" content="initial-scale=1.0,width=device-width">
  <link href="css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="container">
    <div class="jumbotron">
      <h1>Calcolatrice</h1>
      <p class="h2">Le quattro operazioni.</p>
    </div>

    <div class="row">
      <div class="form-group col-md-4 col-sm-3">
        <input id="operando1" class="form-control" type="text" placeholder="Inserisci un numero">
      </div>
      <div class="form-group col-md-2 col-sm-3">
        <select id="operatore" class="form-control">
          <option>+</option>
          <option>-</option>
          <option>*</option>
          <option>:</option>
        </select>
      </div>
      <div class="form-group col-md-4 col-sm-3">
        <input id="operando2" class="form-control" type="text" placeholder="Inserisci un numero">
      </div>
      <div class="form-group col-md-2 col-sm-3">
        <button class="btn btn-success btn-block" id="calcola">=</button>
      </div>
    </div>
    <p id="risultato" class="h1">Qui apparirà il risultato</p>
  </div>
  
  <script>
    document.getElementById('calcola').onclick = function () {
      var num1, num2, operatore, res;
      num1 = parseFloat(document.getElementById('operando1').value);
      num2 = parseFloat(document.getElementById('operando2').value);
      operatore = document.getElementById('operatore').value;
      
      if (isNaN(num1)||isNaN(num2)){
        document.getElementById('risultato').innerHTML = "Inserisci un numero !!!";
      } else {
        switch (operatore) {
          case '+':
            res = num1 + num2;
            break;
          case '-':
            res = num1 - num2;
            break;
          case '*':
            res = num1 * num2;
            break;
          case ':':
            res = num1 / num2;
            break;
        }
        document.getElementById('risultato').innerHTML = "Il risultato dell'operazione è: " + res;
      }
    }
  </script>
</body>

</html>

cicli.html

<!doctype html>

<html>
	<head>
		<title>Page Title</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0">
		<link href="css/bootstrap.min.css" rel="stylesheet">
	</head>

	<body>
    <div class="jumbotron">
      <div class="container">
        <h1>Esempi di cicli</h1>
      </div>
    </div>
    <div class="container">
      <button id="cicla" class="btn btn-primary btn-lg"></button>
      <p id="demo" class="h1"></p>
    </div>
    
    <script>
      /*      
      // Ciclo realizzato usando il costrutti while
      document.getElementById('cicla').onclick = function() {
        var i = 0;
        while (i < 10) {
          document.getElementById('demo').innerHTML += "<br>Il valore di i ora è " + i;
          i++;
        }
        document.getElementById('demo').innerHTML += "<br>Ciclo finito";
      }*/
      
      //Stesso ciclo realizzato utilizzando il costrutto for
      
      document.getElementById('cicla').onclick = function () {
        for (var i = 0; i < 10; i++) {
          document.getElementById('demo').innerHTML += "<br>Il valore di i ora è " + i;
        }
        document.getElementById('demo').innerHTML += "<br>Ciclo finito";
      }
      
    </script>
	</body>
</html>

 

Torna all'inizio