Introduccion JavaScritp

Bloque !! Bloque !! Bloque !! Bloque !! Bloque !! Bloque !!
Bloque
!!
I: Introduccin II: Elementos Bsicos III: Estructuras de control IV: Funciones V: Objetos VI: Eventos VII: Ejercicio final
Bloque !! Bloque !! Bloque !! Bloque !! Bloque !! Bloque !! Bloque

!!
!!
Bloque I: Introduccin
!! Introduccin a JavaScript !! JavaScript y HTML !! Elementos de un programa JavaScript !! Entrada y salida
!!
!!
!! !!
!!
Lenguaje de programacin basado en scripts Crear ventanas emergentes, mens interactivos, eventos, DHTML, AJAX, DOM
Caractersticas: !! Lenguaje de programacin interpretado !! Se interpreta en el navegador !! Lenguaje orientado a eventos !! Lenguaje basado en objetos !! Declarar variables Programa -> cualquier editor de texto, Dreamweaver.
Qu es y para qu sirve?
!!
!!
Los programas JavaScript se encuentran dentro de las pginas HTML !! Entre las etiquetas<script> y </script>
!!
Etiqueta de inicio del programa JavaScript
Etiqueta de final del programa JavaScript
!!
Se pueden incluir mediante un programa .js

Vamos a cargar el cdigo JavaScript de un programa ya creado.
!!
Ejemplo de programa en JavaScript
!!
!!
Comentarios:
Comentario de una lnea
Comentario varia lneas
!!
Tipo de instrucciones:
Declaracin Inicializacin Estructuras de control Entrada y salida
!!
Nos permiten visualizar y recibir informacin !! Se usan con cadenas de caracteres !! Algunos caracteres importantes son:
!!
Carcter \n \t \r \b Significado Nueva lnea Tabulador Retorno de carro Retroceso de un espacio
!!
Document.write()
!!
Alert()
!!
Prompt()

!!
!!
Bloque II: Elementos Bsicos

!! Elementos bsicos !! Variables e identificadores !! Tipos de datos !! Operadores y expresiones
!!

!!
Variables: Operadores: Expresiones:
!!
!!
!!
Sentencias:
!!
Funciones:
!!

!!
Creacin de la variable:
!! Palabra reservada var !! No iniciarse por nmero !! No coincidir con palabras reservadas
!!!!!!!!! !!!!!!!!!
!!
Almacenamiento informacin en la variable:
!! Se puede almacenar cualquier tipo de informacin !! Se usa el operador de asignacin
!! Si introducimos informacin en una variable no inicializada, se inicializa automticamente, pero no es una prctica aconsejada
!!!!!!!!! !!!!!!!!!
!!
Consulta o utilizacin de un valor
!! Se puede hacer referencia al contenido

Incremento de un contador
Concatenacin de cadenas
Operacin con variables
!!

!!
Nmeros:
!! Cualquier formato de los habituales

Formato decimal Formato hexadecimal Formato octal
!!
Cadenas:
!! Cadenas de caracteres.
!!
Booleanos:
!! Valores lgicos
!!
Objetos:
!!
Nulo (Null):
!! Contienen propiedades y mtodos !! Su utilidad es saber si hemos iniciado o no una variable.
!!

!! Binarios: Operador
= += -=
Descripcin
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
*=
/=
%=
!!
++x x++ -=
Unarios:
Operador Descripcin
Incrementa x en una unidad y devuelve el valor 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 Devuelve x negado
-x
!!
&& || !
Lgicos:
Operador
Y lgico O lgico No lgico
Descripcin
!!
== != >
Operador
Comparacin:
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
<=
Devuelve verdadero si el primero operando es menor o igual que el segundo
!!
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 dos expresiones
!!
1 2 3 4 5 6 7 8
Orden de evaluacin de las expresiones:

Operador ++,--,-,! *,/,% +,<,>,<=,>= ==, != && || =,+=,-=,*=,/=,%= Operacin Incremento, decremento, cambio de signo y negacin Multiplicacin, divisin, mdulo Suma, resta Mayor, menor, mayor o igual, menor o igual Igual, distinto Conjuncin Inclusin Asignacin, asignacin y suma, etc
Prioridad
!!
Orden de evaluacin de las expresiones:

Calcula primero la divisin 1/numero2 y luego le suma numero1 Realiza primero la divisin y luego incrementa el valor de la variable numero2 Compara el valor de la variable numero2 con a numero 1 incrementada en 1

!!
!!
Bloque III: Estructuras de control

!! If !! Switch !! While !! DoWhile !! For !! For in !! Arrays !! El objeto Array !! Ejemplo completo
!!

Simplificado: Alternativa !! Alternativa simple:

!!
!! Si cumple una condicin se ejecuta un cdigo
!! Ejemplo de uso
!!
Alternativa Doble:
!! Si cumple una condicin se ejecuta un cdigo, en caso contrario, otro cdigo
!! Ejemplo de uso
!!
Prueba de condicin (?):
!! Forma compacta de condicin doble !! Ejemplo de uso
!!

!!
Es una alternativa ms compleja
!!
Ejemplo de uso
!!

!!
Forma parte de las estructuras de control
!!
Ejemplo de uso
!!

!!
Es parecido al While, pero primero se ejecuta el bucle y luego se comprueba la condicin
!!
Ejemplo de uso
!!
Estructura repetitiva por excelencia
Variable interna que controla el bucle
Condicin que determina si se sigue ejecutando el bucle
Valor que toma la variable de control inicialmente
Expresin que variar el valor de la variable de control
!!
Ejemplo de uso
!!

!!
Simplificacin del bucle for, aplicado a arrays
Variable de control
Es donde se encuentran los elementos
!!
Ejemplo de uso
!!

!!
Estructura que permite guardar ms de un elemento
!!
Simplifica muchos aspectos a la hora de programar
!! Creacin de un array:
Indicador que hace referencia al array
Nmero de elementos que contendr el array
!! Manipulacin de un array:
!! Se trabaja igual que si fuese una variable !! Operador asignacin !! Visualizacin
!! Se puede acceder mediante variables
!! Recorrido de un array:
!! Se suele combinar con estructuras de control
!!

!!
Viene predefinido por el lenguaje

!! Propiedades del objeto
length Nmero de elementos del array
!! Mtodos
concat() join() pop() push() reverse() shift() slice()
Une dos arrays y devuelve el resultado en un array Devuelve la cadena de texto que contiene la unin de los elementos de un array Devuelve y borra el ltimo elemento Devuelve y aade un elemento Refleja el contenido Devuelve y borra el primero elemento Extrae una seccin del array y la devuelve como una nuevo
splice() sort() toString() unshift()
Aade y/o elimina elementos Ordena los elementos Devuelve la cadena que representa Aade uno o ms elementos al inicio y devuelve el nmero de elementos actualizado
!!
Ejemplo:
!!

!!
Ejemplo del uso de bucles y arrays

!!
!!
Bloque IV: Funciones
!! Qu es una funcin? !! Llamada a una funcin !! Argumentos !! Cmo utilizar funciones? !! Funciones predefinidas !! Ejemplo global
!!
Permiten la ejecucin de una serie de instrucciones cuando se produzca un evento !! Conjunto de instrucciones a las que se le asignan un nombre
!!
Nombre que se le asigna la funcin
Parmetros que acepta la funcin
Cdigo de la funcin
Valor que devolvemos, es opcional
!!
Las funciones se declaran en cualquier parte de la pgina HTML

!! Deben de estar entre etiquetas <SCRIPT> </ SCRIPT> !! Normalmente se define dentro de la cabecera
!!
!!
Las funciones se pueden llamar desde cualquier parte del cdigo
!!
Si una funcin retorna un valor, se debe de asignar a una variable
!!
Funciones recursivas
!! Es aquella que se llama a s misma
Clculo del factorial de un nmero de forma recursiva
!!
Variables locales !! Reciben unos valores diferentes dependiendo de la invocacin !! Se usan para interactuar con la funcin desde el programa
!!
!!
!!
Cosas a tener en cuenta:
!! Entre etiquetas <SCRIPT> </SCRIPT> !! La clusula return facilita la devolucin de resultados por parte de las funciones !! Los parmetros que no se le pasen quedan a valor null !! Puede ser conveniente comprobar el nmero de parmetros
!!
mbito de las variables

!! Variables locales:
!! Se declaran dentro de la funcin !! Solo son accesibles desde ella !! Se declaran fuera de la funcin !! Son accesibles desde todo el programa
!! Variables globales:
!!
!!
Funciones internar al lenguaje.

!! parseFloat(cadena) !! parseInt(cadena, base) !! toString(argumento) !! typeof(argumento) !! escape(cadena) !! unescape(cadena) !! isNaN(argumento) !! eval(expresion)
!!
!!
Ejemplo del uso de funciones con lo aprendido anteriormente

