Curso de Javascript: buenas prácticas

A la hora de realizar una serie de recomendaciones, os intento explicar lo que en la práctica mejor nos ha venido a lo largo del tiempo, o bien indicaciones que suelen incluir tanto los clientes de las soluciones desarrolladas, como por especificaciones a la hora de desarrollar los proyectos JS.

  • Documenta! en JS es muy importante documentar, como hemos visto la mayor parte de los objetos desconocemos su tipo, sobre todo en funciones o métodos que definimos para nuestras aplicaciones. Utiliza los comentarios sabiamente, para que así no te vuelvas loco cuando tengas que volver a tocar ese código o bien un compañero tenga que retocar lo que tú has hecho, cuesta al principio pero a la larga compensa y mucho.
  • Indenta el código: coloca siempre los espacios o las tabulaciones en el código que con sólo leerlo ya se sepa que parte va dentro de qué.
  • Utiliza las llaves siempre, es un poco lío al principio, pero ayuda a que la lectura del código e introducción de nuevo código sea más sencilla y comprensible. 
  • Utiliza JSON siempre que puedas, la definición de los objetos en JSON a la vez de cómoda es muy visible, una vez que te acostumbras, sale sólo.
  • Utiliza el onload y el DOMCotentLoaded siempre que puedas. Por internet encontrarás que la gestión de eventos puede realizarse de muchas maneras, incluyendo un atributo en el html con el callback de la función, etc… pero siempre intenta condicionar el código a que el contenido estañe cargado, te evitarás muchísimos fallos al intentar ejecutar un código JS sobre una etiqueta que el navegador no ha leído todavía. 
  • No asumas que siempre tenemos JS activado. En muchos entornos de despliegue por temas de seguridad, Js está desactivado. Esta técnica se denomina Javascript no intrusivo. Piensa todo tu código como que JS es opcional, una ayuda para el usuario en vez de algo imprescindible para que tu aplicación funcione. 
  • Disfruta! Esto no es tanto a las técnicas como a la actitud al a hora de programar pero disfrutar de lo que estás haciendo es muy importante.
Esto es to Esto es to Esto es todo amigos!

Curso de Javascript: Modificación del DOM

Introducción

Una de las características principales de JS es la de poder modificar la página HTML que está cargada en ese momento en pantalla. Este proceso de modificar el DOM (Document Object Model) tiene una serie de conceptos que tenemos que tener en cuenta:

  • Documento: el objeto document que hemos visto previamente que es el que nos almacena la información de la página que está cargada, podría decirse que este es el DOM, aunque sería simplificarlo mucho. 
  • Elemento: El elemento es toda aquella etiqueta que hemos colocado en el documento, todos lo enlaces, las imágenes, los div, todos ellos son elementos. Lo primero que deberíamos saber es que dichos elementos tienen una estructura jerárquica, por lo que cualquier elemento salvo el html, tendrá padre y todos los elementos puede disponer de hijos. Al funcionar cómo un árbol podemos realizar las operaciones típicas de nodos en un árbol tales como el injerto, la poda y la substitución de una rama. 
  • Atributos: características el objeto, dichos elementos pueden tener o no un valor por defecto asociado, hay veces que los podemos crear, modificar o eliminar de cada etiqueta o conjunto de etiquetas-elementos. 
  • Nodos de texto: este tipo de nodos son especiales ya que no representan a una etiqueta sino a los textos que hay dentro de las etiquetas. Com por ejemplo los textos de un enlace (etiqueta a).
  • Eventos: los eventos son también atributos de los elementos y se pueden modificar como tales. 

Injertos

A la hora de realizar un injerto es necesario saber en que punto del árbol se va a realizar el injerto, esto en el DOM implica saber cual va a ser el padre del elemento que vayamos a insertar.
Por otra parte necesitaremos crear el elemento antes de realizar el injerto, con todo lo que ello conlleve, es decir hay que construir la rama entera antes de generar el injerto.
El método principal de hacer un injerto es mediante el método appendChild, dicho método se ejecuta sobre el padre y admite como parámetro el objeto del elemento que queremos injertar.
Pongamos un ejemplo completo del proceso insertando un nuevo hijo al final de todos los hijos de un padre…

                //Creación de elementos
      var enlace=document.createElement(“a”);
      enlace.href=“http://www.google.es/”;
      enlace.id=“enlace”;
      var texto=document.createTextNode(“Enlace a google”);
      //montaje de la rama
      enlace.appendChild(texto);
    //Localización del injerto
      var padre=document.getElementById(“padre”);
      //montaje del injerto

      padre.appendChild(enlace);

