¡LES DAMOS LA

BIENVENIDA!
¿Están listos?
RECUERDA PONER A GRABAR LA
CLASE
¿DUDAS DEL ON-BOARDING?
MIRALO AQUI
 Clase 0. JAVASCRIPT

INTRODUCCIÓN A JAVASCRIPT
 ● Aprender la diferencia entre sitios y
aplicaciones web.
● Entender los fundamentos de
JavaScript.

OBJETIVOS DE LA CLASE ● Reconocer qué es un algoritmo y

desarrollar capacidad resolutiva frente a
un problema.
MAPA DE CONCEPTOS
MAPA DE CONCEPTOS CLASE 0

Fundamentos

Diferencia con sitios

Aplicaciones web web

Lenguaje interpretativo

JavaScript Definición Front-End y Back-End

Herramientas

HTML Evolución del lenguaje

Nivelación CSS Básicos

Algoritmo Perfil profesional

 MÓDULOS DE TRABAJO
MÓDULO 0 MÓDULO 1 MÓDULO 2
NIVELACIÓN CONCEPTOS BÁSICOS OBJETOS & ARRAYS

CLASE 1 -
CLASESET
1 - UP CONCEPTOS GENERALES: CLASE 5 -
SINTAXIS Y VARIABLES OBJETOS

CLASE 0 - CLASE 2 -
INTRODUCCIÓN A JAVASCRIPT CONTROL DE FLUJOS CLASE 6 -
ARRAYS

CLASE 3 -
CICLOS E ITERACIONES
CLASE 7 -
FUNCIONES DE ORDEN SUPERIOR
CLASE 4 -
FUNCIONES
● 1ra pre-entrega
● Desafío entregable
¿EMPEZAMOS?
APLICACIONES WEB
 APLICACIÓN WEB
Mientras que los sitios web buscan brindar
información estática, las web apps permiten a los
usuarios realizar múltiples tareas.

Las aplicaciones web son plataformas

dinámicas e interactivas y sus funcionalidades
están en constante mantenimiento y mejora.
 APLICACIÓN WEB
Plataformas como MercadoLibre, Youtube, Gmail, Facebook, CoderHouse son
web apps por la cantidad de funcionalidades que ofrecen
 APLICACIÓN WEB
En la actualidad, el desarrollo desde cero de sitios web estáticos, es decir,
aquellos cuya información no cambia en respuesta a las acciones del usuario, es
poco frecuente.

Lo que se busca construir en el ámbito laboral, son plataformas que ofrezcan un

alto nivel de interactividad, y un variado número de funcionalidades. Ya no
hablamos de sitios, sino de aplicaciones web que permiten realizar tareas
importantes a sus usuarios.
 APLICACIÓN WEB
Por funcionalidades entendemos diversas tareas que los usuarios y clientes
pueden realizar y son típicamente demandadas hoy.

La interactividad en la página es una de ellas. Por ejemplo implementar

animaciones y transiciones complejas, respuestas a ciertos eventos de los
usuarios (como clickear un botón), o capturar y enviar datos mediante formularios.

Es normal también consumir alguna API o servicio de backend y/o base de datos,
con la cual podemos cargar y administrar la información de la página.
El arte de la programación es la habilidad de
controlar la complejidad. Un gran programa
es moderado, hecho simple en su
complejidad.

Eloquent Javascript - Marijn Haverbeke

JAVASCRIPT
 ¿QUÉ ES JAVASCRIPT?
JavaScript es un lenguaje de programación
que se utiliza principalmente para aportar
dinamismo a sitios y aplicaciones web.
Funciona en complemento con los lenguajes
web HTML Y CSS3, permitiendo crear
nuevas funcionalidades e interacciones
avanzadas con los usuarios, así como
interactuar con otras aplicaciones o servicios
de backend.
 LENGUAJE INTERPRETADO
A diferencia de un lenguaje de programación compilado, Javascript es un
lenguaje interpretado, lo que significa que se ejecuta por medio de un
programa intérprete.
En nuestro caso, los navegadores son los programas que se encargan
de interpretar y ejecutar el código Javascript que creemos.
Cuando accedemos a alguna página a través del navegador, éste se
encarga de leer y ejecutar todos los archivos que conforman la aplicación
(HTML, CSS, JS).
 FRONT-END y BACK-END

En el curso nos focalizaremos en el desarrollo front-end de la aplicación web

 FRONT-END y BACK-END
