Malas costumbres que deberían evitarse

[David]

En estos días conversando con un compañero del foro (jseros) comentábamos la importancia de advertir a los nuevos programadores de las malas costumbres que deberían evitarse.

Entonces decidí abrir este tema para hacer una lista de las ocurrencias más comunes de código no accesible o que por alguna razón se considera generalmente una mala costumbre en el uso de Javascript.

Básicamente podría tener un formato así:
Descripción:
Código Incorrecto:
Solución:

Agradezco a todos la participación. Espero que entre todos podamos aprender algo del tema.

Saludos .

[David]

Descripción: Envío de formulario por Javascript.
Muchas veces nos encontramos con que algunos códigos envían el formulario mediante Javascript cuando eso se convierte en un problema de Accesibilidad, si Javascript estuviera desactivado no podríamos enviar el formulario. Lo más aconsejable en la mayoría de los casos es usar un botón de tipo submit.

Código Incorrecto:

Código HTML:

<form method="post" action="enviar.php">
<input type="text" name="campo" value="Texto" />
<input type="button" onclick="valida(this.form)" value="Enviar" />
</form> 

Código PHP:

  function valida(form) {
if (form.campo.value=="") {
     alert("Campo Vacío");
     form.campo.focus();
     return false
  }
form.submit();
}  
   

Solución:

Código HTML:

<form method="post" action="enviar.php" onsubmit="return valida(this)">
<input type="text" name="campo" value="Texto" />
<input type="submit" value="Enviar" />
</form> 

Código PHP:

  function valida(form) {
if (form.campo.value=="") {
     alert("Campo Vacío");
     form.campo.focus();
     return false;
  }
return true;
}  
   

[David]

Descripción: Simular formulario por Javascript.
Este error es parecido al anterior, pero en este caso lo que algunos hacen es no usar el formulario como tal sino hacer la redirección por Javascript y usar el método GET para tomar el valor de las variables enviadas. La razón por la que algunos lo hacen es que no les gusta el botón submit , una opción a eso sería cambiar su apariencia usando estilos.

Código Incorrecto:

Código HTML:

<input type="text" name="campo" id="campo" value="Texto" />
<input type="button" onclick="location.href='enviar.php?campo=' + document.getElementById('campo').value;" value="Enviar" /> 

Solución:
Usar un formulario como debe ser, y si de todos modos no te gusta el botón submit cambiar su apariencia con estilos.

[AlvaroG]

Descripción: Redirección con Javascript
Claramente no hay muchas opciones cuando se trabaja solamente con Javascript y HTML, pero hay veces que lo vemos en combinación con código PHP.
Cuando se usa un lenguaje del lado del servidor, la redirección debe hacerse con ese lenguaje. Además de que se debe considerar la posibilidad de que el navegador no tenga habilitado Javascript.

Código incorrecto:

Código PHP:

  echo '<script type="text/javascript">window.location.href = "nuevapagina.html";</script>'  
   

Solución:
Si ya se está usando un lenguaje del lado del servidor, mejor enviar la cabecera HTTP correspondiente. Por ejemplo, en PHP:

Código PHP:

  header('Location: nuevapagina.html');  
   

[derkenuke]

Buen hilo David, creo que es una buena idea:

Descripción: Inclusión de código javascript en un documento.
La fórmula idónea de incluir javascript en un documento es mediante un documento js externo. Tanto si vamos a incluirlo en la misma página como si referenciamos un documento js, es obligatorio omitir el atributo language. Sólo es necesario el type. El elemento Script tiene el atributo language desaprobado, aunque como en multitud de tutoriales antiguos está colocado, y algunas personas lo siguen colocando sin saberlo. Además los programadores se inventan valores como Javascript, Javascript1.2, y un largo etcétera que están contemplados en ningún sitio.


Código incorrecto:

Código PHP:

  <script language="javascript1.2"> 
// mi código 
</script>  
  

Solución:

Código PHP:

  <script type="text/javascript"> 
<!-- 
 
//mi código 
 
// --> 
</script>  
  

Los comentarios HTML (<!-- y -->) entre las etiquetas SCRIPT son necesarios para poder obtener código válido.

[venkman]

derkenuke, en realidad esto último depende del tipo de documento que estés declarando y usando. No es lo mismo en HTML 4, que en XHTML 1 o si los declaras como strict o no, o si los sirves como text/html o como xml...

[David]

Volviendo a este tema después de un rato:
Descripción: Uso de cadenas de texto como código.
Este error es frecuente al trabajar con setTimeout() o setInterval() o hasta al asignar funciones para manejar ciertos eventos (usando setAttribute(), con el consiguiente problema de que tampoco funciona en todos los navegadores).
Código Incorrecto:

Código Javascript:

setTimeout("funcion()", 1000);
 

Código Javascript:

elemento.setAttribute("onclick", "funcion()");
 

Solución: Asignar directamente la función que corresponde, en el caso de los eventos usar los métodos addEventListener y attachEvent.

Código Javascript:

setTimeout(funcion, 1000);
 

Código Javascript:

function addEvent(elem, evt, fn, capture) {
    if (elem.addEventListener) {
        elem.addEventListener(evt, fn, capture);
    } else if (elem.attachEvent) {
        elem.attachEvent('on' + evt, fn);
    }
}
addEvent(elemento, 'click', funcion, false);