Javascript: cosas a recordar

Hoy voy a anotar aquí una serie de cosas que es recomendable tener en cuenta a la hora de trabajar con Javascript. Espero que estas anotaciones me sirvan de recordatorio cada vez que tenga que trabajar con Javascript y, de paso, que puedan resultarle útiles a cualquiera que lea este blog.

- Intérprete javascript online: jsbin.com

- Usar .textContent en lugar de innerHTML por el bien de la compatibilidad con
  todos los navegadores

- Usar doc.getElementById("elemento").value en lugar de .value (este último no
  funciona en IE)
- document.getElementById("imagen").getAttribute("src");
- document.getElementById("imagen").setAttribute("src", "imagen.jpg");

- Colocar las etiquetas <script> justo antes de la etiqueta de cierre </body>. Los
  navegadores paran la  descarga del HTML al encontrar etiquetas <script> para
  descargar los ficheros .js. También se puede usar atributo
  async de <script> en navegadores modernos.

- Sensible a mayúsculas y minúsculas.

- Comentarios: // (única línea) y /* comentario */ (varias líneas)

- Tipos de datos: Number, Boolean, String. Para definir una variable usamos var.

- parseInt() y parseFloat() para convertir strings a números enteros y decimales.
  isNaN() para comprobar si es un número.
