Anteprima
Vedrai una selezione di 4 pagine su 12
Sistemi interattivi Pag. 1 Sistemi interattivi Pag. 2
Anteprima di 4 pagg. su 12.
Scarica il documento per vederlo tutto.
Sistemi interattivi Pag. 6
Anteprima di 4 pagg. su 12.
Scarica il documento per vederlo tutto.
Sistemi interattivi Pag. 11
1 su 12
D/illustrazione/soddisfatti o rimborsati
Disdici quando
vuoi
Acquista con carta
o PayPal
Scarica i documenti
tutte le volte che vuoi
Estratto del documento

CSS e HTML5.1. JavaScript

JavaScript è un linguaggio di scripting che può essere utilizzato per aggiungere interattività dinamica alla pagina HTML, come manipolare elementi HTML, gestire eventi e creare animazioni.

2. Aggiungere eventi agli elementi HTML

Si possono rendere gli elementi interattivi aggiungendo eventi come clic del mouse, hover, pressione dei tasti, etc. La funzione addEventListener di JavaScript cataloga gli eventi e li gestisce con funzioni specifiche.

3. CSS per animazioni e transizioni

Le proprietà CSS come transition e animation possono aggiungere effetti di animazione agli elementi HTML.

4. HTML5

HTML5 introduce nuovi elementi e attributi che consentono di aggiungere interattività alla pagina. Ad esempio, l'elemento <canvas> permette di disegnare una grafica interattiva, mentre l'elemento <video> di riprodurre un video. O ancora, l'attributo contenteditable rende un elemento HTML modificabile.

5.

la definizione degli stili CSS dal documento HTML, rendendo il codice più organizzato e manutenibile. Il tag Link ha l'attributo "href" che specifica il percorso del file CSS da collegare. Il tag "Script" viene utilizzato per collegare un file JavaScript esterno a una pagina HTML. Questo permette di aggiungere funzionalità dinamiche e interattive alla pagina. Il tag Script ha l'attributo "src" che specifica il percorso del file JavaScript da collegare. Ecco un esempio di come utilizzare i tag Style, Link e Script: ```html Esempio di utilizzo dei tag Style, Link e Script

Questo paragrafo avrà il testo di colore rosso.

``` Nell'esempio sopra, il tag Style viene utilizzato per definire la regola CSS che rende il testo dei paragrafi di colore rosso. Il tag Link viene utilizzato per collegare un file CSS esterno chiamato "style.css". Il tag Script viene utilizzato per collegare un file JavaScript esterno chiamato "script.js".Il codice CSS dalla struttura HTML, rendendo il codice più organizzato ed efficiente. Il tag Link include un attributo "href" che specifica il percorso del file CSS. Ad esempio, <link rel="stylesheet" href="style.css"> collega la pagina HTML al file "style.css" che contiene i relativi stili CSS.

Il tag "Script" viene utilizzato per includere script JavaScript all'interno di una pagina HTML. Gli script JavaScript sono utilizzati per aggiungere funzionalità dinamiche o interattive alle pagine web. Il tag Script può essere posizionato all'interno dell'elemento "head" o dell'elemento "body" di un documento HTML. Ad esempio, <script src="script.js"></script> collega la pagina HTML al file "script.js" che contiene il codice JavaScript da eseguire.

Quali metodi conosci per definire una interazione tra CSS e una pagina HTML? Ci sono diversi modi per...

definire l'interazione tra CSS e una pagina HTML. Quelli più comuni sono: 1. Utilizzo di classi e ID. Definendo classi e ID nel file HTML e utilizzandoli nel CSS è possibile applicare stili specifici a elementi HTML specifici. Ad esempio, si può aggiungere una classe "titolo" a un elemento HTML e poi definire uno stile per quella classe nel file CSS. 2. Selettori di elemento. Si possono utilizzare i selettori di elemento nel file CSS per definire uno stile per tutti gli elementi HTML di un certo tipo. Ad esempio, il selettore h1 andrà a definire uno stile per tutti gli elementi h1 nella pagina. 3. Selettori di padre/figlio. Nel file CSS definiscono uno stile per un elemento figlio all'interno di un elemento padre specifico. Ad esempio, il selettore div h1 definisce uno stile per tutti gli elementi h1 che si trovano all'interno di un elemento div. 4. Selettori di attributo. Nel file CSS definiscono uno stile per elementi HTML che hanno un determinato attributo. Ad esempio, il selettore [type="text"] definisce uno stile per tutti gli elementi input di tipo "text". Questi sono solo alcuni esempi di come CSS e HTML possono interagire per definire lo stile di una pagina web.utilizzato per aggiungere un ascoltatore di eventi a un elemento HTML. Questo metodo consente di specificare quale evento si desidera ascoltare (come un clic del mouse, un passaggio del mouse, una pressione del tasto, ecc.) e quale azione eseguire quando l'evento si verifica. Esempio di utilizzo del metodo `addeventlistener`: ```html ``` In questo esempio, quando l'utente fa clic sul pulsante con id "myButton", viene visualizzato un messaggio di avviso con il testo "Hai cliccato il pulsante!".utilizzato per aggiungere un "listener" ad un elemento HTML, vale a dire una funzione che viene eseguita quando si verifica un determinato evento su quell'elemento. Per esempio, se si desidera eseguire una funzione quando viene fatto clic su un elemento HTML, si può utilizzare `addEventListener` per aggiungere un listener di clic all'elemento. Il codice ne uscirebbe così: ```html ``` In questo esempio, `addEventListener` viene utilizzato per aggiungere un listener di clic al pulsante con l'id `myButton`. Quando il pulsante viene cliccato, la funzione `handleClick` verrà eseguita e la console mostrerà il messaggio "Il pulsante è stato cliccato!".Per far interagire un listato JavaScript con una pagina HTML esistono diversi passaggi: 1. Collegare il file JavaScript alla pagina HTML. Utilizzando il tag ` ``` 2. Creare una funzione o un evento nel file JavaScript. Definendo una funzione nel file JavaScript verrà chiamata in risposta a un evento o in modo asincrono. Ad esempio: ```javascript function saluta() { alert("Ciao!"); } function calcolaSomma() { var numero1 = 5; var numero2 = 10; var somma = numero1 + numero2; console.log("La somma è " + somma); } ``` 3. Collegare l'evento o richiamare la funzione nella pagina HTML. Utilizzando specifici eventi HTML come `onclick`, `onload`, `onsubmit` è possibile chiamare una funzione JavaScript.

Utilizzare i selettori per interagire con gli elementi HTML. Selettori JavaScript come ad esempio getElementById, getElementsByClassName, getElementsByTagName selezionano gli elementi HTML presenti nella pagina e ne manipolano il contenuto o gli attributi.

In JavaScript si può definire una funzione logica usando l'espressione function e l'istruzione if per gestire le condizioni. Esistono anche altre istruzioni come else if.

Formattazione del testo

ed else per gestire scenari alternativi. Un esempio è:


<!DOCTYPE javascript>
function checkCondition(condition) {
  if (condition) {
    // Cose da fare se la condizione è vera
    console.log("La condizione è vera");
  } else {
    // Cose da fare se la condizione è falsa
    console.log("La condizione è falsa");
  }
}

Nell'esempio sopra, checkCondition è il nome della funzione logica. Prende un argomento condition che rappresenta la condizione che si desidera verificare. Se la condizione è vera, viene eseguita la prima porzione di codice all'interno del blocco if. Altrimenti, viene eseguita la seconda porzione di codice all'interno del blocco else.

Si può utilizzare la stessa funzione anche passando una condizione come argomento:


<!DOCTYPE javascript>
checkCondition(true); // Output: La condizione è vera
checkCondition(false); // Output: La condizione è falsa

In questo caso, la funzione checkCondition viene

richiamata due volte con due diverse condizioni. A seconda della condizione passata, verrà eseguito il blocco di codice corrispondente. Cosa significa in JavaScript "getElementById" In JavaScript, getElementById è un metodo utilizzato per accedere a un elemento del documento tramite il suo ID univoco. Questo metodo restituisce l'elemento HTML corrispondente all'ID specificato. Ad esempio, se il documento HTML ha un elemento con l'ID "myElement", vi si può accedere utilizzando la seguente stringa di codice: ```javascript var element = document.getElementById("myElement"); ``` In questo caso, `element` conterrà l'oggetto dell'elemento HTML corrispondente all'ID "myElement" nel documento. Qual è la differenza tra '=', '==' e '===' in JavaScript In JavaScript, la differenza tra '=', '==' e '===' riguarda il confronto di valori e tipi di dati. - '=' è l'operatore di assegnazione e viene utilizzato per assegnare un valore a una variabile. Ad esempio: `var x = 5;` assegna il valore 5 alla variabile x. - '==' è l'operatore di confronto per l'uguaglianza e confronta solo i valori delle due variabili, senza considerare il tipo di dati. Ad esempio: `5 == "5"` restituisce true perché i due valori sono uguali. - '===' è l'operatore di confronto per l'uguaglianza stretta e confronta sia i valori che i tipi di dati delle due variabili. Ad esempio: `5 === "5"` restituisce false perché i due valori sono uguali ma i tipi di dati sono diversi. In generale, è consigliabile utilizzare '===' per evitare errori di tipo e garantire un confronto accurato tra valori e tipi di dati.

dati.'=' è l'operatore di assegnazione, e viene utilizzato per assegnare un valore a una variabile. Ad esempio, var x = 5; assegna il valore 5 alla variabile x;

'==' è l'operatore di confronto per l'uguaglianza. Verifica se due valori sono uguali, utilizzando l'incrocio dei tipi di dati. Ad esempio, 5 == '5' restituirà true, poiché entrambi i valori sono considerati uguali dopo l'incrocio dei dati;

'===' è l'operatore di confronto per l'uguaglianza stretta. Verifica se due valori sono uguali considerando sia il valore che il tipo di dato. Ad esempio, 5 === '5' restituirà false, poiché i tipi di dati sono diversi (numero e stringa).

Quindi, mentre '==' esegue l'incrocio dei tipi di dati per fare il confronto, '===' richiede che i valori siano uguali e che i tipi di dati siano gli stessi per considerarli uguali.

Dettagli
Publisher
A.A. 2022-2023
12 pagine
SSD Ingegneria industriale e dell'informazione ING-INF/05 Sistemi di elaborazione delle informazioni

I contenuti di questa pagina costituiscono rielaborazioni personali del Publisher Asayuna di informazioni apprese con la frequenza delle lezioni di Sistemi interattivi e studio autonomo di eventuali libri di riferimento in preparazione dell'esame finale o della tesi. Non devono intendersi come materiale ufficiale dell'università Nuova Accademia di Belle Arti - NABA o del prof Leone Davide.