Scribd
Cargar
31 vistas61 páginas

Java Script

JavaScript es un lenguaje de programación esencial para el desarrollo web, que complementa HTML y CSS al proporcionar comportamiento y dinamismo a las páginas. Permite manipular el contenido HTML, validar formularios y gestionar eventos, así como utilizar variables, operadores y funciones para realizar diversas operaciones. El documento también incluye ejemplos de cómo implementar JavaScript en una página web y ejercicios propuestos para practicar su uso.

Cargado por

adansancho
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
31 vistas61 páginas

Java Script

JavaScript es un lenguaje de programación esencial para el desarrollo web, que complementa HTML y CSS al proporcionar comportamiento y dinamismo a las páginas. Permite manipular el contenido HTML, validar formularios y gestionar eventos, así como utilizar variables, operadores y funciones para realizar diversas operaciones. El documento también incluye ejemplos de cómo implementar JavaScript en una página web y ejercicios propuestos para practicar su uso.

Cargado por

adansancho
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 61

JavaScript

CFGS DAM
Módulo: Lenguajes de Marcas
Índice de contenido
● ¿Que es javascript?
● Usos de javascript
● Cómo utilizar javascript
● Salida de datos con javaScript
○ Alert
○ document.write
○ innerHTML
● Comentarios
● Variables
○ Utilización de Variables
● Operadores
● Operando con los elementos existentes en una web
● Ejercicios Propuestos
¿ Que es JAvascript
● Se trata de uno de los lenguajes de programación más
utilizados para programación web
● Complementa el uso de HTML y CSS.
● Con HTML creamos la estructura del documento
● Con CSS le damos estilo y formato
● Con JAVASCRIPT le damos comportamiento y dinamismo.
Usos de javascript
● Con JavaScript (js) podemos hacer cosas como:
○ Controlar de forma dinámica el contenido HTML de una
página

document.getElementById(‘elemento’).innerHTML=”Hola
mundo” [....]

○ Cambiar los atributos de las etiquetas HTML existentes


en un documento

document.getElementById(‘idimagen’).src=”ruta_nueva_image
n” [...]
Usos de javascript
● Cambiar los estilos asociados a las etiquetas HTML
existentes en un documento.

document.getElementById(“elemento”).innerHTML=”Hola
mundo” [....]

● Validar elementos de formularios html

document.getElementById("elmentoformulario").value; [....]
como utilizar javascript
● Existen dos formas de incluir código javascript en una
página web
○ Directamente con la etiqueta <script>.....</script> puesta en el body
o en el head

<html>
<html> <head>
<body> <script>
<h1>Mi primer script</h1> alert(‘mi segundo script’);
<script> </script>
alert(‘mi primer script’); </head>
</script> <body>
</body> <h1>Mi segundo script</h1>
</html> </body>
</html>
como utilizar javascript
● Poniendo el código javascript en un fichero externo con
extensión .js y haciendo referencia a el desde nuestra
página web con la etiqueta <script src=’fichero.js’></script>

<html>
fichero.js <head>
<script src=’fichero.js’></script>
</head>
alert (‘hola mundo’); <body>
<h1>Mi segundo script</h1>
<script src=’fichero.js’></script>
</body>
</html>
salida de datos con javascript
● JavaScript permite la salida (escritura) de datos
mediante los siguientes mecanismos:
○ Función alert(‘mensaje de salida’);
■ alert (‘error’);
■ alert (5+6);
○ Función document.write(“texto”)
■ document.write(“hola a todos”)
■ document.write(“<h1>Hola a todos</h1>”);
■ document.write(“<table><tr><td>esto es una
tabla</td></tr></table>”)

La función alert solo permite mostrar mensajes a modo de információn o advertencia en una ventana
emergente.
La función document.write sirve para escribir dentro del body y admite escritura de etiquetas html
salida de datos con javascript
● Función innerHTML
○ Sirve para “incrustar” código HTML en un elemento que existe
previamente dentro del body. Para poder hacer esta operación se hace
uso de la función document.getElementById(‘idelemento’).innerHTML de
<head> JavaScript
<script>
function completar()
{
document.getElementById(‘parrafo’).innerHTML=”<h1>esto es un párrafo</h1>”;
document.getElementById(‘capa’).innerHTML=”<p style=’background-color:red’>esto es una capa</p>”
}
</script>
</head>
<body>
<p id=’parrafo’></p>
<div id=’capa’></capa>
<script>completar();</script>
</body> OJO!! cuando en una cadena de caracteres necesitemos insertar una
comilla tendremos la precaución de que NO SEAN comillas del
mismo tipo con el que hemos iniciado la cadena de caracteres
funciones
● Son fragmentos de código fuente que sirven para organizar
nuestros scripts de javascript y que pueden ser invocadas
tantas veces como se necesiten desde cualquier parte de
una web.
● La sintaxis general de una función es:

function nombre_funcion (parametro1, parametro2,...parametron)


{
//código de la función Los parámetros son valores que
reciben las funciones cuando
return valor Con el comando return la son invocadas. Se podrán usar
} función puede devolver dentro de ellas como variables.
valores a quien la invocó. El
comando return es opcional
comentarios
● Un comentario es un fragmento de texto que carece de
valor a la hora de ejecutar un script de javascript.
● Los comentarios de una sola línea se pueden poner con la
secuencia //
○ alert (‘esto es una sentencia’); // esto es un comentario
● Los comentarios de varias líneas se pueden indicar con la
secuencia /* */
/* esto es un comentario
de varias lineas que se
cerrará justo aquí */
alert (‘esto es una sentencia que está fuera del comentario’)
variables
● Una variable sirve para almacenar valores que
utilizaremos en nuestros scripts
● En javaScript podemos declarar una variable simplemente
asignando un valor
○ x = 10.25;
○ y= ‘esto es “una” variable de cadena y además tiene comillas doble’
○ t=”esto también ‘es una variable’ con comillas simples dentro”
○ z=true
○ vector=[‘ana’,’luis’,’pedro’]
○ texto=”<table><tr><td>tabla</td></tr></table>”
○ codigo=”<h1 style=’color:red’>hola texto</h1>”
ojo!! cuando en una cadena de caracteres haya que
introducir comillas tendremos la precaución de que no
sean del mismo tipo que las que abren dicha cadena de
caracteres.
variables
● Opcionalmente podemos crear variables sin asignarle un
valor, haciendo uso de la sentencia var

var x;
Nótese que las variables
x=10.05; que guardan cadenas de
var y= ‘esto es una variable de cadena’; caractéres hay que
var t; entrecomillarlas.
t=”esto también es una variable de cadena”
var z;
z=true;
var vector;
vector=[“ana”,”pedro”,”luis”];
El carácter decimal en variables numéricas es el .
Las variables de tipo cadena de caractéres van entrecomilladas
Las variables de tipo booleano NO van entrecomilladas
Utilización variables
● Almacenar valores y mostrarlos en alguna función de
salida
<body>
<div id=”resultado”></div>
<script>
var x =10; Con innerHTML podemos insertar código html
en cualquier lugar de un documento html.
alert(x);
document.write(x);
document.getElementById(‘resultado’).innerHTML=’<h1>’+x+’</h1>’
</script>
Para entrelazar código html con variables se usa el operador + que sirve para concatenar cadenas de
caracteres. No se puede usar el valor de la variable directamente en una cadena de caracteres.
Utilización variables
<body> Un uso muy provechoso
<table id='tabla'> de las variables es
para almacenar
<tr>
fragmentos de css o
<td>esta tabla tendrá formato al ejecutar el script</td>
html que podemos
</tr> utilizar en múltiples
</table> zonas de una web
<script>
var estilo = "background-color:lightgrey;border-collapse:collapse;border-
style: 1 px solid red;"
document.getElementById(‘tabla’).style=estilo;
</script>
</body>
Utilización variables
● Otra versión más elegante del ejercicio anterior
<head>
<script>
function formato()
{
var estilo="table {background-color:lightgrey;border-collapse:collapse;border: 1px solid red}"
document.write("<style>"+estilo+"</style>");
}
</script>
</head>
<body>
<script>formato();</script>
<table id='tabla'>
<tr>
<td>esta tabla tendrá formato al ejecutar el script</td>
</tr>
</table>
</body>
Operadores
● Operador de asignación =
● Operador de suma y concatenación de cadenas +
● Operador de resta -
● Operador de multiplicación *
● Operador de división /
● Operador resto de la división %
● Incremento unario ++
● Decremento unario --
● Operadores de acumulación += -= /= *=
Operadores
● Operador de asignación =
○ Sirve para establecer valores en las variables
■ x=10
■ y=10.05
■ z=”cadena de caracteres”
● Operador de suma y concatenación +
○ Sirve para sumar valores numéricos
■ x=10+5 // resultado 15
■ y=10.05+20 // resultado 30.05
○ Pero también se usa para concatenar valores de tipo cadena
■ x=”hola” + “ mundo” // x guardará “hola mundo”
■ y=5 + “hola” // y guardará “5hola”
■ z=”<table><tr><td>”+x+”</td></tr></table>” //z guardará la cadena
“<table><tr><td>hola mundo</td></tr></table>”
Operadores
● Operador de resta -
○ Sirve para restar valores numéricos
■ x=10-5 // resultado 5
■ y=10.05-20 // resultado -10.05
● Operador *
○ Sirve para multiplicar
■ x=10*5 //resultado 50
● Operador /
○ Sirve para hacer la división de valores numéricos
■ x=5/2 //resultado 2.5
● Operador %
○ Devuelve el resto de la división entera
■ x=4%2 //resultado 0
■ y=5%2 //resultado 1
Operadores
● Incremento unario ++
○ Sirve para incrementar en uno una variable numérica
■ x=20;
■ x++; //x ahora tendrá el valor 21
● decremento unario --
● Sirve para incrementar en uno una variable numérica
○ x=20;
○ x--; //x ahora tendrá el valor 19
● Operadores de acumulación
○ Sirven para operar sobre un valor ya existente
■ x=10
● x+=10 // es equivalente a x=x+10-> 20
● x-=10 // es equivalente a x=x-10->0
● x/=2 // es equivalente a x=x/2->5
● x*=10 // es equivalente a x=x*10->100
Operando con elementos existentes en una web
● Muchas veces necesitamos recoger los valores o atributos
de elementos que existen en el body de nuestra web para
operar con ellos.
● Desde JavaScript podemos buscar y acceder a elementos
dentro de nuestro body:
○ Mediante el id del elemento document.getElementById(‘idelemento’)
○ Mediante el nombre de una etiqueta
document.getElementsByTagName(‘etiquetaHTML’)
○ Mediante la clase CSS a la que pueda pertenecer
document.getElementsByClassName(‘claseCSS’)
Operando con elementos existentes en una web
● Por el momento utilizaremos solamente la función
document.getElementById(‘idelemento’)
● El éxito de su funcionamiento se basa en que dentro del body aquellos elementos
con los que queramos trabajar tengan asignado el atributo id.
● Un posible uso es extraer valores de elementos de un formulario html mediante la
propiedad value

<body>
<p id=’parrafo’></p> Asignamos los id a dos elementos input del
<input id=’nombre’ type=”text” /> body
<input id=’apellidos’ type=”text” />
<script> Obtenemos los valores de los cuadros de
texto mediante la propiedad value y los
cuadro1=document.getElementById(‘nombre’).value;
cuadro2=document.getElementById(‘apellidos’).value guardamos en dos variables
document.write(cuadro1+’<br>‘+cuadro2);
usamos los valores para la
</script>
operación que queramos
</body>
Operando con elementos existentes en una web
● Otro uso es modificar un atributo de una etiqueta html

<body>
<p id=’parrafo’></p> Asignamos los id a la imagen que
<img id=’imagen’ src=”” ></img> inicialmente no tiene asignada la propiedad
<script> src
imagen=document.getElementById(‘nombre’);
imagen.src=’/ruta-de-la-imagen’; Guardamos la imagen completa en una
imagen.height=100; variable y luego tratamos dicha variable
imagen.width=200; como si fuera la imagen cambiándole
</script> propiedades como la ruta el ancho o el alto
</body>
Ejercicios Propuestos
1. Crear una web que llame a un script de javaScript que dibuje una tabla de
una fila y una columna sobre un div llamado resultado.
2. Modificar el ejercicio anterior para que el script contenga una variable
de cadena de caracteres que guarde la cadena necesaria para darle color de
fuente azul y tamaño 12 pto a la tabla del ejercicio anterior, así como un
borde simple de 1px azul. Las filas pares tendrán color de fondo
diferente.
3. Crear una web que tenga dos cuadros de texto y un botón y hacer un script
de javaScript para que cuando hagamos click sobre él se muestre con la
función alert la suma de lo escrito en ambos cuadros de texto. Para
convertir una variable a número puedes utilizar la función
parseInt(variable).
4. Modificar el ejercicio anterior para que en lugar del alert con la función
innerHTML se muestre en una tabla el contenido de cada cuadro de texto y
el resultado de la suma
Índice de contenido
● Funciones en JavaScript
● Eventos
● Estructuras de control JavaScript
○ Condicionales
■ if
■ switch
○ Bucles
■ for
■ while
funciones
● Son fragmentos de código fuente que sirven para organizar
nuestros scripts de javascript y que pueden ser invocadas
tantas veces como se necesiten desde cualquier parte de
una web.
● La sintaxis general de una función es:

function nombre_funcion (parametro1, parametro2,...parametron)


{
//código de la función Los parámetros son valores que
reciben las funciones cuando
return valor Con el comando return la son invocadas. Se podrán usar
} función puede devolver dentro de ellas como variables.
valores a quien la invocó.
funciones
● Algunas recomendaciones cuando trabajamos con funciones:
○ El return no es obligatorio
○ Los parámetros son valores que se convierten en variables dentro de
la función. Cuando la función termina los parámetros se destruyen.
○ No poner nombres raros a las funciones, no utilizar caracteres como
$,.%&/() ni comenzar por números.
○ Podemos llamar a una función en cualquier parte de un script

var x = suma (2,3);


alert(“La suma es…”+suma(2,3));
<button onclick=”suma(3,5)”>Suma</button>
document.getElementById(“res”).innerHTML=suma(4,5)

function suma(a,b)
{
return a+b;
}
Ejemplos de llamadas a funciones
<head>
<script>
function saluda(nombre)
{
alert(“hola…”+nombre);
}
</script>
<body onload=’saluda(“juan”);’>
<button onclick=”saluda(‘antonio’)”>saluda antonio</button>
<input type=”text” onfocus=”saluda(‘ana’)”>

<script>
saluda(‘marta’);
</script>
</body>
Ejemplos de llamadas a funciones
<head>
A la función pasamos como parámetro el id
<script> de algún elemento de la paǵina
function valor(id_objeto)
{
//en nuevas versiones se puede utilizar id_objeto.value directamente
var x = document.getElementById(id_objeto).value;
alert (“El objeto “+ id_objeto + “tiene un valor” +x);
}
</script>
<body>
<button id=”boton” onclick=”valor(‘boton’);” value=”este es el boton”>saluda
antonio</button>
<input id=”cuadro” type=”text” onblur=”valor(‘cuadro’)”>
</body>
Ejemplos de llamadas a funciones: el “atajo” this
<head>
A veces nos interesará pasar a la función
<script> como parámetro el propio elemento
function valor(objeto) (etiqueta) sobre el que ocurre el evento. Se
{ utiliza para esto la palabra this. Muy util en
var x= objeto.value; elementos que tienen eventos sobre si
mismos.
alert (“El objeto “+ objeto.id + “tiene un valor” +x);
}
</script>
<body>
<button id=”boton” onclick=”valor(this);” value=”este es el boton”>saluda
antonio</button>
<input id=”cuadro” type=”text” onfocus=”valor(this)”>
</body>
eventos en javascript
● Sirven para controlar la ocurrencia de algún suceso en
nuestra web. JavaScript los dispara para que el
programador pueda asociar código fuente cuando se
produzca dicho disparo.
● Los más interesantes son:
○ onclick -> ocurre al hacer click sobre un elemento
○ onmouseover -> ocurre al pasar con el ratón sobre un elemento
○ onmouseout -> ocurre al abandonar el ratón el área de un elemento
○ onfocus ->ocurre cuando un elemento recibe el enfoque
○ onchange ->ocurre cuando un elemento cambia su valor
○ onkeydown ->ocurre cuando un usuario ha presionado una tecla
○ onload -> ocurre cuando se está cargando la web
○ ondblclick ->ocurre cuando se hace doble click con el ratón
○ La referencia completa la tenéis en el siguiente link
como utilizar eventos
● Los eventos vienen implementados por defecto en las etiquetas de html.
● Para utilizarlos simplemente ponemos el evento que queramos utilizar
poniendo su nombre antes del cierre de la etiqueta del elemento.
● La acción que desencadena el evento la pondremos entre comillas simples o
dobles. Técnicamente reciben el nombre de manejadores de evento o handlers

<body onload=”alert(‘evento load’)”>