!!
!!
Bloque V: Objetos
!! Definicin !! El objeto navegador !! El objeto documento !! El objeto string !! El objeto math !! El objeto date !! Objetos personalizados
!!
Bloque V: Objetos
!!
Objeto es un concepto o vista abstracta de una entidad Tipos de objetos:
!! Posee caractersticas que lo definen y propiedades !! Realizan muchas acciones !! Objetos navegador !! Objetos predefinidos !! Objetos creados por el usuario
!!
!!
Formas de hacer referencia:

!! Nombre:
!! Posicin:
!! Objeto actual:
!!
Bloque V: Objetos
!!
Objeto window
!! Representa la ventana del navegador

Propiedades closed, defalutStattus, frames, history, length, location, name, parent, opener, self, status, top Mtodos 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()
!!
Objeto window

!!
Objeto window

!!
Objeto window

closed, defalutStattus, alert(mensajes), open(), frames,Valores history, length, close(), confirm(mensaje), Nos indica Yes, no, 1, 0 Si tendr barra deprompt(), herramientas location, name, parent, moveBy(x,y), no, 1, 0 Si tendr campo de localizacin opener,Yes, self, status, top moveTo(x,y), print(), Yes, no, 1, 0 Si tendr botones de direcciones setTimeout(), Yes, no, 1, 0 Si tendr barra de estado resizeBy(x,y), Yes, no, 1, 0 Si tendr barra de mens Yes, no, 1,0 Si tendr barra deresizeTo(ancho,alto), desplazamiento Yes, no, 1, 0 Si se podr cambiar de tamao con el scrollBy(x,y), scroll(x,y), ratn scrollTo(x,y), N pixels Ancho de la ventana N pixels Alto de la ventanaclearInterval(), N pixels Distancia a la izquierda setInterval(), setTimeout()
N pixels Distancia hacia arriba
Open(URL, nombre, caractersticas): Abre la url que le pasamos como primer parmetro en la ventana cuyo nombre se indica en el segundo parmetro. Si no Propiedades Mtodos existe esa ventana, abre otra nueva con las caractersticas que se le pasen por parmetro:
Caractersticas tollbar Location Directories Status Menubar Scrollbars Resizable Width Height Left Top
!!
Objeto window

!!
Objeto window
!!
Objeto frame
!! Se comporta igual que el objeto window

Propiedades defalutStattus window frames self Status top Mtodos alert(), confirm(mensaje), clearInterval(), setInterval(), clearTimeout(), setTimeout(), focus(), blur(), moveBy(x,y), moveTo(x,y), open(), close(), prompt(), scroll(x,y)
!!
Objeto frame
!!
Objeto location
!! Informacin sobre la url actual

Propiedades hash host hostname href pathname port protocol search Mtodos reload() replace(cadenaURL)
!!
Objeto location

!!
Objeto location

!!
Objeto location
!!
Objeto history
!! Informacin sobre las url vistadas

Propiedades length Mtodos back() forward() go(url)
!!
Objeto history

!!
Objeto history

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

Propiedades appCodeName appName appVersion lenguage mimeTypes platform plugins userAgent Mtodos javaEnabled()
!!
Objeto navigator
!! No tiene relacin con el resto de los objetos !! Informa sobre el navegador

Propiedades appCodeName appName appVersion lenguage mimeTypes platform plugins userAgent Mtodos javaEnabled()
!!
Objeto navigator
!!
Bloque V: Objetos
!!
Abarca gran parte del modelo de objetos

Propiedades alinkColor anchors applets bgColor Cookie fgColor forms Images lastModified linkColor links location referrer title vlinkColor clear() open() close() write() writeln() Mtodos
!!

!!

!!
Los objetos link y Anchor
!! El objeto link engloba las propiedades de los enlaces externos, y el anchor la de los enlaces locales
Propiedades Length Mtodos
!!
Los objetos link y Anchor
!! El objeto link engloba las propiedades de los enlaces externos, y el anchor la de los enlaces locales
Propiedades Length Mtodos
!!
El objeto Image
!! Permite manipular imgenes

Propiedades border complete height hspace lowsrc name src vspace width Mtodos
!!
El objeto Image
!! Permite manipular imgenes

Propiedades border complete height hspace lowsrc name src vspace width Mtodos
!!
El objeto Form
!! Permite manipular formulario

Propiedades action elemnts encoding length method target reset() submit() Mtodos
!!
El objeto Form

