DISEÑO Y DESARROLLO FRONTEND HTML5- CSS -

JAVASCRIPT
FUNDAMENTOS DE JAVASCRIPT.

INTRODUCCIÓN

Actualmente el mundo de la programación JavaScript se ha convertido en uno de los lenguajes

más importantes en la historia de la humanidad, en gran parte, por su importancia y
compatibilidad con los navegadores que son la puerta a internet.

JavaScript se ha convertido en una herramienta fundamental para todo programador,

especialmente si se busca enfocar en el mundo del desarrollo web, donde este servirá más
específicamente para la creación de sitios web dinámicos y de gran interés.

Debido a su importancia en la actualidad, JavaScript tiene una gran comunidad alrededor del
mundo, creando librerías únicas y útiles para la creación de proyectos web.

JavaScript no se detiene en el desarrollo web y se ha ido expandiendo a otros campos de la

programación, como el desarrollo de aplicaciones de escritorio o móviles e inteligencia
artificial.

JavaScript ofrece la posibilidad de crear todas las partes de un proyecto web, desde su front-end
(parte visual con la que interactúa el usuario) y el back-end (parte lógica del proyecto que se
ejecuta en el servidor).

Conceptos básicos.
 DISEÑO Y DESARROLLO FRONTEND HTML5- CSS -
JAVASCRIPT
FUNDAMENTOS DE JAVASCRIPT.

¿Qué es Javascript?

Es un lenguaje de programación especialmente usado en el desarrollo web, ya que es el único

que actualmente puede ser soportado de forma nativa en los navegadores.

JavaScript permite agregar dinamismo e interacciones a los sitios web gracias a su conexión con
los elementos que se encuentran en el mismo sitio, conocido como DOM.

Al igual que cualquier otro lenguaje de programación, JavaScript tiene sus reglas sintácticas y
semánticas para la creación del código de manera correcta.

Una de las principales bondades de JavaScript es que ser un lenguaje muy flexible en cuanto a
tipado de datos.

La creación de sitios web interactivos con JavaScript no requiere instalación de programas

adicionales. JavaScript es un lenguaje interpretado en el navegador, sin embargo, podemos
realizar la instalación de Node, un entorno de ejecución de JavaScript del lado del servidor que
nos permitirá ejecutar programas de JavaScript en nuestro computador.

Para comenzar a escribir el primer programa en JavaScript es necesario crear archivos con
extensión “.js”, en estos archivos podremos utilizar toda la API de JavaScript con ayuda de
editores de código.

Sintaxis.

Para la creación de un código que el navegador web entienda, es fundamental conocer la

sintaxis o reglas del lenguaje de Javascript.

Lo principal es conocer el concepto de variable, esta hace referencia a espacio de memoria

donde se guardan valores y cálculos realizados o creados en un programa.

JavaScript permite interactuar con varios tipos de datos o valor, como “number”, “string”,
“object” y “array” siendo estos los tipos de datos principales que pueden ser guardados en las
variables.

Como en todo lenguaje de programación es posible realizar tres acciones por medio de
variables, declararlas, asignarles un valor y calcular valores.

Para declarar una variable tenemos tres opciones, crear una variable global con “var”, una
variable local con “let” y una constante con “const”, seguido por el nombre de la variable.

Para asignar un valor a una variable usamos el signo “=” seguido del valor que queremos que
obtenga la variable.
 DISEÑO Y DESARROLLO FRONTEND HTML5- CSS -
JAVASCRIPT
FUNDAMENTOS DE JAVASCRIPT.

Etiquetas complementarias de estructura: <details>, <summary>, <mark>, <meter>

Tipos de Datos.

Los principales tipos de datos que ofrece JavaScript son:

 DISEÑO Y DESARROLLO FRONTEND HTML5- CSS -
JAVASCRIPT
FUNDAMENTOS DE JAVASCRIPT.

Operadores.

En JavaScript podremos realizar operaciones de varios tipos para calcular o crear nuevos
valores que ayuden a obtener ciertos resultados.

Existen dos tipos de operadores los operadores lógicos y los matemáticos.

Operadores lógicos Ayudan a determinar si una sentencia es verdadera o falsa. Por ejemplo,
saber si A es igual a B, o si X es mayor que Y.

