Con JavaScript se pueden construir aplicaciones que varían desde la gestión de la información corporativa interna y su publicación en Intranets hasta la gestión masiva de transacciones de comercio electrónico.
Aunque se trata de algo que se sale del alcance de este curso, es importante reseñar que JavaScript puede utilizar una tecnología propietaria de Netscape, denominada LiveConnect; con el propósito de que las aplicaciones JavaScript puedan tener acceso a aplicaciones basadas en objetos distribuidos CORBA y Java.
En cualquier caso, es importante señalar que, pese a la similitud de nombres, JavaScript no es Java.
Las aplicaciones cliente y servidor en JavaScript comparten el mismo núcleo de lenguaje. Este núcleo se corresponde con ECMA-262, el lenguaje de scripts estándar de la Oficina de Estándares de la Unión Europea, con algunos añadidos extra. Aunque Javascript de cliente y de servidor comparten el mismo conjunto base de funciones y características; en algunos casos se utilizan de distinta forma. Los componentes de JavaScript son los siguientes:
Núcleo de JavaScript (Core JavaScript). -JavaScript para Cliente. -JavaScript para Servidor. JavaScript para cliente engloba el núcleo del lenguaje y algunos elementos adicionales como, por ejemplo, una serie de objetos predefinidos que sólo son relevantes para la ejecución de JavaScript en el contexto de un cliente Web.
Así mismo, JavaScript para servidor incluye también el núcleo de lenguaje y los objetos predefinidos y funciones necesarias para el correcto funcionamiento en el marco de un servidor.
El código JavaScript para cliente se integra directamente en páginas HTML y es interpretado, en su totalidad, por el cliente Web en tiempo de ejecución. Puesto que con frecuencia es necesario ofrecer el mayor rendimiento posible, las aplicaciones JavaScript desarrolladas para servidores se pueden compilar antes de instalarlas en dichos servidores
Los clientes Web que soportan JavaScript, tales como el Netscape Navigator/Communicator (desde la versión 2.0) o el Microsoft Internet Explorer (desde la versión 3.0) pueden interpretar sentencias JavaScript colocadas en un documento HTML.
Cuando el cliente Web solicita una página de este tipo, el servidor envía por la red al cliente el contenido completo del documento; incluyendo todos los códigos HTML y las sentencias JavaScript que pudieran existir en éste.
El cliente lee entonces la página de forma secuencial, desde el principio hasta el final, representando visualmente los códigos HTML y ejecutando las sentencias JavaScript conforme avanza el proceso de lectura e interpretación.
Las sentencias JavaScript colocadas en una página Web pueden dar respuesta a eventos de usuario, tales como la pulsación de un botón del ratón (clic), la entrada de datos en un formulario y la navegación por una página.
Por ejemplo, se puede crear una función JavaScript que permita verificar que la información introducida por el usuario en un campo de entrada de datos de un formulario (número de teléfono, código postal, número de tarjeta de crédito, etc.) tienen el formato correcto. En este caso, lo importante es que, sin necesidad de realizar ninguna transmisión de datos por la red, se puede validar dicha información, mostrando al usuario un cuadro de diálogo en caso de que ésta sea incorrecta.
Se ofrece aquí un primer ejemplo en el que se ilustra la integración directa de código JavaScript en un documento HTML: Esto es texto normal de un documento HTML
docurnent.write("Texto generado desde JavaScript")
Esto es, de nuevo, HTML Como se puede observar, este ejemplo tiene la apariencia de un documento HTML estándar. La única novedad viene dada por la presencia del fragmento correspondiente al código JavaScript:
document.write('Texto generado desde Javascript")
Para poder ver el resultado de su ejecución, bastará con cargar dicho documento con cualquiera de los clientes Web antes mencionados. La salida, como se aprecia en las figuras adjuntas (para ambos clientes Web), se compone de tres líneas de texto: - Esto es texto normal de un documento HTML - Texto generado desde JavaScript - De nuevo HTML En realidad no se trata de un script útil, puesto que todo lo que ofrece (mostrar una línea de texto) se podría haber hecho en HTML directamente y, sin duda, con mayor comodidad. Sólo se trata de mostrar el funcionamiento del código.
En efecto, cualquier elemento que quede delimitado por los códigos y se considera código JavaScript . En este caso particular, se ha utilizado document.write , una de las funciones más importantes de JavaScript, que permite escribir algo en el documento actual (en este caso, el documento HTML que contiene el ejemplo). Archivos de código Javascript El atributo SRC del código SCRIPT del lenguaje HTML permite especificar un archivo que contiene el código JavaScript (en lugar de incrustar el código JavaScript en el documento HTML). Por ejemplo:
...
... Este atributo es especialmente útil para compartir funciones entre numerosos documentos HTML. Las sentencias JavaScript del interior de un código se ignoran a menos que la inclusión cause un error.
Se incluye una sentencia que muestre un mensaje de error en caso de no poder cargar el archivo de código.
Por ejemplo:
Los archivos JavaScript externos sólo pueden tener código JavaScript y ninguna sentencia HTML.
Recuerda que es la forma de insertar comentarios en HTML.
Otra forma de conocer si un cliente soporta JavaScript es insertar el código . De modo, los navegadores que no soporten JavaScript ejecutan las sentencias HTML alternativas incluidas dentro de esta etiqueta
Javascript para aplicaciones servidor
En el servidor JavaScript también está integrado en páginas HTML. Las sentencias de JS del servidor pueden realizar multitud de tareas:
-Conectarse a bases de datos relacionales de varios fabricantes.
-Compartir información entre usuarios de una aplicación.
-Acceder a los ficheros del servidor.
-Comunicarse con otras aplicaciones a través de LIVECONNECT y JAVA.
Las aplicaciones JavaScript del servidor se compilan generando archivos binarios.
Existen servicios especiales de JavaScript en el servidor:
-Servicio de Gestión de Sesiones.
-Servicio de Bases de Datos LiveWire.
JavaScript y Java.-
JavaScript
Java
Interpretado por el cliente
Copilado (bytecodes). Se descarga del servidor y se ejecuta en el cliente
Orientado a Objetos
Basado en clases
El código se integra e incrusta en documentos HTML
Se utilizan APPLETS. Se accede a ellos desde documentos
Los tipos de datos de las variables no se declaran
Es necesario definir los tipos de datos a las variables
No se puede escribir automáticamente en el disco duro
No se puede escribir automáticamente en el disco duro
Valores Javascript
JavaScript reconoce los siguientes valores:
-Valores numéricos.
-Valores lógicos (true, false)
-Cadenas de caracteres
-Valor null
-Valor no definido (undefined)
Además de estos valores, existen otros elementos propios de JavaScript como los objetos y las funciones.
JavaScript trata de forma dinámica los datos y se puede realizar la siguiente operación:
var unValor=50
Y después asignar a un Valor un valor de tipo cadena de caracteres:
unValor="Ahora est á lloviendo"
Variables.- Las variables pueden comenzar por un carácter o un subrayado bajo (_).
Cuando a una variable no se le asigna un valor, tiene valor indefinido (undefined). Si se le pone un valor, pueden ocurrir dos cosas:
-Si fue declarada sin "var", se produce un error en tiempo de ejecución.
-Si fue declarada con "var", devuelve el valor NaN (Not a Number).
Veamos un ejemplo:
function f1() {
return y-2;
}
f1() // Esta llamada a f1 provoca un error en tiempo de ejecuci ó n
function f2() {
return var y-2;
}
f2() // devuelve el valor NaN
Podemos utilizar el valor "undefined" para ponerle valor a una expresión:
var miVar;
if(miVar==undefined) {
hazunacosa(); }
else {
hazotracosa(); }
El valor "undefined" se comporta como falso cuando se usa como tipo booleano.
Las variables pueden ser:
Globales: cuando se le asigna un valor fuera de una función. El uso de "var" es opcional.
Locales: Se realiza la operación de asignación dentro de una función. El uso de "var" es obligatorio.
Por último, es bueno saber que se puede acceder a una variable de un documento HTML de un FRAME desde otro:
parent.miVar
Literales Javascript
Un literal es un valor fijo que se especifica en el script .
Existen varios tipo de literales que explicaremos a continuación:
-Arrays
-Booleanos
-Coma Flotante
-Enteros
-Objetos
-Cadenas
1.Arrays: conjunto de 0 o más expresiones encerradas entre corchetes ([]).
Ejemplo:
coches=["BMW","Mercedes","Audi","Volvo"]
Coches es un array de 4 elementos.
Podemos dejar elementos del array vacíos:
ciudades=["Madrid",,"Valladolid"]
ciudades=[,,"Pamplona"]
ciudades=["Madrid","Pamplona",,]
2.Los boleanos: tienen 2 valores booleanos: true y false.
3.Coma flotante: un literal de coma flotante puede tener las siguientes partes:
Un entero decimal
Un punto decimal(".")
Una parte fraccionaria
Un exponente ("e" o "E")
Un literal de coma flotante debe tener al menos un dígito y un punto decimal o una "e"(o "E").
Ejemplos:
3.1415
-6.23E11
.2e10
2E-10
4. Los enteros: los literales enteros se pueden expresar como:
Decimales: del 0 al 9.
Octales: comienzan por 0. Del 0 al 7.
Hexadecimales: comienzan por "0x" o "0X". Del 0 a 9 y a(o A) a f(o F).
5. Los objetos: conjunto de cero o más parejas de parejas nombre: valor.
Ejemplo:
avión= { marca:"Boeing",modelo:"747",npasajeros:"450" }
Para referirnos desde JavaScript a una propiedad del objeto avión:
document.write(avión.modelo)
6.Las cadenas: el literal de cadena es una secuencia de caracteres entre los signos de comillas simples o dobles (¿ o ¿).
En un literal de tipo cadena podemos utilizar los métodos del objeto String .
Existe un conjunto de caracteres que comienzan por \ . Algunos de ellos son:
\b: retroceso
\f: avance de línea
\n: salto de línea
\r: return
\t: tabulación
\' , \", \\ : los símbolos ', " y \ respectivamente.
Objetos Javascript
Definimos como objeto, una entidad con una serie de propiedades que definen su estado y unos métodos (funciones) que actúan sobre esas propiedades.
La forma de acceder a una propiedad de un objeto es la siguiente:
nombreobjeto.propiedad
También se puede referir a una propiedad de un objeto por su índice en la creación. Los índices comienzan por 0:
casa[0]=casa.localidad
casa[1]=casa.superficie
casa[2]=casa.precio
Vamos a crear un objeto con una serie de propiedades. La forma de crear un objeto es la siguiente:
-Crear una función constructora
function casa(localidad,superficie,precio) {
this.localidad=localidad
this.superficie=superficie
this.precio=precio
}
Instanciar objetos con "new"
casa1=new casa("Pamplona",90,15000000)
casa2=new casa("Bilbao",110,23000000)
Dos observaciones importantes:
-Gracias a new creamos nuevos objetos con las propiedades de los ya creados.
"this" hace referencia al propio objeto.
-A un objeto se le pueden seguir añadiendo propiedades tras ser definido, aunque es una práctica que no se aconseja, pues todos los objetos ya creados hasta entonces añaden también esa propiedad con valor nulo. Para ello se utiliza la palabra prototype:
casa.prototype.año=null
casa.año="1980"
Métodos Javascript
Otra forma de crear objetos de forma literal es la siguiente:
nombreobjeto= { propiedad1:valor;propiedad2:valor;.....propiedadN:valor }
Finalmente, sólo añadir que una propiedad puede estar formada por varias subpropiedades de modo que, para referenciarlas deberemos seguir una notación similar a la anterior:
nombreobjeto.nombrepropiedad.nombreSubpropiedad
Ejemplo:
casa1= { localidad:"Pamplona",precio:15000000,superficie: { interior:90,terraza:10 } }
En este ejemplo, casa1 es un objeto en el que, la propiedad "superficie", está a su vez formada por dos subpropiedades: interior y terraza.
Cómo se crean métodos.- Veamos ahora cómo se crean los métodos:
Un método no es más que una función asociada a un tipo de objeto:
objeto.nombremétodo=nombrefunción
Veamos un ejemplo. Este método sirve para mostrar las propiedades de un objeto casa:
function VerCasa() {
var mostrar="La casa está en " + this.localidad + ", tiene " + this.superficie +" m2 y cuesta " +this.precio +" ptas."
return(mostrar)
}
Si en la función constructora de casa añadimos:
this.VerCasa=VerCasa
Ya tenemos un método llamado VerCasa que nos permite ver las propiedades de cualquier objeto de tipo casa.
Una vez creado un objeto, si lo que queremos es eliminarlo, sólo tenemos que llamar al operador "delete".
delete casa
Este operador es interesante, porque, si consigue eliminar el objeto, devuelve "true" si se le pone valor, por lo que se puede saber cuando un objeto ha sido borrado satisfactoriamente.
Operadores Javascript
Existen varios tipos de operadores en JavaScript:
1.Asignación: este tipo de operador se utiliza para asignar valores a las variables.
var resultado=50
Asigna a la variable "resultado" el valor 50.
Existen abreviaturas de algunas operaciones de asignación:
x + = y
x = x + y
x - = y
x = x - y
x * = y
x = x * y
x % = y
x = x % y
x / = y
x = x / y
2.Comparación: en JavaScript, se pueden comparar variables de distinto tipo, pues es capaz de forzar conversiones:
== Devuelve true si son iguales. Fuerza conversiones de tipo.
!= Devuelve true si son distintos. Fuerza conversiones de tipo.
=== Devuelve true si son iguales y del mismo tipo.
!== Devuelve true si son distintos o de distinto tipo.
> Devuelve true si la variable de la izquierda es mayor que la variable de la derecha
<>= Devuelve true si la variable de la izquierda es mayor o igual que la variable de la derecha
<= Devuelve true si la variable de la izquierda es menor o igual que la variable de la derecha 3. Aritméticos: los operadores aritméticos, a partir de varios operandos, devuelven un solo valor; resultado de la operación realizada con los anteriores operandos. En JavaScript existe notación postfija y prefija, por lo que variable++ y ++variable son dos formas distintas de incrementar una variable. En primer lugar, se procesa la variable, y luego se incrementa. Sin embargo, en el segundo caso, primero se incrementa la variable y después se procesa. % Binario: devuelve el resto de una división. ++ Unitario: incrementa el valor de la variable. -- Unitario: disminuye el valor de una variable. - Unitario: cambia el signo de una variable. 4.Lógicos: los operadores lógicos devuelven un valor binario. && AND OR ! NOT Es importante saber que si en una evaluación ya se conoce el resultado, no se pone valor a los demás términos: true devuelve true. false && devuelve false. Condicionales Javascript Las sentencias en JavaScript se dividen en varios tipos: 1.Condicionales: las sentencias condicionales sin "if" y "switch" . La sintaxis de "if" es la siguiente: if(condición) { acciones } else { acciones } Ejemplo: var i=5 if(i>5) {
document.write("i es mayor que 5")
}
else {
document.write("i es menor o igual que 5")
}
La sentencia "switch" toma una variable, y la evalúa según unos posibles valores:
switch(variable) {
case valor1:
acciones1;
break;
case valor2:
acciones2;
break;
.........
.........
case valorN:
accionesN;
break;
default acciones;
}
Veamos cada una de las partes:
case valor1: en el caso de que la variable tenga el valor "valor1", realizará las acciones "acciones1".
break: si no se incluye esta sentencia después de cada "case", se realizarían todos los cases del "switch" hasta el final. De este modo, sólo se realizarán las acciones referentes al "case" concreto.
En este apéndice vamos a estudiar algunos ejemplos de código JavaScript que podemos adaptar a nuestras páginas. En estos ejemplos aparecerán también objetos y clases nuevas que no hemos visto a lo largo del curso, para extender el conocimiento que ya tenemos del código de scripts. Caso 1: Como conseguir que un enlace gane o pierda el foco de entrada.
a:active {color:blue}
function getfocus()
{
document.getElementById('w3s').focus();
}
function losefocus()
{
document.getElementById('w3s').blur();
}
Visita Google.com //solo por presentacion
getElementById es una función de document que permite llamar a un objeto concreto de la página. Esta es la forma normal de acceder a los elementos de la página, aunque como en el caso de los formularios, también es posible acceder a algunos elementos directamente usando sus nombres como propiedades de objetos. Caso 2: seleccionar el texto de un cuadro de texto y darle el foco.
function setfocus()
{
document.forms[0].txt.select();
document.forms[0].txt.focus();
}
Como podemos ver, es posible conseguir el contenido de los formularios de la página por medio de la matriz forms[] de document. Caso 3: obtener y cambiar la URL de un formulario.
function getAction()
{
var x=document.forms.myForm;
alert(x.action);
}
function changeAction(action)
{
var x=document.forms.myForm;
x.action=action;
alert(x.action);
}
En este ejemplo podemos ver otra forma de utilizar los formularios en el código JavaScript. Caso 4: como actualizar dos iframes al mismo tiempo.
function twoframes()
{
document.all("frame1").src="frame_c.htm";
document.all("frame2").src="frame_d.htm";
}
Escríbanse las cuatro páginas de los frames que se especifican y probar. Es muy sencillo darse cuenta de que la función all nos permite acceder a los distintos elementos de la página, al igual que lo hemos hecho antes de otras formas.
Caso 5: conocer los datos del navegador.
document.write("Navegador: ");
document.write(navigator.appName + "");
document.write("Versión del navegador: ");
document.write(navigator.appVersion + "");
document.write("Código: ");
document.write(navigator.appCodeName + "");
document.write("Plataforma: ");
document.write(navigator.platform + "");
document.write("Cookies habilitadas: ");
document.write(navigator.cookieEnabled + "");
document.write("Cabecera de agente de usuario del navegador: ");
document.write(navigator.userAgent + "");
Caso 6: conocer los datos relacionados con la pantalla.
document.write("Resolución de pantalla: ");
document.write(screen.width + "*" + screen.height);
document.write("");
document.write("Area visible disponible: ");
document.write(screen.availWidth + "*" + screen.availHeight);
document.write("");
document.write("Resolución de color: ");
document.write(screen.colorDepth);
document.write(" bits");
Caso 7: refrescar el contenido de una página.
function refresh()
{
window.reload();
}
Caso 8: Generar un reloj a intervalos de un segundo.
var intval=""
function start_Int()
{
if(intval=="")
{
intval=window.setInterval("start_clock()",1000);
}
else
{
stop_Int();
}
}
function stop_Int()
{
if(intval!="")
{
window.clearInterval(intval);
intval="";
document.formu.tiempo.value="Tiempo detenido";
}
}
function start_clock()
{
var d=new Date();
var sw="am";
var h=d.getHours();
var m=d.getMinutes() + "";
var s=d.getSeconds() + "";
if(h>12)
{
h-=12;
sw="pm";
}
if(m.length==1)
{
m="0" + m;
}
if(s.length==1)
{
s="0" + s;
}
document.formu.tiempo.value=h + ":" + m + ":" + s + " " + sw;
}
Este ejemplo actualiza el contenido del cuadro de texto cada segundo. Pulsa "Empezar" para iniciar la función setInterval. Pulsa "Parar" para detener el tiempo con la función clearInterval.
Estudiese bien este ejemplo. La variable intval contiene un valor que setInterval genera, y con el que podremos detener el intervalo usándolo en la llamada a clearInterval. Especialmente interesante es la función start_clock, que formatea la hora para su visualización.
ejemplo sencillo de Java Script
No hay comentarios:
Publicar un comentario