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

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

References

<em>Formatta il testo in corsivo/italico enfatizzato
<br>Inserisce uno spazio vuoto tra due elementi HTML.
<u> Utilizzato definire una parte del contenuto come annotazione non testuale, con una sottolineatura.
disabledImpedisce la modifica di un input
<embed>Tag per l'incorporamento di contenuti multimediali
multipart/form-dataCodifica dei caratteri di un form

Users

Log in to search for users

Explore

Find inspiration

Alice nel Paese delle Meraviglie

esercitazione4.html

conta caratteri online

Esercizi 01/03/2024 es3

Leggere Lolita a Teheran Azar Nafi

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