Clase Virtual3

ASI
M0
9
UF1
Clase 3
UF1: Lenguajes de guiones de servidor
El mdulo consta de 2 UFs repartidas en 7

clases:
Libro: Implantacin de Aplicacin Web ed. RA-MA
UF1: Lenguajes de guiones de servidor
Arquitectura de aplicaciones web y preparacin del entorno de desarrollo
(Temas 1 y 2)
Diseo del contenido y la apariencia de documentos web (Tema 11)
Programacin de documentos web utilizando lenguajes de script
del cliente (Tema 12)
Programacin de documentos web utilizando lenguajes de script de
servidor: PHP (Tema 13)
Acceso a bases de datos desde lenguajes de script de servidor (Tema 14)
UF2: Implantacin de gestores de contenidos

Gestores de contenidos (Temas 3, 4, 5, 6, 7, 8, 9)
Implantacin de aplicaciones de ofimtica web (Tema 10)
www.ucoc.es
Clases
1a jueves 15/01/15
2a jueves 29/01/15
3a jueves 12/02/15
4a jueves 26/02/15
5a jueves 12/03/15
6a jueves 26/03/15
7a jueves 9/04/15
Uso del foro!!
www.ucoc.es
www.ucoc.es
TEMA 12
PROGRAMACIN DE DOCUMENTOS
WEB UTILIZANDO LENGUAJES DE
SCRIPT DE CLIENTE
www.ucoc.es
REQUISITOS
PC Windows, Linux, OSX
Editor de textos:
Editores con pocas funcionalidades: Bloc de
notas
Aplicaciones WYSIWYG (Lo que ves es lo que
obtienes): Dreamweaver
Permiten escribir un documento viendo
directamente el resultado final.
Navegador web
www.ucoc.es
OBJETIVOS
Incluir JavaScript en HTML
Conocer la sintaxis de JavaScript
repasando conceptos de programacin en
general
Validar formularios HTML con JavaScript
www.ucoc.es
Qu es JavaScript?
JavaScript es un lenguaje interpretado, por lo que
no es necesario compilar los programas para
ejecutarlos.
Se utiliza principalmente para crear pginas
dinmicas.
Una pgina dinmica es aquella que incorpora
animaciones, acciones que se activan al pulsar
botones y ventanas con mensajes de aviso
www.ucoc.es
HISTORIA
A principios de los aos 90, los usuarios de Internet
se conectaban con conexiones muy lentas.
Empezaban a desarrollarse las primeras aplicaciones
web y stas ya empezaban a incluir formularios.
Con una navegacin lenta y aplicaciones cada
vez ms complejas, surgi la necesidad de un
lenguaje que se ejecutara en el lado del usuario, en
el navegador. De esta manera si un formulario no era
rellenado de forma correcta por el usuario, no se le
haca esperar mucho tiempo hasta que el servidor
volviera a mostrar el formulario indicando los errores
existentes.
www.ucoc.es
HISTORIA
Fue desarrollado por Brendan Eich de Netscape

con el nombre oficial de Mocha, fue renombrado
a LiveScript y finalmente a JavaScript.
Microsoft cre otro lenguaje para competir con
l, al que llam Jscript. Netscape para evitar
una guerra de tecnologas decidi estandarizar
su lenguaje JavaScript.
Hoy en da JavaScript se ha convertido en uno de
los lenguajes de programacin ms populares de
Internet. La llegada libreras y de AJAX ha hecho
que se aumente su uso.
www.ucoc.es
COMO INCLUIR JAVASCRIPT EN XHTML

La integracin de JavaScript y XHTML es muy flexible, ya
que existen varias formas para incluir cdigo JavaScript en
las pginas web.
Incluir JavaScript en el mismo documento XHTML
Definir JavaScript en un archivo externo
Incluir JavaScript en los elementos XHTML
Incluir JavaScript en el mismo documento

XHTML
El cdigo JavaScript se encierra entre etiquetas<script>y
se incluye en cualquier parte del documento. Aunque es
correcto incluir cualquier bloque de cdigo en cualquier
zona de la pgina, se recomienda definir el cdigo
JavaScript dentro de la cabecera del documento (dentro de
la etiqueta<head>)
www.ucoc.es
Incluir JavaScript en el mismo documento X

Este mtodo se emplea cuando se define un
bloque pequeo de cdigo, o cuando se quieren
incluir instrucciones especficas en un
determinado documento HTML. Por ejemplo: si
queremos completar las instrucciones y funciones
que se incluyen por defecto en todos los
documentos del sitio web.
El principal inconveniente es que si se quiere
hacer una modificacin en el bloque de cdigo, es
necesario modificar todas las pginas que
incluyen ese mismo bloque de cdigo JavaScript.
www.ucoc.es
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" />
<title>Ejemplo de cdigo JavaScript en el propio
documento</title>
<script type="text/javascript">
alert("Un mensaje de prueba");
</script>
</head>
<body>
<p>Un prrafo de texto.</p>
</body>
</html>
Para que la pgina resultante sea vlida, es necesario

aadir el atributotypea la etiqueta<script>. Los valores
que se incluyen en el atributotypeestn estandarizados y
para el caso de JavaScript, el valor correcto
estext/javascript.
www.ucoc.es

Las instrucciones JavaScript se pueden incluir en un
archivo externo de tipo JavaScript que los documentos
XHTML enlazan mediante la etiqueta<script>. Se pueden
crear todos los archivos JavaScript que sean necesarios y
cada documento XHTML puede enlazar tantos archivos
JavaScript como necesite.
Adems del atributotype, este mtodo requiere definir el
atributosrc, que es el que indica la URL correspondiente
al archivo JavaScript que se quiere enlazar. Cada
etiqueta<script>solamente puede enlazar un nico
archivo, pero en una misma pgina se pueden incluir
tantas etiquetas<script>como sean necesarias.
www.ucoc.es

Los archivos de tipo JavaScript son documentos
normales de texto con la extensin.js
Se pueden crear con cualquier editor de texto
como Notepad, Wordpad, Nano, etc.
La principal ventaja de enlazar un archivo
JavaScript externo es que se simplifica el cdigo
XHTML de la pgina, y se puede reutilizar el
mismo cdigo JavaScript en todas las
pginas del sitio web. Cualquier modificacin
realizada en el archivo JavaScript se ve reflejada
en todas las pginas que lo enlazan.
www.ucoc.es

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Ejemplo de cdigo JavaScript en el propio
documento</title>
<script type="text/javascript"
src="/js/codigo.js"></script>
</head>
<body> <p>Un prrafo de texto.</p> </body>
</html>
www.ucoc.es
Incluir JavaScript en los elementos XHTML

Este mtodo es el menos utilizado, consiste en incluir trozos de
JavaScript dentro del cdigo XHTML de la pgina.
El mayor inconveniente de este mtodo es
queensuciainnecesariamente el cdigo XHTML de la pgina y
complica el mantenimiento del cdigo JavaScript. En general,
este mtodo slo se utiliza para definir algunos eventos.
<head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>Ejemplo de cdigo JavaScript en el propio documento</title>
</head>
<body>
<p onclick="alert('Un mensaje de prueba')">Un prrafo de
texto.</p>
</body>
</html>
htmlJavascript.html
www.ucoc.es
NOSCRIPT
Algunos navegadores no disponen de soporte completo de
JavaScript, otros navegadores permiten bloquearlo parcialmente
e incluso algunos usuarios bloquean completamente el uso de
JavaScript, creen que as navegan de forma ms segura.
El lenguaje HTML define la etiqueta<noscript>para mostrar un
mensaje al usuario cuando su navegador no puede ejecutar
JavaScript. El siguiente cdigo muestra un ejemplo del uso de la
etiqueta<noscript>:
<head> ... </head> <body> <noscript>
<p>Bienvenido</p> <p>La pgina requiere JavaScript.
Actvalo.</p> </noscript> </body>
La etiqueta<noscript>se debe incluir en el interior de la
etiqueta<body>(normalmente se incluye al principio
de<body>). El mensaje que muestra<noscript>puede incluir
cualquier elemento o etiqueta XHTML.
www.ucoc.es
POSIBILIDADES Y LIMITACIONES DE JAVASCRIPT

Los autores de HTML, a menudo no son programadores y JavaScript
es un lenguaje de programacin con una sintaxis muy simple,
cualquiera puede poner pequeos scripts en sus pginas HTML.
JavaScript puede poner texto dinmico en una pgina HTML.
Puede configurarse para que se ejecute cuando sucede algo, como
cuando carga una pgina, cuando un usuario hace clic en un
elemento HTML, JavaScript puede reaccionar a los eventos
JavaScript puede leer y modificar el contenido de un elemento
HTML
Se puede utilizar para validar los datos del formulario antes de
ser enviados a un servidor. Esto ahorra al servidor tiempo de
procesamiento adicional
Es capaz de detectar el navegador del visitante y dependiendo del
navegador cargar otra pgina diseada especficamente para ese
navegador
Se puede utilizar para crear cookies y almacenar y recuperar as,
informacin en el ordenador del visitante
www.ucoc.es
EL PRIMER SCRIPT
En este ejemplo, el script se incluye como un bloque de cdigo
dentro de una pgina XHTML. Aunque el cdigo del script se
puede incluir en cualquier parte de la pgina, se recomienda
incluirlo en la cabecera del documento, es decir, dentro
de la etiqueta<head>.
El cdigo JavaScript se debe incluir entre las
etiquetas<script>...</script>. Es necesario definir el
atributotypede la etiqueta<script> como text/javascript.
Una vez definida la zona en la que se incluir el script, se
escriben todas las sentencias que forman la aplicacin. Este
primer ejemplo es tan sencillo que solamente incluye una
sentencia:alert("Bienvenidos a IAW!");.
La instruccinalert()es una de las utilidades que incluye
JavaScript. Permite mostrar un mensaje en la pantalla del
usuario. Este primer script mostrar una ventana con el
mensaje"Bienvenidos a IAW!".
www.ucoc.es
EL PRIMER SCRIPT
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-88591" />
<title>El primer script en JavaScript de IAW</title>
<script type="text/javascript">
alert("Bienvenidos a IAW!");
</script>
</head>
<body>
<p>Esta pgina contiene el primer script en JavaScript de la asignatura de
IAW</p>
</body>
</html>
www.ucoc.es
EL PRIMER SCRIPT
En Internet Explorer
En Google Chrome
www.ucoc.es
PRIMER SCRIPT EN FICHEROS SEPARADOS

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" />
<title>Ejemplo 1 - Archivo JavaScript externo</title>
<script type="text/javascript" src="codigo.js"></script>
</head>
<body>
<p>Esta pgina contiene el primer script en JavaScript de la asignatura
de IAW</p>
</body>
</html>
www.ucoc.es
codigo.js
//Al cargarse el archivo JavaScript, se muestra un
mensaje
alert("Bienvenidos a IAW");
Ejemplo:
ejemplo1.html
www.ucoc.es
SINTAXIS
No se tienen en cuenta los espacios y las lneas nuevas: como sucede
con XHTML, el intrprete de JavaScript ignora cualquier espacio
en blanco sobrante, por lo que el cdigo se puede ordenar para
entenderlo mejor (tabulado, comentarios)
Se distinguen las maysculas y minsculas, con lo que si
intercambiamos minsculas por maysculas el script no funciona.
No se define el tipo de las variables: No hace falta indicar el tipo
de dato que almacenar. De esta forma, una misma variable
puede almacenar diferentes tipos de datos.
No es necesario terminar las sentencias con ; aunque es
conveniente seguir la tradicin de terminar las sentencias con el
carcter ;
Los comentarios de una sola lnea se hacen con // y los de multilnea
con /* */. Hay que tener cuidado con los comentarios, ya que esa
informacin se enva al navegador del usuario, aunque no se
visualiza.
www.ucoc.es
Sintaxis bsica
VARIABLES
Las variables en JavaScript se declaran mediante la palabra
reservadavar. Despus veremos cuando una variable es local o
global.
No es obligatorio inicializar las variables cuando se declaran.
El nombre de una variable tambin se conoce como identificador y
debe cumplir las siguientes normas:
Slo puede estar formado por letras, nmeros y los smbolos $ y _
El primer carcter no puede ser un nmero
Variable correcta: var _$numero;

Variable incorrecta: var 1numero;
Valores que se les puede asignar a las variables:
Cadenas de texto: Siempre se encierran entre comillas. Dobles o
simples.
Numricas: 5, -10, 1.6
Booleanas: true or false
www.ucoc.es
Variables
Asignacin de valor
Numricas:
Se utilizan para almacenar integerso floats. El valor se asigna
indicando directamente el nmero entero o decimal. Los decimales
utilizan el carcter.para separar la parte entera de la parte
decimal
Var total = 552.80;
Cadenas de texto:
Se utilizan para almacenar caracteres, palabras o frases de texto. Se
encierra el valor entre comillas dobles o simples, para delimitar su
comienzo y su final
Var mensaje = Bienvenidos a IAW
Si el texto contiene comillas simples o dobles, se debe encerrar el
texto con las comillas simples o dobles que no utilice el texto:
Var mensaje = Bienvenidos a la asignatura de \IAW\ del mdulo de
ASIX
www.ucoc.es
Variables
A veces las cadenas de texto contienen tanto comillas
simples como dobles, adems existen caracteres difciles
de incluir en las variables de texto. Entonces se sustituye el
carcter problemtico por una combinacin de caracteres.
Nueva lnea
\n
Tabulador
\t
Comilla simple \
Comilla doble \
Barra inclinada \\
Ejemplo:
Var mensaje = Bienvenidos a la asignatura de \IAW\ del
mdulo de ASIX
www.ucoc.es
Arrays
Es una zona de almacenamiento continuo, que almacena una
serie de elementos. Si necesitamos guardar una serie de valores
es preferible hacerlo con un array que no tener que declarar
muchas variables.
Cmo se define un array?
Var paises = [Alemania, Francia, Italia, Holanda, Espaa,
Portugal];
Cmo acceder a una posicin del array?
Var pais = paises[5];
Recordar que en los arrays las posiciones empiezan por 0. La
variable pais contendr el valor Portugal.
paises.html
www.ucoc.es
OPERADORES
Los operadores permiten realizar operaciones con el contenido de
las variables, modificar su valor, compararlas As los programas,
pueden realizar clculos aritmticos y hacer comparaciones lgicas.
Asignacin
El smbolo es = y se utiliza para guardar un valor en una variable. A la
izquierda del = se indica el nombre de la variable, a la derecha otra variable o
el valor.
Var resultado = 100;
Matemticos
Los operadores son: suma +, resta -, multiplicacin *, divisin /, mdulo %
(resto de la divisin)
Var numero1 = 15;
Var numero2 = 5;
Resultado = numero1 + numero2; //resultado = 20
Resultado = numero1 numero2; //resultado = 10
Resultado = numero1 * numero2; //resultado = 75
Resultado = numero1 / numero2; //resultado = 3
Resultado = numero1 % numero2; //resultado = 0
www.ucoc.es
OPERADORES
Los operandos matemticos se pueden combinar con el operador
de asignacin:
Var Resultado = 10;
resultado += 5; //resultado = 15
resultado -= 5; //resultado = 5
resultado *= 5; //resultado = 50
resultado /= 5; //resultado = 2
resultado %= 5; //resultado = 0
Incremento y decremento
Se utilizan para incrementar o decrementar las variables numricas
en una unidad. Los operandos se pueden poner antes o despus
de las variables, y el resultado puede ser diferente:
resultado = 10;
++resultado; //Resultado = 11
resultado--; //Resultado = 10
www.ucoc.es
OPERADORES
Diferencias entre poner los operandos delante o detrs de las
variables:
Var numero1 = 10;
Var numero2 = 5;
Resultado = numero1++ + numero2 // resultado = 15. numero1 = 11.
Resultado =++numero1 + numero2 // resultado = 16. numero1 = 11.
Negacin !
Booleana
variable = true;
!variable = false;
Numrica
var numero1 = 5;
resultado = !numero1; //false. Si negamos cualquier numero diferente de 0 el
resultado es false
Texto
var texto = Bienvenidos a IAW;
resultado = !texto; //false. Si negamos una cadena de texto que no esta vaca
el resultado es false
www.ucoc.es
OPERADORES
AND
El resultado de esta operacin lgica, es true si los dos
operandos son true, es false en cualquier otro caso. El
smbolo es &&
Var operando1 = true;
Var operando2 = true;
Resultado = operando1 && operando2; //resultado = true
OR
El resultado de esta operacin lgica, es false si los dos
operandos son false, es true en cualquier otro caso. El
smbolo es ||
Var operando1 = false;
Var operando2 = false;
Resultado = operando1 && operando2; //resultado = false
www.ucoc.es
OPERADORES
Relacionales
Los operadores relacionales son: mayor que >, menor que <, mayor
o igual que =>, menor o igual que =<, igual que == y diferente
de !=
Var numero1 = 10
Var numero2 = 5;
Resultado = numero1 >= numero2 //resultado = true
Resultado = numero1 == numero2 //resultado = false
www.ucoc.es
ESTRUCTURAS DE CONTROL
Estructura if
Si se cumple la condicin, se ejecutarn las instrucciones
contenidas entre las llaves{}
If(condicion){
Instrucciones
}
Estructura ifelse
Si se cumple la condicin, se ejecutarn las instrucciones
contenidas contenidas dentro del if. Si la condicin no se
cumple se ejecutarn las instrucciones contenidas dentro
del else.
if(condicion){
Instrucciones
}
else{
Instrucciones
}
www.ucoc.es
La estructura ifelse se puede encadenar para realizar varias
comprobaciones seguidas:
If(condicion) {
Instrucciones
}
Else if(condicion) {
Instrucciones
}
Else if(condicion) {
Instrucciones
}
Else {
Instrucciones
}
dni.html
www.ucoc.es
Si la estructura pasa a tener muchas condiciones, en lugar de
utilizar ifelse, es ms eficiente utilizar la estructura switch,
est diseada para hacer mltiples comprobaciones de una
sola variable.
Switch(variable) {
Case valor1:
Break;
Case valor2:
Break;
Case valor_n:
Break;
Default:
Break;
}
www.ucoc.es
Estructura de repeticin: for

Cuando sabemos el nmero de veces que queremos que se
repita un bucle, utilizaremos el bucle for:
For(inicializacion; condicion; actualizacion) {
Instrucciones
}
Var paises = [Alemania, Francia, Italia, Holanda, Espaa,

Portugal];
For(var i = 0; i < 6; i++) {
Alert(paises[i]);
}
Bucle for in:
For(i in paises) {
Alert(paises[i]);
}
Esta estructura es ms adecuada para arrays, evita poner la
inicializacin y condicin y funciona con cualquier longitud del
array.
factorial.html
www.ucoc.es
Estructura de repeticin: while

Permite crear bucles que se repiten mientras se cumpla la
condicin.
While(condicion){
Instrucciones
}
Estructura de repeticin: dowhile

Es similar al bucle while pero en este caso siempre se ejecutan las
instrucciones del bucle al menos una vez. Como la condicin se
evala al final del bucle, al menos la primera vez, las instrucciones
del bucle se ejecutan.
Do{
Instrucciones
}while(condicion);
www.ucoc.es
FUNCIONES BASICAS DE JAVASCRIPT

Cadenas de texto
lenght se utiliza para saber la longitud de una cadena de texto.
Var mensaje = Bienvenidos a la asignatura de IAW;
Var totalCaracteres = mensaje.length; //totalCaracteres = 34
Concatenar cadenas de texto
Var mensaje1 = Bienvenidos a la asignatura de ;
Var mensaje2 = IAW;
Var mensajeFinal = mensaje1 + mensaje2;
Var mensajeFinal = mensaje1.concat(mensaje2);
Transformar todos los caracteres de una cadena de texto, en maysculas:
Var mensajeFinal = mensajeFinal.toUpperCase();
Transformar todos los caracteres de una cadena de texto, en minsculas:
Var mensajeFinal = mensajeFinal.toLowerCase();
Obtener el carcter de una posicin determinada:
Var caracter = mensajeFinal.charAt(0); //carcter = B
Calcular la posicin en la que se encuentra un carcter indicado, en la
cadena de texto:
Var posicion = mensajeFinal.indexOf(B); // posicion = 0
www.ucoc.es
CADENAS DE TEXTO
Calcular la ltima posicin en la que se encuentra un carcter en
una cadena de texto. Si no encuentra el valor devuelve -1
Var posicion = mensajeFinal.lastIndexOf(W);
Extraer una subcadena de una cadena de texto
Var subcadena = mensajeFinal.substring(1, 7); //subcadena =
ienveni
Si slo se indica un valor, retorna la subcadena a partir de esa
posicin hasta el final de la cadena de texto
Convertir una cadena de texto en un array de cadenas de
texto
Split(separador) el separador indica el carcter que separa
Var texto = mensajeFinal.split( ); //texto = [Bienvenidos, a, la,
asignatura, de, IAW]
Var saludo = Bienvenidos;
Var letras = saludo.split(); //letras = [B, i, e, n, v, e, n,
i, d, o, s]
www.ucoc.es
FUNCIONES PARA ARRAYS

