Sintaxis básica

Empezaremos escribiendo en nuestro editor el siguiente programa que llamaremos prog001.html.

Ejecuta el programa creado prog001.htm, el resultado sería:


Desglosamos prog001.htm:

  Un programa “JavaScript” se escribe integrado en una página HTML, por lo tanto no es más que un fichero de texto que contiene una serie de pares de tags correspondientes a la página Web (como mínimo el par: <HTML>, </HTML>), además del par de tags característico de un programa JavaScript. Dicho fichero se ha de grabar necesariamente con la extensión HTM o HTML (característica de una página HTML).

  Un programa “JavaScript” no es más que una secuencia de ordenes, que deben terminar en punto y coma y entre los tag de inicio y final para el script:  En nuestro archivo prog001.htm, hemos incluido el programa en la cabecera HEAD de la página, pero podríamos colocarlo en cualquier parte del fichero html.

  Nuestro primer programa JavaScript contiene una única sentencia: alert(«¡Hola Mundo!»).


   Se abre una ventana con el mensaje que tenemos entre comillas.


  Al hacer clic en el botón Aceptar de la ventana «alert«, se acaba el programa JavaScript al encontrar el tag de final del script (</SCRIPT>) y continua ejecutándose la página HTML.

Seguimos. carga tu editor favorito y escribe el siguiente programa:

Si lo ejecutamos varias veces observaremos el resultado:

Ponemos un nombre y pulsamos OK:

Volvemos a pulsar OK:

Desglosando prog002.htm:

  Hemos utilizado solamente los tag de inicio y final <HTML> y </HTML> o lo que es lo mismo una página html mínima necesaria para incluir un programa JavaScript.

Entre las dos etiquetas SCRIPT, está nuestro programan JavaScript.

  La primera sentencia del programa…

 … es la única línea que no es necesario acabarla con punto y coma. Todas las líneas que empiezan por // son comentarios para el programador, es decir no forman parte del programa, dicho de otra forma: el navegador si encuentra una línea que empieza por //, la ignora.

  La segunda línea del programa…

… define una variable llamada nom.

   La tercera sentencia…

…aparece un recuadro con un mensaje y un campo donde podemos escribir algo…

…el mensaje corresponde a lo que escribimos en el primer argumento de la función prompt, encerrado entre comillas. El segundo argumento del prompt contiene el valor que aparece por defecto en el campo del cuadro de diálogo.

El valor del prompt es nom, es decir lo que nosotros escribamos en el cuadro será el valor que tomará la variable nom. Si no escribimos nada y hacemos click en Aceptar, el prompt, es decir la variable nom tomará el valor de Usuario, porque es el valor que aparece por defecto.

   La cuarta sentencia del programa…

…genera un cuadro de diálogo con el mensaje «Mucho gusto» y a continuación el valor de la variable «nom«, que será lo que hemos escrito en el primer cuadro que nos ha aparecido.

En definitiva:

  • La función prompt nos permite introducir «valores«, dichos valores se guardaran en variables, que previamente hemos declarado con la palabra reservada «var«
  • La función «alert» muestra los mensajes y/o valores de las variables.

Por último un ejemplo de cálculo, escribe lo siguiente en tu editor favorito:

Guardalo con el nombre prog003.html.

Ejecútalo varias veces. Sería conveniente utilizar números enteros y también decimales utilizando el punto «.» como separador de decimales.

Introducimos el valor para la base…

… pulsamos OK e introducimos el siguiente valor para la altura…

… por último pulsamos el botón OK para ver el resultado de nuestro cálculo.

Si has ejecutado el programa una vez, para volverlo a ejecutar, no es necesario que «cierres» el navegador, basta que hagas pulses la F5 para actualizar la página para nuevos cálculos.

Desglosamos este programa:

  Declaramos dos variables var, que necesitamos para introducir la base y la altura del rectángulo, a través de dos prompts:

  Por último necesitamos un alert que nos muestre el resultado del programa, que es simplemente el producto base * altura:

  Observamos un elemento nuevo que aparece en prog003.htm:

Todo lo que aparece escrito entre /* y */ no es más que un comentario para el programador, igual que pasaba con las líneas que empezaban por //. La diferencia entre // y /* */ está en que esta última forma de incluir un comentario, nos permite colocarlo de forma que ocupe más de una línea.