Recuerden poner a

grabar la clase
Clase 0

Introducción a JavaScript
Diplomatura UNTREF
 Introducción a JavaScript

JavaScript es un lenguaje de programación que se utiliza

principalmente en el desarrollo web. Fue creado por Brendan
Eich en 1995 mientras trabajaba para Netscape
Communications Corporation. Inicialmente, se llamó Mocha,
pero más tarde se renombró como LiveScript antes de adoptar
su nombre actual, JavaScript.
 Introducción a JavaScript

En los primeros días de la web, los navegadores sólo podían

mostrar contenido estático, lo que significaba que no había
interacción ni animación en las páginas web. JavaScript
permitió a los desarrolladores agregar interactividad y
animación a las páginas web, lo que llevó a la creación de
aplicaciones web más sofisticadas.
 Introducción a JavaScript

A medida que el uso de JavaScript se expandió en la década de

2000, surgieron problemas de compatibilidad entre
navegadores. Para solucionar esto, varias organizaciones
trabajan juntas para crear un estándar de JavaScript llamado
ECMAScript, que especifica cómo el lenguaje debe funcionar y
cómo se deben implementar sus características.
 Introducción a JavaScript

Hoy en día, JavaScript es uno de los lenguajes de

programación más populares del mundo. Es utilizado por
desarrolladores web para crear aplicaciones web complejas,
aplicaciones móviles híbridas, juegos en línea y mucho más.
Además, su creciente popularidad ha llevado a la creación de
muchas bibliotecas y marcos de JavaScript que simplifican el
proceso de desarrollo web.
ECMAScript
 ¿Qué es ECMAScript?

ECMAScript es un estándar de lenguaje de programación que

se utiliza para describir cómo deben funcionar los lenguajes de
scripting en los navegadores web. Fue creado por la European
Computer Manufacturers Association (ECMA) y se basó en el
lenguaje JavaScript..
 ¿Qué es ECMAScript?

La primera versión de ECMAScript se lanzó en 1997, y desde

entonces se han lanzado varias versiones adicionales, cada una
con nuevas características y mejoras. La versión más reciente,
ECMAScript 2022, se lanzó en 2021.
 ¿Qué es ECMAScript?

ECMAScript define un conjunto de reglas y

normas que los navegadores web deben seguir
al implementar el lenguaje JavaScript. Estas
reglas incluyen cómo se deben manejar las
variables, cómo funcionan los objetos, cómo se
deben definir y llamar a las funciones, entre otras
cosas.
 ¿Qué es ECMAScript?

Además de los navegadores web, ECMAScript también se

utiliza en otras plataformas de desarrollo, como Node.js, que
permite a los desarrolladores ejecutar código de JavaScript en
servidores. Debido a que ECMAScript es un estándar, los
desarrolladores pueden escribir código JavaScript que funciona
en múltiples navegadores y plataformas, lo que hace que el
desarrollo de aplicaciones sea más fácil y eficiente.
Sintaxis Básica
 Sintaxis Básicas

JavaScript utiliza una sintaxis similar a otros

lenguajes de programación, pero con algunas
particularidades propias.
En general, la sintaxis de JavaScript se divide
en tres áreas principales: variables y tipos de
datos, estructuras de control de flujo y
funciones.
 Sintaxis Básicas
Variables y tipos de datos

● Para declarar una variable en JavaScript, se

utiliza la palabra clave var, let, const seguida del
nombre de la variable y opcionalmente su valor
inicial.
● JavaScript tiene varios tipos de datos, como
cadenas de texto, números, booleanos, arrays y
objetos.
● Para declarar una variable de tipo de cadena, se
utiliza comillas dobles o simples alrededor del
valor.
● Para declarar una variable de tipo numérico,
simplemente se asigna un valor numérico a la
variable.
● Para declarar una variable de tipo booleano, se
utiliza el valor true o false.
 Sintaxis Básicas
Estructuras de control de flujo

● Las estructuras de control de flujo se utilizan

en JavaScript para controlar el flujo de
ejecución de un programa.
● Una estructura de control de flujo común es
la instrucción if-else, que se utiliza para
ejecutar diferentes bloques de código
dependiendo de si una condición es
verdadera o falsa.
● Otra estructura de control de flujo común es
el bucle for, que se utiliza para repetir un
bloque de código un número determinado de
veces.
 Sintaxis Básicas
Funciones

● Las funciones son bloques de código que se

pueden llamar desde otras partes del
programa.
● En JavaScript, una función se define
utilizando la palabra clave function,
seguida del nombre de la función y sus
parámetros entre paréntesis.
● Las funciones pueden devolver valores
utilizando la palabra clave return.
● También pueden ser anidadas dentro de
otras funciones o asignadas a variables para
su reutilización en diferentes partes del
programa.
 ¿Punto y coma al final, sí o no?
● Cada línea de código del lenguaje
JavaScript puede finalizar con “punto y
coma” ;
● Esta característica es común a otros
tantos lenguajes de programación, como
ser: C#, Java, PHP, C++, entre otros
tantos.
●
● Sin embargo, desde ES6 (2015), el uso
de punto y coma en JavaScript, pasó a ser
opcional.
Integración de JS al proyecto
 ¿Cómo integrar código JS en HTML?

A través del tag HTML <script>,

podemos agregar código JS
directamente en los documentos HTML.

Lo anterior no es para nada

recomendable por una cuestión de
mantenimiento de los proyectos.
Por ello, debemos escribir el código JS
en un archivo independiente.
 El atributo HTML defer

El atributo defer es un atributo clave

utilizando en HTML cuando referenciamos un
archivo JS que contiene conexión directa con
elementos HTML, para su creación y/o
modificación.

Si bien no lo utilizaremos todavía, es bueno

tenerlo presente. Si quieres, puedes ir
poniéndolo en práctica desde ahora.
 El tag <noscript>

El tag <noscript> nos permite dejar un mensaje

visible solamente en aquellos navegadores web
que cargue nuestro sitio o aplicación web, y que
tengan desactivada por defecto la funcionalidad
de interpretar código JS.

Es algo casi improbable hoy, pero no viene mal

incluirla siempre en aplicaciones web claves.
 Palabras reservadas
Tanto en JavaScript como en otros lenguajes de programación, las palabras reservadas son palabras
predefinidas dentro del lenguaje en sí, que se utilizan para desarrollar las diferentes sentencias de
éste. Por ello, no pueden utilizarse para crear una variable, constante, función, u objeto JS.

Aquí algunos ejemplos de ellas, aunque existen un montón imposible de nombrar:

break, case, catch, continue, default, let

delete, do, else, extends, fetch, finally, for, function, if, in, instanceof,
new, return, switch, this, throw, try, typeof, var, void, while, with, y
varias más…
DevTools
 La sentencia JS debugger
Esta puede agregarse en cualquier parte de nuestro
código para pausar el mismo y depurarlo, analizar
variables, constantes, y ver en tiempo real los valores
que se generan a partir de nuestro código JS.

debugger sólo funciona con DevTools

activado. Podremos ejecutar el código
pausadamente, pulsando la tecla F9.
 DevTools

Apartado Sources / Fuentes para visualizar

y depurar código JS en tiempo de ejecución

Controlar la ejecución de JS paso a paso

Consola JS para visualizar variables, ejecutar

funciones manualmente, ver mensajes en la
consola JS, entre otras tantas opciones de
depuración
 Uso de la consola JS

La Consola JS de las Herramientas

para el Desarrollador, en acción.
alert, prompt, confirm
 Cuadros de Diálogo

Los cuadros de diálogo son herramientas que nos

permiten interactuar con un usuario.

En las primeras clases haremos un uso fuerte de estos,

para aprender la sintaxis del lenguaje JS y poder
🗯
generar interactividad en un programa.

🗣
 alert()

Esta sentencia muestra un cuadro de diálogo

emergente en la página web desde donde se invoca.

Comúnmente se utiliza para mostrarle un mensaje o

comunicación al usuario, en forma de mensaje de una
sola vía {el usuario no puede interactuar}.
Hola Team Frontend!

Aceptar
 confirm()

Esta sentencia muestra un cuadro de diálogo

emergente con dos botones (Aceptar - Cancelar).

El usuario puede pulsar cualquiera de ellos, y

nosotros, capturar la decisión del usuario y aplicarla
en la lógica de nuestro código.
¿Desea aprender el lenguaje JavaScript?

Cancelar Aceptar
 prompt()

Esta sentencia muestra un cuadro de diálogo

emergente con dos botones (Aceptar - Cancelar), el
cual solicita que se ingrese un dato.

Lo que ingrese el usuario se define como término de Identifícate: ingresa tu nombre:

entrada, y podrá ser capturado por nuestro código JS

UNTREF|

y utilizado internamente.
Aceptar Cancelar
console.(log-warn-error-table
-info-clear)
 console.log()

Es el tipo de console más utilizado. Imprime un mensaje

en la consola del navegador o de la herramienta de
desarrollo, y se puede utilizar para imprimir variables y
mensajes de depuración.
 console.warn()

Este tipo de console se utiliza para imprimir mensajes de

advertencia en la consola. A menudo se utiliza para
indicar situaciones que no son necesariamente un error,
pero que pueden llevar a comportamientos inesperados
del programa.
 console.error()

este tipo de console se utiliza para imprimir mensajes de

error en la consola. A menudo se utiliza para indicar
errores en el código que pueden impedir su correcta
ejecución.
 console.info()

este tipo de console se utiliza para imprimir mensajes

informativos en la consola. A menudo se utiliza para
indicar información relevante del programa que puede
ser útil para el usuario o el desarrollador.
 console.table()

Se utiliza para imprimir tablas en la consola. Esta función es

muy útil para visualizar conjuntos de datos complejos en una
tabla con formato legible.
Saber interpretar errores en JS
 Como interpretar errores en js

1- Lee el mensaje de error: Aunque pueda parecer obvio,

