Hervera
Open Menu
Mis apuntes y cosas interesantes que he sacado del primer día de curso Javascript30 - Drums

Javascript30 es un conjunto de tutoriales para hacer, en principio, uno por día durante 30 días.
Todos tratan de vanilla Javascript ( "a pelo" sin frameworks, sin jQuery, sin Angular...).
Son muy entretenidos ya que Wes Bos, el creador y speaker, los hace sencillos pero muy útiles.
Se realizan en muy poco tiemo, sobre los 25 minutos, ya que todo el HTML y CSS lo aporta él mediante un repositorio en GitHub.
Ahí van mis apuntes del curso:

Mis apuntes sobre Javascript

Atributos data-cualquiercosa

Este tipo de atributos se añadieron en la versión de HTML 5.
Los atributos data se emplean para definir datos que se usarán desde Javascript ya que el motor de renderizado del navegador no los va a tener en cuenta. Gracias a ellos, por ejemplo, podemos tener un enlace así:

<a href="mienlace.html" data-thumb="asset/thumb/imagen-1.png">Ver buena foto</a>
Y mediante Javascript podríamos hacer que al pasar por encima con el ratón nos mostrase la foto que indicamos en data-thumb.

Añadir eventos con addEventListener

La función addEventListener nos permite asociar funciones (handlers) a eventos que son producidos por algunos elementos.
Por ejemplo:

closeButton.addEventListener('click', function(event){console.log(this)});
Es importante tener en cuenta que this dentro de la función que ha disparado evento, hace referencia al elemento disparador, en este caso al link.

Se pueden añadir también eventos al elemento window, por ejemplo, si añadimos un handler al click, se disparará sea cual sea el sitio que cliquemos.

Funciones querySelector y querySelectorAll

Éstas sirven para seleccionar nodos del DOM de nuestra aplicación.

querySelector(selectores) busca y devuelve un elemento que concuerde con los selectores pasados por parametro. El formato de los selectores es el mismo que utilizamos CSS.
Hay que tener en cuenta que si hay más de un resultado nos devolverá el primero que encuentre. Null si no encuentra ninguno.

querySelectorAll(selectores) funciona igual que el anterior pero devuelve una lista de nodos del DOM (NodeList).

Ejemplos:


//El primer elemento que tenga la clase 'featured'
const featured =  document.querySelector('.featured');

//El primer elemento que tenga la clase 'child' y esté dentro del elemento featured
const child =  featured.querySelector('.child');

//Un listado con todos los nodos que tengan la clase 'children'
const children =  document.querySelector('.children');
                    

Utilizar elemento <AUDIO> desde Javascript

La versión 5 de HTML añadió el elemento audio al estándar como forma de reproducir audio.


<audio controls>
    <source src="bejo-mucho.mp3" type="audio/mpeg">
</audio>

                    
También, añadió a su API métodos para controlarlo desde Javascript. Con el método play(), éste empezará a sonar. Si se vuelve a ejecutar el método mientras éste está sonando, no se reiniciará. Para que esto suceda hay que settear el atributo currentTime a 0.

Mis apuntes sobre CSS

Transiciones entre cambios de propiedades

Desde la aparición de CSS3 y las transiciones ya no es necesario recurrir a Javascript para animar nuestras Webs.
Nos permite especificar la propiedad sobre la que queremos que se aplique, el tiempo y la función de tiempo.
Por ejemplo:

Ponte encima mío
.rectangle{
        padding: 15px;
        background: #ce66ff;
        width: 155px;
        transition: width 1s ease-in-out;
    }
    
    .rectangle:hover{
        width: 300px;
    }
                    
Asimismo, al finalizar las transiciones, se dispara el evento transitionend al que podemos suscribirnos.
element.addEventListener('transitionend', function(){})
Hay que tener en cuenta que se lanzará un evento por cada propiedad modificada ya que podemos poner transiciones en una o varias propiedades a la vez separándolas por comas o simplemente poniendo all en el selector de propiedad.

Y estos son mis apuntes del curso de Javascript30 día 1.

Fotografía de portada de: unsplash-logo JESHOOTS.COM