Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de Javascript

Javascript: lenguaje interactivo para dinamizar la web.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

Básicos					Avanzados					Practicas
Inicio	HTML	CSS	Complementos	Gestores de Contenido	Javascript	PHP básico	Nuevas Tendencias	Programación	Librerías	Mi primera web	Prácticas Web

RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net

Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 42

Visitas el mes pasado: 101

WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de Javascript: Desarrollo Web, por Miguel Angel Álvarez
Libros Web: introducción a Javascript: Libros web, por Javier Eguíluz Pérez
Curso de Javascript: Programación Web: www.programacionweb.net
WebEstilo: JavaScript: www.webestilo.com
W3 schools; Javascript Tutorial: www.w3schools.com
Manual de Javascript: José Antonio Rodríguez.: Jose Antonio Rodriguez: manual en PDF

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.

Aprende Web por Anyelguti is licensed under a Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported License.

8. Otras estructuras (III)

8.3 Funciones eval y location.

Éstas son funciones que dependen directamente del Navegador (objeto window), por lo que se ejecutan directamente, es decir sin la palabra document. delante ni ninguna otra palabra.

La función eval

Esta es una función muy importante en programación, ya que convierte una cadena de texto en código javascript. La cadena de texto debe ser igual que el código javascript para que funcione. veamos el siguiente ejemplo:

texto = "alert('hola mundo')"

La cadena de texto contiene una instrucción javascript, sin embargo esta no se ejecutará porque es una cadena de texto. Sin embargo si aplicamos la función eval:

eval(texto)

el texto se convierte en código javascript y se ejecuta.

En la siguiente página de ejemplo se muestra cómo con un sencillo script donde está la instrucción eval, pueden ejecutarse varios códigos javascript escritos en la página.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Ejemplo instrucción eval</title> 
<script type="text/javascript">
function aplicar(num) {
         texto = document.getElementById("script"+num).innerHTML;
         eval(texto);
         }
</script>
</head>
<body>
<h1>Ejemplo instrucción eval</h1>
<p>Pulsa para aplicar a la página los siguientes scripts.</p>
<p id="script1" onclick="aplicar(1)">alert("hola mundo");</p>
<p id="script2" onclick="aplicar(2)">document.bgColor = "yellow";</p>
<p id="script3" onclick="aplicar(3)">document.bgColor = "aqua";</p>
<p id="script4" onclick="aplicar(4)">document.bgColor = "white";</p>
<p id="script5" onclick="aplicar(5)">document.fgColor = "green";</p>
<p id="script6" onclick="aplicar(6)">document.fgColor = "purple";</p>
<p id="script7" onclick="aplicar(7)">document.fgColor = "black";</p>
<p id="script8" onclick="aplicar(8)">open('http://www.google.es','Google','width=600,height=400');</p>
</body>
</html>

Para ver este ejemplo en tu navegador pulsa en el siguiente enlace:

Ejemplo de instrucción eval.

La función location

La función location permite ver el nombre de la página o URL en la que estamos, además, tiene también unas propiedades que nos proporcionan información sobre la página en la que estamos y unos métodos que permiten cambiar a otra página, lo cual da un resultado parecido a poner un enlace.

Sus propiedades son:

hash : Cadena que contiene el nombre del enlace, dentro de la URL.
host : Cadena que contiene el nombre del servidor y el número del puerto, dentro de la URL.
hostname : Cadena que contiene el nombre de dominio del servidor (o la dirección IP), dentro de la URL.
href : Cadena que contiene la URL completa.
pathname : Cadena que contiene el camino al recurso, dentro de la URL.
port : Cadena que contiene el número de puerto del servidor, dentro de la URL.
protocol : Cadena que contiene el protocolo utilizado (incluyendo los dos puntos), dentro de la URL.
search : Cadena que contiene la información pasada en una llamada a un script, dentro de la URL.

De todas ellas tal vez la más interesante es la propiedad href, la cual nos permite ver o cambiar la URL de la página.

Sus métodos son:

reload() : Carga la página especificada en la propiedad href. Por tanto, si la propiedad no se ha modificado volverá a cargar la propia página que estamos viendo, y si se ha modificado, cambiará a la página que hayamos especificado al modificarla. Ejemplo:

location.href = "http://es.yahoo.com";
cambio = location.href;
cambio.reload();

En el ejemplo cambiamos la propiedad href y aplicamos después el método reload(). El resultado es que cambiamos a la página especificada, en este caso la página de yahoo. Con el evento onclick el método así usado funciona igual que un enlace.

replace(URL) : Este método carga la URL o dirección especificada en el argumento que se le pasa en el paréntesis. Por lo tanto funciona también como un enlace a la página especificada. Tiene la particularidad de que borra el historial de páginas, por lo que una vez cargada la nueva página, no permite volver a la página anterior mediante la tecla de retroceso de página del navegador. Ejemplo:

location.replace("http://www.yahoo.es")

En este ejemplo el método cambia la página que estamos viendo por la de Yahoo, y deja el historial de páginas a cero, con lo que no podemos volver a la anterior.

En la siguiente página de ejemplo se muestran los métodos y propiedades de la instrucción location. Observa también como la instrucción eval vista anteriormente nos simplifica bastante el código, ya que nos permite usar una misma función para ver todas las propiedades. este es su código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title> 
<style type="text/css">
#caja { border: 1px solid black; width: 400px; float: right; }
</style>
<script type="text/javascript">
window.onload = function(){
texto = document.getElementById("caja");
texto.innerHTML = "Propiedades de \"location\" <br/>";
}
function mostrar(prop) { //mostrar propiedades
         propiedad = "location."+prop;
         var muestra = eval(propiedad);
         texto.innerHTML += "Propiedad "+prop+": "+muestra+"<br/>";
         }			 			 
function metodo1(num) { //metodo reload()
         if (num == 1) 
            {location.href = "http://www.google.com"}	
         else if (num == 2) 
            {location.href = "http://www.yahoo.es"} 
         cambio = location.href;
         cambio.reload();
         }
function metodo2(num) { //metodo replace(URL)
         if (num == 1) 
            {cambiar = "http://www.elpais.com"}	
         else if (num == 2) 
            {cambiar = "http://www.elmundo.es"} 
         location.replace(cambiar);
         }
</script>
</head>
<body>
<h2>La instrucción location</h2>
<div id="caja">
</div>
<h4>Propiedades del objeto location.</h4>
<form action="#" name="formu">
<input type="button" onclick="mostrar('hash')" value="hash"/> ...
<input type="button" onclick="mostrar('host')" value="host"/> ...
<input type="button" onclick="mostrar('hostname')" value="hostname"/> ...
<input type="button" onclick="mostrar('href')" value="href"/> ... <br/><br/>
<input type="button" onclick="mostrar('pathname')" value="pathname"/> ...
<input type="button" onclick="mostrar('port')" value="port"/> ...
<input type="button" onclick="mostrar('protocol')" value="protocol"/> ...
<input type="button" onclick="mostrar('search')" value="search"/> ...
<h4>Métodos de location</h4>
<p>El método reload() permite cambiar a otra página, 
siempre que se haya modificado la propiedad href, con lo
que actúa parecido a un enlace:</p>
<input type="button" onclick="metodo1(1)" value="http://www.google.com"/> ...
<input type="button" onclick="metodo1(2)" value="http://www.yahoo.es"/> ...
<p>El método replace(URL) también carga la URL especificada como parámetro.</p>
<input type="button" onclick="metodo2(1)" value="http://www.elpais.com"/> ...
<input type="button" onclick="metodo2(2)" value="http://www.elmundo.es"/> ...
</form>
</body>
</html>