A veces, para comenzar un viaje hacia el aprendizaje de algo enorme y complejo, es necesario aprender algo pequeño y simple. JavaScript es enorme y complejo, pero puede dar un paso adelante aprendiendo cosas pequeñas y simples. Si eres un diseñador web, creo que hay una cosa en particular que puedes aprender que es extremadamente enriquecedora.
Esto es lo que quiero que aprendas: cuando haces clic en algún elemento, cambias una clase en algún elemento.
Reduciendo eso a lo esencial, imagina que tenemos un botón y un div:
Click Me I'm an element El div puede tener algunos estilos base y puede tener algunos estilos cuando tiene una clase en particular:
div ( /* base styles */ ) div.yay ( /* styles when it has this class */ )Los engañadores de CSS astutos pueden reconocer esto como una oportunidad para el truco de la casilla de verificación, pero eso no es en lo que estamos trabajando hoy.
Queremos adjuntar un "detector de eventos" al botón: un poco de código para "escuchar", en nuestro caso, hacer clic en eventos, y cuando eso suceda, ejecutar más código.
¿Sabes cómo en CSS necesitamos "seleccionar" elementos para darles estilo? Necesitamos hacer eso en JavaScript también para adjuntar nuestro detector de eventos. Crearemos una "referencia" al botón, como una variable, como esta:
var button = document.querySelector("button");Ahora que tenemos una referencia al botón, adjuntaremos ese detector de eventos:
button.addEventListener("click", function() ( /* run code here, after the button is clicked. */ ));¿Y qué queremos hacer en caso de un clic? ¡Agrega un nombre de clase a nuestro div! Pero al igual que necesitábamos una referencia para el botón para poder hacer cosas con él, también necesitaremos una referencia para el div. Hagamos los dos al mismo tiempo, aquí está todo el código:
var button = document.querySelector("button"); var element = document.querySelector("div"); button.addEventListener("click", function() ( element.classList.toggle("yay"); ));Eso es todo lo que quería mostrarte. Con algo de CSS agregado a esa clase "yay", podemos fundir dentro y fuera del div:
Vea la clase Pen Click Something / Change de Chris Coyier (@chriscoyier) en CodePen.
¿Por qué esta única cosa?
Las posibilidades de diseño son infinitas cuando controlas el CSS y el estado de cualquier elemento (qué nombres de clase tiene). Ocultar y revelar cosas es el poder obvio, pero realmente podría ser cualquier cosa.
Subir de nivel
Recuerde que no está limitado a cambiar el nombre de una clase. Puede cambiar varias clases en un solo elemento o cambiar las clases en varios elementos.
Busque más en la propiedad classList. "Alternar" no es la única opción.
Al igual que HTML y CSS, JavaScript tiene diferentes niveles de compatibilidad con el navegador. Busque en el soporte del navegador para classList y agregue addEventListener. ¿Está de acuerdo con esos niveles de apoyo para su proyecto? Si no es así, puede buscar en polyfills o incluso en jQuery.
Usamos el evento "clic", pero hay muchos otros. Otros eventos de mouse, desplazamiento, teclado y más. Muchos cientos.
El método que usamos para seleccionar fue document.querySelector. Esto fue útil porque devuelve un solo elemento con el que trabajar. Además, los selectores que le da son como selectores CSS. document.querySelector("#overlay .modal > h2");sería una selección legítima. Sin embargo, este no es el único método para seleccionar, hay otros como getElementById, querySelectorAll, getElementsByClassName y más.
Aquí hay un ejemplo de dónde seleccionamos un montón de elementos de navegación y adjuntamos un controlador de clic a todos ellos a la vez:
Vea las clases de cambio de lápiz sobre cosas de Chris Coyier (@chriscoyier) en CodePen.
Si el JavaScript que escribimos en nuestro pequeño ejemplo no se cargara por alguna razón, aún tendríamos un botón que dice "Haga clic en mí". Pero hacer clic en él no haría mucho, ¿verdad? ¿Quizás podríamos insertar ese botón con JavaScript, por lo que el botón ni siquiera está allí a menos que sepamos que funcionará? Buena idea, ¿eh? ;)