Introducción JavaScritp

8/12/2019 Introduccin JavaScritp

1/171


2/171

Bloque I: IntroduccinBloque II: Elementos BsicosBloque III: Estructuras de control

Bloque IV: FuncionesBloque V: ObjetosBloque VI: EventosBloque VII: Ejercicio final


3/171




4/171

Bloque I: Introduccin Introduccin a JavaScript JavaScript y HTML Elementos de un programa JavaScript Entrada y salida


5/171



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 )


7/171



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


9/171

Se pueden incluir mediante un programa .js

Vamos a cargar el cdigo JavaScript de un

programa ya creado.


10/171

Ejemplo de programa en JavaScript


11/171



12/171

Comentarios:

Comentario de una lnea Comentario varia lneas


13/171

Tipo de instrucciones:Declaracin

Inicializacin

Estructurasde control

Entrada ysalida


14/171



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


16/171

Document.write()


17/171

Alert()


18/171

Prompt()


19/171




20/171


21/171

Bloque II: Elementos Bsicos Elementos bsicos Variables e identificadores Tipos de datos Operadores y expresiones


22/171


23/171


24/171



25/171

Creacin de la variable: Palabra reservada var No iniciarse por nmero No coincidir con palabras reservadas


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


27/171

Consulta o utilizacin de un valor Se puede hacer referencia al contenido

Incremento de un contador

Concatenacin de cadenas

Operacin con variables


28/171



29/171

Nmeros: Cualquier formato de los habituales

Formato decimal

Formato hexadecimal

Formato octal

Cadenas: Cadenas de caracteres.


30/171

Booleanos: Valores lgicos

Objetos: Contienen propiedades y mtodos

Nulo (Null): Su utilidad es saber si hemos iniciado o no una

variable.


31/171



32/171


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


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


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


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


37/171


38/171

Bloque I: IntroduccinBloque II: Elementos BsicosBloque III: Estructuras de controlBloque IV: FuncionesBloque V: ObjetosBloque VI: EventosBloque VII: Ejercicio final


39/171

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


40/171

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


41/171

Simplificado: AlternativaAlternativa simple: Si cumple una condicin se ejecuta un cdigo


42/171

Ejemplo de uso


43/171

Alternativa Doble: Si cumple una condicin se ejecuta un cdigo, en

caso contrario, otro cdigo


44/171


45/171

Prueba de condicin (?): Forma compacta de condicin doble

Ejemplo de uso


46/171



47/171

Es una alternativa ms compleja


48/171


49/171



50/171

Forma parte de las estructuras de control


51/171

Ejemplo de uso


52/171



53/171

Es parecido al While, pero primero se ejecutael bucle y luego se comprueba la condicin


54/171


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


56/171

Ejemplo de uso


57/171

Bloque III: Estructuras de control If Switch While Do While For For in Arrays

El objeto Array Ejemplo completo


58/171

Simplificacin del bucle for, aplicado a arrays

Variable de control Es donde se encuentranlos elementos


59/171

Ejemplo de uso


60/171




61/171


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


63/171

Se puede acceder mediante variables

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


64/171




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


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:


67/171




68/171

Ejemplo del uso de bucles y arrays


69/171



70/171


71/171

Bloque IV: Funciones Qu es una funcin? Llamada a una funcin Argumentos

Cmo utilizar funciones? Funciones predefinidas Ejemplo global


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


73/171

Las funciones se declaran en cualquier partede la pgina HTML

Deben de estar entre etiquetas

Normalmente se define dentro de la cabecera


74/171




75/171

Las funciones se pueden llamar desdecualquier parte del cdigo

Si una funcin retorna un valor, se debe deasignar a una variable


76/171

Funciones recursivas Es aquella que se llama a s misma

Clculo del factorial de un nmero de forma recursiva


77/171




78/171

Variables localesReciben unos valores diferentes dependiendode la invocacinSe usan para interactuar con la funcin desdeel programa


79/171


80/171




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


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


83/171




84/171

Funciones internar al lenguaje. parseFloat(cadena) parseInt(cadena, base) toString(argumento)

typeof(argumento) escape(cadena) unescape(cadena) isNaN(argumento)

eval(expresion)


85/171




86/171

Ejemplo del uso de funciones con loaprendido anteriormente


87/171



88/171

Bloque V: Objetos Definicin El objeto navegador El objeto documento

El objeto string El objeto math El objeto date Objetos personalizados


89/171




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


91/171

Formas de hacer referencia: Nombre:

Posicin:

Objeto actual:


92/171




93/171


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()


95/171


Propiedades Mtodos






96/171


Propiedades Mtodos






97/171


Propiedades Mtodos





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


98/171


Propiedades Mtodos






99/171

Objeto window


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)


101/171

Objeto frame


102/171

Objeto location Informacin sobre la url actual

Propiedades Mtodos

hash

hosthostnamehrefpathnameportprotocolsearch

reload()

replace(cadenaURL)


103/171

Objeto location Informacin sobre la url actual

Propiedades Mtodos

hash

hosthostnamehrefpathnameportprotocolsearch

reload()

replace(cadenaURL)


104/171


105/171


106/171

Objeto history Informacin sobre las url vistadas

Propiedades Mtodos

length back()

forward()go(url)


107/171

Propiedades Mtodos

length back()

forward()go(url)

Objeto history Informacin sobre las url vistadas


108/171


109/171

Objeto history


110/171

Objeto navigator No tiene relacin con el resto de los objetos Informa sobre el navegador

Propiedades Mtodos

appCodeNameappNameappVersionlenguagemimeTypesplatformpluginsuserAgent

javaEnabled()


111/171

Objeto navigator No tiene relacin con el resto de los objetos Informa sobre el navegador

Propiedades Mtodos

appCodeNameappNameappVersionlenguagemimeTypesplatformpluginsuserAgent

javaEnabled()


112/171

Objeto navigator


113/171




114/171


115/171


116/171

Abarca gran parte del modelo de objetosPropiedades MtodosalinkColoranchorsapplets

bgColorCookiefgColorformsImageslastModified

linkColorlinkslocationreferrertitlevlinkColor

clear()open()close()

write()writeln()


117/171

Abarca gran parte del modelo de objetosPropiedades MtodosalinkColoranchorsapplets

bgColorCookiefgColorformsImageslastModified

linkColorlinkslocationreferrertitlevlinkColor

clear()open()close()

write()writeln()


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


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


120/171

El objeto Image Permite manipular imgenesPropiedades Mtodos

bordercompleteheighthspacelowsrcnamesrc

vspacewidth


121/171


122/171

El objeto Form Permite manipular formularioPropiedades Mtodos

actionelemntsencodinglengthmethodtarget

reset()submit()


123/171



reset()submit()


124/171



reset()submit()


125/171

El objeto Form Casi la totalidad de etiquetas HTML se puedendefinir como elementos del formulario

Etiqueta HTML Objeto JavaScript

texttextareapasswordbuttonsubmitresetcheckboxradioselecthidden


126/171

El objeto Form Objetos text, textarea, passwordObtener el texto introducido por el usuario

Propiedades Mtodos

defaultValuenamevalue

blur()focus()select()


127/171


128/171

El objeto Form Objetos text, textarea, passwordObtener el texto introducido por el usuario

Propiedades Mtodos

defaultValuenamevalue

blur()focus()select()


129/171

El objeto Form Objetos button, reset, submitBotones

Propiedades Mtodos

namevalue click()


130/171


Propiedades Mtodos

namevalue click()


131/171


Propiedades Mtodos

namevalue click()


132/171

El objeto Form Objetos checkboxCasillas de verificacin

Propiedades Mtodos

checkeddefaultCheckednamevalue

click()


133/171


Propiedades Mtodos


click()


134/171


Propiedades Mtodos


click()


135/171

El objeto Form Objetos radioElegir una posibilidad en una lista

Propiedades Mtodos

checkeddefaultCheckedlengthnamevalue

click()


136/171


137/171

El objeto Form Objetos radioElegir una posibilidad en una lista

Propiedades Mtodos

checkeddefaultCheckedlengthnamevalue

click()


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


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


140/171

El objeto Form Objetos hiddenCadenas de caracteres no visibles

Propiedades Mtodosnamevalue


141/171

El objeto Form Objetos hiddenCadenas de caracteres no visibles

Propiedades Mtodosnamevalue


142/171

El objeto Document


143/171


144/171


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)


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()


147/171

Ejemplo


148/171

Bloque V: Objetos Definicin El objeto navegador El objeto documento El objeto string El objeto math El objeto date Objetos personalizados


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


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)


151/171

Ejemplo


152/171



153/171

Nos permite manipular fechas y horasCreacin:

Mtodos: objetoFecha.getTime() objetoFecha.getDate() objetoFecha.getDay() objetoFecha.getHours()

objetoFecha.getMonth() objetoFecha.getSeconds()


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()


155/171

Ejemplo


156/171



157/171

JavaScript nos permite crear nuestros propiosobjetos


158/171

Los mtodos se declaran fuera de la funcin


159/171

Bloque I: IntroduccinBloque II: Elementos BsicosBloque III: Estructuras de controlBloque IV: Funciones

Bloque V: ObjetosBloque VI: EventosBloque VII: Ejercicio final


160/171

Bloque VI: Eventos Definicin Eventos ms comunes Ejemplo de uso


161/171

Bloque VI: Eventos Definicin Eventos ms comunes Ejemplo de uso


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


163/171


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


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


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


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


168/171


169/171


170/171

Bloque I: IntroduccinBloque II: Elementos BsicosBloque III: Estructuras de controlBloque IV: Funciones

Bloque V: ObjetosBloque VI: EventosBloque VII: Ejercicio final


171/171

Introducción JavaScritp

Documents

Transcript of Introducción JavaScritp