Calcular el nmero de elementos de un array
Var numeroPaises = paises.lenght; //numeroPaises = 6
Concatenar elementos de varios arrays
Var laborables = [Lunes, Martes, Mircoles, Jueves,
Viernes];
Var festivos = [Sbado, Domingo];
Var semana = laborables.concat(festivos);
Unir todos los elementos de un array para formar una cadena
de texto
Var texto = semana.join( ); //texto = Lunes Martes Mircoles
Jueves Viernes Sbado Domingo
Eliminar el ltimo elemento del array
Var ultimo = semana.pop();
Aadir un elemento al final del array
Var ultimo = semana.push(Domingo);
www.ucoc.es
FUNCIONES PARA ARRAYS

Eliminar el primer elemento del array
Var primero = semana.shift(); //primero = Lunes
Aadir un elemento al principio del array
Array.unshift(Lunes);
Modificar el array colocando sus elementos en orden
inverso
Semana.reverse(); //semana = [Domingo, Sbado,
Viernes, Jueves, Mircoles, Martes, Lunes]
www.ucoc.es
FUNCIONES PARA NMEROS

Javascript utiliza el valor NaN para indicar un valor numrico no
definido
Alert(0/0); //Se muestra NaN
Proteger a la aplicacin de posibles valores numricos no definidos
Var divisor = 0;
Var dividendo = 0;
If(isNaN(dividendo/divisor)) {
Alert(Divisin no definida);
}Else {
Alert(La divisin es: + dividendo/divisor);
}
www.ucoc.es
FUNCIONES PARA NMEROS

Infinity: hace referencia a un valor infinito positivo. Infinity para los
infinitos negativos
Var dividendo = 5
Var divisor = 0
Alert(dividendo/divisor); //Se muestra el valor Infinity
toFixed(tamao): devuelve el nmero con tantos decimales como el

valor de tamao
Var pi = 3.1415
Pi.toFixed(3); //3.141
www.ucoc.es
FUNCIONES
Cuando una aplicacin pasa a ser compleja es probable que
haya
instrucciones que tengan que repetirse. El
cdigo pasa a ser ms largo de lo necesario debido a las
instrucciones repetidas, y si se quiere modificar algo se
tiene que hacer en todas las instrucciones repetidas. Para
solucionar este problema se utilizan las funciones. El cdigo
se escribe una vez y se llama a la funcin las veces que la
tengamos que utilizar.
Su definicin es:
Function nombreFuncion() {
Instrucciones
}
Para realizar la llamada a la funcin:
nombreFuncion();
www.ucoc.es
FUNCIONES
Parmetros y valores de retorno
A las funciones se le pueden pasar variables para ser usadas
dentro de las
funciones, estas variables son los parmetros y van escritas
entre los parntesis
de las funciones.
El orden de los parmetros (argumentos) es importantsimo,
el primer argumento que se le indica en la llamada de la
funcin, es el primer valor que espera la funcin y as
sucesivamente.
Ejemplo:
Function nombreFuncion(arg1, arg2){
Instrucciones
}
Llamada a la funcin:
nombreFuncion(arg1, arg2);
Las funciones adems de recibir parmetros tambin pueden

devolver valores.
www.ucoc.es
Para ello se utiliza la palabra reservada return. Es importante
FUNCIONES
Function nombreFuncion(arg1, arg2){
Instrucciones
return variable;
}
Llamada a la funcin:
Var resultado = nombreFuncion(arg1, arg2);
parImpar.html
www.ucoc.es
MBITO DE LAS VARIABLES

El mbito de una variable define la zona del programa en que
se define la variable y donde es accesible. Las variables
pueden tener mbito local o mbito global.
En el siguiente ejemplo, aparecer un mensaje?
function creaMensaje () {
var mensaje = "Segundo mensaje IAW";
}
creaMensaje();
alert(mensaje);
www.ucoc.es

Y ahora?
function creaMensaje() {
var mensaje = "Mensaje IAW";
alert(mensaje);
}
creaMensaje();
La variable mensaje es local de la funcin creaMensaje.

ambito.html
Variables locales o globales

Las variables definidas dentro de funciones pueden ser locales
o globales. Si en el interior de una funcin, las variables se
declaran mediante la palabra reservada var, stas variables
son locales pero si se declaran sin la palabra var pasan a ser
globales.
Si una variable se declara fuera de una funcin, sta variable,
es global aunque se haya definido mediante la palabra
www.ucoc.es
reservada var.

