A volte, per iniziare un viaggio nell'apprendimento di qualcosa di enorme e complesso, devi imparare qualcosa di piccolo e semplice. JavaScript è enorme e complesso, ma puoi entrarci da bambino imparando cose piccole e semplici. Se sei un web designer, penso che ci sia una cosa in particolare che puoi imparare che è estremamente potenziante.
Questa è la cosa che voglio che tu impari: quando fai clic su un elemento, cambia una classe su un elemento.
Riducendolo all'essenziale, immagina di avere un pulsante e un div:
Click Me I'm an element Il div può avere alcuni stili di base e può avere alcuni stili quando ha una classe particolare:
div ( /* base styles */ ) div.yay ( /* styles when it has this class */ )Astuti CSS-Tricksters potrebbero riconoscere questa come un'opportunità per il checkbox hack, ma non è quello su cui stiamo lavorando oggi.
Vogliamo allegare un "listener di eventi" al pulsante: un po 'di codice da "ascoltare", nel nostro caso, gli eventi di clic e, quando ciò accade, eseguire altro codice.
Sai come nei CSS dobbiamo “selezionare” gli elementi per modellarli? Dobbiamo farlo anche in JavaScript per allegare il nostro listener di eventi. Creeremo un "riferimento" al pulsante, come una variabile, in questo modo:
var button = document.querySelector("button");Ora che abbiamo un riferimento al pulsante, allegheremo quel listener di eventi:
button.addEventListener("click", function() ( /* run code here, after the button is clicked. */ ));E cosa vogliamo fare in caso di clic? Aggiungi un nome di classe al nostro div! Ma proprio come avevamo bisogno di un riferimento per il pulsante per fare le cose con esso, avremo bisogno anche di un riferimento per il div. Facciamole entrambe contemporaneamente, ecco l'intera parte di codice:
var button = document.querySelector("button"); var element = document.querySelector("div"); button.addEventListener("click", function() ( element.classList.toggle("yay"); ));Questa è l'intera cosa che volevo mostrarti. Con alcuni CSS aggiunti a quella classe "yay", possiamo sfumare in entrata e in uscita il div:
Vedere Pen Click Something / Change Class di Chris Coyier (@chriscoyier) su CodePen.
Perché questa cosa?
Le possibilità di progettazione sono infinite quando controlli il CSS e lo stato di qualsiasi elemento (quali nomi di classe ha). Nascondere e rivelare le cose è il potere ovvio, ma potrebbe davvero essere qualsiasi cosa.
Salire di livello
Ricorda che non sei limitato a cambiare il nome di una classe. È possibile modificare più classi su un singolo elemento o modificare le classi su più elementi.
Guarda di più nella proprietà classList. "Toggle" non è l'unica opzione.
Proprio come HTML e CSS, JavaScript ha diversi livelli di supporto del browser per le cose. Esamina il supporto del browser per classList e aggiungi addEventListener. Sei d'accordo con quei livelli di supporto per il tuo progetto? In caso contrario, potresti esaminare i polyfill o persino jQuery.
Abbiamo utilizzato l'evento "clic", ma ce ne sono molti altri. Altri eventi del mouse, scorrimento, tastiera e altro. Molte centinaia.
Il metodo che abbiamo utilizzato per la selezione è stato document.querySelector. Ciò è stato utile perché restituisce un singolo elemento con cui lavorare. Inoltre, i selettori che gli dai sono proprio come i selettori CSS. document.querySelector("#overlay .modal > h2");sarebbe una selezione legittima. Questo non è l'unico metodo per la selezione, tuttavia, ce ne sono altri come getElementById, querySelectorAll, getElementsByClassName e altro.
Ecco un esempio di dove selezioniamo un gruppo di elementi di navigazione e alleghiamo un gestore di clic a tutti contemporaneamente:
Vedi le classi di cambio penna su cose di Chris Coyier (@chriscoyier) su CodePen.
Se il JavaScript che abbiamo scritto nel nostro piccolo esempio non è riuscito a caricare per qualsiasi motivo, avremmo ancora un pulsante che dice "Cliccami". Ma fare clic su di esso non farebbe molto, vero? Forse potremmo inserire quel pulsante con JavaScript, quindi il pulsante non è nemmeno lì a meno che non sappiamo che funzionerà? Buona idea, eh? ;)