Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes:$349
$259
Currency
Antes:$349
Ahorras:$90
COMIENZA AHORA
Descubre la nueva versión: Fundamentos de JavaScript 2018. Estudia ahora
Fundamentos de JavaScript 2017

Clases del Fundamentos de JavaScript 2017

Instruido por:
Sacha Lifszyc
Sacha Lifszyc
Básico
9 horas de contenido
Fundamentos de JavaScript 2017

Fundamentos de JavaScript 2017

Progreso del curso:0/51contenidos(0%)

Contenido del Curso
Tutoriales de estudiantes
Preguntas de estudiantes

Progreso del curso:0/51contenidos(0%)

Estamos renovando el Curso de Fundamentos de Javascript

¡Nos estamos renovando!

00:33 min

Bases del lenguaje

Material Thumbnail

Bienvenido al curso

04:35 min

Material Thumbnail

Calcula el área de un triángulo. Creando funciones

11:53 min

Material Thumbnail

¿Quiénes pueden pasar a ver una película? Ejercicio con condicionales, expresiones y booleanos

13:40 min

Material Thumbnail

Inventar un idioma manipulando strings

24:32 min

Material Thumbnail

¿Cuántos kms corre una persona en promedio? Entendiendo el ciclo for

15:12 min

Material Thumbnail

¿Quién gana en una pelea: Gokú o Superman? Resolviendo este problema con ciclos while

13:58 min

Material Thumbnail

¿Cuánto tiempo pasó desde tu fecha de nacimiento?

12:00 min

Objetos en JavaScript

Material Thumbnail

Calcular la distancia entre dos puntos - Objetos en JavaScript

07:10 min

Material Thumbnail

Agrega métodos para mover los puntos - Objetos Avanzado en JavaScript

05:55 min

Material Thumbnail

Definiendo la clase Punto - Prototipos en JavaScript

13:24 min

Material Thumbnail

Definiendo la clase Punto - Object.create en JavaScript

05:29 min

Material Thumbnail

Definiendo la clase Punto - Class en JavaScript

06:39 min

Conocimientos intermedios

Material Thumbnail

Entiende el scope de las variables

14:05 min

Material Thumbnail

Operaciones con arrays

18:03 min

Material Thumbnail

Entiende los closures de JavaScript

10:17 min

Material Thumbnail

Estructura del lenguaje

14:00 min

¿Quién es this?

Material Thumbnail

This, _this y los arrow functions

13:49 min

ECMAScript 5, 2015, 2016, Babel y otros cuentos

Material Thumbnail

ECMAScript: El estándar en el que se basa JavaScript

08:15 min

Material Thumbnail

Babel al rescate: logrando la compatibilidad buscada

03:49 min

Material Thumbnail

Distintas formas de escribir módulos en JavaScript

12:03 min

Procesos asíncronos

Material Thumbnail

No generes un cuello de botella en el EventLoop

18:44 min

Material Thumbnail

Los callbacks de JavaScript

10:19 min

Material Thumbnail

Callback a un servidor externo

13:44 min

Material Thumbnail

Implementación de set timeout en JavaScript

06:33 min

Material Thumbnail

Implementación de set interval en JavaScript

09:51 min

Material Thumbnail

Cancelando el Timeout y el Timeinterval

08:51 min

Material Thumbnail

Qué son y cómo se implementan el callbacks en JavaScript

14:02 min

Material Thumbnail

Eliminando el callback hell usando promesas en JavaScript

24:49 min

Estructuras de datos y funciones avanzadas

Material Thumbnail

Funciones Recursivas

08:47 min

Material Thumbnail

Iteradores en JavaScript

10:53 min

Material Thumbnail

Generadores en JavaScript

08:23 min

Material Thumbnail

Estructuras de Datos Inmutables en JavaScript

10:10 min

Creando un paquete para NPM

Material Thumbnail

Requisitos Técnicos

07:19 min

Material Thumbnail

Creando nuestro paquete

13:31 min

Material Thumbnail

Escribiendo el código de nuestro paquete

12:47 min

Material Thumbnail

Testeando el paquete

12:07 min

Material Thumbnail

Publicando el paquete en NPM

07:50 min

Juego de HTML

Material Thumbnail

¿Qué vamos a construir?

02:43 min

Material Thumbnail

Inicializando el juego

19:42 min

Material Thumbnail

A una ronda le sigue otra ronda

18:08 min

Material Thumbnail

Añadir una librería

13:14 min

Desafíos

Material Thumbnail

Crear un modulo para convertir medidas de peso

00:52 min

Material Thumbnail

Crear un juego en HTML, tic tac toe

00:53 min

Material Thumbnail

Crear un tutorial

00:34 min

nuevosmás votadossin responder
Darwin Gómez Santamaría
Darwin Gómez Santamaría
Estudiante

function fibonacci(n) {
let serie = [];
a = 0;
b = 1;
c = 0;
for (let i = 0; i <= n; i++) {
c = a + b;
serie.push©;
a = b;
b = c;
}
return serie;
}
console.log(fibonacci(20));—

0
Raúl Yáñez
Raúl Yáñez
Estudiante

¿Actualmente deberíamos preferir siempre las arrow functions? ¿o hay ocasiones dónde es mejor usar las funciones tradicionales?

Gracias.

0
Marcelo Sebastián Núñez Arenas
Marcelo Sebastián Núñez Arenas
Estudiante
Cual es la diferencia entre"Fundamentos de JavaScript" y "Fundamentos de JavaScript 2017"?
15
Emerson Cedeño
Emerson Cedeño
Estudiante

mediante el uso de la opción de transpilar con Babel que ofrecen herramientas como Prepros (para Windows) se obtiene el mismo resultado, o hay alguna diferencia entre esta opción y una implementación propia?

1
tzalejo
tzalejo
Estudiante

Buenas noches, consulta hace poco que estoy en platzi y vi que hay cursos que están con un tono distinto a los otro curso, eso a que se debe? son cursos que se estan por lanzar? son mas actualizado ?
Gracias y saludos

2
Daniel Gomez
Daniel Gomez
Estudiante

Tengo problemas para entender un trozo de la linea de codigo
const reverse = (str) => str.split(’’).reverse().join(’’) = “Aqui lo que entiendo es que toma el string y utilizando ‘split’ lo divide y le coloca comillas simples luego con ‘reverse’ le da la vuelta y con ‘join’ lo une nuevamente”.