Como pude verse en el ejemplo, un injerto tiene un proceso:

  • Creación de los elementos y los nodos de texto como variables
  • modificación de las propiedades del elemento a insertar
  • Montaje de la rama con los appendChild
  • localización del punto del injerto, es decir el padre donde vamos a injertar el hijo
  • ejecución del método appendChild en el padre indicando que hijo queremos insertar
Es un proceso un poco laborioso pero efectivo a la hora de insertar nuevos nodos y elementos. En este caso al usar el appendChild insertamos un hijo, que sería el último hijo dentro del nodo padre, por lo que se mostraría al final, o después de todos los hermanos del nuevo nodo. 

Injerto antes de un hermano

Al igual que con appendChild insertamos un hijo, como el último de la lista, nos puede llegar a interesar insertarlo antes de otro hermano, en este caso necesitamos dos localizadores, uno el del padre y otro el del hermano para así saber el punto exacto dentro del árbol donde queremos realizar la inserción. Veamos un ejemplo…
                //inserción de un hermano
      var enlace3=document.createElement(“a”);
                //modificando las propiedades del elemento
      enlace3.href=“http://www.google.es/”;
      enlace3.id=“enlace3”;
      var texto3=document.createTextNode(“un enlace”);
                //montando la rama
      enlace3.appendChild(texto3);
                //insertando el elemento
                var enlace_en_dom=document.getElementById(“enlace”);
      document.getElementById(“padre”).insertBefore(enlace3,enlace_en_dom);

En este caso utilizamos el método insertBefore sobre el objeto padre, mediante el id=”padre” y lo intentamos introducir antes del elemento con el id=”enlace”. De esta manera el nuevo hijo que insertamos será hijo de padre y hermano de “enlace” pero estará colocado antes de “enlace”.

Reemplazar un hijo

Hay aveces que puede interesar substituir un hijo, es decir eliminar un hijo y realizar un injerto de otro, pero en JS este proceso es sencillo es simplemente substituir un contenido por otro a nivel de elemento. Veamos un ejemplo
                //reemplazar un hijo
      var enlace4=document.createElement(“a”);
      enlace4.href=“http://www.google.es/”;
      enlace4.id=“enlace3”;
      var texto4=document.createTextNode(“un enlace”);
      enlace4.appendChild(texto3);
      var enlace3_en_dom=document.getElementById(“enlace3”);
      document.getElementById(“padre”).replaceChild(enlace3,enlace3_en_dom);

Comp puede verse es como los anteriores ejemplos salvo porque utilizamos en método replaceChild sobre le padre y le indicamos en el primer parámetro el objeto del elemento que queremos insertar y en el segundo parámetro el objeto que queremos reemplazar. Muy simple 🙂
Este sencillo método permite realizar un swapping o intercambio de contenido en la página.

Eliminar una rama, poda

Hay veces que tenemos que eliminar una rama entera de la página, un contenido completo, un div es el caso típico.  Además es mucho más simple, porque lo único que necesitamos localizar es el nodo hijo de la rama a eliminar y el padre de dicho hijo. Veamos el ejemplo…
                //eliminación de una rama
      var enlace2_en_dom=document.getElementById(“enlace2”);
      document.getElementById(“padre”).removeChild(enlace2_en_dom);
En este caso se trata de eliminar toda la rama de lo que incluya el elemento cuyo id=”enlace2″, localizando también el padre. Muy simple 🙂

Curso de Javascript: Eventos

Listado de Eventos

A continuación veremos casi todos los eventos disponibles, su descripción, es decir, cuando se vana disparar y sorbe que elementos del HTML responden. 
Evento Descripción Elementos para los que está definido
onblur Deseleccionar el elemento <button><input><label>,<select><textarea><body>
onchange Deseleccionar un elemento que se ha modificado <input><select><textarea>
onclick Pinchar y soltar el ratón Todos los elementos
ondblclick Pinchar dos veces seguidas con el ratón Todos los elementos
onfocus Seleccionar un elemento <button><input><label>,<select><textarea><body>
onkeydown Pulsar una tecla (sin soltar) Elementos de formulario y <body>
onkeypress Pulsar una tecla Elementos de formulario y <body>
onkeyup Soltar una tecla pulsada Elementos de formulario y <body>
onload La página se ha cargado completamente <body>
onmousedown Pulsar (sin soltar) un botón del ratón Todos los elementos
onmousemove Mover el ratón Todos los elementos
onmouseout El ratón “sale” del elemento (pasa por encima de otro elemento) Todos los elementos
onmouseover El ratón “entra” en el elemento (pasa por encima del elemento) Todos los elementos
onmouseup Soltar el botón que estaba pulsado en el ratón Todos los elementos
onreset Inicializar el formulario (borrar todos sus datos) <form>
onresize Se ha modificado el tamaño de la ventana del navegador <body>
onselect Seleccionar un texto <input><textarea>
onsubmit Enviar el formulario <form>
onunload Se abandona la página (por ejemplo al cerrar el navegador) <body>

