Javascript: lenguaje interactivo para dinamizar la web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 29
Visitas el mes pasado: 51
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
É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.
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:
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:
En los siguientes temas veremos métodos y propiedades de javascript para diversos tipos de variables y de objetos. Empezamos por el objeto Number.
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com