Javascript se utiliza tanto para construir aplicaciones de Frontend
como de Backend.
Por Frontend entendemos a la parte de la aplicación que corre en
el navegador y con la cual interactúan los usuarios.
Como tal, estaremos creando aplicaciones con Javascript, HTML y
CSS; vinculando los tres lenguajes en el desarrollo un único
producto.
Nuestra aplicación de Frontend también consume datos y servicios
ofrecidos por algún Backend. Javascript será la herramienta que
nos permitirá comunicarnos e intercambiar información con APIs u
otras aplicaciones.
HISTORIA DE JAVASCRIPT
 ¿CUÁNDO NACE?
La primera aparición pública de
Javascript la encontramos en el año
1995 cuando se utiliza como
herramienta del navegador
Netscape Navigator.
El objetivo fue permitir agregar
programas a páginas web.
 EVOLUCIÓN DE JAVASCRIPT

La primera versión de JavaScript ES1 se lanzó en 1997 y el lenguaje fue

cambiando con el tiempo. En el curso nos focalizamos en las versiones ES6
y posteriores. Actualmente JS se encuentra en la versión 11 y desarrollo de la 12.
 DIFERENCIA CON JAVA
Si bien tanto Java con Javascript son lenguajes de
programación que comparten base de su sintaxis, el uso
de cada uno es distinto.

Son dos lenguajes diferentes, y no es correcto

mencionarlos como sinónimos.
DIFERENCIA CON JAVA
Java funciona a través de declaraciones que se
establecen a partir de un sistema de clases en tiempo
de compilación.
En cambio, JavaScript se basa en un sistema de
tiempo de ejecución donde cada dato distinto puede
representar valores booleanos, de cadena o numéricos.
BÁSICOS DE JAVASCRIPT
 ELEMENTOS BÁSICOS
Si bien a lo largo del curso se desarrollarán en profundidad, es necesario saber que
para trabajar en y con Javascript existen ciertos elementos básicos e imprescindibles.

VARIABLES
DATOS OBJETOS

ARRAYS FUNCIONES
En síntesis,
ELEMENTOS BÁSICOS
DATOS VARIABLES OBJETOS ARRAYS FUNCIONES

Numéricos Array
Globales Argumentos
Índice

Cadena Locales Boolean

Longitud

Date
Booleanos
Math
Punteros
String
 ¿CUÁL ES EL PERFIL DE UN
PROFESIONAL EN JAVASCRIPT?
 PERFIL DE UN PROFESIONAL EN JS

ALGUNAS COMPETENCIAS
● Capacidad para realizar tareas de programación, desarrollo, puesta en
funcionamiento y procesos de mejoras de sitios web y apps.
● Alto manejo y comprensión del área frontend en desarrollo de apps y
software.
● Habilidad para pruebas y depuración de código.
● Versatilidad para trabajar con otros profesionales en procesos de
optimización y mejoras integrales, como diseñadores de experiencia de
usuario o profesionales del backend.
 PERFIL DE UN PROFESIONAL EN JS

¿POR QUÉ JAVASCRIPT?

● Porque es uno de los lenguajes más usados en el mundo.

● Porque es muy demandado en el mercado laboral debido a su sencillez,
amplitud y adaptabilidad.
● Porque la mayoría de sitios web y apps funcionan con este lenguaje.
● Porque es escalable y te brindará herramientas para profundizar luego tus
conocimientos en programación y desarrollo.
NIVELACIÓN
 ¡HANDS ON!
¿Te gustaría comprobar tus conocimientos de la clase?

Te compartimos a través del chat de zoom

el enlace a un breve quiz de tarea.

Para el profesor:
- Acceder a la carpeta “Quizzes” de la camada
- Ingresar al formulario de la clase
- Pulsar el botón “Invitar”
- Copiar el enlace
- Compartir el enlace a los alumnos a través del chat
RELACIÓN CON DESARROLLO WEB
 HTML
Es un "lenguaje" de marcado de
etiquetas, que permite crear
documentos para web.

Los términos de uso frecuente:

● Etiqueta
● Atributo
● Estructura
 CSS
El CSS, en español «hojas de estilo en
cascada», es un lenguaje de diseño
gráfico, utilizado para definir y crear la
presentación de un documento estructurado,
escrito en un lenguaje de marcado.

Los términos de uso frecuente:

● Estilo
● Reglas
● Medidas
● Fuente
 RELACIÓN ENTRE HTML, CSS & JS

● HTML nos aportará a través de sus etiquetas, la estructura básica de sitio web
que creemos. Funcionará en consonancia y en relación con CSS y JS.

● CSS lo utilizaremos para darle el estilo que queremos mostrar en nuestro sitio web
a través de la definición de formato y diseño de nuestra presentación

● JavaScript entonces utilizará a ambos lenguajes(HTML y CSS) para controlar

el comportamiento y funcionalidad de los elementos de nuestros sitio web.
ALGORITMOS
 ALGORITMO
En programación, un algoritmo es un conjunto de
procedimientos o funciones ordenados que se necesitan
para realizar cierta operación o acción. Por ejemplo, en una
suma el algoritmo implica tomar un dato, sumarlo a otro y
obtener un resultado.
 ALGORITMO
Pensar en algoritmos es una práctica que
debemos fortalecer como desarrolladores.
Consiste en encarar un problema complejo y
dividir su resolución en diversos pasos,
pensar cómo resolver cada uno y luego
secuenciarlos correctamente para llegar al
resultado esperado.
HERRAMIENTAS A UTILIZAR EN EL CURSO
 HERRAMIENTAS
NAVEGADORES WEB

Chrome, Firefox, Edge u Opera.

 HERRAMIENTAS
EDITORES DE CÓDIGO

Visual Studio Code, Sublime Text o Atom.

IMPORTANTE: Para la clase 1 ya tendrán que tener instalado/funcionando un

editor de código
 HERRAMIENTAS
FRAMEWORKS

Bootstrap 5, Bulma o Tailwind CSS

.
 HERRAMIENTAS
LIBRERIAS

momentJS, Sweet Alert, Axios.

 HERRAMIENTAS
SERVIDORES

Live Server (VS Code), XAMPP , WampServer.

CONTENIDO DEL CURSO
 MÓDULOS DE TRABAJO
MÓDULO 0 - NIVELACIÓN

● CLASE 0 -
INTRODUCCIÓN A JS

MÓDULO 1 - CONCEPTOS BÁSICOS

● Clase 1 -
CONCEPTOS GENERALES: SINTAXIS Y VARIABLES
● Clase 2 -
CONTROL DE FLUJOS
● Clase 3 -
CICLOS/ITERACIONES
● Clase 4 -
FUNCIONES
 MÓDULOS DE TRABAJO
MÓDULO 2 - OBJETOS & ARRAYS
● Clase 5 -
OBJETOS
● Clase 6 -
ARRAYS
● Clase 7 -
FUNCIONES DE ORDEN SUPERIOR, MATH y DATE

MÓDULO 3 - FRONTEND

● Clase 8 -
DOM
● Clase 9 -
EVENTOS
● Clase 10 -
STORAGE Y JSON
● Clase 11-
Workshop I
 MÓDULOS DE TRABAJO
MÓDULO 4 - OPTIMIZACIÓN DE PROYECTO

● Clase 12 -
Operadores avanzados
● Clase 13 -
Librerías

MÓDULO 5 - ASINCRONÍA Y PETICIONES

● Clase 14-
Promises/ASync
● Clase 15 -
AJAX y Fetch
● Clase 16 -
Frameworks + Node JS
¿PREGUNTAS?
TE INVITAMOS A QUE COMPLEMENTES
LA CLASE CON LOS SIGUIENTES
CODERTIPS
VIDEOS Y PODCASTS

● Aprende Programación Web y construye el futuro de nuestra

humanidad | Coderhouse

● Desarrollo freelance | Coderhouse

● Desarrollo profesional | Coderhouse

VIDEOS Y PODCASTS
● CoderNews | Coderhouse

● Serie de Branding | Coderhouse

● Serie para Emprendedores | Coderhouse

● Serie Aprende a Usar TikTok | Coderhouse

● Serie Finanzas Personales | Coderhouse

● CoderConf | Coderhouse
¿YA CONOCES LOS BENEFICIOS QUE TIENES
POR SER ESTUDIANTE DE CODERHOUSE?
 BENEFICIOS
Haz clic aquí y conoce todos nuestros beneficios
exclusivos para estudiantes de Coderhouse.
 ¡MUCHAS GRACIAS!
Resumen de lo visto en clase hoy:
- Fundamentos de desarrollo con JS.
- Básicos de Javascript
- Nivelación
- Contenido del curso
OPINA Y VALORA ESTA CLASE
#DEMOCRATIZANDOLAEDUCACIÓN
¡GRACIAS POR ESTUDIAR CON
NOSOTROS!