Entendiendo JavaScript

1. ¿Qué es JavaScript?
Es un lenguaje de programación o de secuencias de comandos que
permite controlar el contenido con actualizaciones dinámicas,
animación de gráficos, reproductor de videos, etcétera; con
javascript es sorprendente lo que se puede lograr con unas
cuantas líneas de código. En relación con tecnología web estándar
se encuentra ubicada en la tercera capa que se encarga de darle
características interactivas a tu sitio web.

Práctica Teórica.
Recordemos HTML, se encarga de la estructura de tu sitio web y
darle significado a tu contenido, CSS se encarga de darle mejor
aspecto a tu sitio web y como ya sabemos javascript se encarga de
darle características interactivas a tu sitio web.

Armemos la estructura en este caso un simple botón y un párrafo.

<button class="boton">Saludar</button>
<p class="saludar">Hola sujeto anónimo</p>

Tabla 1: Elementos HTML.

En la siguiente imagen podemos verificar que tenemos una

estructura con los estilos por defecto.

Imagen 1: Resultado de ejecución.

Creemos nuestros propios estilos para nuestro botón.

button {
padding: .5rem;
background-color: rgb(144, 144, 219);
border: thin solid rgb(126, 126, 217);
color: white;
cursor: pointer;
}

Tabla 2: Reglas CSS.

En la siguiente imagen podemos verificar que la regla se aplicó
correctamente en el elemento button.

Imagen 2: Resultado de ejecución.

Agreguemos el comportamiento dinámico con javascript; en este

caso el usuario al dar clic en el botón “saludar” se iniciara un
ventana el cual solicitará el nombre del usuario el usuario
deberá tipear su nombre y aceptar para actualizar el párrafo el
cual contiene el saludo al usuario “Hola Nombre Usuario”.

Coloque en la parte inferior del documento HTML, justo antes de

la etiqueta de cierre body. Más adelante se le enseñará
estrategias para cargar su script de manera más óptima.

<script>
const boton = [Link]('.boton');
[Link]('click', obtenerNombre, false);

function obtenerNombre() {
let nombre = prompt('Ingrese su nombre: ');
actualizarSaludo(nombre);
}

function actualizarSaludo(nombre) {
const saludo = [Link]('.saludar');
[Link] = "Hola " + nombre;
}
</script>

Tabla 3: Elementos HTML.

En la siguiente imagen podemos verificar que el saludo ya es

personalizado para el usuario Ferrera.

Imagen 3: Resultado de ejecución.

 El ejemplo práctica teórica, no se encuentra validado es por eso
que si damos aceptar en la ventana emergente sin tipear un nombre
el saludo será “Hola ”, si ingresamos un número “Hola 2334” y por
último si damos a cancelar o presionamos la tecla esc el saludo
será “Hola null”; en futuras sesiones se aprenderá a validar.

Tabla 4: Información Adicional.

Ejercicio
A Partir del ejercicio de la práctica teórica, implementar que el
sistema solicite la edad del usuario y muestre en el párrafo
“Hola nombre usuario, tu edad es edad usuario”, tienes 10 minutos
para desarrollar este ejercicio. La siguiente imagen muestra un
ejemplo si el usuario es Ferrera y su edad es 26. Recuerde
cualquier duda consultar a su instructor.

Imagen 4: Ejemplo de Resultado.

2. ¿Qué puedo hacer con javascript?

Veamos algunas características de lo que se puede hacer con
javascript con el ejemplo teórico práctico anterior.

● Nos permite obtener un elemento HTML a través de su

