Conceptos básicos

JavaScript es un lenguaje interpretado en el cliente por el navegador al momento de cargarse la pagina, es multiplataforma, orientado a eventos con manejo de objetos, cuyo código se incluye directamente en el mismo documento HTML.

Hasta entonces ya se usaba HTML y JAVA, pero la aparición del JavaScript produjo una importante revolución, ya que dio al usuario la posibilidad de crear aplicaciones "on-line" osea modificar páginas web en tiempo real, sin usar CGI's.

1. Características

2. Diferencia con JAVA

3. Principales aplicaciones

Si bien hoy en día, JavaScript, es un lenguaje muy usado, sus principales aplicaciones son:

Aunque según pasa el tiempo sus aplicaciones se van incrementando.

4. Donde incluirlo

Antes siquiera de que conozcamos la sintaxis o una primera orden de JavaScript, debemos saber primero cómo se incluye un script dentro de un documento HTML.

Hay otra manera de ejecutar código JavaScript y es directamente en la ventana de un navegador, es decir donde se pondría la URL. Pruebalo poniendo por ejemplo: javascript:nombre="Juan";window.alert("Mi nombres es "+nombre);. Funciona, pero claro es muy tonto porque no se almacena en ningún lado por lo que hay que escribirlo cada vez.

El código JavaScript se inserta directamente en nuestra pagina HTML. Hay cuatro (4) maneras de hacerlo:

4.1 Usando manejadores de evento (en linea)

Los comandos de JavaScript son evaluados inmediatamente al cargarse la pagina. Las funciones son almacenadas, pero no ejecutadas, hasta cierto evento. Ejemplo: onClick,onMouseOver,etc

<etiqueta evento='comando javaScript;'>
<!doctype htm>
<Html>
<Head>
   <Title>Titulo</Title>
</Head>
<Body>
<a href="" onMouseOver="window.status='Figura';return true">
<IMG SRC=fig.gif></A>
</Body>
</Html>

Nota que aquí es el evento onMouseOver el que dispara la acción.

<button onClick="alerta('Cuidado')">Borrar</button>

Nota que aquí es el evento onClick el que dispara la acción.

4.2 En el cuerpo del documento

Es decir entre las etiquetas <BODY> y </BODY> usando la etiqueta SCRIPT

<Script type='JavaScript'>
...
</Script>
<!doctype htm>
<Html>
<Head>
   <TITLE>Titulo</TITLE>
</Head>
<Body>
<Script type='JavaScript'>
   <!-- escondemos el código>
   document.write("Hola que tal");
   // hasta aqui escondo -->
</Script>
</Body>
</Html>

Este código se ejecuta inmediatamente al cargar la pagina y lo que produce es un texto sobre la pagina, para ello use el método write del objeto document, que representa al documento actual.

Nota que use un comentario <!-- --> para ocultar el código a los navegadores que no soportan JavaScript.

4.3 En archivo aparte

En este caso todo el código del script esta situado en otro archivo y se hace una llamada.

<Script src='nombre archivo'>
</Script>
<!doctype htm>
<Html>
<Head>
   <Title>Titulo</Title>
</Head>
<Body>
<Script src=codigo.js>
</Script>
</Body>
</Html>

Nota que aquí no fue necesario esconder ningún código y que los navegadores que no soporte la etiqueta Script simplemente lo ignoraran.

4.4 Haciendo una llamada a función

Dentro de la cabecera, después del titulo. Es decir, entre las etiquetas </TITLE> y </HEAD> y luego la llamada a la función en el cuerpo.

<!doctype htm>
<Html>
<Head>
   <Title>Titulo</Title>
   <Script>
      <!-- escondemos el codigo>
      funcion llamada(x){
         alert("Le dije que NO!"+x);
      }
   // hasta aquí escondo -->
   </Script>
</Head>
<Body>
No haga Clic <A HREF="JavaScript:llamada('Curioso!')">AQUI</A>
</Body>
</Html>

Observa que aquí se definió la función en la cabecera, pero recién se ejecuta al hacer clic en el enlace, que es el evento que llama a la función a la cual se le para un parámetro.

Excepto en texto entrecomillado, JavaScript es sensible a mayúsculas y minúsculas, por lo que tendrás que tener el cuidado al usar por ejemplo document.write de escribirlo así, en minúsculas o no se interpretara. Cualquier error simplemente es ignorado. Se puede usar la comillas simple para los valores de atributos.

5 Como incluirlo

Es muy importante que respetes las comillas. Puedes usar comillas simples o dobles y combinación de ellas.

evento="objeto.método('dato')";       //Combinación alterna
evento='objeto.método("dato")';       //Combinación alterna
evento="objeto.método(\"dato\")";     //Método escapado
evento='objeto.método(\'dato\')';     //Método escapado

6 Comentarios

Puedes escribir comentarios entre el código JavaScript, igual que puedes en CSS. En JavaScript, los comentarios de una sola línea se escriben así:

//Esto es un comentario

/*
Este es un comentario
de múltiple linea.
*/ 

7 Probar tu código

Si tienes dudas de como funciona un código JavaScript lo mejor es que o pruebes en linea para eso usa paiza.io

var x = 10;
if (x > 5){
   console.log("Si, es mayor");
}else{
   console.log("No, no es mayor.");
}