El atributo de autofoco permite al usuario decidir y controlar qué campo
de texto debe ser enfocado (señalado, activado) en cuanto la página es
cargada o se esté cargando, permitiendo al usuario comenzar a escribir
sin tener él que especificar cual es su campo de texto principal en su
página. El atributo de autofoco es un atributo boleano (respuesta true -
false) y no deberá haber más de un elemento en la página.

Muchos sitios utilizan JavaScript para focalizar y dirigir el cursor
automáticamente al campo de texto. Por ejemplo Google cuando
comienza a cargar su página dirigirá el cursos a su input de búsqueda
automáticamente para que puedas empezar a escribir tus palabras de
búsqueda en su navegador. Esto puede ser conveniente para algunos y
para otros que pueden tener una necesidad específica no tanto. Si
aprietas la barra de espacio esperando que la página baje haciendo un
scroll, esto no sucederá porque está enfocado el input del formulario.
HTML5 introduce un atributo de control de autofoco en los formularios.
El atributo autofoco hace exactamente lo que suena, en cuanto la web se
comienza a cargar, mueve el cursor y así la atención del usuario a un
campo <input> particular.

A día de hoy, Autofocus solo lo soportan Safari, Chrome y Opera. Firefox e
IE, lo ignorarán.

<form>
<input name="b" autofocus>
<input type="submit" value="Search">
</form>

Placeholder es un nuevo atributo que se utiliza dentro de los campos
input. Sirve para mostrar un texto dentro del input siempre y cuando el
campo esté vacío o no esté señalado. En cuanto se haga clic dentro del
campo (o se llegue por el TAB), el texto desaparecerá.
Seguramente ha visto la propiedad Placeholder antes. Por ejemplo,
Mozilla Firefox 3.5 incluye textos placeholder en la barra de localización.

Cuando se hace clic sobre la barra de búsqueda o se llega por un tab, el
texto preestablecido desaparece.

Irónicamente Firefox no da soporte a esta propiedad, al igual que IE y
Opera, solo es compatible (a día de hoy) con Safari y Chrome. Aquellos
navegadores que no soporten placeholder simplemente lo ignorarán y
no mostrarán nada.
Aquí hay un ejemplo de cómo se puede incluir placeholder en un formulario:

<form>
<input placeholder="Buscar en la base de datos">
<input value="Buscar">
</form>

En el primer capítulo de esta charla sobre HTML5, mencionamos por
arriba sobre los cambios en los formularios que incluye el HTML5.
Como norma para todos, un formulario es una etiqueta <form> y en su
interior algunos elementos <input type="text"> o <input type="password">
finalizado con un botón <input type="submit"> y ya
está. A continuación explicaremos algunas de estas novedades.

La geolocalización es la forma de suponer donde te encuentras en el
mundo y si quieres, compartir información con gente de confianza.
Existen muchas maneras de descubrir donde te encuentras, por tu
dirección IP, la conexión de red inalámbrica, la torre de telefonía móvil
por la que habla tu teléfono móvil (celular), o GPS específicos que reciben
las coordenadas de longitud y la latitud de satélites que están ene el cielo.

Leer página webs offline es relativamente sencillo. Te conectas a Internet,
cargas una web, te desconectas y puedes sentarte tranquilamente a leer.
¿Pero qué sucede cuando son aplicaciones como Gmail o Google Docs?
Gracias al HTML5 cualquiera puede crear una aplicación web que
funcione offline.

Las aplicaciones web offline se ejecutan como una aplicación online. La
primera vez que se visita una web offline que esté disponible, el servidor
web le dirá a al navegador los ficheros que necesita para poder trabajar
desconectado. Estos ficheros pueden ser, HTML, JavaScript, imágenes y
hasta videos. Una vez que el navegador ha descargado los ficheros
necesarios podrás volver a visitar la web aunque no estés conectado a
Internet. El navegador reconocerá que estás desconectado de Internet y
utilizará los ficheros que había descargado con anterioridad. La próxima
vez que te conectes, si has realizado cambios en la web offline, estos se
subirán al servidor actualizándolo.

