Stai pensando di cambiare carriera?
Lo sviluppo web è l'abilità del 21° secolo!
Sii parte della rivoluzione digitale. HTML, CSS e Javascript sono gli elementi costitutivi del tuo futuro nella tecnologia informatica.
JavaScript è un linguaggio di programmazione che aggiunge interattività al tuo sito web (ad esempio: giochi, risposte quando vengono premuti i pulsanti o dati inseriti nei moduli, stile dinamico, animazioni).
Questo articolo ti aiuterà ad iniziare con questo entusiasmante linguaggio e ti darà un’idea di tutte le cose fantastiche che ti permette di fare sul tuo sito web o la tua web app.
JavaScript è incredibilmente versatile. Puoi iniziare in piccolo, con le azioni dopo un clic di un pulsante, far apparire le cose se una determinata condizione è vera, animare facilmente gli oggetti, creare pop-up e gallerie lightbox. Con più esperienza, sarai in grado di creare giochi, grafiche animate 2D e 3D, applicazioni web e molto altro!
Questo linguaggio è abbastanza compatto ma molto flessibile. Molti sviluppatori hanno creato alcune librerie open-source che possono farti scrivere molto meno codice come JQuery, ad esempio, questa libreria è diventata un must se vuoi creare un sito web semplice.
JQUERY
jQuery è una libreria JavaScript veloce, leggera e ricca di funzionalità. permette di fare azioni su documenti HTML e manipolazione, gestione degli eventi, animazione e Ajax molto più semplice con un'API facile da usare che funziona su una moltitudine di browser.
Ecco alcuni esempi di cosa puoi fare rispetto a Vanilla Javascript (Plain Javascript Code):
.attr( attributeName )
Il metodo .attr() restituisce il valore dell'attributo del primo elemento nel set corrispondente.
Esempio:
$(p).attr('class'); ==> gets the classes assigned to that element
$(p).attr('class', 'lead') ==> assign "lead" class to "class" attribute
Element.setAttribute(name, value); ==> same thing in plain Javascript code
.click( handler )
Descrizione: Associare un gestore di eventi all'evento JavaScript "clic" o attivare quell'evento su un elemento.
Questo metodo è una scorciatoia per .on( "click", handler ) nelle prime due varianti, e .trigger( "click" ) nella terza. L'evento click viene inviato a un elemento quando il puntatore del mouse si trova sopra
l'elemento e il pulsante del mouse viene premuto e rilasciato.
Qualsiasi elemento HTML può ricevere questo evento. Ad esempio,
considera l’HTML:
<div id="target">
Click here
</div>
<div id="other">
Trigger the handler
</div>
Il gestore eventi può essere associato a qualsiasi:
$( "#target" ).click(function() {
alert( "Handler for .click() called." );
});
Queste sono solo un paio di funzioni che è possibile utilizzare per interagire con il DOM (Document Object Model, fondamentalmente collega le pagine Web agli script o ai linguaggi di programmazione).
UNDERSCORE.JS
Un'altra utile libreria, ma un po ‘più avanzata, è Underscore.JS che fornisce oltre 100 funzioni che supportano entrambi gli helper funzionali: map, filter, invoke – oltre a chicche più specializzate: binding di funzioni, javascript templating, creazione di indici rapidi, test di uguaglianza e molto altro.
È anche utile se vuoi creare facilmente oggetti e funzioni, fare alcuni loop attraverso oggetti e arrays, alcune delle funzioni che questa libreria fornisce sono:
each
_.each(list, iteratee, [context]) , scorciatoia per: forEach in Javascript.
Fa scorrere un elenco di elementi, cedendo ciascuno a sua volta a una funzione “iteratee”. L’iteratee è associato all’oggetto contesto, se ne viene passato uno. Ogni chiamata di iteratee viene chiamata con tre argomenti: (element, index, list).
Se list è un oggetto JavaScript, gli argomenti di iteratee saranno (value, key, list). Restituisce la lista per il concatenamento.
_.each([1, 2, 3], alert);
=> alerts each number in turn...
_.each({one: 1, two: 2, three: 3}, alert);
=> alerts each number value in turn...
map_.map(list, iteratee, [context]) anche chiamato: collect in Javascript.
Produce una nuova matrice di valori mappando ciascun valore nell’elenco tramite una funzione di trasformazione (iteratee).
L’iteratee riceve tre argomenti: il valore, quindi l’indice (o la
chiave) dell’iterazione e infine un riferimento all’intera
list.
_.map([1, 2, 3], function(num){ return num * 3; }); => [3, 6, 9]
_.map({one: 1, two: 2, three: 3}, function(num, key){ return num * 3; }); => [3, 6, 9]
_.map([1, 2], [3, 4], _.first); => [1, 3]
Vuoi saperne di più su queste librerie e cosa puoi fare con Javascript? Altri post e tutorial usciranno presto! Nel frattempo puoi dare un’occhiata a queste importanti risorse: