Entendido.

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

Logo

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++

logo rss 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: 121

Visitas el mes pasado: 346

logo
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.




8. Otras estructuras (III)

8.3 Funciones eval y location.

javascript

É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:

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>

Puedes ver en tu navegador cómo queda esta página de ejemplo pulsando en el siguiente enlace:

La instrucción location.





En los siguientes temas veremos métodos y propiedades de javascript para diversos tipos de variables y de objetos. Empezamos por el objeto Number.

Los números.



manual de Javascript

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com