Lectura 3 - Introducción A JavaScript
Lectura 3 - 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.
Introducción
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.
_ 2
www.desafiolatam.com
Entendiendo las herramientas para Desarrolladores en los
navegadores
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.
_ 3
www.desafiolatam.com
Sintaxis del Lenguaje
Antes de explicar la sintaxis del lenguaje, es preciso ver algunos ejemplos de JavaScript:
1 + 2;
_ 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 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.
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>.
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.
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.
● 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:
Lo primero que haremos es una suma matemática, para que puedas observar que la consola
trabaja automáticamente bien.
_ 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.
● Paso 3: Se declaran dos variables, num1 y num2, cada variable almacenará un valor y
luego las sumamos.
● 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);
_ 7
www.desafiolatam.com
● Paso 5: Por último, agregaremos el siguiente código:
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:
_ 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:
_ 9
www.desafiolatam.com
Diagrama de flujo a código JavaScript
Según este diagrama (que describe una suma de dos números), es necesario:
_ 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:
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.
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.
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.
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:
_ 11
www.desafiolatam.com
Ejercicio guiado: De diagrama de flujos a código
_ 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():
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:
15
_ 14
www.desafiolatam.com