lunes, 29 de octubre de 2007

Sintaxis básica

  • Escribe, utilizando el “Bloc de Notas” del 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. Leer mas...
  • Ejecuta el programa Prog001.htm, es decir:
    • Ejecuta el “Explorador de Windows”
    • Sitúate en TuCarpeta
    • Doble-click en Prog001.htm
Estudio del 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 (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, entre los tags: <SCRIPT LANGUAGE=”JavaScript”> y </SCRIPT>
  • En nuestro Prog001.htm, hemos incluido el programa en la cabecera (HEAD) de la
    página, pero podríamos colocarlo en cualquier parte del fichero htm
  • Nuestro primer programa JavaScript contiene una única 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 ejecutándose la página 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>
  • Grábalo en TuCarpeta con el nombre Prog002.htm
  • Ejecútalo varias veces, observando detenidamente lo que sucede.
Estudio del Prog002.htm
  1. Primera y última línea: <HTML> y </HTML>
    Es decir: página html mínima que necesitamos para incluir un programa JavaScript.
  2. Segunda y penúltima líneas: <SCRIPT LANGUAGE=.....> y </SCRIPT>, es decir programa en JavaScript
  3. Primera sentencia del programa: // PROG002.HTM
    Única línea del programa 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 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 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 Paco, porque es el valor que aparece por defecto.
  6. alert("Mucho gusto "+nom);
    Aparece un cuadro 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 han de guardar en variables, que previamente hemos de declarar con la palabra reservada "var"
  • La función "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 área de un rectángulo */
    var base,altura;
    base=prompt("Escribe la base del Rectángulo","");
    altura=prompt("Escribe la altura del Rectángulo","");
    alert("El área del Rectángulo es = "+(base*altura));
    </SCRIPT>
    </HTML>
  • Grábalo en TuCarpeta con el nombre Prog003.htm
  • Ejecútalo varias veces. Sería conveniente utilizar números enteros y también decimales
    (5.72, 0.531: observa que has de utilizar el punto decimal inglés).
  • Si has ejecutado el programa una vez, para volverlo a ejecutar, no es necesario que
    "cierres" el navegador, basta que hagas: Menú Ver - Actualizar o si quieres ir más rápido, 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 rectángulo, a través de dos "prompts": base= prompt...... - altura= prompt.....
    • Por último necesitamos dos "alerts" que nos muestre el resultado del programa, que es simplemente el producto (base * altura).
  • El único elemento nuevo que aparece en el Prog003.htm es:
    /*Programa que sirve para calcular el área de un rectángulo */
    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.


No hay comentarios.: