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

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

References

autofocusAttiva un elemento al caricamento della pagina.
loopL'attributo loop è usato per la riproduzione continua dei contenuti video e audio
widthImposta la larghezza di un elemento HTML
<h1>Titolo di intestazione di primo livello
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
formenctypeDefinisce il tipo di codifica dei dati di un elemento input

Users

Log in to search for users

Explore

Find inspiration

5/10/24 es. 8 - conta alfabeto

velocità scrittura

Pagina prova html

Nutaku Gold Hack 2024

Primo esercizio

Tabella semplice con bord

Orologio Digitale

calcola tempo di lettura

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