• Author / Uploaded
• yeimeth

• Categories
• Script de Java
• Lenguaje de programación
• Java (Lenguaje de programación)
• Compilador
• HTML

Citation preview

Copyright (c) 2003, Abraham Otero. Este documento puede ser distribuido sólo bajo los términos y condiciones de la licencia de Documentación de javaHispano v1.0 o posterior (la última versión se encuentra en http://www.javahispano.org/licencias/). Para cualquier duda, consulta, insulto o tirón de orejas sobre este tutorial dirigirse a [email protected].

Java2, tutorial de javahispano (http://javahispano.org).

Página 2 de 60

Java2, tutorial de javahispano (http://javahispano.org).

Página 3 de 60

SOBRE ESTE DOCUMENTO Este tutorial presupone conocimientos básicos de un leguaje de programación orientado a objetos (Java, C++, C# o cualquier otro lenguaje orientado a objetos), por lo que no explica en detalle los conceptos de la programación orientada a objetos, estructuras de control de flujo (bucles y condicionales) y otros conceptos como el de variable. También se presuponen en el lector conocimientos básicos de html; JavaScrip es un lenguaje de script para crear pequeños programas que se ejecutan dentro de una página web, pero el alcance de este tutorail será sólo el lenguaje de script y no la creación de documentos html. Dado que este documento será publicado originalmente en http://javahispano.org, donde la inmensa mayoría de los visitantes de la web tienen una base de programación Java, a menudo se harán comparaciones entre JavaScript y Java, sin embargo no son necesarios conocimientos de Java para emplear este tutorial para sacar provecho de este tutorial.

Java2, tutorial de javahispano (http://javahispano.org).

Página 4 de 60

1 INTRODUCCIÓN JavaScript es un lenguaje de script pensado para realizar diversas tareas dentro de una página web, tareas como generar dinámicamente contenidos dentro de la página web, gestionar algunos eventos del usuario, validar formularios, manipular cookies, interactuar con applets incrustados en la página web… JavaScrip nació en la compañía Netscape, bajo el nombre LiveScript. La intención de la compañía era crear un lenguaje simple de utilizar que permitiese ejecutar pequeños programas dentro de las páginas web. Este nombre inicial duró bastante poco; Sun Microsystems se unió a Netscape en el desarrollo de este lenguaje y en ese momento se pasó a llamar JavaScript. A pesar de su nombre este lenguaje, como veremos, tiene bastante poco que ver con Java; posiblemente le pusieron este nombre para aprovechar la fama que ya tenía en aquella época Java en el desarrollo de webs gracias, en buena medida, a los applets.

1.1 DIFERENCIAS ENTRE JAVA Y JAVASCRIPT Java y JavaScript comparten buena parte de su sintaxis, sin embargo difieren radicalmente en el resto de sus propiedades: 1.

La principal diferencia es que Java es un lenguaje de programación de propósito general, en el podrían abordarse prácticamente cualquier proyecto de programación. JavaScript es un “pequeño” lenguaje de script diseñado para ser ejecutado en el interior de un documento html, y no para ninguna otra tarea.

2.

Java es un lenguaje que precisa ser compilado, si bien es compilado a un bytecode, y no a ningún tipo de ensamblador. Java necesita por lo tanto de un compilador, el cual nos alerta en tiempo de compilación del los errores sintácticos que hayamos cometido. JavaScript no necesita ser compilado, y por lo tanto no necesita de un compilador. JavaScript es directamente interpretado por el navegador web.

3.

Java es un lenguaje totalmente orientado a objetos. En

JavaScript es posible

programar sin necesidad de emplear objetos, solo son códico estructurado y funciones. Además

JavaScript carece de algunas características de los lengujes totalemte

orientados a objetos, como la herencia. 4.

Java es un lenguaje fuertemente tipado: toda variable debe tener de modo explícito su tipo; en JavaScript no se declara nunca el tipo de una variable; cuando le asignemos un valor por primera vez esa variable pasará a ser del tipo de dato que le hemos asignado. Si bien esto puede parecer más cómodo es una gran fuente de errores al programar.

Java2, tutorial de javahispano (http://javahispano.org).

2 VARIBALES

Y

TIPOS

Página 5 de 60

DE

DATOS

EN

JAVASCRIPT Como ya hemos comentado, JavaScript a diferencia de Java, C++ o C#, por ejemplo, no se declara nunca el tipo de una variable; cuando le asignemos un valor por primera vez esa variable pasará a ser del tipo de dato que le hemos asignado. Vemos como se define una variable en JavaScript.

2.1 VARIABLES Podemos definir una variable mediante la palabra clave var:

var n;

En este momento hemos definido una variable que, como veremos más adelante, es del tipo de dato Undefined. Cuando le asignemos un valor a esa variable pasará a ser del tipo de dato del valor asignado: var n = 0; //n es una variable de tipo numérico var n; //variable tipo Undefined n = “hola” //n pasa a ser una variable de tipo String.

Es recomendable emplear la palabra reservada var para definir variables, sin embargo no es necesario. En JavaScript para definir una variable lo único que hace falta es asignarle una valor, simplemente con esto, sin necesidad de haber en ningún momento declarado la variable:

Nombre = “Pepe”; //Esta sentencia define una variable nombre de tipo String. Var Nombre = “Pepe”; //Esta sentencia es, a todos los efectos, idéntica a la anterior.

Es posible iniciar varias variables en una línea:

var i, j,k;

Java2, tutorial de javahispano (http://javahispano.org).

Página 6 de 60

En JavaScript, al igual que en todo lenguaje de programación hay una serie de palabras reservadas que no pueden ser empleadas como nombres de variables (if, var, else, for, while....). A excepción de estas palabras una variable en JavaScript puede tener cualquier nombre que comience por cualquier carácter comprendido entre “A-Z”, “a-z” y el símbolo _ .Los restantes caracteres pueden ser también dígitos (0-9)

2.2 ÁMBITO DE LAS VARIABLES

El ámbito (scope) de una variable en Java viene dado por los corchetes: {}; una vez definida una variable en un código dejará de existir cuando se acabe el bloque de código en el que se definió. Los bloques de código empiezan con “{“ y acaban en “}”, por lo que la variable dejará de existir cuando se cierre el corchete que esté justo antes que ella en el código. En JavaScript el comportamiento es bastante diferente. Hay sólo dos ámbitos: local y global. Una variable posee un ámbito local cuando es definida dentro de una función o método, y será accesible sólo dentro de esa función o método:



}

Una variable global, aquella definida sin estar en el cuerpo de una función o método, es accesible desde cualquier bloque de código JavaScript de la página web:

…

Sien embargo este comportamiento no es extensible a una variable definida sin la declaración var; una variables definida sin var siempre global



}

2.3 COMENTARIOS EN JAVASCRIPT La sintaxis de los cometarios en JavaScript es idéntica a la de los comentarios en Java; para comentar un línea, dentro de una etiqueta < script language="JavaScript">, empleamos “//”. En la sección anterior ya empleamos este tipo de comentario varias veces. Para comentar un conjunto de líneas empleamos “/*” para indicar el principio del comentario y “*/” para indicar el final:

Java2, tutorial de javahispano (http://javahispano.org).

Página 8 de 60

Esto provoca, por ejemplo, que no tengamos control sobre los tipos de datos numéricos, ya que una división de enteros nos devolverá un número real, y un entero que incrementa demasiado su valor se transforma automáticamente en real. Hemos de tener mucho cuidado con los tipos de nuestras variables, ya que una variable, por ejemplo, que sea una cadena de caracteres puede en cualquier momento ser asignada un dato numérico y cambiar su tipo, cosa que en Java nunca ocurriría.

2.4.1 El Objeto String Aunque todavía no hemos explicado que son y como crear los objetos en JavaScript por coherencia en la organización del tutorial presentaré aquí algunos de los métodos y propiedades más útiles del objeto String. Este objeto sólo posee una única propiedad, sin embargo posee muchos métodos, bastantes más de los que recogeremos aquí. La propiedad es “length”, la longitud del String:

var nombre = “Pepe” = var nombre = new String(“Pepe”) nombre.length = 4

Como veis el objeto String también tiene un constructor, si bien no es imprescindible emplearlo para crear un objeto de tipo String. Pasemos a los métodos, en total varias decenas. Cubriremos los más útiles, cuya sintaxis suele estar profundamente inspirada en el API de java.lang.String.

Java2, tutorial de javahispano (http://javahispano.org).

1.

Página 10 de 60

char(indice): Devuelve el carácter del índice (un entero) que se le pasa como argumento. El primer carácter está en la posición 0.

2.

charCodeAt(indice): devuelve el numero del carácter ISO Latin-1 de la posición indicada por “indice”. Los primeros 127 valores se corresponden con el código ASCII.

3.

indexOf(subCadena): Devuelve el índice de la primera ocurrencia del String “subCadena” dentro del String sobre el cual se invoca, o -1 si no hay ninguna ocurrencia.

4.

indexOf(subCadena, offset): Devuelve el índice de la primera ocurrencia del String “subCadena” dentro del String después de la posición indicada por el entero “offset”, o 1 si no hay ninguna ocurrencia.

5.

substring(primer_indice, segundo_indice): devuelve la subcadena de caracteres comprendida entre el primer índice (inclusive), y el segundo índice (exclusive).

6.

toLowerCase(): Devuelve la cadena de caracteres con todos sus caracteres en minúsculas.

7.

toUpperCase(): Devuelve la cadena de caracteres con todos sus caracteres en mayúsculas.

8.

big(), small(), bold(), italics(), blink()…: Devuelven una copia de la cadena de caracteres entre los tags , , …

2.5 CONVERSIÓN ENTRE TIPOS DE DATO Disponemos de una serie de funciones, con una sintaxis semejante a algunos métodos estáticos de Java, que nos permiten transformar cadenas de caracteres en enteros o números reales, y enteros o números reales a cadenas de caracteres. Veamos su sintaxis: La función parseFloat(cadena) transforma la cadena de caracteres argumento en un número real. parseFloat ("123.456") = 123.456

El separador decimal ha de ser el punto, si no obtendremos resultados un tanto inesperados:

parseFloat ("123,456") = parseFloat ("123A456") = parseFloat ("123ASdeH") = 123

Java2, tutorial de javahispano (http://javahispano.org).

Página 11 de 60

Si intentamos parsear una cadena de caracteres sin ningún valor numérico obtendremos como resultado “NaN”: parseFloat ("EDRG") = NaN

Todo lo dicho para la función parseFloat(String) es igualmente válido para la función parseInt(String). En este caso tenemos además una segunda versión de este método: parseInt(String, int ), donde el String es la cadena de caracteres a parsear y el entero la base en la que está ese número, que puede ser un número entre 2 y 36; así por ejemplo:

parseInt ("ABC",16) = 2748 parseInt(“011”,2) = 3

Al no especificar la base se toma por defecto el valor 10. Si la cadena de caracteres empieza por 0x y no especificamos la base se tomara el valor de base 16, considerándose que el número está en formato hexadecimal. Del mimo modo si la cadena empieza por 0 y no existe el segundo argumento, se entiende que es 8, base octal. Por último tenemos una instrucción que nos devuelve una cadena de caracteres que representa a un número:

(numero).toString(); (123).toString() = “123”

Opcionalmete podemos indicar la base en la que queremos representar el número:

(numero).toString(base); (14).toString(16) ="e" (12).toString(2) = "1100"

Veamos un ejemplo con estas instrucciones en funcionamiento:



Java2, tutorial de javahispano (http://javahispano.org).

Página 12 de 60

ejemplo1.html





La visualización de este documento html en un navegador web será:

14.56 a real: 14.56 123ABC real: 123 14.56 a real: NaN

Java2, tutorial de javahispano (http://javahispano.org).

Página 13 de 60

1456 a entero: 1456 14ABC a entero: 14 "12A" en base hexadecimal: 298 "123" en base octagesinal: 83 "101" en base binaria: 4 123 en base decimal: 123 123 en base octagesinal: 173 123 en base binario: 1111011

2.6 OPERADORES Los operadores básicos de JavaScript son + , - , * , / para suma, resta, producto y división. El operador / no representa la división de enteros aunque ambos operandos sean enteros, así 10/3 =3.333. El módulo de la división de enteros puede obtenerse mediante el operador %. Además existen los operadores decremento e incremento: -- y ++ respectivamente. La operación que realizan son incrementar y decrementar en una unidad a la variable a la que se aplican. Al igual que en Java pueden actuar como operadores de pre y post decremento e incremento. Al igual que en Java el operador + aplicado a dos cadenas de caracteres, o a una cadena de caracteres y otra variable de cualquier tipo, da como resultado la cadena de caracteres concatenación de las dos variables:

var saludo = “hola”; var nombre = “Pepe”; var saluda_pepe = “”; saluda_pepe = saludo + nombre;// saluda_pepe toma el valor holaPepe

Vemos como funciona con un String y otra variable:

var saludo = “hola”; var n = 5;

Java2, tutorial de javahispano (http://javahispano.org).

Página 14 de 60

saludo = saludo + “ “ + n;// saludo toma el valor “hola 5”

2.6.1 Operadores lógicos En esta sección recogemos operadores que, o bien el resultado de su operación es un valor lógico, o bien operan sobre valores lógicos (los tres últimos de la tabla son los que operan sobre valores lógicos).

Tabla 1: operadores lógicos Operador

Operación que realiza

==

Test de igualdad

!=

Test de desigualdad




Mayor que

=

Mayor o igual que

&&

And lógico

||

Or lógico

!

Not lógico

En el siguiente ejemplo se muestra la función de estos operadores, es una página web donde código JavaScript genera dos números enteros aleatorios y realiza unas cuantas operaciones lógicas sobre ellos.

ejemplo2.html

Java2, tutorial de javahispano (http://javahispano.org).

Página 15 de 60





Una posible visualización (ésta depende de los números aleatorios generados) de este documento html en un navegador web es:

i = 45 j = 43 i > j es true i < j es false i >= j es true i








Java2, tutorial de javahispano (http://javahispano.org).

Página 44 de 60

6 INTERFAZ DE USUARIO DE JAVASCRIPT JavaScript provee de mecanismos, bastante limitados, para interactuar con el usuario en base a ventanas. Estas se suelen emplear o bien para mostrarle al usuario ciertos mensajes de advertencia, o bien para pedirle cierta información. Para mostrarle un mensaje de advertencia al usuario, sin esperar que éste nos de ningún tipo de realimentación, empleamos la instrucción alert, a la cual le podemos pasar el texto que desemos mostrar al usuario. Veamos un ejemplo:

ejemplo16.html

No hagas click aquí

Si queremos algún tipo de realimentación del usuario empleamos la instrucción “prompt”. Sus argumentos son una cadena de caracteres con el mensaje que queremos mostrar al usuario, y otra con un valor por defecto para el dato. Esta instrucción nos devuelve una variable de tipo String con el dato introducido por el usuario:

ejemplo17.html



Escribir

Empleando las funciones para la conversión de datos del apartado 2.5 podemos obtener entradas numéricas del usuario empleando la función “prompt”. Desde JavaScrip también es posible abrir una página web en otra ventana del navegador. Para ello debemos emplear el método window.open(). Veamos un ejemplo donde se emplea este método:

ejemplo18.html



Java2, tutorial de javahispano (http://javahispano.org).



Página 46 de 60

Java2, tutorial de javahispano (http://javahispano.org).

Página 47 de 60

7 DONDE SITUO MIS FUNCIONES Y OBJETOS DE JAVASCRIPT En este apartado mostremos cual es el mejor sitio para definir las funciones y objetos de JavaScript, así como la estrategia a seguir para incrustar los Scripts en nuestras páginas web. Cuando el navegador visualiza una página web va ejecutando el JavaScript que encuentra en su seno. Si desde un script se referencia a una función o variable que se halla más “abajo” en el documento html el navegador no tendrá cargada esa función u objeto. Cuando tenga que ejecutar ese script, y se producirá un error. En el documento html del ejemplo la función cuadrado() no ha sido cargada cuado es requerida para realizar una operación, lo cual provocará que el script no funcione, y que posiblemente (depende de cada navegador) aparezca un molesto mensaje de error al visualizar el documento html.

ejemplo19.html





Debemos asegurarnos que tanto objetos, como funciones y variables globales han sido cargados cuando son usados. El mejor sistema para ello es definirlos todos en el HEAD del documento html. Como esta es la primera parte del documento en cargarse en memoria estaremos seguros de que se han cargado cuando los emplee cualquier script del documento. Modifiquemos el código anterior siguiendo esta pauta; las dos funciones que se han empleado en él se han definido en el HEAD del documento html. A hora el código se ejecutará sin ningún problema.