JQuery: Asignar un controlador al evento click de un enlace

Sencillo ejemplo que muestra como ejecutar una funcion al hacer click en un enlace con JQuery. El ejemplo basicamente consiste en dos enlaces y dos capas (DIVS), el primer enlace al darle click calcula un numero aleatorio y lo muestra en las dos capas. Cada capa inicialmente tiene una hoja de estilos diferente. El segundo enlace al darle click intercambia las hojas de estilos de cada capa.

A continuacion copio el codigo completo del ejemplo:
index.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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>.::Ejemplo2 con JQuery::.</title>
	<script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>

    <script type="text/javascript">
		var miPaginaWeb = $(document);
		miPaginaWeb.ready(inicializaJQuery);	
		
		function inicializaJQuery() {
			$('#capa1').html("Contenido DIV1");	//Texto por default de capa1
			$('#capa2').html("Contenido DIV2");	//Texto por default de capa2
			
			var miEnlace = $('#enlace');
			//Asignar funcion controladora a evento click del enlace 1
			miEnlace.click(actualizaNumAleatorio);
			
			var miEnlace2 = $('#enlace2');
			//Asignar funcion controladora a evento click del enlace 2
			miEnlace2.click(intercambiaClases);
		}
			
		//Funcion controladora de evento del enlace 1
		function actualizaNumAleatorio() {
		
			var miCapa = $('#capa1');
			var num = Math.random()*100;	//Calcular primer numero
			miCapa.html("Numero aleatorio: "+num);
			
			var miCapa2 = $('#capa2');
			var num = Math.round(Math.random()*100);	//Calcular y redondear segundo numero
			miCapa2.html("Otro aleatorio: "+num);
			
		}
			
		//Funcion controladora de evento click del enlace 2
		function intercambiaClases() {
			var miCapa = $('#capa1');
			var miCapa2 = $('#capa2');
			
			//Obtener el nombre de la clase asignada al Div1
			var claseActual = $('#capa1').attr('class');
			
			if( claseActual=='estilo1' ) {					
				miCapa.removeClass("estilo1");
				miCapa.addClass("estilo2");
				miCapa2.removeClass("estilo2");
				miCapa2.addClass("estilo1");
			}
			else {
				miCapa.removeClass("estilo2");
				miCapa.addClass("estilo1");
				miCapa2.removeClass("estilo1");
				miCapa2.addClass("estilo2");				
			}
			
		}
    </script>
   </head>
  <style type="text/css">
    <!--
    .estilo1 {
		font-size:22px;
		color:#FF8800;
		font-weight:bold;
		text-shadow:1px 1px 1px #8BD4EF;
		}
    .estilo2 {
		font-size:16px;
		color:#9F28D6;
		font-weight:bold;
		text-shadow:1px 1px 1px #CCFF66;
		}
    -->
  </style>
   <body>
		<div class="estilo1" id="capa1">	</div>
		<br/>
		<div  class="estilo2"  id="capa2">	</div>
		
		<br/><br/>
		<a href="#" id="enlace">Generar Numero Aleatorio</a>		
		<br/>
		<a href="#" id="enlace2">Intercambiar estilos (clases)</a>
		
   </body>
</html>

A continuacion una breve explicacion de las partes mas importantes del ejemplo:

En la linea 6 se importa la libreria JQuery que esta un nivel abajo de donde esta el archivo de este ejemplo (por eso los .. del atributo src).

	<script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>

En la linea 09 y 10 se crea un objeto asociado al documento y se le asigna a su evento ready la funcion inicializaJQuery la cual se encarga, en resumen, de asignar a cada enlace una funcion distinta para controlar su evento Click:

		function inicializaJQuery() {
			$('#capa1').html("Contenido DIV1");	//Texto por default de capa1
			$('#capa2').html("Contenido DIV2");	//Texto por default de capa2
			
			var miEnlace = $('#enlace');
			//Asignar funcion controladora a evento click de enlace 1
			miEnlace.click(actualizaNumAleatorio);
			
			var miEnlace2 = $('#enlace2');
			//Asignar funcion controladora a evento click de enlace 2
			miEnlace2.click(intercambiaClases);
		}

En la primera y segunda linea de la funcion que copie anteriormente se crea un objeto asociado a cada capa y se ejecuta inmediatamente su metodo html() para establecer un texto por defecto en cada capa.

