Javascript 2

Marca <Script>
HTML prev una marca especfica para los script:
<SCRIPT></SCRIPT>
<SCRIPT Language="Javascript"></SCRIPT>
<SCRIPT Language="Javascript1.2"></SCRIPT>
Invocacin de los script

Script externos
<SCRIPT Language=Javascript SRC="nombrefile.js"></SCRIPT>
Ejemplo
1. Escribir con el bloc de notas el siguiente comando: alert('Soy un archivo externo'), y guardarlo
como prova.js;
2. Escribir en otro file el siguiente cdigo HTML:
<HTML><HEAD>
<SCRIPT SRC="prova.js">
</SCRIPT></HEAD>
<BODY></BODY>
y guardarlo en el mismo directorio del archivo Javascript;

3.Cargar la pgina HTML en un navegador.
Script internos
Si el script est dentro del documento, puede

introducirse tanto en la seccin de encabezamiento
(entre las marcas <HEAD></HEAD>), como en la del cuerpo del documento (entre las marcas
<BODY></BODY>).
Ejemplo
1. Escribir el siguiente cdigo HTML:
<HTML><HEAD>
<SCRIPT Language="Javascript">
x=1; alert('CABECERA='+x);
</SCRIPT></HEAD>
<BODY>
x++; alert('CUERPO='+x);
</SCRIPT>
x++; alert('CUERPO='+x);
</SCRIPT>
</BODY>
Los eventos
He aqu un ejemplo:
<A HREF="pagina.html" onclick="alert('hola')">Link</A>
Podemos observar que el evento onClick en la marca como si fuera un especificador del mismo.
Activar los eventos dentro de los script
Los eventos, adems, se pueden tambin activar directamente dentro de los script, invocndose
como si fueran una propiedad del objeto. La sintaxis es:
Objeto.evento=handler;
Para aclarar este concepto, que es muy til pero raramente se aplica, voy a contaros una
ancdota: cuando empec a usar Javascript buscaba un script que me permitiera simular el
streaming, es decir, cargar de la red una imagen de una secuencia slo cuando estaba seguro de
que la precedente ya haba sido cargada y, por tanto, visualizada. Usar un temporizador era
imposible porque el efecto cambiaba segn la velocidad de conexin. En un ptimo tratado de
Javascript, encontr unas lneas que me dieron el pie. De esta manera, elabor un array de
imgenes y operaba con el comando:
document.images[num].onload=carga();
donde la funcin carga() serva a cargar la imagen sucesiva. Todo funcionaba perfectamente, si
bien con algunas pequeas diferencias segn el navegador usado.
Con Explorer, sin embargo, se puede utilizar un script especfico para un objeto y para un evento
mediante la sintaxis:
<SCRIPT FOR=Object EVENT=evento>....</SCRIPT>
Eventos que se activan con botones del ratn

En este grupo se pueden incluir los siguientes eventos:
1. onClick: activado cuando se hace clic en un objeto;

2. onDblClick: activado con un doble clic;
3. onMouseDown: activado al pulsar el botn izquierdo del ratn;
4. onMouseUp: activado cuando deja de pulsarse el botn izquierdo del ratn;
5. onContextMenu: activado cuando se pulsa el botn derecho del ratn al abrir el
ContextMenu.
Ejemplo: si respondes Aceptar, el enlace se activa, si respondes Cancelar, el enlace no se activa.

He aqu el cdigo:
<A HREF="link.htm" onclick="return(confirm('Ests seguro?'))">
Eventos con movimientos del ratn

1. onMouseOver: activado cuando el ratn se mueve por encima de un objeto;

2. onMouseOut: activado cuando el ratn sale de un objeto;
3. onMouseMove: se mueve el cursor del ratn, pero dado que esto sucede a menudo (el
uso del ratn es frecuente), no est disponible como opcin por defecto, sino tan slo
unida a la captura de eventos, que se explicar a continuacin.
Rollover
De enorme importancia es el evento onMouseOver combinado con onMouseOut para crear el

efecto RollOver.
La sintaxis es muy sencilla:
<A HREF="#" onmouseover="document.images[num].src='imagen.gif'"

onmouseout=document.images[num].src='imagen1.gif'">
donde el comodn # sustituye a cualquier otro enlace, mientras que num es el nmero de ndice de
la imagen en la pgina HTML.
Eventos arrastrando el ratn