selector CSS para luego almacenarlo dentro de una constante.
● Nos permite agregar un escuchador de eventos a un elemento
para detectar cuando el usuario genera un evento a través de
una acción en el sitio web, en el ejemplo anterior nuestro
elemento detecta el evento click, para detectar que cuando
el usuario da clic en el botón.
● Nos permite crear funciones para realizar tareas, estas
funciones contienen un conjunto de instrucciones, en él
ejemplo anterior se crea dos funciones “obtenerNombre y
actualizarNombre”.
● Nos permite un valor dentro de una variable, en el ejemplo
anterior almacenamos el nombre ingresado por el usuario en
la variable nombre
● Nos permite hacer operaciones matemáticas o de cadenas, en
el ejemplo anterior tomamos la cadena “hola” y lo
concatenamos con la variable nombre “Hola Ferrera”.
 ● Nos permite ejecutar una porción de código “función” cuando
el usuario genere un evento; en el ejemplo, cuando el
usuario le de clic al boton se está ejecutando la función
“obtenerNombre” y cuando ingrese su nombre y le da clic al
botón aceptar se estará ejecutando las función
“actualizarNombre”.

Ahora que ya comprendemos un poco más de lo que podemos hacer con

javascript básico, veamos qué son las API y por qué son
importantes.
Un API(interfaces de programación de aplicaciones) es un conjunto
de bloques de construcción de código que permiten al
desarrollador implementar programas, debido a que las API nos
brinda mecanismos que permite a dos componentes comunicarse
mediante un conjunto de definiciones y protocolos. Se encuentra
divididos en dos categorías “API de Navegador y API de terceros”

API de Navegador
Se encuentran integrados dentro de tu navegador, por ejemplo:

● DOM(Document Object Model), permite manipular HTML y CSS,

crear, eliminar y cambiar el HTML, aplicar estilos
dinámicamente a tu página, etc; en el ejemplo teórico
práctico usamos este API para obtener el elemento html a
través de su selector “[Link]('.boton')".
● Canvas y WebGL, permiten crear gráficos animados en 2D y 3D.
● Entre otros.

API de terceros
No se encuentran predestinadas en el navegador de forma
predeterminada.

● API Twitter, entre algunas cosas que permite esta el mostrar

tus últimos tweets en tu sitio web.
● API Google Maps, entre algunas cosas que permite esta el
insertar mapas en tu sitio web.
● Entre otros.

3. JavaScript en tu sitio web

Cuando cargas una página web, estas ejecutando código HTML, CSS,
y JavaScript, dentro de la pestaña del navegador que es conocida
también como un entorno de ejecución.
En relación con la seguridad, la ejecución de cada sitio web se
ejecuta en diferentes entornos de ejecución, esto significa que
el código de una pestaña no puede afectar el código en otra
pestaña “pestañas independientes”.

Es importante tener en cuenta que el navegador ejecuta el código

en orden de arriba a abajo.

Desde el punto de vista técnico, la mayoría de los intérpretes de

JavaScript modernos utilizan una técnica llamada complicación en
tiempo real para obtener un mejor rendimiento; se compila en un
formato binario mientras se usa el script. JavaScript aún es
considerado un lenguaje interpretado, ya que la compilación se
realiza en entorno de ejecución.

JavaScript es considerado código del lado del servidor y del lado

del cliente. El código del lado del cliente se ejecuta en la
computadora del usuario, recuerda que antes se descarga para que
se ejecute, cuando es código del lado del servidor se ejecuta en
el servidor y los resultados se descargan y se muestran del lado
del servidor.

JavaScript es considerado dinámico, se refiere a la capacidad de

actualizar la visualización de un sitio web para mostrar
diferente contenido según se requiera, por ejemplo; generando una
tabla HTML, llenándola con los datos solicitados al servidor y
luego mostrando la tabla al usuario. Estos enfoques de lado del
servidor y de lado del cliente; generalmente funcionan juntos.

Si una página web no se actualiza su contenido dinámicamente es

considerado estático.

Tabla 5: Información Adicional.

Práctica Teórica.
Si primero agregamos un escuchador de eventos a una variable o
constante que no exista o que no contenga un elemento html; y
luego creamos la variable y hacemos que contenga al elemento html
con el selector “.boton” y por último creamos la función saludo.
Como se muestra en la siguiente tabla.

<button class="boton">Saludar</button>

button {
padding: .5rem;
 background-color: rgb(144, 144, 219);
border: thin solid rgb(126, 126, 217);
color: white;
cursor: pointer;
}

<script>
[Link]('click', saludo, false);
const boton = [Link]('.boton');

function saludo() {
alert('Hola usuario.')
}
</script>

Tabla 6: Error de Ejecución.

Imagen 5: Ejemplo de resultado.

Si le damos clic al botón saludar, no iniciará la alerta con el

saludo, esto es debido a que se ha producido un error, este error
se debe a que primero estamos agregando un escuchador de eventos
a una constante o variable que no existe. Si notamos en el código
podemos ver que luego de agregar el escuchador de eventos se crea
la variable que contiene el elemento html. Recordar que el
navegador ejecuta JavaScript en orden secuencial esto quiere
decir que iniciara por la línea de código 1 y continuará así el
siguiente “1,2,3…,n” hay formas en que se ejecute líneas de
código sin seguir la secuencia eso se hace con funciones que
veremos más adelante.

La tabla de códigos se dividió en 3 secciones, la primera sección

contiene el código HTML, la segunda las reglas CSS y por último
códigos JavaScript.

Tabla 7: Información Adicional.

Ejercicio
Solucione el problema de la Práctica Teórica anterior, recuerde
que el navegador ejecuta el código en orden secuencial. Tienes 10
minutos para desarrollar este ejercicio. La siguiente imagen nos
muestra el resultado a obtener. Recuerde cualquier duda
consultar a su instructor
 Imagen 6: Ejemplo de Resultado.

4. Agregar JavaScript a tu página

Al igual que CSS usa elementos html para agregar estilos “link y
style”, JavaScript solo necesita de un elemento HTML “script”.
Existen dos maneras para agregar JavaScript “Interno y externo”

Interno
El código que contiene el script está dentro del documento HTML,
justo antes de la etiqueta de cierre body. Más adelante se le
enseñará estrategias para cargar su script de manera más óptima.

como se puede verificar en la siguiente tabla.

<!DOCTYPE html>
<html lang="es">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<style>
button {
padding: .5rem;
background-color: rgb(144, 144, 219);
border: thin solid rgb(126, 126, 217);
color: white;
cursor: pointer;
}
</style>
</head>

<body>
<button class="boton">Saludar</button>
<script>
const boton = [Link]('.boton');
[Link]('click', saludo, false);

function saludo() {
alert('Hola usuario.')
}
</script>
 </body>
</html>

Tabla 8: Script Interno.

Externo
El código que contiene el script está en un documento externo, el
cual termina con la extensión “.js”. Para poder acceder al
documento al elemento script se le añade su tributo src, donde
irá la ubicación del archivo que contiene el script. Como se
puede verificar en la siguiente tabla.

Documento HTML

<!DOCTYPE html>
<html lang="es">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<style>
button {
padding: .5rem;
background-color: rgb(144, 144, 219);
border: thin solid rgb(126, 126, 217);
color: white;
cursor: pointer;
}
</style>
</head>

<body>
<button class="boton">Saludar</button>
<script src="[Link]"></script>
</body>
</html>

Tabla 9: Agregar Script Externo.

Documento JavaScript

const boton = [Link]('.boton');

[Link]('click', saludo, false);

function saludo() {
alert('Hola usuario.')
}

Tabla 10: Código de Script Externo.

Es posible que te encuentres código JavaScript dentro de HTML,
son conocidos como controladores de JavaScript en línea.

<button class="boton" onclick="saludo()">Saludar</button>

button {
padding: .5rem;
background-color: rgb(144, 144, 219);
border: thin solid rgb(126, 126, 217);
color: white;
cursor: pointer;
}

function saludo() {
alert('Hola usuario.')
}

Tabla 11: JavaScript en Línea.

Como podemos verificar el elemento HTML button tiene un atributo

“onclick”, el cual es un controlador en línea para que la
función se ejecute cuando se presiona el botón. Esto funciona
tanto si el Javascript es interno o externo.

Esta práctica no es muy recomendable, ya que contamina tus

elementos HTML con JavaScript, y a su vez es ineficiente ya que
si necesitas ejecutar la misma función en diferentes botones
tendrías que agregar a cada botón la función.

Ejercicio
En su documento HTML, cree un elemento “p” y en su código
JavaScript implemente un algoritmo el cual agregue “Hola Usuario”
al contenido de texto del elemento “p”, este contenido de texto
debe agregarse bien se inicie su sitio web. Es libre de escoger
si desea implementar su código JavaScript de manera interna y
externa, cuenta con 10 minutos para terminar el ejercicio. La
siguiente imagen nos muestra el resultado a obtener. Recuerde
cualquier duda consultar a su instructor.

Imagen 7: Ejemplo de Resultado.

5. Cargar Script de manera óptima
El navegador carga en orden secuencial el código de su página web
si usted utiliza JavaScript para manipular elementos HTML, antes
de que su código HTML, no funcionara causando un bloqueo de
script, debido a que su HTML no fue procesado.

En ejemplos anteriores cargamos el script justo antes de la

etiqueta de cierre “body”, este es un práctica antigua, que en
sitios web con gran bloques de código de JavaScript causa
problemas de rendimiento y ralentiza su sitio web.

<!DOCTYPE html>
<html lang="es">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<script>
const mensaje = [Link](".mensaje");
[Link] = "Carga de Script exitoso."
</script>
</head>

<body>
<p class="mensaje"></p>
</body>

</html>

Tabla 12: Bloqueo de Script.

En la tabla 12 utilizamos un script interno que nos genera un

bloqueo de script debido a que el HTML no se proceso antes del
script que manipula elementos HTML.

Para solucionar este bloqueo de script agregamos un escuchador de

eventos que escuche el evento “DOMContentLoaded”, este evento se
ejecuta siempre que todos los elementos HTML estén cargados.

<!DOCTYPE html>
<html lang="es">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<script>
[Link]("DOMContentLoaded", function ()
 {
const mensaje = [Link](".mensaje");
[Link] = "Carga de Script exitoso."
});

</script>
</head>

<body>
<p class="mensaje"></p>
</body>

</html>

Tabla 13: Solución de bloqueo de Script.

Si ejecutamos el código que se encuentra en la tabla 13, podemos

verificar que ahora si cargara correctamente su página web
mostrando el mensaje “Carga de Script exitoso”.

Cuando se trata de un Script externo utilizaremos los atributos

defer o async. Antes de usar estos atributos generemos el error
de bloqueo de script.

Documento HTML

<!DOCTYPE html>
<html lang="es">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<script src="[Link]"></script>
</head>

<body>
<p class="mensaje"></p>
</body>
</html>

Tabla 14: Bloqueo de Script.

Documento JavaScript

const mensaje = [Link](".mensaje");

[Link] = "Carga de Script exitoso.";

Tabla 15: Código JavaScript Externo.

En la tabla 14, estamos insertando un javascript externo que nos
causará el bloqueo de script, debido a que su HTML aún no está
procesado.

Para solucionar el error de bloqueo de script, contamos con dos

atributos defer y async, estos atributos solucionaran el bloqueo
de script.

Con el atributo defer le indicamos al navegador que continúe

procesando el HTML y que cargue en segundo plano el script y que
se ejecute cuando los elementos HTML ya se encuentren procesados,
carga los script en orden secuencial.

Documento HTML

<!DOCTYPE html>
<html lang="es">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<script defer src="[Link]"></script>
</head>

<body>
<p class="mensaje"></p>
</body>
</html>

Tabla 16: Bloqueo de Script.

Documento JavaScript

const mensaje = [Link](".mensaje");

[Link] = "Carga de Script exitoso.";

Tabla 17: Código JavaScript Externo.

