Java script(diapositivas)

JavaScript

Integrantes
Jonathan Roberto Mejía Corona
Gerardo Gil Villareal
Salvador flores Chávez
Juan Carlos Brígido Albino

Índice
1. Introducción
2. Un primer ejemplo
3. Constantes y variables
4. Tipos de datos
5. Operadores
6. Estructuras de control
7. Funciones y eventos
8. Objetos

1. Introducción

JavaScript es un lenguaje de
programación creado por Netscape que se
integra dentro de HTML y nos permitirá
crear páginas interactivas.

JavaScript ≠ JAVA

JavaScript es un lenguaje que
funciona como extensión HTML y que es
interpretado por el navegador, es
independiente del servidor donde está
alojado.

JAVA es un lenguaje independiente
no necesita HTML para funcionar. El
código no se interpreta en el navegador

Al ser (JavaScript) interpretado
en el navegador, una vez cargado el
código se puede ejecutar cuantas veces
sea necesario sin acceder al servidor.

Por ejemplo, podemos crear una
función que compruebe un campo fecha
de un formulario. Si el usuario introduce
una fecha incorrecta, saldrá un mensaje
de error sin tener que cargar una nueva
página.

Como ocurre con CSS la
interpretación que cada navegador hace
de un código puede ser muy particular.

Iexplorer soporta una especie de
JavaScript llamado jscript, que es muy
similar a JavaScript, pero no es
compatible 100%. Por este motivo
debemos comprobar el código que
realicemos en distintos navegadores,
sobre todo en este último, al ser el más
extendido.

1. Inserción en HTML

En una misma página podemos
insertar distintos trozos de código
JavaScript, cada uno de ellos encerrado
entre las directivas:

<SCRIPT languaje=“JavaScript”>

Y

</SCRIPT>

<HTML>
<HEAD>
código HTML de cabecera
<SCRIPT>
código JavaScript
</SCRIPT>
<BODY>
código HTML
<SCRIPT>
código JavaScript
</SCRIPT>
código HTML
<SCRIPT>
código JavaScript
</SCRIPT>
código HTML

El atributo “languaje” de la etiqueta
SCRIPT indica el lenguaje que vamos a
utilizar, que por defecto es JavaScript,
por lo que podemos omitirlo.

Ejercicio: Lo siguiente es código
JavaScript. Insértalo en una página
HTML de manera correcta y observa el
resultado:

alert(“Esto es una nota informativa”);

Nota importante: JavaScript es un
lenguaje sensible a las mayúsculas (Case
Sensitive) por lo que los siguientes
nombres de variables son diferentes:

Resultado
RESULTADO
resultado

1. Inserción en HTML. Archivo Externo

Al igual que CSS podemos crear un
fichero externo que contenga código
JavaScript.

Su extensión será .js

Para llamarlo utilizaremos el atributo src
de la etiqueta SCRIPT

TEMA 2. Hojas de Estilo

Ejercicio: dado el código JavaScript
ejecutarlo mediante una llamada a un
fichero externo:

Var hoy=new Date();
Dia=hoy.getDate();
Mes=hoy.getMonth()+1;
Anio=hoy.getYear();
alert(“Hoy es “+Dia+” del “+Mes+” de
Resultado
“+Anio);

Comentarios

Se pueden introducir de dos formas
distintas:

// Comentarios en una sola línea

/* En varias líneas: todo lo que
escribamos entre estos dos símbolos no
será tenido en cuenta por el navegador*/

Llaves

Podemos encerrar cualquier trozo de
código entre llaves. Más adelante
veremos que el código de una función va
encerrado entre llaves {}
Punto y coma ;
El símbolo ; se utiliza para separar
sentencias. Pondremos uno al finalizar
cada línea de instrucción. Si la
instrucción es larga y ocupa más de una
línea, no pondremos uno en cada línea,
sino de la misma forma, al finalizar la
instrucción.

2. Un primer
ejemplo
<html><body><script language="JavaScript">
imagen1=new Image
imagen1.src="imagenes/dedo.jpg"
imagen2=new Image
imagen2.src="imagenes/dedo1.jpg"
var i=1;
function cambio_icono() {
if (i == 1)
{
document.images['icono'].src=imagen2.src;
i=2;
}
else
{
document.images['icono'].src=imagen1.src;
i=1;
}
}
</script><div align="center"><img src="imagenes/dedo.jpg" name="icono"
onMouseover="cambio_icono()" onMouseOut="cambio_icono()">
</div></body></html>
Resultado

