Javascript es un lenguaje desligado a XHTML, independiente y con sus propias sentencias de codificación, fue constituido con el fin de permitirnos manipular el DOM de nuestro sitio de forma dinámica sin necesidad de tener que cargar la interfaz o recurrir al backend cada vez que deseemos realizar algún tipo de transición o transferencia. Si bien son independientes, Javascript y HTML fueron hechos el uno para el otro, comparten muchas reglas y utilizan el manejo de etiquetas, si bien no de la misma forma, pero las utilizan al final.
XHTML se encarga de establecer una estructura, una vista, una interfaz mediante etiquetas, Javascript se encarga de tomar dicha estructura, haciendo llamadas a sus componentes mediante las etiquetas correspondientes, y manejarla de tal manera que nos permita mostrar efectos o realizar operaciones con datos. En pocas palabras, los scripts y objetos para videos no pueden ser considerados partes de XHTML ni CSS, pero son muy importantes al momento de trabajar con una página web, por lo que es relevante para nuestro tutorial.
Elemento script
Es común utilizar Javascript para realizar validaciones de formularios, cambios de estilo, efectos y transiciones, esto puede lograrse mediante su aplicación en el documento XHTML, para lo cual utilizamos el elemento “script” o los atributos de eventos, que han caído en desuso por las mismas reglas implementadas por XHTML.
La etiqueta “script” se encargará de definir un bloque mediante el cual insertaremos un código Javascript dentro de nuestro código XHTML. Puede utilizarse de dos formas, ya sea para colocar un código de script o para llamar a un archivo externo que lo contenga, cualquiera de las dos formas en que lo vayas a utilizar, debes declararlo al final del archivo.
La razón por la que colocamos los scripts al final, es que esto hace que la carga de la página sea más rápida, ya que no se queda esperando a cargar todos los scripts antes de mostrar el contenido y la vista, esto ayuda a mejorar la experiencia del usuario. Hago mención a esto ya que anteriormente se recomendaba poner estas sentencias dentro de la etiqueta “head” de nuestro documento HTML, aún puedes hacerlo no causa ningún problema, simplemente si el script es muy pesado tardará más tiempo en mostrar el contenido.
En base a esto, podemos tener estos dos códigos:
<script type=”text/javascript”>
function lawebera() {
alert("Hola La Webera!");
}
</script>
<script type="text/javascript" src="lawebera.js"></script>
Dentro del archivo “lawebera.js” podemos tener la misma sentencia “alert” o agregar más código. La función “alert” utilizada en el ejemplo creará una ventana de alerta que desplegará el mensaje que le mandamos como parámetro, en este caso “Hola La Webera!”.
Mientras que HTML es nativo en todos los navegadores, Javascript como tal debe ser soportado para funcionar, es por ello que debemos aclarar que debes tener activo Javascript al momento de querer trabajar con script. Por defecto, el soporte a este lenguaje viene activado, así que al menos de que tú o alguna otra persona que use tu computadora lo haya desactivado, no debes tener problemas para utilizar scripts.
En caso de que el usuario que accede a tu página no lo tenga activado puedes incluir un mensaje que le alerte, esto se logra gracias a la etiqueta “noscript”, de la siguiente manera:
<noscript> <p>No tienes soporte para Javascript, por favor activalo en tu navegador o baja uno más reciente, gracias :)</p> </noscript>
Atributos de evento
Como ya mencione, estos atributos han caído en desuso pero son un buen tema de estudio para comprender su funcionamiento y la estructura que aún predomina en muchos sitios. En el pasado era común utilizar atributos de eventos para llamar funciones definidas en Javascript al momento de que alguna acción o transición se llevaba acabo, en la actualidad en lugar de utilizar estos atributos se utilizan los selectores en combinación con funciones y mediante algún framework como jQuery o Mootools manipularlos de manera sencilla para que al momento que se realice algo sobre ellos se haga la llamada.
Le llamamos atributos de evento aquellos que describen una acción, como por ejemplo “onload”, “onchange”, “onselect”, “onkeydown”, “onmouseover”, “onmouseout”, entre otros, estos pueden ser llamados en un link, botón o cualquier elemento, dependiendo del tipo de acción a la que hagan referencia.
Por ejemplo si ponemos un link el cual queremos que haga llamada a la alerta que definimos anteriormente, podemos hacer uso del atributo “onclick” y crear un código como el siguiente:
<a href="https://www.lawebera.es” >Ambos links nos darán un mensaje de alerta al momento de dar click sobre ellos, “lawebera()” es la función que ya habíamos definido en el código anterior por lo que en el contendio de esa función ya esta creado el “alert”.
Conclusión
Esto ha sido una breve introducción a lo que es el mundo del HTML dinámico, existen varios temas que se pueden manejar, pero debido a que este manual hace referencia únicamente a XHTML y CSS debemos concentrarnos sólo en las etiquetas que nos sirven para incluir scripts. Si deseas continuar estudiando sobre este tema te recomendamos que leas otros manuales dentro de nuestro sitio.
modificado el 13 septiembre, 2013 19:46