Operadores matemáticos Ayudan a efectuar operaciones matemáticas para calcular nuevos

resultados. Algunos son la suma, la resta, la división y la multiplicación.
 DISEÑO Y DESARROLLO FRONTEND HTML5- CSS -
JAVASCRIPT
FUNDAMENTOS DE JAVASCRIPT.

Condicionales.

Las condicionales son bloques de código para realizar diferentes acciones de acuerdo con el
resultado booleano de una sentencia.

Las principales estructuras de control de código son: “if”, “else if” y “else”.

Ciclos.

Los ciclos son estructuras de control que permiten ejecutar determinadas acciones de forma
múltiple hasta que la condición especificada sea falsa.

Las dos estructuras principales de control de ciclos son: “while” y “for”, ambas permiten
ejecutar una acción múltiples veces.
 DISEÑO Y DESARROLLO FRONTEND HTML5- CSS -
JAVASCRIPT
FUNDAMENTOS DE JAVASCRIPT.

Arreglos.

Los arreglos son un tipo de dato que permite guardar múltiples valores en una sola variable, e
identificar todos los valores que contiene, para acceder rápidamente a un valor.

En un arreglo es posible por ejemplo agregar o eliminar un nuevo valor, y organizar alfabética o
numéricamente.

Objetos.

Los objetos son un tipo de dato llave-valor que facilitan la creación de representaciones de
objetos del mundo real. Para crear un objeto usamos llaves (identificador) que tienen un valor.
Una vez creado un objeto, podremos acceder a sus propiedades con la notación de punto.

Funciones.
 DISEÑO Y DESARROLLO FRONTEND HTML5- CSS -
JAVASCRIPT
FUNDAMENTOS DE JAVASCRIPT.

Las funciones son bloques de código que se pueden reutilizar en cualquier parte de un proyecto
web, Las funciones se componen de dos conceptos, los parámetros y el cuerpo.

Los parámetros son los valores que necesita la función para ejecutar una acción.

El cuerpo son las instrucciones que realizará la función cuando se invoque.

Scope.

El Scope es el alcance de una variable o función, es decir, el área donde puede o no ser llamada
o ejecutada.

Con la utilización del scope es posible crear variables con el mismo nombre en diferentes áreas
del proyecto sin que estas interfieran o generen un error en el código.

El scope se divide en dos, local y global, este depende del tipo de variable con que fue
declarada, las variables de tipo “let” o “const” tienen un scope local mientras que “var” tienen
un scope global.

Las áreas del scope se definen con los cuerpos de cada estructura de control, ya sea una
condicional, un ciclo o una función.

Métodos.

Los métodos son funciones disponibles para tipo de dato de Javascript, ayudan en la interacción
con los objetos o variables de acuerdo con el tipo de dato.

Cada tipo de dato tienen sus propios y únicos métodos, aunque en algunos casos se comparten
en varios tipos

Para acceder a los métodos de cada tipo de dato, se debe usar la notación de punto, seguido del
método a usar.

Timing.
 DISEÑO Y DESARROLLO FRONTEND HTML5- CSS -
JAVASCRIPT
FUNDAMENTOS DE JAVASCRIPT.

Funciones que pueden ser ejecutadas en un intervalo de tiempo, estas funciones de intervalos de
tiempo son conocidas como eventos de tiempo.

Existen dos principales eventos de tiempo, “setTimeout” y “setInterval”. Ambas reciben un

tiempo específico en milisegundos que determina el tiempo en que se ejecutarán.

¿Qué es el DOM?

El DOM o Document Object Model es el árbol de elementos HTML de nuestro sitio web que
nos permitirá actuar directamente con ellos por medio de JavaScript.

Gracias al DOM podremos hacer de nuestros sitios web, sitios web dinámicos ya que podremos
interactuar, crear, eliminar y modificar los elementos del DOM como nos plazca y necesitemos.

Al tener una estructura que nos permita conocer cada elemento del DOM podremos también
crear eventos específicos para elementos específicos, que pueden ser activados cuando se
detecte una acción realizada por el usuario.

Al ser ejecutados en el navegador todos los códigos de JavaScript tendrán acceso directo al
DOM, para acceder a él solo debemos hacer referencia al objeto global de “document”.

Con “document” podremos realizar todas las acciones que necesitemos con el DOM. Como
identificar, agregar o eliminar un elemento especifico.

Obtener elementos.
 DISEÑO Y DESARROLLO FRONTEND HTML5- CSS -
JAVASCRIPT
FUNDAMENTOS DE JAVASCRIPT.

Una de las principales acciones que realizaremos con el DOM es obtener los elementos con los
cuales queremos interactuar. Para realizar esto deberemos primero definir el ID o Clase del
elemento en HTML.

Existen tres funciones que nos ofrece el DOM para obtener un elemento:
Por su Clase con “getElementsByClass”.
Por su ID con “getElementById”.
Por consulta con “querySelector”, el cual nos permite especificar que elemento queremos con la
notación de CSS.

Eventos.

Otra acción importante es la creación de eventos en nuestro sitio web, que pueden ser activados
por acciones que pueden ser realizadas por los usuarios.

Existen múltiples tipos de eventos que se pueden realizar, por ejemplo, eventos de click, del
teclado, de cambio, mouse, etc.

Los eventos solo pueden ser creados a través de las funciones ofrecidas de un elemento del
DOM, es decir, necesitaremos primero del elemento para poder agregar un evento a él. El
método que nos permite agregar un evento a un elemento es “addEventListener”, donde
podremos especificar el tipo de evento que se creara y una función que indica lo que sucederá
cuando se active o inicie el evento.
 DISEÑO Y DESARROLLO FRONTEND HTML5- CSS -
JAVASCRIPT
FUNDAMENTOS DE JAVASCRIPT.

Metodo This.

Cuando obtenemos un elemento por medio del DOM, podremos acceder a este de varias formas,
a través de la variable que hace referencia a él, o a través del método “this” cuando se está en
una función que referencia al elemento del DOM.

“this” no es una expresión que solo se usa con referencia a elementos, “this” hace referencia al
objeto de primer nivel del scope donde se encuentre.

Multimedia.

Con HTML5 podremos crear elementos multimedia como videos o audios dentro de nuestro
sitio web y gracias a JavaScript podremos interactuar con ellos de maneras dinámicas.

A través de una API común, Javascript ofrece diversos métodos de interacción con elementos
multimedia, para realizar acciones específicas de modificación o personalización de los
controles de estos, por ejemplo, retroceder o avanzar en la línea del tiempo, subir o bajar el
volumen reproducir o detener el elemento.
 DISEÑO Y DESARROLLO FRONTEND HTML5- CSS -
JAVASCRIPT
FUNDAMENTOS DE JAVASCRIPT.

LocalStorage.

El navegador nos ofrece la funcionalidad de LocalStorage, la cual nos permitirá guardar valores
llave-valor en el navegador de nuestro usuario.

El LocalStorage puede llegar a ser realmente útil cuando necesitamos guardar información del
usuario por un gran periodo de tiempo de forma indefinida.

Para acceder al LocalStorage solo deberemos hacer referencia a su objeto global “localStorage”.
Este objeto global nos ofrece todos los métodos necesarios para guardar, obtener y eliminar
valores de la memoria del navegador.

Javascript y el manejo de datos.

Una de las grandes funciones de JavaScript en el desarrollo web es la recolección y

manipulación de los datos que serán enviados o guardados en una base de datos. JavaScript
ofrece varias formas de recolectar datos, sin embargo, es importante saber cómo obtenerlos de
la manera correcta para evitar posibles ataques que vulneren la seguridad de estos.

Formularios
 DISEÑO Y DESARROLLO FRONTEND HTML5- CSS -
JAVASCRIPT
FUNDAMENTOS DE JAVASCRIPT.

Una forma “simple” de obtener datos del usuario en un sitio web, es por medio de los
formularios, en ellos, el usuario ingresa la información solicitada y posteriormente podremos
interactuar directamente con ella a través del DOM.

Lo más importante al momento de recoger los datos en un formulario es capturar los inputs
donde el usuario ingresa la información a través de clases o ID.

Cuando se trabaja con formularios es necesario saber que estos pueden enviar los datos
directamente a un servidor para ser validados. Con Javascript es posible depurar o realizar
validaciones previas en el mismo sitio web y enviar los datos en la forma esperada por el
servidor, modificando el comportamiento por defecto del formulario. Para realizarlo se captura
el formulario con el evento de “submit” y el método addEventListener.

Validación De Datos.

Al obtener datos con Javascript dentro del sitio web, y realizar validaciones podremos evitar
problemas en el servidor en el desarrollo web, ya que en algunas ocasiones pueden ser
ingresados de manera errónea o pueden ser creados con finalidades delictivas o ataques
informáticos.

Existen varias formas de validar datos, incluso desde HTML identificando el tipo de input del
cual va a disponer el usuario, hasta validar y verificar si la información ingresada cumple con
los requisitos solicitados.

En Javascript se pueden crear requisitos específicos para cada input y validar si estos cumplen
con lo solicitado, la manera más sencilla de hacerlo es capturar y obtener el valor del input
luego de ello se verifican los requisitos uno a uno y se transmiten mensajes de error al usuario
en caso de que alguno no cumpla.
 DISEÑO Y DESARROLLO FRONTEND HTML5- CSS -
JAVASCRIPT
FUNDAMENTOS DE JAVASCRIPT.

Expresiones Regulares

Las expresiones regulares son una herramienta importante al momento de manipular y manejar
datos, estas permiten definir patrones que podrán ser verificados de forma rápida y segura.

Gestión de bases de datos con Javascript y Firebase

Firebase es una plataforma de Google, conocida por su servicio de base de datos en la nube.
Este servicio permite conectar aplicaciones web con una base de datos de tipo no relacional y
actualizarse a tiempo real bidireccionalmente.

Con Firebase es posible gestionar bases de datos y acceder a otras funciones bastante útiles en el
desarrollo de aplicaciones.
 DISEÑO Y DESARROLLO FRONTEND HTML5- CSS -
JAVASCRIPT
FUNDAMENTOS DE JAVASCRIPT.

A continuación, realizaremos un ejercicio utilizando firestore.

Base de Datos a Tiempo Real (Firestore):

Es una base de datos alojada en la nube con formato JSON (Base de datos no relacional).

Los datos se sincronizan en tiempo real con el servicio. La comunicación es bidireccional, es

decir que cuando se modifican los datos en la bbdd (base de datos) estos se ven reflejados
directamente en la web y viceversa.

Configurando la base de datos en nuestro proyecto

1. Accede a https://console.firebase.google.com/
2. Inicia sesión
3. Crea un proyecto
 DISEÑO Y DESARROLLO FRONTEND HTML5- CSS -
JAVASCRIPT
FUNDAMENTOS DE JAVASCRIPT.

4. Ingresa al panel de tu proyecto, selecciona “Añadir firebase a mi proyecto”, en la

ventana emergente con scripts de configuración de firebase, copia y pega en tu
proyecto.
 DISEÑO Y DESARROLLO FRONTEND HTML5- CSS -
JAVASCRIPT
FUNDAMENTOS DE JAVASCRIPT.

5. Desactivar la autenticación: Para usar la base de datos sin iniciar sesión, es necesario
cambiar las reglas dentro de la sección de las reglas del database.

6. En el archivo js donde escribimos el código, invocamos a firebase.database() para

acceder al servicio de base de datos de la aplicación. A partir de aquí accedemos a los
métodos que permiten trabajar con los datos.
 Visualizar los datos que hay en nuestra base de datos
 DISEÑO Y DESARROLLO FRONTEND HTML5- CSS -
JAVASCRIPT
FUNDAMENTOS DE JAVASCRIPT.

 Añadir desde la aplicación datos nuestra base de datos

7. En la consola de firebase, en la sección de base de datos, se pueden ver los datos que se
han enviado.
 DISEÑO Y DESARROLLO FRONTEND HTML5- CSS -
JAVASCRIPT
FUNDAMENTOS DE JAVASCRIPT.

Recursos Bibliográficos

Guía JavaScript, W3Schools, Sitio web oficial sobre desarrollo web, Disponible en:
https://www.w3schools.com/js/default.asp

Dorian Sully Múnera Rúa – Centro de Servicios Junio de 2021

y Gestión empresarial – Regional Antioquia
Control de documento: Danny Alexander Celis Bayona – Centro de Junio de 2021
Servicios y Gestión empresarial – Regional
Antioquia