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>
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>
Manual JavaScript. Funciones
<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>
http://www.lawebera.es/como-hacer/ejemplos-javascript/enjavascript.php#
Ejemplos de uso de DIV.
https://manuais.iessanclemente.net/index.php/Propiedad_de_objetos_web_innerHTML
Propiedad de objetos web innerHTML
La propiedad más interesante de los objetos Web a los que podemos acceder, no forma parte del Standard oficial de HTML.
Se trata de la propiedad innerHTML que fue introducida por Microsoft en Internet Explorer como un método de acceso rápido al contenido completo de un contenedor en HTML. Rápidamente el resto de exploradores lo añadieron en su soporte de lenguaje.
Podemos usar innerHTML para recuperar el contenido actual de un contenedor o insertar nuevo contenido en ese contenedor.
Por contenedor entendemos aquello que está entre las cláusulas < div > y < /div >.
El elemento DIV define un contenedor genérico, el cuál permite a los programadores definir estilos o bloques de contenido.
Como parámetros a DIV tenemos ID, CLASS y ALIGN, aunque éste ultimo cada vez se emplea menos en favor de las CSS.
Ejemplos de uso de DIV.
<div id="primero">
<p>Algún texto.</p>
<p>Un poco más de texto.</p></div>
<div id="segundo"></div>
El primero de los ejemplos muestra 2 párrafos de texto en la página, mientras que el Segundo no muestra nada; simplemente es un contenedor vacío en estos momentos.
Podemos recuperar el contenido de DIV de la siguiente forma:
var contenido = document.getElementById('primero').innerHTML;
La variable contenido almacena ahora todo el texto de los dos párrafos así como las marcas < p > y < /p >.
Podríamos reemplazar los dos párrafos completamente asignándoles un nuevo valor.
document.getElementById('primero').innerHTML = '<p>Un parrafo de texto para reemplazar los dos anteriores.</p>’;
https://manuais.iessanclemente.net/index.php/Propiedad_de_objetos_web_innerHTML
Cambio de la secuencia de salida HTML
JavaScript puede crear contenido HTML dinámico:
Fecha: Tue Mar 07 2017 18:25:22 GMT-0500 (. Hora est Pacífico, Sudamérica)
En JavaScript, document.write () se puede utilizar para escribir directamente en la corriente de salida HTML:
Ejemplo
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());</script>
</body>
</html>
Nunca use document.write (), después de cargar el documento. Se sobrescribirá el documento.
Cambio de contenido HTML
La forma más sencilla de modificar el contenido de un elemento HTML es usando el innerHTML propiedad.
Para cambiar el contenido de un elemento HTML, utilice la siguiente sintaxis:
document.getElementById(id).innerHTML = new HTML
En este ejemplo se cambia el contenido de un elemento <p>:
Ejemplo
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";</script>
</body>
</html>
En este ejemplo se cambia el contenido de un elemento <h1>:
Ejemplo
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element = document.getElementById("header");
element.innerHTML = "New Header";</script>
</body>
</html>
Ejemplo explicó:
- El documento HTML anterior contiene un elemento <h1> con id = "header"
- Utilizamos el DOM HTML para obtener el elemento con id = "header"
- Un JavaScript cambia el contenido (innerHTML) de dicho elemento
Cambiar el valor de un atributo
Para cambiar el valor de un atributo HTML, utilice la siguiente sintaxis:
document.getElementById(id).attribute = new value
En este ejemplo se cambia el valor del atributo src de un elemento <img>:
Ejemplo
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";</script>
</body>
</html>
Ejemplo explicó:
- El documento HTML anterior contiene un elemento <img> con id = "myImage"
- Utilizamos el DOM HTML para obtener el elemento con id = "myImage"
- Un JavaScript cambia el atributo src de ese elemento de "smiley.gif" a "landscape.jpg"
TOMADO DE : https://www.w3schools.com/js/js_htmldom_html.asp