Los formatos de video son como los lenguajes escritos. Un periódico en
inglés contiene la misma información que un periódico en español,
aunque solo uno le será útil. Con los navegadores pasa lo mismo,
necesitan saber en qué "idioma" está escrito el video.
Los lenguajes de los videos se llaman "codecs" un algoritmo utilizado
para compactar un video. Existen docenas de codecs en uso en todo el
mundo, aunque dos son los más relevantes. Uno de estos codecs cuesta
dinero por la licencia de la patente, y funciona en safari y los iphones. El
otro codec es gratis y de código abierto y funciona en navegadores como
Chromium y Firefox.

El HTML5 ha definido un nuevo elemento llamado <video> para incrustar
video en las páginas de la web. Actualmente insertar un video en la web
era imposible sin determinados plugins como el QuickTime o el Flash.
El elemento <video> ha sido diseñado para utilizarlo sin la necesidad de
que tenga que detectar ningún script. Se pueden especificar múltiples
ficheros de video y los navegadores que soporten el video en HTML5
escogerán uno basado en el formato que soporte.

Si tu navegador soporta las API de canvas no quiere decir que pueda
soportar las API para texto-canva. Las API de canva se han ido generando
con el tiempo y las funciones de texto se han añadido posteriormente,
por lo que algunos navegadores puede que no tengan integrado las API
para texto.

HTML 5 define el elemento <canvas> como un rectángulo en la página
donde se puede utilizar Java Script para dibujar cualquier cosa. También
determina un grupo de funciones (canvas API) para dibujar formas, crear
gradientes y aplicar transformaciones.

Modernizr es una librería de JavaScript con licencia MIT de código
abierto que detecta si son compatibles muchos elementos para HTML5 y
CSS3. Dicha librería se irá actualizando y para utilizarla solo hay que
incluir en <head><script> de tu página.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dive Into HTML5</title>
<script src="modernizr.min.js"></script>
</head>
<body>
...
</body>
</html>

Modernizr se ejecuta automáticamente, no es necesario llamar a
ninguna función tipo: modernizr_init(). Cuando se ejecuta, se crea una
objeto global llamado Modernizr, que contiene un set de propiedades
Boleanas para cada elemento que detecta. Por ejemplo si su navegador
soporta elementos canvas, la propiedad de la librería Modernizr.canvas
será "true". Si tu navegador no soporta los elementos canvas, la
propiedad Modernizr.canvas será "false".

if (Modernizr.canvas) {
// a crear formas!!
} else {
// no hay soporte para canvas, los siento

Una pregunta muy común en estos tiempos es: "¿Cómo puedo empezar a
utilizar HTML5 si existen navegadores antiguos que no lo soportan?" Pero
la pregunta en sí se ha formulado de forma errónea. El HTML5 no es una
cosa grande como un todo, sino una colección de elementos individuales,
por consiguiente lo que sí se podrá será detectar si los navegadores
soportan cada elemento por separado.

Cuando los navegadores realizan un render de una página, construyen un
"Modelo de Objeto de Documento" (Document Object Model - DOM),
una colección de objetos que representan los elementos del HTML en la
página. Cada elemento - <p>, <div>, <span> - es representado en el
DOM por un objeto diferente.

Todos los objetos DOM comparten unas características comunes, aunque
algunos tienen más que otros. En los navegadores que soportan rasgos
del HTML5, algunos objetos tienen una única propiedad y con una simple
ojeada al DOM podremos saber las características que soporta el
navegador.

Existen cuatro técnicas básicas para saber cuando un navegador soporta
una de estas particulares características, desde las más sencillas a las más
complejas.

1. Comprueba si determinadas propiedades existen en objetos
genéricos o globales (como window o navigator).
Ejemplo: comprobar soporte para la "Geolocalización".

2. Crear un elemento, luego comprobar si determinadas
propiedades existen en ese elemento.
Ejemplo: comprobar soporte para canvas.

3. Crear un elemento, comprobar si determinados métodos existen
en ese elemento, llamar el método y comprobar los valores que
devuelve.

Ejemplo: comprobar qué formatos de video soporta.

4. Crear un elemento, asignar una propiedad a determinado valor,
entonces comprobar si la propiedad mantiene su valor.
Ejemplo: comprobar que tipo de <input> soporta.

<audio> y <video> - Nuevos elementos que permitirán incrustar un
contenido multimedia de sonido o de vídeo, respectivamente. Es una de
las novedades más importantes e interesantes en este HTML5, ya que
permite reproducir y controlas vídeos y audio sin necesidad de plugins
como el de Flash.

El comportamiento de estos elementos multimedia será como el de
cualquier elemento nativo, y permitirá insertar en un video, enlaces o
imágenes, por ejemplo. Youtube, ya ha anunciado que deja el Flash y
comienza a proyectar con HTML5.

<embed> - Se emplea para contenido incrustado que necesita plugins
como el Flash. Es un elemento que ya reconocen los navegadores, pero
ahora al formar parte de un estándar, no habrá conflicto con <object>.

<canvas> - Este es un elemento complejo que permite que se generen
gráficos al hacer dibujos en su interior. Es utilizado en Google Maps y en
un futuro permitirá a los desarrolladores crear aplicaciones muy
interesantes.

El elemento input adquiere gran relevancia al ampliarse los elementos
que se permitiran en el "type".

<input type="search">

para cajas de búsqueda.

<input type="number">

para adicionar o restar números mediante botones.

<input type="range">

para seleccionar un valor entre dos valores predeterminados.

<input type="color">

seleccionar un color.

<input type="tel">

números telefónicos.

<input type="url">

direcciones web.

<input type="email">

direcciones de email.

<input type="date">

para seleccionar un día en un calendario.

<input type="month">

para meses.

<input type="week">

para semanas.

<input type="time">

para fechas.

<input type="datetime">

para una fecha exacta, absoluta y tiempo.

<input type="datetime-local">

para fechas locales y frecuencia.

Esta imagen ilustra el capitulo anterior

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

saludos!

Actualmente es abusivo el uso de elementos DIV para estructurar una
web en bloques. El HTML5 nos brinda varios elementos que perfeccionan
esta estructuración estableciendo qué es cada sección, eliminando así DIV
innecesarios. Este cambio en la semántica hace que la estructura de la
web sea más coherente y fácil de entender por otras personas y los
navegadores podrán darle más importancia a según qué secciones de la
web facilitándole además la tarea a los buscadores, así como cualquier
otra aplicación que interprete sitios web. Las webs se dividirán en los
siguientes elementos:

<section></section> - Se utiliza para representar una sección
"general" dentro de un documento o aplicación, como un capítulo
de un libro. Puede contener subsecciones y si lo acompañamos de
h1-h6 podemos estructurar mejor toda la página creando
jerarquías del contenido, algo mu favorable para el buen
posicionamiento web.

<article></article> - El elemento de artículo representa un
componente de una página que consiste en una composición
autónoma en un documento, página, aplicación, o sitio web con la
intención de que pueda ser reutilizado y repetido. Podría utilizarse
en los artículos de los foros, una revista o el artículo de periódico,
una entrada de un blog, un comentario escrito por un usuario, un
widget interactivo o gadget, o cualquier otro artículo
independiente de contenido.
Cuando los elementos de <article> son anidados, los elementos
de <article> interiores representan los artículos que en principio
son relacionados con el contenido del artículo externo. Por
ejemplo, un artículo de un blog que permite comentarios de
usuario, dichos comentarios se podrían representar con <article>.

<aside></aside> - Representa una sección de la página que
abarca un contenido tangencialmente relacionado con el
contenido que lo rodea, por lo que se le puede considerar un
contenido independiente. Este elemento puede utilizarse para
efectos tipográficos, barras laterales, elementos publicitarios, para
grupos de elementos de la navegación, u otro contenido que se
considere separado del contenido principal de la página.

<header></header> - Elemento <header> representa un grupo
de artículos introductorios o de navegación.

<nav></nav> - El elemento <nav> representa una sección de
una página que es un link a otras páginas o a partes dentro de la
página: una sección con links de navegación.
No todos los grupos de enlaces en una página tienen que estar en
un elemento <nav>, sólo las secciones que consisten en bloques
principales de la navegación son apropiadas para ser utilizadas
con el elemento <nav>. Puede utilizarse particularmente en el pie
de página para tener un menú con un listado de enlaces a varias
páginas de un sitio, como el Copyright; home page, política de uso
y privacidad. No obstante, el elemento <footer> es plenamente
suficiente sin necesidad de tener un elemento <nav>.

<footer></footer> - El elemento <footer> representa el pié de
una sección, con información acerca de la página/sección que
poco tiene que ver con el contenido de la página, como el autor, el
copyright o el año.

El HTML5 (HyperText Markup Language, versión 5) es la quinta revisión
del lenguaje de programación "básico" de la World Wide Web, el HTML.
Esta nueva versión pretende remplazar al actual (X)HTML, corrigiendo
problemas con los que los desarrolladores web se encuentran, así como
rediseñar el código actualizandolo a nuevas necesidades que demanda la
web de hoy en día.
Debido a que estos cambios afectaran la forma de desarrollar la web en
un futuro inmediato, desde The Process, plantearemos una serie de
artículos donde desvelaremos los cambios más importantes.
Actualmente el HTML5 está en un estado BETA, aunque ya algunas
empresas están desarrollando sus sitios webs en esta versión del
lenguaje. A diferencia de otras versiones de HTML, los cambios en HTML5
comienzan añadiendo semántica y accesibilidad implícitas, especificando
cada detalle y borrando cualquier ambigüedad. Se tiene en cuenta el
dinamismo de muchos sitios webs (facebook, twenti, etc), donde su
aspecto y funcionalidad son más semejantes a aplicaciones webs que a
documentos.

Primera Parte
- Introducción
- Mejor estructura
- Mejoras en los formularios
- Otros elementos muy interesantes
Segunda Parte
- Introducción
- MODERNIZR, una biblioteca para detectar HTML5.
- Canvas
- Texto Canvas
- Video
- Formatos de video
- Aplicaciones OFFline
- Geolocalización
Tercera Parte
- Introducción
- Texto como PLACEHOLDER
- Campos con autofocus

saludos!

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Ahh vale, al final es cuestión de gustos y la "costumbre" en la forma de programar que cada uno tiene
Zalu2

exacto jejeje

saludos!

Consejos para escribir código Javascript

En este artículo puedes encontrar varios consejos bastante interesantes a la hora de programar código Javascript.
Por Manu Gutierrez

Atención: Contenido exclusivo de You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login.
Si estas dando tus primeros pasos en Javacript y estas empezando ya a ser sucio y desordenado... No tienes excusa da un giro para escribir el código ordenado y todo será más sencillo.

Los foros estan llenos de peticiones de información sobre Ajax, DOM y como se usan algunas librerías o efectos. Hay una extraordinaria cantidad de información, scripts, librerías que estan siendo desarrollados, blogs y nuevos sitios especializados en esta temática, sólo necesitas un poco de tiempo y echarle un vistazo... es muy fácil los mejores los encuentras en You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login o en You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login, se acabaron aquellos días en el que Javascript y el DHTML se convirtieron en persona non grata como habilidad principal en tu CV.

La gran mayoría de código Javascript es hoy en dia mucho más limpio que en la "era" DHTML.

Ahora es un buen momento para convertirte en un entusiasta de Javascript. Aunque algunos defectos que ocurrieron tiempo atras se repiten sin embargo.

Aquí os dejo una series de consejos que os hará más sencillo mantener tu código Javascript ordenado, algunos consejos son demasiado obvios pero todos sabemos que el hombre es el único animal que...
Conserva la sintaxis y estructura de tu código limpia y ordenada
Esto significa que guardes por ejemplo un límite de longitud de línea (80 caracteres) y que programes funciones razonablemente pequeñas. Un fallo es pensar que en una función larga lo podemos hacer todo.

Tener un tamaño razonable para tus funciones significa que las podrás reutilizar cuando amplies el código, tampoco seas extremista y hagas funciones de una o dos líneas esto puede llegar a ser más confuso que usar una única función.

Este es un ejemplo que muestra cual es la justa medida en cuanto al tamaño de las funciones y la división de las tareas:

function toolLinks(){
var tools = document.createElement('ul');
var item = document.createElement('li');
var itemlink = document.createElement('a');
itemlink.setAttribute('href', '#');
itemlink.appendChild(document.createTextNode('close'));
itemlink.onclick = function(){window.close();}
item.appendChild(itemlink);
tools.appendChild(item);
var item2 = document.createElement('li');
var itemlink2 = document.createElement('a');
itemlink2.setAttribute('href', '#');
itemlink2.appendChild(document.createTextNode('print'));
itemlink2.onclick = function(){window.print();}
item2.appendChild(itemlink2);
tools.appendChild(item2);
document.body.appendChild(tools);
}

Puedes optimizar esta función separando cada tarea con su propia función:

function toolLinks(){
var tools = document.createElement('ul');
var item = document.createElement('li');
var itemlink = createLink('#', 'close', closeWindow);
item.appendChild(itemlink);
tools.appendChild(item);
var item2 = document.createElement('li');
var itemlink2 = createLink('#', 'print', printWindow);
item2.appendChild(itemlink2);
tools.appendChild(item2);
document.body.appendChild(tools);
}

function printWindow(){
window.print();
}

function closeWindow() {
window.close();
}

function createLink(url,text,func){
var temp = document.createElement('a');
temp.setAttribute('href', url);
temp.appendChild(document.createTextNode(text));
temp.onclick = func;
return temp;
}

Utiliza inteligentemente los nombres de variables y funciones
Esta es un técnica esencial de programación, utiliza nombres de variables y funciones que sean totalmente descriptivos e incluso otra persona pueda llegar a plantearse que función realizan antes de ver el código.
Recuerda que es correcto el uso de guiones o mayúsculas para concatenar diferentes palabras, en este caso concreto de es más típico el uso de mayúsculas debido a la sintaxis del lenguaje, (ej. getElementsByTagName()).

CambioFormatoFecha();
cambio_formato_fecha();

Comenta el código
Gracias a los comentarios puedes librarte de más de un quebradero de cabeza, es mejor resolver el problema una única vez.

Cómo puedes comprobar en cualquier libro de programación cada línea tiene comentarios explicando su objetivo.
Diferencia las variables dependiendo de su importancia
Este paso es simple: Coloca aquellas variables que son usadas durante todo el script en la cabecera del código, de esta maneras siempre sabrás donde encontrar estas variables que son las que determinan el resultado de nuestro código.

function toolLinks(){
var tools, closeWinItem, closeWinLink, printWinItem, printWinLink;

// variables temporales
var printLinkLabel = ?print?;
var closeLinkLabel = ?close?;#

tools = document.createElement(?ul?);
closeWinItem = document.createElement(?li?);
closeWinLink = createLink(?#', closeLinkLabel, closeWindow);
closeWinItem.appendChild(closeWinLink);
tools.appendChild(closeWinItem);
printWinItem = document.createElement(?li?);
printWinLink = createLink(?#', printLinkLabel, printWindow);
printWinItem.appendChild(printWinLink);
tools.appendChild(printWinItem);
document.body.appendChild(tools);
}

Separa el texto del código
Puedes separar el texto del código, utilizando un documento llamado texto.js en formato JSON.

Un ejemplo que funciona muy bien podría ser:

var locales = {
'en': {
'homePageAnswerLink':'Answer a question now',
'homePageQuestionLink':'Ask a question now',
'contactHoverMessage':'Click to send this info as a message',
'loadingMessage' : 'Loading your data...',
'noQAmessage' : 'You have no Questions or Answers yet',
'questionsDefault': 'You have not asked any questions yet',
'answersDefault': 'You have not answered any questions yet.',
'questionHeading' : 'My Questions',
'answersHeading' : 'My Answers',
'seeAllAnswers' : 'See all your Answers',
'seeAllQuestions' : 'See all your Questions',
'refresh': 'refresh'
},
'es': {
'homePageAnswerLink':'Responde una pregunta',
'homePageQuestionLink':'Haz una pregunta',
'contactHove' : 'Cargando datos...',
'noQAmessage' : 'No quedan preguntas',
'questionsDefault': 'Quedan preguntas por responder',
'answersDefault': 'No quedan preguntas pendientes',
'questionHeading' : 'Mis preguntas',
'answersHeading' : 'Mis respuestas',
'seeAllAnswers' : 'Ver todas las respuestas',
'seeAllQuestions' : 'Ver todas las preguntas',
'refresh': 'Refrescar'
},
'fr': {
}
'de': {
}
};

Esto permitiría a cualquiera que no es programador traducir el texto del script, cambiando unicamente las etiquetas sin necesidad de acceder al código.

Documenta el código
Escribe una buena documentacion de tu script / librería o efecto. Una buena documentación da calidad al código, sino preguntate porque existe la clásica documentación en cualquier API con todas las posibles propiedades y parametros, pero sin duda lo mejor de todo es explicar con ejemplos que contienen una lista de posibilidades.

Tratamiento de errores en javascript

Vamos a explicar los errores comunes que podemos cometer y cómo evitarlos y depurarlos. Además veremos una pequeña conclusión a la primera parte del manual.
Por Miguel Angel Alvarez

Atención: Contenido exclusivo de You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login.
Hemos terminado ya de explicar todo el contenido de la primera parte del manual de javascript, pero aun tenemos algunas cosas importantes que tratar. En concreto en este artículo vamos a explicar los errores comunes que podemos cometer y cómo evitarlos y depurarlos. Además veremos una pequeña conclusión a esta parte del manual.

Errores comunes en Javascript
Cuando ejecutamos los scripts pueden ocurrir dos tipos de errores de sintaxis o de ejecución, los vemos a continuación.

Errores de sintaxis ocurren por escribir de manera errónea las líneas de código, equivocarse a la hora de escribir el nombre de una estructura, utilizar incorrectamente las llaves o los paréntesis o cualquier cosa similar. Estos errores los indica javascript a medida que está cargando los scripts en memoria, lo que hace siempre antes de ejecutarlos, como se indicó en los primeros capítulos. Cuando el analizador sintáctico de javascript detecta un error de estos se presenta el mensaje de error.

Errores de ejecución ocurren cuando se están ejecutando los scripts. Por ejemplo pueden ocurrir cuando llamamos a una función que no ha sido definida. javascript no indica estos errores hasta que no se realiza la llamada a la función.

La manera que tiene javascript de mostrar un error puede variar de un navegador a otro. En versiones antiguas se mostraba una ventanita con el error y un botón de aceptar, tanto en Internet Explorer como en Netscape. En la actualidad los errores de javascript permanecen un poco más ocultos al usuario. Esto viene bien, porque si nuestras páginas tienen algún error en alguna plataforma no será muy molesto para el usuario que en muchas ocasiones ni se dará cuenta. Sin embargo para el programador puede ser un poco más molesto de revisar y se necesitará conocer la manera de que se muestren los errores para que puedan ser reparados.

En versiones de Internet Explorer mayores que la 4 se muestra el error en la barra de estado del navegador y se puede ver una descripción más grande del error si le damos un doble click al icono de alerta amarillo que aparece en la barra de estado. En Netscape aparece también un mensaje en la barra de estado que además nos indica que para mostrar más información debemos teclear "javascript:" en la barra de direcciones (donde escribimos las URL para acceder a las páginas). Con eso conseguimos que aparezca la Consola javascript, que nos muestra todos los errores que se encuentran en las páginas.

También podemos cometer fallos en la programación que hagan que los scripts no funcionen tal y como deseábamos y que javascript no detecta como errores y por lo tanto no muestra ningún mensaje de error.

Por dejarlo claro vamos a ver un ejemplo en el que nuestro programa puede no funcionar como deseamos sin que javascript ofrezca ningún mensaje de error. En este ejemplo trataríamos de sumar dos cifras pero si una de las variables es de tipo texto podríamos encontrarnos con un error.

var numero1 = 23
var numero2 = "42"
var suma = numero1 + numero2

¿Cuánto vale la variable suma? Como muchos ya sabéis, la variable suma vale "2342" porque al intentar sumar una variable numérica y otra textual, se tratan a las dos como si fueran de tipo texto y por lo tanto, el operador + se aplica como una concatenación de cadenas de caracteres. Si no estamos al tanto de esta cuestión podríamos tener un error en nuestro script ya que el resultado no es el esperado y además el tipo de la variable suma no es numérico sino cadena de caracteres.
Evitar errores comunes
Vamos a ver ahora una lista de los errores típicos cometidos por inexpertos en la programación en general y en javascript en particular, y por no tan inexpertos.

Utilizar = en expresiones condicionales en lugar de == es un error difícil de detectar cuando se comete, si utilizamos un solo igual lo que estamos haciendo es una asignación y no una comparación para ver si dos valores son iguales.

No conocerse la precedencia de operadores y no utilizar paréntesis para agrupar las operaciones que se desea realizar. En este caso nuestras operaciones pueden dar resultados no deseados.

Usar comillas dobles y simples erróneamente. Recuerda que se pueden utilizar comillas dobles o simples indistintamente, con la norma siguiente: dentro de comillas dobles se deben utilizar comillas simples y viceversa.

Olvidarse de cerrar una llave o cerrar una llave de más.

Colocar varias sentencias en la misma línea sin separarlas de punto y coma. Esto suele ocurrir en los manejadores de eventos, como onclick, que veremos más adelante.

Utilizar una variable antes de inicializarla o no declarar las variables con var antes de utilizarlas también son errores comunes. Recuerda que si no la declaras puedes estar haciendo referencia a una variable global en lugar de una local.

Contar las posiciones de los arrays a partir de 1. Recuerda que los arrays empiezan por la posición 0.
Depurar errores javascript
Cualquier programa es susceptible de contener errores. javascript nos informará de muchos de los errores de la página: los que tienen relación con la sintaxis y los que tienen lugar en el momento de la ejecución de los scripts a causa de equivocarnos al escribir el nombre de una función o una variable. Sin embargo, no son los únicos errores que nos podemos encontrar, también están los errores que ocurren sin que javascript muestre el correspondiente mensaje de error, como vimos anteriormente, pero que hacen que los programas no funcionen como esperábamos.

Nota: Para aprender a utilizar las herramientas de detección de errores Javascript más populares, recomendamos especialmente ver el videotutorial sobre detectar errores Javascript en páginas web.

Para todo tipo de errores, unos más fáciles de detectar que otros, debemos utilizar alguna técnica de depuración que nos ayude a encontrarlos. Lenguajes de programación más potentes que el que tratamos ahora incluyen importantes herramientas de depuración, pero en javascript debemos contentarnos con una rudimentaria técnica. Se trata de utilizar una función predefinida, la función alert() que recibe entre paréntesis un texto y lo muestra en una pequeña ventana que tiene un botón de aceptar.

Con la función alert() podemos mostrar en cualquier momento el contenido de las variables que estamos utilizando en nuestros scripts. Para ello ponemos entre paréntesis la variable que deseamos ver su contenido. Cuando se muestra el contenido de la variable el navegador espera a que apretemos el botón de aceptar y cuando lo hacemos continúa con las siguientes instrucciones del script.

Este es un sencillo ejemplo sobre cómo se puede utilizar la función alert() para mostrar el contenido de las variables.

var n_actual = 0
var suma = 0
while (suma<300){
    n_actual ++
    suma += suma + n_actual
    alert("n_actual vale " + n_actual + " y suma vale " + suma)
}

Con la función alert() se muestra el contenido de las dos variables que utilizamos en el script. Algo similar a esto es lo que tendremos que hacer para mostrar el contenido de las variables y saber cómo están funcionando nuestros scripts, si todo va bien o hay algún error.

Conclusión
Hasta aquí hemos conocido la sintaxis javascript en profundidad. Aunque aun nos quedan cosas importantes de sintaxis, la visión que has podido tener del lenguaje será suficiente para enfrentarte a los problemas más fundamentales. En adelante presentaremos otros reportajes para aprender a utilizar los recursos con los que contamos a la hora de hacer efectos en páginas web.

Veremos la jerarquía de objetos del navegador, cómo construir nuestros propios objetos, las funciones predefinidas de javascript, características del HTML Dinámico, trabajo con formularios y otras cosas importantes para dominar todas las posibilidades del lenguaje.

Todo ello en nuestro manual de Javascript II y en el Taller de Javascript