- Number(prompt("Introduce un número: ", "");  //convierte una cadena a número

- cadena1.concat(" ", cadena2);
  también se puede utilizar: cadena1 + " " + cadena2.

- cadena1 = "Hola"; cadena2 = "mundo"; cadena1.concat(" ", cadena2, "!");

- cadena1.toUpperCase(); cadena2.toLowerCase();

- "cadena de texto".length

- trim(): eliminar blancos, cadena1.replace("cadena1", "cadena2");
  El primer parámetro de replace puede   ser una expresión regular

- substring(inicio, fin); substr(inicio, contador); slice(inicio, fin);
  substr no funciona en IE8 y anteriores, slice no intercambia inicio y fin cuando   inicio>fin

- cadena1.indexOf("c"); cadena2.lastIndexOf("d");

- document.getElementById("idElemento");

- prompt("Mensaje a mostrar", "texto por defecto para devolver si el usuario no
  introduce nada");

- Definir arrays:
  var arrayVacio = []; var miArray = ["uno", "dos", "tres"];
  var array10 = new Array(10);
  var array2d = new Array(3); for (var i=0; i<3 data-blogger-escaped-array2d=""
  data-blogger-escaped-br="" data-blogger-escaped-i="" data-blogger-escaped-new="">
  Array(3);} - miArray.push("valor a añadir");
- var elemento = miArray.pop(); //devuelve el último elemento del array y lo
  elimina del mismo.
- miArray.shift(); //obtiene el primer elemento del array y lo quita del mismo
- miArray.unshift("valor"); //añade un valor como primer elemento del array.
- miArray.sort(); //por defecto supone que los elementos son strings y los ordena.
- miArray.sort(function(a,b) {return a-b}); //ordena de menor a mayor
- var a = miArray.sort(function(a,b) {return b-a}); ó a.reverse();
- miArray.splice(índice, contadorEliminar, elemento1...elementoN); //añadir y
  eliminar
- miArray.filter(esPar(value, index, array) { return value % 2; }); //sólo los
  pares
- miArray.filter(function (value, index, array) { return array.indexOf(value) ==
  index; }); //no repetidos

- Se puede usar una función antes de su definición (function hoisting).
- Funciones anónimas: var sumar = function (x, y) { return x+y }; sumar(1, 2);
- arguments.length; arguments[i]; //es un objeto no un array
  var arrayArgs = Array.prototype.slice.call(arguments); //convertir en array
- Lanzar exceptiones: throw {error: "Número inválido", message: "No es un formato
  numérico válido"}

- window.onerror = function(msg, url, line) {
  alert("Mensaje: " + msg + "\nURL: " + url + "\nLinea: " + line);
  return true; }
- <img src="imagenNoExiste.jpg" onerror="imageErrorHandler()" />
  function imageErrorHandler(msg, url, line) {alert("Hay un problema
  con la imagen");}

- var fecha = new Date(); fecha = new Date("March 26, 2015 11:06:00");
- var fecha = new Date(year, month, day, hour, minute, second, millisecond);
- fecha.getFullYear(); fecha.getMonth(); fecha.getDate(); fecha.getDay();
  fecha.getHours(); fecha.getMinutes(); fecha.getSeconds();

- var idIntervalo = window.setInterval(funcion, intervaloMilisegundos);
  window.clearInterval(idIntervalo);
- var idTemporizador = window.setTimeout(funcion, esperaMilisegundos);
  window.clearTimeout(idTemporizador);

- if (confirm("¿Está seguro?")) {return true; } else {return false;}
  onclick="return confirmOnSubmit()"

- Atributos de la propiedad style (ver aquí).
- Eventos de elementos: onclick, onblur, onmouseover, onmouseout,...
- Eventos de DOM: document.getElementById("idElemento").onmouseover =
  nombreFuncion;
- idBtn.addEventListener("mouseover", changeColorOnMouseOver, false);
- idBtn.removeEventListener("mouseover", changeColorOnMouseOver);
  (Disponibles en IE9+ y otros navegadores modernos).
- idBtn.attachEvent("onclick", clickEventHandler);
- idBtn.detachEvent("onclick", clickEventHandler);
  (Soportado en IE8 y versiones anteriores)
- if (btn.addEventListener) {... (será true para IE9+ y otros navegadores
  modernos).
- <input type="button" value="Pulsar" id="btn"
  onclick="obtenerDetallesEvento(event)" />
  function obtenerDetallesEvento(event) {   
     var sourceElement;
     if (event.srcElement) {   //soportado en IE8-
        sourceElement = event.srcElement;
     } else {
        sourceElement = event.target;   //soportado en IE9+ y otros
     }
     return event.type + " " + event.clientX + " " + event.clientY + " " +
     sourceElement.type + " " + sourceElement.tagName;
  }

- Utilizar event bubbling para evitar asignar manejador en muchas ocasiones.
- Se puede activar event capturing poniendo el último parámetro del
  método .addEventListener a TRUE. Si es FALSE, se produce event
  bubbling. Se pueden activar los dos si se añade dos veces el manejador con
  los valores distintos para el último parámetro.
- Cancelar event bubbling:
  event = event || window.event;  //por compatibilidad con IE8-
  if (event.stopPropagation) {
    event.stopPropagation();  //IE9+ y otros
  } else {
    event.cancelBubble = true;  //IE8-
  }

- Evitar funcionamiento por defecto del navegador (click botón derecho,
  pulsar enlace):
  <body oncontextmenu="return false">
  document.oncontextmenu = deshabilitaPorDefecto;

  function deshabilitaPorDefecto(event) {
    event = event || window.event;
    if (event.preventDefault) {  //IE9+ y otros
      event.preventDefault();
    } else {
      event.returnValue = false;  //IE8-
    }

  Prevenir que un enlace nos lleve a otra página:
  <a href="http://www.google.com" onclick="return false" >Google</a>
  <a href="http://www.google.com" onclick="deshabilitaPorDefecto(event)">
  Google
  </a>

- Detectar el botón del ratón pulsado:
  <input type="button" value="Click me" onmouseup="obtenerClickRaton(event)" />
  function obtenerClickRaton(event) {
    var botonPulsado;
    if (event.which)  {
      botonPulsado = event.which;  //IE9+ y otros
    } else {
      botonPulsado = event.button;  //IE8-
    }
  }

- Ventanas emergentes:
  window.open(URL, nombre, caracteristicas, reemplazar);
  <input type="button" value="Abrir ventana"
  onclick="window.open('http://www.google.com', '_self ', 'height=100,width=150',
  false)" />

  var ventana;
  function abrirVentana() {
    ventana = window.open("http://www.google.com", "ventana", "height=100,
    width=100");
  }
  function cerrarVentana() { ventana.close(); }


- Expresiones regulares:
  Herramienta gratuíta: Expresso Librería de expresiones: Regexlib
  var valor= document.getElementById("txtCadena").value;
  var resultado = valor.match(/\d+/g);
  if (resultado != null) {
    for (var i=0; i<resultado.length;i++) {
      document.getElementById("txtResultado").value += resultado[i] + "\r\n";
    }
  }
    \d: valor numérico (\d+: 1 o varios elementos numéricos consecutivos)
    /g: búsqueda global
    \d{5,}: números de 5 dígitos o más ---  \b\d{4}\b:  números de justo 4 dígitos
    [0-9]{5}: equivalente al anterior
    \b[a-zA-Z]\b: palabras con letras sin tilde
    [a|b|c]: busca cualquiera de los caracteres incluídos

  var cadena="Cadena con números: 10 11 222";
  cadena.match(/\d+/g); //g: global, i: insensible a mayúsculas y minúsculas,
  m: multilínea
  cadena.replace("/\d+/g, "XXX");  //reemplaza números por XXX
  cadena.split("/\d+/");
  var posicion = cadena.search(/\d+/);

  var regexp = /\d+/g;   //expresión regular literal (mejor rendimiento si
  la expresión regular no varía)
  var regexp = new RegExp("\\d+", "gim");  //global, ignore case, multiline
  regexp.exec(cadena);  //busca coincidencia y devuelve la primera encontrada
  regexp.test(cadena); //busca coincidencia y devuelve true o false
  regexp.toString();  //devuelve cadena con la expresión regular
  regexp.global; regexp.ignoreCase; regexp.multiline; regexp.source;

- Validación lado cliente:
  function validarLogName() {
    var txtName = document.getElementById("txtName");
    var name= txtName.value;
    var regExName = /[a-zA-Z0-9]+/;

    txtName.style.color = "white";
    if (regExName.text(name))
      txtName.style.backgroundColor = "green";
    else
      txtName.style.backgroundColor = "red";
  }

- Herramientas para reducir código Javascript (minification):
  - http://crockford.com/javascript/jsmin
  - https://marijnhaverbeke.nl/uglifyjs (online)