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

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

Referenze

targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
<address> Definisce una sezione contenente indirizzi, contatti e informazioni
<select>Usato per creare un menu a tendina.
Inserisce un commento nel codice
<table>Tag primario per la creazione di tabelle
<p>Serve a definire paragrafi di testo

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

FORM iscrizione

esercizio riepilogativo 2

spaghettiamaInglese.html

Array of Colors

Esercitazione 1

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

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