<h1 onclick=”alert(‘evento click’);”>Mi segundo script</h1>
<input type=”text” onchange=”alert(‘evento change’);”
<input type=”text” onfocus=”alert(“evento focus”)>
<input type=”text” onkeypress=”alert(“evento keypress”)>
<input type=”text” onkeydown=”alert(“evento keydown”)>
<div ondblclick=”alert(‘evento doble click’);”>
esto es un div
</div>
</body>
como utilizar eventos
● Los eventos tienen asociada información de forma nativa que podemos
obtener de diversas formas.
● Los eventos de teclado disponen de información sobre la tecla pulsada que
ha sido pulsada
<body>
● Los eventos del ratón disponen de información sobre
<input onkeypress="pulsacion();" lavalue="esto
type="text" coordenada del
es el contenido">
ratón en la pantalla o la <textarea
tecla id="area"
del ratón pulsada
onkeydown="pulsacion();" cols="30" rows="10">
</textarea>
<script> <input type="tex" onclick="raton();">
function pulsacion() </body>
{
alert("El código del carácter..."+event.keyCode);
alert("Has pulsado el carácter...."+String.fromCharCode(event.charCode));
}
function raton()
{
alert( "Las coordenadas del ratón... x="+event.clientX+" y="+event.clientY);
}
</script>
comprobación de condiciones
● Para la comprobación de condiciones javascript usa la
estructura if, cuya sintaxis es la siguiente:
Las condiciones son expresiones cuyo resultado
if (condicion) es siempre true o false.
{
//codigo js si la condición es true
}
else
{
//codigo js si la condición es false
}
//ojo este código está fuera del if y del else y se ejecutará
siempre
comprobación de condiciones
● Las condiciones pueden ser simples o compuestas
○ Condiciones simples son aquellas que hacen una única comprobación.
○ Una comprobación es una expresión que devuelve true o false.
○ Para construir comprobaciones usamos los operadores:
■ > mayor var x=10;
■ < menor var y=5;
■ >= mayor o igual if (x>y)
■ <= menos o igual {
alert (x+” es mayor que “ + y);
■ === igual
}
■ != distinto else
■ ! negación {
alert (x+” es menor que “+y);
}
comprobación de condiciones
○ Condiciones compuestas son aquellas formadas por varias
comprobaciones simples.
○ Para construir comprobaciones múltiples usamos los operadores:
■ && and
■ || or Cada condición
simple la pondremos var x=10;
entre paréntesis
var x=”ana”; if ((x>5) && (x<=10))
var y=”castillejo” {
if ((x===”ana”) || (y===”castilejo”)) alert (x+” es un número entre 6 y 10”);
{ }
alert (“puede que seas ana castillejo”) else
} {
else alert (x+” no está comprendido entre 6 y 10”);
{ }
alert(“no eres ana castillejo”);
}
comprobación de condiciones
○ Un alternativa al if para comprobar condiciones es el uso de la
estructura switch, cuya sintaxis es:
var x=10;
switch (expresion)
{ switch (x)
case valor: {
//codigo case 5:
break; alert(‘el valor es 5’);
case otro_valor: break;
Cada case termina
//codigo con la palabra break; case 10:
alert(‘el valor es 10’);
break;
break;
default: default:
//codigo alert(‘el valor es otro’);
} break
}
bucles
● Un bucle es una estructura de programación que sirve para
repetir un mismo código un número determinado de veces.
● En javaScript tenemos varias opciones para esta
funcionalidad: La variable i (variable contador) la podemos
incrementar como queramos (i++,i+=2,i--)
for (i=0;i<=10;i++) while (i<=10) do
{ { {
alert(i); alert(i); alert(i);
i++; i++;
} } } while (i<=10)
La variable i en un bucle La variable i en un bucle while la tenemos que
for se autoincrementa incrementar nosotros. En caso de no hacerlo
sola en cada iteración. generaremos un bucle infinito.
bucles
● Un caso especial de uso de los bucles es recorrer
variables de tipo array (vector)

var function cambiarfondo()