Si ejecutamos el código que se encuentra en la tabla 16 podemos

verificar que ahora si cargara correctamente su página web
mostrando el mensaje “Carga de Script exitoso”.

El atributo async, al igual que el defer indica al navegador que

se cargue en segundo plano con la diferencia que estos son script
completamente independientes, estos son usados para cargar script
que no dependan de otros script como por ejemplo datos de un
juego mientras estás en el lobby. No se recomienda usar async si
está manipulando elemento HTML o si depende de otro script debido
que este se ejecutará inmediatamente.

Documento HTML

<!DOCTYPE html>
<html lang="es">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<script async src="[Link]"></script>
</head>

<body>
<p class="mensaje">Cargando…</p>
</body>
</html>

Tabla 18: Bloqueo de Script.

Documento JavaScript

[Link] = "Carga de Script exitoso.";

const mensaje = [Link](".mensaje");

Tabla 19: Código JavaScript Externo.

Si ejecutamos el código que se encuentra en la tabla 18 podemos

verificar que cargara correctamente el HTML, aunque tenga un
error en su script.

Los script con defer se ejecutan antes del evento DOMContentLoaded

y los script con async se ejecutan antes o después del
DOMContentLoaded, debido a que si el script con async es más
pequeño se ejecutará antes o si es mas pesado se ejecutar
despues.

Tabla 20: Información Adicional.

Ejercicio
Solucione el error que genera los códigos de la tabla 18 y 19.
Cuenta con 10 min para solucionar el problema. La siguiente
imagen nos muestra el resultado a obtener. Recuerde cualquier
duda consultar a su instructor.
 Imagen 8: Ejemplo de Resultado.

6. Comentarios
Los comentarios nos permite proporcionar instrucciones a nuestros
compañeros de desarrollo o simplemente para indicar a ti mismo
que hace esa linea de codigo o porcion de codigo. Existen dos
tipos de comentarios “de una sola línea y de varias líneas”.

Los comentarios de una línea se escriben después de doble barra

inclinada “//”.

// Obtenemos el elemento html y lo almacenamos en la constante

const mensaje = [Link](".mensaje");

Tabla 21: Ejemplo de comentario en una línea.

Los comentarios de varias líneas se escriben después de una barra

inclinada y un asterisco “/*” y debe de terminar con un asterisco
y barra inclinada “*/”.

/* Obtenemos el elemento html y

lo almacenamos en la constante */
const mensaje = [Link](".mensaje");

Tabla 22: Ejemplo de comentario en una línea.

Los comentarios de varias líneas pueden ser usados para explicar

en término general lo que hace tu script y los comentarios en
línea para explicar de manera específica una línea de código.

Ejercicio
Seleccione una de las Práctica Teórica y explique mediante
comentarios la porción de código de javascript; use los dos tipos
de comentarios. Cuenta con 10 minutos para desarrollar el
ejercicio. Recuerde cualquier duda consultar a su instructor.

7. Sentencia
Es una línea de código al mando de una tarea. Cada programa
consiste en una secuencia de sentencias, si en una línea de
código se encuentran varias sentencias cada una debe de terminar
en “;”, pero no es necesario “; ” si cada sentencia está escrita
en su propia línea.
 //sentencia en una sola línea
const mensaje = [Link](".mensaje");
//sentencia en una sola línea
let nombres; let apellidos;

Tabla 23: Ejemplo de sentencia.

Por buenas prácticas siempre se debe de poner “;” al final de

cada sentencia, esto reduce la posibilidad que se introduzcan
errores en el código.

8. identificador
Un identificador es una secuencia de caracteres en el código el
cual nos permite identificar una variable, función, constante,
propiedad, etc. Un identificador no es una cadena de texto
representado como dato.

let nombre = "Ferrera"

Tabla 24: Ejemplo de sentencia.

En la sentencia de código en la tabla 24, podemos verificar que

nombre es el identificador de la varaiable.