Beruflich Dokumente
Kultur Dokumente
JAVASCRIPT
UCSG Ing. Roberto Garca Snchez
Programacin cliente-servidor
La programacin del lado del cliente tiene como
principal ventaja que la ejecucin de la aplicacin
se delega al cliente, con lo cual se evita recargar al
servidor de trabajo.
Programacin cliente-servidor
Programar por el lado del servidor tiene como gran
ventaja que cualquier cosa puede hacerse sin tener en
cuenta el tipo de cliente, ya que la aplicacin se
ejecuta en el servidor que es un ambiente controlado,
una vez ejecutada la aplicacin, el resultado que se
enva al cliente puede estar en un formato normalizado
que cualquier cliente puede mostrar.
La desventaja es que el server se sobrecarga de
trabajo ya que adems de servir pginas es
responsable de ejecutar aplicaciones.
Introduccin al Javascript
Javascript es un lenguaje interpretado
Desarrollo en web
Introduccin al Javascript
JavaScript es un lenguaje de programacin que
permite el script de eventos, clases y acciones para el
desarrollo de aplicaciones Internet entre el cliente y
el usuario. JavaScript permite con nuevos elementos
dinmicos ir ms all de clicar y esperar en una
pgina Web. Los usuarios no leern nicamente las
pginas sino que adems las pginas ahora
adquieren un carcter interactivo.
Introduccin al Javascript
Los programas se ejecutan en el navegador (cliente):
Qu no es Javascript?
Javascript no es un lenguaje de propsito general.
Pequeos trozos de programa de unas pocas lneas de
cdigo.
Javascript NO es Java
Propiedades de Javascript
Se interpreta por el ordenador que recibe el
programa, no se compila.
Tiene una programacin orientada a objetos. El cdigo
de los objetos est predefinido y es expandible. No
usa clases ni herencia.
El cdigo est integrado (incluido) en los documentos
HTML.
Trabaja con los elementos del HTML.
No se declaran los tipos de variables.
Ejecucin dinmica: los programas y funciones no se
chequean hasta que se ejecutan.
Javascript
Los comandos de un programa en JavaScript se
dividen en 5 categoras:
Variables y sus valores.
Expresiones, que manipulan los valores de las
variables.
Estructuras de control, que modifican cmo las
sentencias son ejecutadas.
Funciones, que ejecutan un bloque de sentencias
Clases y arrays (vectores), que son maneras de
agrupar datos.
Javascript
Variables y valores
En JavaScript no se debe especificar el tipo de datos.
Ejemplo 1:
var variable1= "coche;
var cuaderno;
var mi_variable = 123456, decimal =2342.89;
var n_casas, n_habitaciones, n_cuadros, nombre = "Franklin;
Javascript
Sentencias, Expresiones y Operadores
La unidad bsica de trabajo en JavaScript es la
Sentencia.
Los programas de JavaScript son un grupo de
sentencias, normalmente organizadas en funciones que
manipulan las variables y el entorno HTML en el cual
el script trabaja.
Los operadores hacen que en una sentencia las
variables sean evaluadas y se les asigne un valor o
un resultado.
Javascript
Estructuras de Control
Existen varios mtodos para controlar el modo de
ejecucin de sentencias que se vern ms adelante.
Funciones y Objetos
Las sentencias, expresiones y operadores bsicos se
agrupan en bloques ms complejos dentro de un
mismo programa llamadas funciones.
Javascript
Funciones
Una funcin es un bloque de cdigo con un nombre.
Cada vez que se usa el nombre, se llama a la
funcin y el cdigo de la funcin es ejecutado. Las
funciones pueden llamarse con valores, conocidos
como parmetros, que se usan en la funcin.
Javascript
Objetos
Los objetos tienen el mismo propsito que las
funciones pero con datos.
Los tipos de datos conocidos hasta ahora son
variables declaradas o inicializadas con var. Cada
uno de estos tipos puede tener un solo valor. Los
objetos permiten la capacidad de tener varios
valores, de tal manera que un grupo de datos
pueda estar relacionado con otro.
Javascript
Objetos
Lo que en JavaScript se llama objeto en otros
lenguajes se llama estructura de datos o clase. Como
las funciones, los objetos tienen 2 aspectos: cmo se
crean y cmo se usan.
Javascript
La etiqueta script
La seccin head de un documento HTML es la que
debe contener el cdigo de JavaScript para los
gestores de eventos. Aunque no es necesario que
todo el cdigo de JavaScript vaya en el head, es
importante que vaya en l para asegurar que todo
el cdigo de JavaScript haya sido definido antes del
body del documento.
Sntaxis bsica
Toma su sintaxis de lenguajes de programacin ms
conocidos C++ y Pascal
Definicin de variables:
Se ha definido dos
variables, una de tipo
numrico y otra de tipo
<html> cadena
<script>
numero = 73;
cadena = contenido de la cadena;
</script>
Sntaxis bsica
Operaciones con cadenas y numeros:
cad1=las cosas;
cad2=van mejorando; Concatenacin de cadenas
cad3=cad1 + cad2;
Sntaxis bsica
Sentencias en los programas
<html>
<head>
<script>
variable = 1;
alert(Mensaje en la ventana + variable);
</script>
</head>
Sntaxis bsica
Otro ejemplo:
<html>
<body>
<h1>Contenido escrito directamente en la pgina</h1>
<script>
variable = 1;
document.writeln(Este es mi primer script);
</script>
</body>
</html> Lo que escribamos con WRITELN
aparece en el documento.
Sntaxis bsica
Definicin de funciones
Podemos agrupar trozos de cdigo que se vayan a usar
repetidas veces en una funcin, para usarlo posteriormente:
<html>
<script>
function suma(){ Usamos una variable global
numero= numero + 3;
}
suma();
</script>
Sntaxis bsica
Definicin de funciones
Variables locales:
<html>
<script> Usamos una variable local
function suma(){
var numero= numero + 3;
}
suma();
</script>
Sntaxis bsica
Definicin de clases
<html>
<script>
function casa(habs, estil, fecha, garaje){
this.habitaciones=habs;
this.estilo=estil;
this.fecha_cosntruccin=fecha;
this.tiene_garaje=garaje;
}
</script>
Sntaxis bsica
Arrays (vectores)
<html>
<script>
var vector = new Array();
vector[0]=primer valor;
vector[1]=segundo valor;
.
</script>
Sntaxis bsica
Entrada de datos
La entrada de datos se suele hacer con formularios
o tambin podemos usar:
La sentencia PROMPT pide un
<html> dato por teclado.
La sentencia ALERT lo muestra en
<script> una ventana.
dato = prompt(Dame el dato:);
alert( has tecleado: + dato );
</script>
Sntaxis bsica
Estructuras de control condicionales:
switch (variable) {
if (condicion) { case valor: {
sentencias_true sentencias;
} break; }
case otrovalor: {
else{
sentencias;
sentencias-else break; }
}
default: sentencias;
}
Sntaxis bsica
Estructuras de control condicionales:
Sntaxis bsica
Crear una tabla
<script type=text/javascript>
filas = 7;
colum = 7;
document.writeln("<table>");
for (i=0; i<filas; i++ ) {
document.writeln("<tr>");
for (j=0; j<colum; j++ ) {
document.writeln( "<td>["+i+","+j+"]</td>" );
}
document.writeln( "</tr>" );
}
document.writeln(</table>");
</script>
Comentarios
LoscomentariosenJavascript seespecificandelasiguiente
manera:
//Uncomentariodeunasolalnea.
/*Variaslneasdecomentarios
quepuedetenerlaextensinquequeramos*/
Propiedades
Clase String
Los objetos string tienen una propiedad, length (nmero de
carcteres de la cadena), y varios mtodos que manipulan la
apariencia de la cadena (color, tamao, etc.).
Mtodos sobre el contenido: (recordar que las string tienen como
base de ndices el cero.)
charAt ( indice ), muestra el carcter que ocupa la posicin indice en la
cadena.
indexOf ( caracter ), muestra el primer ndice del carcter.
lastIndexOf (caracter ), muestra el ltimo carcter del ndice.
subString ( primerindice, ultimoindice ), muestra la cadena que hay que hay
entre el primer ndice(primerindice) y el ltimo ndice (ultimoindice) includos.
toLowerCase( ), muestra todos los carcteres de la cadena en minsculas.
toUpperCase( ), muestra todos los carcteres de la cadena en maysculas.
Propiedades
Mtodos sobre la apariencia:
big ( ), muestra las letras ms grandes.
blink ( ), muestra texto intermitente (parpadeando).
bold ( ), muestra las letras en negrita.
fixed ( ), muestra el texto en paso fijo (letra Courier New).
fontcolor ( color ), cambia el color de las letras.
fontsize ( size ), cambia el tamao de las letras.
italics ( ), muestra en letra itlica.
small ( ), muestra las letras ms pequeas.
strike ( ), muestra las letras tachadas por una ralla.
sub ( ), muestra la letra en subndice.
sup ( ), muestra la letra en superndice.
Propiedades
Clase Math
La clase Math se usa para efectuar clculos matemticos. Contiene
propiedades generales como pi =3.14159, y varios mtodos que
representan funciones trigonomtricas y algebraicas.
La clase Math es el primer ejemplo de clase esttica (que no cambia).
Todos sus argumentos son valores. Esta clase no permite crear objetos, por
lo que hay que referirse directamente a la clase para usar los mtodos.
Propiedades
Mtodos:
floor (numero), calcula el entero menor o igual que numero.
log (numero), calcula el logaritmo natural de numero.
max (numero1, numero2 ), calcula el mximo entre numero1y
numero2.
min (numero1, numero2 ), calcula el mnimo entre numero1y
numero2.
pow (numero1, numero2 ), calcula numero1 exponentado a
numero2.
random ( ), calcula un nmero decimal aleatorio entre 0 y 1,
SLO PARA UNIX.
round (numero), devuelve el entero ms cercano a numero.
sin (angulo), calcula el seno de angulo.
sqrt (numero), calcula la raz cuadrada de numero.
tan (angulo), calcula la tangente de angulo.
Propiedades
Clase Date
La clase date simplifica y automatiza la conversin entre las
representaciones horarias del ordenador y la humana.
La clase date de JavaScript sigue el estndar de UNIX para
almacenar los datos horarios como el nmero de milisegundos
desde el da 1 de enero de 1970 a las 0:00. Esta fecha se
denomina "la poca".
Aunque la clase date no tiene propiedades, tiene varios
mtodos. Para usar la clase date hay que entender cmo
construir un objeto de esta clase.
Propiedades
Clase Date
new Date( ), inicializa un objeto con la hora y fecha actual.
new Date( ao, mes, da), iniciliaza un objeto tomando 3 enteros que
representan el ao, mes y da. NOTA: los meses tienen como base el 0, lo
que significa que 2 corresponde con el mes de marzo y 10 con el mes de
noviembre.
Propiedades
Clase Date
Mtodos:
getDate ( ), devuelve el nmero de da del mes (1-31).
getDay ( ), devuelve el nmero de da de la semana (0-6).
getHours ( ), devuelve el nmero de horas del da (0-23).
getMinutes ( ), devuelve el nmero de minutos de la hora (0-59)
getMonth ( ), devuelve el nmero de mes del ao (0-11).
getSeconds ( ), devuelve el nmero de segundos del minuto (0-59)
getTime ( ), devuelve la hora.
getYear ( ), devuelve el ao.
setDate ( ), fija la fecha.
setHours ( ), fija el nmero de horas del da.
setMinutes ( ), fija el nmero de segundos del minuto.
setMonth ( ), fija el nmero de mes.
setSecond ( ), fija el nmero de los segundos del minuto.
setTime ( ), fija la hora.
setYear ( ), fija el ao.
Propiedades
Clases predefinidas
eval(string) - Esta funcin intenta evaluar su argumento de tipo
Propiedades
Clase window
Los mtodos de un objeto window son:
alert(string_mensaje)
confirm(string_mensaje)
open(URL_string, nombre_ventana)
close( )
prompt(string_mensaje)
Propiedades
Clase document
Cada ventana se asocia con un objeto document. El objeto
clear()
close()
open()
write(string)
writeln(string)
Propiedades
Clase location
El objeto location describe el URL del documento. Este tiene
back()
forward()
go(donde)
DOM
Document Object Model - interfaz de programacin
de aplicaciones (API) que proporciona un conjunto
estndar de objetos para representar documentos
HTML y XML.
Se trata de un modelo sobre cmo se combinan los
objetos, y una interfaz estndar para acceder a
ellos y manipularlos. A travs del DOM, los
programas pueden acceder y modificar el
contenido, estructura y estilo de los documentos
HTML y XML.
DOM
Document Object Model - Los navegadores al
cargar el cdigo XHTML crea un rbol de nodos
donde almacena cada una de las etiquetas de la
pgina.
Documento
XHTML
head body
texto link
DOM
Tipos de nodos:
Document, nodo raz del que derivan todos los dems
nodos del rbol.
Element, representa cada una de las etiquetas XHTML.
Puede contener atributos y derivar otros nodos.
Attr, representa cada uno de los atributos de las
etiquetas XHTML.
Text, nodo que contiene el texto encerrado por una
etiqueta XHTML.
Comment, representa los comentarios incluidos en la
pgina XHTML.
DOM
Acceso a los nodos
Para acceder a los nodos debe estar construido todo el
rbol, es decir, la pgina debe cargar completamente.
El valor que se indica delante del nombre de la funcin (en este caso,
document) es el nodo a partir del cual se realiza la bsqueda de los
elementos.
DOM
Creacin de elementos XHTML
El proceso de creacin de nuevos nodos puede llegar a
ser tedioso, ya que implica la utilizacin de tres funciones
DOM:
createElement(etiqueta): crea un nodo de tipo Element que
representa al elemento XHTML cuya etiqueta se pasa como
parmetro.
createTextNode(contenido): crea un nodo de tipo Text que
almacena el contenido textual de los elementos XHTML.
nodoPadre.appendChild(nodoHijo): aade un nodo como
hijo de otro nodo. Se debe utilizar al menos dos veces con
los nodos habituales: en primer lugar se aade el nodo Text
como hijo del nodo Element y a continuacin se aade el
nodo Element como hijo de algn nodo de la pgina.
DOM
Eliminacin de elementos XHTML
La funcin removeChild(elemento) requiere como parmetro
el nodo que se va a eliminar. Esta funcin debe ser invocada
desde el elemento padre de ese nodo que se quiere eliminar.
La forma ms segura y rpida de acceder al nodo padre de
un elemento es mediante la propiedad nodoHijo.parentNode.
DOM
Acceso a atributos XHTML
var enlace = document.getElementById(idenlace");
alert(enlace.href);
DOM
Acceso a atributos CSS
var parrafo = document.getElementById("parrafo");
alert(parrafo.style.fontWeight);
Propiedades CSS
El nico inconveniente es que esto solo permite
acceder a las propiedades directamente definidas
en la etiqueta de HTML, algo que no va a ocurrir
habitualmente, sino que las propiedades estarn
definidas en un archivo externo.
Propiedades CSS
function getStyle (elemento, propiedadCss) {
var valor = "";
if(document.defaultView && document.defaultView.getComputedStyle){
valor = document.defaultView.getComputedStyle
(elemento,'').getPropertyValue(propiedadCss);
}
else if(elemento.currentStyle) {
propiedadCss = propiedadCss.replace(/\-(\w)/g, function (strMatch, p1) {
return p1.toUpperCase();
});
valor = elemento.currentStyle[propiedadCss];
}
return valor;
}
window.onload
Para asegurarse que un cdigo JavaScript va a ejecutarse
despus de que la pgina se haya cargado completamente,
slo es necesario incluir las instrucciones que deseamos en la
siguiente sentencia:
Eventos
Eventos
Un evento es algo que ocurre mientras se ejecuta un
programa.
Acciones de navegacin:
Seleccionar enlaces
Mover hacia delante o atrs en la lista de webs visitadas
Cerrar el browser
Eventos
Eventos
Manejadores "semnticos"
Eventos
Eventos
Manejadores "semnticos"
Se basa en utilizar las propiedades DOM de los elementos
XHTML para asignar todas las funciones externas que
actan de manejadores de eventos.
Funcinexterna
function mensaje(){alert(Hapulsadoelbotn);}
Asignarlafuncinexternaalelemento
document.getElementById(boton").onclick =mensaje;
ElementoXHTML
<inputid=boton"type="button"value=Prueba"/>
Eventos
Para asegurarse que un cdigo JavaScript va a ejecutarse
despus de que la pgina se haya cargado completamente,
slo es necesario incluir las instrucciones que deseamos en la
siguiente sentencia:
Eventos
this
JavaScript define una variable especial llamada this
que se crea automticamente.
Teniendoencuentalastresformasdemanejarloseventos
podremosutilizarthis:
Manejadores como atributos de los elementos XHTML
Directamente en el cdigo
Manejadores "semnticos
Directamente
Formularios
UnadelasactividadescomunesdeJavaScript eslade
validarformularios.
Formularios
Sinembargosicambiaeldiseodelapginayse
alteraelordendelosformularios,seranecesario
cambiarelaccesoalarray deformularios.
Unasolucinaesteinconvenienteesutilizarlos
atributosname oiddelformulario.
Formularios
Siutilizamoselatributoname,podemosacceder
directamentealformulario:
<form name="formulario" > ... </form>
Formularios
PodemostambinaccederhaciendousodelasfuncionesDOM.
Formularios
Loseventosmscomunesson:
onclick: evento que se produce cuando se pincha con el ratn sobre
un elemento.
onchange: evento que se produce cuando el usuario cambia el
valor de un elemento de texto (<input type="text"> o <textarea>).
Tambin se produce cuando el usuario selecciona una opcin en una
lista desplegable (<select>). El evento se produce si despus de
realizar el cambio, el usuario pasa al siguiente campo del formulario.
onfocus: evento que se produce cuando el usuario selecciona un
elemento del formulario.
onblur: evento complementario de onfocus, ya que se produce
cuando el usuario ha deseleccionado un elemento por haber
seleccionado otro elemento del formulario.
Formularios
Obtenerelvalordeloscamposdeunformulario
Cuadro de texto y textarea
El valor del texto mostrado por estos elementos se obtiene y se establece
directamente mediante la propiedad value.
<textarea id="parrafo"></textarea>
var valor = document.getElementById("parrafo").value;
Formularios
Obtenerelvalordeloscamposdeunformulario
Radiobutton
Cuando se dispone de un grupo de radiobuttons, generalmente no se quiere
obtener el valor del atributo value de alguno de ellos, sino que lo
importante es conocer cul de todos los radiobuttons se ha seleccionado. La
propiedad checked devuelve true para el radiobutton seleccionado y false
en cualquier otro caso.
Formularios
Obtenerelvalordeloscamposdeunformulario
Checkbox
Son muy similares a los radiobutton, salvo que en este caso se debe
comprobar cada checkbox de forma independiente del resto.
Formularios
Obtenerelvalordeloscamposdeunformulario
Select
sobre un elemento.
onchange: evento que se produce cuando el usuario cambia el
Formularios
Restringirloscaracterespermitidos:
Formularios
Restringirloscaracterespermitidos:
// Obtener la tecla pulsada
var evento = elEvento || window.event;
var codigoCaracter = evento.charCode || evento.keyCode;
var caracter = String.fromCharCode(codigoCaracter);
// Comprobar si la tecla pulsada es alguna de las teclas especiales
// (teclas de borrado y flechas horizontales)
var tecla_especial = false;
for(var i in teclas_especiales) {
if(codigoCaracter == teclas_especiales[i]) {
tecla_especial = true; break; }
}
Formularios
Restringirloscaracterespermitidos:
// Comprobar si la tecla pulsada se encuentra en los caracteres permitidos
// o si es una tecla especial
return permitidos.indexOf(caracter) != -1 || tecla_especial;
}
// Slo nmeros
<input type="text" id="texto" onkeypress="return permite(event, 'num')" />
// Slo letras
<input type="text" id="texto" onkeypress="return permite(event, 'car')" />
// Slo letras o nmeros
<input type="text" id="texto" onkeypress="return permite(event, 'num_car')" />
Formularios
Validacin
Notificar los errores de forma inmediata mediante JavaScript
mejora la experiencia del usuario con la aplicacin) y ayuda a
reducir la carga de procesamiento en el servidor.