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

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

References

formmethodDefinisce il metodo di invio dei dati oltre a method
widthImposta la larghezza di un elemento HTML
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
<select>Usato per creare un menu a tendina.
_parentApre collegamenti ipertestuali nell'elemento genitore
listCollega un elemento input con una lista di opzioni datalist

Users

Log in to search for users

Explore

Find inspiration

esercitazione 1

Esercitazione n.1

Progetti scolastici.html

Review of Functions I

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