Slide 1

Download Report

Transcript Slide 1 

JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
Í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
7. Funciones y
eventos
8. Objetos
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
JavaScript es un lenguaje de
programación creado por Netscape que se
integra dentro de HTML y nos permitirá
crear páginas interactivas.
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
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.
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
JAVA es un lenguaje independiente
no necesita HTML para funcionar. El
código no se interpreta en el navegador
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
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.
eventos
8. Objetos
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
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.
índice
1. Inserción en HTML
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
En una misma página podemos insertar
distintos trozos de código JavaScript,
cada uno de ellos encerrado entre las
directivas:
<SCRIPT languaje=“JavaScript”>
5. Operadores
6. Estructuras
de control
Y
7. Funciones y
</SCRIPT>
eventos
8. Objetos
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
1. Inserción en HTML
<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>
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
1. Inserción en 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”);
eventos
8. Objetos
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
1. Inserción en HTML
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
7. Funciones y
eventos
8. Objetos
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
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
7. Funciones y
eventos
8. Objetos
índice
TEMA 2.
JavaScript
Hojas de Estilo
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
1. Inserción en HTML. Archivo Externo
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
“+Anio);
Resultado
eventos
8. Objetos
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
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*/
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
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.
índice
Ejemplo
TEMA 2.
JavaScript
Hojas de Estilo
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
<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
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
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.
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
Variables
ResultadoSuma, Resultadosuma y
resultadosuma son tres variables
distintas.
En los navegadores antiguos era
necesario declara las variables antes de
usarla. En los actuales no.
5. Operadores
6. Estructuras
de control
Para declarar una variable basta con
poner “var” y seguidamente su nombre:
7. Funciones y
eventos
8. Objetos
var nombre1;
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
Constantes
En JavaScripts las constantes se tratan
como una variable a la que no se le cambia
nunca el valor.
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
índice
JavaScript
Tipos de Variables
Existen distintos tipos de variables:
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
•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=“\n\tEjemplo de \ncadena”;
alert (cadena1);
</script>
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
Tipos de Variables
•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;
eventos
8. Objetos
índice
JavaScript
Tipos de Variables
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
•Undefined: son aquellas que han sido
declaradas pero no tienen ningún valor
asignado:
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
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
7. Funciones y
eventos
8. Objetos
índice
JavaScript
Operadores Aritméticos
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
Son aquellos que se encargan de realizar
los operaciones básicas como suma,
resta, multiplicación, división, módulo,
incremento, decremento,…
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
índice
Operadores Aritméticos
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
Ejemplo:
var v1, v2;
var suma, division, modulo;
v1=2;
v2=11;
suma=v1+v2;
division=v2/v1;
modulo=???
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
document.write("suma: "+suma+"<br>");
document.write("division: "+division+"\n");
document.write("modulo: "+modulo+"\n");
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
Operadores Aritméticos
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
índice
Operadores Lógicos
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
Son los que operan con datos booleanos y
son los siguientes.
&&
“y lógico”
||
“o lógico”
!
“negación”
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
Operadores Lógicos
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
eventos
8. Objetos
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
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
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
Operadores de comparación
Ejemplos: Indica el valor de result en cada caso:
<script>
var var1,var2,result;
var1=5;
var2=10;
result=(5==var1);
result=(5!=var1);
5. Operadores
result=(var2==var1);
6. Estructuras
de control
result=(var1>var2);
7. Funciones y
eventos
8. Objetos
result=(var1<=var2);
</script>
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
Operadores de comparación
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);
6. Estructuras
de control
result=(var1<var2&&var3>=var1);
7. Funciones y
</script>
eventos
8. Objetos
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
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>");
7. Funciones y
eventos
8. Objetos
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
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=
índice
JavaScript
Operadores bit a bit
Solución:
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
var result;
result=3&5;
document.write("resultado de 3&5:
"+result+"<br>");
5. Operadores
result=3|5;
6. Estructuras
de control
document.write("resultado de 3|5: "+result);
7. Funciones y
eventos
8. Objetos
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
Operadores de asignación
Ya hemos visto la más sencilla de ellas
que es la siguiente:
v1=v2;
Existen otras como:
v1+=v2;
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
v1-=v2;
Ejercicio: comprueba qué efecto tienen
estas dos operaciones sobre v1.
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
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:
5. Operadores
var result,fecha;
fecha=new Date();
result=fecha instanceof Date;
document.write("resultado de 'instanceof': "+result);
6. Estructuras
de control
new – crea una instancia de un objeto, por ejemplo:
4. Tipos de
datos
7. Funciones y
eventos
8. Objetos
fecha =new Date();
índice
JavaScript
Operadores especiales
typeof – indica el tipo de dato que contiene una
variable. La sintaxis es la siguiente:
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
typeof variable;
Ejercicio:
Genera un código cuyo resultado sea el siguiente:
Tipo de 'fecha': XXXXXX
Tipo de 'v1': XXXXXX
Tipo de 'v2': XXXXXX
Tipo de 'v3': XXXXXX
Donde fecha, v1, v2 y v3 son variables y tienen los
siguientes valores:
fecha=new Date();
v1=1;
v2="10/08/79";
Nota: XXXXXX es el tipo de variable de cada una de ellas
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
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
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
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;
}
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
Instrucción if - else
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.
índice
JavaScript
Instrucción if - else
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
Ejemplo: crear una página cuyo fondo sea
de color “#ff0000” (rojo) y que contenga
una imagen. Cada vez que pulsemos la
imagen el color de fondo cambiará de
manera que si estaba de color “#ff0000”
pasará a color “#008000” (verde) y
viceversa.
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
Instrucción if - else
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>
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
Instrucción if - else
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.
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
Instrucción if - else
Solución:
<script>
var nombre,apellido;
nombre=prompt("Escribe tu nombre");
apellido=prompt("Escribe tu primer apellido");
6. Estructuras
de control
if(nombre=="alberto" && apellido=="ruiz")
{
alert("puedes pasar");
}
else
{
alert("no puedes pasar");
}
7. Funciones y
</script>
5. Operadores
eventos
8. Objetos
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
Instrucción if - else
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");
}
}
índice
JavaScript
Instrucción if - else
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
Ejercicio: modificar el código anterior de manera
que haga lo mismo, pero utilizando solo una
estructura if
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
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;
}
eventos
8. Objetos
índice
Instrucción for
JavaScript
1. Introducción
2. Un primer
ejemplo
Ejemplo:
3. Variables y
constantes
var cont;
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
for(cont=1;cont<11;cont++)
{
document.write(cont+"<br>");
}
¿Qué hace este código?
7. Funciones y
eventos
8. Objetos
índice
Instrucción for
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
Ejercicio:
Modificar el código anterior para que escriba los
números impares que hay entre el 1 y el 20
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
índice
Instrucción for
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
Ejercicio:
Crear un código que pida un número al usuario y
repita una frase tantas veces como indique ese
número
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
índice
Instrucción for
JavaScript
1. Introducción
Solución:
2. Un primer
ejemplo
var cont,n;
3. Variables y
constantes
n=prompt("escribe un número","");
document.write("Voy a escribir hola "+n+"
veces<br>");
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
for(cont=0;cont<n;cont++)
{
document.write(cont+" hola<br>");
}
7. Funciones y
eventos
8. Objetos
índice
Instrucción for
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
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.
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
Instrucción for
Solución:
var cont,n;
document.write("<u><b>Mayor o menor<br></u></b>");
for(cont=1;cont<4;cont++)
{
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>");
}
}
}
índice
Instrucción for
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
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.
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
Instrucción for
Solución:
var cont,n,p;
n=Math.ceil(Math.random()*10);
for(cont=0;cont<5;cont++)
{
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>");
}
}
}
índice
alert("El número correcto era: "+n);
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
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;
}
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
índice
Instrucción while
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
Ejemplo:
var i=0;
while(i<11)
{
alert(“Valor de i: “+i+”<br>”);
i++;
}
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
Instrucción while
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++;
}
eventos
8. Objetos
índice
Instrucción while
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
Ejercicio:
Solicitar una clave y comprobar si es correcta. Si no
lo es, debe seguir pidiéndola hasta que sea correcta.
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
índice
Instrucción while
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
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
7. Funciones y
eventos
8. Objetos
índice
Instrucción while
JavaScript
Solución:
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
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",""));
n2=parseInt(prompt("Nota2",""));
n3=parseInt(prompt("Nota3",""));
media=(n1+n2+n3)/3;
document.write("<tr><td>"+nombre+"</td><td>"+medi
a+"</td></tr>");
}
document.write("<table>");
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
Instrucción do while
Esta instrucción no existía en versiones antiguas de
JavaScript, por lo que puede que no funcione en
navegadores 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);
eventos
8. Objetos
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
Instrucción do while
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
8. Objetos
índice
JavaScript
Funciones
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
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.
6. Estructuras
de control
7. Funciones y
7.
eventos
8. Objetos
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
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
7. Funciones y
7.
eventos
8. Objetos
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
Partes de una función
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();
7. Funciones y
7.
eventos
8. Objetos
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
7.
eventos
8. Objetos
Partes de una función
Ejemplo:
<head>
<script>
function saludo()
{
document.write(“HOLA”);
}
</script>
</head>
<body>
<script>
saludo();
</script>
</body>
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
7.
eventos
8. Objetos
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);
índice
</script>
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
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;
5. Operadores
6. Estructuras
de control
7. Funciones y
7.
eventos
8. Objetos
n=Mitad(10);
Después de ejecutar la instrucción el valor de n
es 5.
índice
JavaScript
Eventos
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
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.
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
7.
eventos
8. Objetos
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
Eventos
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.
5. Operadores
6. Estructuras
de control
7. Funciones y
7.
eventos
8. Objetos
índice
Eventos
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
Ejemplo:
<script>
function saludo()
{
alert("Hola");
}
</script>
<img src=boton.jpg onmouseover=saludo() >
6. Estructuras
de control
7. Funciones y
7.
eventos
8. Objetos
índice
JavaScript
Eventos
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
Ejercicio:
Buscar listado de eventos
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
7.
eventos
8. Objetos
índice
Objetos
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
Un objeto es algo que tiene unas
características y un comportamiento
particular.
Es
un
conjunto
de
propiedades y funciones (llamadas
métodos).
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
Objetos
8.
índice
Objetos
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
Objetos
8.8.Objetos
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.
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
Objetos
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.
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
índice
JavaScript
Objetos
La estructura es la siguiente:
1. Introducción
self
2. Un primer
ejemplo
document
3. Variables y
constantes
navigator
window
4. Tipos de
datos
Screen
5. Operadores
Forms
6. Estructuras
de control
History
7. Funciones y
eventos
8. Objetos
Objeto
document
Location
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
Objetos
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.
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
índice
Objetos
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
Ahora veremos algunos ejemplos de
propiedades y métodos de los objetos más
utilizados
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
Objetos
8.8.Objetos
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
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.
5. Operadores
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.
6. Estructuras
de control
Cuestión: ¿Funciona en todos los navegadores?
7. Funciones y
eventos
8. Objetos
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
Objeto window
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,
menubar=no,status=yes,width=200,height=200,resiza
ble=yes);
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
Objeto window
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)
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
Objeto window
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
7. Funciones y
eventos
8. Objetos
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
<script>
var edad=prompt("Indica tu edad");
while(!confirm("Tu edad es: "+edad))
{
edad=prompt("Indica tu edad");
}
if(edad < 18)
{
alert("Eres menor de edad, aún no puedes
desayunar en el Hollywood");
}
else
{
alert("Eres mayor de edad, ya puedes desayunar
con los profes");
}
setTimeout("cerrar()",5000);
document.write("Esta página se autodestruirá en 5
segundos (solo si tienes explorer)");
function cerrar()
{
window.close();
}
</script>
<br><a href="javascript:window.print()">Imprimir esta
página</a>
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
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
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
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
7. Funciones y
eventos
8. Objetos
índice
Objeto navigator
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
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.
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
índice
JavaScript
Objeto location
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
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.
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
Objeto location
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')
índice
Objeto location
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
Ejercicio:
Crear una página que contenga un botón. Utilizando el
método replace haz que al pulsar en el botón debe saltar a la
página de Google.
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
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
7. Funciones y
eventos
8. Objetos
índice
Objeto history
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
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.
7. Funciones y
eventos
8. Objetos
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
DOM
Los navegadores web transforman automáticamente
todas las páginas web en una estructura más eficiente de
manipular.
Esta estructura se denomina DOM y tiene forma de
árbol.
Cada elemento del árbol se llama nodo.
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
índice
Ejemplo:
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Página sencilla</title>
</head>
<body>
<p>Esta página es <strong>muy
sencilla</strong></p>
</body>
</html>
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
La raíz del árbol de nodos de cualquier página
XHTML siempre es la misma: un nodo de tipo
especial denominado "Documento".
Del nodo raíz solamente pueden derivar los
nodos HEAD y BODY.
La transformación de las etiquetas XHTML
habituales genera dos nodos: el primero es el
nodo de tipo "Elemento" (correspondiente a la
propia etiqueta XHTML) y el segundo es un nodo
de tipo "Texto" que contiene el texto encerrado
por esa etiqueta XHTML.
7. Funciones y
eventos
8. Objetos
índice
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
Una vez construido automáticamente el árbol completo
de nodos DOM, ya es posible utilizar las funciones
DOM para acceder de forma directa a cualquier nodo
del árbol.
getElementsByTagName()
var par=document.getElementsByTagName("p");
getElementsByName()
var parEspecial=document.getElementsByName("especial");
getElementById()
var cabecera = document.getElementById("cabecera");
7. Funciones y
eventos
8. Objetos
índice
JavaScript
Acceso a los atributos desde Javascript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
Una vez que se ha accedido a un nodo, el siguiente paso
natural consiste en acceder y/o modificar sus atributos y
propiedades. Mediante DOM, es posible acceder de
forma sencilla a todos los atributos XHTML y todas las
propiedades CSS de cualquier elemento de la página.
Los atributos HTML de los elementos de la página se
transforman automáticamente en propiedades de los
nodos.
Ejemplo:
var enlace = document.getElementById("enlace");
alert(enlace.href);
eventos
8. Objetos
índice
JavaScript
Acceso a css desde Javascript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
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);
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
índice
JavaScript
Nombre de las propiedades del objeto style
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
8. Objetos
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";
índice
JavaScript
Ejemplo
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
<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.
eventos
8. Objetos
índice
Objeto document
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
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.
7. Funciones y
eventos
Objetos
8.8.Objetos
índice
Objeto document
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
¿Cómo accedemos a los elementos de un formulario a
través del objeto document?
Los elementos de un formulario se encuentran entre las
etiquetas <form> y </form>, por ejemplo:
<form name=Datos>
<input type=text id=nombrePropietario>
<input type=text id=apellidosPropietario>
<input type=button value=copiar>
<input type=text id=nombreInquilino>
<input type=text id=apellidosInquilino>
</form>
7. Funciones y
eventos
Objetos
8.8.Objetos
índice
Objeto document
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
Para utilizar el dato del cuadro de texto
nombrePropietario debemos escribir:
document.getElementById(“nombrePropietario”).value
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
Objetos
8.8.Objetos
índice
Objeto document
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
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
7. Funciones y
eventos
Objetos
8.8.Objetos
índice
Objeto document
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
Ejercicio:
Crea una página que contenga un cuadro de texto y un
botón de manera que al pinchar en el botón se cargue
la página que hayamos indicado en el cuadro de texto
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
Objetos
8.8.Objetos
índice
Objeto document
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
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.
7. Funciones y
eventos
Objetos
8.8.Objetos
índice
Objeto document
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
<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>
7. Funciones y
eventos
Objetos
8.8.Objetos
índice
Otros objetos
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
Otros objetos:
String: sirve para manejar cadenas
Math: para realizar operaciones matemáticas
Date: para manejar fechas
Array: para manejar matrices
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
Objetos
8.8.Objetos
índice
Objeto Math
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
Objetos
8.8.Objetos
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.
índice
Objeto Math
JavaScript
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
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.
6. Estructuras
de control
7. Funciones y
eventos
Objetos
8.8.Objetos
índice
Objeto Math
JavaScript
<script>
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
Objetos
8.8.Objetos
var x=Math.ceil(Math.random()*100);
var a;
do
{
if(a<x)
{
}
else
a=prompt("Adivina un número del 1 al 100");
alert("El número es mayor");
if(a>x)
{
}
else
}while(x!=a);
</script>
alert("El número es menor");
alert("Acertaste!!!");
índice
Objeto Math
JavaScript
<script>
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
7. Funciones y
eventos
Objetos
8.8.Objetos
var x=Math.ceil(Math.random()*100);
var a,min,max;
min=1;max=100;
do
{
a=prompt("Adivina un número del "+min+" al "+max);
if(a<x)
{
alert("El número es mayor");
min=a;
}
else
if(a>x)
{
alert("El número es menor");
max=a;
}
else
alert("Acertaste!!!");
}while(x!=a);
</script>
índice
Objeto String
JavaScript
length: Longitud de la cadena
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
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.
7. Funciones y
eventos
Objetos
8.8.Objetos
índice
Objeto String
JavaScript
Ejemplo:
1. Introducción
2. Un primer
ejemplo
3. Variables y
constantes
4. Tipos de
datos
5. Operadores
6. Estructuras
de control
<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>
7. Funciones y
eventos
Objetos
8.8.Objetos
índice