3. Variables y
constantes

Variables
Son elementos que se utilizan en todos los
lenguajes y sirven para almacenar datos
temporalmente.
A la hora de asignar un nombre a una variable
tenemos que tener en cuenta lo siguiente:
• Primer carácter: letra ó _
• Resto caracteres: letras, números ó _ sin
espacios intermedios
• No utilizar palabras reservadas
• Diferencia entre mayúsculas y minúsculas.
Conviene seguir una norma.

ResultadoSuma, Resultadosuma y
resultadosuma son tres variables distintas.

En los navegadores antiguos era necesario
declara las variables antes de usarla. En los
actuales no.

Para declarar una variable basta con poner
“var” y seguidamente su nombre:

var nombre1;

Constantes

En JavaScripts las constantes se tratan
como una variable a la que no se le
cambia nunca el valor.

4. Tipos de
datos
Tipos de Variables
Existen distintos tipos de variables:

•De cadena: son aquellas que contienen una
cadena de texto. Se definen mediante
comillas simples o dobles. Existen una serie
de caracteres especiales que podemos usar
en ellas: n, t, , ”, ’
Ejemplo:
<script>
var cadena1=“ntEjemplo de ncadena”;
alert (cadena1);
</script>

•Numérica: son aquellas que conienen
números.

Ejemplos:
var numero=100;
var numero=-100;

•Booleanas: son aquellas que solo tienen
dos valores posibles, verdadero o falso
(true / false).
var abierta=true;

•Undefined: son aquellas que han sido
declaradas pero no tienen ningún valor
asignado:

5. Operadores

En JavaScript los operadores se dividen
en varios grupos:

•Aritméticos
• Lógicos
• De Comparación
• Condicionales
• Bit a Bit
• De asignación
• Especiales

Operadores Aritméticos

Son aquellos que se encargan de realizar
los operaciones básicas como suma,
resta, multiplicación, división, módulo,
incremento, decremento,…

Ejemplo:
var v1, v2;
var suma, division, modulo;

v1=2;
v2=11;

suma=v1+v2;
division=v2/v1;
modulo=???

document.write("suma: "+suma+"<br>");
document.write("division: "+division+"n");
document.write("modulo: "+modulo+"n");

Incremento y decremento son
operadores que suman o restan una
unidad a una variable.

La sintáxis es la siguiente:
variable++;
Ejercicio: crea el siguiente código:
• Declara una variable cualquiera
• Asígnale un valor cualquiera
• Muestra su valor en la página
• Increméntalo con este operador
• Muestra de nuevo su valor

Operadores Lógicos

Son los que operan con datos booleanos y
son los siguientes.

&& “y lógico”

|| “o lógico”

! “negación”

Ejercicio: Tabla de verdad de && . Rellena los
siguientes valores:
true && true =
true && false =
false && true =
false && false =
true || true =
true || false =
false || true =
false || false =
!false =
!true =
Crea 10 variables, una para cada operación y asigna
cada operación a su variable. Muestra el resultado
mediante alert

Operadores de comparación
Sirven para comparar valores y siempre
devuelven “true”o “false”.
Son los siguientes:
Igualdad (a==b): Devuelve “true” si los a y b son
iguales
No igualdad (a!=b): Devuelve “true” si a y b son
distintos
Mayor que (a>b): Devuelve “true” si a es mayor
que b
Menor que (a<b): Devuelve “true” si a es menor
que b
Mayor o igual que (a>=b): Devuelve “true” si a es
mayor o igual que b
Menor o igual que (a<=b): Devuelve “true” si a es
menor o igual que b

Ejemplos: Indica el valor de result en cada caso:

<script>
var var1,var2,result;
var1=5;
var2=10;

result=(5==var1);

result=(5!=var1);

result=(var2==var1);

result=(var1>var2);

result=(var1<=var2);

</script>

Ejemplos: Indica el valor de result en cada caso:

<script>
var var1,var2,result;

var1=5;
var2=10;
var3=5;
var4=8;

