Fundamentos de Programación

1

Bienvenida a Platzi: ¿qué necesitas para tomar el curso?

2

¿Cómo aprender programación?

3

Crea tu primer sitio web

4

Sitios web con HTML

5

Estructura de árbol en HTML

6

Visual Studio Code

7

Cómo declarar variables y usar prompt

8

Algoritmo de piedra, papel o tijera

9

Algoritmo avanzado de piedra, papel o tijera

10

Aleatoriedad

11

Refactor del código usando funciones

12

Ciclos

13

Gana 3 veces

14

Archivos de HTML y JavaScript

15

¿Qué es el DOM?

Quiz: Fundamentos de Programación

Desarrollando un juego con HTML y JavaScript

16

Maquetación con HTML

17

Sección de elegir mascota

18

¿Dónde ubicar la etiqueta script? Conectando HTML con JavaScript

19

Escuchando eventos con JavaScript

20

addEventListener

21

Manipulación del DOM

22

Enemigos aleatorios

23

Ataques en JavaScript

24

Ataques aleatorios del enemigo

25

Imprimiendo ataques del enemigo

26

¿Ganaste, perdiste o empataste?

27

Tablas de verdad

28

Creando el contador de vidas

29

¿Quién ganó el juego?

30

Reiniciando el juego

31

Ocultando elementos HTML con JS para mejorar la UX del juego

Quiz: Desarrollando un juego con HTML y JavaScript

Estilos con CSS

32

Anatomía de CSS

33

Tipos de display

34

Flexbox

35

Modelo de caja

36

Imágenes para los Mokepones

37

Estilos del botón

38

Adaptando HTML al diseño del juego

39

Layout: título y ataques

40

Adaptando JavaScript al diseño del juego

41

CSS Grid

42

Responsive Design

43

Detalles finales

Quiz: Estilos con CSS

Optimización de código

44

Revisión de código

45

Don't repeat yourself (DRY)

46

Clases y objetos

47

Clases y objetos de Mokepon

48

Arrays o arreglos

49

Objetos vs. arreglos

50

Ciclos: manipulando el DOM con iteradores

51

Declaración lenta de variables

52

Una sola fuente de la verdad

53

Mascotas aleatorias con arreglos

54

Ataques dinámicos por cada mascota: extraer

55

Renderizado dinámico en HTML

56

Eventos de click dinámicos

57

Secuencia de ataques del enemigo

58

Iniciando el combate

59

Resolviendo el reto de condicionales

60

Optimizando el frontend del juego

Quiz: Optimización de código

Mapa con canvas

61

Introducción a canvas: dibujando con JavaScript

62

Moviendo a Capipepo hacia la derecha

63

Movimiento hacia todas las direcciones

64

Movimientos con el teclado

65

Imágenes y personajes de fondo

66

Métodos en las clases

67

Obstáculos y colisiones

68

Combate entre mokepones colisionados

69

Mapa responsive

70

Botones bonitos y viewport

Quiz: Mapa con canvas

Backend: videojuego multijugador

71

¿Qué es backend?

72

Instalación de Node.js y NPM

73

Terminal de comandos y Node.js

74

Servidor web con Express.js

75

HTTP, localhost, servidores y puertos

76

Express.js y fetch: API REST con JavaScript

77

JSON y POST: mokepon online

78

Transmisión de coordenadas

79

Mokepones dinámicos en el mapa

80

Optimizando el mapa del juego

81

Batalla entre jugadores

82

Consumiendo la API de ataques del enemigo

Quiz: Backend: videojuego multijugador

Próximos pasos

83

Probando el juego en varios dispositivos

84

¿Y ahora qué curso tomar?

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

¿Dónde ubicar la etiqueta script? Conectando HTML con JavaScript

18/84
Recursos

Aportes 49

Preguntas 36

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

El profe Juan David Castro, explica MUY BIEN. Tanto, que me divierto mucho aprendiendo con él. 😃

El atributo global id define un identificador único (ID) el cual no debe repetirse en todo el documento. Su propósito es identificar el elemento al vincularlo (usando un identificador de fragmento)

