introducción javascritp
TRANSCRIPT
-
8/12/2019 Introduccin JavaScritp
1/171
-
8/12/2019 Introduccin JavaScritp
2/171
Bloque I: IntroduccinBloque II: Elementos BsicosBloque III: Estructuras de control
Bloque IV: FuncionesBloque V: ObjetosBloque VI: EventosBloque VII: Ejercicio final
-
8/12/2019 Introduccin JavaScritp
3/171
Bloque I: IntroduccinBloque II: Elementos BsicosBloque III: Estructuras de control
Bloque IV: FuncionesBloque V: ObjetosBloque VI: EventosBloque VII: Ejercicio final
-
8/12/2019 Introduccin JavaScritp
4/171
Bloque I: Introduccin Introduccin a JavaScript JavaScript y HTML Elementos de un programa JavaScript Entrada y salida
-
8/12/2019 Introduccin JavaScritp
5/171
Bloque I: Introduccin Introduccin a JavaScript JavaScript y HTML Elementos de un programa JavaScript Entrada y salida
-
8/12/2019 Introduccin JavaScritp
6/171
Lenguaje de programacin basado en scriptsCaractersticas: Lenguaje de programacin interpretado Se interpreta en el navegador Lenguaje orientado a eventos Lenguaje orientado a objetosPrograma -> cualquier editor de texto o
HTML. (Nosotros vamos a usarDreamweaver )
-
8/12/2019 Introduccin JavaScritp
7/171
Bloque I: Introduccin Introduccin a JavaScript JavaScript y HTML Elementos de un programa JavaScript Entrada y salida
-
8/12/2019 Introduccin JavaScritp
8/171
Los programas JavaScript se encuentrandentro de las pginas HTMLEntre las etiquetas y
Etiqueta de inicio del programa JavaScript
Etiqueta de final del programa JavaScript
-
8/12/2019 Introduccin JavaScritp
9/171
Se pueden incluir mediante un programa .js
Vamos a cargar el cdigo JavaScript de un
programa ya creado.
-
8/12/2019 Introduccin JavaScritp
10/171
Ejemplo de programa en JavaScript
-
8/12/2019 Introduccin JavaScritp
11/171
Bloque I: Introduccin Introduccin a JavaScript JavaScript y HTML Elementos de un programa JavaScript Entrada y salida
-
8/12/2019 Introduccin JavaScritp
12/171
Comentarios:
Comentario de una lnea Comentario varia lneas
-
8/12/2019 Introduccin JavaScritp
13/171
Tipo de instrucciones:Declaracin
Inicializacin
Estructurasde control
Entrada ysalida
-
8/12/2019 Introduccin JavaScritp
14/171
Bloque I: Introduccin Introduccin a JavaScript JavaScript y HTML Elementos de un programa JavaScript Entrada y salida
-
8/12/2019 Introduccin JavaScritp
15/171
Nos permiten visualizar y recibir informacinSe usan con cadenas de caracteresAlgunos caracteres importantes son:
Carcter Significado
\n Nueva lnea\t Tabulador\r Retorno de carro\b Retroceso de un espacio
-
8/12/2019 Introduccin JavaScritp
16/171
Document.write()
-
8/12/2019 Introduccin JavaScritp
17/171
Alert()
-
8/12/2019 Introduccin JavaScritp
18/171
Prompt()
-
8/12/2019 Introduccin JavaScritp
19/171
Bloque I: IntroduccinBloque II: Elementos BsicosBloque III: Estructuras de control
Bloque IV: FuncionesBloque V: ObjetosBloque VI: EventosBloque VII: Ejercicio final
-
8/12/2019 Introduccin JavaScritp
20/171
-
8/12/2019 Introduccin JavaScritp
21/171
Bloque II: Elementos Bsicos Elementos bsicos Variables e identificadores Tipos de datos Operadores y expresiones
-
8/12/2019 Introduccin JavaScritp
22/171
-
8/12/2019 Introduccin JavaScritp
23/171
-
8/12/2019 Introduccin JavaScritp
24/171
Bloque II: Elementos Bsicos Elementos bsicos Variables e identificadores Tipos de datos Operadores y expresiones
-
8/12/2019 Introduccin JavaScritp
25/171
Creacin de la variable: Palabra reservada var No iniciarse por nmero No coincidir con palabras reservadas
-
8/12/2019 Introduccin JavaScritp
26/171
Almacenamiento informacin en la variable: Se puede almacenar cualquier tipo de informacin Se usa el operador de asignacin
Si introducimos informacin en una variable noinicializada, se inicializa automticamente, pero no
es una prctica aconsejada
-
8/12/2019 Introduccin JavaScritp
27/171
Consulta o utilizacin de un valor Se puede hacer referencia al contenido
Incremento de un contador
Concatenacin de cadenas
Operacin con variables
-
8/12/2019 Introduccin JavaScritp
28/171
Bloque II: Elementos Bsicos Elementos bsicos Variables e identificadores Tipos de datos Operadores y expresiones
-
8/12/2019 Introduccin JavaScritp
29/171
Nmeros: Cualquier formato de los habituales
Formato decimal
Formato hexadecimal
Formato octal
Cadenas: Cadenas de caracteres.
-
8/12/2019 Introduccin JavaScritp
30/171
Booleanos: Valores lgicos
Objetos: Contienen propiedades y mtodos
Nulo (Null): Su utilidad es saber si hemos iniciado o no una
variable.
-
8/12/2019 Introduccin JavaScritp
31/171
Bloque II: Elementos Bsicos Elementos bsicos Variables e identificadores Tipos de datos Operadores y expresiones
-
8/12/2019 Introduccin JavaScritp
32/171
-
8/12/2019 Introduccin JavaScritp
33/171
Unarios:Operador Descripcin
++x Incrementa x en una unidad y devuelve el valorx++ 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
Lgicos:Operador Descripcin
&& Y lgico|| O lgico! No lgico
-
8/12/2019 Introduccin JavaScritp
34/171
Comparacin:Operador Descripcin
== 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
-
8/12/2019 Introduccin JavaScritp
35/171
Resumen: Concatenacin: Se usa para unir cadenas de caracteres
Aritmticos: Se usa con datos numricos
Asignacin: Asigna un determinado valor a una variable
Comparacin: Compara dos valores
Lgicos: Se utiliza cuando es necesario unir dosexpresiones
-
8/12/2019 Introduccin JavaScritp
36/171
Orden de evaluacin de las expresiones:Prioridad Operador Operacin
1 ++,--,-,! Incremento, decremento, cambio de signo y negacin
2 *,/,% Multiplicacin, divisin, mdulo
3 +,- Suma, resta
4 ,= Mayor, menor, mayor o igual, menor o igual
5 ==, != Igual, distinto
6 && Conjuncin
7 || Inclusin
8 =,+=,-=,*=,/=,%= Asignacin, asignacin y suma, etc
-
8/12/2019 Introduccin JavaScritp
37/171
-
8/12/2019 Introduccin JavaScritp
38/171
Bloque I: IntroduccinBloque II: Elementos BsicosBloque III: Estructuras de controlBloque IV: FuncionesBloque V: ObjetosBloque VI: EventosBloque VII: Ejercicio final
-
8/12/2019 Introduccin JavaScritp
39/171
Bloque III: Estructuras de control If Switch While DoWhile For For in Arrays El objeto Array Ejemplo completo
-
8/12/2019 Introduccin JavaScritp
40/171
Bloque III: Estructuras de control If Switch While Do While For For in Arrays El objeto Array Ejemplo completo
-
8/12/2019 Introduccin JavaScritp
41/171
Simplificado: AlternativaAlternativa simple: Si cumple una condicin se ejecuta un cdigo
-
8/12/2019 Introduccin JavaScritp
42/171
Ejemplo de uso
-
8/12/2019 Introduccin JavaScritp
43/171
Alternativa Doble: Si cumple una condicin se ejecuta un cdigo, en
caso contrario, otro cdigo
-
8/12/2019 Introduccin JavaScritp
44/171
-
8/12/2019 Introduccin JavaScritp
45/171
Prueba de condicin (?): Forma compacta de condicin doble
Ejemplo de uso
-
8/12/2019 Introduccin JavaScritp
46/171
Bloque III: Estructuras de control If Switch While Do While For For in Arrays El objeto Array Ejemplo completo
-
8/12/2019 Introduccin JavaScritp
47/171
Es una alternativa ms compleja
-
8/12/2019 Introduccin JavaScritp
48/171
-
8/12/2019 Introduccin JavaScritp
49/171
Bloque III: Estructuras de control If Switch While Do While For For in Arrays El objeto Array Ejemplo completo
-
8/12/2019 Introduccin JavaScritp
50/171
Forma parte de las estructuras de control
-
8/12/2019 Introduccin JavaScritp
51/171
Ejemplo de uso
-
8/12/2019 Introduccin JavaScritp
52/171
Bloque III: Estructuras de control If Switch While Do While For For in Arrays El objeto Array Ejemplo completo
-
8/12/2019 Introduccin JavaScritp
53/171
Es parecido al While, pero primero se ejecutael bucle y luego se comprueba la condicin
-
8/12/2019 Introduccin JavaScritp
54/171
-
8/12/2019 Introduccin JavaScritp
55/171
Estructura repetitiva por excelencia
Variable interna quecontrola el bucle
Valor que toma la variablede control inicialmente
Condicin que determina sise sigue ejecutando el bucle
Expresin que variar el valorde la variable de control
-
8/12/2019 Introduccin JavaScritp
56/171
Ejemplo de uso
-
8/12/2019 Introduccin JavaScritp
57/171
Bloque III: Estructuras de control If Switch While Do While For For in Arrays
El objeto Array Ejemplo completo
-
8/12/2019 Introduccin JavaScritp
58/171
Simplificacin del bucle for, aplicado a arrays
Variable de control Es donde se encuentranlos elementos
-
8/12/2019 Introduccin JavaScritp
59/171
Ejemplo de uso
-
8/12/2019 Introduccin JavaScritp
60/171
Bloque III: Estructuras de control If Switch While Do While For For in Arrays
El objeto Array Ejemplo completo
-
8/12/2019 Introduccin JavaScritp
61/171
-
8/12/2019 Introduccin JavaScritp
62/171
Creacin de un array:
Manipulacin de un array:Se trabaja igual que si fuese una variableOperador asignacin
Visualizacin
Indicador que hacereferencia al array Nmero de elementosque contendr el array
-
8/12/2019 Introduccin JavaScritp
63/171
Se puede acceder mediante variables
Recorrido de un array:Se suele combinar con estructuras de control
-
8/12/2019 Introduccin JavaScritp
64/171
Bloque III: Estructuras de control If Switch While Do While For For in Arrays
El objeto Array Ejemplo completo
-
8/12/2019 Introduccin JavaScritp
65/171
Viene predefinido por el lenguaje Propiedades del objeto
Mtodos
length Nmero de elementos del array
concat() Une dos arrays y devuelve el resultado en unarray
join() Devuelve la cadena de texto que contiene launin de los elementos de un array
pop() Devuelve y borra el ltimo elemento
push() Devuelve y aade un elementoreverse() Refleja el contenidoshift() Devuelve y borra el primero elementoslice() Extrae una seccin del array y la devuelve como
una nuevo
-
8/12/2019 Introduccin JavaScritp
66/171
splice() Aade y/o elimina elementos
sort() Ordena los elementostoString() Devuelve la cadena que representaunshift() Aade uno o ms elementos al inicio y devuelve
el nmero de elementos actualizado
Ejemplo:
-
8/12/2019 Introduccin JavaScritp
67/171
Bloque III: Estructuras de control If Switch While Do While For For in Arrays
El objeto Array Ejemplo completo
-
8/12/2019 Introduccin JavaScritp
68/171
Ejemplo del uso de bucles y arrays
-
8/12/2019 Introduccin JavaScritp
69/171
Bloque I: IntroduccinBloque II: Elementos BsicosBloque III: Estructuras de controlBloque IV: FuncionesBloque V: ObjetosBloque VI: EventosBloque VII: Ejercicio final
-
8/12/2019 Introduccin JavaScritp
70/171
-
8/12/2019 Introduccin JavaScritp
71/171
Bloque IV: Funciones Qu es una funcin? Llamada a una funcin Argumentos
Cmo utilizar funciones? Funciones predefinidas Ejemplo global
-
8/12/2019 Introduccin JavaScritp
72/171
Permiten la ejecucin de una serie deinstrucciones cuando se produzca un eventoConjunto de instrucciones a las que se leasignan un nombre
Nombre que se leasigna la funcin
Parmetros queacepta la funcin
Valor que devolvemos,es opcional
Cdigo de la funcin
-
8/12/2019 Introduccin JavaScritp
73/171
Las funciones se declaran en cualquier partede la pgina HTML
Deben de estar entre etiquetas
Normalmente se define dentro de la cabecera
-
8/12/2019 Introduccin JavaScritp
74/171
Bloque IV: Funciones Qu es una funcin? Llamada a una funcin Argumentos
Cmo utilizar funciones? Funciones predefinidas Ejemplo global
-
8/12/2019 Introduccin JavaScritp
75/171
Las funciones se pueden llamar desdecualquier parte del cdigo
Si una funcin retorna un valor, se debe deasignar a una variable
-
8/12/2019 Introduccin JavaScritp
76/171
Funciones recursivas Es aquella que se llama a s misma
Clculo del factorial de un nmero de forma recursiva
-
8/12/2019 Introduccin JavaScritp
77/171
Bloque IV: Funciones Qu es una funcin? Llamada a una funcin Argumentos
Cmo utilizar funciones? Funciones predefinidas Ejemplo global
-
8/12/2019 Introduccin JavaScritp
78/171
Variables localesReciben unos valores diferentes dependiendode la invocacinSe usan para interactuar con la funcin desdeel programa
-
8/12/2019 Introduccin JavaScritp
79/171
-
8/12/2019 Introduccin JavaScritp
80/171
Bloque IV: Funciones Qu es una funcin? Llamada a una funcin Argumentos
Cmo utilizar funciones? Funciones predefinidas Ejemplo global
-
8/12/2019 Introduccin JavaScritp
81/171
Cosas a tener en cuenta: Entre etiquetas La clusula return facilita la devolucin de
resultados por parte de las funciones
Los parmetros que no se le pasen quedan a valornull Puede ser conveniente comprobar el nmero de
parmetros
-
8/12/2019 Introduccin JavaScritp
82/171
mbito de las variables Variables locales:
Se declaran dentro de la funcinSolo son accesibles desde ella
Variables globales:Se declaran fuera de la funcinSon accesibles desde todo el programa
-
8/12/2019 Introduccin JavaScritp
83/171
Bloque IV: Funciones Qu es una funcin? Llamada a una funcin Argumentos
Cmo utilizar funciones? Funciones predefinidas Ejemplo global
-
8/12/2019 Introduccin JavaScritp
84/171
Funciones internar al lenguaje. parseFloat(cadena) parseInt(cadena, base) toString(argumento)
typeof(argumento) escape(cadena) unescape(cadena) isNaN(argumento)
eval(expresion)
-
8/12/2019 Introduccin JavaScritp
85/171
Bloque IV: Funciones Qu es una funcin? Llamada a una funcin Argumentos
Cmo utilizar funciones? Funciones predefinidas Ejemplo global
-
8/12/2019 Introduccin JavaScritp
86/171
Ejemplo del uso de funciones con loaprendido anteriormente
-
8/12/2019 Introduccin JavaScritp
87/171
Bloque I: IntroduccinBloque II: Elementos BsicosBloque III: Estructuras de controlBloque IV: FuncionesBloque V: ObjetosBloque VI: EventosBloque VII: Ejercicio final
-
8/12/2019 Introduccin JavaScritp
88/171
Bloque V: Objetos Definicin El objeto navegador El objeto documento
El objeto string El objeto math El objeto date Objetos personalizados
-
8/12/2019 Introduccin JavaScritp
89/171
Bloque V: Objetos Definicin El objeto navegador El objeto documento
El objeto string El objeto math El objeto date Objetos personalizados
-
8/12/2019 Introduccin JavaScritp
90/171
Objeto es un concepto o vista abstracta deuna entidad Posee caractersticas que lo definen y propiedades Realizan muchas acciones
Tipos de objetos: Objetos navegador Objetos predefinidos Objetos creados por el usuario
-
8/12/2019 Introduccin JavaScritp
91/171
Formas de hacer referencia: Nombre:
Posicin:
Objeto actual:
-
8/12/2019 Introduccin JavaScritp
92/171
Bloque V: Objetos Definicin El objeto navegador El objeto documento
El objeto string El objeto math El objeto date Objetos personalizados
-
8/12/2019 Introduccin JavaScritp
93/171
-
8/12/2019 Introduccin JavaScritp
94/171
Objeto window Representa la ventana del navegador
Propiedades Mtodos
closed, defalutStattus,
frames, history, length,location, name, parent,opener, self, status, top
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()
-
8/12/2019 Introduccin JavaScritp
95/171
Objeto window Representa la ventana del navegador
Propiedades Mtodos
closed, defalutStattus,
frames, history, length,location, name, parent,opener, self, status, top
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()
-
8/12/2019 Introduccin JavaScritp
96/171
Objeto window Representa la ventana del navegador
Propiedades Mtodos
closed, defalutStattus,
frames, history, length,location, name, parent,opener, self, status, top
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()
-
8/12/2019 Introduccin JavaScritp
97/171
Objeto window Representa la ventana del navegador
Propiedades Mtodos
closed, defalutStattus,
frames, history, length,location, name, parent,opener, self, status, top
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()
Open URL, nombre, caractersticas): Abre la url que le pasamos como primerparmetro en la ventana cuyo nombre se indica en el segundo parmetro. Si noexiste esa ventana, abre otra nueva con las caractersticas que se le pasen porparmetro:
Caractersticas Valores Nos indica
tollbar Yes, no, 1, 0 Si tendr barra de herramientas
Location Yes, no, 1, 0 Si tendr campo de localizacin
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 mens
Scrollbars Yes, no, 1,0 Si tendr barra de desplazamiento
Resizable Yes, no, 1, 0 Si se podr cambiar de tamao con elratn
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
-
8/12/2019 Introduccin JavaScritp
98/171
Objeto window Representa la ventana del navegador
Propiedades Mtodos
closed, defalutStattus,
frames, history, length,location, name, parent,opener, self, status, top
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()
-
8/12/2019 Introduccin JavaScritp
99/171
Objeto window
-
8/12/2019 Introduccin JavaScritp
100/171
Objeto frame Se comporta igual que el objeto window
Propiedades Mtodos
defalutStattus
windowframesselfStatustop
alert(), confirm(mensaje),
clearInterval(),setInterval(),clearTimeout(),setTimeout(), focus(),blur(), moveBy(x,y),moveTo(x,y), open(),close(), prompt(),scroll(x,y)
-
8/12/2019 Introduccin JavaScritp
101/171
Objeto frame
-
8/12/2019 Introduccin JavaScritp
102/171
Objeto location Informacin sobre la url actual
Propiedades Mtodos
hash
hosthostnamehrefpathnameportprotocolsearch
reload()
replace(cadenaURL)
-
8/12/2019 Introduccin JavaScritp
103/171
Objeto location Informacin sobre la url actual
Propiedades Mtodos
hash
hosthostnamehrefpathnameportprotocolsearch
reload()
replace(cadenaURL)
-
8/12/2019 Introduccin JavaScritp
104/171
-
8/12/2019 Introduccin JavaScritp
105/171
-
8/12/2019 Introduccin JavaScritp
106/171
Objeto history Informacin sobre las url vistadas
Propiedades Mtodos
length back()
forward()go(url)
-
8/12/2019 Introduccin JavaScritp
107/171
Propiedades Mtodos
length back()
forward()go(url)
Objeto history Informacin sobre las url vistadas
-
8/12/2019 Introduccin JavaScritp
108/171
-
8/12/2019 Introduccin JavaScritp
109/171
Objeto history
-
8/12/2019 Introduccin JavaScritp
110/171
Objeto navigator No tiene relacin con el resto de los objetos Informa sobre el navegador
Propiedades Mtodos
appCodeNameappNameappVersionlenguagemimeTypesplatformpluginsuserAgent
javaEnabled()
-
8/12/2019 Introduccin JavaScritp
111/171
Objeto navigator No tiene relacin con el resto de los objetos Informa sobre el navegador
Propiedades Mtodos
appCodeNameappNameappVersionlenguagemimeTypesplatformpluginsuserAgent
javaEnabled()
-
8/12/2019 Introduccin JavaScritp
112/171
Objeto navigator
-
8/12/2019 Introduccin JavaScritp
113/171
Bloque V: Objetos Definicin El objeto navegador El objeto documento
El objeto string El objeto math El objeto date Objetos personalizados
-
8/12/2019 Introduccin JavaScritp
114/171
-
8/12/2019 Introduccin JavaScritp
115/171
-
8/12/2019 Introduccin JavaScritp
116/171
Abarca gran parte del modelo de objetosPropiedades MtodosalinkColoranchorsapplets
bgColorCookiefgColorformsImageslastModified
linkColorlinkslocationreferrertitlevlinkColor
clear()open()close()
write()writeln()
-
8/12/2019 Introduccin JavaScritp
117/171
Abarca gran parte del modelo de objetosPropiedades MtodosalinkColoranchorsapplets
bgColorCookiefgColorformsImageslastModified
linkColorlinkslocationreferrertitlevlinkColor
clear()open()close()
write()writeln()
-
8/12/2019 Introduccin JavaScritp
118/171
Los objetos link y Anchor El objeto link engloba las propiedades de losenlaces externos, y el anchor la de los enlaceslocales
Propiedades MtodosLength
-
8/12/2019 Introduccin JavaScritp
119/171
Los objetos link y Anchor El objeto link engloba las propiedades de losenlaces externos, y el anchor la de los enlaceslocales
Propiedades MtodosLength
-
8/12/2019 Introduccin JavaScritp
120/171
El objeto Image Permite manipular imgenesPropiedades Mtodos
bordercompleteheighthspacelowsrcnamesrc
vspacewidth
-
8/12/2019 Introduccin JavaScritp
121/171
-
8/12/2019 Introduccin JavaScritp
122/171
El objeto Form Permite manipular formularioPropiedades Mtodos
actionelemntsencodinglengthmethodtarget
reset()submit()
-
8/12/2019 Introduccin JavaScritp
123/171
El objeto Form Permite manipular formularioPropiedades Mtodos
actionelemntsencodinglengthmethodtarget
reset()submit()
-
8/12/2019 Introduccin JavaScritp
124/171
El objeto Form Permite manipular formularioPropiedades Mtodos
actionelemntsencodinglengthmethodtarget
reset()submit()
-
8/12/2019 Introduccin JavaScritp
125/171
El objeto Form Casi la totalidad de etiquetas HTML se puedendefinir como elementos del formulario
Etiqueta HTML Objeto JavaScript
texttextareapasswordbuttonsubmitresetcheckboxradioselecthidden
-
8/12/2019 Introduccin JavaScritp
126/171
El objeto Form Objetos text, textarea, passwordObtener el texto introducido por el usuario
Propiedades Mtodos
defaultValuenamevalue
blur()focus()select()
-
8/12/2019 Introduccin JavaScritp
127/171
-
8/12/2019 Introduccin JavaScritp
128/171
El objeto Form Objetos text, textarea, passwordObtener el texto introducido por el usuario
Propiedades Mtodos
defaultValuenamevalue
blur()focus()select()
-
8/12/2019 Introduccin JavaScritp
129/171
El objeto Form Objetos button, reset, submitBotones
Propiedades Mtodos
namevalue click()
-
8/12/2019 Introduccin JavaScritp
130/171
El objeto Form Objetos button, reset, submitBotones
Propiedades Mtodos
namevalue click()
-
8/12/2019 Introduccin JavaScritp
131/171
El objeto Form Objetos button, reset, submitBotones
Propiedades Mtodos
namevalue click()
-
8/12/2019 Introduccin JavaScritp
132/171
El objeto Form Objetos checkboxCasillas de verificacin
Propiedades Mtodos
checkeddefaultCheckednamevalue
click()
-
8/12/2019 Introduccin JavaScritp
133/171
El objeto Form Objetos checkboxCasillas de verificacin
Propiedades Mtodos
checkeddefaultCheckednamevalue
click()
-
8/12/2019 Introduccin JavaScritp
134/171
El objeto Form Objetos checkboxCasillas de verificacin
Propiedades Mtodos
checkeddefaultCheckednamevalue
click()
-
8/12/2019 Introduccin JavaScritp
135/171
El objeto Form Objetos radioElegir una posibilidad en una lista
Propiedades Mtodos
checkeddefaultCheckedlengthnamevalue
click()
-
8/12/2019 Introduccin JavaScritp
136/171
-
8/12/2019 Introduccin JavaScritp
137/171
El objeto Form Objetos radioElegir una posibilidad en una lista
Propiedades Mtodos
checkeddefaultCheckedlengthnamevalue
click()
-
8/12/2019 Introduccin JavaScritp
138/171
El objeto Form Objetos selectRepresenta una lista de opciones dentro de unformulario
Propiedades Mtodos
LengthNameOptionsselectedIndexOptions[n].indexOptions[n].selectedOptions[n].textOptions[n].value
-
8/12/2019 Introduccin JavaScritp
139/171
El objeto Form Objetos selectRepresenta una lista de opciones dentro de unformulario
Propiedades Mtodos
LengthNameOptionsselectedIndexOptions[n].indexOptions[n].selectedOptions[n].textOptions[n].value
-
8/12/2019 Introduccin JavaScritp
140/171
El objeto Form Objetos hiddenCadenas de caracteres no visibles
Propiedades Mtodosnamevalue
-
8/12/2019 Introduccin JavaScritp
141/171
El objeto Form Objetos hiddenCadenas de caracteres no visibles
Propiedades Mtodosnamevalue
-
8/12/2019 Introduccin JavaScritp
142/171
El objeto Document
-
8/12/2019 Introduccin JavaScritp
143/171
-
8/12/2019 Introduccin JavaScritp
144/171
-
8/12/2019 Introduccin JavaScritp
145/171
Objeto propio de JavaScriptNos permite manipular cadenas de caracteresPropiedades: length prototypeMtodos:
big() blink() bold() charAt(indice) concat(cadena) fixed() fontcolor(color) fontsize(tamao) indexOf(cadenaBuscada,indice)
-
8/12/2019 Introduccin JavaScritp
146/171
italics() lastIndexOf(cadenaBuscada, indice) link(url) small() split(carcter) strike() slice(inicio, fin) sub() substr(numeroCaracteres, inicio) substring(inicio, fin) sup() toLowerCase() toUpperCase()
-
8/12/2019 Introduccin JavaScritp
147/171
Ejemplo
-
8/12/2019 Introduccin JavaScritp
148/171
Bloque V: Objetos Definicin El objeto navegador El objeto documento El objeto string El objeto math El objeto date Objetos personalizados
-
8/12/2019 Introduccin JavaScritp
149/171
Nos permite realizar clculos en el scriptPropiedades: (constantes de inters) Math.E Math.LN2
Math.LN10 Math.LOG2E Math.LOG10E Math.PI Math.SQRT1_2 Math.SQRT2
-
8/12/2019 Introduccin JavaScritp
150/171
Mtodos: Math.sqrt(N) Math.pow(N1,N2) Math.abs(N) Math.round(N) Math.ceil(N) Math.floor(N) Math.random() Math.max(N1,N2) Math.min(N1,N2)
-
8/12/2019 Introduccin JavaScritp
151/171
Ejemplo
-
8/12/2019 Introduccin JavaScritp
152/171
Bloque V: Objetos Definicin El objeto navegador El objeto documento El objeto string El objeto math El objeto date Objetos personalizados
-
8/12/2019 Introduccin JavaScritp
153/171
Nos permite manipular fechas y horasCreacin:
Mtodos: objetoFecha.getTime() objetoFecha.getDate() objetoFecha.getDay() objetoFecha.getHours()
objetoFecha.getMonth() objetoFecha.getSeconds()
-
8/12/2019 Introduccin JavaScritp
154/171
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(ao) objetoFecha.tcGMTString() objetoFecha.tcLocaleString()
-
8/12/2019 Introduccin JavaScritp
155/171
Ejemplo
-
8/12/2019 Introduccin JavaScritp
156/171
Bloque V: Objetos Definicin El objeto navegador El objeto documento El objeto string El objeto math El objeto date Objetos personalizados
-
8/12/2019 Introduccin JavaScritp
157/171
JavaScript nos permite crear nuestros propiosobjetos
-
8/12/2019 Introduccin JavaScritp
158/171
Los mtodos se declaran fuera de la funcin
-
8/12/2019 Introduccin JavaScritp
159/171
Bloque I: IntroduccinBloque II: Elementos BsicosBloque III: Estructuras de controlBloque IV: Funciones
Bloque V: ObjetosBloque VI: EventosBloque VII: Ejercicio final
-
8/12/2019 Introduccin JavaScritp
160/171
Bloque VI: Eventos Definicin Eventos ms comunes Ejemplo de uso
-
8/12/2019 Introduccin JavaScritp
161/171
Bloque VI: Eventos Definicin Eventos ms comunes Ejemplo de uso
-
8/12/2019 Introduccin JavaScritp
162/171
Son las acciones que el usuario realiza alvisitar una web.
Elemento Accin Evento Manejador
Botn Clic Click onClick
Casilla Clic Click onClick
Enlace Clic Click onClickSituar el puntero MouseOver onMouseOver
Botn opcion Clic Click onClick
Seleccin Tabulador/Clic Focus onFocusTabulador/Clic para cambio Blur onBlurDeseleccin Change onChange
Campo texto Tabulador/Clic Focus onFocusTabulador/Clic para cambio Blur onBlur
Deseleccin Change onChangeSeleccin texto Select onSelect
-
8/12/2019 Introduccin JavaScritp
163/171
-
8/12/2019 Introduccin JavaScritp
164/171
Eventos de ratn:Evento Causa
onmousedown Se ha presionado el ratn
onmousemove Se ha movido el ratn
onmouseover Se pasa el puntero por unadeterminada zona
onmouseout El puntero del ratn sale de unazona
onmouseup Se ha levantado el botnizquierdo del ratn
onclick Se pulsa el botn izquierdo
ondbloclick Se ha realizado una doblepulsacin
onselect Se realiza una seleccin
-
8/12/2019 Introduccin JavaScritp
165/171
Eventos de teclado:
Eventos de enfoque:
Evento Causaonkeydown bajada de tecla correspondiente
a una pulsacinonkeypress El usuario pulsa una tecla
onkeyup Subida de tecla correspondientea una pulsacin
Evento Causaonblur El objeto pierde el foco de
entradaonfocus El objeto recibe el foco
-
8/12/2019 Introduccin JavaScritp
166/171
Eventos de formulario:
Eventos de carga de pgina:
Evento Causaonreset El usuario inicializa un
formularioonsubmit El formulario est a punto de
enviarse
Evento Causaonload El navegador ha cargado la
pginaonunload El objeto se ha descargado
-
8/12/2019 Introduccin JavaScritp
167/171
Otros eventos:Evento Causa
onAbort El usuario cancela la carga deuna imagen
onChange El contenido de un objeto oseleccin ha cambiado
onDragDrop Se dispara continuamente en elobjeto fuente durante laoperacin de arrastre
onError Se produce un error en la cargade un objeto
onMove Se mueve la ventana
onResize Se redimensiona la ventana
-
8/12/2019 Introduccin JavaScritp
168/171
-
8/12/2019 Introduccin JavaScritp
169/171
-
8/12/2019 Introduccin JavaScritp
170/171
Bloque I: IntroduccinBloque II: Elementos BsicosBloque III: Estructuras de controlBloque IV: Funciones
Bloque V: ObjetosBloque VI: EventosBloque VII: Ejercicio final
-
8/12/2019 Introduccin JavaScritp
171/171