Video-Tutorial: Imparare JavaScript e jQuery

Benvenuti al corso avanzato di JavaScript e jQuery.

In questo video viene spiegato cos'è JavaScript e cosa ci offre.

In questo video imparerai quale editor useremo e lo installeremo insieme.

In questo video viene mostrato come utilizzare i clic con JavaScript e come funzionano le variabili.

L'istruzione If. If (tradotto: se) è ampiamente utilizzato durante la programmazione. Per esempio, quando si desidera eseguire qualcosa solo se una determinata condizione è soddisfatta.

In questo video si tratta di array in JavaScript. Ci permettono di memorizzare più informazioni all'interno di una variabile.

In questo video imparerai a conoscere i cicli For-Loops. Questi ci permettono di eseguire un determinato codice più volte di seguito.

Le funzioni sono una sorta di miniprogramma che possiamo utilizzare di nuovo in qualsiasi momento dopo averlo creato. Ad esempio, quando premi il pulsante Home sul tuo telefono, viene chiamata una funzione che ti riporta alla schermata Home. Le funzioni rendono il lavoro molto più semplice.

Qui sarà mostrato il risultato della sfida (in particolare un quiz) e allo stesso tempo sarà creato il fondamento in HTML.

Qui viene programmato il CSS (l'aspetto) del quiz.

Qui viene programmato e spiegato il JavaScript del nostro quiz.

Hai già visto come funzionano le funzioni con un parametro. Ora vediamo le funzioni con più parametri. Più parametri sono utilizzati quando si vuole utilizzare una funzione con diverse variabili. In matematica, ad esempio, nell'addizione di più valori.

Ci sono variabili globali e variabili locali. In breve: le variabili globali sono quelle che vengono create al di fuori delle funzioni, e le variabili locali sono quelle create all'interno delle funzioni. Qui esamineremo più da vicino come funziona questo.

In linguaggi di programmazione c'è la possibilità di definire le funzioni in modo che restituiscano un valore. Finora abbiamo avuto solo funzioni che eseguivano determinate azioni, ma non restituivano alcun valore con cui poter proseguire. Perciò ora esamineremo RETURN.

In questo articolo parleremo degli operatori matematici e degli operatori di assegnazione. Gli operatori matematici comprendono cose piuttosto semplici come l'addizione, la sottrazione, ecc., mentre gli operatori di assegnazione offrono la possibilità di eseguire facilmente operazioni semplici come ad esempio un aumento di 5. Poiché entrambi sono importanti nella programmazione, verranno trattati entrambi in questo articolo.

Ci sono tre (o quattro) diverse tipi di cicli nella programmazione: il ciclo Do-while, il ciclo While e il ciclo For. Abbiamo già imparato il ciclo For. Adesso ci occuperemo del ciclo Do-while (gestito dal piede) e del ciclo While (gestito dalla testa).

In questo articolo si parla di un'alternativa alle condizioni If. Si tratta di Switch (interruttore) e Case (caso). Quindi si ha praticamente un interruttore che passa attraverso i diversi casi e rimane su quello attivo.

Abbiamo già trattato gli array, ma non siamo entrati nei dettagli. C'è molto altro da sapere sugli array. La proprietà più importante di un array JavaScript è il numero degli elementi (length). L'array ha però altre proprietà come ad esempio index, che ci fornisce informazioni sulla posizione 0 dell'array.

Gli oggetti sono un concetto estremamente importante e interessante in molti linguaggi di programmazione. In linea di principio, si può descrivere qualsiasi cosa come una sorta di oggetto. Prendiamo ad esempio un oggetto che vediamo spesso per strada: un'auto. Un'auto ha determinate proprietà/caratteristiche e può eseguire certe azioni.

Diamo un'occhiata a come possiamo creare oggetti in JavaScript. Per fare ciò, creiamo una funzione costruttrice e due istanze del nostro oggetto nel tag head. All'interno della funzione costruttrice, che ha lo stesso nome del nostro oggetto, diciamo al programma che i parametri passati alla funzione costruttrice durante la creazione di un'istanza dell'oggetto devono essere proprio i valori dell'oggetto.

Come base per le funzioni degli oggetti, iniziamo con il codice dell'ultimo tutorial, in cui abbiamo creato variabili che vengono generate in ogni istanza del nostro oggetto.

In questo tutorial imparerai a conoscere l'oggetto Math. Si tratta di un oggetto basato sulla classe Math e dotato di un sacco di proprietà e funzioni fantastiche.

In questo video si parla dell'oggetto Date o della classe Date. Si tratta di oggetti che è possibile utilizzare per integrare il tempo in un programma. Non si intende necessariamente l'orario o la data, ma può anche trattarsi di un intervallo di tempo. Un oggetto Date contiene il tempo trascorso dall'istante 1970-01-01 00:00:00. Ci sono diverse modalità per passare parametri al costruttore di Date.

In questo video imparerai come costruire un orologio interattivo con JavaScript.

In questo video si parla dell'ereditarietà e del polimorfismo. Due concetti della programmazione orientata agli oggetti.

In questo articolo affrontiamo la domanda: Cos'è jQuery? jQuery è una libreria JavaScript che ci consente di rendere i siti web ancora più interessanti.

Qui impari come gestire clic ancora più facilmente con jQuery.

In questo tutorial imparerai come modificare l'aspetto di un sito web con jQuery. Per fare ciò, possiamo facilmente sovrascrivere ad esempio un attributo di un campo. In questo esempio possiamo modificare il link dell'iframe (quindi il src/source) passando sopra il quadrato. Si potrebbe modificare il codice senza problemi e ad esempio ingrandire il quadrato sovrascrivendo l'attributo di altezza e larghezza quando ci si passa sopra. In generale, ora possiamo utilizzare questa procedura per cambiare facilmente l'aspetto del sito web.

Una delle fantastiche funzionalità di jQuery è far sbiadire un elemento. In questo esempio facciamo svanire un pulsante non appena clicchiamo su un altro pulsante. Utilizziamo la funzione FadeOut ("funzione di svanimento"). Per far riapparire l'elemento dopo, utilizziamo la funzione FadeIn.

In questo video ci occupiamo dell'animazione in jQuery. Si tratta di qualcosa che si muove. Quindi ci assicuriamo che un elemento sul nostro sito web si muova/cambi. Per fare questo, c'è una funzione in jQuery. Si chiama animate() e si aspetta tre parametri.

Guardiamo cosa è jQuery UI.

L'accordion è un widget che ci permette, come in un fisarmonica, di vedere solo alcune parti del tutto. Questo è particolarmente utile quando si vuole trasmettere molte informazioni che, come un grande testo, sarebbero troppo disordinate.

In questo tutorial si tratta di Sortables in jQuery UI. Si tratta di elementi ordinabili. Conosci questo, se utilizzi siti web di produttività come Wunderlist o Trello. La possibilità di rendere gli elementi ordinabili è una funzionalità estremamente cool, che puoi utilizzare in molte diverse applicazioni.

A volte può capitare che si voglia rendere modificabile la dimensione di un elemento da parte dell'utente. In questi casi, i Resizables sono esattamente ciò che serve. Questi consentono proprio questo. Si nota in basso a destra dell'elemento un piccolo triangolo che si può cliccare e poi, tenendo premuto il cursore del mouse, è possibile ingrandirlo o rimpicciolirlo.

In jQuery UI è molto semplice costruire un elemento che può essere trascinato avanti e indietro utilizzando i Draggaables. Vediamo come fare qui.

Le barre di avanzamento o le barre di progresso sono un ottimo strumento per comunicare all'utente quanto è avanzato in un determinato processo. Ad esempio, nel processo di acquisto su un negozio online o in un sondaggio, aiuta l'utente a sapere quanto è avanzato nell'esecuzione dei passaggi.

In questo tutorial vorrei parlare brevemente degli effetti in jQuery UI. Infatti, ci sono effetti abbastanza cool che ti permettono di migliorare ulteriormente l'aspetto del tuo sito web e anche di stupire completamente i tuoi utenti.

In questo video puoi vedere il risultato della sfida. Una pagina delle domande frequenti.

Qui implementiamo la pagina delle domande frequenti.

In questo video viene presentato il gioco del cervello, che verrà programmato in questo capitolo.

Prima ci occupiamo della struttura e dell'aspetto del gioco.

Ora ci occuperemo di alcune delle funzionalità del gioco.

Il giocatore può già eseguire le prime azioni nel gioco, ora ci stiamo concentrando sul fatto che il gioco può essere riavviato e terminato correttamente.

Ora si tratta solo di incorporare il timer nel gioco per calcolare correttamente il punteggio e per limitare temporalmente il gioco. Inoltre, eseguiremo ancora alcuni passaggi minori per completare il gioco.

Qui viene presentata l'app del capitolo. Si tratta di un'app/sito web per liste di cose da fare.

Ora creiamo le basi e vediamo come possiamo creare e modificare il tema corrispondente con jQuery Mobile.

Poiché seguiamo un approccio OOP, dobbiamo creare l'architettura corrispondente. Per questo ci occupiamo qui.

In questo video aggiungiamo le pagine e ci occupiamo della pagina in cui creiamo i compiti.

Similmente alla pagina di creazione, anche la pagina di modifica deve essere compilata e deve ottenere la funzionalità corrispondente.

Ora possiamo occuparci nuovamente dell'architettura e creare la struttura dei dati.

Dato che ora abbiamo la nostra struttura dati, possiamo chiamarla abbastanza facilmente nel nostro UI in modo appropriato.

Nel programmare sono stati necessari alcuni passaggi nel "flusso di spiegazione" che ora possiamo sistemare. Inoltre, ci occuperemo del salvataggio permanente dei dati e completeremo l'app.