Podemos incluir en este grupo los siguientes eventos:
1. onDragDrop: evento que se activa cuando un usuario arrastra un objeto por la ventana del
navegador o cuando deja un file en la misma;;
2. onMove: se activa cuando un objeto mueve una ventana o un marco;
3. onDragStart: evento que se activa en cuanto el usuario inicia a arrastrar un objeto;
4. onDrag: se activa cuando el ratn arrastra un objeto o una seleccin de texto a la ventana
del mismo navegador o incluso de otro o al Desktop;
5. onDragEnter: se activa en cuanto el usuario arrastra un objeto a un objetivo vlido de ese
mismo navegador o de otro;
6. onDragOver: se activa cuando el usuario arrastra un objeto a un objetivo vlido para
alojarlo; es similar al evento precedente pero es activado despus de aqul;
7. onDragLeave: se activa cuando el usuario arrastra un objeto a un objetivo vlido para
alojarlo, pero no lo suelta;
8. onDragEnd: se activa cuando el usuario suelta el objeto al trmino del arrastre.
9. onDrop: se activa cuando se deja de pulsar el botn del ratn tras una operacin de
arrastre;
Eventos vinculados al teclado
1. onKeyPress: evento que se activa cuando un usuario pulsa y deja de pulsar una tecla o
tambin cuando la mantiene pulsada;
2. onKeyDown: activado cuando se pulsa la tecla;
3. onKeyUp: activado cuando una tecla, que se haba pulsado, deja de pulsarse;
4. onHelp: activado cuando se pulsa la tecla F1;
Eventos vinculados a las modificaciones

En este grupo podemos incluir los siguientes eventos:
1. onChange: activado cuando el contenido de un campo de un formulario sufre una

modificacin o no est ya seleccionado;
2. onCellChange: activado cuando se modifica un elemento en un Database; por esta
caracterstica suya tiene un uso no exactamente vinculado a Javascript;
3. onPropertyChange: evento activado cuando cambia la propiedad de un elemento;
4. onReadyStateChange: evento activado cuando el estado de carga de un elemento
cambia; el evento es til, por ejemplo, para verificar que un elemento se haya cargado.
Es importante decir algo ms sobre onChange: el evento se parece mucho a onBlur, pero verifica
tambin que el elemento que lo invoca haya sido modificado.Este evento, de hecho, se activa
cuando se selecciona otro elemento de una lista o cuando se modifica un campo de texto, por lo
que adems de la activacin, hace falta tambin realizar una accin.
y aqu est el cdigo que hay que introducir en la marca select (presta atencin al evento):
<select name="select"
onChange="if(this.options[1].selected) alert('Has seleccionado el segundo');
else if(this.options[2].selected) alert('Has seleccionado el tercero') ">
Eventos al cargarse los objetos

En este grupo podemos incluir los siguientes eventos:
1. onLoad: este handler funciona en la subida de objetos, en particular ventanas e imgenes;

2. onUnload: es el opuesto del anterior y funciona cuando se deja una ventana para cargar
otra o tambin para volver a cargar la misma (con el botn refresh);
3. onAbort: funciona cuando el usuario para la subida de un objeto, bien haciendo clic en
otro enlace, bien pulsando la tecla stop del navegador;
4. onError: se activa cuando la subida de un objeto causa un error, pero slo si ste se debe
a un error de sintaxis del cdigo y no del navegador, de manera que funciona en un enlace
equivocado de una imagen de la pgina, pero no en un enlace equivocado de subida de
una pgina entera;
5. onBeforeUnload: este handler funciona de la misma manera que onUnload pero se carga
un momento antes;
6. onStop: este handler funciona cuando se para la subida de la pgina con la tecla stop del
navegador y debera funcionar tambin de la misma manera que onUnload, cargndose
antes que ste, pero despus de onBeforeUnload.
Valores literales
Los valores literales son cantidades explcitas por lo que no se declaran y sirven para
proporcionar informacin a expresiones o funciones (p.ej., el nmero 45 es explcitamente
considerado numrico).
En Javascript existen distintos tipos de valores, que son:
1. numricos, los cuales se dividen a su vez en:

a. enteros
b. decimales o, con lenguaje tcnico, de coma mvil (en notacin cientfica o en la
estndar) (Valores no precisos en Netscape 2.0)
2. lgicos o booleanos, que pueden asumir slo dos estados (verdadero o falso);
3. cadenas (o secuencia de caracteres)
4. valor nulo
5. caracteres especiales (p. ej..: \f para correr la pgina)
6. objetos
El entero presenta tres variantes: decimal, hexadecimal y octal segn la base con que se
representa. Para representar un octal se hace preceder por 0, para representar un hexadecimale se
hace preceder por 0x.
El valor nulo se obtiene si las variables son indefinidas, es decir, cuando no se asigna ningn valor
en el momento de la declaracin.
Es importante subrayar que a una variable se le puede asignar incluso un objeto y se pude crear
tambin un objeto genrico trmite el enunciado:
nombreobjeto=new Object();
Ejemplo de variable con objeto
Caracteres especiales
Entre las cadenas hay que sealar los caracteres especiales que son un medio para formatear el
texto:
Designacin
Descripcin Secuencia
estndar
Continuacin <newline> \
Nueva lnea NL (LF) \n
Tab horizontal HT \t
Backspace BS \b
Vuelta carro CR \r
Avance pgina FF \f
Backslash \ \\
Comillas
' \'
simples
Comillas
" \"
dobles
Un ejemplo de cdigo especial:
document.write("sta es un lnea \n y sta es otra");
A menudo sucede que queremos indicar al elaborador que escribe en vdeo una cadena con un
aparte. En este caso, la indicacin se efecta con una secuencia de caracteres especiales. Un
carcter especial, por ejemplo, son justamente las comillas simples que a menudo sustituyen al
apstrofe, por lo que, en este ltimo uso, deben sealarse como carcter especial hacindolas
preceder de una barra de direccin inversa. El ordenador, en pocas palabras, cuando se encuentra
con estas particulares secuencias sabe que debe interpretar diversamente estos caracteres, casi
como si fueran comandos.
Declaracin variables
var micarcter,
mivariable;
var Verifica=null;
si se utiliza el comando
if(Verifica != null) alert("No he sido utilizada");
var Verifica;
Palabras reservadas
En Javascript hay palabras clave que no se pueden utilizar como identificadores de datos. He aqu
el elenco:
abstract do if package throw

boolean double implements private throws
break else import protected transient
byte extends in public true
case false instanceof return try
catch final int short var*
char finally interface static void
class float long super while
const* for native switch with
continue function new synchronized
default goto null this
Las palabras clave reservadas, normalmente no usadas por Javascript van precedidas por un
asterisco *.
Tipos de variables
Para convertir los valores basta utilizar:
1. las comillas, para convertir un valor numrico en cadena o la suma de un nmero con un
espacio;
2. mtodo String() (desde Javascript 1.2) para convertir en cadena o con el constructor
String() (p.ej., micadena=String(num));
3. las funciones eval(), parseInt() y parseFloat() para convertir un valor cadena en numrico;
4. los valores lgicos se obtienen de valores numricos o cadena igualndolos a true o false.
Las funciones eval(), parseInt() y parseFloat()funcionan como sigue:
parseInt busca un entero al inicio de una cadena, descartando las cadenas, y lo visualiza
ignorando las partes decimales y la eventual coma (p.ej., parseInt("39 grados")=39). Un
segundo parmetor, facultativo, es la base numrica (p.ej., parseInt(text,16) para buscar
nmeros hexadecimales);
parseFloat opera de la misma manera, pero conserva la eventual coma presente y el signo.
La funcin eval es bastante compleja y busca cualquier expresin Javascript vlida para
transformarla en nmero. En Netscape 2.0, sin ambargo, provoca cadas imprevistas:
x=10; y=20; z=30; eval("x+y+z+900")=960
De todas formas, en cualquier momento, se puede verificar el tipo de la variable mediante el

operador typeof (p.ej., typeof 69 restituye "number"), el cual ha sido introducido con Javascript 1.1.
Los valores restituidos son: string, boolean, number, function.
Supongamos, por ejemplo, que tenemos las siguientes variables:
var prueba=new Function()

var nmero=1
var carcter="Hola"
con el operador typeof se tendr
typeof prueba restituir object

typeof nmero restituir number
typeof carcter restituir string
Array
Javascript no soporta las matrices como variables, sino como objetos por lo que se crea una matriz
slo si se declara . Dicha declaracin debe hacerse como instancia del objeto Array:
nombrematriz=new Array(num)
Los array, en cuanto objetos, sern tratados ms adelante. Aqu ofreceremos slo un adelanto
entre otras cosas porque el programador tradicional los buscar por costumbre entre las variables.
Para acceder a un elemento de la matriz se utiliza el ndice que indica la posicin del elemento
dentro de la misma. Dicha posicin empieza a contarse desde 0 y no desde 1.
He aqu, por ejemplo, una matriz
animals=new Object[]
animals[0]="rana";
animals[1]="pato";
animals[2]="burro";
animals[3]="oso";
animals[4]="gallina";
en la que el primer elemento es "rana" y tiene como ndice 0.
El uso de las matrices reviste gran importancia en Javascript porque este lenguaje indiciza
bastantes elementos, como las imgenes o los enlaces, por lo que se pueden invocar con el objeto
asociado o con el ndice.
En Javascript faltan matrices bidimensionales y tridimensionales, pero se pueden reproducir

fcilmente como matrices de matrices.
Operadores
Los operadores aritmticos son binarios o unitarios. Los operadores unitarios modifican el valor al
que se aplican y son:
Operador Smbolo Accin

Incremento ++ Incrementa una unidad
Disminucin -- Disminucin
Menos
- Vuelve negativo un nmero
unitario
Los operadores unitarios matemticos pueden colocarse antes (prefijos) o despus (sufijos) del
operando y su valor vara segn esta posicin, ya que el operador prefijo modifica el operando
antes de utilizar su valor, mientras eloperador sufjo modifica el operando despus de haber
utilizado el valor. Un ejemplo puede facilitar la comprensin:
x=10; x=10;
y=x++; y=++x;
por lo que y=10 y por lo que y=11 y
x=11 x=11
Los operadores binarios matemticos no cambian el valor de los operandos, sino que memorizan el
resultado en un tercer operando. Incluyen las principales operaciones aritmticas:
Operador Smbolo Accin
Suma + Suma dos operandos
Resta - Reste el segundo operando del primero
Multiplicacin * Multiplica los dos operandos
Divisin / Divide el primer operando por el segundo
Facilita el resto de la divisin entre dos
Resto (mdulo) %
operandos
Los operadores relacionales son:
Operador Accin
> Mayor que
>= Mayor o igual
< Menor que
<= Menor o igual
== Igual
!= Distinto
Los operadores lgicos son (el NOT es un operador unitario):
Operador Smbolo Significado

AND & AND lgico
OR | OR lgico
AND && AND valoracin
OR || OR valoracin
XOR ^ OR exclusivo
NOT ! Negacin
La negacin (!) equivale al complemento a uno (~). Los operadores &, | valoran ambos lados del
argomento y deciden el resultado. Los operadores && y || pueden emplearse para evitar la
valoracin de los operandos de la derecha si la valoracin es necesaria. Las tablas de verdad
correspondientes son:
X Y X&&Y X| |Y X^Y !X
0 0 0 0 0 1
0 1 0 1 1 1
1 0 1 1 0 0
1 1 0 0 1 0
Operador Accin
& AND
| OR
^ XOR
~ Complemento a uno
>> Shift a la derecha
<< Shift a la izquierda
Shift a la derecha
>>>
rellenando los ceros
Los operadores sobre cadenas son:
Operador Nombre Sintaxis

+ Suma cadena=cadenaA+cadenaB
+= Adjunta cadena=cadenaA+="gorda"
== Igualdad if (cadenaA==cadenaB)
!= Desigualdad if (cadenaA!=cadenaB)
If...else
if(expresin) instruccin
[else instruccin]...
if (expresin) {instruccin}
else (expresin) {instruccin}
else (expresin) {instruccin}
else (expresin) {instruccin}.
else instruccin
switch (expresin) {
case constante1: instrucciones
break;
case constante 2: instrucciones
break;
....
default instrucciones
}
For
for (inicializacin; condicin; incremento) instruccin;
for (i=0; i<10; i++){
matriz[i]=0;
}
Otro tipo de ciclo es for...en que trabaja con las propiedades de un objeto.
La sintaxis es:
for (ndice en objeto) {instrucciones}
Dicha funcin se usa para analizar las propiedades del objeto que se indica. Es una instruccin
algo compleja pero de enorme utilidad para conocer el valor que en un momento dado poseen las
propiedades de un objeto. Aqu no entraremos en pormenores. Baste un ejemplo:
for (i en navigator){
document.write("Propiedad :"+i);
document.writeln (" valor: ": +navigator[i]);
}
While y do ... While

Podemos tener otro control de flujo con:
while (condicin) expresin
while (true) {...}
do ... While
do {instrucciones} while (condicin)
Break y continue
Los comandos break y continue sirven para optimizar los ciclos for y while, as como para el
operador condicional if.
El comando break, de hecho, interrumpe un bloque de instrucciones saltando a la primera

instruccin que sigue al bloque que contiene el break. Un uso apropiado evitar la formacin de
loop sin salida:
function interrumpe() {
while (x>0) {
if (x>3)
break; //aqu la instruccin se interrumpe y sale del if
x++;
}
return x;
}
El ejemplo muestra cmo el ciclo contina incrementando la variable x hasta que sta llega a ser
superior a 3, en cuyo caso encuentra la instruccin break que interrumpe el ciclo y contina con la
instruccin que sigue al bloque (return x;).
El comando continue, por su parte, indica que se continue el bloque pero interrumpiendo la
iteracin en ese punto y volviendo a comenzar desde el inicio del bloque.
while (x<10) {
x++;
if (x>3)
continue;
a+=x;
}
El ejemplo muestra cmo el ciclo se repite si x es inferior a 10, mientras que si es igual a 8, la
instruccin continue interrumpe el ciclo y vuelve a empezar desde el principio.

Javascript 2

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Javascript 2

Diunggah oleh

Hak Cipta:

Format Tersedia

Marca <Script>

HTML prev una marca especfica para los script:

Invocacin de los script

<SCRIPT Language=Javascript SRC="nombrefile.js"><!--

y guardarlo en el mismo directorio del archivo Javascript;

Si el script est dentro del documento, puede

1. Escribir el siguiente cdigo HTML:

<A HREF="pagina.html" onclick="alert('hola')">Link</A>

Activar los eventos dentro de los script

<SCRIPT FOR=Object EVENT=evento>....</SCRIPT>

Eventos que se activan con botones del ratn

1. onClick: activado cuando se hace clic en un objeto;

Ejemplo: si respondes Aceptar, el enlace se activa, si respondes Cancelar, el enlace no se activa.

Eventos con movimientos del ratn

1. onMouseOver: activado cuando el ratn se mueve por encima de un objeto;

De enorme importancia es el evento onMouseOver combinado con onMouseOut para crear el

La sintaxis es muy sencilla:

<A HREF="#" onmouseover="document.images[num].src='imagen.gif'"

Eventos arrastrando el ratn

Eventos vinculados a las modificaciones

1. onChange: activado cuando el contenido de un campo de un formulario sufre una

Eventos al cargarse los objetos

1. onLoad: este handler funciona en la subida de objetos, en particular ventanas e imgenes;

En Javascript existen distintos tipos de valores, que son:

1. numricos, los cuales se dividen a su vez en:

Ejemplo de variable con objeto

Un ejemplo de cdigo especial:

document.write("sta es un lnea \n y sta es otra");

if(Verifica != null) alert("No he sido utilizada");

abstract do if package throw

Las funciones eval(), parseInt() y parseFloat()funcionan como sigue:

x=10; y=20; z=30; eval("x+y+z+900")=960

De todas formas, en cualquier momento, se puede verificar el tipo de la variable mediante el

Supongamos, por ejemplo, que tenemos las siguientes variables:

var prueba=new Function()

con el operador typeof se tendr

typeof prueba restituir object

He aqu, por ejemplo, una matriz

en la que el primer elemento es "rana" y tiene como ndice 0.

En Javascript faltan matrices bidimensionales y tridimensionales, pero se pueden reproducir

Operador Smbolo Accin

Los operadores relacionales son:

Los operadores lgicos son (el NOT es un operador unitario):

Operador Smbolo Significado

Los operadores sobre cadenas son:

Operador Nombre Sintaxis

for (ndice en objeto) {instrucciones}

While y do ... While

while (condicin) expresin

while (true) {...}

do {instrucciones} while (condicin)

El comando break, de hecho, interrumpe un bloque de instrucciones saltando a la primera

Anda mungkin juga menyukai