Hola y bienvenid@s a esta charla

Javascript:

DOM Manipulation

Pure JS/JQuery & other tips & tricks...

 

*

By Roy Eden

*si, el título es en inglés pero la charla es en castellano...

Javascript?

Aparece en 1995 (21 Años a día de hoy).

*Hoy enfocamos en el Frontend

Lenguaje de alto nivel.

Lenguaje no tipado.

Implementado en casi todos los Web Browsers (navegadores web) modernos.

Extremadamente versátil.

Utilizado en Backend y Frontend*.

DOM:

Es la interfaz estándar de representación de documentos HTML, XHTML y XML en la web

Document Object Model:

Se utilizan nodos para representar cada parte del documento

Cada uno de ellos es un objeto (que puede ser manipulado)

Están estructurados en forma de árbol

Estandarizado por el WC3 (World Wide Web Consortium) en 2004

Es un API

Document

Root Element:

<html>

Ejemplo de DOM:

Element:

<head>

Element:

Title

Text:

"My title"

Element:

<body>

Element:

<h1>

Text:

"My header"

Element:

<a>

Text:

"My link"

Attribute:

"href"

Qué puedo hacer con DOM?

Y... entonces?

La verdad... Nada...

El DOM no es un lenguaje, es un objeto del documento.

Entonces voy a valerme de Javascript para manipular el DOM

Cómo?

Javascript tiene varias formas de acceder a objetos:

Ej: obj.attribute ó  obj.method()

El DOM es un objeto, por ende puedo acceder a él:

Ej: document.attribute ó document.method()

Métodos de selección:

document.getElementById/Class(Selector)

document.querySelectorAll(Selector)

Atributos:

element.setAttribute('attribute', value)

Eventos:

element.onSomething(function(){})

element.addEventListener('onSomething', function(){})

document.getElementsByTagName(Selector)

Ejemplo: accediendo al DOM:

<body>
  <div class="contain">
    <label for="example1">Escriba algo:</label>
    <br>
    <input type="text" name="example1" id="example" value="Modifique este texto" maxlength="40">
    <br>
    <h2 id="newText"></h2>
  </div>
  <script src="DOM1.js"></script>
</body>

El <html>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: sans-serif;
  font-weight: bold;
}

body {
  background-color: #3E363F;
}

.contain {
  text-align: center;
  border-radius: 1%;
  margin-top: 10%;
  margin-bottom: 15%;
  margin-left: 30%;
  margin-right: 30%;
  background-color: #fff;
  height: 20em;
  padding: 2%;
}

input {
  margin-top: 2%;
  width: 300px;
  height: 2em;
}

button {
  padding: 1%;
}

h2 {
  margin: 3%;
  font-size: 1.7em;
}

.mePic {
  margin-top: 5%;
  width: 80px;
  height: 80px;
  border-radius: 35%;
}

a {
  text-decoration: none;
}

button a {
  display: block;
}

@media screen and (max-Width: 1500px) {
  .contain {
    margin-top: 9%;
    margin-bottom: 15%;
    margin-left: 29%;
    margin-right: 29%;
    font-size: 0.9em;
  }
  
  h2 {
    font-size: 1.3em;
  }

}

@media screen and (max-Width: 1150px) {
  input {
    width: 200px;
  }
}
@media screen and (max-Width: 750px) {
  * {
    font-size: 0.9em;
  }
  
  .contain {
    margin-top: 9%;
    margin-bottom: 10%;
    margin-left: 19%;
    margin-right: 19%;
  }
  
  h2 {
    font-size: 1.2em;
  }
  
  input {
    width: 180px;
  }
  
  .mePic {
    width: 65px;
    height: 65px;
  }
}
@media screen and (max-Width: 600px) {
  * {
    font-size: 0.8em;
  }
  
  h2 {
    font-size: 1.15em;
  }
  
  input {
    width: 100px;
  }
}

El CSS

const elIn = document.getElementById('example');
const elOut = document.getElementById('newText');

window.addEventListener('DOMContentLoaded', changeText, false);

elIn.addEventListener('keyup', changeText, false);

function changeText(){
  if(elIn.value !== "")
    return elOut.textContent = "Ha ingresado: " + elIn.value;
  else
    return elOut.textContent = "Por favor ingrese algo en el cuadro de arriba...";
}

El JavaScript

Cómo se ve este código:

*Hace click acá o en la imagen para probar este código.

Qué está pasando?

<input type="text" name="example1" id="example" value="Modifique este texto" maxlength="40">
<h2 id="newText"></h2>
const elIn = document.getElementById('example');
const elOut = document.getElementById('newText');

Creamos variables que van a almacenar la posición del objeto en el DOM.

Dentro del html tenemos estos elementos:

*Estas constantes almacenan objetos de elementos, por ende antecedo en sus nombres la palabra el  refiriéndome a elemento .

En este caso utilizo constantes ya que sé que el Id de estos elementos no van a cambiar en ningún aspecto.

Buscamos los elementos del html por su Id (con el método getElementById( 'id')).

Luego accedemos al objeto del documento ( document .).

Porqué almacenarlos en variables?

Al almacenarlos en variables, resulta más simple y entendible el código a la hora de trabajar con él...

const elIn = document.getElementById('example');
const elOut = document.getElementById('newText');

window.addEventListener('DOMContentLoaded', changeText, false);
elIn.addEventListener('keyup', changeText, false);


function changeText(){
  if(elIn.value !== "")
    return elOut.textContent = "Ha ingresado: " + elIn.value;
  else
    return elOut.textContent = "Por favor ingrese algo en el cuadro de arriba...";
}
window.addEventListener('DOMContentLoaded', changeText, false);

document.getElementById('example').addEventListener('keyup', changeText, false);