A continuacion se crea un objeto asociado al enlace 1 y se le asigna la funcion actualizaNumAleatorio a su evento click. Ahora la funcion actualizaNumAleatorio es el controlador del evento click del enlace 1.

Esta funcion como se observa a continuacion crea primeramente un objeto de la capa1, calcula un numero aleatoriamente y se lo asigna a la capa1 a travez de su metodo html(). Los mismo hace para la capa2 con la unica diferencia de que no redondea el numero:


			//Funcion controladora de evento click del enlace 1
			function actualizaNumAleatorio() {
			
				var miCapa = $('#capa1');
				var num = Math.random()*100;	//Calcular primer numero
				miCapa.html("Numero aleatorio: "+num);
				
				var miCapa2 = $('#capa2');
				var num = Math.round(Math.random()*100);	//Calcular y redondear segundo numero
				miCapa2.html("Otro aleatorio: "+num);
				
			}			

La funcion intercambiaClases es el controlador de evento click del enlace 2. Esta funcion como se observa, crea un objeto por cada capa y a continuacion recupera el nombre del estilo de la capa1. Observe como se recupera el valor de un atributo de un objeto; para esto se utiliza el metodo attr(), la sintaxis es objeto.attr(‘nomAtributo’) en este caso se recupera el atributo ‘class’ del objeto asociado a la capa1. Si el estilo que tiene la capa1 se llama ‘estilo1’ entonces se quita el estilo1 y se asigna la clase estilo2. A la capa2 se le quita el estilo2 y se le asigna el estilo1. Creo que es muy facil de entender, asi que ya no explico mas:

		//Funcion controladora de evento click de enlace2
		function intercambiaClases() {
			var miCapa = $('#capa1');
			var miCapa2 = $('#capa2');
			
			//Obtener el nombre de la clase asignada al Div1
			var claseActual = miCapa.attr('class');
			
			if( claseActual=='estilo1' ) {					
				miCapa.removeClass("estilo1");
				miCapa.addClass("estilo2");
				miCapa2.removeClass("estilo2");
				miCapa2.addClass("estilo1");
			}
			else {
				miCapa.removeClass("estilo2");
				miCapa.addClass("estilo1");
				miCapa2.removeClass("estilo1");
				miCapa2.addClass("estilo2");				
			}
			
		}

Espero que hayas entendido la mayoria del codigo del ejemplo, ¿Sencillo, no?. A continuacion pongo una imagen del ejemplo ejecutandose en Chrome:
Ejecucion de Ejemplo2 de JQuery.

Para ver en funcionamiento el ejemplo da click en el siguiente enlace: index.html

Bueno pues, aqui termina el pequeño ejemplo, y como siempre que escribo algo; espero que ha alguien le sirva. Si gustas dejar un comentario constructivo sera bien recibido.

Saludos cordiales.

Introduccion a JQuery

Breve introduccion a JQuery; que es, donde conseguirlo, etc. JQuery es un Framework de Javascript; es decir, un conjunto de rutinas escritas en javascript listas para usarse y que nos hacen mas facil acceder a los objetos del DOM.

Con este Framework podras realizar tareas cotidianas dentro de tu pagina web sin tener que codificarlas pues ya vienen incluidas por defecto y ademas, ya estan probadas que funcionan de manera exacta y correcta en distintos navegadores. Ademas de las tareas cotidianas podras realizar mucho mas, por ejemplo, podras hacer mas bonitas tus interfaces de usuario y agregarles efectos de animacion. Al enriquecer un sitio web con estos componentes y funcionalidades se podria decir que pasando a la web 2.0.

Por si te da flojera aprender Javascript o no lo usas mucho, cuando realizes los primeros ejemplos de este sitio te daras cuenta que JQuery es muy facil de utilizar y no lo cambiaras por nada, lo usaras en todas las paginas donde necesites usar Javascript.

¿JQuery tiene algun costo?
No, JQuery es gratuito, los puedes usar de manera personal o en tus proyectos comerciales. JQuery tiene licencias MIT License y GPL. Puedes leer mas aqui: http://jquery.org/license/.

