conceptos
JavaScript HTML DOM - Changing HTML
The HTML DOM allows JavaScript to change the content of HTML elements.
Changing the HTML Output Stream
JavaScript can create dynamic HTML content:
Date: Mon Feb 27 2017 21:49:37 GMT-0500 (Hora est. Pacífico, Sudamérica)
In JavaScript, document.write() can be used to write directly to the HTML output stream:
Example
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());</script>
</body>
</html>
Never use document.write() after the document is loaded. It will overwrite the document.
Changing HTML Content
The easiest way to modify the content of an HTML element is by using the innerHTML property.
To change the content of an HTML element, use this syntax:
document.getElementById(id).innerHTML = new HTML
This example changes the content of a <p> element:
Example
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";</script>
</body>
</html>
This example changes the content of an <h1> element:
Example
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element = document.getElementById("header");
element.innerHTML = "New Header";</script>
</body>
</html>
Example explained:
- The HTML document above contains an <h1> element with id="header"
- We use the HTML DOM to get the element with id="header"
- A JavaScript changes the content (innerHTML) of that element
Changing the Value of an Attribute
To change the value of an HTML attribute, use this syntax:
document.getElementById(id).attribute = new value
This example changes the value of the src attribute of an <img> element:
Example
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";</script>
</body>
</html>
Example explained:
- The HTML document above contains an <img> element with id="myImage"
- We use the HTML DOM to get the element with id="myImage"
- A JavaScript changes the src attribute of that element from "smiley.gif" to "landscape.jpg"
Funciones
Tabla de contenidos
Introducción
Una función no es más que un bloque de enunciados que componen un comportamiento que puede ser invocado las veces que sea necesario.
Sintaxis general de una función
Una función de JavaScript presenta este aspecto:
Para ejecutar la función posteriormente no hay más que invocar su nombre en cualquier momento y desde cualquier parte de un código, con una excepción: la función debe haber sido definida anteriormente. Así, por ejemplo, este código:
ejecutaría la alerta, pero éste:
generaría un error, porque en el momento en que se invoca la función ésta aún no ha sido registrada.
Hay que poner especial atención a la hora de crear la funciones, para no repetir los nombres, principalmente porque esto no genera errores en JavaScript, y puede suponer quebraderos de cabeza cuando un script no funciona pero la consola de errores no muestra mensaje alguno.
Si definimos dos funciones con el mismo nombre, como en este ejemplo:
sólo funciona la segunda, que ha sido la última definida.
Funciones y argumentos
Podemos desear que una función ejecute unos enunciados en los que opere con una serie de valores que no hayamos definido dentro de la misma, sino que los reciba de otra función o enunciado. Esos valores son los argumentos, que se especifican entre los paréntesis que van tras el nombre de la función, y se separan por comas:
Los argumentos se nombran como las variables:
Si después se ejecuta unas líneas como las siguientes:
en la función
sumar total adquiere sucesivamente los valores de 3, 8 y 21, que es lo que mostrarían tres alertas.
Aunque en los ejemplos emplee numerales, como argumentos se puede enviar cualquier variable. Sólo hay que recordar que si se trata de una cadena literal, debe ir entrecomillada:
Por último, sobre los argumentos hay que recordar las respuestas a tres preguntas:
- ¿Qué ocurre si se envía a una función menos argumentos que los que se han especificado?: Los argumentos que no han recibido un valor adoptan el de
undefined. - ¿Qué ocurre si se envía a una función más argumentos que los que se han especificado?: Los argumentos que sobran son elgantemente ignorados.
- ¿Cuántos argumentos se pueden especificar como máximo?: 255.
Variables y su ámbito
El ámbito sería algo así como el espacio en el que las variables existen y al que pueden acceder enunciados u otras funciones. Si se define una variable dentro de una función, esa variable sólo existe para esa función, y otras funciones no pueden acceder a su valor a menos que lo reciban como un argumento:
En este caso no obtenemos una alerta con «ordalía», sino un error, puesto que en la función
mostrar_resultado() pedimos que se muestre el valor de una variable que no existe en su ámbito. Dicho de otra manera, las variables existen sólo para concatenar_cadenas(), y aunque adquieren los valores definidos en cuanto ejecutamos la función, ésta es una «barrera» que impide que se pueda acceder a aquellos desde fuera.
Para que el código funionase, deberíamos definir las variables fuera de ambas funciones, para que su ámbito sea global:
De esta forma, toda función puede acceder a las variables.
concatenar_cadenas() modifica los valores iniciales, pero ahora estos se almacenan de manera global fuera de ella; así están disponibles para mostrar_resultado().
return
Hay otra opción con la que solucionar el problema anterior, y que además puede ser útil en otras ocasiones:
return que permite devolver valores al origen de la invocación de una función. El esquema de funcionamiento es algo así:
- Un ejemplo esquemático del funcionamiento de
return
Rehagamos el ejemplo anterior que no funcionaba por cuestiones de ámbito de las variables, pero enviando el resultado por medio de
return:
Ahora
mostrar_resultado cuenta con el alert que tiene que mostrar el resultado de la concatenación. En la alerta invocamos la función concatenar_cadenas, que devuelve el valor de c; así, es como si en hubiéramos hecho una alerta de c directamente.
En este ejemplo no hemos necesitado enviar argumentos porque se trata de un ejemplo muy sencillo, pero en los ejemplos sobre funciones veremos esto con más detalle.
Manual JavaScript. Funciones
Resumen: JavaScript contiene sus propias funciones que podemos utilizar en nuestros programas.
Funciones en JavaScript
JavaScript contiene sus propias funciones que podemos utilizar en nuestros programas. Aunque algunas de estas funciones podemos usarlas independientemente de sus correspondientes objetos, lo cierto es que todas las funciones provienen de algún objeto específico. Concretamente, el objeto window, que representa a la ventana del navegador, es el objeto por defecto. Esto quiere decir que podemos usar sus elementos (funciones, propiedades, objetos, etc…) sin necesidad de llamar explícitamente al objeto window.
Ya conocemos alguna que otra función como length (de los objetos de matriz) o alert, que proviene del objeto window y que muestra un mensaje en una ventana. document es un objeto dependiente de window que contiene, entre otras cosas, funciones como write, que nos permite volcar texto sobre la página web. A continuación vamos a estudiar algunas posibilidades que nos aportan las funciones en JavaScript, ya que hay una gran cantidad de ellas. Sin embargo, vamos a repasar las más usadas para el desarrollo web en general.
En este ejemplo veremos como llamar a una ventana de confirmación (aceptar o cancelar):
<html>
<head>
<script type="text/javascript">
function ver_confirm()
{
var name=confirm("Pulsa un botón")
if (name==true)
{
document.write("Has pulsado el botón Aceptar");
}
else
{
document.write("Has pulsado el botón Cancelar");
}
}
</script>
</head>
<body>
<form>
<input type="button" onclick="ver_confirm()"
value="Mostrar una ventana de confirmación">
</form>
</body>
</html>
En este ejemplo abriremos una ventana permitiendo controlar su aspecto:
<html>
<head>
<script language="javascript">
function open_win()
{
window.open("http://www.google.es","nueva","toolbar=yes,
location=yes,
directories=no, status=no, menubar=yes, scrollbars=yes,
resizable=no,
copyhistory=yes, width=400, height=400");
}
</script>
</head>
<body>
<form>
<input type="button" value="Abrir ventana"
onclick="open_win()">
</form>
</body>
</html>
El primer parámetro de open es la dirección que queremos mostrar en la ventana. El segundo es el nombre que queremos darle a la ventana (y que podemos usar, por ejemplo, en el atributo target de los enlaces). El tercer y último parámetro nos permite definir el aspecto de la ventana según los datos que le indicamos.
El siguiente ejemplo nos muestra el uso de location para conseguir la dirección de la página actual en la que nos encontramos o bien ir a una página diferente:
<html>
<head>
<script type="text/javascript">
function actual_location()
{
alert(location);
}
function cambiar_location()
{
window.location="http://www.google.es/";
}
</script>
</head>
<body>
<form>
<input type="button" onclick="actual_location()"
value="Mostrar la URL actual">
<input type="button" onclick="cambiar_location()"
value="Cambiar URL">
</form>
</body>
</html>
Con este código podemos imprimir una página:
<html>
<head>
<script type="text/javascript">
function printpage()
{
window.print();
}
</script>
</head>
<body>
<form>
<input type="button" value="Imprime esta página"
onclick="printpage()">
</form>
</body>
</html>
A continuación vamos a ver como cambiar el tamaño de la ventana actual:
<html>
<head>
<script type="text/javascript">
function resizeWindow()
{
window.resizeBy(-100,-100)
}
</script>
</head>
<body>
<form>
<input type="button" onclick="resizeWindow()"
value="Retallar ventana">
</form>
</body>
</html>
Nota: Si se usan frames, debe utilizarse el elemento top en vez del elemento window, para representar el frame superior. En el siguiente ejemplo vemos como avanzar a una posición específica de la ventana:
<html>
<head>
<script type="text/javascript">
function scrollWindow()
{
window.scrollTo(100,500)
}
</script>
</head>
<body>
<form>
<input type="button" onclick="scrollWindow()"
value="Scroll">
</form>
<p>SCROLL SCROLL SCROLL SCROLL</p>
<br><br><br><br><br><br><br><br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br><br><br><br><br><br><br><br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br><br><br><br><br><br><br><br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLLSCROLL</p>
<br><br><br><br><br><br><br><br>
</body>
</html>
En el siguiente ejemplo, vemos como retrasar la ejecución del programa durante un tiempo determinado:
<html>
<head>
<script language="javascript">
function timeout()
{
setTimeout("alert('Esta ventana aparece un seg. después _
de que hayas pulsado el botón')", 1000)
}
</script>
</head>
<body>
<form>
<input type="button" onclick="timeout()"
value="Cuenta atrás">
</form>
</body>
</html>
Un par de detalles sobre este último ejemplo: La función setTimeout tiene dos parámetros como puede verse, una cadena de texto que representa un código JavaScript a ejecutar cuando hayan pasado el número de milisegundos del segundo parámetro.
Para terminar esta galería de ejemplos, veamos como cambiar una imagen por otra en la página:
<html>
<head>
<script type="text/javascript">
function setSrc()
{
var x=document.images
x[0].src="foto1.gif"
}
</script>
</head>
<body>
<img src="foto2.gif" width="107" height="98">
<form>
<input type="button" onclick="setSrc()"
value="Cambiar imagen">
</form>
</body>
</html>
Naturalmente, debemos substituir las imágenes por otras con las que contemos realmente para ver el ejemplo. Como podemos apreciar, lo primero que hacemos es recoger todas las imagenes de la página en una matriz y después acceder a la imagen específica como se muestra en la funcion setSrc(). Para hacer el cambio usamos la propiedad src que tienen todos los objetos de imagen.
A medida que vayamos pasando por los capítulos de este curso, iremos viendo nuevos ejemplos con nuevas posibilidades de manejo de las funciones y sus respectivos objetos. En el siguiente capítulo veremos como crear nuestros propios objetos y aplicarlos en nuestros programas.
JavaScript para impacientes - 5.Funciones (1)
Hemos visto que podemos asociar un fragmento de programa a un clic sobre un elemento de una página web. El problema es que si el fragmento es muy grande, el resultado puede resultar difícil de leer. Una alternativa más compacta es crear pequeños "bloques de programa", que llamaremos funciones.
5.1. Una función básica
En su forma más básica, una función nos permite agrupar varias órdenes y dar un nombre a ese conjunto. Así, el ejemplo del apartado 4.5 se podría reescribir así:<html> <body> <script> function calcularSuma() { var casilla1=document.getElementById("num1"); var n1 = casilla1.value; var casilla2=document.getElementById("num2"); var n2 = casilla2.value; var resultado=document.getElementById("resultado"); resultado.innerHTML = "Suma: " +(parseInt(n1)+parseInt(n2)); resultado.style.color = "blue"; } </script> <form> Primer numero: <input type="text" name="num1" id="num1" /> <br /> Segundo numero: <input type="text" name="num2" id="num2" /> <br /> <p id="resultado">Suma: </p> <button type="button" onclick='calcularSuma()'>Calcular suma</button> </form> </body> </html>
Ejercicios propuestos
- 05.01.01 - Crea una versión usando funciones del ejercicio que cambia el color del fondo cada vez que el usuario haga clic sobre ella (ejercicio 04.05.01).
- 05.01.02 - Crea una versión usando funciones del ejercicio que muestra un párrafo y dos botones para hacer el tamaño del texto más grande y más pequeño, respectivamente (ejercicio 04.05.02).
- 05.01.03 - Crea una versión usando funciones del ejercicio que crea un párrafo y dos botones que sirvan para hacer ocultar y mostrar ese párrafo (ejercicio 04.05.03).
- 05.01.04 - Crea una versión usando funciones del ejercicio que muestra tres casillas de texto y un botón que sume los números que haya escritas en esas tres casillas (04.05.04).
- 05.01.05 - Crea una versión usando funciones del ejercicio que muestra dos casillas de texto y cuatro botones, que permitan calcular su suma, su diferencia, su multiplicación y su división (04.05.05).
5.2. Funciones "personalizables"
No siempre querremos que una función maneje los mismos datos. Por ejemplo, si queremos que una función compruebe si los datos que el usuario ha introducido en una casilla son válidos, es innecesario crear una función para cada casilla. Es preferible crear una única función a la que le podamos indicar qué casilla concreta ha de verificar. Para ese, podemos indicar "parámetros" a la función, que detallaremos en el paréntesis que sigue a su nombre, así:<html> <body> <script> function calcularSuma(numero1, numero2, posicionResultado) { var casilla1=document.getElementById( numero1 ); var n1 = casilla1.value; var casilla2=document.getElementById( numero2 ); var n2 = casilla2.value; var resultado=document.getElementById( posicionResultado ); resultado.innerHTML = "Suma: " +(parseInt(n1)+parseInt(n2)); resultado.style.color = "blue"; } </script> <form> Primer numero: <input type="text" name="num1" id="num1" /> <br /> Segundo numero: <input type="text" name="num2" id="num2" /> <br /> <p id="resultado">Suma: </p> <button type="button" onclick="calcularSuma('num1', 'num2', 'resultado');"> Calcular suma</button> </form> </body> </html>
En este caso, la función "calcularSuma" recibe tres datos: la primera casilla, la segunda casilla y la posición en la que queremos mostrar el resultado; al llamar a la función, deberemos rellenar esos detalles con los datos reales de las casillas que queramos usar. Así, podemos aplicar esa misma función a bloques distintos de casillas, como en este ejemplo:
<html> <body> <script> function calcularSuma(numero1, numero2, posicionResultado) { var casilla1=document.getElementById( numero1 ); var n1 = casilla1.value; var casilla2=document.getElementById( numero2 ); var n2 = casilla2.value; var resultado=document.getElementById( posicionResultado ); resultado.innerHTML = "Suma: " +(parseInt(n1)+parseInt(n2)); resultado.style.color = "blue"; } </script> <form> Primer numero: <input type="text" name="num1" id="num1" /> <br /> Segundo numero: <input type="text" name="num2" id="num2" /> <br /> <p id="resultado">Suma: </p> <button type="button" onclick="calcularSuma('num1', 'num2', 'resultado');"> Calcular suma</button> </form> <form> Primer numero alternativo: <input type="text" name="num3" id="num3" /> <br /> Segundo numero alternativo: <input type="text" name="num4" id="num4" /> <br /> <p id="resultado2">Suma: </p> <button type="button" onclick="calcularSuma('num3', 'num4', 'resultado2');"> Calcular suma</button> </form> </body> </html>
Ejercicios propuestos
- 05.02.01 - Crea una variante del ejemplo previo, que multiplique los números de las casillas, en vez de sumarlos. La función deberá llamarse "calcularProducto".
- 05.02.03 - Crea una versión mejorada del ejercicio 05.01.02, que muestre tres párrafos distintos, cada uno de ellos con dos botones para hacer el tamaño su texto más grande o más pequeño.
- 05.02.03 - Crea una versión mejorada del ejercicio 05.01.03, que muestre tres párrafos distintos, con dos botones para cada uno, que sirvan para hacer ocultar y mostrar el párrafo correspondiente.
tomado de
Comentarios
Publicar un comentario