Javascript: Como usar archivos .js externos en una pagina web

Seguimos con ejemplos muy basicos de Javascript. En esta ocasion quiero mostrar como incluir un archivo externo .js dentro de una pagina HTML. Los archivos .js contienen exclusivamente codigo fuente en lenguaje Javascript.

ejemplo_2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Javascript [Ejemplo 2] Uso de archivos js externos</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<script language="Javascript" type="text/javascript" src="js_script1.js">
	/*
		Descripcion:			Muestra como incluir un archivo externo .js en una pagina web
		Autor:				Gonzalo Silverio  gonzasilve@gmail.com
		Archivo:    			ejemplo_2.html
		Relacionado con:	js_scripts1.js
	*/
	</script>
</head>
<body bgcolor="#FFFFFF">
	<h1 id="mensajeHola">

	</h1>
	
<br /><br />
  <p>
    <a href="http://validator.w3.org/check?uri=referer"><img
      src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
  </p>
  
  
</body>
</html>

Observa como es casi identica a la instruccion para incluir codigo Javascript (linea 07), con la diferencia que se le coloca un tercer parametro, src, el cual permite indicar el archivo de codigo javascript que se desea utilizar. De esta manera separamos la pagina web de su comportamiento. La sintaxis es:

	<script language="Javascript" type="text/javascript" src="js_script1.js">
	/* Algun comentario */
	</script>

<!-- O en una sola linea -->
	<script language="Javascript" type="text/javascript" src="js_script1.js"></script>

A continuacion muestro el archivo Javascript al que hace referencia el archivo ejemplo_2.html anterior…

js_script1.js

	/*
		Descripcion:			Muestra un mensaje en una etiqueta h1 con ayuda de su Id,
						desde una funcion
		Autor:				Gonzalo Silverio  gonzasilve@gmail.com
		Archivo:    			js_script1.js
		Relacionado con:    		ejemplo_2.html
	*/

	window.onload =escribirMensaje;
	
	function escribirMensaje()
	{
		document.getElementById("mensajeHola").innerHTML = "&iexcl;Hola Mundo Javascript!.";
	}

A continuacion muestro la imagen de este ejemplo mostrandose en el navegador Chrome:
Ejemplo 2 en el navegador Chrome

Bueno, pues aqui acaba mi ejemplo, eso es todo por ahora. Saludos

Acerca de gonzasilve
Freelance Web Developer.

3 Responses to Javascript: Como usar archivos .js externos en una pagina web

  1. Some truly select content on this website , saved to my bookmarks .

  2. Qleoz12 dice:

    como seria si fuera con un boton o un imput en ves de que cuando carge la ventana XD;

    • gonzasilve dice:

      Ha pues para hacer eso, dentro del archivo js_script1.js comenta la linea que dice
      window.onload =escribirMensaje; comentala asi:
      //window.onload =escribirMensaje;

      y agrega un enlace en la pagina html asi:

      <a href="javascript:void();" onclick="javascript:escribirMensaje();">Mensaje Hola</a>

      Saludos y gracias por tu visita.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: