Bajar el código fuente del ejemplo hecho en el artículo

Este artículo está dirigido para un principiante que no tenga ningún tipo de experiencia previa en programación.

Para hacerlo usaremos Visual Studio 2012. Si usted no dipone de una versión de Visual Studio 2012, puede bajar la versión gratuita (Express) en este enlace.

Tambien podría usar cualquier otro editor de texto, como por ejemplo Notepad, pero utilizar Visual Studio, le dará características extras que le facilitarán la tarea de programar.

Una vez instalado el Visual Studio 2012, crearemos nuestro primer proyecto Web que utilice JavaScript. Para eso vamos al Menú File y seleccionamos New y luego Project y en la ventana New Project que aparece, en el panel de la izquierda, seleccionamos Web. El lenguaje que seleccionemos (C# o Visual Basic) no tiene importancia para este proyecto, porque aquí, solo haremos una página html que ejecute código del cliente en JavaScript y no utilzaremos código del lado del servidor. A la derecha, seleccionamos ASP.NET Empty Web Application, y le colocamos "PrimerJavaScript" como nombre a nuestro proyecto como se ve en la figura 1:

Creando nuestro Primer Proyecto Web
Figura 1 - Creamos un nuevo proyecto Web vacío con Viusal Studio 2012

Como vemos en la figura 2, Visual Studio crea un Proyecto web vacio que solo contiene un archivo Web.config, las referencias y las propiedades:

La ventana de exploración del Proyecto
Figura 2 - La ventana de exploración del Proyecto, muestra que se ha creado un proyecto  
vacío (o casi vacío, porque contiene el archivo de configuración)

 

Un archivo de configuración Web, (web.config) va mas allá del tema tratado en este artículo, y será tratado en un futuro artículo de La Escuela del Programador

Ahora, vamos a agregar una nueva página html a nuestro proyecto para eso, hacemos click derecho en el nombre del proyecto en la ventana "Solution Explorer del Visual Studio y, en el menú que aparece, seleccionamos Add, y luego HTML Page, como se ve en la Figura 3:

Agregando un nuevo archivo HTML a nuestro proyecto
Figura 3 - Agregando un nuevo archivo HTML a nuestro proyecto

Como vemos a continuación, Visual Studio ya agrega la estructura mínima necesaria para nuestra página html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

</body>
</html>

Para hacer el código aún más simple, podemos quitar la parte xmlns="http://www.w3.org/1999/xhtml", de la segunda línea, ya que esto no afectará para nada nuestro programa, quedando definitivamente asi:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

</body>
</html>

En el nodo head del código que se ve arriba, agregamos un título a nuestra página y agregamos nuestro primer código javascript, dentro de la etiqueta de html <script>:

<head>
   <title>Primera Aplicación Web con JavaScript</title>
   <script>
     function unAlerta(mensaje) {
       alert(mensaje);
     }
     unAlerta("Mi Primer Proyecto Web con JavaScript");
  </script>
</head>

¡Y ya tenemos lista nuestra primera aplicación! Lo único que nso queda por hacer es correr la aplicación, para lo que, en Visual Studio, simplemente apretamos F5 y eso correrá la aplicación en nuestro navegador web por defecto, como se ve en la figura 4:

Corriendo la aplicación
Figura 4 - Salida de nuestro primer programa con JavaScript

Usando un Archivo JavaScript Externo con Visual Studio 2012

Si bien nuestra primera aplicación funciona,le haremos un pequeño cambio, para que el código javascript no esté embebido en el html, sino que esté contenido en un archivo externo javascript (archivo con extensión js)

Para ello, primero borramos de nuestro archivo html, todo el nodo <script> y lo reemplazamos por el siguiente tag:

 <script src="miScript.js"></script>

De esa manera nuestro archivo html queda así:

<!DOCTYPE html>
<html>
<head>
    <title>Primera Aplicación Web con JavaScript</title>
    <script src="miScript.js"></script>
</head>
<body>
</body>
</html>

Como vemos, ahora el código html, esta haciendo referencia a un script contenido en un archivo javascript llamado miScript.js. A continuación, agregaremos ese archivo a nuestro proyecto, haciendo click con el botón derecho del mouse en el nombre del proyecto en el explorador de la solución y seleccionando Add en el menú contextual que aparece, y luego JavaScript File, como se ve en el afigura 5:

 

Agregando un nuevo archivo HTML a nuestro proyecto
Figura 5 - Agregando un nuevo archivo JavaScript a nuestro proyecto

En la ventana que aparece escribimos el nombre que le queremos dar a nuestro archivo JavaScript, en nuestro caso miScript, y luego en el editor del archivo escribimos lo mismo que teníamos en nuestra primera versión de al aplicación, pero sin los tags de script:

function unAlerta(mensaje) {
    alert(mensaje);
}
unAlerta("Mi Primer Proyecto Web con JavaScript");

Ahora ya la ventana Solution Explorer se verá como en la Figura 6:

La ventana de exploración del Proyecto, después de agregar un archivo JavaScript
Figura 2 - La ventana de exploración del Proyecto, después de agregar un archivo JavaScript

Ahora si volvemos a correr la aplicación (pulsando F5), obtendremos la misma salida anterior, que se observa en la Figura 4.

Bajar el código fuente del ejemplo hecho en el artículo

respag   
Panamá © 2012
Haga su donación para colaborar con La Escuela del Programador

La Escuela del Programador es un sitio web sin anuncios, sin ánimo de lucro, no es un sitio web comercial. Es el sueño de compartir con todos, muchos años de una gran pasión. Si realmente encuentra este sitio útil y lo aprovecha, le pido su generosa y no importa cuán modesta colaboración, simplemente para afrontar los costos de mantener este sitio disponible en internet.
No deseo lucrar con este sitio, ya que lo hago desinteresadamente, sólo le pido que, si puede, aporte (desde un dólar hasta lo que crea que puede dar), para afrontar los costos de dominio y hosting. Muchísimas gracias y ojalá juntos podamos hacer un sitio que sea una buena fuente de aprendizaje de programacíon en español.

Si no se siente en condiciones de colaborar, igualmente será bienvenido al sitio, es libre para todos y será un placer que encuentre mis artículos provechosos, pero si realmente me ayuda con una donación minima, seguramente, colaborará para que La Escuela del Programador se mantenga en la Web y crezca, conviertiendo a este sitio hecho con mucha pasión, dedicación y esfuerzo, en una buena fuente de aprendizaje.

Mis saludos cordiales y gracias por interesarse en mi sitio.

Rubén E. Spagnuolo
respag
Panamá - © 2012