Está en la página 1de 16

INICIACIN A

1AVASCRIPT




JavaScript


JOVENMANIA.COM Pg. . 2
JavaScript
JavaScript es un lenguaje que fue creado para darle mas dinamismo a las pginas web. Qu significa
esto? Que antes, con HTML, lo nico que podas hacer era poner fotos, texto, sonido y otras cositas. Con
este lenguaje, le pods dar mas movimiento a una pagina web y lograr una verdadera interactividad
con los usuarios, algo que todos buscan en Internet.
Por ejemplo, que cambien las fotos cuando el mouse pasa por arriba, generar una calculadora en el
navegador, abrir ventanas automticamente para poner publicidad y muchas otras utilidades. En
definitiva, hacer que la pgina responda a las acciones de los usuarios.
Qu se necesita para programar en JavaScript? En principio saber HTML y tener un editor de texto
para insertar los cdigos en el documento HTML. Es importante aclarar que no hace falta ser un
programador profesional ya que al ser un lenguaje de scripts es sencillo y cualquier persona que
tenga ganas de aprender, y conocimientos bsicos sobre el funcionamiento de una pgina web, podr
hacerlo.
JavaScript, como bien lo dice el nombre, es un lenguaje de script. Los lenguajes de script estn
diseados para expandir y mejorar las posibilidades de una aplicacin (como el Internet Explorer o el
Netscape Navigator) sin necesitar de los costosos servicios de un programador. Sin embargo, los
conceptos de la escritura de script son los mismos que los de la escritura de programacin.
La diferencia fundamental entre escribir programas enteros y escribir scripts para manipular una pgina
web es la siguiente: cuando uno escribe un programa entero, todo lo que aparece en la pantalla es
resultado del cdigo del programa. En cambio, cuando uno escribe scripts, le est indicando al
explorador, qu debe hacer con todo el documento HTML.
El JavaScript sirve para indicarle al explorador cmo debe manipular la pgina. Pero esa manipulacin no
sucede porque s, sucede en respuesta a una accin. Esa accin se llama evento y se refiere a una
accin del usuario. Por ejemplo, puedo escribir un script que ante la accin del usuario de cliquear sobre
una imagen (evento), cambie el color del texto del documento.
Ahora, no nos podemos olvidar de su caracterstica fundamental. Este es un lenguaje completamente
abierto, lo que implica que podemos sacar las funciones que se hicieron en otras pginas y adecuarlas a
la nuestra.

Java y JavaScript: Parecidos pero diferentes
JavaScript fue lanzado al mercado en 1994 por Netscape, y aunque suenen parecido, no tiene nada
que ver con el potente Java, desarrollado por Sun Microsystems, aunque tom muchos conceptos de
ese lenguaje.
La diferencia principal radica en que JavaScript agrega funcionalidades al cdigo HTML, para incorporar
interactividad a una pgina web, mientras que Java es un lenguaje con el que se puede desarrollar
cualquier tipo de programa, tenga o no relacin con Internet.
Java es ms potente y complejo, lo que no significa que sea mejor. Hay un lenguaje para cada
situacin, solo hay que saber analizar el problema.
Java es un lenguaje muy completo, que se utiliza generalmente para hacer aplicaciones complicadas.
Para dar un ejemplo extremo: muchos electrodomsticos estn programados en Java. En cambio,
Javascript es un lenguaje sencillo para programar pginas web, aunque muy til.


JavaScript


JOVENMANIA.COM Pg. . 3
JavaScript Java
Es un lenguaje... Compacto y sencillo. Complicado y estricto
Funciona por s
solo?
No, necesita estar
contenido en un HTML.
Si, adems de las famosas applets
se pueden armar aplicaciones
multiplataformas (funcionan en
varios sistemas operativos).
Necesito
compilarlo?
No, es interpretado por
el navegador del cliente
antes de ver una pagina
web.
Si, es necesario tener un compilador
de JAVA para ejecutarlo.
Tengo que
declarar el tipo
de las variables?
No, no hay que declarar
el tipo de datos de las
variables.
Si, hay que declararlas todas y
especificar su tipo.


