Front Clase 4

Front End –Politécnico Gran Colombiano
FRONT END
Sesión 4
JavaScript.
2
Lenguaje de tipo script compacto, basado en

objetos y guiado por eventos diseñado
específicamente para el desarrollo de aplicaciones
cliente-servidor dentro del ámbito de Internet.
• Los programas JavaScript van incrustados en los

documentos HMTL, y se encargan de realizar
acciones en el cliente, como pueden ser pedir
datos, confirmaciones, mostrar mensajes, crear
animaciones, comprobar campos de formulario.
3
Versiones
• El programa que va a interpretar los
programas JavaScript es el navegador.
4
5
Estándar ECMASCript
Javascript como lenguaje es estandarizado por la organización

"ECMA International". Esta empresa se dedica a la creación de
estándares para la comunicación y el tratamiento de información. Uno
de sus más conocidos estándares es ECMAScript.
ECMAScript es el estándar de definición del lenguaje Javascript, que

cualquier cliente que soporte Javascript debe de soportar. A lo largo
del tiempo se han ido publicando distintas versiones de ECMAScript,
siendo la última más extendida ECMAScript 2015, también conocido
por ES6. ES6 es soportado por todos los navegadores actuales,
excepto Internet Explorer. Por lo tanto, si programas con soporte a IE,
no podrías usar en principio ES6.
6
Para incluir lenguaje JavaScript en una página.
La forma mas frecuente de hacerlo es utilizando la

etiqueta <script>
El formato es el siguiente:
<script language="Javascript 1.3"> .
El atributo lenguaje hace referencia a la versión de

JavaScript que se va a utilizar en dicho script.
7
Otro atributo de la directiva script es src, que puede usarse

para incluir un archivo externo que contiene JavaScript y que
quiere incluirse en el código HTML.
<script language="JavaScript" src ="archivo.js"> </script>
El archivo externo simplemente es un archivo del texto que

contiene código JavaScript, y cuyo nombre acaba con la
extensión js.
8
Puede incluirse también código

JavaScript como respuesta a
algún evento:
<input type="submit"
onclick="alert('Acabas de hacer
click');return false;"
value="Click">
9
VENTAJAS Y
DESVENTAJAS
• Los script tienen capacidades

limitadas, por razones de seguridad,
por lo cual no es posible hacer todo con
Javascript, sino que es necesario usarlo
conjuntamente con otros lenguajes
evolucionados, posiblemente más
seguros, como Java.
10
• Un problema importante es que el código

es visible y puede ser leído por
cualquiera, incluso si está Protegido con
las leyes del copyright.
11
• El código Javascript se ejecuta en el

cliente por lo que el servidor noes
solicitado más de lo debido; un script
ejecutado en el servidor, sin embargo,
sometería a éste a dura prueba y los
servidores de capacidades más limitadas
podrían resentir de una continua solicitud
por un mayor número de usuarios.
12
• El código del script debe descargarse

completamente antes de poderse
ejecutar y ésta es la otra cara de la
moneda de lo que hemos dicho
anteriormente: si los datos que un script
utiliza son muchos, el tiempo que tardará
en descargarse será muy largo, mientras
que la interrogación de la misma base de
datos en el servidor sería más rápida.
13
Características
Es un lenguaje interpretado que se embebe en

una página web HTML.
Un lenguaje interpretado significa que a las

instrucciones las analiza y procesa el
navegador en el momento que deben ser
ejecutadas.
14
• ES IMPORTANTISIMO TENER EN
CUENTA QUE JavaScript es
SENSIBLE A MAYUSCULAS Y
MINUSCULAS. NO ES LO MISMO
ESCRIBIR:
document.write que
DOCUMENT.WRITE (la primera
forma es la correcta, la segunda
forma provoca un error de sintaxis).
. 15
• Para imprimir caracteres sobre la página

debemos llamar al comando 'write' del objeto
document.
• La información a imprimirse debe ir entre
comillas y encerrada entre paréntesis. Todo lo
que indicamos entre comillas aparecerá tal cual
dentro de la página HTML.
• Cada vez que escribimos una instrucción

finalizamos con el carácter punto y coma.
16
GRAMATICA
17
18
Las variables son nombres que ponemos a los

lugares donde almacenamos la información.
En JavaScript, deben comenzar por una letra o

un subrayado (_), pudiendo haber además
dígitos entre los demás caracteres.
Una variable no puede tener el mismo nombre
de una palabra clave del lenguaje.
19
Una variable se define anteponiéndole la palabra clave var:
var numero;
Se pueden declarar varias variables en una misma línea:

var num1, num2 ;
A una variable se la puede definir e inmediatamente

inicializarla con un valor:
var edad=20;
//
var edad;
edad=20;
20
• El objeto document es el que tiene el

