Ingeniería Web

javascript
Wagner Enoc Vicente Ramos
 Veremos
• Bloque I: Introducción
• Bloque II: Elementos Básicos
• Bloque III: Estructuras de control
• Bloque IV: Funciones
• Bloque V: Objetos
• Bloque VI: Eventos

Yuri Marquez Solis

 Bloque I: Introducción
 Bloque I: Introducción
 Bloque II: Elementos Básicos
 Bloque III: Estructuras de control
 Bloque IV: Funciones
 Bloque V: Objetos
 Bloque VI: Eventos
 Bloque VII: Ejercicio final

Yuri Marquez Solis

 Bloque I: Introducción
• Bloque I: Introducción
• Introducción a JavaScript
• JavaScript y HTML
• Elementos de un programa JavaScript
• Entrada y salida

Yuri Marquez Solis

 Introducción a JavaScript
 Bloque I: Introducción
◦ Introducción a JavaScript
◦ JavaScript y HTML
◦ Elementos de un programa JavaScript
◦ Entrada y salida

Yuri Marquez Solis

 Introducción a JavaScript
• Lenguaje de programación basado en scripts
• Características:
• Lenguaje de programación interpretado
• Se interpreta en el navegador
• Lenguaje orientado a eventos
• Lenguaje orientado a objetos
• Programa -> cualquier editor de texto o HTML.

Yuri Marquez Solis

 Introducción a JavaScript
 Bloque I: Introducción
◦ Introducción a JavaScript
◦ JavaScript y HTML
◦ Elementos de un programa JavaScript
◦ Entrada y salida

Yuri Marquez Solis

 CURSO DE JAVASCRIPT
¿Para qué nos sirve JavaScript?
• Dotar a las páginas web de “Inteligencia”
• Almacenar y recuperar información del usuario
• Comprobar formularios
• Aumentar interacción del usuario con la WEB
• Captar Eventos del ratón y del teclado
• Realizar Pequeñas animaciones
• Definir reglas de estilo
• Crear sitios WEB donde todas las páginas mantengan una apariencia común

Yuri Marquez Solis

 Introducción
¿Qué es JavaScript?

• No es Java
• Es un lenguaje de programación de Scripts en el ‘Client-Side’
• Otros VBScript

Yuri Marquez Solis

JavaScript y HTML
• Los programas JavaScript se encuentran dentro de las páginas
HTML
• Entre las etiquetas<script> y </script>

Etiqueta de inicio del programa JavaScript

Etiqueta de final del programa JavaScript

Yuri Marquez Solis

 JavaScript
JavaScrit en una página WEB(1)

<TITLE>
Mi primer Script
</TITLE>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

Este página contiene un script vacío

Yuri Marquez Solis

 JavaScript
JavaScrit en una página WEB(2)

<TITLE>
Mi primer Script
</TITLE>
<SCRIPT LANGUAGE="JavaScript" >
alert("¡Hola JavaScript!");
</SCRIPT>

Yuri Marquez Solis

JavaScript y HTML
• Se pueden incluir mediante un programa .js

Vamos a cargar el código JavaScript de un programa

ya creado.

Yuri Marquez Solis

 JavaScript y HTML
• Ejemplo de programa en JavaScript

Yuri Marquez Solis

 Elementos de un programa JavaScript
 Bloque I: Introducción
◦ Introducción a JavaScript
◦ JavaScript y HTML
◦ Elementos de un programa JavaScript
◦ Entrada y salida

Yuri Marquez Solis

Elementos de un programa JavaScript
• Comentarios:

Comentario de una línea Comentario varia líneas

Yuri Marquez Solis

Elementos de un programa JavaScript
• Tipo de instrucciones:
Declaración

Inicialización

Estructuras
de control

Entrada y
salida

Yuri Marquez Solis

 Entrada y salida
 Bloque I: Introducción
◦ Introducción a JavaScript
◦ JavaScript y HTML
◦ Elementos de un programa JavaScript
◦ Entrada y salida

Yuri Marquez Solis

Entrada y salida
• Nos permiten visualizar y recibir información
• Se usan con cadenas de caracteres
• Algunos caracteres importantes son:

Carácter Significado
\n Nueva línea
\t Tabulador
\r Retorno de carro
\b Retroceso de un espacio

Yuri Marquez Solis

Entrada y salida
• Document.write()

Yuri Marquez Solis

Entrada y salida
• Alert()

Yuri Marquez Solis

Entrada y salida
• Prompt()

Yuri Marquez Solis

 Bloque II: Elementos Básicos
 Bloque I: Introducción
 Bloque II: Elementos Básicos
 Bloque III: Estructuras de control
 Bloque IV: Funciones
 Bloque V: Objetos
 Bloque VI: Eventos
 Bloque VII: Ejercicio final

Yuri Marquez Solis

 Bloque II: Elementos Básicos
• Bloque II: Elementos Básicos
• Elementos básicos
• Variables e identificadores
• Tipos de datos
• Operadores y expresiones

Yuri Marquez Solis

 Elementos Básicos
• Bloque II: Elementos Básicos
• Elementos básicos
• Variables e identificadores
• Tipos de datos
• Operadores y expresiones

Yuri Marquez Solis

Elementos Básicos

• Variables:

• Operadores:

• Expresiones:

Yuri Marquez Solis

Elementos Básicos
• Sentencias:

• Funciones:

Yuri Marquez Solis

 Variables e identificadores
• Bloque II: Elementos Básicos
• Elementos básicos
• Variables e identificadores
• Tipos de datos
• Operadores y expresiones

Yuri Marquez Solis

Variables e identificadores

• Creación de la variable:
• Palabra reservada var
• No iniciarse por número
• No coincidir con palabras reservadas

Yuri Marquez Solis

Variables e identificadores
• Almacenamiento información en la variable:
• Se puede almacenar cualquier tipo de información
• Se usa el operador de asignación

◦ Si introducimos información en una variable no inicializada, se

inicializa automáticamente, pero no es una práctica
aconsejada

Yuri Marquez Solis

Variables e identificadores
• Consulta o utilización de un valor
• Se puede hacer referencia al contenido
Incremento de un contador

Concatenación de cadenas

Operación con variables

Yuri Marquez Solis

 Tipos de datos
• Bloque II: Elementos Básicos
• Elementos básicos
• Variables e identificadores
• Tipos de datos
• Operadores y expresiones

Yuri Marquez Solis

Tipos de datos
• Números:
• Cualquier formato de los habituales
Formato decimal

Formato hexadecimal

Formato octal

 Cadenas:
◦ Cadenas de caracteres.

Yuri Marquez Solis

JavaScript – Variables
Declaración e Asignación(1)

<SCRIPT LANGUAGE="JavaScript">
<!-
var v1; // declaración
v1=10; // asignación
alert(v1);
//-->
</SCRIPT>
<NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT >

Yuri Marquez Solis

Tipos de datos
• Booleanos:
• Valores lógicos

 Objetos:
◦ Contienen propiedades y métodos
 Nulo (Null):
◦ Su utilidad es saber si hemos iniciado o no una variable.

Yuri Marquez Solis

 JavaScript – Variables
Tipos de Variables
• Cadenas:
• var producto= “Tetrabrick Leche 1L”;
• Números
• Var precio=1;
• Var precio= 0.65;
• Booleanos
• var enstock=true;
• Nulas
• var producto=null;
• Indefinidas

Yuri Marquez Solis

 JavaScript – Variables –Tipos de Variables Cadenas

• Asignación
• Se guarda entre Comillas simples o dobles
• Operaciones
• Concatenación ‘+’

Yuri Marquez Solis

JavaScript – Variables –Tipos de Variables - Cadenas
Ejemplo

<SCRIPT LANGUAGE="JavaScript">
<!-
var producto, marca, micadena;
producto="Brick Leche 1L"; // asignación
marca='Pascual';
micadena=producto+", "+marca; // concatenación
alert(micadena);
//-->
</SCRIPT>
<NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT>

Yuri Marquez Solis

 JavaScript – Variables –Tipos de Variables - Números Asignación
<SCRIPT LANGUAGE="JavaScript">
<!-
var numero1, numero2, numero3, numero4, numero5;
numero1=10; // entero
numero2=10.0; // real
numero3=1E1; // notación científica
numero4=0xA; // hexadecimal
numero5=012; // octal
alert(numero1+"\n"+numero2+"\n"+numero3+"\n"+numero4+"\n"+numero5);
//-->
</SCRIPT>
<NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT >

Yuri Marquez Solis

 JavaScript – Variables –Tipos de Variables Conversión implicita(1)
<SCRIPT LANGUAGE="JavaScript">
<!-
var mivariable;
mivariable="cadena";
alert("mi variable es de tipo: "+ typeof(mivariable));
mivariable=1234; // conversión implícita
alert("mi variable es de tipo: "+ typeof(mivariable));
//-->
</SCRIPT>
<NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT >

Yuri Marquez Solis

 JavaScript – Variables –Tipos de Variables
Conversión implicita(2)
<SCRIPT LANGUAGE="JavaScript">
<!-
var mivariable;
mivariable="1234";
alert("mi variable es de tipo: "+ typeof(mivariable));
mivariable=mivariable*1; //Conversión Implícita
alert("mi variable es de tipo: "+ typeof(mivariable));
//-->
</SCRIPT>
<NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT >

Yuri Marquez Solis

 JavaScript – Variables –Tipos de Variables
Conversión implicita(3)
<SCRIPT LANGUAGE="JavaScript">
<!-
var mivariable;
mivariable=1234;
alert("mi variable es de tipo: "+ typeof(mivariable));
mivariable=mivariable+"";
alert("mi variable es de tipo: "+ typeof(mivariable));
//-->
</SCRIPT>
<NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT >

Yuri Marquez Solis

 JavaScript – Variables –Tipos de Variables Conversión explícita(3)
<SCRIPT LANGUAGE="JavaScript">
<!-
var mivariable;
mivariable=1234.5;
alert("mi variable es de tipo: "+ typeof(mivariable));
mivariable=mivariable.toString();
alert("mi variable es de tipo: "+ typeof(mivariable));
//-->
</SCRIPT>
<NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT >

Yuri Marquez Solis

 Operadores y expresiones
• Bloque II: Elementos Básicos
• Elementos básicos
• Variables e identificadores
• Tipos de datos
• Operadores y expresiones

Yuri Marquez Solis

Operadores y expresiones
• Binarios:
Operador Descripción
Asigna el valor del operando de la derecha al operando de la izquierda
=
Suma el operando de la derecha al de la izquierda y se lo asigna a la variable de
+= la izquierda
Resta el operando de la derecha al de la izquierda y se lo asigna a la variable de
-= la izquierda

Multiplica el operando de la derecha al de la izquierda y se lo asigna a la

*= variable de la izquierda

Divide el operando de la izquierda entre el de la derecha y se lo asigna a la

/= variable de la izquierda

Divide el operando de la izquierda entre el de la derecha y el valor del resto se

%= lo asigna a la variable de la izquierda
Yuri Marquez Solis
Operadores y expresiones
• Comparación:
Operador Descripción
Devuelve verdadero si los dos operandos son iguales
==
Devuelve verdadero si los dos operandos no son iguales
!=
Devuelve verdadero si el primer operando es mayor que el
> segundo
Devuelve verdadero si el primer operando es menor que el
< segundo
Devuelve verdadero si el primer operando es mayor o igual que
>= el segundo
Devuelve verdadero si el primero operando es menor o igual
<= que el segundo Yuri Marquez Solis
 JavaScript – Variables –Tipos de Variables – Booleanos
Ejemplo Comparaciones
<SCRIPT LANGUAGE="JavaScript">
<!-
var condicion1, condicion2, condicion3;
condicion1= true;
condicion2= (3>5);
condicion3= (3==3);
alert("condicion1 vale: "+condicion1+" \ncondicion2 vale:
"+condicion2+"\ncondicion3 vale: "+condicion3);
//-->
</SCRIPT>
<NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT >

Yuri Marquez Solis

Operadores y expresiones
• Unarios:
Operador Descripción
++x Incrementa x en una unidad y devuelve el valor
x++ Devuelve el valor de x y lo deja incrementado en una unidad
-= Resta el operando de la derecha al de la izquierda y se lo asigna a la variable de la izquierda
-x Devuelve x negado

 Lógicos:
Operador Descripción
&& Y lógico
|| O lógico
! No lógico

Yuri Marquez Solis

 Operadores y expresiones
• Resumen:
• Concatenación: Se usa para unir cadenas de caracteres

• Aritméticos: Se usa con datos numéricos

• Asignación: Asigna un determinado valor a una variable

• Comparación: Compara dos valores

• Lógicos: Se utiliza cuando es necesario unir dos expresiones

Yuri Marquez Solis

Operadores y expresiones
• Orden de evaluación de las expresiones:
Prioridad Operador Operación
1º ++,--,-,! Incremento, decremento, cambio de
signo y negación
2º *,/,% Multiplicación, división, módulo
3º +,- Suma, resta
4º <,>,<=,>= Mayor, menor,mayor o igual, menor o
igual
5º ==, != Igual, distinto
6º && Conjunción
7º || Inclusión
8º =,+=,-=,*=,/=,%= Asignación, asignación y suma, etc
Yuri Marquez Solis
Operadores y expresiones
• Orden de evaluación de las expresiones:
Calcula primero la división
1/numero2 y luego le suma
numero1

Realiza primero la división y

luego incrementa el valor de
la variable numero2

Compara el valor de la
variable numero2 con a
numero 1 incrementada en 1

Yuri Marquez Solis

 Bloque III: Estructuras de control
 Bloque I: Introducción
 Bloque II: Elementos Básicos
 Bloque III: Estructuras de control
 Bloque IV: Funciones
 Bloque V: Objetos
 Bloque VI: Eventos
 Bloque VII: Ejercicio final

Yuri Marquez Solis

 Bloque III: Estructuras de control
• Bloque III: Estructuras de control
• If
• Switch
• While
• Do…While
• For
• For in
• Arrays
• El objeto Array
• Ejemplo completo

Yuri Marquez Solis

 JavaScript – Variables –Tipos de Variables
Variables Nulas
<SCRIPT LANGUAGE="JavaScript">
<!-
var nueva_variable;
nueva_variable=null;
alert(nueva_variable );
//-->
</SCRIPT>
<NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT >

Yuri Marquez Solis

 If
• Bloque III: Estructuras de control
• If
• Switch
• While
• Do…While
• For
• For in
• Arrays
• El objeto Array
• Ejemplo completo

Yuri Marquez Solis

 If
• Simplificado: Alternativa
• Alternativa simple:
• Si cumple una condición se ejecuta un código

Yuri Marquez Solis

If
• Ejemplo de uso

Yuri Marquez Solis

 If
• Alternativa Doble:
• Si cumple una condición se ejecuta un código, en caso
contrario, otro código

Yuri Marquez Solis

If
• Ejemplo de uso

Yuri Marquez Solis

 If
• Prueba de condición (?):
• Forma compacta de condición doble

• Ejemplo de uso

Yuri Marquez Solis

Ejemplo II: if

Yuri Marquez Solis

 Switch
• Bloque III: Estructuras de control
• If
• Switch
• While
• Do…While
• For
• For in
• Arrays
• El objeto Array
• Ejemplo completo

Yuri Marquez Solis

Switch
• Es una alternativa más compleja

Yuri Marquez Solis

Switch
• Ejemplo de uso

Yuri Marquez Solis

 While
• Bloque III: Estructuras de control
• If
• Switch
• While
• Do…While
• For
• For in
• Arrays
• El objeto Array
• Ejemplo completo

Yuri Marquez Solis

While
• Forma parte de las estructuras de control

Yuri Marquez Solis

While
• Ejemplo de uso

Yuri Marquez Solis

Ejemplo II. While

Yuri Marquez Solis

 While
• Bloque III: Estructuras de control
• If
• Switch
• While
• Do…While
• For
• For in
• Arrays
• El objeto Array
• Ejemplo completo

Yuri Marquez Solis

Do…While
• Es parecido al While, pero primero se ejecuta el bucle
y luego se comprueba la condición

Yuri Marquez Solis

Do…While
• Ejemplo de uso

Yuri Marquez Solis

For
• Estructura repetitiva por excelencia

Variable interna que controla Condición que determina si se

el bucle sigue ejecutando el bucle

Valor que toma la variable de Expresión que variará el valor de la

control inicialmente variable de control

Yuri Marquez Solis

For
• Ejemplo de uso

Yuri Marquez Solis

Ejemplo II : for

Yuri Marquez Solis

Ejemplo III: for

Yuri Marquez Solis

 For in
• Bloque III: Estructuras de control
• If
• Switch
• While
• Do…While
• For
• For in
• Arrays
• El objeto Array
• Ejemplo completo

Yuri Marquez Solis

For in
• Simplificación del bucle for, aplicado a arrays

Variable de control Es donde se encuentran los

elementos

Yuri Marquez Solis

 For in
• Ejemplo de uso

Yuri Marquez Solis

 Arrays
• Bloque III: Estructuras de control
• If
• Switch
• While
• Do…While
• For
• For in
• Arrays
• El objeto Array
• Ejemplo completo

Yuri Marquez Solis

Arrays
• Muchos elementos con el mismo nombre de variable
se diferencian por su INDEX
• Estructura que permite guardar más de un elemento

• Simplifica muchos aspectos a la hora de programar

Yuri Marquez Solis

 Arrays
• Creación de un array:

Indicador que hace Número de elementos que

referencia al array contendrá el array

• Manipulación de un array:
• Se trabaja igual que si fuese una variable
• Operador asignación

• Visualización

Yuri Marquez Solis

 Arrays
• Se puede acceder mediante variables

• Recorrido de un array:
• Se suele combinar con estructuras de control

Yuri Marquez Solis

 El objeto Array
• Bloque III: Estructuras de control
• If
• Switch
• While
• Do…While
• For
• For in
• Arrays
• El objeto Array
• Ejemplo completo

Yuri Marquez Solis

 El objeto Array
• Viene predefinido por el lenguaje
• Propiedades del objeto
length Número de elementos del array

• Métodos concat() Une dos arrays y devuelve el resultado en un array

join() Devuelve la cadena de texto que contiene la unión de los

elementos de un array
pop() Devuelve y borra el último elemento
push() Devuelve y añade un elemento
reverse() Refleja el contenido
shift() Devuelve y borra el primero elemento
slice() Extrae una sección del array y la devuelve como una nuevo

Yuri Marquez Solis

 El objeto Array
splice() Añade y/o elimina elementos
sort() Ordena los elementos
toString() Devuelve la cadena que representa
unshift() Añade uno o más elementos al inicio y devuelve el número de elementos actualizado

• Ejemplo:

Yuri Marquez Solis

 Ejemplo completo
• Bloque III: Estructuras de control
• If
• Switch
• While
• Do…While
• For
• For in
• Arrays
• El objeto Array
• Ejemplo completo

Yuri Marquez Solis

Ejemplo completo
• Ejemplo del uso de bucles y arrays

Yuri Marquez Solis

Ejercicios:

Yuri Marquez Solis

 Bloque IV: Funciones
 Bloque I: Introducción
 Bloque II: Elementos Básicos
 Bloque III: Estructuras de control
 Bloque IV: Funciones
 Bloque V: Objetos
 Bloque VI: Eventos
 Bloque VII: Ejercicio final

Yuri Marquez Solis

 Bloque IV: Funciones
• Bloque IV: Funciones
• ¿Qué es una función?
• Llamada a una función
• Argumentos
• ¿Cómo utilizar funciones?
• Funciones predefinidas
• Ejemplo global

Yuri Marquez Solis

 ¿Qué es una función?
• Bloque IV: Funciones
• ¿Qué es una función?
• Llamada a una función
• Argumentos
• ¿Cómo utilizar funciones?
• Funciones predefinidas
• Ejemplo global

Yuri Marquez Solis

¿Qué es una función?
• Permiten la ejecución de una serie de instrucciones
cuando se produzca un evento
• Conjunto de instrucciones a las que se le asignan un
nombre

Parámetros que acepta

Nombre que se le asigna la función
la función

Código de la función Valor que devolvemos, es

opcional

Yuri Marquez Solis

¿Qué es una función?
• Las funciones se declaran en cualquier parte de la
página HTML

• Deben de estar entre etiquetas <SCRIPT> </SCRIPT>

• Normalmente se define dentro de la cabecera

Yuri Marquez Solis

 Llamada a una función
• Bloque IV: Funciones
• ¿Qué es una función?
• Llamada a una función
• Argumentos
• ¿Cómo utilizar funciones?
• Funciones predefinidas
• Ejemplo global

Yuri Marquez Solis

 Llamada a una función
• Las funciones se pueden llamar desde cualquier parte del código

• Si una función retorna un valor, se debe de asignar a una variable

Yuri Marquez Solis

 Llamada a una función
• Funciones recursivas
• Es aquella que se llama a sí misma

Cálculo del factorial de un número de forma recursiva

Yuri Marquez Solis

 Argumentos
• Bloque IV: Funciones
• ¿Qué es una función?
• Llamada a una función
• Argumentos
• ¿Cómo utilizar funciones?
• Funciones predefinidas
• Ejemplo global

Yuri Marquez Solis

 Argumentos
• Variables locales
• Reciben unos valores diferentes dependiendo de la invocación
• Se usan para interactuar con la función desde el programa

Yuri Marquez Solis

Argumentos

Yuri Marquez Solis

 ¿Cómo utilizar funciones?
• Bloque IV: Funciones
• ¿Qué es una función?
• Llamada a una función
• Argumentos
• ¿Cómo utilizar funciones?
• Funciones predefinidas
• Ejemplo global

Yuri Marquez Solis

 ¿Cómo utilizar funciones?
• Cosas a tener en cuenta:
• Entre etiquetas <SCRIPT> </SCRIPT>
• La cláusula return facilita la devolución de resultados por parte de las
funciones
• Los parámetros que no se le pasen quedan a valor null
• Puede ser conveniente comprobar el número de parámetros

Yuri Marquez Solis

¿Cómo utilizar funciones?
• Ámbito de las variables
• Variables locales:
• Se declaran dentro de la función
• Solo son accesibles desde ella
• Variables globales:
• Se declaran fuera de la función
• Son accesibles desde todo el programa

Yuri Marquez Solis

 Funciones predefinidas
• Bloque IV: Funciones
• ¿Qué es una función?
• Llamada a una función
• Argumentos
• ¿Cómo utilizar funciones?
• Funciones predefinidas
• Ejemplo global

Yuri Marquez Solis

 Funciones predefinidas
• Funciones internas al lenguaje.
• parseFloat(cadena)
• parseInt(cadena, base)
• toString(argumento)
• typeof(argumento)
• escape(cadena)
• unescape(cadena)
• isNaN(argumento)
• eval(expresion)

Yuri Marquez Solis

 Ejemplo global
• Bloque IV: Funciones
• ¿Qué es una función?
• Llamada a una función
• Argumentos
• ¿Cómo utilizar funciones?
• Funciones predefinidas
• Ejemplo global

Yuri Marquez Solis

 Ejemplo global
• Ejemplo del uso de funciones con lo aprendido anteriormente

Yuri Marquez Solis

 Bloque V: Objetos
 Bloque I: Introducción
 Bloque II: Elementos Básicos
 Bloque III: Estructuras de control
 Bloque IV: Funciones
 Bloque V: Objetos
 Bloque VI: Eventos
 Bloque VII: Ejercicio final

Yuri Marquez Solis

 Bloque V: Objetos
• Bloque V: Objetos
• Definición
• El objeto navegador
• El objeto documento
• El objeto string
• El objeto math
• El objeto date
• Objetos personalizados

Yuri Marquez Solis

 Definición
• Bloque V: Objetos
• Definición
• El objeto navegador
• El objeto documento
• El objeto string
• El objeto math
• El objeto date
• Objetos personalizados

Yuri Marquez Solis

 Definición
• Objeto es un concepto o vista abstracta de una entidad
• Posee características que lo definen y propiedades
• Realizan muchas acciones
• Tipos de objetos:
• Objetos navegador
• Objetos predefinidos
• Objetos creados por el usuario

Yuri Marquez Solis

 Definición
• Formas de hacer referencia:
• Nombre:

• Posición:

• Objeto actual:

Yuri Marquez Solis

 El objeto navegador
• Bloque V: Objetos
• Definición
• El objeto navegador
• El objeto documento
• El objeto string
• El objeto math
• El objeto date
• Objetos personalizados

Yuri Marquez Solis

El objeto navegador

Yuri Marquez Solis

 El objeto navegador
• Objeto window
• Representa la ventana del navegador
Propiedades
closed, defalutStattus, frames,
history, length, location,
name, parent, opener, self,
status, top
Yuri Marquez Solis
Métodos
alert(mensajes), open(),
close(), confirm(mensaje),
prompt(), moveBy(x,y),
moveTo(x,y), print(),
setTimeout(), resizeBy(x,y),
resizeTo(ancho,alto),
scroll(x,y), scrollBy(x,y),
scrollTo(x,y), clearInterval(),
setInterval(), setTimeout()
 El objeto navegador
• Objeto window
• Representa la ventana del navegador
Propiedades
closed, defalutStattus, frames,
history, length, location,
name, parent, opener, self,
status, top
Yuri Marquez Solis
Métodos
alert(mensajes), open(),
close(), confirm(mensaje),
prompt(), moveBy(x,y),
moveTo(x,y), print(),
setTimeout(), resizeBy(x,y),
resizeTo(ancho,alto),
scroll(x,y), scrollBy(x,y),
scrollTo(x,y), clearInterval(),
setInterval(), setTimeout()
 El objeto navegador
• Objeto window
• Representa la ventana del navegador
Propiedades
closed, defalutStattus, frames,
history, length, location,
name, parent, opener, self,
status, top
Yuri Marquez Solis
Métodos
alert(mensajes), open(),
close(), confirm(mensaje),
prompt(), moveBy(x,y),
moveTo(x,y), print(),
setTimeout(), resizeBy(x,y),
resizeTo(ancho,alto),
scroll(x,y), scrollBy(x,y),
scrollTo(x,y), clearInterval(),
setInterval(), setTimeout()
 El objeto navegador Propiedades
closed, defalutStattus, frames,
Métodos
alert(mensajes), open(),
history, length, location, close(), confirm(mensaje),
name, parent, opener, self, prompt(), moveBy(x,y),
• Objeto window status, top moveTo(x,y), print(),
• Representa la ventana del navegador setTimeout(), resizeBy(x,y),
resizeTo(ancho,alto),
scroll(x,y), scrollBy(x,y),
scrollTo(x,y), clearInterval(),
Características Valores Nos indica setInterval(), setTimeout()
tollbar Yes, no, 1, 0 Si tendrá barra de herramientas
Location Yes, no, 1, 0 Si tendrá campo de localización
Directories Yes, no, 1, 0 Si tendrá botones de direcciones
Status Yes, no, 1, 0 Si tendrá barra de estado
Menubar Yes, no, 1, 0 Si tendrá barra de menús
Scrollbars Yes, no, 1,0 Si tendrá barra de desplazamiento
Resizable Yes, no, 1, 0 Si se podrá cambiar de tamaño con el ratón

Width Nº pixels Ancho de la ventana

Height Nº pixels Alto de la ventana
Left Nº pixels Distancia a la izquierda
Top Nº pixels Distancia hacia arriba Yuri Marquez Solis
 El objeto navegador
• Objeto frame
• Se comporta igual que el objeto window

Propiedades Métodos
defalutStattus alert(), confirm(mensaje),
window clearInterval(), setInterval(),
frames clearTimeout(), setTimeout(),
self focus(), blur(), moveBy(x,y),
Status moveTo(x,y), open(), close(),
top prompt(), scroll(x,y)

Yuri Marquez Solis

 El objeto navegador
• Objeto frame

Yuri Marquez Solis

 El objeto navegador
• Objeto location
• Información sobre la url actual
Propiedades Métodos
hash reload()
host replace(cadenaURL)
hostname
href
pathname
port
protocol
search

Yuri Marquez Solis

 El objeto navegador
• Objeto location
• Información sobre la url actual

Propiedades Métodos
hash reload()
host replace(cadenaURL)
hostname
href
pathname
port
protocol
search

Yuri Marquez Solis

 El objeto navegador
• Objeto location
• Información sobre la url actual
Propiedades Métodos
hash reload()
host replace(cadenaURL)
hostname
href
pathname
port
protocol
search

Yuri Marquez Solis

 El objeto navegador
• Objeto location

Yuri Marquez Solis

El objeto navegador
• Objeto history
• Información sobre las url vistadas
Propiedades Métodos
length back()
forward()
go(url)

Yuri Marquez Solis

 El objeto navegador
• Objeto history
• Información sobre las url vistadas

Propiedades Métodos
length back()
forward()
go(url)

Yuri Marquez Solis

 El objeto navegador
• Objeto history
• Información sobre las url vistadas

Propiedades Métodos
length back()
forward()
go(url)

Yuri Marquez Solis

El objeto navegador
• Objeto history

Yuri Marquez Solis

 El objeto navegador
• Objeto navigator
• No tiene relación con el resto de los objetos
• Informa sobre el navegador
Propiedades Métodos
appCodeName javaEnabled()
appName
appVersion
lenguage
mimeTypes
platform
plugins
userAgent

Yuri Marquez Solis

 El objeto navegador
• Objeto navigator
• No tiene relación con el resto de los objetos
• Informa sobre el navegador
Propiedades Métodos
appCodeName javaEnabled()
appName
appVersion
lenguage
mimeTypes
platform
plugins
userAgent

Yuri Marquez Solis

 El objeto navegador
• Objeto navigator

Yuri Marquez Solis

 El objeto documento
• Bloque V: Objetos
• Definición
• El objeto navegador
• El objeto documento
• El objeto string
• El objeto math
• El objeto date
• Objetos personalizados

Yuri Marquez Solis

El objeto documento

Yuri Marquez Solis

 El objeto documento
• Abarca gran parte del modelo de objetos
Propiedades Métodos
alinkColor clear()
anchors open()
applets close()
bgColor write()
Cookie writeln()
fgColor
forms
Images
lastModified
linkColor
links
location
referrer title
vlinkColor
Yuri Marquez Solis
 El objeto documento
• Abarca gran parte del modelo de objetos
Propiedades Métodos
alinkColor clear()
anchors open()
applets close()
bgColor write()
Cookie writeln()
fgColor
forms
Images
lastModified
linkColor
links
location
referrer title
vlinkColor
Yuri Marquez Solis
 El objeto documento
• Abarca gran parte del modelo de objetos
Propiedades Métodos
alinkColor clear()
anchors open()
applets close()
bgColor write()
Cookie writeln()
fgColor
forms
Images
lastModified
linkColor
links
location
referrer title
vlinkColor
Yuri Marquez Solis
 El objeto documento
• Los objetos link y Anchor
• El objeto link engloba las propiedades de los enlaces externos, y el anchor la
de los enlaces locales
Propiedades Métodos
Length

Yuri Marquez Solis

 El objeto documento
• Los objetos link y Anchor
• El objeto link engloba las propiedades de los enlaces externos, y el anchor la
de los enlaces locales
Propiedades Métodos
Length

Yuri Marquez Solis

 El objeto documento
• El objeto Image
• Permite manipular imágenes
Propiedades Métodos
border
complete
height
hspace
lowsrc
name
src
vspace
width

Yuri Marquez Solis

 El objeto documento
• El objeto Image
• Permite manipular imágenes

Propiedades Métodos
border
complete
height
hspace
lowsrc
name
src
vspace
width

Yuri Marquez Solis

 El objeto documento
• El objeto Form
• Permite manipular formulario
Propiedades Métodos
action reset()
elemnts submit()
encoding
length
method
target

Yuri Marquez Solis

 El objeto documento
• El objeto Form
• Permite manipular formulario

Propiedades Métodos
action reset()
elemnts submit()
encoding
length
method
target

Yuri Marquez Solis

 El objeto documento
• El objeto Form
• Permite manipular formulario

Propiedades Métodos
action reset()
elemnts submit()
encoding
length
method
target

Yuri Marquez Solis

 El objeto documento
• El objeto Form
• Casi la totalidad de etiquetas HTML se pueden definir como elementos del
formulario Etiqueta HTML Objeto JavaScript
<INPUT type=“text”> text
<TEXTAREA> textarea
<INPUT type=“password”> password
<INPUT type=“button”> button
<INPUT type=“submit ”> submit
<INPUT type=“reset”> reset
<INPUT type=“checkbox”> checkbox
<INPUT type=“radio”> radio
<SELECT> select
<INPUT type=“hidden”> hidden

Yuri Marquez Solis

 El objeto documento
• El objeto Form
• Objetos text, textarea, password
• Obtener el texto introducido por el usuario

Propiedades Métodos
defaultValue blur()
name focus()
value select()

Yuri Marquez Solis

 El objeto documento
• El objeto Form
• Objetos text, textarea, password
• Obtener el texto introducido por el usuario

Propiedades Métodos
defaultValue blur()
name focus()
value select()

Yuri Marquez Solis

 El objeto documento
• El objeto Form
• Objetos text, textarea, password
• Obtener el texto introducido por el usuario

Propiedades Métodos
defaultValue blur()
name focus()
value select()

Yuri Marquez Solis

 El objeto documento
• El objeto Form
• Objetos button, reset, submit
• Botones
Propiedades Métodos
name click()
value

Yuri Marquez Solis

 El objeto documento
• El objeto Form
• Objetos button, reset, submit
• Botones
Propiedades Métodos
name click()
value

Yuri Marquez Solis

 El objeto documento
• El objeto Form
• Objetos button, reset, submit
• Botones
Propiedades Métodos
name click()
value

Yuri Marquez Solis

 El objeto documento
• El objeto Form
• Objetos checkbox
• Casillas de verificación

Propiedades Métodos
checked click()
defaultChecked
name
value

Yuri Marquez Solis

 El objeto documento
• El objeto Form
• Objetos checkbox
• Casillas de verificación

Propiedades Métodos
checked click()
defaultChecked
name
value

Yuri Marquez Solis

 El objeto documento
• El objeto Form
• Objetos checkbox
• Casillas de verificación

Propiedades Métodos
checked click()
defaultChecked
name
value

Yuri Marquez Solis

 El objeto documento
• El objeto Form
• Objetos radio
• Elegir una posibilidad en una lista

Propiedades Métodos
checked click()
defaultChecked
length
name
value

Yuri Marquez Solis

 El objeto documento
• El objeto Form
• Objetos radio
• Elegir una posibilidad en una lista

Propiedades Métodos
checked click()
defaultChecked
length
name
value

Yuri Marquez Solis

 El objeto documento
• El objeto Form
• Objetos radio
• Elegir una posibilidad en una lista

Propiedades Métodos
checked click()
defaultChecked
length
name
value

Yuri Marquez Solis

 El objeto documento
• El objeto Form
• Objetos select
• Representa una lista de opciones dentro de un formulario
Propiedades Métodos
Length
Name
Options
selectedIndex
Options[n].index
Options[n].selected
Options[n].text
Options[n].value

Yuri Marquez Solis

 El objeto documento
• El objeto Form
• Objetos select
• Representa una lista de opciones dentro de un formulario
Propiedades Métodos
Length
Name
Options
selectedIndex
Options[n].index
Options[n].selected
Options[n].text
Options[n].value

Yuri Marquez Solis

 El objeto documento
• El objeto Form
• Objetos hidden
• Cadenas de caracteres no visibles

Propiedades Métodos
name
value

Yuri Marquez Solis

 El objeto documento
• El objeto Form
• Objetos hidden
• Cadenas de caracteres no visibles

Propiedades Métodos
name
value

Yuri Marquez Solis

 El objeto documento
• El objeto Document

Yuri Marquez Solis

 El objeto documento
• El objeto Document

Yuri Marquez Solis

 El objeto string
• Bloque V: Objetos
• Definición
• El objeto navegador
• El objeto documento
• El objeto string
• El objeto math
• El objeto date
• Objetos personalizados

Yuri Marquez Solis

 El objeto string
• Objeto propio de JavaScript
• Nos permite manipular cadenas de caracteres
• Propiedades:
• length
• prototype
• Métodos:
• big()
• blink()
• bold()
• charAt(indice)
• concat(cadena)
• fixed()
• fontcolor(color)
• fontsize(tamaño)
• indexOf(cadenaBuscada,indice)
Yuri Marquez Solis
 El objeto string
• italics()
• lastIndexOf(cadenaBuscada, indice)
• link(url)
• small()
• split(carácter)
• strike()
• slice(inicio, fin)
• sub()
• substr(numeroCaracteres, inicio)
• substring(inicio, fin)
• sup()
• toLowerCase()
• toUpperCase()
Yuri Marquez Solis
 El objeto string
• Ejemplo

Yuri Marquez Solis

 El objeto math
• Bloque V: Objetos
• Definición
• El objeto navegador
• El objeto documento
• El objeto string
• El objeto math
• El objeto date
• Objetos personalizados

Yuri Marquez Solis

 El objeto math
• Nos permite realizar cálculos en el script
• Propiedades: (constantes de interés)
• Math.E
• Math.LN2
• Math.LN10
• Math.LOG2E
• Math.LOG10E
• Math.PI
• Math.SQRT1_2
• Math.SQRT2

Yuri Marquez Solis

 El objeto math
• Ejemplo

Yuri Marquez Solis

 El objeto math
• Ejemplo

Yuri Marquez Solis

 El objeto date
• Bloque V: Objetos
• Definición
• El objeto navegador
• El objeto documento
• El objeto string
• El objeto math
• El objeto date
• Objetos personalizados

Yuri Marquez Solis

 El objeto date
• Nos permite manipular fechas y horas
• Creación:

• Métodos:
• objetoFecha.getTime()
• objetoFecha.getDate()
• objetoFecha.getDay()
• objetoFecha.getHours()
• objetoFecha.getMonth()
• objetoFecha.getSeconds()

Yuri Marquez Solis

 El objeto date
• objetoFecha.getYear()
• objetoFecha.setDate(dia)
• objetoFecha.setDay(diaDeLaSemana)
• objetoFecha.setHours(horas)
• objetoFecha.setMinutes(minutos)
• objetoFecha.setMonth(mes)
• objetoFecha.setSeconds(segundos)
• objetoFecha.setTime(milisegundos)
• objetoFecha.setYear(año)
• objetoFecha.tcGMTString()
• objetoFecha.tcLocaleString()
Yuri Marquez Solis
 El objeto date
• Ejemplo

Yuri Marquez Solis

 Objetos personalizados
• Bloque V: Objetos
• Definición
• El objeto navegador
• El objeto documento
• El objeto string
• El objeto math
• El objeto date
• Objetos personalizados

Yuri Marquez Solis

Objetos personalizados
• JavaScript nos permite crear nuestros propios objetos

Yuri Marquez Solis

Objetos personalizados
• Los métodos se declaran fuera de la función

Yuri Marquez Solis

 Bloque VI: Eventos
 Bloque I: Introducción
 Bloque II: Elementos Básicos
 Bloque III: Estructuras de control
 Bloque IV: Funciones
 Bloque V: Objetos
 Bloque VI: Eventos
 Bloque VII: Ejercicio final

Yuri Marquez Solis

 Bloque VI: Eventos
• Bloque VI: Eventos
• Definición
• Eventos más comunes
• Ejemplo de uso

Yuri Marquez Solis

 Definición
• Bloque VI: Eventos
• Definición
• Eventos más comunes
• Ejemplo de uso

Yuri Marquez Solis

 Definición
• Son las acciones que el usuario realiza al visitar una web.
Elemento Acción Evento Manejador
Botón Clic Click onClick
Casilla Clic Click onClick
Enlace Clic Click onClick
Situar el puntero MouseOver onMouseOver
Botón opción Clic Click onClick
Selección Tabulador/Clic Focus onFocus
Tabulador/Clic para Blur onBlur
cambio
Deselección Change onChange
Campo texto Tabulador/Clic Focus onFocus
Tabulador/Clic para Blur onBlur
cambio
Deselección Change onChange
Selección texto Select onSelect
Yuri Marquez Solis
 Eventos más comunes
• Bloque VI: Eventos
• Definición
• Eventos más comunes
• Ejemplo de uso

Yuri Marquez Solis

 Eventos más comunes
• Eventos de ratón:

Evento Causa
onmousedown Se ha presionado el ratón
onmousemove Se ha movido el ratón
onmouseover Se pasa el puntero por una determinada
zona
onmouseout El puntero del ratón sale de una zona

onmouseup Se ha levantado el botón izquierdo del ratón

onclick Se pulsa el botón izquierdo

ondbloclick Se ha realizado una doble pulsación

onselect Se realiza una selección

Yuri Marquez Solis

 Eventos más comunes
• Eventos de teclado:
Evento Causa
onkeydown bajada de tecla correspondiente a una pulsación

onkeypress El usuario pulsa una tecla abarca virtuales

onkeyup Subida de tecla correspondiente a una pulsación

• Eventos de enfoque:
Evento Causa
onblur El objeto pierde el foco de entrada

onfocus El objeto recibe el foco

Yuri Marquez Solis

 Eventos más comunes
• Eventos de formulario:
Evento Causa
onreset El usuario inicializa un formulario

onsubmit El formulario está a punto de enviarse

• Eventos de carga de página:

Evento Causa
onload El navegador ha cargado la página

onunload El objeto se ha descargado

Yuri Marquez Solis
 Eventos más comunes
• Otros eventos:
Evento Causa
onAbort El usuario cancela la carga de una
imagen
onChange El contenido de un objeto o selección
ha cambiado
onDragDrop Se dispara continuamente en el objeto
fuente durante la operación de arrastre

onError Se produce un error en la carga de un

objeto
onMove Se mueve la ventana

onResize Se redimensiona la ventana

Yuri Marquez Solis

 Ejemplo de uso
• Bloque VI: Eventos
• Definición
• Eventos más comunes
• Ejemplo de uso

Yuri Marquez Solis

Ejemplo de uso

Yuri Marquez Solis

Cancelando acciones por defecto

Yuri Marquez Solis