Introducción a JavaScript

Unidad Clases Autoaprendizaje Tutoría

(sincrónico) (asincrónico) (sincrónico)
JavaScript Introducción a JavaScript 2 horas Desde 6 horas 2 horas
para la web Condiciones 2 horas Desde 6 horas 2 horas

Funciones 2 horas Desde 6 horas 2 horas

Arreglos y objetos 2 horas Desde 6 horas 2 horas

Métodos de arreglos 2 horas Desde 6 horas 2 horas

APIs 2 horas Desde 6 horas 2 horas

Receso 0 horas 0 horas 0 horas

Activen las cámaras los que puedan y
pasemos asistencia
 Utiliza ● Unidad 1: Introducción a JavaScript. Te encuentras aquí

Javascript
● Unidad 2: Condiciones.
para obtener y
modificar ● Unidad 3: Funciones.
elementos del
DOM a partir ● Unidad 4: Arreglos y objetos.
de un ● Unidad 5: Métodos de arreglos.
requerimiento
● Unidad 6: APIs
 Inicio Desarrollo Cierre

● Objetivo de la ● Conceptualización ● Reflexión

sesión ● Ejercitación
Inicio
/* Ejecutar javascript en la consola del navegador */

/* Crear un script que ejecute operaciones

matemáticas */

/* Manipular el DOM de una página web con

JavaScript: */
Objetivos
● Cambiar el contenido de un elemento
● Cambiar el estilo de un elemento

/* Cambiar el contenido o estilo en función del

contenido ingresado en el prompt */
 Un editor de código Un navegador

Podemos escribir JavaScript en JavaScript puede ser ejecutado en casi

muchos editores de código. En este todos los navegadores. En este curso
curso utilizaremos el editor VSCode ocuparemos Firefox.
Desarrollo
 ¿Qué es JavaScript?

JavaScript es un lenguaje de programación

que nos permite agregar interacción a una
página web

Mientras que HTML y CSS se encargan del

esqueleto y la apariencia, JavaScript se
enfoca en la lógica detrás de la interfaz,
permitiendo que el usuario interactúe con
el sitio web y estas reacciones.
 Ejemplos JavaScript

Para ver ejemplos de qué se puede hacer con JavaScript, visita los siguientes sitios web y
observa cómo reaccionan con movimientos del mouse y el uso del teclado.

Kuon Yagi Bruno Simon

Moon Farmer
En W3School contamos con una serie de ejemplos de lo que podemos hacer con
JavaScript.
 Mostrando el contenido
Con Alert Con console.log

1. Abrir el inspector de elementos En la misma consola podemos probar:

2. Ir al tab console
console.log("Esta prueba es desde la
Ahora podemos mostrar el contenido: consola");
alert("Esta prueba es desde la
consola"); Esto es muy útil para hacer pruebas, lo
ocuparemos frecuentemente a lo largo del
Presiona Enter y verás lo siguiente: curso.
 Activar modo multilínea de la consola
El modo multilínea de Firefox nos permite escribir múltiples líneas de código y luego
ejecutarlas. Para activarlo debemos hacer clic en el siguiente ícono:
 Ventaja del modo multilínea
Este modo se asemeja mucho más a la forma en que más adelante escribiremos
nuestros programas en JavaScript. Por lo tanto, lo activaremos por ahora.
/* Variables */
 Variables

A la hora de programar Para guardar los Las llamamos Al escribir a = 2

necesitaremos ir valores ocuparemos variables porque estamos guardando
guardando valores para variables, que las mientras la caja el valor 2 en una caja
usarlos más tarde, esto podemos imaginar conserva el nombre, llamada a.
puede ser un valor que como una caja que el contenido dentro
introdujo un usuario o de tiene un nombre y puede cambiar.
un cálculo. dentro el valor
guardado.
 Creando nuestra primera variable

Probemos escribir en la consola del inspector

de elementos:

a = 2
var a = 2
alert(a + 2)
 Conceptos importantes sobre variables

Esto es asignar un valor a una Esto es ocupar una variable (para

variable que funcione tiene que tener un
valor asignado)

a=2 a+5

Si ocupamos una variable sin definirla obtendremos un error.

En Javascript al asignar un valor a una variable, esta se define automáticamente.
 Guardando texto en variables

Probemos escribir en la consola del inspector

de elementos.

var contenido = "hola"

alert(contenido)
 Texto vs Variables

Cuando guardemos texto en una Cuando no utilizamos comillas,

variable, necesitaremos envolverlo en javascript interpreta ese texto como si
comillas simples o dobles. Podemos fuera el nombre de una variable o de
usar cualquiera de las dos. una instrucción de JavaScript.

Probemos escribir en la consola del inspector de elementos.

 Sintaxis

Así como en el lenguaje existe la gramática, los lenguajes tienen una sintaxis declarada por sus
creadores o instituciones que deben cumplirse para su correcta ejecución.

Antes de conocer esta sintaxis y empezar a programar con JavaScript es importante entender
algunos conceptos:

● Un programa consiste en una secuencia de "instrucciones" para ser ejecutadas por un

computador.
● Las instrucciones deben ser gramaticalmente correctas para que el computador las
entienda.
 Errores de sintaxis

● ¿Qué sucede si escribimos 3 = a?

● ¿O si utilizamos una variable no definida?

Ejemplo: alert(zq)

Probemos en el inspector de elementos

 Ejercicio
Realicemos un ejercicio en que guardemos en una Ejercicio
variable nuestro nombre y ocupemos alert para imprimirlo
en el navegador: ¡Manos al teclado!

1. Abre el navegador.
2. Abre la consola del navegador en el inspector de
elementos.
3. Define una variable que almacene tu nombre,
recuerda usar las comillas simples o dobles sobre tu
nombre.
4. Utiliza el alert para mostrar el valor guardado de la
variable.
/* Ejecutar javascript en la consola del navegador */

/* Crear un script que ejecute operaciones matemáticas

*/

/* Manipular el DOM de una página web con JavaScript:

*/ Objetivos
● Cambiar el contenido de un elemento
● Cambiar el estilo de un elemento

/* Cambiar el contenido o estilo en función del

contenido ingresado en el prompt */
/* Sintaxis de JavaScript */
 Escribiendo código JavaScript en el editor

Para escribir JavaScript dentro del Podemos cargar javascript de un archivo

HTML podemos ocupar la etiqueta externo utilizando el atributo src para
<script> especificar la ubicación del archivo.
<h1>JavaScript</h1>
<h1>JavaScript</h1>

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

alert("Aprende Haciendo")

</script>
 ¿Dónde guardar los archivos JS?

Al igual que cuando trabajamos con CSS, podemos guardar los archivos en una subcarpeta
(o sub-subcarpeta):

proyecto
<h1>JavaScript</h1>
- assets
- css <script src="assets/js/script.js"></script>

- js
- script.js
 Variables en JavaScript

Cuando escribimos programas ocupamos numero =

variables para almacenar valores que 100
necesitemos ocupar en diferentes numeroDecimal =
situaciones. 0.5
frase = "Hola a todos"
 ¿Dónde agregar la etiqueta script?

Se puede agregar dentro

del head, o en el body
como cualquier etiqueta
html.

Por ahora lo agregaremos

al final justo antes de
cerrar el body.
 Calculando la suma de dos valores

Creemos un programa que muestra <script>

numero1 = 100
la suma de los números guardados
numero2 = 50
en dos variables.
alert(numero1 + numero2)
</script>
/* Ejecutar javascript en la consola del navegador */

/* Crear un script que ejecute operaciones matemáticas

*/

/* Manipular el DOM de una página web con JavaScript:

*/ Objetivos
● Cambiar el contenido de un elemento
● Cambiar el estilo de un elemento

/* Cambiar el contenido o estilo en función del

contenido ingresado en el prompt */
 Prompt

Al momento de crear una variable, puede

que necesitemos que su valor o contenido
sea definido por el usuario, para esto
podemos ocupar prompt. El valor
ingresado lo guardaremos en una variable.

nombre = prompt("Ingrese su nombre")

 Concatenación

La concatenación consiste en la unión de textos cuyo objetivo es producir textos

compuestos, de esta forma podemos juntar uno existente con otro que ingrese el usuario
vía prompt.

nombre = prompt("Ingrese su nombre")

alert("Hola " + nombre)
 Sumando números introducidos por prompt

num1 = prompt("Ingrese el primer número")

¿Qué sucede ahora si
num2 = prompt("Ingrese el segundo número")
intentamos sumar 2
alert("El resultado es: " + resultado) números? Probemos.
 Transformando un texto en un número

En javascript existen los tipos de datos, "2" es un texto, 2 es un entero. Cuando sumamos 2
textos se juntan o concatenan.

num1 = prompt("Ingrese el primer número")

num2 = prompt("Ingrese el segundo número")

resultado = Number(num1) + Number(num2)

alert("El resultado es: " + resultado)

 Ejercicio
Crear un script en donde le pidamos al usuario que ingrese 2
números a través del prompt y posteriormente imprimamos con
el alert la suma de ambos:
Ejercicio
¡Manos al teclado!
1. Crea un html base, al final (antes del body) introduce la
etiqueta script
2. Dentro del script utiliza prompt para solicitarle al usuario
que ingrese el primer número. Deberás almacenarlo en una
variable num1.
3. Usa el prompt para solicitarle al usuario que ingrese el
segundo número. Deberás almacenarlo en una variable
num2.
4. Con el alert muestra la suma de ambos números, recuerda
transformarlos a números antes de sumarlos.
/* Ejecutar javascript en la consola del navegador */

/* Crear un script que ejecute operaciones matemáticas

*/

/* Manipular el DOM de una página web con JavaScript:

*/ Objetivos
● Cambiar el contenido de un elemento
● Cambiar el estilo de un elemento

/* Cambiar el contenido o estilo en función del

contenido ingresado en el prompt */
 Seleccionando elementos del DOM

Con JavaScript podemos manipular los elementos que creamos en HTML y cambiar su
contenido, sus estilos e incluso el valor de sus atributos. Para hacer esto debemos obtener
un elemento y luego modificarlo.

En este caso, ocuparemos querySelector:

elemento = document.querySelector("p")
 Seleccionando elementos del DOM

Además, con querySelector podemos seleccionar en base a etiquetas, clases e id.

<nav class="menu">Menú</nav> menu = document.querySelector(".menu")

<section id="Hero-Section"> heroSection =

... document.querySelector("#Hero-Section")
</section>

pieDePagina =
<footer>Pie de página</footer>
document.querySelector("footer")
 Manipulando el DOM

Una vez que tenemos seleccionado el elemento podemos modificarlo utilizando

.innerHTML

titulo = document.querySelector("h1")
<h1> </h1>
titulo.innerHTML = "Este contenido fue agregado con JavaScript"
 ¿Por qué agregamos el script al final?

En esta parte del curso estamos

manipulando el DOM, o sea
elementos de la página web, pero
no podemos obtener o manipular un
elemento que el navegador todavía
no ha leído. Es por esto que
estamos agregando la etiqueta
script al final del documento.
 Ejercicio
Realicemos un ejercicio en donde haya que completar Ejercicio
un párrafo con contenido que ingrese el usuario.
¡Manos al teclado!
 Ejercicio

1. En un archivo base HTML: Ejercicio

¡Manos al teclado!
a. Utiliza la etiqueta p escribe la porción del
contrato de arriendo usando etiquetas span
en los espacios por llenar
b. Agrega identificadores a las etiquetas span
con un nombre que hagan referencia a su
contenido
c. Agrega la etiqueta script al final del
documento html (antes de </html>)
 Ejercicio
2. Dentro la etiqueta script previamente agregada:
Ejercicio
a. Utiliza prompt y guarda la información ¡Manos al teclado!
ingresada por el usuario en las variables info1 e
info2.
b. Utiliza el método querySelector para encontrar
los elementos que vas a modificar y guarda esa
información en las variables ele1 y ele2.
c. Utiliza ele1.innerHTML(info1) para cambiar el
valor.

3. Observa el resultado en el navegador.

/* Ejecutar javascript en la consola del navegador */

/* Crear un script que ejecute operaciones matemáticas

*/

/* Manipular el DOM de una página web con JavaScript:

*/ Objetivos
● Cambiar el contenido de un elemento
● Cambiar el estilo de un elemento

/* Cambiar el contenido o estilo en función del

contenido ingresado en el prompt */
 Manipulando el DOM

De la misma manera que modificamos el contenido de una etiqueta, también podemos

cambiar los estilos. Por ejemplo, teniendo la siguiente etiqueta h3:

<h3> Desafío Latam </h1>

var titulo = document.querySelector("h3")

titulo.style.color = "#7ba238"
 Manipulando el DOM

Existe una pequeña diferencia entre cómo llamamos las propiedades de CSS en JavaScript
a cómo lo escribimos directamente en un documento CSS.

Por ejemplo, la propiedad border-radius la escribimos separando las palabras con un guión
medio.

border-radius: 50%
 CamelCase

En JavaScript cuando queramos ocupar una propiedad de CSS que utilice 2 o más
palabras, deberemos recurrir al Camel Case, es decir, que tendremos que juntar las
palabras y a partir de la segunda palabra cada una empezará con mayúscula.

imagen.style.borderRadius = "50%" texto.style.fontFamily = "Fantasy" texto.style.fontSize= "10px"

Ejemplos:
borderRadius
fontFamily
fontSize
 Ejercicio

Realicemos un ejercicio en donde redondiemos una imagen Ejercicio Guiado

con CSS aplicando un border-radius definido por el usuario
¡Todos juntos!
1. En un archivo HTML nuevo, crea una base con una
etiqueta img que ocupe una imagen con dimensiones
cuadradas (https://placedog.net/500/500)
2. Utilizar el método querySelector para seleccionar la
etiqueta img
3. Utiliza el prompt para solicitar al usuario el valor de la
propiedad border-radius (tip: utilizar camelCase)
4. Observa el resultado en el navegador
/* Ejecutar javascript en la consola del navegador */

/* Crear un script que ejecute operaciones matemáticas

*/

/* Manipular el DOM de una página web con JavaScript:

*/ Objetivos
● Cambiar el contenido de un elemento
● Cambiar el estilo de un elemento

/* Cambiar el contenido o estilo en función del

contenido ingresado en el prompt */
Cierre
¿Existe algún concepto que no
hayas comprendido?
¿Por qué crees que te resulta Reflexionemos
difícil?
● Revisar la guía que trabajarán de forma
autónoma.
● Revisar en conjunto el desafío.
¿Qué sigue?
 www.desafiolatam.com

/DesafioLatam /DesafioLatam /DesafioLatam /DesafioLatam 55