!!
El objeto Form

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

Propiedades defaultValue name value blur() focus() select()
!! Obtener el texto introducido por el usuario

Mtodos
!!
El objeto Form


Mtodos
!!
El objeto Form


Mtodos
!!
El objeto Form
!! Botones
name value
!! Objetos button, reset, submit

Propiedades click() Mtodos
!!
El objeto Form
!! Botones
name value

!!
El objeto Form
!! Botones
name value

!!
El objeto Form
!! Objetos checkbox
Propiedades checked defaultChecked name value
!! Casillas de verificacin
Mtodos click()
!!
El objeto Form
!! Objetos checkbox
Mtodos click()
!!
El objeto Form
!! Objetos checkbox
Mtodos click()
!!
El objeto Form
!! Objetos radio
!! Elegir una posibilidad en una lista
Propiedades checked defaultChecked length name value click() Mtodos
!!
El objeto Form
!! Objetos radio
!!
El objeto Form
!! Objetos radio
!!
El objeto Form
!! Objetos select
!! Representa una lista de opciones dentro de un formulario
Propiedades Mtodos Length Name Options selectedIndex Options[n].index Options[n].selected Options[n].text Options[n].value
!!
El objeto Form
!! Objetos select
!! Representa una lista de opciones dentro de un formulario
Propiedades Mtodos Length Name Options selectedIndex Options[n].index Options[n].selected Options[n].text Options[n].value
!!
El objeto Form
!! Objetos hidden
!! Cadenas de caracteres no visibles

Propiedades name value Mtodos
!!
El objeto Form
!! Objetos hidden
!! Cadenas de caracteres no visibles

Propiedades name value Mtodos
!!
El objeto Document
!!
El objeto Document
!!
Bloque V: Objetos
!! !! !!
Objeto propio de JavaScript Nos permite manipular cadenas de caracteres Propiedades: Mtodos:
!! !! !! !! !! !! !! !! !! !! length !! prototype
!!
big() blink() bold() charAt(indice) concat(cadena) fixed() fontcolor(color) fontsize(tamao) indexOf(cadenaBuscada,indice)
!! !! !! !! !! !! !! !! !! !! !! !! !!
italics() lastIndexOf(cadenaBuscada, indice) link(url) small() split(carcter) strike() slice(inicio, fin) sub() substr(numeroCaracteres, inicio) substring(inicio, fin) sup() toLowerCase() toUpperCase()
!!
Ejemplo
!!
Bloque V: Objetos
Nos permite realizar clculos en el script !! Propiedades: (constantes de inters)

!!
!! Math.E !! Math.LN2 !! Math.LN10 !! Math.LOG2E !! Math.LOG10E !! Math.PI !! Math.SQRT1_2 !! Math.SQRT2
!!
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)
!!
Ejemplo
!!
Bloque V: Objetos
Nos permite manipular fechas y horas !! Creacin:

!!
!!
Mtodos:
!! objetoFecha.getTime() !! objetoFecha.getDate() !! objetoFecha.getDay() !! objetoFecha.getHours() !! objetoFecha.getMonth() !! objetoFecha.getSeconds()
!! 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()
!!
Ejemplo
!!
Bloque V: Objetos
!!
JavaScript nos permite crear nuestros propios objetos
!!
Los mtodos se declaran fuera de la funcin

!!
!!
Bloque VI: Eventos
!! Definicin !! Eventos ms comunes !! Ejemplo de uso
!!
Bloque VI: Eventos
!!
Son las acciones que el usuario realiza al visitar una web.

Elemento Accin Evento
Clic Clic Clic Situar el puntero Clic Tabulador/Clic Tabulador/Clic para cambio Deseleccin Click Click Click MouseOver Click Focus Blur Change Focus Blur Change Select onClick onClick onClick onMouseOver onClick onFocus onBlur onChange onFocus onBlur onChange onSelect
Manejador
Botn Casilla Enlace Botn opcion Seleccin
Campo texto
Tabulador/Clic Tabulador/Clic para cambio Deseleccin Seleccin texto
!!
Bloque VI: Eventos
!!
Eventos de ratn:
Evento
onmousedown onmousemove onmouseover onmouseout onmouseup onclick ondbloclick onselect
Causa
Se ha presionado el ratn Se ha movido el ratn Se pasa el puntero por una determinada zona El puntero del ratn sale de una zona Se ha levantado el botn izquierdo del ratn Se pulsa el botn izquierdo Se ha realizado una doble pulsacin Se realiza una seleccin
!!
Eventos de teclado:
Evento
onkeydown onkeypress onkeyup
Causa
bajada de tecla correspondiente a una pulsacin El usuario pulsa una tecla Subida de tecla correspondiente a una pulsacin
!!
Eventos de enfoque:
Evento
onblur onfocus
Causa
El objeto pierde el foco de entrada El objeto recibe el foco
!!
Eventos de formulario:
Evento
onreset onsubmit
Causa
El usuario inicializa un formulario El formulario est a punto de enviarse
!!
Eventos de carga de pgina:

Evento
onload onunload
Causa
El navegador ha cargado la pgina El objeto se ha descargado
!!
Otros eventos:
Evento
onAbort onChange onDragDrop
Causa
El usuario cancela la carga de una imagen El contenido de un objeto o seleccin ha cambiado Se dispara continuamente en el objeto fuente durante la operacin de arrastre Se produce un error en la carga de un objeto Se mueve la ventana Se redimensiona la ventana
onError onMove onResize
!!
Bloque VI: Eventos

!!

Introduccion JavaScritp

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

Introduccion JavaScritp

Cargado por

Copyright:

Formatos disponibles

Bloque !! Bloque !! Bloque !! Bloque !! Bloque !! Bloque !!

Bloque !! Bloque !! Bloque !! Bloque !! Bloque !! Bloque !! Bloque

!! Introduccin a JavaScript !! JavaScript y HTML !! Elementos de un programa JavaScript !! Entrada y salida

!! Introduccin a JavaScript !! JavaScript y HTML !! Elementos de un programa JavaScript !! Entrada y salida

!! Introduccin a JavaScript !! JavaScript y HTML !! Elementos de un programa JavaScript !! Entrada y salida

Etiqueta de final del programa JavaScript

Se pueden incluir mediante un programa .js

Ejemplo de programa en JavaScript

!! Introduccin a JavaScript !! JavaScript y HTML !! Elementos de un programa JavaScript !! Entrada y salida

Comentario de una lnea

Comentario varia lneas

!! Introduccin a JavaScript !! JavaScript y HTML !! Elementos de un programa JavaScript !! Entrada y salida

Bloque !! Bloque !! Bloque !! Bloque !! Bloque !! Bloque !! Bloque

Bloque II: Elementos Bsicos

Bloque II: Elementos Bsicos

Variables: Operadores: Expresiones:

Bloque II: Elementos Bsicos

Almacenamiento informacin en la variable:

!! Se puede almacenar cualquier tipo de informacin !! Se usa el operador de asignacin

Consulta o utilizacin de un valor

!! Se puede hacer referencia al contenido

Operacin con variables

Bloque II: Elementos Bsicos

!! Cualquier formato de los habituales

!! Contienen propiedades y mtodos !! Su utilidad es saber si hemos iniciado o no una variable.

Bloque II: Elementos Bsicos

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

Orden de evaluacin de las expresiones:

Orden de evaluacin de las expresiones:

Bloque !! Bloque !! Bloque !! Bloque !! Bloque !! Bloque !! Bloque

Bloque III: Estructuras de control

Bloque III: Estructuras de control

Simplificado: Alternativa !! Alternativa simple:

!! Si cumple una condicin se ejecuta un cdigo

!! Si cumple una condicin se ejecuta un cdigo, en caso contrario, otro cdigo

Prueba de condicin (?):

!! Forma compacta de condicin doble !! Ejemplo de uso

Bloque III: Estructuras de control

Es una alternativa ms compleja

Bloque III: Estructuras de control

Forma parte de las estructuras de control

Bloque III: Estructuras de control

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

Estructura repetitiva por excelencia

Variable interna que controla el bucle

Condicin que determina si se sigue ejecutando el bucle

Valor que toma la variable de control inicialmente

Expresin que variar el valor de la variable de control

Bloque III: Estructuras de control

Simplificacin del bucle for, aplicado a arrays

Es donde se encuentran los elementos

Bloque III: Estructuras de control

Estructura que permite guardar ms de un elemento

Simplifica muchos aspectos a la hora de programar

Indicador que hace referencia al array

Nmero de elementos que contendr el array

!! Se trabaja igual que si fuese una variable !! Operador asignacin !! Visualizacin

!! Se puede acceder mediante variables

!! Se suele combinar con estructuras de control

Bloque III: Estructuras de control

Viene predefinido por el lenguaje