contenido de toda la página que se está
visualizando.
• Esto incluye el texto, imágenes,
enlaces, formularios.
21
• Propiedades
• alinkColor. Esta propiedad tiene almacenado el color de los enlaces
activos
• anchors. Se trata de un array con los enlaces internos existentes en
el documento
• applets. Es un array con los applets existentes en el documento
• bgColor. Propiedad que almacena el color de fondo del documento
• cookie. Es una cadena con los valores de las cookies del
documento actual
• domain. Guarda el nombre del servidor que ha servido el
documento
• embeds. Es un array con todos los EMBED del documento
• fgColor. En esta propiedad tenemos el color del primer plano
22
• forms. Se trata de un array con todos los formularios del

documento. Los formularios tienen a su vez elementos (cajas de
texto, botones, etc) que tienen sus propias propiedades y métodos,
y serán tratados en el siguiente capítulo.
• images. Array con todas las imágenes del documento
• lastModified. Es una cadena con la fecha de la última modificación
del documento
• linkColor. Propiedad que almacena el color de los enlaces
• links. Es un array con los enlaces externos
• location. Cadena con la URL del documento actual
• referrer. Cadena con la URL del documento que llamó al actual, en
caso de usar un enlace.
• title. Cadena con el título del documento actual
• vlinkColor. Propiedad en la que se guarda el color de los enlaces
visitados
23
• Métodos
• clear(). Limpia la ventana del documento
• open(). Abre la escritura sobre un
documento.
• close(). Cierra la escritura sobre el
documento actual
• write(). Escribe texto en el documento.
• writeln(). Escribe texto en el documento, y
además lo finaliza con un salto de línea 24
• Impresión de variables en una página

HTML.
Para mostrar el contenido de una variable
en una página utilizamos el objeto
document y llamamos a la función write.
En el siguiente ejemplo definimos una
serie de variables y las mostramos en la
página:
25
<script language="JavaScript">
var nombre=‘Mi nombre';
var edad=23;
var altura=1.92;
document.write(nombre); document.write('<br>');
document.write(edad); document.write('<br>');
document.write(altura); document.write('<br>');
</script> 26
Entrada de datos por teclado tenemos la función prompt
• <script language="JavaScript">
• var nombre;
• var edad;
• nombre=prompt('Ingrese su nombre:','');
• edad=prompt('Ingrese su edad:','');
• document.write(nombre);
• document.write(' tienes ');
• document.write(edad);
• document.write(' años');
• </script>
27
• eval(string)
Esta función recibe una cadena de caracteres y la
ejecuta como si fuera una sentencia de Javascript.
• parseInt(cadena,base)
Recibe una cadena y una base. Devuelve un valor
numérico resultante de convertir la cadena en un
número en la base indicada.
• parseFloat(cadena)
Convierte la cadena en un número y lo devuelve.
• isNaN(número)
Devuelve un boleano dependiendo de lo que recibe por
parámetro. Si no es un número devuelve un true, si es
un numero devuelve false. 28
29
30
31
32
Acumuladores
• <script language="javascript">
• var x=1;
• var suma=0;
• var valor;
• while (x<=5)
• {
• valor=prompt('Ingrese valor:','');
• valor=parseInt(valor);
• suma=suma+valor;
• x=x+1;
• }
• document.write("La suma de los valores es "+suma+"<br>");
</script>
33
Una función es un conjunto de instrucciones que resuelven

una parte del problema y que puede ser utilizado (llamado)
desde diferentes partes de un programa.
Consta de un nombre y parámetros.

Con el nombre llamamos a la función.
Los parámetros son valores que se envían y son
indispensables para la resolución del mismo.
La función realizará alguna operación con los parámetros
que se envian.
Se puede cargar una variable, consultarla, modificarla,
imprimirla, etc.
34
• function <nombre de función>(argumento1,

argumento2, ..., argumento n)
• {
• <código de la función>
• }
35
• Funciones con parámetros
36
• <script language="javascript">
• function limites(v1,v2)
• {
• var i;
• for(i=v1;i<=v2;i++)
• {
• document.write(i+' ');
• }
• }
• var valor1,valor2;
• valor1=prompt('Ingrese limite 1:','');
• valor1=parseInt(valor1);
• valor2=prompt('Ingrese limite 2:','');
• valor2=parseInt(valor2);
• limites(valor1,valor2);
• </script>
37
• Los eventos se usan para invocar

instrucciones. Así, el script se ejecuta
secuencialmente, pero, para conseguir
introducir el carácter dinámico e
interactivo, debe cargarse en memoria y
activarse o invocarse sólo cuando se
verifican situaciones particulares como el
ratón que pasa, un documento que se
carga. 38
• El evento onFocus
• se dispara cuando el objeto toma foco y el
evento onBlur cuando el objeto pierde el
foco.
.
39
• El evento onMouseOver se ejecuta

cuando pasamos la flecha del mouse
sobre un hipervínculo y el evento
onMouseOut cuando la flecha abandona
el mismo.
40
• El evento onLoad se ejecuta cuando

cargamos una página en el navegador.
Uno de los usos más frecuentes es para
fijar el foco en algún control de un
formulario, para que el operador no tenga
que activar con el mouse dicho control.
41
• El lenguaje JavaScript permite agrupar

funciones y disponerlas en un archivo separado
a la página HTML.
Esto trae muchos beneficios:
- Reutilización de funciones en muchos
archivos. No tenemos que copiar y pegar
sucesivamente las funciones en las páginas en
las que necesitamos.
- Facilita el mantenimiento de las funciones al
encontrarse en archivos separados.
- Nos obliga a ser más ordenados.
42
• Validación
La principal utilidad de JavaScript en el manejo de los

formularios es la validación de los datos introducidos
por los usuarios.
Antes de enviar un formulario al servidor, se

recomienda validar mediante JavaScript los datos
insertados por el usuario.
De esta forma, si el usuario ha cometido algún error

al rellenar el formulario, se le puede notificar de forma
instantánea, sin necesidad de esperar la respuesta
del servidor. 43
.
• Evento onSubmit
• La validación de campos de formulario se
basa en capturar el momento en que el
usuario realiza el envío de los datos del
formulario cuando pulsa sobre el botón de
enviar.
• El botón de envío de datos se codifica con
HTML mediante un tipo especial de objeto
de formulario, llamado submit. 44
• Cuando el usuario pulsa sobre el botón

de enviar, se genera el evento submit,
asociado al envío de datos de un
formulario.
• JavaScript proporciona un mecanismo
para capturar este evento, que permite
ejecutar un script justo antes de que se
realice el envío de los datos.
• La forma de capturar el evento consiste
en introducir el atributo onSubmit en la
etiqueta del formulario cuyo evento
submit queremos capturar.
45
Ejemplo
46
Realizar este formulario en DW
47
• Datos del formulario
• <p><FORM NAME="f" METHOD="get" ACTION="j.php"

onSubmit="return valida(this);">
• Introduzca cadena de texto:<BR>
• <INPUT TYPE="text" NAME="campo" size="8"><BR>
• <INPUT TYPE="submit" name="validar" value="Validar">
• </FORM>
• </p>
48
Definir dentro del body el siguiente script
<script>
function verificar(contenido)
{
for ( i = 0; i < contenido.length; i++ )
{
if ( contenido.charAt(i) != " " )
{
return true ;
}
}
return false ;
//valida que el campo no este vacio y no tenga solo espacios en blanco

function valida(f) {
if( verificar(f.campo.value) == false ) {

alert("Introduzca un cadena de texto.")
return false ;
} else {
alert("Ha ingresado los datos correctamente")
//cambiar la linea siguiente por return true para que ejecute la accion del formulario
return true ;
}
}
</script>
49
Donde f es el nombre del formulario y campo es el
El objeto form.
Este objeto es el contenedor de todos los

elementos del formulario.
50
Propiedades
– action. Es una cadena que contiene la URL del parámetro

ACTION del form, es decir, la dirección en la que los datos del
formulario serán procesados.
– elements. Es un array que contiene todos los elementos del
formulario, en el mismo orden en el que se definen en el
documento HTML. Por ejemplo, si en el formulario hemos
puesto, en este orden, una caja de texto, un checkbox y una
lista de selección, la caja de texto será elements[0], el
checkbox será elements[1] y la lista de selección será
elements[2].
– method. Es una cadena que tiene el nombre del método con
el que se va a recibir/procesar la información del formulario
(GET/POST).
51
Métodos
• reset(). Resetea el formulario: tiene el

mismo efecto de un botón de tipo
RESET dispuesto en el form.
• submit(). Envía el formulario: tiene el
mismo efecto que si pulsáramos un
botón de tipo SUBMIT dispuesto en el
form.
52
EJEMPLOS
53
<!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=iso-8859-1" /> <title>Ejercicio 2 - Mostrar
mensajes complejos</title> <script
type="text/javascript"> var mensaje = "Hola Mundo! \n
Qué facil es incluir \'comillas simples\' \n y \"comillas
dobles\" "; alert(mensaje); </script> </head> <body>
<p>Esta página muestra un mensaje complejo</p>
</body> </html>
54
• Realizar el formulario en DW
55
Modificar el botón enviar
<input name="enviar" type= "button"

value="Enviar Comentarios"
onclick="validarEmail(this.form.email.value);
validar();" />
El texto resaltado en rojo corresponde a la

función de validación definida dentro del
javascript.
56
Dentro del <head> </head> se definen las funciones
<script>
function validarEmail(valor) {
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(valor)){
return (true);
} else {
alert("El email es incorrecto.");
return (false);
}
}
function validar(){
if((document.formulario.nombres.value.length == 0)||(document.formulario.email.value.length
== 0)){
alert('Hay campos incorrectos o vacios');
return;
}
document.formulario.submit();
}
</script>
57
Ejemplo validación valor numérico
Utilizando isNan y getElementById
Función isNaN
La función isNaN evalúa un argumento para determinar si éste no es un número (isNaN [not a number]). La sintaxis para isNaN es:
isNaN(Valor_a_probar)
58
• Método getElement.by
Document.getElement.by
• permite obtener la referencia a un
elemento de la página mediante el id de
dicho elemento.
59
• <body>
• <form action=“j.html">
• <textarea rows="20" cols="40"
id="areadetexto">Texto del área de
texto</textarea>
• <input type="button" value="Contenido del
TextArea"
onClick="alert(document.getElementById('area
detexto').value);">
• </form>
• </body> 60
61
• <body>
• <script>
• function validar_numero(valor)
• {
• valor = document.getElementById("campo").value;
• if(isNaN(valor))
• {
• alert("El dato ingresado debe ser numérico.")
• return false;
• }
• else
• {
• document.form1.submit();
• }
• }
• </script>
62
<form id="form1" name="form1" method="post" action="prueba.html" >

<p>DIGITE UN NUMERO
<label>
<input type="text" name="campo" id="campo" />
</label>
</p>
<p>
<label>
<input type="button" name="Enviar" id="Enviar" value="Enviar"
onclick="validar_numero(this)" />
</label>
</p>
<p> </p>
<p> </p>
</form> 63
• Archivos externos de Javascript

• La mecánica para implementar estos
archivos externos en JavaScript es:
• Crear un archivo con extensión *.js y

llamarlo dentro del script.
64
• https://uniwebsidad.com/libros/javascript/c
apitulo-11/ejercicio-7
• https://ifgeekthen.everis.com/es/los-
mejores-javascript-frameworks
65

Front Clase 4

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

Front Clase 4

Cargado por

Copyright:

Formatos disponibles

Front End –Politécnico Gran Colombiano

Lenguaje de tipo script compacto, basado en

• Los programas JavaScript van incrustados en los

Javascript como lenguaje es estandarizado por la organización

ECMAScript es el estándar de definición del lenguaje Javascript, que

Para incluir lenguaje JavaScript en una página.

La forma mas frecuente de hacerlo es utilizando la

<script language="Javascript 1.3"> .

El atributo lenguaje hace referencia a la versión de

Otro atributo de la directiva script es src, que puede usarse

<script language="JavaScript" src ="archivo.js"> </script>

El archivo externo simplemente es un archivo del texto que

Puede incluirse también código

• Los script tienen capacidades

• Un problema importante es que el código

• El código Javascript se ejecuta en el

• El código del script debe descargarse

Es un lenguaje interpretado que se embebe en

Un lenguaje interpretado significa que a las

• Para imprimir caracteres sobre la página

• Cada vez que escribimos una instrucción

Las variables son nombres que ponemos a los

En JavaScript, deben comenzar por una letra o

Una variable se define anteponiéndole la palabra clave var:

Se pueden declarar varias variables en una misma línea:

A una variable se la puede definir e inmediatamente

• El objeto document es el que tiene el

• forms. Se trata de un array con todos los formularios del

• Impresión de variables en una página

Entrada de datos por teclado tenemos la función prompt

Una función es un conjunto de instrucciones que resuelven

Consta de un nombre y parámetros.

• function <nombre de función>(argumento1,

• Funciones con parámetros

• Los eventos se usan para invocar

• El evento onMouseOver se ejecuta

• El evento onLoad se ejecuta cuando

• El lenguaje JavaScript permite agrupar

La principal utilidad de JavaScript en el manejo de los

Antes de enviar un formulario al servidor, se

De esta forma, si el usuario ha cometido algún error

• Cuando el usuario pulsa sobre el botón

Realizar este formulario en DW

• Datos del formulario

• <p><FORM NAME="f" METHOD="get" ACTION="j.php"

Definir dentro del body el siguiente script

//valida que el campo no este vacio y no tenga solo espacios en blanco

if( verificar(f.campo.value) == false ) {

Este objeto es el contenedor de todos los

– action. Es una cadena que contiene la URL del parámetro

• reset(). Resetea el formulario: tiene el

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

Modificar el botón enviar

<input name="enviar" type= "button"

El texto resaltado en rojo corresponde a la

Dentro del <head> </head> se definen las funciones

Ejemplo validación valor numérico

Utilizando isNan y getElementById

<form id="form1" name="form1" method="post" action="prueba.html" >

• Archivos externos de Javascript

• Crear un archivo con extensión *.js y

También podría gustarte