¿Por qué aprender a programar?

El texto a continuación es una traducción al español, con ciertos ajustes, del

capítulo 1 de JavaScript for kids, Nick Morgan, 2015.

¿Qué es la programación?
Las computadoras son máquinas increíblemente poderosas, capaces de realizar
hazañas increíbles, como jugar ajedrez competitivo, servir miles de páginas web o
hacer millones de cálculos complejos en menos de unos segundos.
Recientemente, las computadoras se están utilizando para crear automóviles
autónomos (que se manejan solos), mundos enteros de realidad virtual y robots
con inteligencia artificial.

Pero en el fondo, las computadoras son realmente bastante tontas. Las

computadoras sólo pueden hacer exactamente lo que nosotros, los humanos, les
digamos. Les decimos cómo comportarse usando programas de computación, que
son simplemente un conjunto de instrucciones para que las computadoras sigan.
Sin programas, ¡las computadoras no pueden hacer nada! La programación es,
por lo tanto, el arte de crear un conjunto de instrucciones que le indican a una
computadora cómo realizar una tarea.

¿Por qué aprender a programar?

La programación es un espacio para crear. Es una forma de expresión, así como
el arte y el diseño. Es un mecanismo para transformar tus pensamientos en algo
vivo que todo el mundo puede ver y con el cual puedan interactuar. Como dijo,
Steve Jobs, uno de los gigantes del mundo tech:

"Todo el mundo en este país debería aprender a programar una computadora,

porque te enseña a pensar"

— Steve Jobs
La programación se ha vuelto tan importante, que se encuentra entre las carreras
más demandadas por el mercado. Te damos tres datos del mercado de trabajo
para programadores:

1. Programador de software es la carrera que tendrá mayor crecimiento en la

próxima década en América Latina. Según estimaciones, la región va a
tener una necesidad de 1.25 millones de programadores hacia 2025.
2. Desarrolladores web y desarrolladores de software se encuentran dentro de
las profesiones mejor pagadas en América Latina.
3. Los empleos tech ya no sólo se encuentran en el sector tech. En la
actualidad 2 de cada 3 empleos tech se encuentran fuera del sector. Ello
significa que la programación abre las puertas para trabajar en diferentes
sectores y aportar tu talento al desarrollo de distintas industrias.

Historias de egresadas de Laboratoria

Las estudiantes de Laboratoria utilizan la programación como herramienta de
transformación. El 75% de las estudiantes encuentran empleo y triplican sus
ingresos. Aquí algunas historias de éxito:

Sandra (México)

Sandra terminó la preparatoria y empezó a trabajar en una tienda de autoservicio

para mantener a su hijo. Hoy, gracias a lo aprendido en Laboratoria, es
desarrolladora web en micochinito.com en la Ciudad de México y tiene un sueldo
3.5 veces mayor que antes.

Danna (Chile)

Danna tiene 26 años y por problemas económicos no pudo terminar la

Universidad. Antes de ingresar a Laboratoria trabajaba en un call center. Su primer
trabajo como desarrolladora fue en Ilógica. Hoy trabaja en ThoughtWorks,
empresa que además de triplicar su salario, la llevó a la India a capacitarse.

Carol (Perú)
Carol estudió tres años de Diseño Gráfico Publicitario. Antes de Laboratoria,
trabajaba largas horas 6 días a la semana para mantenerse a ella y a su hijo. Hoy
Carol trabaja como desarrolladora web en 54solutions, una agencia de medios
digitales con un clima laboral positivo y ganando más que nunca.

¿Qué es JavaScript?
Las computadoras son tan tontas que no podemos darle nuestras instrucciones en
inglés, español o cualquier otro idioma hablado. Tenemos que escribir nuestros
programas en un lenguaje de programación. JavaScript es justamente eso: un
lenguaje de programación.

Puede que no hayas oído hablar de JavaScript antes, pero ciertamente lo has
usado. JavaScript se utiliza para escribir programas que se ejecutan en páginas
web. JavaScript puede controlar cómo se ve una página web o hacer que la
página responda cuando un usuario hace click en un botón o mueve el mouse.
Sitios como Gmail, Facebook y Twitter usan JavaScript para facilitar el envío de
correo electrónico, publicar comentarios o navegar por sitios web.

¿Por qué JavaScript?

JavaScript no es el único lenguaje de programación que existe - de hecho, hay
literalmente cientos de lenguajes de programación. Pero hay muchas razones para
aprender JavaScript. Por un lado, es mucho más fácil (y más divertido) de
aprender que muchos otros lenguajes de programación. Pero tal vez lo mejor de
todo es que para escribir y ejecutar programas JavaScript, lo único que se
necesita es un navegador web. Un navegador web es lo que utilizas para navegar
por internet. Por ejemplo, lo que utilizas para abrir Facebook o Google o Wikipedia
en tu computadora. Los navegadores más populares son: Google Chrome, Safari,
Mozilla Firefox e Internet Explorer. Cada navegador web viene con
un intérprete JavaScript que entiende cómo leer programas JavaScript.

