Ven
a la página principal de "Info-Linfo"
Curso de JavaScript para programadores
autor: Luis Paez
Ultima actualización: 19/ene/01
Ejemplo 1. Ejemplo con document.writeln
Ejemplo 2. Ejemplo con variables y document.writeln
Ejemplo 3. Ejemplo con document.writeln()
Interacción con Alert() y Prompt()
Ejemplo 4. Petición y presentación de nombre con Alert() y Prompt()
He titulado este tutorial como "Curso de Javascript para programadores" debido a que no incluyo
en él los conceptos básicos de la programación de computadoras y presumo ciertos conocimientos
de HTML en el lector. El curso está escrito de manera informal debido a mi deseo de realizarlo rápidamente
y sin demasiada palabrería, pues conozco la costumbre de los programadores de saltar los párrafos
demasiado largos para ir directamente al código.
Asi que aquí esta el tutor.
Introducción a JavaScript
Javascript es un lenguaje de programación para Internet. Puede mejorar el aspecto
de las páginas web y añadirle funciones adicionales.
Las instrucciones de Javascript se incorporan dentro del código HTML de una página web.
Tiene bastante parecido a C++ y Java.
Requisitos para este curso
Es necesario tener algunos conocimientos de HTML, ya que como mencioné antes, JavaScript se escribe dentro
del código de un documento HTML.
Necesitas un navegador que soporte JavaScript. Puede ser Internet Explorer 3.0 (o superior) o Netscape 3.0 (o superior).
También necesitas conocimientos de algún lenguaje de programación, mejor si es C o C++.
Declaración de variables
Las variables se declaran así:
var nombre;
var num1;
var num2;
o así:
var nombre, num1, num2;
Se debe tener en cuenta lo siguiente:
Los nombres de variables no deben comenzar por números ni contener espacios.
Javascript es sensible al tamaño (eso de las mayúsculas y minúsculas). Es decir que 'numero'
es diferente a 'Numero' o a 'NuMeRo'.
Tipos de datos
Tipo numérico. Para enteros y flotantes.
Por ejemplo:
var num;
num = 123;
Tipo cadena (string). Para cadenas de caracteres. Las cadenas debe ir delimitadas por comillas o apóstrofes.
Por ejemplo:
var nombre;
nombre = "Juan Perez";
Tipo lógico (booleano). Para datos que sólo pueden adoptar los valores True o False (verdadero o
falso).
Por ejemplo:
var existeDato;
existeDato = True;
Tipo NULL. Parecido a nada, pero no es cero. Significa algo así como 'no valor'.
Nuestros primeros scripts.
Bueno, por fin vamos a codificar.
Ejemplo 1.
Practiquemos un poco con lo recientemente aprendido.
Como deciamos antes, las instrucciones de Javascript se incorporan dentro del código HTML, asi que podemos
escribir algo como esto:
<HTML>
<HEAD>
<TITLE>Ejemplo 1</TITLE>
</HEAD>
<BODY>
Este es el primer ejemplo que desarrollaremos <P>
<SCRIPT LANGUAGE="JavaScript">
var numeroPi;
numeroPi = 3.1415926;
document.writeln("Valor de PI = "+numeroPi);
</SCRIPT>
</BODY>
</HTML>
Este código producirá simplemente:
Este es el primer ejemplo que desarrollaremos
Valor de PI = 3.1415926
Realmente no es gran cosa, pero sirve para analizar un poco la forma como está construido.
La primera parte
<HTML>
<HEAD>
<TITLE>Ejemplo 1</TITLE>
</HEAD>
<BODY>
Este es el primer ejemplo que desarrollaremos <P>
es simplemente código HTML y produce una línea de texto con "Este es el ...", mientras
que después ya tenemos lo que nos interesa:
<SCRIPT LANGUAGE="JavaScript">
var numeroPi;
numeroPi = 3.1415926;
document.writeln("Valor de PI = "+numeroPi);
</SCRIPT>
La etiqueta <SCRIPT> es utilizada para indicar al explorador web (browser) el lenguaje de guiones (scripts)
utilizado, que en este caso es JavaScript.
Luego tenemos la declaración de una variable denominada numeroPi y la posterior asignación de un
valor (3.14.15926) que es desplegado en el documento HTML con la línea document.write() que es algo así
como un write() del pascal, printf() del C o print del Basic.
Los punto y comas (;) al final de cada línea no son imprescindibles, pero conviene colocarlos por algunas
razones como ser la similitud con C o Java.
Si escribiste numeroPI en lugar de numeroPi, verás no el script no funciona, debido a lo que dijimos antes
acerca de las mayúsculas y minúsculas.
El indentado y las líneas en blanco no son necesarias, pero hacen más legible cualquier programa.
Ejemplo 2.
Este ejemplo muestra un poco más de lo mismo y algo nuevo:
<HTML>
<HEAD>
<TITLE>Ejemplo 2</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript"><!-- Oculta script de browsers antiguos
var num1=22, num2=7;
var pi = 3.1415926;
document.writeln("Valor aproximado de PI = " + num1/num2);
document.writeln("Otro valor aproximado de PI = " + pi);
// Termina de ocultar el código -->
</SCRIPT>
</BODY>
</HTML>
En la línea
<SCRIPT LANGUAGE="JavaScript"><!-- Oculta script de browsers antiguos
hay algo nuevo. Después de la etiqueta <SCRIPT> empieza un comentario que termina después del
código Javascript. Es decir, tiene la forma
<SCRIPT LANGUAGE="JavaScript"><!-- Oculta script de browsers antiguos
... (código Javascript)
// Termina de ocultar el código -->
</SCRIPT>
El propósito de encerrar el programa entre etiquetas HTML de comentario es que si la página es leida
por un browser antiguo que no reconoce la etiqueta <SCRIPT> el código, al estar como un comentario,
no será mostrado en dicho visualizador.
Otra cosa nueva es que varias variables pueden definirse en una sóla línea. Es decir que no necesitamos
una línea para cada variable.
var num1=22, num2=7;
Además, también puede asignarse un valor a la variable en el momento de declaración.
var pi = 3.1415926;
Ejemplo 3.
El ejemplo que sigue muestra un poco más de document.writeln.
<HTML>
<HEAD>
<TITLE>Ejemplo 3</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript"><!-- Oculta script de browsers antiguos
document.writeln("Tipo de letra normal<BR>");
document.writeln("<B>Negrilla<BR>");
document.writeln("<I>negrilla e itálica</I><BR>");
document.writeln('"apaga" negrilla </B>y otra vez normal');
// Termina de ocultar el código -->
</SCRIPT>
</BODY>
</HTML>
La línea
document.writeln("Tipo de letra normal<BR>");
muestra que es posible insertar etiquetas HTML en la cadena que se escribe en el documento. Las lineas siguientes ilustran aún más esta posibilidad. La línea
document.writeln('"apaga" negrilla </B>y otra vez normal');
muestra que es posible delimitar la cadena con apóstrofes en lugar de comillas si tenemos necesidad de incluir comillas en el texto a escribir en la página.
Interacción con Alert() y Prompt()
Como has podido ver, no es posible hacer muchas cosas con lo expuesto hasta el momento. Por eso vamos a introducir
la posibilidad de interactuar con el usuario con los métodos Alert() y Prompt() (Si no sabes lo que es un
método, piensa en ellos como en funciones, que si conoces bien. En el anexo ... hay una explicación
breve acerca de la programación orientada a objetos)).
Alert() es un método para abrir un cuadro de diálogo con el mensaje especificado entre los paréntesis.
Por ejemplo,
Alert("Bienvenido a mi página");
presentará un cuadro con el mensaje "Bienvenido a mi página" como muestra la figura de abajo:
Prompt() es un método para pedir cierta información al usuario. La información es devuelta
de la misma manera en que lo hace una función de cualquier lenguaje. Por ejemplo:
edad = Prompt("Escriba su edad :", "15");
presentará un cuadro de diálogo como el de la figura de abajo ("15" es el valor por defecto para la casilla en que el usuario escribirá su edad). Cuando el usuario haga en clic en el botón Aceptar, el valor introducido será asignado a la variable edad.:
Ejemplo 4. Petición y presentación
de nombre con Alert() y Prompt().
<HTML>
<HEAD>
<TITLE>Ejemplo 4. Alert() y Prompt()</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript"><!-- Oculta script de browsers antiguos
var nombre;
nombre = Prompt("Bienvenido a mi página.\nEscribe tu nombre, por favor:", "si, aqui");
Alert("Gracias "+ nombre + ". Ya estas registrado.");
// Termina de ocultar el código -->
</SCRIPT>
</BODY>
</HTML>
Aunque Alert() y Prompt() son muy útiles, no podremos hacer mucho sólo con esto asi que es mejor
aprender rápidamente algunas cosas más. En la siguiente sección veremos la forma de manipular
cadenas de caracteres, algunos métodos matemáticos y algunos ejemplos más interesantes.
Comentarios a lupar@altavista.com