vector=[‘juan’,’luna’,’luis] {
for (i=0;i<3;i++) vector=document.getElementsByTagName("p");
{ for (i=0;i<vector.length;i++)
document.write(vector[i]); {
} vector[i].style.color="red";
}
}
Podemos utilizar bucles para hacer cambios
La propiedad length de un vector
masivos en elementos de un documentl html.
permite calcular cuantos elementos
Recuerda que getElementsByTagName
contiene una variable de tipo vector
devuelve un vector con todos las etiquetas
disponibles en el documento.
bucles
● Cuando trabajamos con bucles podemos querer parar su
ejecución antes de completar todas las iteraciones con la
sentencia break
i=0;
do
El bucle dejará de funcionar cuando la variable
{ i alcande el valor 5.
i++;
if (i===5) { break; }
} while (i<=10)
Ejercicios Propuestos
● Crear una web con un cuadro de texto en el que cuando el usuario
introduzca algo que no sea un dígito numérico se borre todo el
contenido de dicho cuadro.
● Crear una web con varios cuadros de texto. La web tendrá una
función llamada enfoque que se llamará cuando ocurra el evento
onfocus de cada cuadro de texto. Cuando se dispare dicho evento
se pondrá el color del fondo del cuadro gris claro y la letra en
azul. Hacer que cuando se pierda el enfoque el cuadro tenga el
formato original.
● Modificar el ejercicio anterior y añadir un botón que sirva para
poder borrar todos los contenidos de los cuadros de texto de
golpe. Usad un bucle y la función getElementsByTagName().
Ejercicios Propuestos
● Crear una web que tenga cuatro divs y un cuadro de lista
desplegable que tenga las siguientes opciones red, blue, green,
lightgrey. Codificar una función que para el evento onchange del
cuadro de lista cambie el color de fondo de los divs.
● Crear una web con dos imágenes cualesquiera 1.jpeg y 2.jpeg.
Controlar el evento onmouseenter de ambas imágenes para que
cuando el usuario entre con el ratón se intercambien la ruta de
las imágenes.
funciones de javascript para controlar tiempos
● A veces el programador necesita controlar la ejecución de
código javascript en intervalos de tiempo o en un momento
determinado.
● Para ello se dispone de dos funciones diferentes que son
setTimeout y setInterval
● Dependiendo del evento de tiempo que queramos controlar
usaremos una u otra.
Índice de contenido
● Funciones de JavaScript para controlar tiempos
○ Ejecución de JavaScript en intervalos de tiempo
■ Función setInterval
○ Parada de intervalos de tiempo
■ Función clearInterval
○ Ejecución de JavaScript en un momento determinado
■ Función setTimeOut
Ejecución de JavaScript en intervalos de tiempo
● Para controlar la ejecución de scripts en intervalos de tiempo
cíclicamente usaremos la función setInterval cuya sintaxis es la
siguiente:
setInterval(function, milliseconds)
<html>
<head>
<script> Marca el número de milisegundos que
function tiempo() hay entre cada ejecución de la función
{
fecha= new Date();
document.getElementById("resultado").innerHTML=fecha;
} Function es la función que se llamará cada
</script>
frecuencia de milisegundos.
</head>
<body onload="setInterval(tiempo,1000);"></body>
<div id="resultado"></div>
</html>
ejemplo banner que intercambia imágenes
<html>
<head> Declaramos fuera de la función
<script> un vector con las rutas de las
banner=[‘1.jpeg’,’2,jpeg’,’3.jpeg’]; imágenes que vamos a
indice=0;
function cambiarBanner()
intercambiar en el banner.
{ También una variable índice
document.getElementById(‘muestra’).src=banner[indice]; para ir avanzando por dicho
indice++; vector.
if (indice>2)
{
indice=0; Cuando el índice llega a 3 lo
} ponemos a 0 para volver a
} cargar la primera imagen en la
</script>
</head>
siguiente ejecución de la
<body onload="setInterval(cambiarBanner,4000);"> funcion.
<img width=500 height=100 id="muestra"></img>
</body> En la carga de la página
</html>
lanzamos cada 4 segundos la
llamada a la función.
Función clearinterval: parada de intervalos de
tiempo
<html>
<head>
<script>
La función inicio es la que lanza
el setInterval para ejecutar la
var control;
function inicio() función actualizarcrono cada
{ 1000 milisegundos
control=setInterval(actualizarcrono,1000);
}
function actualizarcrono()
{ La función parada aprovechará
document.getElementById(‘crono’).innerHTML=new Date; la variable control para detener
} la ejecución de la función
function parada() actualizarcrono.
{
clearInterval(control);
}
</script>
</head>
<body><button onclick=’inicio();’>Iniciar</button> Disponemos dos botones para
<button onclick=’parada();’>Parada</button> iniciar y parar el cronómetro.
<div id=’crono’></div>
</body>
Ejecución de JavaScript en un tiempo determinado
● Para controlar la ejecución de scripts en un momento
concreto disponemos de la función setTimeout cuyo formato
es el siguiente: setTimeout(function, milliseconds)
<html>
<head>
<script>
Marca el número de milisegundos que
function tiempo() transcurrirán hasta la ejecución de la
{ función.
document.getElementById("resultado").innerHTML=”<h1>aparezco
a los 2 segundos</h1>”;
} Function es la función que se llamará
</script>
transcurridos los milisegundos.
</head>
<body onload="setTimeout(tiempo,2000);"></body>
<div id="resultado"></div>
</html>
Ejecución de JavaScript en un tiempo determinado
<html> Un uso muy frecuente de la función
<head> setTimeout es provocar la redirección
<script> a otra página transcurrido un tiempo.
function redireccion()
{
window.location.href=”http://www.academialopedevega.org” En este caso pasados 4 segundos de
} la carga de la página llamamos a la
</script> función redirección que redireccionará
</head> a la página
<body onload="setTimeout(redireccion,4000);"></body> http://www.academialopedevega.org.
<div>Serás redirigido en 4 segundos….</div>
</html>
Ejecución de JavaScript en un tiempo determinado
<html> Otro uso es el control de elementos de
<head> transición como gifs animados.
<script>
function desaparecer()
{ En este caso pasados 2 segundos de
document.getElementById("splash").style.display="n la carga de la página llamamos a la
one"; función desaparecer que oculta el gif
animado.
}
</script>
</head>
<body onload="setTimeout(desaparecer,2000);">
<img id="splash" src="ruedas.gif">
<div id="resultado"><h1>Este es el contenido</h1></div>
</body>
</html>
Ejecución de JavaScript en un tiempo determinado
<html> En este ejemplo mezclamos el uso de
<head>
<style> setInterval con setTimeout. Con set
img {margin-left:40%; position:relative; height: 100px;width: 100px;} interval cambiamos cada 200
</style>
<script>
milisegundos la posición de una
contador=0; imagen verticalmente modificando el
function mover() valor de la propiedad top de dicha
{
document.getElementById("splash").style.top=contador+”px”; imagen. Esto se consigue con la
contador+=20; función mover().
}
function desaparecer()
{ La función setTimeout a los 5
document.getElementById("splash").style.display="none";
} segundos hará desaparecer la imagen
</script> cambiando la propiedad css display al
</head>
<body onload="setInterval(mover,200);setTimeout(desaparecer,5000);">
valor none. Para ello usamos la
<img id="splash" src="ruedas.gif"> función desaparecer.
<div id="resultado"><h1>Este es el contenido</h1></div>
</body>
</html>
Ejercicios Propuestos
1. Mediante las función setInterval crear una web que permita saber en cada
momento cuantos segundos lleva la página abierta. Se mostrará un contador
en la parte inferior derecha del navegador en un div lo suficientemente
visible.
2. Modifica el ejercicio anterior para que también nos diga los minutos que
llevamos con la página abierta.
3. Modifica el ejercicio 1 para que a los 10 segundos nos redirija a la web
de nuestro centro.
4. Crear una web que muestre un gif animado (cógelo de la galería de google)
durante 5 segundos. Pasado ese tiempo ocultará dicho gif y mostrará una
tabla de 5 filas y 5 columnas que se creará dinámicamente.
5. Modificar el ejercicio anterior para que durante los 5 segundos que está
el gif mostrándose se mueva de izquierda a derecha de la pantalla de 10 en
10 pixel en intervalos de tiempo de 100 milisegundos.
Índice de contenido
● Funciones de javascript para geolocalización y
posicionamiento
● Combinando geolocalización con mapas: la librería gmaps
El papel de Javascript en la geolocalización
● Con el auge de los dispositivos móviles que incorporan
hardware para geolocalizarlos (GPS) los navegadores web
empezaron a incorporar funciones para gestionar dicho
hardware
● Javascript incorpora un conjunto de funcionalidades
(APIs) que permiten, entre otras cosas, saber si tenemos
compatibilidad con geolocalización y calculo de
coordenadas geográficas.
La funcion navigator.geolocation
● Para saber si nuestro navegador tiene habilitada la
geolocalización podemos invocar la función
getCurrentPosition que está dentro del objeto navigator.

