• 10 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 6/12/20

Configura tu entorno de desarrollo

Log in or subscribe for free to enjoy all this course has to offer!

 

 

Ahora que conoces un poco de la historia de JavaScript y para qué se utiliza, vamos a ver una serie de herramientas muy útiles para empezar a programar. Antes de empezar un proyecto de desarrollo, es muy importante configurar un entorno de desarrollo cómodo y adaptado a tus necesidades. 

Programar con JavaScript online

Una solución simple y muy rápida para desarrollar en JavaScript consiste en utilizar una herramienta en línea. Estos sitios web permiten escribir código y observar el resultado inmediatamente. Los más utilizados son JSFiddle, JS Bin y CodePen.

Estos sitios son muy prácticos para experimentar y compartir código. Sin embargo, su objetivo no es realizar proyectos completos en ellos. Lo ideal es configurar tu propia máquina para disponer de un entorno de trabajo óptimo.

Configurar tu entorno de desarrollo

Elegir un navegador web

Un navegador es un software que permite el acceso a la web y que nos capacita a visualizar los ficheros html y ejecutar el código de JavaScript asociado. Los más conocidos son Firefox, Chrome e Internet Explorer.

Firefox presenta la ventaja de ser un navegador de código abierto, rápido, seguro y ampliamente utilizado. Es mi navegador preferido a nivel de usuario. Sin embargo, en este curso utilizaremos Chrome ya que es el navegador con mayor número de usuarios y por tanto, es el primer navegador en el que tenemos que asegurarnos de que nuestro código funcione a la perfección.

Google Chrome
Google Chrome

Si no dispones de él descárgalo aquí, aunque si prefieres utilizar Firefox o algún otro también puedes hacerlo. Los navegadores disponen de las "DevTools" o herramientas de desarrollo, una serie de herramientas que facilitan el trabajo de los desarrolladores. Durante el curso las utilizaremos para ver el comportamiento de nuestro código JavaScript. Para abrir la consola de desarrollo puedes hacerlo de varias formas:

  • Pulsa las teclas 'Control' + 'Alt' + 'i'

  • Haz clic en 'Ver'  > 'Opciones para desarrolladores' > 'Herramientas para desarrolladores' 

 

Herramientas para desarrolladores o 'DevTools'
Herramientas para desarrolladores o 'DevTools'

 

Elegir un editor de texto para desarrollar

Aunque para programar puedes utilizar cualquier editor de texto, hay algunos que están especialmente diseñados para programadores. Con estos editores, las diferentes partes del código aparecen resaltadas, se autocompletan partes que se repiten y, en general, te facilita mucho la vida a la hora de programar.

Algunos de los editores de texto más utilizados por los desarrolladores web son Sublime Text, Atom o Brackets. En este curso utilizaremos Sublime. Puedes descargar la última versión aquí: Sublime Text.

 

Organizar el código fuente

Cuando comienzas un nuevo proyecto, es muy importante que esté bien ordenador desde el principio. Aunque en los primeros momentos tengas sólo algunos archivos, a medida que avanzamos se van creando otros nuevos, hasta tener cientos e incluso miles de archivos. Por ello, es necesario ser ordenado a la hora de clasificar nuestros archivos.

Para empezar con buen pie, crea un nuevo directorio donde guardar todos tus proyectos de desarrollo. Yo le he llamado "Proyectos". Dentro de dicho directorio, puedes crear otro que se llame "intro-javascript", en el que guardar todos los archivos de este curso. Divide el curso en partes y capítulos y crea dos directorios con nombre js y html, para los archivos de javascript y de html, respectivamente. 

Crea un nuevo proyecto desde la terminal
Crea un nuevo proyecto desde la terminal

Te sugiero que lleves a cabo la creación de las carpetas del proyecto desde la terminal. Es una forma de seguir practicando y que no se te olviden los comandos más básicos. Además, con Sublime puedes abrir la carpeta del proyecto desde la terminal utilizando el comando "subl ruta_del _proyecto". Como ves en la imagen, me encuentro en el directorio "intro-javascript", por lo que utilizo un punto (".") para indicar que quiero abrir Sublime en el directorio en el que me encuentro actualmente.

Una vez tengas Sublime abierto en la carpeta "intro-javascript", puedes crear un nuevo archivo con el atajo de teclado "Control + n". Crea en sus respectivas carpetas, dos archivos, uno con extensión 'html' y el otro con extensión 'js'. En el archivo .js, que yo he llamado scripts.js , añade la siguiente línea:

console.log("Hola mundo");

Esta línea de código en JavaScript muestra en la consola del navegador el texto que le pases, en este caso "Hola mundo". Los usuarios no ven normalmente los mensajes de la consola, por lo que se utiliza para testear y explorar posibles errores de la aplicación. ‌

En el documento html, que yo he llamado  curso.html, añade el siguiente contenido:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Introduccción a JavaScript</title>
    </head>
    <body>
        <p>Bienvenido al curso de JavaScript</p>
        
        <script src="../js/scripts.js"></script>
    </body>
</html>

Si no entiendes nada del código que hemos escrito en estos dos archivos, no te preocupes, es sólo una pequeña página web escrita en HTML. En el cuerpo del documento html mostramos un párrafo con el texto "Bienvenido al curso de JavaScript".

Para que se cargue el archivo JavaScript externo que hemos creado, utilizamos la etiqueta  <script src="../js/scripts.js"></ script>. Con el atributo src indicamos la ruta en la que se encuentra el archivo JS. En este caso utilizamos los  ..  para saltar atrás un paso, y entrar en la carpeta  js, ya que el archivo curso.html se encuentra en la ruta intro-javascript/html/curso.html

Estructura básica del proyecto en Sublime
Estructura básica del proyecto en Sublime

Prueba tu primer programa

Abre el archivo  curso.html en Chrome y abre la consola (recuerda,  control + alt + i). En el cuerpo del documento html verás el párrafo con el texto "Bienvenido al curso de JavaScript". Pero lo que más nos importa ahora, es que veas el mensaje que se muestra en la consola.

‌  

Resultado en el navegador
Resultado en el navegador

 

‌¡Enhorabuena! Tu entorno de desarrollo está listo, y has escrito tu primera línea de código‌ JavaScript.

Example of certificate of achievement
Example of certificate of achievement