Asi se llaman los tipos de nombramientos de variables:
🐪 camelCase
🧮 PascalCase
🐍 snake_case
🍢 kebab-case

Defer, un atributo muy util al ejecutar el JavaScript

Otra forma de evitar que cargue JavaScript antes de que un elemento exista y nos de el error que se explica en el minuto 13:50 más o menos es el atributo “defer”

Ej:

<script defer src='./codigo.js'></script>

Es basicamente decirle al html algo como: "Oye, html"
HTML: “Dime, oh gran programador”.
Tú: "Aquí hay código en JavaScript que necesitamos ejecutar, pero necesito que primero cargues todos los elementos de html para que no haya problemas y cuando termines carga el JavaScript"
HTML: "Ok, dale 👍 "

Y así nos evitamos que JavaScript diga: “Necesito trabajar con un elemento que aún no existe”

Esto es tan útil que herramientas como Webpack al compiar TODO el proyecto lo hacen por default sin que nos enteremos 😁

mikapum, yo te elijo😎
![](

En Visual Studio Code pueden generar una nueva carpeta, usando el siguiente botón.

document.getElementById= 
Busca en HTML un elemento que se reconoce mediante su ID

.addEventListener = 
- Es un método.
- Llamamos a su función mediante los paréntesis.
- Decidir que evento queremos darle, en esta clase es el evento 'click'
- Para decirle a JS que hacer cuando se le hace click debemos
	1. Poner una coma para separar  un argumento de otro.	 
        2. Poner un nombre, en este caso es 		 
        "seleccionarMascotaJugador" (nombre de la función que queremos ejecutar)

¿Qué otros aportes podemos dar?

yo le cambie el nombre a los personajes

Eventos que podemos escuchar con:
addEventListener("")

  • blur = Cuando el elemento pierde el foco.
  • click = El usuario hace clic sobre el elemento.
  • dblclick = El usuario hace doble clic sobre el elemento.
  • focus = El elemento gana el foco.
  • keydown = El usuario presiona una tecla.
  • keypress = El usuario presiona una tecla y la mantiene pulsada.
  • keyup = El usuario libera la tecla.
  • load = El documento termina su carga.
  • mousedown = El usuario presiona el botón del ratón en un elemento.
  • mousemove = El usuario mueve el puntero del ratón sobre un elemento.
  • mouseout = El usuario mueve el puntero fuera de un elemento.
  • mouseover = El usuario mantiene el puntero sobre un elemento.
  • mouseup = El usuario libera el botón pulsado del ratón sobre un elemento.

Como Web-Devs La MDN será una de las fuentes de información más confiables y que más usaremos y como es de esperar hay unas sección dedicada a Eventos

funciona siuuuuuuuuu

Tambien tengo entendido que otra forma de llamar a los elementos es con un atributo clases:
class = “boton-mascotas”

Lograron hacer que el aprender programación sea divertido. Me está gustando mucho este curso básico.

No soy de escribir mucho ya que estoy aprendiendo recién.

Pero estoy muy feliz con este curso, estoy aprendiendo muchísimo de una buena vez ya que hace mucho quería aprender programación.

Amo la computación desde que soy un niño y esto era una tarea pendiente así que heme aquí. Aprendiendo. Gracias Chicos de Platzi y gracias Juan!

al profe Freddy me da ganas de saludarlo con un apreton de manos, pero a ti te quiero dar un abrazo jajajaj Buenisimo el como explicas Juan.

como odio las fallas en las letras jajajjajaja

Buen profesor! Muy enérgico , contagia mucho!

Les dejo un aporte muy bueno sobre los atributos _defer _y async en la etiqueta <script> de HTML:

Async-defer en JS

Así es como se aprende muchachos, haciendo. Después, se va puliendo con la conceptualización

Una opción que es compatible tanto para los Id y las Clases, es querySelector

ejemplo en ambos casos:

//ID
let botonMacotaJugador = document.querySelector('#boton-mascota');

//CLASE
let botonMacotaJugador = document.querySelector('.boton-mascota');

Que onda Juanda que te dieron hahahaha.

Llegue a ver tus primeras clases y digamos que a diferencias de estas… haz mejorado un monton.

Te felicito y muchas gracias por transmitir tus conocimientos.

Asignando el mismo valor en el atributo id de los inputs y el atributo for de sus labels correspondientes.

que buena clase y cuantas cosas que tengo que aprender

que buen profesor, no lo conocia y me ha gustado mucho como enseña, he aprendido muy rapido estas clases, gracias, tomare mas cursos de el,

me funciono siiiiiiiuuuuuu!!!

 <section id = "Reiniciar">
            <button id = "boton-reiniciar">Reiniciar</button>
        </section>
        <script src = "./js/mokepon.js"></script>
    </body>
</html>

esto me esta gustando

Vamos bien

function confirmarSeleccionJugador1() {
    alert('Has seleccionado tu Mokepon')
}

let botonSeleccionJugador1 = document.getElementById('boton-seleccion-jugador1')
    botonSeleccionJugador1.addEventListener('click', confirmarSeleccionJugador1)

En JavaScript usamos camelCase para colocar los nombres a las variables, funciones, etc.

Y esta es otra forma de colocar la funcion dentro del addEventListener():

let botonMascota = document.getElementById("btn-mascota");

botonMascota.addEventListener("click", function() {
    alert("seleccionaste mascota")
})

otra forma que también es simple es agregar una especie de atributo a la etiqueta “script” justo después del source que es “defer” esto cumple la misma función que poner lo al final de las etiquetas y que usar el eventListener onload que creo que es lo que va a hacer
ejemplo :

    <script src="./scripts/mokepon.js" defer></script>

Que buena clase

Este profe es tan genial que ni me di cuenta cuando habia pasado los 15 minutos 😆
Gracias Juan por hacer la clase divertida!

alguien me puede aydar con lo siguiente:

tengo este error: mokepon.js:3 Uncaught TypeError: Cannot read properties of null (reading ‘addEventListener’)
at iniciarJuego (mokepon.js:3:25)

Por aca dejo el codigo

function iniciarJuego() {
let botonMascotaJugador = document.getElementById(“boton-mascota”)
botonMascotaJugador.addEventListener(“click”,seleccionarMascotaJugador)
}

function seleccionarMascotaJugador() { alert(“seleccionaste tu mascota!”)

}

window.addEventListener(“load” , iniciarJuego)

gracias 😦

Juan David explica tan bien, que hasta mis 2 hijos están aprendiendo conmigo 😀

Um de los mejores profesores, excelente gracias profe Juan

hace ver muy fácil la programacion ! 😃

Me parece excelente todo lo que aporta este contenido 😬😬

Recuerden SIEMPRE guardar su código antes de ir a recargar la página 😅

Nunca me supieron decir en la universidad la diferencia entre poner name o poner id y el profe Juan David rapidamente me saco de duda! Excelentes clases con él! 😄

Genial, cualquier error nos puede hacer fallar nuestro código y es muy bueno darnos cuenta de nuestros errores.

¡¡A darle!! Me agrada tu forma de explicar. A seguir prácticando.

Que clase más genial, siento que hasta muy tarde a mis 27 años he comenzado en este mundo fascinante de la programación

escriban bien los metodos respetando las mayusculas y minusculas, sino no les va a funcionar…
botonMascotaJugador.addEventListener(‘click’,Seleccionar-MascotaJugador)

botonPokemonJugador.addEventListener(‘click’,seleccionarPokemonJugador)

Estoy aprendiendo desde el visual studio en mi teléfono. Pero no me deja crear archivo js. Se me cierra la app cuando intento crearla. Alguien a igual ?

El profe es my energico le gusta mucho lo que hace

En esta clase aún extraño a Freddy 😦 aprendo mejor con él.

También podemos hacer esto para agregar un Escuchador de eventos a un elemento del DOM:

let botonMascotaJugador = document.getElementById('boton-mascota').addEventListener('click', seleccionarMascotaJugador)

o Así:

let botonMascotaJugador = document.getElementById('boton-mascota')
    .addEventListener('click', seleccionarMascotaJugador)

Puede funcionar incluso sin guardarlo en la variable botonMascotaJugador:

document.getElementById('boton-mascota').addEventListener('click', seleccionarMascotaJugador)