a veces es fácil pasar por alto el mensaje de error. Es
importante leer detenidamente el mensaje de error para
comprender qué ha sucedido y en qué parte del código
se ha producido el error.

2- Identifica la ubicación del error: La mayoría de los

mensajes de error en JavaScript indican la línea de código
en la que se ha producido el error. Este es un punto de
partida útil para localizar y solucionar el error.
 Como interpretar errores en js

3- Comprueba la sintaxis: Muchos errores en JavaScript

se producen debido a errores de sintaxis, como una llave
o un paréntesis faltante. Comprueba que la sintaxis de tu
código sea correcta.

4- Utiliza la consola de desarrollo: La consola de

desarrollo del navegador es una herramienta muy útil
para depurar código. En la consola, se pueden ver los
mensajes de error y se pueden ejecutar comandos para
probar el código.
 Como interpretar errores en js

5- Comprueba las variables: A veces, los errores en

JavaScript se deben a un valor de variable incorrecto o
inesperado. Comprueba que las variables se inicializan
correctamente y que los tipos de datos sean los
esperados.

6- Utiliza try-catch: La sentencia try-catch es una forma

de manejar errores en JavaScript. Permite ejecutar un
bloque de código y, si se produce un error, capturarlo y
manejarlo en un bloque catch. Esto puede ser
especialmente útil para detectar y manejar errores en
código complejo.
 Tip y consejo

Busca ayuda en línea: Si no puedes resolver un error por tu cuenta, busca ayuda
en línea. Hay muchos recursos disponibles, como foros, documentación y
tutoriales, que pueden ayudarte a resolver problemas de código.
Concepto de algoritmo y
abstracción
 Concepto de algoritmo

Es importante tener en cuenta que un algoritmo puede tener diferentes

soluciones posibles para un mismo problema, por lo que la elección del mejor
algoritmo dependerá del problema específico que se esté resolviendo y de las
características del entorno en el que se está ejecutando.
 Concepto de algoritmo

● Entrada: es la información o datos que se proporcionan al algoritmo para

procesar.
● Salida: es el resultado o la respuesta que devuelve el algoritmo después
de procesar la entrada.
● Proceso: son las instrucciones que el algoritmo sigue para transformar la
entrada en la salida deseada. Estas instrucciones pueden ser matemáticas,
lógicas, de comparación, de selección, de repetición, entre otras.
 Concepto de algoritmo

● Definición clara y precisa: un algoritmo debe estar escrito de manera que

cualquier persona pueda entenderlo y seguirlo sin ambigüedad.
● Finitud: un algoritmo debe terminar en un número finito de pasos. No debe
tener un ciclo infinito o repetitivo.
● Eficiencia: un algoritmo eficiente es aquel que utiliza la menor cantidad de
recursos (como tiempo y memoria) para producir la salida deseada.
 Te dejamos un ejemplo

algoritmo para sumar dos números:

1. Entrada: dos números (por ejemplo, 3 y 5)

2. Proceso: sumar los dos números para obtener la
respuesta
3. Salida: el resultado de la suma (en este caso, 8)
 Concepto de abstracción

En programación, la abstracción es un proceso de simplificación y generalización

de la información para hacerla más fácil de entender y manipular. En Javascript,
la abstracción se refiere a la creación de estructuras de datos y funciones que
ocultan los detalles de implementación y permiten interactuar con ellas de una
manera más abstracta y simplificada.
 Concepto de abstracción

La abstracción en Javascript se basa en la creación de funciones, objetos, clases y

módulos que encapsulan la funcionalidad y ocultan los detalles de implementación. Al
interactuar con estas abstracciones, los programadores no tienen que preocuparse por
los detalles internos de cómo se implementa la funcionalidad. En cambio, pueden
trabajar con interfaces más simples y abstractas que facilitan el desarrollo y el
mantenimiento del código.
 Concepto de abstracción
(funciones)

Una función es un bloque de código que realiza

una tarea específica y puede ser reutilizada en
múltiples lugares del programa. Las funciones
permiten abstraer la complejidad del código y
facilitan su mantenimiento y reutilización.
 Concepto de abstracción
(objetos)

Los objetos son una estructura de datos que

permite almacenar información y funcionalidad
relacionadas en un solo lugar. Los objetos
permiten abstraer los detalles de
implementación de los datos y la funcionalidad,
y facilitan la organización y el mantenimiento
del código.
 Concepto de abstracción
(clases)

Las clases son una forma de definir objetos con

características y comportamientos comunes.
Las clases permiten abstraer la estructura y el
comportamiento de un objeto y crear múltiples
instancias de él.
 Concepto de abstracción
(módulos)

Los módulos son unidades de código que se

utilizan para organizar el código en piezas
lógicas y separadas. Los módulos permiten
abstraer la complejidad del código y facilitan su
mantenimiento y reutilización.
 Concepto de abstracción
(módulos)

las variables son espacios de memoria que se

utilizan para almacenar información
temporalmente en el programa. Las variables
permiten abstraer los detalles de
implementación de la información y facilitan la
manipulación y el acceso a los datos.
¿Dudas o consultas?
¡Muchas Gracias!