Javascript Completa Semana04-06 Informatica

CURSO DE JAVASCRIPT Y
DHTML
Victor Barrientos R.
CURSO DE JAVASCRIPT Y DHTML
Para qu nos sirve este curso?
Dotar a las pginas web de Inteligencia

Almacenar y recuperar informacin del usuario
Comprobar formularios
Aumentar interaccin del usuario con la WEB
Captar Eventos del ratn y del teclado
Realizar Pequeas animaciones
Definir reglas de estilo
Crear sitios WEB donde todas las pginas mantengan una
apariencia comn
CURSO DE JAVASCRIPT Y DHTML
Estructura del Curso
Introduccin
JavaScript
el DOM y las Hojas de Estilo (CSS)
DHTML
Proyectos DHTML
Introduccin
Victor Barrientos R.
Introduccin
Qu es JavaScript?
No es Java
Es un lenguaje de programacin de Scripts
en el Client-Side
Otros VBScript
Introduccin
Qu es DHTML?
No es un lenguaje de programacin
No es una aplicacin
Es una metodologa de trabajo:
DHTML = JS + DOM + CSS
JS (JavaScript) lenguaje de programacin de Scripts
DOM (Documet Object Model) estructura de los objetos de los

objetos de un documento WEB
CSS (Hojas de Estilo) lenguaje de definicin 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 pgina WEB(1)
<HTML>
<HEAD>
<TITLE>
Mi primer Script
</TITLE>
<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
</HEAD>
<BODY>
<P>
Este pgina contiene un script vaco
</P>
</BODY>
</HTML>
JavaScript
<HTML>
<HEAD>
<TITLE>
Mi primer Script
</TITLE>
alert("Hola JavaScript!");
</SCRIPT>
</HEAD>
<BODY>
<P>
Esta pgina 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 pgina contiene mi primer script
</P>
</BODY>
</HTML>
JavaScript
Deteccin de errores
Cambiar alert por Alert

JavaScript
Variables
Declaracin
Asignacin
JavaScript Variables
Declaracin e Asignacin(1)
<HTML>
<HEAD>
<TITLE> Curso JS y DTHML</TITLE>

</SCRIPT>
</HEAD>
<BODY>
<P>
Esta pgina contiene un script
</P>
</BODY>
</HTML>
Declaracin y Asignacin (2)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Declaracin y Asignacin (3)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Declaracin y Asignacin(4)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
JavaScript- Variables
Nombres de las variables
Nombres Incorrectos
No pueden empezar por nmeros
Pueden contener:
Numeros, ej var total2004;
Letras, ej var total;
El caracter _ (underscore ) ej var total_2004;
No pueden contener:
Smbolos: ; , .
Letras acentuadas ni caracteres locales tipo ,
Espacios en blanco
Palabras reservadas
Tipos de Variables
Cadenas:
var producto= Tetrabrick Leche 1L;
Nmeros
Var precio=1;
Var precio= 0.65;
Booleanos
var enstock=true;
Nulas
var producto=null;
Indefinidas
JavaScript Variables Tipos de Variables
Cadenas
Asignacin
Se guarda entre Comillas simples o dobles
Operaciones
Concatenacin +
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 lnea
\f Salto de pgina
\r Retorno de carro
\t Tabulacin
\b Retroceder un carcter
Secuencias de Escape
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Nmeros
Asignacin
Operaciones
Infinito y Nan
JavaScript Variables Tipos de Variables - Nmeros
Asignacin
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
JavaScript Variables Tipos de Variables- Nmeros
Operaciones
Suma +, +=
Resta , -=
Multiplicacin *, *=
Divisin /, /=
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
Asignacin
Operadores
Comparadores
<
>=
<
<=
==
!==
Operadores lgicos
AND: &&
OR: ||
NOT: !
Booleanos
Ejemplo Comparaciones
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Booleanos
Ejemplo Operadores Lgicos
<HTML>
<HEAD>

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

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
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 :
conversin implcita
conversin explcita (Recomendable)
Obtener el tipo
<HTML>
<HEAD>

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

Cambio de tipo :
conversin implcita
conversin explcita (Recomendable)
Conversin 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>
Conversin explcita(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 (condicin)
then {
expresin1;
expresin2;

expresin n;
}
else{
expresin1;
expresin2;

expresin m;
}
JavaScript Control de Flujo- Condicionales- IF
Ejemplo (1)
<HTML>
<HEAD>

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

</SCRIPT>
</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(expresin inicial; condicin; expresin iteracin)

{
expresin1;
expresin2;

expresinn;
}
JavaScript Control de Flujo Bucles For
Ejemplo
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
While
while(condicion)
{
expresin1;
expresin2;

expresinn;
}
JavaScript Control de Flujo Bucles-While
Ejemplo
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Do-while
do {
expresin1;
expresin2;

expresinn;
}while (condicion);
JavaScript Control de Flujo Bucles - Do While
Ejemplo
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
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
Declaracin
var producto = new Array();

var producto = new Array(5);
var producto = new Array(producto1,producto2, );
JavaScript Matrices
Ejemplo(1)
<HTML>
<HEAD>

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

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
JavaScript Matrices
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
Declaracin
<HTML>
<HEAD>

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

Tiene atributos o propiedades
length
Tiene mtodos
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 mtodo join()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
El mtodo reverse()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
El mtodo sort()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
El mtodo push()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
El mtodo pop()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
El mtodo unshift()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
El mtodo shift()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
El mtodo slice()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
El mtodo 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>
<NOSCRIPT> Su navegador no soporta
JavaScript.</NOSCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Funciones de Usuario
function nombre_funcin(arg1, arg2, arg3,)

{
var valor;
expresin 1;
expresin 2;

expresin 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 Informacin del usuario

Activarlas en el navegador
Recomendaciones de Uso
JavaScript Cookies
Manejo bsico
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);
JavaScript Cookies
Manejo avanzado(1)
GuardarCookieVar()
ValorCookieVar()
EliminarCookieVar()
JavaScript Cookies
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
Creacin de objetos
Definicin de la clase
Constructor
Atributos y mtodos
Instanciacin (Creacin) de un objeto
New
JavaScript POO en JS - Creacin de objetos
Ejemplo(1)
<HTML>
<HEAD>

</SCRIPT>
<NOSCRIPT> Su navegador no soporta
JavaScript.</NOSCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Ejemplo(2)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Ejemplos de objetos
Array
Atributos: length,
Mtodos: join(), reverse(), sort(), push(), pop(), concat(),
String
Atributos: length
Mtodos: indexOf(), substr(), replace(),
Date
Atributos:
Mtodos: getHours(), getMinutes()
Math
Atributos: Math.PI, Math.E,
Mtodos: 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 mtodo indexOf()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
String. El mtodo sustr()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
String. El mtodo replace()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
String. Mtodos 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
Reutilizacin de cdigo
Encapsulacin
Programas orientados a Eventos
Eventos ms utilizados
Evento Descripcin Objetos

Es llamado al cargar una pgina window
onLoad()
Es llamado al descargar (cerrar) una pgina window
onUnload()
Es llamado al pulsar con el botn izquierdo del ratn link, button, radio, checkbox,
onClick()
Es llamado al hacer doble click el botn izquierdo del ratn link, button, radio, checkbox,
onDblClick()
Es llamado al pasar el ratn por encima link, area, layer
onMouseOver()
Es llamado al cuando el ratn 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 msica
play()
stop()

Javascript Completa Semana04-06 Informatica

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Javascript Completa Semana04-06 Informatica

Uploaded by

Copyright:

Available Formats

CURSO DE JAVASCRIPT Y

Dotar a las pginas web de Inteligencia

JS (JavaScript) lenguaje de programacin de Scripts

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

CSS (Hojas de Estilo) lenguaje de definicin del aspecto de

Editores de Texto Plano

Cambiar alert por Alert

Obtener el tipo de una variable

Obtener el tipo de una variable

for(expresin inicial; condicin; expresin iteracin)

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_funcin(arg1, arg2, arg3,)

Almacenar Informacin del usuario

Es una clase no instanciable

Evento Descripcin Objetos

Es llamado al cuando el ratn ya no pasa por encima link, area, layer

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

You might also like