Javascript para Frontend

vincular el archivo JS

Vinculacion en linea: escribir Js en la etiqueta script dentro del html

<script>
  // insertar codigo
</script>

Vinculacion externa: Javascript en otro archivo.

<script src="index.js">
</script>

En esta opcion tambien se puede aclarar el tipo de archivo:

<script src="index.js" type="text/javascript">
</script>

Los archivos de Js para frontend se guardan generalmente en la carpeta public/js/ ...

Objeto Windows y document

Cada vez que nos movemos a traves de paginas estamos haciendo pedidos al servidor. Lo que buscamos con JS es modificar paginas sin cargar de nuevo la pagina completa. Para esto vamos a hacer uso de dos variables: window y document, ambas ya vienen declaradas de forma nativa y nos permiten acceder a cualquier parte visible para el usuario.

El objeto window representa la ventana que contiene un documento DOM; la propiedad document apunta al DOM document cargado en esa ventana.

>>window.innerHeight
     // aqui mostraria el alto de la pantalla
>> window.innerWidth
    // aqui mostraria el ancho de la pantalla

>> window.location
   // aqui mostraria mucha informacion de la pagina: protocolo, localhost

Es importante aclarar que el objeto window nos permite trabajar con la ventana del navegador y el objeto document nos permite trabajar con el contenido del documento.

El DOM (Document Object Model en español Modelo de Objetos del Documento) es un modelo de documento que se carga en el navegador web y que representa el documento como un árbol de nodos, en donde cada nodo representa una parte del documento (puede tratarse de un elemento, una cadena de texto o un comentario).

>> document.bgColor = red
     // transforma el fondo de la pantalla a rojo
>> document.styleSheets
   // voy a acceder a todos los archivos css que estan conectados a ese archivo.

Selectores de document

Para elegit donde hacer la modificacion debemos usar el querySelector.

document.querySelector("form"); // formulario
document.querySelector("form.registration"); // formulario con clase registracion
document.querySelector("formularioUnico") // formulario con ID unico

document.querySelector(".especial") // modificar la clase especial

Si hay varias etiquetas, el querySelector solo matcheara con la primera. Si quiero trabajar con muchas debo usar el querySelectorAll.

document.querySelectorAll(".especial");

Este objeto que ese genera con varios elementos no es un array, sino un Nodelist, pero puedo usarlo como un array, es decir puedo recorrer y acceder a sus alementos.

Por ejemplo:

// supongamos que tengo 3 etiquetas "p" en el HTML
let elementosP = document.querySelectorAll("p");
for (let unP of elementosP){
     console.log(unP);
}
// esto mostrara en la consola cada elemento p

Etiquetas dentro de otras

Supongamos quen tengo un strong dentro un p con clase "parrafo"

<p class="parrafo"> lorem ipsum <strong> elemento que quiero</strong> </p>

Para acceder al elementro strong debo hacerlo similar a css.

let elementoStrong = document.querySelector(".parrafo strong")
// esto devolvera el elemento strong

Si tenemos verificar si existe un elemento para no retornar null:

let elementoP = document.querySelector("p");
if (elementoP != null) {
     console.log(elementoP);
}

Modificando el DOM

Una manera de modificar un elemento seleccionado, como lo mostramos anteriormente con querySelector, es usar InnerHTML.

let titulo= document.querySelector("h1");
titulo.innerHTML = "Soy un titulo"
// esto modificara el valor que tenia el h1 y mostrara el mensaje
// si yo no quiero modificarlo sino agregar al final:
titulo.innerHTML += "Soy un titulo";

Tambien puedo mostrar etiquetas html dentro del innerHTML:

let titulo= document.querySelector("h1");
titulo.innerHTML += "Soy un titulo con <i>esta parte en cursiva</i>";
// mostrara el titulo con su parte en cursiva

Sino quiero que salgan las etiquetas y solomante texto debo usar el innerText:

let titulo= document.querySelector("h1");
titulo.innerText += "Soy un titulo con <i>esta parte en cursiva</i>";
// mostrara el texto sin cursiva y mostrara los simbolos "<",">" y "/".

Modificando estilos

Para modificar el estilo desde el DOM vamos a usar el elemento style. Las propiedades son las mismas que en CSS pero las que son mas de una palabra y tienen un guion al medio se cambian eliminando el guion y usando el estilo Camel case. Por ejemplo: background-color pasa a ser backgroundColor. Si queremos modificar un elemento parrafo y lo queremos alinear al centro seria algo asi:

document.querySelector("p").style.textAlign = 'center';

Modificando clases

Para modificar una clase vamos a usar el metodo classList. Por ejemplo podemos usar el metodo add en combinacion de classList para agregar una clase.

document.querySelector("div").classList.add('negrita'); // para agregar una clase

document.querySelector("div").classList.remove('negrita'); // para quitar una clase

El codigo escrito arriga agrega una clase negrita y en la siguiente linea la quita. Si quisieramos que dependiendo si el elemento ya tiene ese clase la agregue o la quite podemos usar el metodo toggle.

document.querySelector("div").classList.toggle('negrita'); // si ya tiene la clase, la quita. Si no la tiene, la agrega