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>
¿Qué es FPDF?
FPDF es una clase escrita en PHP que permite generar documentos PDF directamente desde PHP, es decir, sin usar la biblioteca PDFlib. La F de FPDF significa Free (gratis y libre): puede usted usarla para cualquier propósito y modificarla a su gusto para satisfacer sus necesidades.
FPDF tiene otras ventajas: funciones de alto nivel. Esta es una lista de sus principales características:
- Elección de la unidad de medida, formato de página y márgenes
- Gestión de cabeceras y pies de página
- Salto de página automático
- Salto de línea y justificación del texto automáticos
- Admisión de imágenes (JPEG, PNG y GIF)
- Colores
- Enlaces
- Admisión de fuentes TrueType, Type1 y codificación
- Compresión de página
FPDF no necesita de ninguna extensión para PHP (excepto Zlib para activar la compresión y GD para soporte a GIF) y funciona con PHP5 (≥ 5.1).
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>’;
No hay comentarios.:
Publicar un comentario