gratiszona

javascript: sintaxis basica

2.- Sintaxis basica
  • Escribe, utilizando el "Bloc de Notas" de Windows, el siguiente programa:
<HTML>
<HEAD>
<TITLE>PROG001.HTM</TITLE>
<SCRIPT LANGUAGE='JavaScript'>
alert('¡Hola Mundo!');
</SCRIPT>
</HEAD>
<BODY>
<P>
Programa 1 en JavaScript
</P>
</BODY>
</HTML>

  • Graba el fichero anterior en TuCarpeta con el nombre Prog001.htm
  • Ejecuta el programa Prog001.htm, es decir:
  • Ejecuta el "Explorador de Windows"
  • Situate en TuCarpeta
  • Clic-Click en Prog001.htm
  • Estudio del Prog001.htm:
  • Un programa "JavaScript" se escribe integrado en una pagina HTML, por lo tanto no es mas que un fichero de texto que contiene una serie de pares de tags correspondientes a la pagina Web (como minimo el par: <HTML>, </HTML>), ademas del par de tags caracteristico de un programa JavaScript. Dicho fichero se ha de grabar necesariamente con la extension HTM (caracteristica de una pagina HTML).
  • Un programa "JavaScript" no es mas que una secuencia de ordenes, que deben terminar en punto y coma, entre los tags:
<SCRIPT LANGUAGE="JavaScript">
y
</SCRIPT>
  • En nuestro Prog001.htm, hemos incluido el programa en la cabecera (HEAD) de la pagina, pero podriamos colocarlo en cualquier parte del fichero htm
  • Nuestro primer programa JavaScript contiene una unica sentencia: alert(""¡Hola Mundo!");
Que "abre" una ventana con el mensaje que tenemos entre comillas.
Al hacer clic en el [Aceptar] de la ventana "alert", se acaba el programa JavaScript (se encuentra el tag </SCRIPT>) y continua ejecutandose la pagina HTML.
  • Utilizando el "Bloc de Notas" escribe el siguiente programa:
<HTML>
<SCRIPT LANGUAGE='JavaScript'>
// PROG002.HTM
var nom;
nom=prompt('Escribe tu nombre ','Paco');
alert('Mucho gusto '+ nom);
</SCRIPT>
</HTML>
  • Grabalo en TuCarpeta con el nombre Prog002.htm
  • Ejecutalo varias veces, observando detenidamente lo que sucede.
  • Estudio del Prog002.htm
1º) Primera y ultima linea: <HTML> y </HTML>
Es decir: pagina html minima que necesitamos para incluir un programa JavaScript.
2º) Segunda y penultima lineas: <SCRIPT LANGUAGE=.....> y </SCRIPT>, es decir programa en JavaScript
3º) Primera sentencia del programa: // PROG002.HTM
unica linea del programa que no es necesario acabarla con punto y coma.
Todas las lineas que empiezan por // son comentarios para el programador, es decir no forman parte del programa, dicho de otra forma: el navegador si encuentra una linea que empieza por //, la salta.
4º) var nom;
Definimos una variable de nombre nom
5º) nom = prompt("Escribe tu nombre","Paco");
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 funcion prompt, encerrado entre comillas. El segundo argumento del prompt contiene el valor que aparece por defecto en el campo del cuadro de dialogo.
El valor del prompt es nom, es decir lo que nosotros escribamos en el cuadro sera el valor que tomara la variable nom.
Si no escribimos nada y hacemos click en [Aceptar], el prompt, es decir la variable nom tomara el valor de Paco, porque es el valor que aparece por defecto.
6º) alert('Mucho gusto '+nom);
Aparece un cuadro con el mensaje 'Mucho gusto' y a continuacion el valor de la variable 'nom', que sera lo que hemos escrito en el primer cuadro que nos ha aparecido.
En definitiva:
  • La funcion prompt nos permite introducir 'valores', dichos valores se han de guardar en variables, que previamente hemos de declarar con la palabra reservada 'var'
  • La funcion 'alert' muestra mensajes y/o valores de variables.
  • Utilizando el 'Bloc de Notas del Windows' escribe el siguiente programa:
<HTML>
<SCRIPT LANGUAGE='JavaScript'>
// PROG003.HTM
/*Programa que sirve para calcular
el area de un rectangulo */
var base,altura;
base=prompt('Escribe la base del rectangulo','');
altura=prompt('Escribe la altura del rectangulo','');
alert('El area del rectangulo es = '+(base*altura));
</SCRIPT>
</HTML>
  • Grabalo en TuCarpeta con el nombre Prog003.htm
  • Ejecutalo varias veces. Seria conveniente utilizar numeros enteros y tambien decimales (5.72, 0.531: observa que has de utilizar el punto decimal ingles).
  • Si has ejecutado el programa una vez, para volverlo a ejecutar, no es necesario que 'cierres' el navegador, basta que hagas:
Menu Ver
Actualizar
o si quieres ir mas rapido, pulsa la tecla [F5]
  • Es importante que tengas claro este programa:
  • Declaramos dos variables (var), que necesitamos para introducir la base y la altura del rectangulo, a traves de dos 'prompts':
base= prompt......
altura= prompt.....
  • Por ultimo necesitamos dos 'alerts' que nos muestre el resultado del programa, que es simplemente el producto base * altura
  • El unico elemento nuevo que aparece en el Prog003.htm es:
/*Programa que sirve para calcular
el area de un rectangulo */
Todo lo que aparece escrito entre /* y */ no es mas que un comentario para el programador, igual que pasaba con las lineas que empezaban por //
La diferencia entre // y /* */ esta en que esta ultima forma de incluir un comentario, nos permite colocarlo de forma que ocupe mas de una linea.
Anterior: introduccion a javascript
Siguiente: variables en javascript