JS Oggetti ed eventi es1 by @AurelianoDC - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

<object>Incorpora risorse varie nella pagina web.
autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
<i>Formatta il testo in corsivo/italico non enfatizzato
_selfApre collegamenti ipertestuali nella stessa pagina del browser
heightDetermina l'altezza di un elemento HTML in pixel
headersDetermina la relazione tra celle e celle di intestazione di una tabella.

Users

Log in to search for users

Explore

Find inspiration

Condizione esercizio 1

Liste e tabelle

Navbar Example 3

Movimento libero JS

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Bootstrap</title>
<!-- Collegamento al foglio di stile Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container">
  <!-- Titolo del form -->
  <h2 class="mt-5">Inserisci un numero:</h2>

  <!-- Form Bootstrap -->
  <form id="myForm">
    <!-- Campo di input per il numero -->
    <div class="mb-3">
      <label for="numero" class="form-label">Numero:</label>
      <input type="number" class="form-control" id="numero" name="numero">
    </div>
    <!-- Pulsante per calcolare il quadrato -->
    <button type="button" class="btn btn-primary" id="calcolaBtn">Calcola il quadrato</button>
  </form>

  <!-- Risultato del calcolo -->
  <p id="risultato" class="mt-3"></p>
</div>

<!-- Collegamento al file JavaScript -->
<script src="script.js"></script>

</body>
</html>

//1. Crea un semplice form HTML con un campo di input e un pulsante. Scrivi un programma

// Funzione per calcolare il quadrato del numero inserito dall'utente
function calcolaQuadrato() {
  // Questo console.log serve per capire se la funzione viene inizializzata
  console.log("Funzione richiamata");
  // Recupera il valore inserito dall'utente
  let numero = document.getElementById("numero").value;

  // Stampiano il tipo della variabile
  console.log("Il valore inserito é di tipo:", typeof (numero));

  // Controlla se il campo di input è vuoto o non è un numero
  if (numero === "" || isNaN(numero)) {
    // Se il campo è vuoto o non è un numero, mostra un messaggio di errore
    alert("Inserisci un numero valido.");
    return;
  }

  //  isNaN() è una funzione che controlla se il valore inserito è un numero
  // La funzione `isNaN()` in JavaScript viene utilizzata per determinare se un valore non è un numero (NaN) o può essere convertito in un numero. Ecco come funziona:
  // 1. Se il valore passato alla funzione `isNaN()` è di tipo diverso da numero, viene restituito `true`. Ad esempio:
  isNaN("Ciao"); // Restituisce true perché "Ciao" non è un numero.
  isNaN(true);   // Restituisce true perché true non è un numero.
  // 2. Se il valore passato è di tipo numero, viene tentata la conversione in un numero. Se la conversione non riesce, viene restituito `true`. Ad esempio:
  isNaN("10");   // Restituisce false perché "10" può essere convertito in 10 (un numero).
  isNaN("10x");  // Restituisce true perché "10x" non può essere convertito in un numero valido.
  //3. Se il valore passato è un numero o una stringa che può essere convertita in un numero, viene restituito `false`. Ad esempio:
  isNaN(10);      // Restituisce false perché 10 è un numero.
  isNaN("10");    // Restituisce false perché "10" può essere convertito in 10 (un numero).
  //In sintesi, `isNaN()` restituisce `true` se il valore passato non è un numero o non può essere convertito in un numero, altrimenti restituisce `false`.

  // Calcola il quadrato del numero
  let quadrato = numero * numero;

  // Mostra il risultato all'utente
  document.getElementById("risultato").innerHTML = "Il quadrato di " + numero + " è " + quadrato + ".";
}

// Aggiunge un gestore di eventi per il clic sul pulsante
document.getElementById("calcolaBtn").addEventListener("click", calcolaQuadrato);