Ediciones ENI Editorial | líder en informática
Mejorar sus habilidades web
Página HTML
1. Lo imprescindible
a. Etiquetas
En esta sección se ofrece un breve resumen sobre la estructura de una página HTML. Si utiliza HTML/CSS con regularidad, puede saltarse esta sección. Encontrará toda la información sobre las etiquetas y los atributos disponibles en el W3C (https://html.spec.whatwg.org/multipage/). Existen varias versiones de una página HTML; la más reciente es la 5. Hay dos familias de páginas HTML: la familia SGML y la familia XML, ambas compatibles con los navegadores recientes. La familia XML es más estricta que la familia SGML, pero los navegadores apenas notan la diferencia, ya que han sido diseñados para tolerar una serie de errores.
Una página HTML5 se compone de etiquetas. Una etiqueta puede tener contenido si su naturaleza lo permite. La suma de las relaciones contenedor/contenido forma la estructura de una página HTML. En la parte superior de esta estructura se encuentra la etiqueta html, que es única y se denomina etiqueta raíz o elemento raíz. La sintaxis de una etiqueta se compone de una parte de apertura entre signos de menor y mayor y, si tiene contenido, de una parte de cierre, también entre signos de menor y mayor.
Ejemplo
<b>Hello</b> La etiqueta b contiene el texto Hello y sirve para poner el texto en negrita. Tiene una parte de apertura <b> y una parte de cierre </b>. Lo que se encuentra entre ambas partes es el ámbito de aplicación y el contenido.
La etiqueta puede tener, en su parte de apertura, uno o varios atributos. Un atributo es, generalmente, un par clave única/valor separado por =. El valor puede ir entre comillas o entre apóstrofos. Existe, aunque es menos frecuente, una variante en la que solo hay un nombre y que se corresponde más con una directiva.
Ejemplo
<img src="images/hello.jpg"> La etiqueta img no tiene contenido, pero posee un atributo src que indica la ubicación de un archivo de imagen relativo a la página actual.
En el formato XML, debemos escribir:
<img src="images/hello.jpg"/> Lo cual es equivalente a:
<img src="images/hello.jpg"></img> Al crear una página HTML, normalmente se utiliza este tipo de estructura:
<!DOCTYPE html>
<html>
<head>
<!--...Bibliotecas JavaScript
1. El objeto window
a. Función
El objeto window tiene la particularidad de que sus propiedades y métodos están disponibles en el espacio de nombres global. Su uso es habitual; posiblemente, ya lo ha utilizado sin saberlo, por ejemplo, al emplear el método alert para mostrar un cuadro de diálogo con un mensaje.
Ejemplo
alert( "hola" );
window.alert( "hola" ); // equivalente Estas dos invocaciones son equivalentes. Cabe señalar que, en la práctica, solo se utilizará la primera forma por una cuestión de eficiencia.
Existen numerosas propiedades y métodos en el objeto window. A continuación, presentaremos los de uso más común.
En la misma línea que el método alert, el método confirm sirve para obtener la confirmación del usuario mediante un cuadro de diálogo modal (por lo tanto, bloquea la ejecución hasta que el usuario haya interactuado). El método prompt espera la introducción de un valor y devuelve null en caso de que el usuario cancele.
Ejemplo
if (confirm("¿Desea empezar el juego?")) {
const numeroMagico = Math.round(Math.random() * 10);
let intentos = 0;
while (true) {
intentos++;
const val = parseInt( prompt("¿Su número?") );
if (val) {
if (val == numeroMagico) {
alert("¡Enhorabuena, ha necesitado " + intentos + "
intento(s)!");
break;
} else if (val > numeroMagico) {
alert("Es más pequeño");
}...DOM
1. Documento
a. Propiedades y métodos
Ya hemos utilizado el método write para escribir una línea. También existe writeln, que añade un salto de línea. Estos métodos no son dinámicos, en el sentido de que solo pueden funcionar una vez y durante la interpretación de la etiqueta script. Su uso es bastante infrecuente, salvo para depuración, pruebas y casos particulares.
Como hemos visto en la introducción, un documento HTML está compuesto por etiquetas. El navegador dispone internamente de un analizador sintáctico que convierte estas etiquetas en una jerarquía de nodos (objetos) correspondiente al árbol de sus etiquetas. Esta organización se representa mediante un estándar definido por el W3C denominado DOM (Document Object Model). Estos nodos representan la estructura de su documento, a la que se puede acceder mediante JavaScript. Por lo tanto, es posible modificar el documento modificando los nodos que lo componen. Un nodo que puede tener contenido o atributos es un elemento (representado por una etiqueta en el código HTML).
En cuanto a los nodos, disponemos de las siguientes propiedades principales de JavaScript:
|
Propiedad |
Función |
|
attributes |
Colección de atributos. |
|
childNodes |
Colección de nodos hijos. |
|
data |
Texto del nodo. |
|
firstChild |
Primer nodo hijo. |
|
lastChild |
Último nodo hijo. |
|
nextSibling |
Siguiente nodo hermano. |
|
nodeName |
Nombre del nodo. Puede ser el nombre de una etiqueta o el nombre de un atributo. |
|
nodeType |
Tipo de nodo. 1 es un elemento, 2 un atributo, 3 un nodo de texto… |
|
nodeValue |
Valor del nodo para un atributo o un texto. |
|
parentNode |
Nodo padre. |
|
previousSibling |
Nodo hermano anterior. |
Entre los métodos, encontramos principalmente:
|
Método |
Función |
|
appendChild() |
Añadir un nodo hijo. |
|
appendData() |
Añadir texto al nodo. |
|
cloneNode() |
Clonar el nodo. Si se pasa el argumento true, también se clona el contenido. |
|
deleteData() |
Borrar parte del texto presente en el nodo. |
|
getAttribute() |
Recuperar el valor de un atributo de un elemento. |
|
getAttributeNode() |
Recuperar el nodo de atributo DOM del elemento. |
|
hasChildNodes() |
Indicar si el nodo contiene hijos. |
|
insertBefore() |
Insertar un nodo antes de otro. |
|
insertData() |
Insertar texto en una posición determinada. |
|
removeAttribute() |
Eliminar un atributo. |
|
removeAttributeNode() |
Eliminar un nodo de atributo... |
Formulario
1. Validación simple
Dado que el uso de JavaScript para la gestión de formularios es habitual, a continuación vamos a proponer algunos usos. En primer lugar, el atributo onsubmit de la etiqueta form sirve para controlar el contenido del formulario antes de enviarlo.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<script>
function validar(form) {
const campos = form.getElementsByTagName("input");
for (let i = 0; i < campos.length; i++) {
const f = campos[i];
if (f.type == "text" && f.value == "") {
alert("Por favor, rellene el campo " + f.name);
f.focus();
return false;
}
}
return true;
}
</script>
</head>
<body>
<form onsubmit="return validar(this)">
<input type="text" name="apellido"> <br>
<input type="text" name="nombre"> <br>
<input type="submit" value="Validar">
</form>
</body>
</html> En este ejemplo, recorremos todos los campos de texto y comprobamos si están vacíos o no. En caso de que un campo esté vacío, avisamos al usuario de que debe rellenarlo y colocamos el foco (el cursor) en dicho campo mediante el método del mismo nombre. La función que realiza la validación debe devolver un valor...
Caso práctico
1. Gestión de notas en una página web, arquitectura MVC
a. Primer paso
Este caso práctico consiste en poder añadir y eliminar un conjunto de notas en una página web. Intentamos aplicar una arquitectura MVC (Modelo-Vista-Controlador) para poder cambiar la presentación si el usuario lo desea. Esta arquitectura consiste en separar claramente cada componente de la aplicación. Así, el Modelo de datos almacenará todas las notas del usuario, mientras que la Vista (presentación) recorrerá este modelo de datos para realizar la visualización.
Al comenzar un proyecto, puede centrarse únicamente en el esqueleto de la aplicación. Como vimos en el capítulo Adoptar buenas prácticas, conviene priorizar la arquitectura por módulos (mediante funciones anónimas o módulos ES). Por lo tanto, nuestro punto de partida es algo así:
// notas.js
export const notas = {
anadirElemento:
function() {
},
eliminarElemento:
function(indice) {
}
}; Este módulo ES básico ofrece, por tanto, dos formas de acceso mediante los métodos anadirElemento y eliminarElemento. Cabe destacar que este último tiene...