function getLocation() { exito: es el nombre


if (navigator.geolocation) { de la función que
navigator.geolocation.getCurrentPosition(exito); se ejecutará cuando
} else { el navegador haya
x.innerHTML = "No se dispone de geolocalización"; calculado las
} coordenadas de la
} posición actual

function exito(position) {
x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;
}
La función navigator.geolocation
<!DOCTYPE html> El objeto de javascript navigator dispone
<html> de la propiedad geolocation a través de
<body> la cual podemos comprobar la
disponibilidad del hardware de
<button onclick="getLocation()">Obtener posición</button> posicionamiento -ubicación de red o gps-.
<p id="x"></p> La función getCurrentPosition obtiene las
<script> coordenadas geográficas de nuestra
function getLocation() { ubicación. Una vez obtenidas se las pasa
if (navigator.geolocation) { a la función éxito mediante el parámetro
navigator.geolocation.getCurrentPosition(exito); position.
} else {
x.innerHTML = "Geolocation is not supported by this El parámetro position tiene la latitud y
browser."; longitud de las coordenadas
}
}
function exito(position) { El párrafo cuyo id es x sirve únicamente
x.innerHTML = "Latitude: " + position.coords.latitude + para mostrar los resultados
"<br>Longitude: " + position.coords.longitude;
}
</script>
</body></html>
Combinando geolocalización con mapas
● Hasta hace relativamente poco tiempo la publicación de mapas
en la web era una tarea complicada, solo al alcance de
grandes empresas con disponibilidad de muchos recursos
● El uso masivo de los mapas en la web ha popularizado mucho
este tipo de aplicaciones, a lo que ha contribuido también
la disponibilidad de datos geográficos de calidad como los
de OSM o Google
● La aparición de las librerías JavaScript de software libre
como Leaflet , OpenLayers o gmaps hace que crear un mapa
web sea ahora mucho más fácil.
● Desde el 2018 para usar los mapas de google es necesario
registrarse y aportar datos de facturación. Anterior a dicha
fecha eran de libre uso.
Combinando geolocalización con mapas
● Las librerias de javascript para combinar geolocalización y mapas siguen el
siguiente protocolo mas o menos común:

○ Descargar o hacer referencia a los ficheros .js que tienen las funciones para
la creación y manejo de mapas
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="gmaps.js"></script>

(*) El fichero gmaps.js hay que descargarlo desde el siguiente enlace:

https://raw.github.com/HPNeo/gmaps/master/gmaps.js

○ Creación de un contenedor web (DIV) para dibujar el mapa


<body>
<h1>LOCALIZACIÓN</h1>
<div id="map"></div>
</body>
● Creación un objeto de tipo GMaps que contendrá toda la información del mapa
var map = new GMaps({
el: '#map',
lat: 0,
lng: 0
});
Combinando geolocalización con mapas
● Dibujar el mápa y configurar las opciones:
En el caso de que la conexión se produzca correctamente y
GMaps.geolocate({
permitamos obtener la ubicación de nuestro dispositivo tendrá
success: function(position){
lugar success
lat = position.coords.latitude;
lng = position.coords.longitude;
//Definimos la vista del mapa sobre las coordenadas obtenidas Formato Javascript llamado JSON muy
map.setCenter(lat, lng); utilizado para configurar opciones.
//Añadimos un marcador Se encierra entre llaves y utiliza
propiedades seguidas del operador
map.addMarker({ lat: lat, lng: lng}); “:”
},
error: function(error){
alert('Geolocation failed: '+error.message);
La función addMarker permite establecer
una marca den el propio mapa
},
not_supported: function(){
alert("Your browser does not support geolocation");
}
});
});
Combinando geolocalización con mapas
Existen opciones adicionales como la creación
de rutas y el medio de transporte:
Establecemos origen y destino de la
map.addListener('click', function(e) {
ruta. Medio de desplazamiento y otras
map.renderRoute({
opciones adicionales como el color de
origin: [lat, lng], línea de la ruta y el grado de opacidad
destination: [e.latLng.lat(), e.latLng.lng()], de la misma con respecto al mapa
travelMode: 'driving',
strokeColor: '#000000',
strokeOpacity: 0.6,
strokeWeight: 5
}, {
panel: '#directions', Movemos las coordenadas iniciales para
draggable: true que ahora sean el destino de nuestra
}); ruta y con esto generamos una nueva
lat = e.latLng.lat(); marca.
lng = e.latLng.lng();
});
Ejercicio Propuesto
● Crear una web que contenga dos cuadros de texto en los que
el usuario podrá escribir dos coordenadas (latitud,
longitud) geográficas. Una vez escritas al pulsar un botón
se mostrará un mapa de google maps con un punto sobre la
ubicación geográfica escrita por el usuario.

También podría gustarte