function minMay(str) { = se declara una funcion con nombre **minMay**
  const length = str.length = Se crea una constante llamada length y la variable str se cuentan los caracteres con length
  let translation = '' (se crea una variable llamada translation)
  let capitalize = true (Se crea otra variable booleana)

En esta parte no entiendo muy bien especificamente lo que esta en negrilla alguien podria ayudarme a entender.
Lo que entiendo es que capitalize es bolean y pregunta si translation es verdadero luego lo convierte ese caracter en mayúscula pero luego lo vuelve a convertir en minúsculas lo que no entiendo es que hace ** : ** entre toUpperCase y toLowerCase.

Podrían ayudarme a entender?
for (let i = 0; i < length; i++) {
const char = str.charAt(i)
** translation += capitalize ? char.toUpperCase() : char.toLowerCase()
capitalize = !capitalize**
}

1
juand_silva
juand_silva
Estudiante

Una duda. Cuál sería el equivalente a Promise.all()? con async/await

1
Carlos Francisco Betancourt Requena
Carlos Francisco Betancourt Requena
Estudiante

Hola Leonidas, pues ya llevo poco más de un día buscando la solución y doy…

En el ejercicio, se basa en preguntas, por ejemplo ¿Me voy a levantar? y hay 2 botones, uno para sí y otro para no, ya así para cada caso.

Lo que intento hacer es que cuando se le de clic al botón sí, entonces la promesa se cumple y se ejecuta el setTimeout y se muestra el mensaje correspondiente…

En ese mensaje que se muestra me gustaría que se viera así: Me estoy levantando, dame 3 segundos…

Y que los 3 segundos se vayan mostrando 3, 2,1 y 0 y cambie a la siguiente pregunta… espero ser claro.

Bueno, y para eso programe una función que recibe como parámetro un número y regresa el countdown desde ese número… al menos en la consola lo hace, por medio de console.log, la función es:

function contador(limite) {
      let count = limite;
      console.log(count);
      return setInterval(() => {
        count = count - 1;
        if (count >= 0) {
          // escribir dountador
          console.log(count);
        }
      }, 1000)
    }

El código completo está acá:

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

<head>
  <meta charset="UTF-8">
  <title>Callbacks</title>
  <style>
    .ocultar {
      display: none;
    }
  </style>
</head>

<body>

  <h1 id="agenda">Ya amaneció, ¿Me voy a levantar?</h1>

  <div id="botones">
    <button id="si">Sí</button>
    <button id="no">No</button>
  </div>

  <script>
    // Elementos del DOM
    const $agenda = document.getElementById('agenda');
    const $botones = document.getElementById('botones');
    const $botonSi = document.getElementById('si');
    const $botonNo = document.getElementById('no');

    // Constantes de tiempos
    const LEVANTARME = 3000;
    const DUCHA = 2000;
    const VESTIRSE = 2000;
    const DESAYUNAR = 2000;
    const PLATZI = 3000;

    // Declaración de funciones con promesas
    function despertar() {
      return new Promise((resolve, reject) => {
        $botonSi.addEventListener('click', () => {
          // contador(3)
          resolve('Me estoy levantando, dame ' + contador(3) + ' segundos...')
        })
        $botonNo.addEventListener('click', () => {
          reject('Estoy enfermo, no me voy a levantar :(')
        })
      })
    }

    function ducha(message) {
      // Ocultar botones
      $botones.classList.add('ocultar')
      // Mostrar mensaje de la función anterior
      $agenda.textContent = message;
      // Ejecutar la siguiente promesa con setTimeou
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          // Cambiar el mensaje
          $agenda.textContent = '¿Hay agua para bañarme?'
          // Mostramos botones
          $botones.classList.remove('ocultar')
          $botonSi.addEventListener('click', () => {
            resolve('Ahora me estoy bañando, dame 2 segundos...')
          })
          $botonNo.addEventListener('click', () => {
            reject('No me puedo bañar, me quedaré en casa...')
          })
        }, LEVANTARME)
      })
    }

    function vestirme(message) {
      // Ocultar botones
      $botones.classList.add('ocultar')
      // Mostrar mensaje de la función anterior
      $agenda.textContent = message;
      // Ejecutar la siguiente promesa con setTimeou
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          // Cambiar el mensaje
          $agenda.textContent = 'Tengo hambre, ¿Hay comida en la cocina?'
          // Mostramos botones
          $botones.classList.remove('ocultar')
          $botonSi.addEventListener('click', () => {
            resolve('Ahora estoy desayunando, dame 2 segudos...')
          })
          $botonNo.addEventListener('click', () => {
            reject('Iré a comprar comida...')
          })
        }, VESTIRSE)
      })
    }

    function desayunar(message) {
      // Ocultar botones
      $botones.classList.add('ocultar')
      // Mostrar mensaje de la función anterior
      $agenda.textContent = message;
      // Ejecutar la siguiente promesa con setTimeou
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          // Cambiar el mensaje
          $agenda.textContent = 'A estudiar en Platzi, ¿Hay Internet?'
          // Mostramos botones
          $botones.classList.remove('ocultar')
          $botonSi.addEventListener('click', () => {
            resolve('Ahora estoy estudiando, tararé 3 segundos...')
          })
          $botonNo.addEventListener('click', () => {
            reject('No hay Internet :(')
          })
        }, DESAYUNAR)
      })
    }

    function platzi(message) {
      // Ocultar botones
      $botones.classList.add('ocultar')
      // Mostrar mensaje de la función anterior
      $agenda.textContent = message;
      // Ejecutar la siguiente promesa con setTimeou
      setTimeout(() => {
        // Cambiar el mensaje
        $agenda.textContent = 'Después de estudiar mucho, ahora sé que mi lenguaje favorito es Javascript!'
      }, PLATZI)
    }

    function error(message) {
      $agenda.style.color = 'red';
      $agenda.textContent = message;
    }

    function contador(limite) {
      let count = limite;
      // $countdown.textContent = count;
      $agenda.insertAdjacentHTML('afterbegin', '<div id="countdown"></div>');
      let $countdown = document.getElementById('countdown');
      $countdown.textContent = count;
      return setInterval(() => {
        count = count - 1;
        if (count >= 0) {
          // escribir dountador
          $countdown.textContent = count;
          // console.log(count);
        }
      }, 1000)
    }

    despertar()
      .then(ducha)
      .then(vestirme)
      .then(desayunar)
      .then(platzi)
      .catch(error)

  </script>
</body>

</html>

Ojala alguien pueda darme una manita… saludos a todos!!!

1
Sebas20
Sebas20
Estudiante
Me gustaría saber quien mas esta haciendo el curso para poder colaborarnos, dos son mejor que uno.
2
Santiago Ricci
Santiago Ricci
Estudiante

Por qué nacimiento lo crea en milisegundos y próximo mostrando el día? No veo la diferencia si en ambas constantes usamos newDate()

1