Recomendacin: definir siempre que se pueda las
variables como locales.
ambitoGlobal.html
www.ucoc.es
EVENTOS
Los scripts esperan a que el usuario haga algo (mover el
ratn, pulsar un botn, cerrar una ventana), entonces el
script responde a la accin del usuario procesando una
informacin y generando un resultado.
JavaScript define numerosos eventos que permiten una
interaccin completa entre los usuarios y las aplicaciones
web. JavaScript permite asignar una funcin event handler
o manejador de eventos a cada uno de los eventos.
El nombre de cada evento se construye mediante el
prefijoon, seguido del nombre en ingls de la accin
asociada al evento. El evento que ms familiar os puede
resultar es el evento onclick (clicar un elemento con el
ratn).
www.ucoc.es
EVENTOS
Los eventos ms utilizados sononloadpara esperar a que se

cargue la pgina por completo,
onclick,onmouseover,onmouseoutpara controlar el ratn y
onsubmitpara controlar el envo de los formularios.
tablaEventos.html
En los formularios el evento que ms vamos a usar es el:

onsubmit
<form action="demo_form.asp" onsubmit=Validar()">
Nombre: <input type="text" name="nombre">
<input type="submit" value="Validar">
</form>
www.ucoc.es
FORMULARIOS
Una de las principales tareas de JavaScript es la de

validar los datos de los formularios directamente en el
navegador del usuario. De esta forma, se evita recargar
la pgina cuando el usuario comete errores al rellenar
los formularios.
Una forma de acceder a los formularios de una pgina

es a travs de su nombre (atributoname) o a travs de
su atributoid.
Los elementos de los formularios tambin se pueden

acceder directamente mediante su atributoname:
<form name="formulario">
<input type="text" name="elemento" />
</form>
formcss.html
www.ucoc.es
function validar(formulario){
if(blanco(telefono.value)==false){
alert("Introduzca el Telfono por favor.")
telefono.focus();
return false;
}
otras funciones que validan los otros campos
}
function blanco(campo){
if (campo=="" || campo==null){
return false;
else
return true;
}
www.ucoc.es
EXPRESIONES REGULARES
Son una serie de caracteres que forman un patrn, para
poder comparar ste patrn con otro conjunto de
carcteres y ver las coincidencias que se producen.
Ya tenis que haber usado patrones otras veces, por ejemplo
con el comando grep de Linux, cuando queris buscar algo
en un fichero, o en DOS cuando hacis un dir *.*, donde el
patrn * coincide con cualquier cadena de carcteres.
expresion.html
Si alguien quiere profundizar en el tema:
expresionesRegulares.html
Ejemplo final: formcss.html
www.ucoc.es
Preguntas?
www.ucoc.es

Clase Virtual3

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Clase Virtual3

Caricato da

Copyright:

Formati disponibili

ASI

UF1: Lenguajes de guiones de servidor

El mdulo consta de 2 UFs repartidas en 7

UF2: Implantacin de gestores de contenidos

Fue desarrollado por Brendan Eich de Netscape

COMO INCLUIR JAVASCRIPT EN XHTML

Incluir JavaScript en el mismo documento

Incluir JavaScript en el mismo documento X

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Para que la pgina resultante sea vlida, es necesario

Definir JavaScript en un archivo externo

Definir JavaScript en un archivo externo

Definir JavaScript en un archivo externo

Incluir JavaScript en los elementos XHTML

POSIBILIDADES Y LIMITACIONES DE JAVASCRIPT

PRIMER SCRIPT EN FICHEROS SEPARADOS

Variable correcta: var _$numero;

Estructura de repeticin: for

Var paises = [Alemania, Francia, Italia, Holanda, Espaa,

Estructura de repeticin: while

Estructura de repeticin: dowhile

FUNCIONES BASICAS DE JAVASCRIPT

FUNCIONES PARA ARRAYS

FUNCIONES PARA ARRAYS

FUNCIONES PARA NMEROS

FUNCIONES PARA NMEROS

toFixed(tamao): devuelve el nmero con tantos decimales como el

Las funciones adems de recibir parmetros tambin pueden

MBITO DE LAS VARIABLES

MBITO DE LAS VARIABLES

La variable mensaje es local de la funcin creaMensaje.

Variables locales o globales

MBITO DE LAS VARIABLES

Los eventos ms utilizados sononloadpara esperar a que se

En los formularios el evento que ms vamos a usar es el:

Una de las principales tareas de JavaScript es la de

Una forma de acceder a los formularios de una pgina

Los elementos de los formularios tambin se pueden

Potrebbero piacerti anche