function changeText(){
  if(document.getElementById('example').value !== "")
    return document.getElementById('newText').textContent = "Ha ingresado: " + document.getElementById('example').value;
  else
    return document.getElementById('newText').textContent = "Por favor ingrese algo en el cuadro de arriba...";
}

=

Cuando SÍ

  • Necesito reutilizar la ubicación del/de los objeto/s.
  • Acortar código y hacerlo más legible y prolijo.

Cuando NO

  • Si sólo voy a utilizarlo/s una vez.

SIEMPRE

  • Revisar el scope de las variables.
  • Tratar de declarar la menor cantidad de variables globales posibles.
  • Si es una variable con valor fijo, usar const.

Asignar DOM a variables:

Desventajas de utilizar Puro javascript

Los selectores de JS no son muy efectivos

Es imposible seleccionar distintos tipos de elementos a la vez

El manejo de eventos/atributos/etc es complicado

No hay compatibilidad con web browsers antiguos

JQuery?

Aparece en 2006 (11 Años a día de hoy).

Librería de Javascript.

Es multiplataforma.

Simplifica, entre otras cosas, la interacción con el DOM y todo lo relacionado a él.

Es Open Source.

Para agregar JQuery a tu sitio, podes descargarlo y utilizarlo localmente o agregar:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

a tu código html arriba de tu <script> con js.

Métodos de selección:

$('Selector')

Atributos:

$(element).attr('attribute', value)

Eventos:

$(element).on('something', function())

Ventajas de Jquery:

Podemos seleccionar cuantos elementos queramos con un solo selector y sin metodos

No es tedioso agregar eventos a un conjunto de elementos

Compatibilidad cross-browser

Y muchas cosas más*

*Que no tienen que ver con la manipulación del DOM y por ende no están cubiertas en esta charla.

No es difícil de usar

Adaptable


Más fácil



Más legible



 

Menos Código

Volviendo al ejemplo con JQuery


<body>
  <div class="contain">
    <label for="example1">Escriba algo:</label>
    <br>
    <input type="text" name="example1" id="example" value="Modifique este texto" maxlength="40">
    <br>
    <h2 id="newText"></h2>
  </div>
  <script src="DOM1.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</body>

El <html>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: sans-serif;
  font-weight: bold;
}

body {
  background-color: #3E363F;
}

.contain {
  text-align: center;
  border-radius: 1%;
  margin-top: 10%;
  margin-bottom: 15%;
  margin-left: 30%;
  margin-right: 30%;
  background-color: #fff;
  height: 20em;
  padding: 2%;
}

input {
  margin-top: 2%;
  width: 300px;
  height: 2em;
}

button {
  padding: 1%;
}

h2 {
  margin: 3%;
  font-size: 1.7em;
}

.mePic {
  margin-top: 5%;
  width: 80px;
  height: 80px;
  border-radius: 35%;
}

a {
  text-decoration: none;
}

button a {
  display: block;
}

@media screen and (max-Width: 1500px) {
  .contain {
    margin-top: 9%;
    margin-bottom: 15%;
    margin-left: 29%;
    margin-right: 29%;
    font-size: 0.9em;
  }
  
  h2 {
    font-size: 1.3em;
  }

}

@media screen and (max-Width: 1150px) {
  input {
    width: 200px;
  }
}
@media screen and (max-Width: 750px) {
  * {
    font-size: 0.9em;
  }
  
  .contain {
    margin-top: 9%;
    margin-bottom: 10%;
    margin-left: 19%;
    margin-right: 19%;
  }
  
  h2 {
    font-size: 1.2em;
  }
  
  input {
    width: 180px;
  }
  
  .mePic {
    width: 65px;
    height: 65px;
  }
}
@media screen and (max-Width: 600px) {
  * {
    font-size: 0.8em;
  }
  
  h2 {
    font-size: 1.15em;
  }
  
  input {
    width: 100px;
  }
}

El CSS

const $elIn = $('#example');
const $elOut = $('#newText');

$(changeText);

$elIn.on('keyup', changeText);

function changeText(){
  if($elIn.val() !== "")
    return $elOut.text("Ha ingresado: " + $elIn.val());
  else
    return $elOut.text("Por favor ingrese algo en el cuadro de arriba...");
}

El JavaScript

Cómo se ve este código:

*Hace click acá o en la imagen para probar este código.

Como cambia esto?

<input type="text" name="example1" id="example" value="Modifique este texto" maxlength="40">
<h2 id="newText"></h2>
const $elIn = $('#example');
const $elOut = $('#newText');

La selección vía DOM es más simple:

Los elementos son los mismos:

Sólo requerimos un selector de CSS.

Podemos utilizar eventos de JQuery:

$(changeText);

$elIn.on('keyup', changeText);

function changeText(){
  if($elIn.val() !== "")
    return $elOut.text("Ha ingresado: " + $elIn.val());
  else
    return $elOut.text("Por favor ingrese algo en el cuadro de arriba...");
}

Otras ventajas de Jquery

const el = $('a, .b, #c')
/*Selecciona todos los elementos <a>,
todos los elementos con la clase b (class="b")
y el elemento con id c (id="c")*/

Podemos almacenar en una misma variable muchos elementos distintos:

const el = $('.b a')
/*Selecciona todos los elementos <a>
dentro de la clase b (class="b")*/
const el = $('#c a')
/*Selecciona todos los elementos <a>
dentro del elemento con id c (id="c")*/

podemos seleccionar elementos como lo haríamos en CSS:

Desventajas de Jquery

JQuery es una librería muy grande: existen librerías que son más específicas

Está en desuso hace un par de años

Casi nadie usa a día de hoy un web browser viejo

Muchas gracias por escuchar!

Links útiles:

JS DOM 101 Es

By Roy E

JS DOM 101 Es

  • 338
Loading comments...