Introducción a JavaScript

Introducción a JavaScript 1
¿Qué aprenderás? 2
Introducción 2
Entendiendo las herramientas para Desarrolladores en los navegadores 3
Sintaxis del Lenguaje 4
¿Cómo incluir JavaScript en un archivo HTML? 5
Ejercicio guiado: Mi primer programa en JavaScript 6
Diagrama de flujo a código JavaScript 10
Ejercicio guiado: De diagrama de flujos a código 12
Ejercicio guiado: De pseudocódigo a código 13

¡Comencemos!

_ 1

www.desafiolatam.com
¿Qué aprenderás?
● Reconocer el entorno de desarrollo y las herramientas de trabajo recomendadas,
para interactuar con una página web y ejecutar comandos de JavaScript.

● Codificar un programa en Javascript utilizando el inspector de elementos y

diagramas de flujo para la implementación de un algoritmo.

Introducción

JavaScript es un lenguaje de programación que se utiliza principalmente para agregar

dinamismo e interactividad a una página o aplicación web. Así, gracias al uso de JavaScript,
es posible crear aplicaciones web con movimiento e interacción con el usuario.

Técnicamente JavaScript es un lenguaje de programación del tipo interpretado. Esto quiere

decir, que el computador lee línea a línea el código escrito por el programador y ejecuta las
acciones allí contenidas, sin preocuparse del resto del código fuente. Es un proceso similar
al de un intérprete de lenguaje de señas, donde este gesticula las señas a medida que otra
persona habla.

Para entender de qué manera funciona JavaScript hay que ver con qué otros actores se
encuentran relacionados. Esencialmente dentro del desarrollo web Front-End, JavaScript se
encuentra estrechamente relacionado con HTML y CSS.

Entender estos conceptos te permitirá identificar los elementos que interactúan en una
página web y comprender el alcance de JavaScript en el desarrollo. Además, al finalizar el
capítulo tendrás nociones básicas de la sintaxis de este lenguaje, para ir poco a poco
adquiriendo herramientas para realizar programas cada vez más complejos.

¡Vamos con todo!

_ 2

www.desafiolatam.com
Entendiendo las herramientas para Desarrolladores en los
navegadores

La gran mayoría de los navegadores modernos (prácticamente todos) traen incorporadas

una serie de herramientas diseñadas para facilitar la vida de los desarrolladores web. La
consola de desarrollo de JavaScript es una herramienta maravillosa a la hora de analizar
nuestro código cuando estamos programando. Esta nos muestra mensajes de información,
error o alerta. Además, incluye un inspector de elementos para ver el código HTML de una
página web y verdaderos depuradores de código que nos permiten identificar errores más
fácilmente. También nos permite interactuar con la página, ejecutando expresiones o
comandos de JavaScript.

Para acceder a la consola desde Google Chrome y/o Mozilla Firefox, presiona las teclas
Control + Mayus + J, desde Mac cmd + alt + J y desde Internet Explorer la tecla f12. La barra
de herramientas para desarrolladores, como podemos ver en la siguiente imagen, muestra
varias pestañas en las que se pueden encontrar información de las peticiones HTTP (los
elementos de la página que se cargan de internet), los errores, análisis del CSS, JavaScript,
los Logos (mensajes), errores y advertencias de seguridad.

Imagen 1. Las herramientas de desarrollador de Google Chrome.

Fuente: Desafío Latam

_ 3

www.desafiolatam.com
Sintaxis del Lenguaje

Antes de explicar la sintaxis del lenguaje, es preciso ver algunos ejemplos de JavaScript:

● Sumar dos números:

1 + 2;

● Mostrar un mensaje de alerta:

alert('Este es un mensaje de alerta');

● Mostrar un dato en la consola de desarrolladores:

console.log('Mensaje para el desarrollador');

La sintaxis de un lenguaje de programación se refiere al conjunto de reglas que se deben

seguir al momento de escribir el código. Esto quiere decir que hay formas de escribir un
lenguaje de programación y no es llegar y escribir cualquier cosa.

La sintaxis de JavaScript está inspirada en otros lenguajes de programación como Java y C.

Las normas básicas que definen la sintaxis de JavaScript son las siguientes:

● No se toman en cuenta los espacios en blanco y las nuevas líneas: El intérprete de

JavaScript ignora cualquier espacio en blanco que sobre, por lo que el código se
puede ordenar de forma adecuada para entenderlo mejor (tabulando las líneas,
añadiendo espacios, creando nuevas líneas, etc.)

● Distinguen las mayúsculas y minúsculas: En JavaScript si se intercambian

mayúsculas y minúsculas en el código el script no funciona. Puedo tener dos
variables llamadas: número y otra llamada Número, ambas son distintas. A esta
característica se le conoce como case sensitive.

● No se define el tipo de las variables: Al crear una variable, no es necesario indicar el

tipo de dato que almacenará. De esta forma, una misma variable puede almacenar
diferentes tipos de datos durante la ejecución del script. Una variable puede guardar
primero un número y luego un texto sin problemas.

_ 4

www.desafiolatam.com
 ● No es necesario terminar cada sentencia con punto y coma (;): Aunque JavaScript
no obliga a hacerlo, es conveniente y se recomienda terminar cada sentencia con el
carácter del punto y coma (;).

● Se pueden incluir comentarios: Los comentarios se utilizan para añadir información

en el código. Aunque el contenido de los comentarios no se visualiza por pantalla, si
que se envía al navegador del usuario junto con el resto del script. Debido a lo
anterior, es necesario extremar las precauciones sobre la información incluida en los
comentarios.

● Se deben respetar las palabras reservadas: al igual que la mayoría de los lenguajes
de programación, JavaScript tiene una serie de palabras reservadas que son propias
del lenguaje de programación, las cuales identifican acciones, sentencias, procesos,
métodos y/o funciones de JavaScript, como el caso de var, let, for, if, function, export,
in, entre otras, por lo tanto, no pueden ser utilizadas para otro propósito distinto al
creado e implementado por el lenguaje de programación.

¿Cómo incluir JavaScript en un archivo HTML?

La integración de JavaScript y HTML es muy flexible, ya que existen al menos tres formas
para incluir código JavaScript en las páginas web:

1. Entre las etiquetas script dentro del código HTML, ejemplo: <script>alert(“Soy
JavaScript”)</script>.

2. Como un atributo de un elemento HTML, como por ejemplo usando el atributo

onclick, lo cual resultaría en <article onclick="miFuncion()></article>. Esta es la
opción menos recomendada y no se emplea actualmente.

3. Entre las etiquetas script, pero esta vez usando el atributo src del propio elemento
para darle la ruta del archivo con extensión .js que se utilizará. Esto implica que el
código JavaScript y el código HTML estarán en archivos separados. Esta es la
opción más recomendada y más implementada en la actualidad.

Uno de los puntos más importantes que todo programador debe tener claro, es la creación
de un código limpio, ordenado y simple de entender. En base a esto, la tercera forma de
incluir JavaScript a HTML es la más recomendada dado que mantiene separados los
diferentes aspectos de la página o aplicación web, facilitando su mantención y evolución
futura.

Para comprender cómo utilizar esta forma recomendada, puedes consultar el documento
Material Apoyo Lectura - Incluyendo JavaScript en un archivo HTML ubicado en “Material

_ 5

www.desafiolatam.com
Complementario”. Aquí podrás ver paso a paso cómo incluir un archivo JavaScript como un
recurso referenciado en el HTML.

Ejercicio guiado: Mi primer programa en JavaScript

Realizar un ejemplo que permitirá interactuar con JavaScript mediante nuestro navegador,
para que podamos ver cómo la consola ejecuta el código JavaScript de manera automática.

Realizaremos algunas instrucciones breves, como mostrar mensajes de texto en ventanas

emergentes, sumas y restas.

● Paso 1: Abrir la consola del navegador web con Control + Mayus + J desde PC, o
cmd + alt + J desde Mac, o haciendo un clic con el botón derecho de nuestro ratón
sobre el navegador de preferencia, posteriormente un clic con el botón izquierdo
sobre la palabra desplegada en el menú denominada: “inspeccionar elemento” (en
Firefox) o “inspeccionar” (en Chrome) y se nos abrirá de la siguiente manera:

Imagen 2. Consola del navegador Chrome.

Fuente: Desafío Latam

Lo primero que haremos es una suma matemática, para que puedas observar que la consola
trabaja automáticamente bien.

● Paso 2: Una vez abierta la barra de herramientas para desarrolladores y habiendo

seleccionado la pestaña consola:
○ Ingresar 10 + 23
○ Apretar Enter

Hecho lo anterior, el resultado será el siguiente:

Imagen 3. Suma en la consola.

Fuente: Desafío Latam

_ 6

www.desafiolatam.com
Ahora, esta misma operación la haremos utilizando un poco de JavaScript. Si no entiendes
nada de esto, tranquilo/a más adelante veremos cada detalle de este ejemplo.

IMPORTANTE. Es posible agregar un salto de línea sin ejecutar el código usando la

combinación de teclas Shift + Enter

● Paso 3: Se declaran dos variables, num1 y num2, cada variable almacenará un valor y
luego las sumamos.

var num1 = 10;

var num2 = 15;

Imagen 4. Suma usando variables.

Fuente: Desafío Latam

● Paso 4: Ahora, agregamos la siguiente línea para obtener el resultado (para hacer un
salto de línea, sin ejecutar, lo hacemos presionando las teclas Shift + Enter).

console.log(num1 + num2);

Imagen 5. Suma usando variables.

Fuente: Desafío Latam

Quedando como resultado:

Imagen 6. Suma usando variables.

Fuente: Desafío Latam

_ 7

www.desafiolatam.com
 ● Paso 5: Por último, agregaremos el siguiente código:

alert ("Hola! esto es JavaScript en {desafio} latam_");

Imagen 7. Mostrando el resultado en una alerta.

Fuente: Desafío Latam

Damos Enter y obtendremos lo siguiente:

Imagen 8. Resultado de la alerta en el navegador.

Fuente: Desafío Latam

Continuando con nuestro primer programa en JavaScript desde la consola del navegador
web, vamos a realizar la operación básica de resta de dos números y mostramos en una
alerta el resultado de la operación.

● Paso 6: Ahora procedamos a crear dos variables con la palabra reservada “var” y les
damos el nombre de valor1 y valor2, quedando de la siguiente manera:

Imagen 9. Ingresando variables en la consola del navegador.

Fuente: Desafío Latam

_ 8

www.desafiolatam.com
 ● Paso 7: Una vez ingresados los valores y almacenados, procedemos a realizar la
resta de ambas variables (los valores ingresados), como se observa a continuación:

Imagen 10. Resta de variables en la consola del navegador.

Fuente: Desafío Latam

● Paso 8: Luego, nos queda mostrar el resultado mediante la instrucción alert en la

consola del navegador, quedando de la siguiente manera:

Imagen 11. Agregando la instrucción alert() en la consola del navegador.

Fuente: Desafío Latam

● Paso 9: Finalmente, al escribir la instrucción anterior y presionar la tecla enter, se

mostrará una ventana emergente con el resultado directo de la resta, como se
muestra a continuación:

Imagen 12. Ventana emergente con el resultado de la resta.

Fuente: Desafío Latam

_ 9

www.desafiolatam.com
Diagrama de flujo a código JavaScript

En el capítulo anterior se presentaron los diagramas de flujo como herramientas para

representar gráficamente un algoritmo. Ahora que ya se conoce lo básico de JavaScript,
estamos en condiciones de convertir un diagrama de flujo en un código para JavaScript.

Para esto, es posible tomar como referencia el siguiente diagrama de flujo:

Imagen 13. Diagrama de flujo a transformar en código.

Fuente: Desafío Latam

Según este diagrama (que describe una suma de dos números), es necesario:

● Leer el valor de un primer número.

● Guardar este número en una variable llamada valor1.
● Leer el valor de un segundo número.
● Guardar este nuevo número en una variable llamada valor2.
● Mostrar el resultado de sumar los dos números ingresados.

_ 10

www.desafiolatam.com
Para obtener valores a partir del usuario, es posible usar la función prompt. Esta función
abre una ventana en el navegador con una entrada de texto y un mensaje definido por el
programador, para que allí el usuario indique el valor solicitado.

prompt("Ingresa un número");

El valor que ingrese el usuario puede ser guardado en una variable, para ser utilizado
posteriormente:

var num = prompt("Ingresa un número");

Hay que tener cuidado cuando se usa la función prompt, ya que el resultado que entrega
siempre es un texto o cadena de caracteres, aunque escribamos un número. Así, si el
usuario ingresa el número uno, prompt entregará el valor "1" (que es un texto) y no el número
1. Para solucionar eso, es posible utilizar otra función llamada parseInt, la cual convierte un
texto en el número correspondiente, es decir, transforma el tipo de dato carácter a numérico,
siempre que esto sea posible.

var numero = parseInt("1");

Para mostrar el contenido hay dos opciones. La primera es usar la función console.log, que
muestra el resultado en la consola del navegador.

console.log('Valor a mostrar en la consola');

La segunda opción es usar la función alert. Esta función abre una ventana similar a la de
prompt, pero esta vez sólo para mostrar información y no para ingresar datos.

alert('Valor a mostrar en la ventana emergente')

En base a lo anterior, el código del diagrama de flujo que se muestra en la imagen 27, se
expresa de la siguiente manera:

var n1 = prompt("Ingrese un primer número entero: ");

var n1 = parseInt(n1);
var n2 = prompt("Ingrese un segundo número entero: ");
var n2 = parseInt(n2);
alert(n1+n2);

_ 11

www.desafiolatam.com
Ejercicio guiado: De diagrama de flujos a código

Llevar el siguiente diagrama de flujos a código mediante el lenguaje de programación

JavaScript, para ello, se solicita restar dos números ingresados por el usuario y mostrar el
resultado. Al desarrollar este código, quedaría de la siguiente manera:

Imagen 14. Diagrama de flujo Resta de dos números.

Fuente: Desafío Latam

● Paso 1: Para llevar el diagrama de flujo anterior a JavaScript, primero se debe

identificar la o las variables de entrada, en este caso: “n1 y n2”, donde se utilizará la
función prompt() para solicitarlos y enviarlos a las variables respectivas:

var n1 = prompt("Ingrese un primer número entero: ");

var n1 = parseInt(n1);
var n2 = prompt("Ingrese un segundo número entero: ");
var n2 = parseInt(n2);

_ 12

www.desafiolatam.com
 ● Paso 2: Definir el proceso de resta con esas dos variables (n1-n2) y se muestra el
resultado final. Implementar una función propia de JavaScript que es el alert():

var n1 = prompt("Ingrese un primer número entero: ");

var n1 = parseInt(n1);
var n2 = prompt("Ingrese un segundo número entero: ");
var n2 = parseInt(n2);
alert(n1-n2);

El resultado obtenido para el código anterior si el usuario ingresa los números 5 y 9

respectivamente, sería:

Imagen 15. Resultado de la resta en ventana emergente.

Fuente: Desafío Latam

Ejercicio guiado: De pseudocódigo a código

Realizar un pseudocódigo que solicite al usuario el ingreso de dos números enteros y

calcule la multiplicación de ambos, mostrando por pantalla el resultado.

● Paso 1: Implementar un pseudocódigo con los procedimientos que estudiamos

anteriormente, el resultado sería:

Inicio
Leer num1
Leer num2
num1 * num2
Mostrar num1 * num2
Fin

_ 13

www.desafiolatam.com
 ● Paso 2: Si llevamos el pseudocódigo anterior a JavaScript, lo primero que podemos
observar es que se están leyendo dos valores de entrada y estos deben ser
ingresados por el usuario, lo que quiere decir que se debe implementar la instrucción
prompt() para solicitar al usuario los datos y almacenarlos en una variable para
poder realizar la suma y mostrarlos en una ventana emergente. Quedando el código
en JavaScript de la siguiente manera:

var num1 = prompt("Ingrese un primer número entero: ");

var num1 = parseInt(num1);
var num2 = prompt("Ingrese un segundo número entero: ");
var num2 = parseInt(num2);
alert(num1*num2);

Siendo el resultado de la multiplicación si se ingresa el número 3 y el número 5:

15

_ 14

www.desafiolatam.com