Java Script

Aplicaciones dinmicas utilizando
JavaScript
Desarrollo de Sitios Web
UAEM
Contenido
UAEM
1. Introduccin al lenguaje
2. Elementos del lenguaje
3. Objetos del lenguaje
4. Formularios
5. Objetos del navegador
UAEM - DSC
JavaScript
UAEM
Introduccin al lenguaje
UAEM - DSC
JavaScript
UAEM
Qu es JavaScript?.
Dnde y cmo introducir JavaScript?
Eventos
Mtodos
Funciones
Alert
UAEM - DSC
UAEM
Qu es JavaScript?
Es un lenguaje de tipo script compacto, basado en
objetos y guiado por eventos diseado especficamente
para el desarrollo de aplicaciones en el mbito de Internet.
Es un lenguaje script orientado a documento.
UAEM - DSC
UAEM
Dnde y cmo introducir JavaScript?

La forma mas frecuente de hacerlo es utilizando la
directiva <script> en un documento HTML entre las
etiquetas <head> y </head>.
<script language=JavaScript" type="text/JavaScript" >
alert(Hola mundo);
</script>
<script language="JavaScript" src="archivo.js"> </script>
Se puede incluir como respuesta a algn evento.

<input type=submit onclick=alert(Hola'); return false;>
UAEM - DSC
UAEM
Caractersticas
Es sensible a maysculas y minsculas
Para imprimir caracteres es con document.write( )
Se
declaran
var=nombre;
las
variable
sin
especificar
tipo:
El delimitador de lnea es punto y coma

Tiene dos tipos de comentarios en lnea , y multilnea
//, /* */
UAEM - DSC
UAEM
Eventos
Un evento es una accin ante la cual se puede realizar

algn proceso.
Sintaxis:
<elemento onClick=Proceso_a_realizar>
Ejemplo
<input type=button value=Saludar onClick=alert(Buenos das)>
UAEM - DSC
UAEM
Eventos comunes
Formulario
Teclado
Mouse
onBlur
onLoad
onKeyDown
onClick
onChange
onUnload
onKeyPress
onDblClick
onSelect
onError
onKeyUp
onMouseMove
onFocus
onMouseOver
UAEM - DSC
UAEM
Mtodos
Un mtodo es una funcin asociada a un objeto.
Sintaxis:
Objeto.mtodo();
Mtodos comunes
blur(), click(), focus(), select() y submit()
UAEM - DSC
UAEM
Funciones
Una funcin es un elemento del programa (sentencias o
bloque de cdigo) creado con la finalidad de realizar una
accin determinada. Una funcin puede ser llamada desde
otra.
Sintaxis:
function NombreFuncin() {
sentencia(s);
}
UAEM - DSC
UAEM
Ejemplo de funciones
function saludo() {
alert(Hola, bienvenido al curso);
}
<input type=button value=Saludar onClick=saludo()/>
function bienvenida(){
saludo();
}
UAEM - DSC
UAEM
Alert
Un alert es una caja de dilogo utilizada para transmitir
informacin al usuario.
Sintaxis:
alert(Mensaje);
Ejemplo:
alert(Bienvenido(a) al curso de JavaScript);
UAEM - DSC
UAEM
Ejemplo:
Utilizar todo lo visto en la parte introductoria
para desplegar nombre y edad
UAEM - DSC
JavaScript
UAEM
Elementos del lenguaje
UAEM - DSC
JavaScript
UAEM

Variables y constantes
Operadores
Estructuras de control
Arreglos
UAEM - DSC
UAEM
Variables y constantes
Una variable es un espacio de memoria utilizado para
almacenar y recuperar valores (datos),
el cual es
identificado por un nombre.
Sintaxis:
var = Nombre_variable[=valor];
Ejemplo:
var = miVariable;
var = otra_Variable = Hola;
UAEM - DSC
UAEM
Una constante es un espacio de memoria utilizado para

almacenar y recuperar un valor inicial invariable, el cual es
identificado por un nombre.
Sintaxis:
const Nombre_constante = valor;
Ejemplo:
const pi = 3.14159;
Las constantes no son reconocidas por IE.
UAEM - DSC
UAEM
Prompt y confirm
Un prompt es una caja de dilogo utilizada para recibir
informacin del usuario.
Sintaxis:
prompt(Mensaje, default);
Ejemplo:
prompt(Introduce tu nombre, [ nombre de usuario]);
UAEM - DSC
UAEM
Un confirm es una caja de confirmacin utilizada para

recibir una decisin del usuario.
Sintaxis:
confirm(Mensaje);
Devuelve 1 si el usuario selecciona aceptar y 0 si elije cancelar.
Ejemplo:
confirm(Deseas continuar en el curso?);
UAEM - DSC
UAEM

Tipos de datos
Tipo
Descripcin
Ejemplo
Numrico
Enteros o coma flotante
Dato = 3.14159;
Boleanos
Falso o verdadero
Dato = true;
Cadenas
Delimitados por comilla doble
Dato = hola;
Objetos
Obj = new Object()
Dato = new Array();
Nulos
Null
Dato = null;
Indefinidos
Sin valor asignado
undefined
UAEM - DSC
UAEM

Operadores Aritmticos
Operador
Descripcin
Ejemplo
Suma dos nmeros
13 + 5
Resta dos nmeros
7-9
Multiplica dos nmeros
6*3
Divide dos nmeros
4/8
Devuelve el residuo de la divisin
9%4
++
Incremento
a++
--
Decremento
a--
Invierte el signo de un operando
-a
UAEM - DSC
UAEM

Operadores de comparacin
Operador
Descripcin
Ejemplo
==
Devuelve true si los operadores son iguales
5 == 5
!=
Devuelve true si los operadores no son iguales
7 != 9
>
Devuelve true si el operador de la izquierda es

mayor que el de la derecha
6>3
>=

mayor o igual que el de la derecha
6 >= 6
<

menor que el de la derecha
4<5
<=

menor o igual que el de la derecha
4 <= 5
UAEM - DSC
UAEM

Operadores lgicos
Operador
Descripcin
Ejemplo
&&
Devuelve true si ambas expresiones

son verdaderas
(5 == 5) && (2 > 1)
||
Devuelve true si una de las

expresiones es verdadera
(5 == 6) || (3 < 7)
Niega a una expresin
!(6 > 3)
UAEM - DSC
UAEM

Estructuras de control
Una estructura de control permite controlar el flujo de la

ejecucin de instrucciones.
Las estructuras de control se clasifican en:
A
B
No
Si
No
Si
Secuencia
Seleccin
Iteracin
UAEM - DSC
UAEM

Estructuras de seleccin
If else
Sintaxis
if( expresin ){
No
Sentencias 1
}[else]{
Sentencias 2
Expresin
Verdadera
Si
Sentencias 1
Sentencias 2
}
UAEM - DSC
UAEM

switch
Sintaxis
switch( expresin ){
case exp 1:
sentencias 1
break;
case exp 2:
sentencias 2
break;
case exp N:
sentencias N
break;
[default:]
sentencias
}
Expresin
exp 1
Sent 1
exp N
sent N
default
sent
UAEM - DSC
UAEM

Estructuras de iteracin (bucle)
while
Sintaxis
while( expresin ){
sentencias
}
Expresin
Verdadera
No
Si
Sentencias
UAEM - DSC
UAEM

do while
Sintaxis
do{
sentencias
} while( expresin )
Sentencias
Si
Expresin
Verdadera
No
UAEM - DSC
UAEM

for
Sintaxis
for( inicio; condicin; iteracin){
sentencias
}
Expresin
Verdadera
No
Si
Sentencias
UAEM - DSC
UAEM
Sentencias de ruptura
continue
Ignora las sentencias del bucle y salta a la condicin.
continue;
break
Abandona el bucle y lo da por terminado.
break;
UAEM - DSC
UAEM
Arreglos
Una arreglo es una coleccin de variables asociadas a un
mismo nombre.
Sintaxis:
var nombre_arreglo = new Array([Numero_elementos]);
Ejemplo:
var arreglo = new Array(5);
var arreglo = new Array(21,Cadena, true)
UAEM - DSC
UAEM
Asignar valores a arreglos

nombre_arreglo(Elemento-1) = Valor;
arreglo(0) = 5;
Acceso a valores de arreglos
Valor = Nombre_arreglo(Elemento-1);
Numero = arreglo(0);
UAEM - DSC
UAEM
Paso de parmetros a funciones

Una funcin es un elemento del programa (sentencias o
bloque de cdigo) creado con la finalidad de realizar una
accin determinada. Una funcin puede ser llamada desde
otra.
Sintaxis:
function NombreFuncin([Parmetros]) {
sentencia(s);
}
Parmetros
[Variable1, Variable2,, VariableN]
UAEM - DSC
UAEM
Ejemplo de funciones
function saludo(alumno) {
alert(Hola +alumno+, bienvenido al curso);
}
<input type=button value=Saludar onClick=saludo(Denys)/>
function bienvenida(){
saludo(mi nombre);
}
UAEM - DSC
JavaScript
UAEM
Objetos del Lenguaje
UAEM - DSC
JavaScript
UAEM

Objetos String
Objeto Math
Objeto Date
UAEM - DSC
UAEM
Objeto String
El objeto String permite hacer diversas manipulaciones con
las cadenas.
Al asignar una cadena a una variable se crea un objeto String.
Sintaxis:
var Nombre_objeto = new String();
Ejemplo:
var MiCadena = Una cadena
UAEM - DSC
UAEM
Propiedades:
Propiedad
length
Descripcin
Indica la longitud de caracteres de la cadena.
UAEM - DSC
UAEM

Mtodos:
Mtodo
charAt(ndice)
Descripcin
Devuelve al caracter situado en la posicin indice.
indexOf(cadena)
Devuelve la posicin de de inicio de cadena.
replace(C1, C2)
Remplaza la cadena C1 por la cadena C2.
split(separador)
Parte una cadena en un arreglo definido por la cadena

separador.
substring(I1,I2)
Devuelve una subcadena que inicia en al posicin I1 y

termina en la posicin I2.
toLowerCase()
Devuelve la cadena en minsculas.
toUpperCase()
Devuelve la cadena en maysculas.
UAEM - DSC
UAEM
Objeto Math
El objeto Math permite realizar clculos en los scripts.
Las propiedades del objeto Math no se modifican.
Propiedades:
Propiedad
Descripcin
Nmero e.
PI
Nmero PI
UAEM - DSC
UAEM
Mtodos:
Mtodo
abs(nmero)
pow(base, exp)
Descripcin
Valor absoluto de nmero.
Base elevado a exp (Potencia).
sqrt(nmero)
Raiz cuadrada de nmero.
sin(nmero)
Seno de nmero.
cos(nmero)
Coseno de nmero.
tan(nmero)
Tangente de nmero.
log(nmero)
Logaritmo decimal de nmero.
random()
Devuelve un nmero aleatorio entre 0 y 1.
round(nmero)
Redondea nmero al entero ms cercano.
UAEM - DSC
UAEM
Objeto Date
El objeto Date permite la manipulacin de fechas.
JavaScript maneja fechas en milisegundos.
Los meses (Enero - Diciembre) y los das de la semana (Domingo Sbado) son dados por un entero con un rango de 0 a 11 y 0 a 6
respectivamente.
Los aos de coloca tal cual.
Las horas se especifican en: HH:MM:SS.
Sintaxis:
var nombre_objeto = new Date();

var MiFecha = new Date();
UAEM - DSC
UAEM

Mtodos:
Mtodo
Descripcin
getDate()
Devuelve el da del mes como entero (1 - 31).
getDay()
Devuelve el da de la semana como entero (0 - 6).
getMonth()
getYear()
getHours()
Devulve el mes del ao como entero (0 - 11).

Devuelve el ao actual como entero.
Devulve la hora como entero (0 - 23).
getMinutes()
Devuelve los minutos como entero (0 - 59).
getSeconds()
Devuelve los segundos como entero (0 - 59).
Para modificar los valores se utiliza set, por ejemplo: getDate(val), getDay(val).
UAEM - DSC
JavaScript
UAEM
Formularios
UAEM - DSC
JavaScript
UAEM
Formularios
Objeto Form
Objetos text, textarea y password
Objeto button
Objeto checkbox
Objeto radio
Objeto select
Animaciones
UAEM - DSC
UAEM
Formularios
Objeto Form
Es el contenedor de todos los elementos del formulario.
Propiedades:
Propiedad
action
method
Descripcin
Contiene la direccin (URL) donde sern procesados
los datos del formulario.
Mtodo con el que se va a recibir procesar los datos
del formulario (GET/POST).
UAEM - DSC
UAEM
Formularios
Mtodos:
Mtodos
reset()
submit()
Descripcin
Resetea el formulario. Tiene el mismo efecto que un
botn tipo reset.
Enva el formulario. Tiene el mismo efecto que un
botn tipo submit.
UAEM - DSC
Formularios
UAEM
Objetos text, textarea y password

Representan campos de texto dentro de un formulario.
Propiedades:
Propiedad
name / id
value
maxlength
Descripcin
Nombre / identificador asignado al objeto.
Valor asignado.
Mximo de caracteres que puede contener.
UAEM - DSC
Formularios
UAEM
Mtodos:
Mtodos
Descripcin
blur()
El objeto pierde el foco.
focus()
El objeto obtiene el foco.
select()
Selecciona el texto del objeto
UAEM - DSC
Formularios
UAEM
Objeto button
Elemento de un formulario que realiza una accin.
Propiedades:
Propiedad
name / id
value
Descripcin
Valor asignado.
UAEM - DSC
Formularios
UAEM
Mtodos:
Mtodos
click()
Descripcin
Realiza la accin de pulsado del botn.
Los botones especficos submit y reset tienen una accin asignada

al ser pulsados: el primero enva el formulario y el segundo limpia
la propiedad value de los elementos del formulario.
UAEM - DSC
Formularios
UAEM
Objeto checkbox
Representa la posibilidad de mltiples selecciones dentro de un
grupo de opciones.
Propiedades:
Propiedad
name / id
value
cheked
Descripcin
Valor asignado.
Indica si el checkbox est marcado (boolean).
UAEM - DSC
Formularios
UAEM
Mtodos:
Mtodos
click()
Descripcin
UAEM - DSC
Formularios
UAEM
Objeto radio
Representa la posibilidad de una seleccin dentro de un grupo de
opciones. Para agrupar elementos de tipo radio todos deben tener el
mismo name / id.
Propiedades:
Propiedad
name / id
value
cheked
Descripcin
Valor asignado.
Indica si el radio est marcado (boolean).
UAEM - DSC
Formularios
UAEM
Mtodos:
Mtodos
click()
Descripcin
UAEM - DSC
UAEM
Formularios
Objeto select
Representa una lista de opciones dentro de un formulario.

Propiedades:
Propiedad
name / id
Descripcin
selectedIndex
Indica cual de todas las opcines est selecionada.
options
Arreglo que contiene cada una de las opciones de la

lista.
UAEM - DSC
Formularios
UAEM
Elementos de la propiedad options:

Elemento
Descripcin
index
Indica la posicin de la opcin dentro de la lista.
length
Indica cuantas opciones tiene la lista.
selected
text
value
Indica si la opcin est seleccionada (boolean).

Texto mostrado en las opciones de la lista.
Valor de cada una de las opciones de la lista.
UAEM - DSC
Formularios
UAEM
Mtodos:
Mtodos
Descripcin
blur()
El objeto pierde el foco.
focus()
El objeto obtiene el foco.
UAEM - DSC
Formularios
UAEM
Objeto img
Representa la posibilidad de manejar imgenes dentro de un
formulario.
Propiedades:
Propiedad
name / id
src
Descripcin
Ruta de la imagen asociada.
height
Valor del alto de la imagen asociada.
width
Valor del ancho de la imagen asociada.
border
Valor del borde de la imagen asociada.
UAEM - DSC
Formularios
UAEM
setInterval y setTimeout
SetInterval: Ejecuta una funcin cada cierto intervalo de
tiempo.
Sintaxis:
setInterval( Nombre_funcin, Intervalo_tiempo);
Ejemplo:
setInterval( reloj(), 1000);
UAEM - DSC
Formularios
UAEM
setTimeout: Ejecuta una funcin en un intervalo de

tiempo.
Sintaxis:
setTimeout( Nombre_funcin, Intervalo_tiempo);
Ejemplo:
setTimeout( finReloj(), 15000);
UAEM - DSC
JavaScript
UAEM
Objetos del Navegador
UAEM - DSC
JavaScript
UAEM

Jerarqua de objetos
Objeto window
Objeto document
Objeto history
Objeto navigator
Objeto screen
UAEM - DSC
UAEM
Jerarqua de objetos
window
window
document
form
button
checkbox
radio
select
options
text
image
history
screen
document
form
button
navigator
UAEM - DSC
UAEM

Objeto window
El objeto window hace referencia a la ventana actual y

contiene a todos los componentes.
Propiedades
Propiedad
Descripcin
closed
Booleano que indica si la ventana est cerrada.
history
Arreglo con las URLs de las pginas visitadas.
location
URL de la barra de direccin.
opener
Referencia al objeto window que abri una ventana.
UAEM - DSC
UAEM

Mtodos
Mtodo
Descripcin
alert()
Muestra un mensaje en un cuadro de dilogo.
close()
Cierra el objeto window actual.
confirm()
Cuadro de dilogo con las opciones aceptar y cancelar.
open()*
Abre una URL en un objeto window.
promp()
Cuadro de dilogo para recibir informacin.
print()
Imprime el contenido del objeto window actual.
setInterval()
Ejecuta una accin cada cierto intervalo de tiempo.
setTimeout()
Ejecuta una accin en un intervalo de tiempo.
location()
Enlaza con una pgina.
UAEM - DSC
UAEM

Atributos del mtodo open
Atributo
Descripcin
toolbar
Indica si la ventana tendr barra de herramientas.
location
Indica si la ventana tendr barra de direcciones.
menubar
Indica si la ventana tendr barra de menu.
scrollbars
Indica si la ventana tendr barras de scroll.
resizable
Indica si la ventana podr cambiar de tamao.
width
Indica el ancho de la vantana.
height
Indica el alto de la ventana.
status
Indica si la ventana tendr barra de estado.
UAEM - DSC
UAEM
Objeto document
El objeto document tiene el contenido de la pgina que se est
visualizando.
Propiedades
Propiedad
bgColor
Descripcin
Color del fondo del documento.
title
Ttulo del documento actual.
alinkColor
Color de los enlaces activos.
linkColor
Color de los enlaces.
vlinkColor
Color de los enlaces visitados.
UAEM - DSC
UAEM
Mtodos
Mtodo
write()
writeln()
Descripcin
Escribe texto en el documento.
Escribe texto en el documento y agrega saldo de lnea.
UAEM - DSC
UAEM
Objeto history
El objeto history almacena una lista con las URLs de las
pginas que se han visitado.
Propiedades
Propiedad
current
next
length
previous
Descripcin
URL de la pgina actual.
URL de la pgina siguiente en el historial.
Nmero de pginas que han sido visitadas.
URL de la pgina anterior en el historial.
UAEM - DSC
UAEM

Mtodos
Mtodo
Descripcin
back()
Carga la pgina anterior en el historial.
forward()
Carga la pgina siguiente en el historial.
go(pos)
Carga la pgina especificada por pos en el historial.

Para Pos:
1 forward
-1 back
X va a la pgina X del historial.
UAEM - DSC
UAEM
Objeto navigator
El objeto navigator contiene informacin del navegador que
est utilizando el usuario.
Propiedades
Propiedad
Descripcin
appName
Nombre del cliente.
appVersion
Versin del cliente.
platform
Plataforma de trabajo del cliente.
cpuClass
Tipo de procesador del cliente.
connectionSpeed
Velocidad de conexin del cliente.

UAEM - DSC
UAEM
Mtodos
Mtodo
javaEnabled()
Descripcin
Booleano que indica si se permite el uso de java.
UAEM - DSC
UAEM

Objeto screen
El objeto screen contiene informacin
configuracin de la pantalla del usuario.
acerca
de
la
Propiedades
Propiedad
Descripcin
heigth
Altura de la pantalla (px).
width
Ancho de la pantalla (px).
colorDepth
Bits de profundidad. Calidad de colores en pantalla.
UAEM - DSC
Sitios de inters:
http://www.webestilo.com/javascript
http://www.webtaller.com/manual-javascript/indice_manu
al_javascript.php
Desarrollo de Sistema DSC.
UAEM

Java Script

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Java Script

Încărcat de

Drepturi de autor:

Formate disponibile

Aplicaciones dinmicas utilizando

Desarrollo de Sitios Web

Es un lenguaje script orientado a documento.

Desarrollo de Sitios Web

Dnde y cmo introducir JavaScript?

Se puede incluir como respuesta a algn evento.

El delimitador de lnea es punto y coma

Un evento es una accin ante la cual se puede realizar

Desarrollo de Sitios Web

Desarrollo de Sitios Web

Desarrollo de Sitios Web

Desarrollo de Sitios Web

Desarrollo de Sitios Web

Desarrollo de Sitios Web

Desarrollo de Sitios Web

Elementos del lenguaje

Desarrollo de Sitios Web

Elementos del lenguaje

Desarrollo de Sitios Web

Elementos del lenguaje

Elementos del lenguaje

Una constante es un espacio de memoria utilizado para

Las constantes no son reconocidas por IE.

Desarrollo de Sitios Web

Desarrollo de Sitios Web

Un confirm es una caja de confirmacin utilizada para

Desarrollo de Sitios Web

Elementos del lenguaje

Enteros o coma flotante

Delimitados por comilla doble

Obj = new Object()

Dato = new Array();

Sin valor asignado

Desarrollo de Sitios Web

Elementos del lenguaje

Suma dos nmeros

Resta dos nmeros

Multiplica dos nmeros

Divide dos nmeros

Devuelve el residuo de la divisin

Invierte el signo de un operando

Desarrollo de Sitios Web

Elementos del lenguaje

Devuelve true si los operadores son iguales

Devuelve true si los operadores no son iguales

Devuelve true si el operador de la izquierda es

Devuelve true si el operador de la izquierda es

Devuelve true si el operador de la izquierda es

Devuelve true si el operador de la izquierda es

Desarrollo de Sitios Web

Elementos del lenguaje

Devuelve true si ambas expresiones

Devuelve true si una de las

Niega a una expresin

Desarrollo de Sitios Web

Elementos del lenguaje

Una estructura de control permite controlar el flujo de la

Elementos del lenguaje

Desarrollo de Sitios Web

Elementos del lenguaje

Elementos del lenguaje

Desarrollo de Sitios Web

Elementos del lenguaje

Desarrollo de Sitios Web