Manejo de Eventos

Para gestionar los eventos es necesario conocer de antemano sobre que elemento queremos cambiar su comportamiento, para ello usaremos el método getElementById(), donde indicaremos como parámetro el nombre del ID que buscamos en el DOM.
Una vez tenemos una variable con el elemento deberemos ejecutar el método addEventListener(), al cual le pasamos tres parámetros, nos importan los dos primeros, uno es el nombre del evento, sin el on delante y el segundo parámetro es el nombre de la función que se ejecutará ante ese evento.

En los ejemplos que veremos a continuación se mostrará el código HTML con el que vayamos a interactuar y el código JS correspondiente. Por simplificar la edición se ha eliminado la etiqueta <script> pero en cuanto se vea el código JS será evidente que parte es cada.

Un evento básico

En el siguiente ejemplo veremos el funcionamiento general de la modificación de los eventos
Se declara en el html un botón con el id=”boton” desde JS localizamos el elemento con el getElementById(“boton”), llamamos al método addEventListener, le pasamos como primer parámetro  el evento a modificar, en este caso el onclick, eliminamos el on, y dejamos el click y luego le aplicamos la función hazAlgo.
De esta manera cada vez que pulsamos el botón sacará un mensaje por consola.

<button id=“boton”>Pulsame</button>

//código JS

function hazAlgo(){
      console.log(“He hecho algo”);
      }

document.getElementById(“boton”).addEventListener(“click”, hazAlgo,false);

Carga del documento

Unas vez conocida la mecánica de la gestión del evento, es necesario conocer dos de los principales eventos en la carga de una página en el navegador, estos son load y DOMContentLoaded.
DOMContentLoaded es el evento que se dispara cuando se ha terminado de leer el documento HTML desde el servidor. Si queremos incluir el código JS para modificar cualquier elemento que esté presente en el HTML será necesario esperar a que este evento se dispare.  
Por otra parte está onload, que se disparará cuando se terminen de cargar todos aquellos elementos relacionados con el HTML, es decir CSS, JS, Imágenes, etc… Si tenemos que interactuar contra imágenes es necesario esperar al evento onload. 
Veamos dos ejemplo de uso, uno de cada uno de los dos eventos indicados:
<script type=“text/javascript”>
    function load(){
    console.log(“todo el contenido cargado”);
    }
      window.addEventListener(“load”, load, false);
      function loaded(){
      console.log(“Todo el HTML cargado”);
      }
      document.addEventListener(“DOMContentLoaded”, loaded, false);
    </script>
En estos dos ejemplos podemos ver cómo asociar una función a cada uno de los dos eventos.
Como puede verse para manejar el evento onload es necesario realizarlo sobre el objeto window y el método addEventListener. Ene l ejemplo se asocia la ejecución del método load. 
En el segundo caso se asocia la función loases al evento DOMContentLoaded del objeto document. 
Si realizáramos la carga de este script en cualquier HTML, veríamos que primero se ejecuta l función loaded y luego la función load. Ya que primero se carga el HTML y luego se cargan todos aquellos elementos relacionados con el HTML. 

Evitar la ejecución de la funcionalidad por defecto ante un evento

Hasta ahora los eventos que hemos manejado no tienen mayor funcionalidad asociada por defecto. En  el caso de hacer click en un botón por defecto el navegador no hace nada, al igual que en la carga de la página. Pero que pasaría si quisiéramos evitar que ese comportamiento por defecto se ejecutase. 
Imaginemos un enlace una página que nos lleva a google:
<a href=“http://www.google.es/” id=“vete”>Vete a google</a>
En este caso si pulsamos el enlace el navegador automáticamente va a intentar dar el salto a ir a la página de google, es decir, su comportamiento por defecto es el de dar el salto. 
Desde JS podemos evitar que este comportamiento por defecto se ejecute. Veamos cómo…
function noIr(event){
      console.log(“HEcho antes de ir a google”);
      event.preventDefault();
      }
      document.getElementById(“novayas”).addEventListener(“click”, noIr,false);

