La integración de JavaScript
y HTML es muy flexible, ya que existen al menos tres formas para incluir código
JavaScript en las páginas web.
Incluir JavaScript
en el mismo documento HTML
El código JavaScript se
encierra entre etiquetas <script> y se incluye en cualquier
parte del documento. Aunque es correcto incluir cualquier bloque de código en
cualquier zona de la página, se recomienda definir el código JavaScript dentro
de la cabecera del documento (dentro de la etiqueta <head>):
<!DOCTYPE
html>
<html>
<head>
<meta charset="utf-8">
<title> Probando JS</title>
</head>
<body>
<script
type="text/javascript">
alert("
Bienvenidos Queridos Aprendices ");
</script>
</body>
</html>
Para que la página HTML
resultante sea válida, es necesario añadir el atributo type a la
etiqueta <script>. Los valores que se incluyen en el atributo type están
estandarizados y para el caso de JavaScript, el valor correcto es text/javascript.
Este método se emplea cuando
se define un bloque pequeño de código o cuando se quieren incluir instrucciones
específicas en un determinado documento HTML que completen las instrucciones y
funciones que se incluyen por defecto en todos los documentos del sitio web.
El principal inconveniente
es que, si se quiere hacer una modificación en el bloque de código, es
necesario modificar todas las páginas que incluyen ese mismo bloque de código
JavaScript.
Definir JavaScript
en un archivo externo
Las instrucciones JavaScript
se pueden incluir en un archivo externo de tipo JavaScript que los documentos
XHTML enlazan mediante la etiqueta <script>. Se pueden crear todos
los archivos JavaScript que sean necesarios y cada documento XHTML puede
enlazar tantos archivos JavaScript como necesite.
Ejemplo:
Archivo prueba.js
alert(" Probando el JS ");
Documento HTML
<!DOCTYPE
html>
<html>
<head>
<meta charset="utf-8">
<title> Probando JS</title>
</head>
<body>
<p>Bienvenidos Queridos Aprendices
</p>
<script type="text/javascript"
src="prueba.js">
</body>
</html>
Además del atributo type,
este método requiere definir el atributo src, que es el que indica la URL
correspondiente al archivo JavaScript que se quiere enlazar. Cada
etiqueta <script> solamente puede enlazar un único archivo,
pero en una misma página se pueden incluir tantas etiquetas <script> como
sean necesarias.
Los archivos de tipo
JavaScript son documentos normales de texto con la extensión .js, que se
pueden crear con cualquier editor de texto como Notepad, Sublime Text, Visual
Studio Code, Brackets.io. entre otros.
La principal ventaja de
enlazar un archivo JavaScript externo es que se simplifica el código HTML de la
página, que se puede reutilizar el mismo código JavaScript en todas las páginas
del sitio web y que cualquier modificación realizada en el archivo JavaScript
se ve reflejada inmediatamente en todas las páginas HTML que lo enlazan.
Incluir JavaScript
en los elementos HTML
Este último método es el menos utilizado, ya que consiste
en incluir trozos de JavaScript dentro del código XHTML de la página:
<!DOCTYPE
html>
<html>
<head>
<meta charset="utf-8">
<title> Probando JS</title>
</head>
<body>
<p onclick="alert('Probando el
enlace')">
Bienvenidos
Queridos Aprendices
</p>
</body>
</html>
El mayor inconveniente de
este método es que ensucia innecesariamente el código HTML de la página y
complica el mantenimiento del código JavaScript. En general, este método sólo
se utiliza para definir algunos eventos y en algunos otros casos especiales,
como se verá más adelante.
Comentarios
Publicar un comentario