VBR Semana04-06 Js

CURSO DE JAVASCRIPT Y
DHTML
Victor Barrientos R.
CURSO DE JAVASCRIPT Y DHTML
¿Para qué nos sirve este curso?
 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
CURSO DE JAVASCRIPT Y DHTML
Estructura del Curso
 Introducción
 JavaScript
 el DOM y las Hojas de Estilo (CSS)
 DHTML
 Proyectos DHTML
Introducción
Victor Barrientos R.
Introducción
¿Qué es JavaScript?
 No es Java
 Es un lenguaje de programación de Scripts
en el ‘Client-Side’
 Otros VBScript
Introducción
¿Qué es DHTML?
 No es un lenguaje de programación
 No es una aplicación
 Es una metodología de trabajo:
– DHTML = JS + DOM + CSS
 JS (JavaScript) lenguaje de programación de Scripts
 DOM (Documet Object Model) estructura de los objetos de los

objetos de un documento WEB
 CSS (Hojas de Estilo) lenguaje de definición del aspecto de

los objetos de un documento WEB
JAVASCRIPT
Victor Barrientos R
JavaScript
Herramientas de Trabajo
 Editores de Texto Plano

– NotePad
– EditPlus
 Editores de JS Profesionales
– DreamWeaver
– Antechinus
JavaScript
JavaScrit en una página WEB(1)
<HTML>
<HEAD>
<TITLE>
Mi primer Script
</TITLE>
<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
</HEAD>
<BODY>
<P>
Este página contiene un script vacío
</P>
</BODY>
</HTML>
JavaScript
<HTML>
<HEAD>
<TITLE>
Mi primer Script
</TITLE>
alert("¡Hola JavaScript!");
</SCRIPT>
</HEAD>
<BODY>
<P>
Esta página contiene mi primer script
</P>
</BODY>
</HTML>
JavaScript
<HTML>
<HEAD>
<TITLE>Mi primer Script</TITLE>

</SCRIPT>
<NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT>
</HEAD>
<BODY>
<P>
Esta página contiene mi primer script
</P>
</BODY>
</HTML>
JavaScript
Detección de errores
 Cambiar alert por Alert

JavaScript
Variables
 Declaración
 Asignación
JavaScript – Variables
Declaración e Asignación(1)
<HTML>
<HEAD>
<TITLE> Curso JS y DTHML</TITLE>

</SCRIPT>
</HEAD>
<BODY>
<P>
Esta página contiene un script
</P>
</BODY>
</HTML>
Declaración y Asignación (2)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Declaración y Asignación (3)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Declaración y Asignación(4)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
JavaScript- Variables
Nombres de las variables
 Nombres Incorrectos
– No pueden empezar por números
– Pueden contener:
 Numeros, ej var total2004;
 Letras, ej var total;
 El caracter ‘_’ (underscore ) ej var total_2004;
– No pueden contener:
 Símbolos: ‘;’ ‘,’ ‘.’
 Letras acentuadas ni caracteres locales tipo ñ,ç
 Espacios en blanco
 Palabras reservadas
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
JavaScript – Variables –Tipos de Variables
Cadenas
 Asignación
– Se guarda entre Comillas simples o dobles
 Operaciones
– Concatenación ‘+’
JavaScript – Variables –Tipos de Variables - Cadenas
Ejemplo
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Secuencias de Escape
Escape Efecto
“\\texto de prueba” texto de prueba
“texto \”de\” pueba” texto “de” prueba
“texto \’de\’ prueba” texto ‘de’ prueba
Secuencia Efecto
\n Salto de línea
\f Salto de página
\r Retorno de carro
\t Tabulación
\b Retroceder un carácter
Secuencias de Escape
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Números
 Asignación
 Operaciones
 Infinito y Nan
JavaScript – Variables –Tipos de Variables - Números
Asignación
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
JavaScript – Variables –Tipos de Variables- Números
Operaciones
 Suma +, +=
 Resta –, -=
 Multiplicación *, *=
 División /, /=
 Incremento ++
 Decremento –
Ejemplo
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
NaN e Infinity
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Booleanos
 Asignación
 Operadores
– Comparadores
 <
 >=
 <
 <=
 ==
 !==
– Operadores lógicos
 AND: &&
 OR: ||
 NOT: !
JavaScript – Variables –Tipos de Variables –
Booleanos
Ejemplo Comparaciones
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
JavaScript – Variables –Tipos de Variables –
Booleanos
Ejemplo Operadores Lógicos
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Variables Nulas
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
JavaScript – Variables – Tipos de Variables
Variables Indefinidas
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Tipos de Variables
 Obtener el tipo de una variable

– typeof(variable)
 Cambio de tipo :
– conversión implícita
– conversión explícita (Recomendable)
JavaScript – Variables – Tipos de Variables
Obtener el tipo
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Cambios de tipos
 Obtener el tipo de una variable

 Cambio de tipo :
– conversión implícita
– conversión explícita (Recomendable)
Conversión implicita(1)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Conversión explícita(1)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
JavaScript – Control de Flujo
Condicionales
 IF
 Switch
JavaScript – Control de Flujo- Condicionales
IF
If (condición)
then {
expresión1;
expresión2;
…
expresión n;
}
else{
expresión1;
expresión2;
…
expresión m;
}
JavaScript – Control de Flujo- Condicionales- IF
Ejemplo (1)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Ejemplo (2)
<HTML>
<HEAD>

</SCRIPT>
<NOSCRIPT> Su navegador no soporta
JavaScript.</NOSCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
JavaScript – Control de Flujo –Condicionales
Switch
switch (variable)
{
case valor1:
expresion1;
expresion2;
…
break;
case valor2:
expresion1;
expresion2;
…
break;
case valor3:
expresion1;
expresion2;
…
break;
case default:
expresion1;
expresion2;
…
}
JavaScript – Control de Flujo –Condicionales-Switch
Ejemplo
<HTML>
<HEAD>

</SCRIPT>
<NOSCRIPT> Su navegador no
soporta JavaScript.</NOSCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
JavaScript – Control de Flujo
Bucles
 For
 While
 Do-while
 Break
JavaScript – Control de Flujo –Bucles
For
for(expresión inicial; condición; expresión iteración)

{
expresión1;
expresión2;
…
expresiónn;
}
JavaScript – Control de Flujo –Bucles – For
Ejemplo
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
While
while(condicion)
{
expresión1;
expresión2;
…
expresiónn;
}
JavaScript – Control de Flujo –Bucles-While
Ejemplo
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Do-while
do {
expresión1;
expresión2;
…
expresiónn;
}while (condicion);
JavaScript – Control de Flujo – Bucles - Do While
Ejemplo
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
JavaScript – Control de Flujo – Bucles
Break
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
JavaScript
Matrices
Tetrabrik Tetrabrik Tetrabrik Tetrabrik Tetrabrik Tetrabrik

leche 1L leche 1L leche 1L leche 1L … leche 1L leche 1L
[0] [1] [2] [3] [9] [10]
Producto [ ]
JavaScript – Matrices
Declaración
 var producto = new Array();

 var producto = new Array(5);
 var producto = new Array(”producto1”,”producto2”, …);
Ejemplo(1)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Ejemplo(2)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Tablas
Producto [ ][ ]
[0][1] [0][2] …
Tetrabrik Lata Champú Harina Aceite 1L
[0][0] leche 1L Tomate 1L 1K
185 432 127 472 687

[1][0] unidades unidades unidades … unidades unidades
1 2 1,5 0,5 3
[2][0] €/unidad €/unidad €/unidad €/unidad €/unidad
[2][1] [2][2] …
JavaScript – Matrices - Tablas
Declaración
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
El objeto Array
 Los array son objetos

 Tiene atributos o propiedades
– length
 Tiene métodos
– join()
– reverse()
– sort()
– push()
– pop()
– shift()
– unshift()
– slice()
– concat()
JavaScript – Matrices – El objeto Array
El atributo length
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
El método join()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
El método reverse()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
El método sort()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
El método push()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
El método pop()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
El método unshift()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
El método shift()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
El método slice()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
El método concat()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
JavaScript
Funciones
 Funciones de JavaScript:
– alert()
– prompt()
– setTimeout
– confirm()
– …
 Funciones de Usuario
JavaScript – Funciones
Funciones de Usuario(1)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Funciones de Usuario
function nombre_función(arg1, arg2, arg3,…)

{
var valor;
expresión 1;
expresión 2;
…
expresión n;
return valor;
}
JavaScript – Funciones - Funciones de Usuario
Argumentos variables(1)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
JavaScript – Funciones - Funciones de Usuario
Argumentos variables(2)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
JavaScript
Cookies
 Almacenar Información del usuario

 Activarlas en el navegador
 Recomendaciones de Uso
JavaScript – Cookies
Manejo básico
 Guardar cookie
– document.cookie = “nombre=valor”;
– Ej: document.cookie = “usuario=sergio jimenez
celorrio”;
 Recuperar cookie
– var variable= document.cookie;
– Var posIgual=variableCookie.indexOf(“=”);
– Var valorcoockie.substring(posIgual+1);
Manejo avanzado(1)
 GuardarCookieVar()
 ValorCookieVar()
 EliminarCookieVar()
Manejo avanzado(2)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
JavaScript
POO en JS
 ¿Qué es una clase?

 ¿Qué es un objeto?
JavaScript – POO en JS
Creación de objetos
 Definición de la clase
– Constructor
 Atributos y métodos
 Instanciación (Creación) de un objeto
– New
JavaScript – POO en JS - Creación de objetos
Ejemplo(1)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Ejemplo(2)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Ejemplos de objetos
 Array
– Atributos: length,
– Métodos: join(), reverse(), sort(), push(), pop(), concat(), …
 String
– Atributos: length
– Métodos: indexOf(), substr(), replace(),…
 Date
– Atributos:
– Métodos: getHours(), getMinutes()
 Math
– Atributos: Math.PI, Math.E, …
– Métodos: abs(), pow(), random(), sqrt(), round() log(),…
JavaScript – POO en JS - Ejemplos de objetos
String. El atributo length
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
String. El método indexOf()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
String. El método sustr()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
String. El método replace()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
String. Métodos toUpperCase() y toLowerCase()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Math
 Es una clase no instanciable

Math
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Date(1)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Date(2)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Prototype
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Ventajas de la POO
 Reutilización de código
 Encapsulación
 Programas orientados a Eventos
Eventos más utilizados
Evento Descripción Objetos

Es llamado al cargar una página window
onLoad()
Es llamado al descargar (cerrar) una página window
onUnload()
Es llamado al pulsar con el botón izquierdo del ratón link, button, radio, checkbox,
onClick()
Es llamado al hacer doble click el botón izquierdo del ratón link, button, radio, checkbox,
onDblClick()
Es llamado al pasar el ratón por encima link, area, layer
onMouseOver()
Es llamado al cuando el ratón ya no pasa por encima link, area, layer

onMouseOut()
Es llamado cuando se le da el foco al objeto Window, text, textArea, Password,
onFocus() link, button, radio, checkbox, form
Es llamado cuando se cambia el contenido del objeto Window, text, textArea, Password,
onChange() link, radio, checkbox
Es llamado cuando se selcciona el contenido del objeto text, textArea, Password

onSelect()
Es llamado cuando se le quita el foco al objeto Window, text, textArea, Password,
onBlur() link, button, radio, checkbox, form
JavaScript
Varios
 Imprimir
– println()
 Reproducir música
– play()
– stop()

VBR Semana04-06 Js

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

VBR Semana04-06 Js

Cargado por

Copyright:

Formatos disponibles

CURSO DE JAVASCRIPT Y

 Dotar a las páginas web de “Inteligencia”

 JS (JavaScript) lenguaje de programación de Scripts

 DOM (Documet Object Model) estructura de los objetos de los

 CSS (Hojas de Estilo) lenguaje de definición del aspecto de

 Editores de Texto Plano

 Cambiar alert por Alert

 Obtener el tipo de una variable

 Obtener el tipo de una variable

for(expresión inicial; condición; expresión iteración)

Tetrabrik Tetrabrik Tetrabrik Tetrabrik Tetrabrik Tetrabrik

[0] [1] [2] [3] [9] [10]

 var producto = new Array();

185 432 127 472 687

 Los array son objetos

//media de la tercera matriz

function nombre_función(arg1, arg2, arg3,…)

 Almacenar Información del usuario

 ¿Qué es una clase?

 Es una clase no instanciable

Evento Descripción Objetos

Es llamado al cuando el ratón ya no pasa por encima link, area, layer

Es llamado cuando se selcciona el contenido del objeto text, textArea, Password

También podría gustarte