¿Donde consigo JQuery?
Lo puedes descargar desde aqui http://jquery.com/. A la fecha actual la version mas reciente es esta: http://code.jquery.com/jquery-1.8.0.min.js (para bajarlo en Firefox; Da click derecho sobre el enlace, y elije la opcion Guardar vinculo como…).

¿Realmente necesito usar un Framework?
Pues, como te explico, mira; si quieres reinventar la rueda y pelearte con los niveles mas bajos de programacion en Javascript o simplemente si lo que estas buscando es aprender Javascript no aprendas JQuery (todavia). Porque presisamente para eso fue creado JQuery; para no tener que implementar las funciones (a manitaa) para realizar las tareas mas basicas del lado cliente.

Y si deseas ahorrar tiempo; sí, si necesitas usar un framework.

¿Que necesito para aprender JQuery?

  1. El Framework en sí.
  2. Conocimientos basicos de Programación Orientada a Objetos (POO).

En resumen el Framework jQuery nos brinda las siguientes ventajas:

  • Escribimos menos codigo y hacemos mas.
  • No tienes que preocuparte por la compatibilidad de tu codigo Javascript en los diferentes navegadores.
  • El manejo de objetos es mucho mas sencillo.
  • Permite agregar efectos de animacion muys vistosos a capas y a componentes de la GUI de manera muy facil.
  • Contiene bastantes capacidades para hacer uso de Ajax.
  • Es extensible; es decir, le puedes agregar plugins para ampliar las capacidades de este Framework.

Animo! despues de que comprendas las grandes ventajas de usar JQuery te daras cuenta que el esfuerzo que invertiste en aprenderlo valio la pena. Sigue leyendo.

Como usar JQuery
A continuacion una imagen de la estructura de carpetas que utilizare para mostrar los ejemplos con JQuery. Para cada ejemplo, como puedes ver, voi a crear una carpeta que contendra todos los archivos relacionados con dicho ejemplo:
Estructura de carpetas de los ejemplos.
Como se observa, he creado una carpeta llamada ejemplo 1 donde he guardado el archivo index.html que pongo a continuacion:

index.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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>.::Ejemplo1 con JQuery::.</title>
    <script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>	

    <script type="text/javascript">
      $().ready(function() {
		$('#mensaje').html("<strong>Hola Mundo JQuery</strong>");

      });
    </script>
   </head>
   <body>
		<div id="mensaje"></div>
		
   </body>
</html>

El ejemplo es el tipico Hola mundo en una pagina web HTML pero escrito con ayuda de JQuery. A continuacion doy una breve explicacion, pon mucha atencion:

En la linea 06 se esta importando el archivo jquery-1.8.0.min.js el cual contiene el codigo javascript de JQuery. En la linea 09 se coloco el evento Ready() el cual unicamente se activa (ejecuta) despues de que se han recibido completamente todos los archivos (por ejemplo; imagenes, texto, etc) de la pagina web. Como se observa dentro de este metodo he colocado una funcion y la llave de cierre de esta funcion esta en la linea 12, junto con el parentesis de cierre del metodo Ready().

Observa como estoy ejecutando este metodo sobre el objeto $() el cual hace referencia al documento HTML. Es decir, si quitara la funcion que esta dentro del metodo se veria asi $().Ready(). Este metodo es el lugar ideal para colocar todos los controladores de eventos que se requieran, inicializaciones o ejecutar algun otro codigo que quieras. Lo importante es que recuerdes que este metodo unicamente se ejecuta despues de que la pagina esta completamente cargada, es decir, despues de que el DOM esta listo.

Bien, ahora como puedes observar, dentro de la funcion he colocado unicamente una instruccion:

	$('#mensaje').html("<strong>Hola Mundo JQuery</strong>");

Esta linea hace referencia al DIV que he colocado en el cuerpo de la pagina (en el body, linea 16) a travez del ID de éste. Para hacer referencia a cualquier objeto a travez de su ID se escribe un simbolo de dolar y entre parentesis y comillas $(”) el ID precedido de simbolo de gato, #. Asi; $(‘#un_Id’). Una vez que obtengo la referencia al objeto le aplico el metodo html(), el cual permite cambiar el contendido html de un objeto.

Es por esto que al ejecutar el ejemplo se muestra el texto en negrita: “Hola Mundo JQuery”.