Otra razón que hace interesante estudiar JavaScript en este momento es su

posición como uno de los lenguages de programación más populares. Según
GitHub, una red de trabajo colaborativo para programadores, JavaScript es el
lenguaje más popular dentro de esta plataforma:

1. El documento empieza con la etiqueta <!DOCTYPE html> (que como vimos, no

tiene inicio o cierre). Su función es hacerle saber al navegador que
interprete el documento como HTML moderno, en contraposición a varios
dialectos que estaban en uso en el pasado.
2. Luego viene la etiqueta de apertura <html> (la etiqueta de cierre </
html> está al final). Por estándar, todos los documentos HTML deben tener
un elemento html que "englobe" todo lo demás.
3. Dentro del elemento html hay dos elementos: el head (cabeza en Español) y
el body (cuerpo en Español). El head contiene información sobre el
documento, y el body contiene el documento en sí.
4. Dentro del elemento head está el elemento title (con su etiqueta de inicio y
de cierre), que contiene el título del documento. Es por eso que al visualizar
el archivo en el navegador, el título en la pestaña del navegador dice: "Mi
primera web". Es importante que notemos que el
elemento title está contenido dentro del elemento head; el cual, a su vez,
está contenido dentro del elemento html.
5. Finalmente, tenemos el elemento body (entre su etiqueta de inicio y de
cierre) que contiene el contenido que se mostrará en el navegador. En este
caso, dentro del body tenemos dos elementos adicionales:
el h1 (encabezado) y el p (párrafo).

Existen muchos más elementos y etiquetas HTML, que aprenderás en su

momento. Por el momento, es hora de regresar a JavaScript.

HTML y JavaScript
Es importante que entiendas que HTML no es un lenguaje de programación; es
un lenguaje de marcado de texto. Como hemos visto, con HTML le damos una
estructura a nuestra página. Sin embargo, si queremos
darle comportamiento o interacción a nuestra web, necesitamos usar un lenguaje
de programación. Y el único lenguaje de programación para correr en los
navegadores web es JavaScript. Con JavaScript logramos que las páginas web
puedan responder a las acciones de usuario, volviéndolas interactivas.

Para incluir JavaScript en un documento HTML puedes utilizar el

elemento script y colocar tu código JavaScript entre sus etiquetas de inicio
(<script>) y cierre (</script>), tal como lo muestra el siguiente ejemplo:

<!DOCTYPE html>
<html>
<head>
<title>Mi primera web</title>
</head>
<body>
<h1>¡Hola Mundo!</h1>
<p>Esta es mi primera web</p>

<script>
alert('¡Hola Mundo!');
</script>

</body>
</html>

Muchas veces tu código JavaScript es tan extenso que no quieres que esté
ubicado en el mismo documento HTML. Para eso, la solución es crear un nuevo
documento, esta vez de formato JavaScript - utilizando la extensión .js - y
"linkear" ambos documentos a través del mismo elemento script, de la siguiente
manera:

<script src="nombre-del-documento.js"></script>

El mismo elemento script tiene un "atributo" llamado src (de source, que significa

fuente en inglés), al cual se le puede asignar la ruta de tu documento JavaScript.
Añádele interacción a tu web
¡Ahora te toca a tí! Continúa con Michelle siguiendo los pasos para agregarle
interacción a tu sitio web:

Los pasos a seguir son:

1. Agrega el elemento script al final del body de tu documento HTML

2. Dentro del mismo HTML, entre las etiquetas de inicio y cierre del
elemento script, escribe una línea de código JavaScript (por ejemplo, algo
con alert(), document.write() o prompt())
3. Guarda tu documento HTML
4. Refresca la página de tu navegador donde estás viendo tu documento
HTML
5. Ahora crea un nuevo documento llamado app.js en la misma carpeta donde
está tu HTML
6. Añádele el atributo src al elemento script con la ruta de tu archivo app.js
7. Pasa todo el código JavaScript del documento HTML al documento JS
8. Refresca la página del navegador y confirma que todo funciona
exactamente igual que antes

tiquetas y elementos HTML

Los documentos HTML se componen de elementos. Salvo algunas excepciones
(por ejemplo <!DOCTYPE html>), los elementos comienzan con una etiqueta de
inicio y terminan con una etiqueta de fin. Por ejemplo, en nuestro documento
tenemos el elemento p, que comienza con la etiqueta de inicio <p> y termina con la
etiqueta de finalización </p>. El texto que se encuentra entre las etiquetas de
apertura y de cierre es el contenido del elemento.
El elemento p (párrafo) como
ejemplo: 

Hagamos un recorrido por todos los elementos de nuestro documento:

1. El documento empieza con la etiqueta <!DOCTYPE html> (que como vimos, no

tiene inicio o cierre). Su función es hacerle saber al navegador que
interprete el documento como HTML moderno, en contraposición a varios
dialectos que estaban en uso en el pasado.
2. Luego viene la etiqueta de apertura <html> (la etiqueta de cierre </
html> está al final). Por estándar, todos los documentos HTML deben tener
un elemento html que "englobe" todo lo demás.
3. Dentro del elemento html hay dos elementos: el head (cabeza en Español) y
el body (cuerpo en Español). El head contiene información sobre el
documento, y el body contiene el documento en sí.
4. Dentro del elemento head está el elemento title (con su etiqueta de inicio y
de cierre), que contiene el título del documento. Es por eso que al visualizar
el archivo en el navegador, el título en la pestaña del navegador dice: "Mi
primera web". Es importante que notemos que el
elemento title está contenido dentro del elemento head; el cual, a su vez,
está contenido dentro del elemento html.
5. Finalmente, tenemos el elemento body (entre su etiqueta de inicio y de
cierre) que contiene el contenido que se mostrará en el navegador. En este
caso, dentro del body tenemos dos elementos adicionales:
el h1 (encabezado) y el p (párrafo).
Existen muchos más elementos y etiquetas HTML, que aprenderás en su
momento. Por el momento, es hora de regresar a JavaScript.

HTML y JavaScript
Es importante que entiendas que HTML no es un lenguaje de programación; es
un lenguaje de marcado de texto. Como hemos visto, con HTML le damos una
estructura a nuestra página. Sin embargo, si queremos
darle comportamiento o interacción a nuestra web, necesitamos usar un lenguaje
de programación. Y el único lenguaje de programación para correr en los
navegadores web es JavaScript. Con JavaScript logramos que las páginas web
puedan responder a las acciones de usuario, volviéndolas interactivas.

Para incluir JavaScript en un documento HTML puedes utilizar el

elemento script y colocar tu código JavaScript entre sus etiquetas de inicio
(<script>) y cierre (</script>), tal como lo muestra el siguiente ejemplo:

<!DOCTYPE html>
<html>
<head>
<title>Mi primera web</title>
</head>
<body>
<h1>¡Hola Mundo!</h1>
<p>Esta es mi primera web</p>

<script>
alert('¡Hola Mundo!');
</script>

</body>
</html>
Muchas veces tu código JavaScript es tan extenso que no quieres que esté
ubicado en el mismo documento HTML. Para eso, la solución es crear un nuevo
documento, esta vez de formato JavaScript - utilizando la extensión .js - y
"linkear" ambos documentos a través del mismo elemento script, de la siguiente
manera:

<script src="nombre-del-documento.js"></script>

El mismo elemento script tiene un "atributo" llamado src (de source, que significa

fuente en inglés), al cual se le puede asignar la ruta de tu documento JavaScript.

Añádele interacción a tu web

¡Ahora te toca a tí! Continúa con Michelle siguiendo los pasos para agregarle
interacción a tu sitio web:

Los pasos a seguir son:

1. Agrega el elemento script al final del body de tu documento HTML

2. Dentro del mismo HTML, entre las etiquetas de inicio y cierre del
elemento script, escribe una línea de código JavaScript (por ejemplo, algo
con alert(), document.write() o prompt())
3. Guarda tu documento HTML
4. Refresca la página de tu navegador donde estás viendo tu documento
HTML
5. Ahora crea un nuevo documento llamado app.js en la misma carpeta donde
está tu HTML
6. Añádele el atributo src al elemento script con la ruta de tu archivo app.js
7. Pasa todo el código JavaScript del documento HTML al documento JS
8. Refresca la página del navegador y confirma que todo funciona
exactamente igual que antes

Aquí el video de Michelle:

Historia de JavaScript
JavaScript fue creado (¡en solo 10 días!) por Brendan Eich, en 1995, para crear
interactividad y dinamismo en Netscape Navigator, uno de los primeros
navegadores web. Desde entonces, JavaScript ha sido adoptado por la mayoría
de los navegadores modernos (piensa en Chrome, Safari, etc.). Y por muchos
años JavaScript fue utilizado únicamente dentro del navegador. Sin embargo, hoy
en día se utiliza JavaScript también fuera del navegador para crear cualquier tipo
de cosas. Las aplicaciones de JavaScript son casi infinitas, lo cual lo hace un
excelente lenguaje de programación que aprender.

Escribiendo JavaScript en la web

Seguramente te estás preguntando cómo es eso de tener un intérprete JavaScript
en el navegador. Pues, la mejor forma de aprender es haciendo: abre tu
navegador Chrome y sigue los pasos que presenta Michelle en el siguiente video.
Michelle te mostrará cómo escribir JavaScript y cómo hacer cosas geniales desde
tu computadora, únicamente utilizando el navegador.

JavaScript != Java
Última nota final sobre el contexto de JavaScript como lenguaje de programación:
JavaScript no es lo mismo que Java. Java es otro lenguaje de programación.
Mucha gente los confunde. Tú no :)