Cmo insertar cdigo JavaScript
Lo primero que uno debe saber antes de programar nada en JavaScript, es como incrustarlo en un
documento HTML. Para ello, tenemos dos formas; una, usando una directiva especial y otra, como
parmetro de ciertas directivas (como <A>, <IMG>,...) en respuesta a eventos de usuario ya
predefinidos (pulsar el ratn, cargarse la pgina,...).
El primer mtodo consiste en usar la directiva pareada <SCRIPT>. Esta directiva admite como
parmetro LANGUAGE, que en principio solo sera JavaScript, pero como ahora tambin existe el
VBScript hay que tenerlo en cuenta. Adems, no hemos de olvidar que habr quien tenga un navegador
que no soporte JavaScript y habr quien s pero no quiera soportarlo, as que, de alguna manera
tenemos que prevenir esto, evitando que todo el cdigo salga desparramado en la pantalla del
navegador.
Bien, pues para ello encerraremos el cdigo JavaScript entre comentarios, pero hacindolo de esta forma
para no tener problemas:

<SCRIPT LANGUAGE="JavaScript">
<!--
Codigo JavaScript
//-->
</SCRIPT>

Y, Dnde colocamos este cdigo?
En principio no importa mucho donde lo pongamos, sin embargo, una buena costumbre es introducirlo
en la cabecera del documento HTML (ya sabis, entre <HEAD>...</HEAD>), puesto as estis
completamente seguros de que cuando se empieza a cargar el documento y a aparecer en la pantalla,
todo el cdigo JavaScript ya est cargado y listo para ser ejecutado si se da el evento apropiado.

IncIusin de ficheros
Los ficheros externos son usados para evitar la aglomeracin de cdigo script en el archivo html y para
dar mayor dinamismo y rapidez a los cambios que se puedan generan en el cdigo del script.
<SCRIPT LANGUAGE="JavaScript" SRC="ruta/fichero.js"></SCRIPT>
Este cdigo es ignorado automticamente por los navegadores que no soportan JavaScript aunque el
acceso al fichero .js puede ralentizar la aplicacin.









JavaScript


JOVENMANIA.COM Pg. . 4
VaIores, variabIes y IiteraIes.

Valores:

JavaScript contiene los siguientes tipos de valores:
Numricos : 42, 3.14159, ...
Lgicos (Boolean) : true o false.
Strings : "Esto es un string".
Null : palabra especial que denota el valor nulo.

Funciones especiales para conversin de tipos de datos:
eval(cadena)
Ejecuta la expresin o sentencia contenida en la cadena que recibe como parmetro.
mensaje = 'Hola';
eval("alert('" + mensaje + "');");
Este ejemplo nos muestra una ventana con un saludo.
parseInt(cadena [, base])
Convierte en un nmero entero la cadena que recibe, asumiendo que est en la base indicada.
Si este parmetro falta, se asume que est en base 10. Si fracasa en la conversin devolver el
valor NaN.
parseInt("3453");
Devuelve el nmero 3453.
parseFloat(cadena)
Convierte en un nmero real la cadena que recibe, devolviendo NaN si fracasa en el intento.
parseFloat("3.12.3");
Este ejemplo devuelve NaN ya que la cadena no contiene un nmero real vlido.
isNaN(valor)
Devuelve true slo si el argumento es NaN.
isFinite(numero)
Devuelve true si el nmero es un nmero vlido y no es infinito.
Number(referencia)
String(referencia)
Convierten a nmero (o referencia) el objeto que se les pase como argumento.
Variables:

En JavaScript un identificador de variable debe de comenzar con una letra o con el carcter de
subrayado ("_"); seguido de cualquier letra incluyendo digitos (0-9). JavaScript distingue entre
maysculas y minsculas.

Se pueden declarar variables de dos formas:
Con una simple asignacin de un valor; por ejemplo : x = 42 ;
Con la palabra clave var; por ejemplo : var x = 42 ;



JavaScript


JOVENMANIA.COM Pg. . 5
Literales:

Se utilizan para representar valores en JavaScript, y son los siguientes:
Integers: Se puede representar en decimal, hexadecimal y octal.
Ejemplos: 42, 0xFFF, -345
Punto flotante: Se puede poner con decimales o con notacin cientfica.
Ejemplos: 3.1415, -3.1E12, .1e12, y 2E-12
Booleam: Puede tener dos valores; true o false.
String: Puede ir entre comillas simples o dobles.
Ejemplos: "blah" , 'blah' , "1234" , "una lnea \n otra lnea"

Dentro de los string se pueden especificar los siguientes caracteres especiales:


Carcter Significado
\b backspace
\f form feed
\n salto de lnea
\r return
\t Tabulador
\\ carcter backslash
\ carcter comillas dobles

Ejemplos:
var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service.";
document.write(quote);
var home = "c:\\temp";

Comentarios

Los comentarios en JavaScript se ponen de la misma forma que en Java.


// Esto es un comentario de una lnea.
/* Esto es un comentario
de ms de una lnea */






Expresiones JavaScript para especificar vaIores de atributos en HTML


& Indica comienzo de la variable.
{ } La expresin JavaScript debe de ir entre llaves.
; Indica la terminacin.


Estructutas de controI.

La estructuras de control del JavaScript son iguales que las de Java, o C.

if ... else:

if (expresin ){
acciones;
}
else{
acciones;
}



JavaScript


JOVENMANIA.COM Pg. . 6
Ejemplo:
<HTML>
<HEAD><TITLE>Ejemplo sentencia if ... else</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
//definicion de variables
var pregunta = "Cunto vale 10 + 10?"
var respuesta_correcta = 20
var correcto = '<p>Correcto!</p>'
var incorrecto = '<p>Incorrecto!</p>
//realiza la pregunta
var respuesta_dada = prompt(pregunta, "0");
//comprueba la respuesta
if (respuesta_dada != respuesta_correcta) {
//respuesta incorrecta, segunda oportunidad
if ( confirm("No! Pulsa OK para reintentarlo."))
respuesta_dada = prompt(pregunta, "0")
}
//comprueba la respuesta
var salida = (respuesta_dada == respuesta_correcta) ? correcto : incorrecto
//-->
</SCRIPT></HEAD>
<BODY><SCRIPT LANGUAGE="JavaScript">
<!--
//escribe la salida
document.write(salida)
//-->
</SCRIPT></BODY></HTML>

while:
while ( expresin ){
acciones;
}

for:
for ( asignacin ; expresin ; incremento ){
acciones;
}

Expresin condicional:
(condicin) ? valor1 : valor2;
Ejemplo:
<HTML>
<HEAD><TITLE>Ejemplo operadores</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var pregunta = "Cunto vale 10 + 10?"
var respuesta_correcta = 20
var correcto = "<p>CORRECTO!</p>"
var incorrecto = "<p>INCORRECTO</p>"
//realiza la pregunta
var respuesta_dada = prompt(pregunta, "0")
//comprueba la respuesta
var salida = (respuesta_dada == respuesta_correcta) ? correcto : incorrecto
//-->
</SCRIPT></HEAD>
<BODY><SCRIPT LANGUAGE="JavaScript">
<!--
//escribe la salida
document.write(salida)
//-->
</SCRIPT></BODY></HTML>



for ... in:
for (inicio;condicin;incremento) {
acciones;
}
JavaScript


JOVENMANIA.COM Pg. . 7
switch:
switch (condicin){
case caso1: sentencias; break;
case caso2: sentencias; break;
...
case casoN: sentencias; break;
}

Se puede utilizar dentro de los bucles "break y "continue de la misma forma que en Java.
Break: se utiliza para hacer una salida forzada de una estructura de control, siguiendo una condicin.
var i = 0;
while (i < 6) {
if (i == 3)
break;
i++;
}

Operadores

Asignacin

= x=10
+= , -= , *= , /= , ...... x+=y (x=x+y) , x-=y (x=x-y) , .....

Aritmticos

++ Incremento (puede ser preincremento o postincremento
x=++a; x=a++; )
-- Decremento (puede ser predecremento o postdecremento
x=--a; x=a--; )
- Negacin ( x= - b )
% Mdulo (var1 % var2 )




Lgicos

&& AND
| | OR
! NOT





Lgicos para bits

& AND
| OR
! NOT
^ XOR
~ NOT
<< Desplazamiento a la Izquierda
>> Desplazamiento a la derecha
>>> Desplazamiento a la derecha y mete
ceros por la izquierda.




Comparacin

== igual
< menor
<= menor o igual
> mayor
>= mayor o igual
!= distinto
JavaScript


JOVENMANIA.COM Pg. . 8

Ejemplos:

if (x>3)
if (x<10)
doanything( );

if (x>3 && x<10) doanything( );

Operador para String

+ Concatenar cadenas ( cad = cade1 + " otra cosa " )

Operadores especiales

new Para crear instancias de un Objeto (Array, Boolean, Date,
Function, Math, Number, y String ).
objeto = new tipoObjeto ( para1 [,para2] ...[,paraN] )
typeof Devuelve el tipo.
void Para expresiones que se van a evaluar si retornar ningn
valor.


La ventana ALERT
Se trata de una ventana estndar que usamos para mostrar informacin el pantalla. Se puede mostrar
texto, variables y texto en conjunto con variables. El diseo de la ventana ya est definido lo nico que
podemos hacer es mostrar la informacin en una o varias lneas. Su diseo y sintaxis es:

alert("Hola, mundo!");



Vamos a realizar nuestro primer "programa" en JavaScript. Haremos surgir una ventana que nos
muestre: "hola, mundo". As podremos ver los elementos principales del lenguaje. El siguiente cdigo es
una pgina Web completa con un botn que, al pulsarlo, muestra el mensaje.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function HolaMundo() {
alert("Hola, mundo!");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="Boton" VALUE="Pulsame" onClick="HolaMundo()">
</FORM>
</BODY>
</HTML>






JavaScript


JOVENMANIA.COM Pg. . 9
Funciones


En Javascript tambin podemos definir funciones (por medio de la palabra reservada function), pasarles
argumentos y devolver valores. La estructura general de la definicin de una funcin es:

function nombre_funcion(arg1, ... , argN) {
Cdigo de la funcin

Return (valor de retorno); }


mbito de las variables

En JavaScript tenemos variables locales y variables globales. Las variables locales sern aquellas que se
definan dentro de un funcin, mientras las variables globales sern aquellas que se definan fuera de la
funcin, y podrn ser consultadas y modificadas por cualquiera de las funciones que tengamos en el
documento HTML.
Ejemplo:


<SCRIPT LANGUAJE="JavaScript>
<!--
var x; // variable global
function f (valor ){
x = 3; // variable local, con una asignacin.
return (valor+x);
}
// -->
</SCRIPT>


Para llamar a una funcin:


<BODY>
<SCRIPT>
document.write("El valor retornado por la funcin es: ",f (5 ), ".")
</SCRIPT>
</BODY>


Mtodo WRITE y WRITELN

Para sacar mensajes por pantalla se utiliza el mtodo: write( )
Ejemplos:

var texto="esto es un mensaje de texto;
document.write (` Esto es un mensaje `);
document.write (texto);
document.write (texto + ` ms largo);

El mtodo writeln() produce, adems de sacar un mensaje por pantalla, un retorno de carro.





JavaScript


JOVENMANIA.COM Pg. . 10


La ventana PROMPT
La funcin PROMPT sirve para poder pedir un dato al usuario. La respuesta por defecto es optativa, si no
la ponemos, no hay respuesta por defecto. Esta funcin devuelve una cadena con la respuesta que
hayamos introducido, tras pulsar el botn "Aceptar. Si cancelamos, devuelve NULL.
<HTML>
<HEAD><TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function fu()
{
nombre=prompt("Como te llamas?","defecto");
if (nombre!=null){
alert("hola"+nombre);}
}
-->
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE="button" value="pulsa" onClick="fu()">
</BODY></HTML>


OBJETOS DE JAVASCRIPT

Se definen objetos que estn relacionados con la fecha actual, la ventana del navegador, etc.
Cada objeto tiene por un lado unas propiedades (el color de fondo de una pgina por ejemplo) y por el
otro lado tiene mtodos (funciones que se pueden realizar con ese objeto). Sobre estos objetos se
pueden producir eventos.

Los eventos que se pueden producir en Javascript son:

onBlur: se produce cuando un elemento pierde el foco.
onClick: se produce cuando pinchamos sobre ese elemento.
onChange: se produce cuando el usuario cambia el valor de algn elemento.
onFocus: se produce cuando un elemento coge el foco.
onLoad: se produce al cargar esta pgina en el navegador.
onMouseOver: se produce cuando pasamos el ratn por encima.
onMouseOut: se produce cuando el ratn salga de ese elemento.
onSelect: se produce cuando seleccionamos un elemento.
onSubmit: se produce cuando pulsamos el botn "Enviar de un formulario.
onUnload: se produce cuando el usuario abandona una web.

Los objetos integrados en Javascript son:
Anchor
Button
Checkbox
Date
Document
Elements (array)
Form
Frame
Hidden
History
Link
Location
Math
Navigator
Password
Radio
Select
Reset
String
JavaScript


JOVENMANIA.COM Pg. . 11
Submit
Text
Textarea
Window

Los eventos se pueden producir en todo el documento y para que eso pase debemos aplicar este evento
en la etiqueta Body. La segunda zona donde se produce un evento es en un formulario y para esto, el
evento lo debemos incluir en la etiqueta Form. La tercera zona donde se pueden producir eventos es
sobre un elemento eventual como un botn o un campo de texto de un formulario.

Cada elemento de un formulario puede llevar determinados eventos:
<SELECT> onBlur, onChange, onFocus.
Type = "checkbox onClick
Type = "radio onClick
Type = "reset onClick
Type = "button onClick
Type = "submit onClick
Type " text onBlur, onChange, onFocus, onSelect
<TEXTAREA> onBlur, onChange, onFocus, onSelect
Fuera de un formulario:
Documento <BODY> onLoad, onUnload
<FRAME> onLoad, onUnload
<A href> onClick, onMouseOver, onMouseOut
<FORM> onSubmit

OBJETO STRING

Es un tipo de objeto de Javascript que nos permite trabajar con cadenas de caracteres. La nica
propiedad que tiene es length la cual contiene el nmero de caracteres de ese objeto. La sintaxis para
usar las propiedades es:
nombre objeto.propiedad

Los mtodos de este objeto son:
Anchor () crea un elemento ancla (enlace) e ir donde le diga el objeto string. Con "cadena,
visualizaremos lo que queramos que se vea en la web.
Big () muestra la cadena a la que hacemos referencia con una fuente grande.
Blink () muestra la cadena parpadeando.
Bold () muestra la cadena en negrita.
CharAt (ndice) muestra el carcter que est en la posicin que indique ndice.
Fixed () muestra la cadena en un tipo de letra de ancho fijo.
Fontcolor () muestra esa cadena en el color especificado en formato HTML.
IndexOf (subcadena, inicio) devuelve la posicin o el ndice de la primera letra o subcadena que
coincida con subcadena a partir de inicio.
Italics () muestra la cadena en letra cursiva.
LastIndexOf (subcadena) devuelve la posicin de la ltima letra o subcadena que coincida con el
parmetro que hemos pasado.
Link (URL) hace lo contrario que el mtodo anchor. Nos aparecer subrayado el contenido del objeto
string.
Small () muestra la cadena con un tipo de fuente pequeo.
Strike () muestra la cadena con el texto tachado.
Sub () muestra la cadena en subndice.
Sup () muestra la cadena en superndice.
Substring (inicio, final) nos devuelve el texto contenido entre la posicin inicial y final.
ToLowerCase () nos devuelve la cadena en minsculas.
ToUpperCase () nos devuelve la cadena en maysculas.

EJEMPLO

<BODY>
<SCRIPT language = "Javascript>
<!-
var frase = "Hoy es Lunes;
document.write ("frase = + frase + `<br>);
document.write ("Longitud = + frase.length + `<br>);
document.write ("Negrita = + frase.bold + `<br>);
document.write ("Negrita = + frase.bold () + `<br>);
document.write ("Maysculas = + frase.toUpperCase () + `<br>);
//-- >
</SCRIPT>
</BODY>

JavaScript


JOVENMANIA.COM Pg. . 12
OBJETO MATH

Lo utilizaremos para efectuar clculos matemticos o funciones trigonomtricas. Sus propiedades son:
E: contiene el nmero e.
LN2: contiene el logaritmo natural de 2.
LN10: contiene el logaritmo natural de 10.
LOG2E: contiene el logaritmo de e en base 2.
LOG10E: contiene el logaritmo de e en base 10.
PI: contiene el nmero pi.
SQRT1_2: contiene la raz cuadrada de .
SQRT2: contiene la raz cuadrada de 2.
Sus mtodos son:
Abs (n) devuelve el valor absoluto de n.
Acos (n) devuelve el arcocoseno de n expresado en radianes.
Asin (n) devuelve el arcoseno de n expresado en radianes.
Atan (n) devuelve la arcotangente del ngulo n.
Ceil (n) devuelve el menor valor entero que es igual o mayor que n.
Cos (n) devuelve el coseno del ngulo n.
Exp (n) devuelve el nmero e elevado a n.
Floor () devuelve el valor entero mayor que sea igual o menor que n.
Log (n) calcula el logaritmo natural de n en base e.
Max (x,y) devuelve el mayor de x e y.
Min (x,y) devuelve el menor de x e y.
Pow (x,y) calcula la potencia x elevado a y.
Random () devuelve un nmero aleatorio entre cero y uno.
Round (n) devuelve el nmero redondeado.
Sin (n) devuelve el seno del ngulo n expresado en radianes.
Sqrt (n) devuelve la raz cuadrada de n.
Tan (n) nos devuelve la tangente del ngulo n.

OBJETO DATE

Se usa para trabajar con fechas y con horas.
Por ejemplo:

Var fecha = new Date (); (Fecha y hora del equipo)
Tambin se puede poner:
Var fecha = new Date (cadena); siendo cadena ("da, mes, ao, hh, mm, ss)
La tercera manera de ponerlo es:
Var fecha = new Date (ao, mes, da, hh, mm, ss);

Este objeto no tiene propiedades.
Sus mtodos son:

GetDate () nos devuelve el da del mes. Un nmero entre 1 y 31.
GetDay () nos devuelve el da de la semana siendo el cero el domingo.
GetHours () nos devuelve la hora.
GetMinutes () nos devuelve los minutos comprendidos entre 0 y 59.
GetMonth () nos devuelve el nmero del mes siendo el cero enero.
GetSeconds () nos devuelve los segundos comprendidos entre 0 y 59.
GetTime () nos devuelve los milisegundos que han pasado desde el de enero de 1970 hasta la fecha
indicada.
GetYear () devuelve el ao.
SetDate () establecemos el da del mes.
SetHours () establecemos las horas.
SetMinutes () establecemos los minutos.
SetMonth () establecemos el mes.
SetSeconds () establecemos los segundos.
SetTime (ms) devuelve la fecha equivalente a los milisegundos que le pasemos a partir del 1 de enero
de 1970.
SetYear () establecemos el ao.
ToLocaleString () nos devuelve una cadena que contiene la fecha actual.
Parse () le pasamos una cadena y lo convierte a un objeto de tipo date.








JavaScript


JOVENMANIA.COM Pg. . 13
EJEMPLO

<BODY>
<SCRIPT langua = "Javascript>
var fecha = new Date ();
document.write ("Hoy estamos a + fecha.getDate ());
document.write ("del mes n + fecha.getMonth () + 1);
document.write ("del ao + fecha.getYear () + 1900);
document.write ("y son las + fecha.getHours () + "horas + fecha.get.Minutes () +
"Minutos);
</SCRIPT>
</BODY>

OBJETO WINDOW

Hace referencia a la ventana del navegador, al programa.
Las propiedades de este objeto son:

DefaultStatus: contiene el mensaje a mostrar en la barra de estado del navegador.
Frames: es un array que contiene todos los frames de una pgina.
Length: contiene el nmero de frames.
Name: contiene el nombre de la ventana.
Parent: se utiliza para hacer referencia a alguna ventana que contenga la etiqueta frameset.
Self: hace referencia a la ventana activa.
Status: hace referencia a la barra de estado del navegador.
Top: hace referencia a una ventana superior del navegador.
Window: es lo mismo que self, hace referencia a la ventana activa.
Document: hace referencia al documento que estamos viendo en el navegador.
Frame: hace referencia al frame activo. Devolvera el nombre del frame activo.
Location: contiene la URL del documento que se muestra.
Los mtodos son: (pudiendo poner window.mtodo () o mtodo a secas)
Alert ("mensaje) muestra una ventana de alerta con el mensaje que pongamos y un botn de
aceptar.
Close () cierra una ventana.
Confirm ("mensaje) muestra una vetana con un botn de aceptar o cancelar.
Open ("URL, "nombre ventana, [opciones]) abre una nueva ventana y carga en esa ventana el
documento que refleje URL. Con nombre ventana le asignamos un nombre para poder cerrarla despus.

Las opciones son:

toolbar = yes/no :si queremos que la ventana nueva tenga la barra de herramientas.
location = yes/no : hace referencia al campo donde introducimos la URL donde introducimos la
URL de la pgina.
directories = yes/no : hace referencia a los botones de directorio.
status = yes/no : hace referencia a la barra de estado.
menubar = yes/no : hace referencia a la barra de los mens.
scrollbar = yes/no : si queremos que la ventana tenga barras de desplazamiento.
resizable = yes/no :si queremos que la ventana se pueda redimensionar.
width = nmero :ancho de la ventana.
height = nmero :alto del navegador.



prompt ("mensaje ["cadena] nos muestra una ventana con un botn de aceptar, otro de cancelar y
una caja de texto. Para recoger el dato introducido, este mtodo se puede guardar en una variable. Por
ejemplo: var cad = prompt ("Escribe tu nombre)
setTimeout (ms) retrasa la ejecucin de una instruccin los milisegundos que le indiquemos. Tambin
hay que guardarlo en una variable.
focus () coloca el enfoque en una determinada ventana. Hace referencia a la ventana activa. Por
ejemplo: ventana2.focus ().
blur () quita el enfoque de la ventana activa que indiquemos.
scroll () recorre la ventana.

OBJETO LOCATION

Este objeto hace referencia al campo direccin de la ventana del navegador. Adems de ser
independiente, es una propiedad del objeto window. No tiene ningn mtodo. Slo tiene propiedades. El
formato es:
Protocol//hostname : port pathname search hash
Protocol hace referencia al tipo de protocolo incluyendo los dos puntos.
Hostname hace referencia a la direccin de la pgina siendo su nmero IP o su nombre del dominio.
JavaScript


JOVENMANIA.COM Pg. . 14
Port hace referencia al puerto por el que se realiza la conexin. Por defecto en HTTP es 80.
Pathname hace referencia a la ruta del directorio de la pgina.
Search hace referencia a la ruta del directorio de la pgina. Es equivalente al parmetro TARGET de
HTML.
Hash especifica un nombre de ancla (enlace a una misma pgina).

EJEMPLO

<BODY>
<A name = "top> </A>
Al final de la pgina hay un botn
<HR>
<SCRIPT language = "Javascript>
<!-
for (var i = 1; i<40; i++) {
document.write("ms abajo+<BR><P>);
//-->
</SCRIPT>
<FORM name = "formulario>
<INPUT type = "button name = "botn value = "volver arriba onClick =
"location.hash = `top>
</FORM>
</BODY>


EJEMPLO

<HTML>
<HEAD>
<TITLE> Nueva ventana </TITLE>
<SCRIPT language = "javascript>
<!-
function abrir () {
miventana = open (", "Mi_ventana, toolbar = no, directories = no, menubar
= no);
miventana.document.write("<HEAD><TITLE>Una nueva
ventana</TITLE></HEAD>);
miventana.document.write("<CENTER><H1><B>Cabeceras</B></h1>
</CENTER>);
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT type = "button name = "botn value = "Pincha aqu onClick = "abrir ()>
</FORM>
</BODY>
</HTML>

OBJETO DOCUMENT

Hace referencia al archivo HTML que vemos en el navegador. Las propiedades que tiene son:
Alinkcolor hace referencia al color de un enlace cuando pinchemos en l.
Anchors es un array que contiene las anclas que hay en el documento.
Bgcolor hace referencia al color de fondo de nuestra pgina.
Cookie hace referencia a una cookie.
Forms es un array que contiene los formularios que hay en el documento.
LastModified hace referencia a la ltima fecha y hora de la modificacin de la pgina.
LinkColor se refiere al color del enlace cuando an no lo hemos visitado.
Links es un array que hace referencia a los enlaces que hay en nuestra pgina.
Location contiene la URL de nuestro documento.
Title se refiere al ttulo de la pgina.
Vlinkcolor se refiere al color de un enlace cuando ya lo hemos visitado.
Length (slo para anchors, forms, links) contiene el nmero de elementos de ese array.
Los mtodos son:
Clear () borra la pgina de nuestra navegador.
Close () cierra el documento pero no cierra la ventana.
Open () vuelve a hacer activos todos esos elementos.
Write () imprime una cadena en la pgina.
JavaScript


JOVENMANIA.COM Pg. . 15
Writln () imprime una cadena en la pgina haciendo un salto de lnea aunque suele funcionar en
sistemas operativos UNIX.

OBJETO HISTORY

Contiene las direcciones que el usuario ha visitado en la ventana actual.
Slamente tiene una propiedad:

Length contiene el nmero de registros del objeto history.
Los mtodos son:
Back () va a la pgina anterior.
Forward () va a la pgina siguiente.
Go () va al registro que nosotros le indiquemos.
Se puede hacer referencia a este objeto de tres maneras diferentes:
Document.history : ventana actual
Nombre marco.history
Ventana.history

OBJETO NAVIGATOR

Contiene informacin sobre el navegador que est utilizano el usuario. No tiene mtodos y tiene tres
propiedades:
AppCodeName contiene el cdigo del navegador.
AppName contiene el nombre del navegador.
AppVersion contiene la versin del navegador.

EJEMPLO

<BODY>
<SCRIPT language = "Javascript>
document.write("Cdigo:+navigator.appCodeName+<P>);
document.write("Nombre:+navigator.appName+<P>);
document.write("Versin:+navigator.appVersion+<P>);
</SCRIPT>
</BODY>

OBJETO LINK

Se refiere a un texto o imagen que se hay incluido en la etiqueta <A HREF>. Las propiedades de cada
objeto link son las mismas que el objeto location y tampoco tiene mtodos.
Href hace referencia a lo que es la URL completa de una pgina

EJEMPLO

<HTML>
<HEAD>
<TITLE> 2 Frames con 1 click </TITLE>
</HEAD>
<FRAMESET cols = "40%, *>
<FRAME name = "fr1 src = "pg1.htm>
<FRAMESEt rows = "50%, *>
<FRAME name = "fr2 src = ">
<FRAME name = "fr3 src = ">
</FRAMESET>
</FRAMESET>
<BODY> Sin frames </BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> Pgina 1 </TITLE>
<SCRIPT language = "Javascript>
<!-
function cargar (p1, p2){
parent.fr2.location.href = p1;
parent.fr3.location.href = p2;
}
//-->
</SCRIPT>
<BODY>
<FORM>
<INPUT type = "button value = "2 en 1 onClick = "cargar (`pg2.htm,pg3.htm)>
JavaScript


JOVENMANIA.COM Pg. . 16
</FORM>
</BODY>
</HTML>

OBJET FORM

Es un objeto que nos permite denominar formularios y modificar o comprobar el valor de sus campos
antes de enviarlos a un servidor. Podemos utilizar la forms que es un array para acceder al contenido de
un formulario escribiendo:
Document.forms[n].nombre elemento.contenido
Document.formulario.nombre elemento.contenido

Todos los elementos de un formulario tienen dos propiedades: name y value.
Aparte, los elementos checkbox y radio tienen una propiedad ms:
Checked contiene el estado de ese elemento. Si estn marcadas nos va a devolver true. Si no,
devolvern false.

EJEMPLO

<HTML>
<HEAD>
<TITLE> Objeto FORM </TITLE>
<SCRIPT language = "Javascript>
function ventana (){
var cadena = ";
if(documetn.forms[0].mayorDeEdad.checked){
cadena = "mayor de edad;
}
else {
cadena = "menor de edad;
}
alert("El nombre del campo de texto
es:+document.forms[0].nombre.name+,\su contenido es:+document.formulario.nombre.value+\n y
eres+cadena);
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<FORM name = "formulario>
<INPUT type = "text name = "nombre> <P>
<INPUT type = "checkbox name = "mayorDeEdad checked> Mayor de Edad <P>
<INPUt type = "button name = "botn value = "Pulsar onClick = "ventana ()>
</FORM>
</CENTER>
</BODY>
</HTML>

También podría gustarte