Ediciones ENI Editorial | líder en informática
Mejorar sus competencias Web
Página HTML
1. Lo principal
a. Etiqueta
En esta parte, encontrará un breve recordatorio de la estructura de una página HTML. Si practica con HTML/CSS con regularidad, puede omitir esta parte. Puede obtener todos los detalles sobre las etiquetas y atributos disponibles en el W3C (http://www.w3.org/standards/webdesign/htmlcss). Hay varias versiones para una página HTML; la última versión es la 5. Hay dos familias de páginas HTML: la familia SGML y la familia XML, ambas son compatibles con los navegadores recientes. La familia XML es más estricta que la familia SGML, pero no representan una gran diferencia para los navegadores, ya que han sido diseñados para resistir una serie de errores.
Una página HTML está formada por etiquetas. Una etiqueta tiene la posibilidad de tener contenido si su naturaleza lo permite. La suma de las relaciones contenedor/contenido forma la estructura de su página. En la parte superior de esta estructura se encuentra la etiqueta html que, por lo tanto, es única y se denomina etiqueta raíz o elemento raíz. La sintaxis de una etiqueta está formada por una parte de apertura mediante los símbolos mayor y menor que y, posiblemente, si tiene contenido por una parte de cierre, a su vez construida con símbolos mayor y menor que.
Ejemplo
<b>Hello</b> La etiqueta b tiene el texto Hello, se usa para poner el texto en negrita. Tiene una parte de apertura <b> y una parte de cierre </b>. Lo que hay en el medio es el campo de aplicación.
En su parte de apertura, la etiqueta puede tener uno o más atributos. Un atributo es un par clave/valor única, separado por =. El valor puede ir entre comillas o apóstrofos.
Ejemplo
<img src="images/hello.jpg"> La etiqueta img no tiene contenido, tiene un atributo src que designa la ubicación de un archivo de imagen, relativo a la página actual.
En el formato XML, tenemos que escribir:
<img src="images/hello.jpg"/> Lo que es equivalente a:
<img src="images/hello.jpg"></img> Durante la construcción de una página HTML, normalmente tiene este tipo de estructura:
<html>
<head>
Configuración de página
</head>
<body> ...Librerías JavaScript
1. El objeto window
a. Rol
El objeto window tiene la particularidad de tener sus propiedades y sus métodos disponibles en el espacio de nombres global. Su uso es común y ya lo ha podido utilizar sin saberlo, por ejemplo, usando el método alert.
Ejemplo
alert( "hola" );
window.alert( "hola" ); // Equivalente Estas dos invocaciones son equivalentes. Tenga en cuenta que, en la práctica, solo se utilizará la primera forma por motivos de eficiencia.
Hay muchas propiedades y métodos en el objeto window. Presentaremos los de uso común a continuación.
En la misma línea que el método alert, el método confirm se utiliza para obtener la confirmación de un usuario, a través de un cuadro de diálogo modal. El método prompt espera a que se introduzca un valor y se devuelve null si el usuario lo rechaza.
Ejemplo
if ( confirm( "¿Quiere empezar el juego?" ) ) {
var numeroMagico = Math.round( Math.random() * 10 );
var intento = 0;
while ( true ) {
intento++;
var val = prompt( "¿Su número?" );
if ( val ) {
if ( val == numeroMagico ) {
alert( "Felicidades, ha conseguido " + intento +
" intento(s)" );
break;
} else
if ( val > numeroMagico ) {
alert( "Es más pequeño" );
} else
alert( "Es más grande" );
} else
break; ...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 agrega una nueva línea. Estos métodos no son dinámicos, en el sentido de que solo pueden funcionar una vez y al interpretar la etiqueta script. Son de uso bastante raro, excepto para errores, pruebas y casos especiales.
Como vimos en la introducción, un documento HTML se compone de etiquetas. El navegador tiene un analizador interno, que convertirá estas etiquetas en una jerarquía de nodos (objetos), correspondientes a la estructura de árbol de sus etiquetas. Esta organización se representa usando un estándar definido por el W3C llamado DOM (Document Object Model). Estos nodos representan la estructura de su documento y son accesibles en JavaScript. Por tanto, es posible modificar el documento modificando los nodos que lo componen. Un nodo que puede tener contenido y/o atributos es un elemento.
En cuanto a los nodos, tenemos las siguientes propiedades principales de JavaScript:
|
Propiedad |
Rol |
|
attributes |
Tabla de atributos. |
|
childNodes |
Tabla de nodos hijo. |
|
data |
Texto del nodo. |
|
firstChild |
Primer nodo hijo. |
|
lastChild |
Último nodo hijo. |
|
nextSibling |
Siguiente nodo hermano. |
|
nodeName |
Nombre del nodo. Ya sea el nombre de una etiqueta o 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 |
Anterior nodo hermano. |
Entre los métodos, encontramos principalmente:
|
Método |
Rol |
|
appendChild() |
Agregar un nodo hijo. |
|
appendData() |
Agregar texto al nodo. |
|
cloneNode() |
Clonar el nodo. Si hay un argumento true, el contenido también se clona. |
|
deleteData() |
Borrar parte del texto presente en el nodo. |
|
getAttribute() |
Recuperar el valor de un atributo de un elemento. |
|
getAttributeNode() |
Recuperar el nodo DOM asignado al elemento. |
|
hasChildNodes() |
Indicar si el nodo contiene hijos. |
|
insertBefore() |
Insertar un nodo antes que otro. |
|
insertData() |
Insertar un texto en una posición determinada. |
|
removeAttribute() |
Eliminar un atributo. |
|
removeAttributeNode() |
Eliminar un nodo DOM atributo. |
|
removeChild() |
Eliminar un nodo hijo. |
|
replaceChild() |
Reemplazar un nodo hijo por otro. |
|
replaceData() |
Reemplazar un texto por otro. |
|
setAttribute() |
Asignar un valor a un atributo para un elemento. |
|
setAttributeNode() |
Asignar... |
Formulario
1. Validación simple
Como el uso de JavaScript para la administración de formularios es común, sugeriremos algunos usos aquí. En primer lugar, se usa el evento onsubmit en la etiqueta form, para verificar el contenido del formulario antes de enviarlo.
Ejemplo
<html>
<head>
<script type="text/javascript">
function validar( form ) {
var fields = form.getElementsByTagName( "input" );
for ( var i = 0;i < fields.length; i++ ) {
var f = fields[ i ];
if ( f.type == "text" && f.value == "" ) {
alert( "Gracias por completar el campo " + f.name );
f.focus();
return false;
}
}
return true;
}
</script>
</head>
<body>
<form onsubmit="return validar(this)">
<input type="text" name="nombre"> <br>
<input type="text" name="apellido"> <br>
<input type="submit" value="Validar">
</form>
</body>
</html> En este ejemplo, revisamos todos los campos de texto y comprobamos si están vacíos o no. En el caso de un campo vacío, advertimos al usuario que debe completar el campo y colocar el foco (el cursor) en el campo en cuestión, mediante el método del mismo nombre. La función que realiza una validación, debe devolver un valor booleano para permitir...
Caso de estudio
1. Gestión de notas en una página web, arquitectura MVC
a. Primera etapa
Este caso de estudio consiste en poder agregar y eliminar un conjunto de notas en una página web. Intentamos seguir una arquitectura MVC (Modelo Vista Controlador), para poder cambiar la presentación como elija el usuario. Esta arquitectura consiste en separar adecuadamente cada componente de la aplicación. Por lo tanto, 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.
Cuando inicie un proyecto, no puede centrarse solo en el esqueleto de la aplicación. Como vimos en un capítulo anterior, lo que se debería favorecer es la arquitectura en módulo. Entonces tenemos como punto de partida algo como esto:
var notas = ( function() {
return {
agregarItem: function() {
},
eliminarItem: function( indice ) {
}
};
} )(); Por lo tanto, este módulo básico ofrece dos accesos a través de los métodos agregarItem y eliminarItem. Tenga en cuenta que este último tiene un parámetro llamado indice, porque es necesario especificar qué nota eliminar.
b. Modelo de datos
Como hemos visto, el modelo de datos debe conservar todos los datos del usuario. Para hacer esto, debe tener un método para agregar y para eliminar.
Ejemplo
var notas = ( function() {
var model = {
data: []
};
model.adicion = function( nota ) {
this.data.push( { "texto": nota } );
}
model.eliminar = function( indice ) {
this.data.splice( indice, 1 );
}
return {
agregarItem: function() {
var nota = prompt( "Su nota" );
if...