Hay varias formas de realizar la inicializacion del documento a travez de jQuery, pero me he encontrado que muchos desarrolladores lo realizan de la manera antes explicada. A continuacion pongo otra forma de inicializar con los comentarios respectivos para que lo entiendas mas facilmente:

index2.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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>.::Otra forma de inicializar con JQuery::.</title>
	<script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>

    <script type="text/javascript">
		//Asigno al metodo Ready un controlador (una funcion que funcionara como tal).
		$().ready(inicializaJQuery);
	
		//Funcion que se ejecutara despues de que toda la pagina HTML haya sido recibida del servidor
		//Esta funcion funcionara como controlador para inicializar el documento HTML
		function inicializaJQuery() {
			var miCapa= $('#mensaje');	//Obtengo una referencia al objeto de la capa
			//Actualizo el contenido html de la capa a travez de la ref. antes obtenida
			miCapa.html("<strong>Hola Mundo JQuery</strong>");
		}
 
    </script>
   </head>
   <body>
		<div id="mensaje">	</div>
		
   </body>
</html>

Para que te quede maas claro a continuacion expongo otra tercera forma de inicializar el documento HTML con Jquery:

index3.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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>.::Ejemplo1 con JQuery::.</title>
	<script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>

    <script type="text/javascript">
		//Obtener referencia al objeto del documento HTML
		var miPaginaWeb = $(document);
		
		//Ejecutar el metodo ready sobre el objeto del documento, mandandole un controlador
		//No olvidar que este metodo solo se hace disponible despues de que todo
		//el contenido del documento html ha sido recibido del servidor.
		miPaginaWeb.ready(inicializaJQuery);
		
		//Funcion que servira como controlador para inicializar el documento.
		function inicializaJQuery() {
			var miCapa = $('#mensaje');	//Obtener referencia al DIV del body a travez de su ID
			//Contenido HTML de la capa
			var msgHola = "<strong>Hola Muundo JQuery</strong>";
			
			//Cambiar el HTMl de la capa a travez de la referencia obtenida anteriormente
			miCapa.html(msgHola);
		}
			
    </script>
   </head>
   <body>
		<div id="mensaje">	</div>
		
   </body>
</html>

Si abres cualquiera de los 3 archivos anteriores (index.html, index2.html ó index3.html ) el resultado que veras es el mismo, a continuacion la imagen de la ejecucion de index.html en el navegador Chrome:
Hola mundo en una pagina web al estilo Jquery
Para ver los ejemplos en linea, sigue los siguientes enlaces:
index.html     index2.html     index3.html

Eso es todo. Se aceptan comentarios constructivos. Hasta pronto y gracias x visitar mi blog.

Javascript: Mostrar ventanas de alerta en una pagina web

Como mostrar mensajes de Alerta al usuario dentro de la pagina Web. A veces es necesario mostrar mensajes de aviso al usuario, ya sea para informarle o advertirle algo. El ejemplo motivo de esta entrada en mi blog tiene principalmente los siguientes objetivos:

  • Ilustrar como mostrar mensajes de alerta al usuario.
  • Mostrar el estado de Javascript en en navegador con la etiqueta <noscript></noscript> de HTML.

Bueno, sin mas rodeos a continuacion muestro el archivo html:

ejemplo_3.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 3] -Mostrar ventanas de alerta</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<script language="Javascript" type="text/javascript" src="js_script2.js">
	/*
		Descripcion:			Ejemplo sobre como desplegar un mensaje de alerta y 
								como avisar al usuario en caso de que su navegador no
								soporte javascript; con  la etiqueta <noscript>
		Autor:					Gonzalo Silverio  gonzasilve@gmail.com
		Archivo:    			ejemplo_3.html
		Relacionado con:	js_script2.js
	*/
	</script>
</head>
<body bgcolor="#FFFFFF">

<noscript>
	<h2>Para ver esta pagina web se requiere JavaScript.<br>Se aborto la carga de la pagina.</h2>
</noscript>

<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>

Todo lo que aparezca dentro de esta etiqueta se mostrara en caso de que el navegador no acepte codigo Javascript. Ya sea porque el navegador no lo soporte o porque tiene desactivada la ejecucion de Javascript. Como se observa, la etiqueta <noscript>, es muy sencilla de utilizar (linea 20 a 22). Sintaxis de la etiqueta <noscript>:

<noscript>
	<!-- Mensaje para el usuario en caso de que su navegador no acepte codigo Javascript -->
</noscript>

A continuacion una imagen con la ejecucion en el navegador Chrome, en este caso se muestra el mensaje de alerta ya que mi navegador Chrome si tiene activada la deteccion de Javascript:
Ejecucion en Chrome de ejemplo3 de Javascript

El contenido del archivo js_script2.js es el siguiente

js_script2.js

	/*
		Descripcion:		muestra un mensaje al usuario avisando que su navegador soporta JavaScript.											
		Autor:			Gonzalo Silverio  gonzasilve@gmail.com
		Archivo:    		js_script2.js
		Relacionado con:	ejemplo_2.html
	*/

	alert("Ha accedido a esta pagina web, su navegador soporta JavaScript.");

Como se observa, la sintaxis de la funcion alert() de Javascript tiene la siguiente sintaxis:

<script language="Javascript" type="text/javascript">
	alert("Mensaje de alerta.");
</script>

El mensaje que se despliega en el navegador es algo similar a este:
Alerta de Javascript

Es todo, hasta la proxima.

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

Hola Mundo en Javascript

Tipico programa del Hola Mundo. Este es el primero de una serie de ejemplos que quiero publicar sobre Javascript. Poco a poco voi a ir incrementando la complejidad de los scripts hasta tocar el Tema de AJAX y despues Ajax+Base de datos. Son ejemplos muy sencillos, pero que considero muy utiles para comprender los conceptos basicos de la programacion web. Los requisitos que debes cumplir para ver funcionando este ejemplo en tu computadora son:

  • Saber escribir en la computadora.
  • Un navegador web.
  • Un editor de texto.

Supongo que si estas leyendo este articulo es porque ya sabes algo de HTML y quieres dar el siguiente paso en tu aprendizaje sobre programacion de paginas web. JavaScript es un lenguaje de scripting basado en objetos que se inserta en las paginas web y se ejecuta en el lado del cliente.

Para este ejemplo puedes usar cualquier navegador de los mas comunes, como puede ser Mozilla Firefox, Internet Explorer, Google Chrome, Opera, etc. Si usas Windows como minimos estoy casi 100% seguro que tienes instalado Internet Explorer 6 o superior. Si usas alguna distribucion de Linux seguro tienes alguna version de Mozilla Firefox.

El Editor de textos (no confundir con procesador de textos) puede ser cualquiera pero debe permitirte guarda un archivo de texto sin formato (archivo plano), algunos ejemplos de estos editores son: Bloc de notas de Windows, Notepad++ (mi preferido), Ultraedit, etc. usa el que mas te guste. En este editor es donde escribiras y guardaras el codigo fuente que muestro a continuacion:

ejemplo_1.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>Mi primer Guion</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<script language="Javascript" type="text/javascript">
	/*
		Descripcion:			Hola mundo en Javascript
		Autor:						Gonzalo Silverio  gonzasilve@gmail.com
		Archivo:    			ejemplo_1.html
	*/
	</script>
</head>
<body bgcolor="#FFFFFF">
	<h1>
		<script language="JavaScript" type="text/javascript">
			document.write("Hola Mundo Javascript");
		</script>
	</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>

Como yo uso Notepad++, mi codigo luce asi:
Ejemplo1 de Javascript: HolaMundo
Como ves tiene la sintaxis del codigo resaltada con colores bonitos, esa es la ventaja de este tipo de editores. Asi hasta da gusto programar.

Como se observa, es un ejemplo muy sencillo unicamente para ilustrar como escribir un mensaje en el navegador, pero con Javascript. Aqui lo importante es resaltar como se indica al navegador que debe interpretar el codigo como codigo Javascript. Con las etiquetas:

		<script language="JavaScript" type="text/javascript">
		//codigo javascript
		</script>

Una vez que ya tengas escrito el codigo anterior, lo guardas con la extension .htm ó .html. Abres la ruta de carpetas donde lo guardaste y lo abres con doble click:
Ejemplo 1 en el navegador Chrome
Te debe aparecer algo similar a esto:
Hola Mundo en Javascript en Chrome

Bueno, eso es todo por ahora, espero que te haya servido de Algo, si es asi, escribe algun comentario. ver un comentario me motiva a escribir mas. Saludos.

A %d blogueros les gusta esto: