JavaScript
PROGRAMACIÓN PÁGINAS WEB
POO
• La programación orientada a objetos permite crear modelos basados en el
mundo real.
• Muchos lenguajes de programación (como Java, JavaScript, C#, C++, Python,
PHP, Ruby y Objective-C) soportan programación orientada a objetos (POO).
• La programación basada en prototipos es un estilo de programación orientada
a objetos en la que las clases no están presentes y se reutiliza comportamientos
de objetos. Este modelo también se conoce como programación sin clases,
orientada a prototipos o basada en ejemplos. JavaScript es un lenguaje basado
en objetos donde no se definen clases, solo objetos.
Objetos
• La utilización de "objetos" es un medio de organizar la información mediante
• Propiedades: Características que distinguen objetos del mismo tipo o clase
• Métodos: Tareas que se pueden efectuar con las propiedades de un tipo de
objeto
• Definimos personas • Definimos estudiantes
• Propiedades • Propiedades
• nombre • nombre
• edad • edad
• Métodos • Carrera
• comer • Métodos
• dormir • estudiar
Clases predefinidas en JavaScript
• Clases Predefinidas
• Clase String: Cada vez que se asigna una cadena de caracteres a una
variable, se crea un objeto de la clase String
• Clase Math: Se usa para efectuar cálculos matemáticos
• Clase Date: Para el manejo de fechas y horas
String
String
String
String
Date
Date
Date
Math
Math
Math
Funciones predefinidas
• La función eval() evalúa un código JavaScript
representado como una cadena de caracteres
• eval (string), sin referenciar a un objeto en
particular.
• isFinite
• La función global isFinite() determina si el
• IsNaN
valor que se le pasa como argumento es un
• parseInt y parseFloat (ya vistas) numero finito. Si es necesario, realiza una
conversión a un numero al parametro pasado.
• Number y String
• La función Number convierte a tipo de dato
• escape y un escape
numérico
• La función String convierte a tipo de dato
String
Funciones predefinidas
Modelo de objetos DOM
• El modelo de objeto de documento (DOM) es una interfaz de programación para los
documentos HTML y XML.
• Define la estructura lógica de los documentos y el modo en que se accede y manipula.
• Facilita una representación estructurada del documento y define de qué manera los
programas pueden acceder, al fin de modificar, tanto su estructura, estilo y contenido.
• El modelo de objeto de documento (DOM) de Javascript:
• Representa una estructura jerárquica de los objetos de un documento HTML.
• Permite hacer una referencia adecuada al objeto que se requiere.
Modelo de objetos DOM
Objetos integrados en el Navegador
• La mayoría parte del objeto base del navegador
• Window
• Location
• History
• Document
• Navigator
• Screen
Objeto Window
• Window: es el nivel más alto de la jerarquía de objetos de javascript.
• Atributos:
• MenuBar
• Location
• Statusbar
• Toolbar
• Métodos:
• Open(Url, nombre, atributos)
• Close()
Objeto Window
• En la sección script escriba la siguiente función:
function AbrirVentana() {
var opciones="left=100,top=100,width=250,height=150,toolbar=no,menubar=no";
[Link]('[Link] es Divertido',opciones);
}
• Agrega al botón el manejador de eventos onClick que llame a la función que acabamos
de crear.
<input type="button" name="cmd_abrir" value="Abrir" onClick="javascript:void(AbrirVentana());">
Objeto Location
• Este objeto contiene la URL actual así como algunos datos de interés
respecto a esta URL.
• Permite extraer información de una URL a través de sus atributos, como
hostname, href, port, protocol entre otras cosas.
• Dentro de la jerarquía de objetos es la tercera.
• Métodos:
• Reload()
• Replace(cadenaUrl)
Objeto Location
• En la sección script escriba la siguiente función:
function refresh()
{
[Link]();
}
• En el body insertar el manejador onClick y escribir los siguiente:
<input type="button" value=“Refrescar Ventana" onClick=“refresh()">
Objeto Location
• En la sección script escriba la siguiente función:
function infoUrl()
{
[Link]('Location href:' + [Link]);
}
• En el body insertar el manejador onLoad y escribir los siguiente:
<body onLoad=javascript:void(infoUrl())>
Objeto History
• Este objeto se encarga de almacenar una lista con los sitios por los que se ha estado
navegando.
• Atributos:
• Current.
• Next
• Length
• Previous
• Métodos:
• Back().
• Forward()
• Go(posición)
Objeto History
• En la sección script escriba la siguiente función:
function VolverUna() {
[Link](-1);
}
function VolverDos() {
[Link](-2);
}
Agrega al botón el manejador de eventos onClick que llame a las funciones:
<button onclick="VolverUna()">Volver 1 página</button>
<button onclick="VolverDos()">Volver 2 páginas</button>
Objeto Document
• 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.
• Atributos:
• Bgcolor
• Forms
• Title
• Métodos:
• Open()
• Close()
• Write()
• Writeln()
Objeto Document
• En la sección script escriba la siguiente función:
function setFocus() {
[Link][0].[Link]();
[Link][0].[Link]();
}
• En el body insertar el manejador onLoad y escribir los siguiente:
<form>
<input type=“text" name=“txt" size=“30” value=“Hola”>
<input type="button" value=“Seleccionar texto" onClick=“setFocus()”>
</form>
Objeto Navigator
• Este objeto simplemente nos da información relativa al navegador que
esté utilizando el usuario.
• Atributos:
• appName
• appVersion
• Métodos:
• Javaenbled()
Objeto Navigator
• En la sección script escribe la siguiente función:
function ValidarNav()
{
[Link]('Su navegador es:' + [Link]);
}
• Agrega el manejador de eventos onLoad al body y llame a la función
Javascript.
<body onLoad=javascript:void(ValidarNav())>
Objeto Screen
• Este objeto simplemente nos da información relativa a la pantalla del
usuario.
• Atributos:
• availHeight
• availWidth
• colorDepth
• height
• pixelDepth
• width
Objeto Screen
• En la sección script escribe la siguiente función:
[Link](“Resolución de pantalla <br>”);
[Link]([Link]+”*”+[Link]+”<br>”);
[Link](“Área visible disponible <br>”);
[Link]([Link]+”*”+[Link]+”<br>”);
[Link](“Resolución de color <br>”);
[Link]([Link]+”<br>”);
Acceso directo a nodos
Acceso directo a nodos. getElementById
• En la sección script escribe la siguiente función:
var nodo=[Link]( "intro" )
[Link]='red'
• En el body asignamos un id
<h3 id="intro">Introducción
Acceso directo a nodos. getElementById
• En la sección script escribe la siguiente función:
var nodo=[Link]( "intro" )
[Link]='red'
[Link]=function() {
[Link]='blue'
}
• En el body asignamos un id
<h3 id="intro">Introducción
Acceso directo a nodos. getElementById
• En la sección script escribe la siguiente función:
setTimeout( "[Link]('img1').src='[Link]'", 1000 )
• En el body asignamos un id
<img src="[Link]" id="img1">
Acceso directo a nodos. getElementById
• En la sección script escribe la siguiente función:
function cambia() {
var el=[Link]( "parrafo");
[Link]="Y lo cambio completamente"+
"<ol><li>aunque</li><li>también incluyo</li><li>una lista</li></ol>";
}
setTimeout( "cambia()", 1000 );
Acceso directo a nodos. getElementById
• En el body asignamos un id
<div id="parrafillo">
Este es un párrafo que contiene muchas cosas:
<ul>
<li>Una</li>
<li>lista</li>
</ul>
<table border=1><tr><td>Y una</td><td>tabla!</td></tr></table>
</div>
Acceso directo a nodos. getElementById
• En la sección script escribe la siguiente función:
var nodo=[Link]( "intro" )
alert( "PROPIEDADES del nodo intro:\n\n"+
"Tipo: "+[Link]+"\n"+
"Nombre: "+[Link]()+"\n"+
"Clase: "+[Link]+"\n"+
"Valor: "+[Link] )
• En el body asignamos un id
<h3 id="intro" class="titulo">Introducción</h3>
Acceso directo a nodos. getElementsByName
• En la sección script escribe la siguiente función:
function informarItemsElegidos(elemento) {
var elementosObtenidos = [Link](elemento);
var msg = 'Animales que has elegido que te gustan: ';
var elegidos = 0;
if (elementosObtenidos[0].checked) {msg = msg + elementosObtenidos[0].value; elegidos=elegidos+1;}
if (elegidos>=1 && elementosObtenidos[0].checked) {msg = msg + ', ';}
if (elementosObtenidos[1].checked) {
msg = msg + elementosObtenidos[1].value; elegidos=elegidos+1;}
if (elegidos>=1 && elementosObtenidos[1].checked) {msg = msg + ', ';}
if (elementosObtenidos[2].checked) {
msg = msg + elementosObtenidos[2].value; elegidos=elegidos+1;}
if (elegidos>=1 && elementosObtenidos[2].checked) {msg = msg + ', ';}
if (elementosObtenidos[3].checked) {
msg = msg + elementosObtenidos[3].value; elegidos=elegidos+1;}
if (elegidos == 0 ) {msg = '¡No has elegido ningún animal!';}
alert (msg+".");
}
Acceso directo a nodos. getElementsByName
• En el body
<form name ="formularioContacto" class="formularioTipo1" method="get" onsubmit="informarItemsElegidos('animal')">
<p>Elige los animales que te gusten:</p>
<input type="checkbox" name="animal" id="leon" value="leon" /> <label for="leon">León </label>
<input type="checkbox" name="animal" id="tigre" value="tigre" /> <label for="tigre">Tigre </label>
<input type="checkbox" name="animal" id="guepardo" value="guepardo" /> <label for="guepardo">Guepardo
</label>
<input type="checkbox" name="animal" id="jaguar" value="jaguar" /> <label for="jaguar">Jaguar </label>
<label>
<input type="submit" value="Enviar" />
</label>
</form>
Acceso directo a nodos. getElementByTagName
• En la sección script escribe la siguiente función:
function cambiofondo(i)
{
var array = [Link]("unico").getElementsByTagName("div");
if (array[i-1].[Link]=="green")
{array[i-1].[Link]="orange";}
else
{array[i-1].[Link]="green";}
}
Acceso directo a nodos. getElementByTagName
• En el body
<div id="unico" style="border:1px solid black;width:280px;text-align:center;margin:0 auto;padding-
top:10px;">Este es el div con el identificador</br></br>
<div style="border:1px solid black;width:130px;background:green;padding:10px;margin:0 auto;"
onmouseover="cambiofondo(1);" onmouseout="cambiofondo(1);">div interno 1</div>
<div style="border:1px solid black;width:130px;background:green;padding:10px;margin:0 auto;"
onmouseover="cambiofondo(2);" onmouseout="cambiofondo(2);">div interno 2</div>
</br></br>
</div>
Acceso directo a nodos. getElementsByClassName
• En la sección script escribe la siguiente función:
function cambiarColorFondo(elcolor) {
var contenedor = [Link]("div1");
var lista = [Link]("p");
for(var i=0; i<[Link]; ++i) {lista[i].[Link] = elcolor;}
}
function cambiarColorFondo1(elcolor) {
var contenedor = [Link]("div2");
var lista = [Link]("p");
for(var i=0; i<[Link]; ++i) {lista[i].[Link] = elcolor;}
}
Acceso directo a nodos. getElementsByClassName
• En la sección script escribe la siguiente función:
function cambiarColorFondo2(elcolor) {
var lista = [Link]("div3");
for(var i=0; i<[Link]; ++i) {lista[i].[Link] = elcolor;}
}
function cambiarP(elcolor) {
var lista = [Link]("p");
for(var i=0; i<[Link]; ++i) {lista[i].[Link] = elcolor;}
}
Acceso directo a nodos. getElementsByClassName
• En el body
<p>Algo de texto</p> <p>Algo de texto</p>
<div id="div1">
<p>Algo de texto en div1</p> <p>Algo de texto en div1</p>
</div>
<div id="div2">
<p>Algo de texto en div2</p> <p>Algo de texto en div2</p>
</div>
<div class="div3">
<p>Algo de texto en div3</p> <p>Algo de texto en div3</p>
</div>
Acceso directo a nodos. getElementsByClassName
• En el body
<input type="button" value="Cambiar a rosa los id=div1 y p" onClick="cambiarColorFondo('pink')"> <br>
<input type="button" value="Cambiar a blue los id=div2 y p" onClick="cambiarColorFondo1('blue')“> <br>
<input type="button" value="Cambiar a yellow los class=div3" onClick="cambiarColorFondo2('yellow')"> <br>
<input type="button" value="Cambiar a green los p" onClick="cambiarP('green')"> <br>
innerHTML
• La propiedad [Link] devuelve o establece la sintaxis HTML
describiendo los descendientes del elemento.
innerHTML
• En la sección script escribe la siguiente función:
function cambiar() {
[Link]("demo").innerHTML = "Párrafo cambiado";
[Link]("demo1").innerHTML = "Párrafo1 cambiado";
}
• En el body:
<p id="demo">Esto es un texto</p>
<p>Esto es un texto</p>
<p id="demo1">Esto es un texto</p>
<p>Esto es un texto</p>
<p>Esto es un texto</p>
<input type="button" value="Cambiar texto" onClick="cambiar()">
innerHTML
• En la sección script escribe la siguiente función:
function convertir(){//Cojo la fecha en formato 2/7/2018 y la muestro en formato 2 de Julio de 2018
var fecha=[Link]('fecha');
var resultado=[Link]('resultado');
var partes=[Link]('/');
var meses=['', 'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre', 'octubre',
'noviembre', 'diciembre'];
var dia=partes[0]; //Separamos las diferentes partes
var mes=meses[partes[1]];
var anyo=partes[2];
[Link]=dia+' de '+mes+' de '+anyo; //Volcamos la informacion
}
innerHTML
• En el body:
<input type="text" id="fecha">
<button onclick="convertir();">Convertir fecha</button>
<hr>
<div id="resultado"></div>
¿Qué es un evento?
• Un evento es el resultado de la interacción entre un usuario con algún elemento
de la interfaz gráfica que se le presenta.
• Hacer ‘clic’ en un botón
• Presionar tecla en una caja de texto
• Cambiar el contenido de un campo de texto.
• Mover el apuntador del ratón sobre un enlace.
• ¿Por que se genera una señal? Para poder controlar que ocurrirá cuando se
produce
• Al cerrar una página se muestra mensaje
• Al pulsar botón se limpian casillas de text
Capturar un evento
• Los eventos en javascript permiten al
• ¿Como capturar un evento?
programador mas flexibilidad a la
• Con ‘handlers’ o manejadores
hora de validar datos y restringir
onClick, onLoad, onDblClick… ‘movimientos’ de usuario
• Para cada tipo de evento hay que tener en • Los eventos suceden a tres niveles:
mente tres elementos:
• A nivel del documento HTML
• Quién lo genera
• A nivel de un formulario individual
• Cuándo ocurre
• Cuál es el manejador de eventos que se • A nivel de un elemento de un
debe utilizar formulario
Modelo de Eventos de JavaScript
• El código manejador esta en el interior del código html
• Patrón
<‘Etiqueta’ ‘manejador’=‘codigo a ejecutar’>
• Ejemplo
<input type="button" value=" Pulsar boton “
onClick="[Link]('Hola mundo!')";>
Modelo de Eventos de JavaScript
• El evento es gestionado por una sección de código en JavaScript (Gestor de Eventos)
• La declaración de Gestores de Eventos es similar a los atributos en HTML
<BODY onLoad="cargarfuncion()" onUnload="descargarfuncion()">
<FORM name="nombre_del_formulario" ...
onSubmit="función_o_sentencia">
<INPUT type="button" name="mycheck" value="HA!" onClick= "alert(‘No
pulses’)">
Eventos
• Dentro de los eventos podemos destacar:
• onClick: cuando el usuario hace un click en un elemento. • onChange, el valor de un campo de formulario cambia
• onLoad: la página se carga en el browser. • onKeyPress, cuando el usuario pulsa una tecla
• onBlur: el usuario sale del campo de un formulario. • onMove, cuando se mueve una ventana o un marco
• onSubmit: cuando un formulario va a ser enviado. • onSelect, cuando se selecciona texto o área de texto
• onMouseOver: cuando se mueve el mouse sobre el elemento.
• onUnload, el usuario cierra la página
• onMouseOut: cuando se mueve el mouse fuera del elemento.
• onReset, cuando el usuario limpia el formulario
• onFocus: al coger el foco un control
• onMouseDown, cuando el usuario pulsa el botón del
• onResize: al cambiar el tamaño la ventana
ratón
onClick
<html>
<head>
<title>Ejemplo onClick</title>
</head>
<body>
<input type="button" value=" Pulsar boton para saludo... " onClick="[Link]('Hola mundo!')";>
</body>
</html>
onClick
• En la sección script escribe la siguiente función:
function confirmar() {
return confirm("Esta página es para mayores de 18 años ¿lo cumples?")
}
• En el body:
<a href="[Link] onclick="return confirmar()">El
mundo</a>
onClick
• En la sección script escribe la siguiente función:
function imprime() {
[Link]();
}
• En el body:
<input type="button" value="imprimir" onClick="imprime()">
onLoad
• En la sección script escribe la siguiente función:
[Link]=inicio;
function inicio() {
[Link]("formulario1").onsubmit=validar; }
function validar() {
var usu=[Link]("usuario").value;
var cla=[Link]("clave").value;
if ([Link]==0 || [Link]==0) {
alert('El nombre de usuario o clave está vacío');
return false; }
else
return true; }
onLoad
• En el body:
<form method="post" action="[Link]" id="formulario1">
Introduce nombre:
<input type="text" id="usuario" name="usuario" size="20">
<br>
Introduce clave:
<input type="password" id="clave" name="clave" size="20">
<br>
<input type="submit" id="confirmar" name="confirmar" value="Confirmar">
onBlur
<html>
<head>
<title>Ejemplo onBlur</title>
</head>
<body>
<input type="text" size=30 name="texto" value="Al perder foco muestra mensaje" onBlur = " alert('Hola');">
<input type="text" size=30 name="texto1" value=“Otro texto">
</body>
</html>
onBlur
• Solicitar un nombre y clave. Mostrar una alerta si la clave tiene menos de 7 caracteres o
más de 20
onSubmit
<HTML>
<HEAD>
<TITLE>Ejemplo onSumbit</TITLE>
</HEAD>
<BODY>
<form name="miFormulario" action=[Link]
onSubmit="alert('Has pulsado enviar.'); return false;">
<input type="submit" value="Enviar" name="enviar">
</form>
</BODY>
</HTML>
onMouseOver onMouseOut
<html>
<head>
</head>
<body>
<script language="JavaScript">
function pintar(col) {
[Link]=col;
}
</script>
<a href="[Link]" onMouseOver="pintar('#ff0000')" onMouseOut="pintar('#ffffff')">Rojo</a>
<a href="[Link]" onMouseOver="pintar('#00ff00')" onMouseOut="pintar('#ffffff')">Verde</a>
<a href="[Link]" onMouseOver="pintar('#0000ff')" onMouseOut="pintar('#ffffff')">Azul</a>
</body>
</html>
onFocus
<html>
<head>
<title>Ejemplo onFocus</title>
</head>
<body>
<center>
<input type=“text" value=" Al coger foco muestra mensaje... " onFocus="[Link]('Hola')";>
</center>
</body>
</html>
onResize
<html>
<head>
<title>Ejemplo onResize</title>
</head>
<body onResize="alert('Hola mundo');">
</body>
</html>
onChange
<html>
<head>
<title>Ejemplo onChange</title>
</head>
<body>
<input type="text" size=30 name="texto" value="Al modificar texto mensaje" onChange = " alert('Hola');">
</body>
</html>
onKeyPress
<html>
<head>
<title>Ejemplo onKeyPress</title>
</head>
<body>
<input type="text" size=30 name="texto" value="Al pulsar tecla mensaje" onKeyPress = " alert('Hola ');">
</body>
</html>
onMove
<html>
<head>
<title>Ejemplo onMove</title>
</head>
<body>
<input type="text" size=30 name="texto" value="Al mover muestra mensaje" onMove = " alert('Hola');">
</body>
</html>
onSelect
<html>
<head>
<title>Ejemplo onSelect</title>
</head>
<body>
<input type="text" size=30 name="texto" value="Al seleccionar texto muestra mensaje" onSelect = " alert('Hola');">
</body>
</html>
onUnload
<html>
<head>
<script language="JavaScript">
function Salida() {
if (confirm('¿Estás seguro de que quieres abandonar este script?'))
return true;
else {
return false;}
}
</script>
</head>
<body bgcolor="white" onUnload="Salida()"> </body>
</html>
onReset
<html>
<head>
<title>Ejemplo onReset</title>
</head>
<body>
<input type="text" size=30 name="texto" value="Al borrar muestra mensaje" onReset = " alert('Hola');">
<input type="reset" size=30 name="boton" value=“Borrar…" onClick = "[Link] = '';" >
</body>
</html>
onMouseDown
<html>
<head>
<title>Ejemplo onMouseDown</title>
</head>
<body>
<input type="text" size=30 name="texto" value="Pulsar botón aquí para mensaje" onMouseDown = " alert('Hola');">
</body>
</html>
addEventListener
• addEventListener() Registra un evento a un objeto en específico.
• El Objeto especifico puede ser un simple elemento en un archivo, el mismo
documento , una ventana o un XMLHttpRequest.
addEventListener
• Realizar un
programa que
muestre en un
div el número 2.
Cada vez que se
hace doble click
duplicar el valor
del contenido del
div
addEventListener
• Elaborar un
programa que
muestre un div
en color rojo.
Cuando se
presione, cambiar
color a amarillo y
al soltar volverlo
a rojo