En este caso hemos seleccionado el elemento mediante el método getElementoById(“novayas”), esto nos devuelve el elemento del enlace que veíamos más arriba. Al aplicar el método addEventListener sobre el evento “click” y asociarlo a la función noIr, no estamos haciendo nada que no hayamos hecho antes 🙂 salvo por una sutil diferencia…
Fíjate que en la función noIr le estamos pasando un parámetro llamado event, este parámetro event nos lo pasarán siempre, lo único es que hasta ahora estábamos pasando de él jijiji
Este objeto event, dispone de una serie de propiedades y métodos que nos permiten interactuar con el evento y el elemento que ha disparado el evento, pero por ahora nos centraremos en el método preventDefault(). Este método permite evitar que se ejecute el comportamiento por defecto asociado a dicho evento, en este caso en click en el enlace que hemos seleccionado. 
De esta manera aunque el navegador tiene designado que es un enlace y debería ir a la dirección indicada por la URL del href, le estamos indicando que no queremos que se realice dicho salto. Por lo tanto sólo se realizará lo que nosotros le indiquemos dentro de la función de Callback, que le hemos pasado como parámetro noIR. 
Ésta te´chica puede aplicarse a cualquiera de los eventos que hemos estudiado en este tema por lo que podemos cambiar el comportamiento completo del navegador.

Curso de Javascript: Clases Básicas

String

     //Clase String
      
      var cadena = new String(“Ejemplo”);
      
      console.log(“longitud de la cadena:”+cadena.length);
      
      //concatenación 
      
      console.log(“primer literal “+cadena+ ” segundo literal”);
      
      var concatenado=cadena.concat(” concatenado”);
      console.log(concatenado);
      
      var entero=3;
      
      cadena=“Hola”+entero;
      console.log(cadena);
      
      console.log(cadena+concatenado);
      
      var mayusculas=cadena.toUpperCase();
      console.log(mayusculas);
      var minusculas=mayusculas.toLowerCase();
      console.log(minusculas);
      
      var caracter=minusculas.charAt(0);
      console.log(caracter);
      
      var posicion=minusculas.indexOf(“h”);
      console.log(posicion);
      //substring con un parámetro
      var email=“pepesan@consultec.es”;
      var subcadena=email.substring(8);
      console.log(subcadena);
      
      //substring con 2 parámetros
      subcadena=email.substring(0,7);
      console.log(subcadena);
      
      //separador
      var separados=email.split(“@”);
      console.log(separados[0]);
      console.log(separados[1]);
      

Arrays

     

      
      //Arrays
      var array=new Array(5);
      
      var i=0;
      for (i=0;i<5;i++){
      array[i]=i;
      console.log(array[i]);
      }
      console.log(array.length);
      //concatenación de arrays
      var array2=array.concat([5,6,7]);
      //recorrido de arrays
      for(item in array2){
      console.log(array2[item]);
      }
      //unión de elementos
      var union=array2.join(“,”);
      console.log(union);
      //eliminación del último elemento
      array2.pop();
      for(item in array2){
      console.log(array2[item]);
      }
      
      //inclusión al final de un elemento al final
      array2.push(7);
      for(item in array2){
      console.log(array2[item]);
      }
      //eliminación con posición
      delete array2[0];
      for(item in array2){
      console.log(array2[item]);
      }    
      
      //quita el primer elemento
      var array3=[1,2,3,4];
      for(item in array3){
      console.log(array3[item]);
      }
      var quitado=array3.shift();
      console.log(“quitado:”+quitado);
      for(item in array3){
      console.log(array3[item]);
      }
      array2.unshift(0);
      for(item in array3){
      console.log(array3[item]);
      }
      
  

Date

  

      //Objeto Date Fecha
      //fecha actual
      var fecha=new Date();
      //inicializaciones
      var fecha2=new Date(“10/02/2000”);
      var fecha3=new Date(1990, 11, 10, 20,00);
      
      console.log(fecha);
      console.log(fecha.getFullYear());
      //empiezan en 0
      console.log(fecha.getMonth()+1);
      console.log(fecha.getDay()+1);
      
      console.log(fecha.getHours());

      console.log(fecha.getMinutes());





Licencia Creative Commons

Suscríbete al Boletín

Si quieres estar al tanto de las novedades del blog, ya sabes :)
* = campo obligatorio

powered by MailChimp!

Archivos

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

Aviso de cookies