result=(5==var1&&var2==var4);

result=(5==var1||var2==var4);

result=(var1<var2&&var3>=var1);

</script>

Operadores condicionales
Es una forma de expresar una instrucción
condicional:

(condicion)?instruccion1:instruccion2;

Ejemplo:

var i,texto;

i=prompt(“Escribe una calificación");

(i<5)?texto=“superado":texto=“no superado”;

document.write(“El examen está: "+texto+"<br>");

Operadores bit a bit

Son los que operan con los datos a nivel
de bit. Algunos de estos operadores son:

& operación AND
| operación OR
~ operación NOT

Calcular el resultado de las siguientes
operaciones utilizando estos operadores:

3&5=
3|5=

Solución:

var result;

result=3&5;

document.write("resultado de 3&5:
"+result+"<br>");

result=3|5;

document.write("resultado de 3|5: "+result);

Operadores de asignación

Ya hemos visto la más sencilla de ellas que es
la siguiente:

v1=v2;

Existen otras como:

v1+=v2;

v1-=v2;

Ejercicio: comprueba qué efecto tienen
estas dos operaciones sobre v1.

Operadores especiales
Existen otros operadores que no están incluidos en
ninguno de los grupos anteriores. Algunos de ellos
son:

instanceof – indica si un objeto es de un tipo
determinado, por ejemplo:

var result,fecha;
fecha=new Date();
result=fecha instanceof Date;
document.write("resultado de 'instanceof': "+result);

new – crea una instancia de un objeto, por ejemplo:

fecha =new Date();

6. Estructuras
de control

Nos van a servir para tomar decisiones
según ciertas condiciones y para ejecutar
un mismo código repetidas veces variando
algún dato.
En JavaScript disponemos de las siguientes
instrucciones de control:

if => instrucción condicional
for
while => instrucciones de repetición
do while
switch => instrucción de selección múltiple

Instrucción if - else

Se utiliza para ejecutar un conjunto de
instrucciones si se cumple una condición y
otro conjunto de instrucciones diferente si
no se cumple.
La sintaxis es la siguiente:

if(condicion)
{ instrucciones A;
}
else
{ instrucciones B;
}

El bloque else no es obligatorio, en ese caso
la instrucción quedaría de la siguiente
forma:
if(condicion)
{ instrucciones;
}

La condición es una operación que devuelve
un resultado booleano, true o false, para
ello utilizaremos los operadores lógicos, los
de comparación e incluso operadores
especiales como instanceof.

Solución:

<html><head>
<script>
function cambiafondo()
{
if(document.bgColor=="#ff0000")
{ document.bgColor="#008000";
}
else
{ document.bgColor="#ff0000";
}
}
</script>
</head>
<body>
<img src="boton.JPG" onclick="cambiafondo()">
</body></html>

Ejercicio:

Escribe un código que solicite que escribas tu
nombre con el comando prompt. A continuación
solicita que escribas tu primer apellido con otro
prompt, almacenándolo en variables distintas.
Si tu nombre es Alberto Ruíz, aparecerá un
mensaje indicando que tienes permiso para entrar
en la página. De lo contrario, aparecerá un
mensaje indicando que no puedes entrar.

Solución:

<script>

var nombre,apellido;

nombre=prompt("Escribe tu nombre");
apellido=prompt("Escribe tu primer apellido");

if(nombre=="alberto" && apellido=="ruiz")
{ alert("puedes pasar");
}
else
{ alert("no puedes pasar");
}

</script>

Las instrucciones que introducimos dentro del bloque de
instrucciones también pueden ser instrucciones de control,
incluida la instrucción if (if anidados). Ejemplo:

var nombre;
nombre=prompt("Escribe tu nombre","");
if(nombre=="Pepe")
{ alert("Bienvenido/a "+nombre+". Puedes pasar");
}
else
{ if(nombre=="Francisca")
{ alert("Bienvenido/a "+nombre+". Puedes
pasar");
}
else
{ alert("Lo siento. No puede pasar");
}
}

Ejercicio: modificar el código anterior de manera
que haga lo mismo, pero utilizando solo una
estructura if

Instrucción for

Nos va a servir para ejecutar un mismo código un
número determinado de veces. Para ello hay que
establecer tres parámetros:
• Valor inicial del contador
• Condición, que hará que el bucle pueda llegar en
algún momento a su fin
• Incremento del contador

La sintaxis de esta instrucción es la siguiente:

For(valor incial; condicion; incremento)
{ instrucciones;
}

Ejemplo:

var cont;

for(cont=1;cont<11;cont++)
{ document.write(cont+"<br>");
}

¿Qué hace este código?

Ejercicio:

Modificar el código anterior para que escriba los
números impares que hay entre el 1 y el 20

Ejercicio:

Crear un código que pida un número al usuario y
repita una frase tantas veces como indique ese
número

Solución:

var cont,n;

n=prompt("escribe un número","");
document.write("Voy a escribir hola "+n+"
veces<br>");

for(cont=0;cont<n;cont++)
{ document.write(cont+" hola<br>");
}

Ejercicio:

Crear un código que pida tres veces un número al
usuario y escriba si cada uno de esos números es
mayor, menor o igual a 10.

Solución:
var cont,n;
document.write("<u><b>Mayor o menor<br></u></b>");
{ n=prompt("Escribe un número: ","");
if(n > 10)
{ document.write("El numero es mayor que
10"+"<br>");
}
else
{ if(n == 10)
{ document.write("El número es
10"+"<br>");
}
else
{ document.write("El número es menor que
10"+"<br>");
}
}
}

Ejercicio:

Con la siguiente instrucción se almacena en n un
número del 1 al 10:
n=Math.ceil(Math.random()*10);
Utilizad esta instrucción para crear un juego en el
que el usuario tiene que adivinar el número
indicado. Máximo se permiten 5 intentos.

Solución:
var cont,n,p;
n=Math.ceil(Math.random()*10);
{ p=prompt("Introduce un número: ","");
if(p == n)
{ alert("enhorabuena!!! Has acertado!!!");
cont=5;
}
else
{ if(n > p)
{document.write("El número es mayor que
"+p+"<br>");
}
else
{ document.write("El número es menor que
"+p+"<br>");
}
}
}
alert("El número correcto era: "+n);

Instrucción while

Sirve para ejecutar un conjunto de instrucciones
mientras se cumpla una condición dada.

La sintaxis es la siguiente:

while(condicion)
{ instrucciones;
}

Ejemplo:

var i=0;
while(i<11)
{ alert(“Valor de i: “+i+”<br>”);
i++;
}

Importante:
Hay que prestar mucha atención a la condición, ya
que si se cumple indefinidamente el bucle nunca
finaliza y la ejecución quedará bloqueada.

Ejemplo: en el código anterior, si por error
olvidamos incrementar la variable, siempre se
cumplirá la condición:
var i=0;
while(i<11)
{ alert(“Valor de i: “+i+”<br>”);
i++;
}

Ejercicio:
Solicitar una clave y comprobar si es correcta. Si no
lo es, debe seguir pidiéndola hasta que sea correcta.

Ejercicio:
1.- Crear un programa que solicita un nombre de un
alumno y tres notas diferentes. Debe calcular la nota
media e imprimirla junto con el nombre en forma de
tabla:
nombre NotaMedia

2.- Modificar el código anterior de manera que
solicite el número de alumnos al principio y repita el
código para cada uno de los alumnos creando una
tabla con todos ellos

Solución:

var i,nombre,n1,n2,n3,media;
n1=0;
n=prompt("Introduce el número de alumnos","");
document.write("<table
border=2><tr><td>Nombre</td><td>Media</td></tr>");
for(i=1;i<=n;i++)
{ nombre=prompt("Nombre: ","");
n1=parseInt(prompt("Nota1",""));
media=(n1+n2+n3)/3;

document.write("<tr><td>"+nombre+"</td><td>"+media+"</td
></tr>");
}

document.write("<table>");

Esta instrucción no existía en versiones antiguas de
JavaScript, por lo que puede que no funcione en
navegdores antiguos.

Es muy similar al bucle while, la única diferencia es
que antes de evaluar por primera vez la condición
ejecuta el bloque de código, por lo que siempre se
ejecuta al menos una vez.

Sintaxis:
do
{ instrucciones;
}while(condición);

Código con while:
var i=0;
while(i<0)
{ alert(“Mensaje”);
}

Código con do while:
var i=0;
do
{ alert(“Mensaje”);
}while(i<0);

7. Funciones y
eventos

Una función es un conjunto de instrucciones que
ejecutan una tarea concreta.

Debemos diferenciar entre definición de la
función y llamada a la función. La definición es
la descripción de la función en sí y que será
ejecutado cuando sea llamada.

Partes de una función

Una definición de función consta de las
siguientes partes:
• Palabra clave function
• Nombre de la función. Las reglas para crear
este nombre son las mismas que para crear
nombres de variables
• Argumentos. Son los valores que pasamos a
una función cuando la llamamos y que pueden
ser utilizados en su código. Los argumentos se
separan entre sí por comas y se encierran entre
llaves. La lista de argumentos puede ser vacía.
• Instrucciones. Van encerradas entre llaves

Sintáxis:
function nombre_funcion(argumentos)
{ instrucciones;
}

La definición de las funciones se suele situar en
la cabecera del documento.

La función no se ejecuta hasta que es llamada
por su nombre de la siguiente forma:

nombre_funcion();

Ejemplo:
<head>
<script>
function saludo()
{ document.write(“HOLA”);
}
</script>
</head>
<body>
<script>
saludo();
</script>
</body>

Argumentos

Los argumentos son los valores que se pasan en
la llamada y se podrán utilizar en las
instrucciones de la función.
Ejemplo:
<head>
<script>
function saludo(nombre)
{ document.write(“HOLA ”+nombre);
}
</script>
</head>
<body>
<script>
n=prompt(“Nombre”,””);
saludo(n);
</script>

Valor de una función

Las funciones también pueden devolver valores.
Esto se hace con la instrucción return de la
siguiente forma:

function Mitad(valor)
{ return valor/2;
}

La llamada a esta función sería por ejemplo;

n=Mitad(10);

Después de ejecutar la instrucción el valor de n
es 5.

Eventos

Los eventos son sucesos que ocurren cuando el
usuario realiza una acción, como por ejemplo
pulsar un botón o pasar sobre una imagen.

Los eventos se están asociados a elementos
HTML, no a elementos JavaScript.
Para asociar el evento a un conjunto de
instrucciones, creamos una función y la
llamamos cuando se produzca el evento
utilizando los atributos de evento de las etiquetas
HTML.

Eventos

Ejemplo:

<script>
function saludo()
{ alert("Hola");
}
</script>

<img src=boton.jpg onmouseover=saludo() >

8. Objetos

Un objeto es algo que tiene unas
características y un comportamiento
particular. Es un conjunto de
propiedades y funciones (llamadas
métodos).

Ejemplo:
Una persona tiene unas características
o propiedades : pelo corto, altura, color
de pelo, peso,...
Además de propiedades una persona
también tiene un comportamiento,
ejecuta ciertas acciones: comer,
dormir,...
El conjunto de propiedades y
acciones/funciones definen un objeto.

En JavaScript existen una serie de objetos
predefinidos, con sus propiedades y
funciones (métodos), algunas de las cuales
ya hemos utilizado.

Uno de los objetos más importantes es el
objeto Window, que contiene a su vez otros
objetos, estructurados en forma de árbol.

La estructura es la siguiente:

self
self

document
document Objeto
Objeto
document
document
navigator
navigator
window
window
Screen
Screen

Forms
Forms

History
History

Location
Location

Para hacer uso de las propiedades y métodos de un objeto
debemos poner el nombre del objeto seguido de un punto y
la propiedad o el método a continuación, por ejemplo:

window.status=“mensaje”;

Los métodos son funciones que podemos ejecutar y las
propiedades son simplemente variables que podemos
asignar o leer.

Ahora veremos algunos ejemplos de
propiedades y métodos de los objetos más
utilizados

Objeto window

La propiedad status del objeto window indica el
mensaje que aparece en la barra de estado.

Ejercicio:
Crea una página que contenga un hipervínculo.

Al pasar por encima aparece la dirección de destino
en la barra de estado.

Añade el código JavaScript necesario para que al
pasar por encima aparezca el mensaje “Estás sobre el
enlace” en la barra de estado.

Cuestión: ¿Funciona en todos los navegadores?

El método open abre una ventana nueva con las
propiedades que le indiquemos.
La sintaxis es:
ventana=open(“URL”,”nombre”,”opciones”)

donde opciones será una lista separada por comas de
las siguientes propiedades:
toolbar location
directories
status menubar scrollbars
resizable width height

Ejemplo:

ventana=open(“URL”,”nombre”,”toolbar=no,menuba
r=no,status=yes,width=200,height=200,resizable=yes
);

Ejercicio:
Crea una página que contenga un botón que
al pulsarlo (evento onclick) abra una página
en las que no aparezca ninguna barra salvo
la de estado y no se pueda redimensionar y
además ponga un mensaje en la barra de
estado.(prueba en distintos navegadores)

Otros métodos del objeto window son:

alert
prompt
confirm
close
Print
setInterval
setTimeout

Ejercicio: utilizando la ayuda de Internet
pon un ejemplo con cada uno de ellos

Ejercicio: crea una página con un botón
y que al pulsarlo la ventana tome el
tamaño 600x400 píxeles y se coloque en
la posición 100,100. de la pantalla

Objeto navigator

El objeto navigator permite obtener datos del
navegador que estamos utilizando.

Por ejemplo, la propiedad appName facilita el
nombre del navegador utilizado, y la propiedad
languaje el lenguaje del mismo:

alert("Navegador: "+navigator.appName);
alert(“Idioma : "+navigator.language);

Estas propiedades son solo de lectura

Podemos utilizar estas propiedades para hacer
uso de la versión de Javascript que más se ajuste
el navegador del cliente. Aunque debemos tener
en cuenta que no son datos muy fiables.

Ejercicio:

Instala el componente “User Agent Switcher” de
Firefox y averigua para qué sirve.

Objeto location

Este objeto contiene información sobre la página
que se está visitando en ese momento. Algunas
de las propiedades de este objeto solo tienen
validez si la página está alojada en un servidor,
no si está almacenada localmente.

Algunas de sus propiedades son:
href → dirección completa
protocol → protocolo utilizado (http, ftp,…)
host → nombre del servidor y puerto utilizados
hostname → solo nombre del servidor
Estas dos últimas no sirven para archivos
locales
search → almacena los argumentos de llamada a la
página, lo que acompaña a ‘?’ (cuando existe) en la barra de
direcciones

Algunos de sus métodos son:
reload() → recarga la página
replace(url) → carga la página que se indique entre los
paréntesis. Para ello hay que indicar la dirección completa,
incluyendo el protocolo, por ejemplo:
location.replace('file:///D:/ejemplos/status.html')

Objeto history

Contiene información sobre las páginas ya visitadas.

La propiedad length indica el número de páginas visitadas
desde esa ventana.

Los métodos de los que disponemos son los siguientes:

back() → carga la página anterior

forward() → carga la página siguiente

go(n) → salta a la página indicada por n, ejemplos:
go(-1) → salta a la página anterior
go(1) → salta a la página siguiente
go(-2) → retrocede dos páginas

Objeto history

Ejercicio:

crea una página con cuatro botones:

Uno para retroceder a la página anterior

Otro para avanzar a la página siguiente

Otro para retroceder dos páginas

Otro para avanzar dos páginas

Indica al cargar la página cuántas páginas se han visitado en
esta ventana.

Acceso a css desde Javascript

El atributo style es un atributo más de los elementos
HTMl, por lo tanto podremos acceder a él de la misma
forma.

Ejemplo:

var imagen = document.getElementById("imagen");
alert(imagen.style.margin);

Nombre de las propiedades del objeto style

La transformación del nombre de las propiedades CSS
compuestas consiste en eliminar todos los
guiones medios (-) y escribir en mayúscula la letra
siguiente a cada guión medio.

Ejemplos:
▪ font-weight se transforma en fontWeight
▪ line-height se transforma en lineHeight
▪ border-top-style se transforma en borderTopStyle
▪ list-style-image se transforma en listStyleImage

Ejemplo:
document.getElementById("enlace").style.textDecoration
="none";

Ejemplo
<a href=http://wwws.google.com id=enlace onmouseover=camba()
onmouseout=camba()>Enlace a google</a>

<script>
function camba()
{
if(document.getElementById("enlace").style.color!="red")
{ document.getElementById("enlace").style.color="red";
document.getElementById("enlace").style.textDecoration="none";
}
else
{ document.getElementById("enlace").style.color="blue";

document.getElementById("enlace").style.textDecoration="underline";
}
}
</script>

Descripción:
Al pasar sobre el enlace cambiará de color y desaparece
el subrayado. Al salir vuelve a su estado anterior. Similar
a la pseudoclase hover.

Objeto document

Hace referencia al contenido del documento HTML. Es
el nodo raíz del DOM.

Algunas de las propiedades son:
bgColor: color de fondo
fgColor: color del texto
vlink: color de los enlaces visitados
alink: color de los enlaces activos

Uno de los métodos más utilizados es write(), que ya
conocemos de sobra para qué sirve.

Para utilizar el dato del cuadro de texto
nombrePropietario debemos escribir:

document.getElementById(“nombrePropietario”).value

Si quisiéramos copiar el dato que el usuario ha escrito
en el cuadroo nombreInquilino tendremos que usar la
siguiente instrucción de asignación:

document.getElementById(“nombreInquilino”).value
=
document.getElementById(“nombrePropietario”).value

Ejercicio: completa el código de la página para que al
pulsar el botón se copien los datos de nombre y
apellidos de propietario a los del inquilino

Ejercicio:

Crea un formulario con dos cuadros de texto. Nombre
y edad.
Al pulsar el botón, se debe comprobar que ninguno de
ellos sea vacío y que además, la edad sea un número
entre 16 y 65. Si ésto se cumple, llamaremos al
método sumbit() del objeto formulario, para que pase a
la siguiente página. De lo contrario aparecerá un solo
“alert” indicándonos que hay algo mal y no saltará a
ninguna página.

<form action=datos.html id=formulario method=get>
nombre:<input type=text id=nombre><br>
edad:<input type=text id=edad><br>
<input type=button onclick=comprueba() value=Aceptar>

<script>
function comprueba()
{ var n=document.getElementById("nombre").value;
var e=document.getElementById("edad").value;
if(n =="" || e=="")
{ alert("Algún campo vacío");
}
else
{ if(e<66 && e>15)
{
document.getElementById("formulario").submit();
}
else
{ alert("Edad incorrecta");
}
}
}
</script>

Otros objetos

Otros objetos:

String: sirve para manejar cadenas
Math: para realizar operaciones matemáticas
Date: para manejar fechas
Array: para manejar matrices

Objeto Math

abs(): Devuelve el valor absoluto de un número. El
valor después de quitarle el signo.

ceil(): Devuelve el entero igual o inmediatamente
siguiente de un número. Por ejemplo, ceil(3) vale 3,
ceil(3.4) es 4.

floor(): Lo contrario de ceil(), pues devuelve un número
igual o inmediatamente inferior.

max()
Retorna el mayor de 2 números.

random(): Devuelve un número aleatorio entre 0 y 1.
Método creado a partir de Javascript 1.1.

Ejercicio:

Crea una página en javascript que genere un número
aleatorio entre 1 y 100, y pida al usuario que lo adivine
(puedes utilizar el método prompt)..

Seguirá preguntando hasta que el número sea
adivinado.

Cada vez que el usuario introduzca un número se debe
indicar si el número secreto es mayor o menor.

Objeto String
length: Longitud de la cadena

split(separador): Sirve para crear un array a partir de una
cadena en el que cada elemento es la parte de la cadena que
está separada por el separador indicado por el parámetro.

substring(inicio,fin): Devuelve el substring que empieza en el
carácter de inicio y termina en el carácter de fin.

ToLowerCase(): Pasa todos los caracteres de una cadena a
minúsculas.

toUpperCase(): Pone todas los caracteres de un string en
mayúsculas.

Ejemplo:

<form action=datos.html id=formulario method=get>
nombre:<input type=text id=nombre name=nombre><br>

<input type=button onclick=may() value=Aceptar>

<script>
function may()
{ var n=document.getElementById("nombre").value;

document.getElementById("nombre").value=n.toUpperCase();

}
</script>

Java script(diapositivas)

Más contenido relacionado

La actualidad más candente (20)

Similar a Java script(diapositivas) (20)

Java script(diapositivas)