Fundamentos de Programación

1

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

2

Programación en Navegadores: Primeros Pasos

3

Crea tu primer sitio web

4

Sitios web con HTML

5

Estructura de árbol en HTML

6

Instalando tu primer editor de código

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

Arrays o arreglos

48/84
Recursos

Seguro ya conoces los tipos de datos que puede tener una variable. Estos pueden ser cadenas de texto, números, booleanos, entre otros. Existe un tipo de dato llamado Array o arreglo que te permite agrupar N cantidad de valores, en una sola variable.

Tu primer array de datos

Los array son un tipo de dato que encontrarás en cualquier lenguaje de programación. Te permiten agrupar todos los valores que necesiten en una sola variable, agregar nuevos, quitarlos, reemplazarlos, entre otras acciones.

Para crear un arreglo en Javascript, utiliza los corchetes [], como si fuese una caja que guarda datos. Es buena práctica que la variable del tipo arreglo tenga su nombre en plural para indicar que dentro habrá una determinada cantidad de valores.

let mokepones = [];

Para agregar un nuevo elemento al array, tienes que utilizar la función push() que todos los arreglos poseen para “empujar” un nuevo valor dentro.

mokepones.push(hipodoge);
mokepones.push(capipepo);
mokepones.push(ratigueya);

O también puedes hacerlo en una sola línea de código.

mokepones.push(hipodoge, capipepo, ratigueya);

Los arrays también permiten extraer el último valor agregado al mismo con la función pop().

let mokepon = mokepones.pop();

Otra función también muy útil que tienes que conocer de los arreglos es length que retorna la cantidad de valores dentro del mismo.

console.log(mokepones.length);       // 3

Conocer la cantidad de datos dentro de un array te permitirá manipular la información y programar la lógica de tu aplicación con más precisión.

Conclusión

Los arrays son muy dinámicos, permiten hacer muchísimas cosas que explorarás poco a poco, como recorrer cada valor, filtrar datos, convertirlos, entre otras acciones. De momento ya conoces lo esencial para continuar con tu videojuego.


Contribución creada por: Kevin Fiorentino (Platzi Contributor)

Aportes 55

Preguntas 8

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Recuerden que nosotros los programadores contamos desde 0 🤣

Les dejo un pequeño cheatsheet de los métodos que puede tener un array

Consejo:
Si recién estás comenzando y te está costando un poco, trata de evitar leer los comentarios, hay algunos que tratan de aconsejar o brindar información más completa que lo que muestra el profesor y puede que te abrume. Solo escucha y aplica lo que se ve en la clase, tendrás mucho tiempo para ir conociendo más sobre la práctica y otros cursos de Platzi.

Corchetes cuadrados = Alt + 91

El truco esta en ver los arreglos como cajitas y la matrices como bodegas. 😶‍🌫️

arrays = son un tipo variable donde se pueden guardar diferentes valores de forma ilimitada, sin importar que sean números, letras, objetos

[] = simboliza cada uno de los valores dentro de un arreglo
Ejemplo; let = mokepones [ ]

.push() es un método que inyecta ciertas propiedades a una variable o arreglo.
Ejemplo: mokepones.push (hipodoge, capipepo, ratigueya)

Daily reminder: Los arrays siempre empiezan por el 0

En JavaScript, los arrays son objetos incorporados que tienen una serie de métodos integrados que pueden ser utilizados para manipular y trabajar con los elementos del array. Algunos de los métodos más comunes en los arrays de JavaScript son:
.

  • push(): Agrega uno o más elementos al final del array y devuelve la nueva longitud del array.
  • pop(): Elimina el último elemento del array y devuelve ese elemento.
  • shift(): Elimina el primer elemento del array y devuelve ese elemento.
  • unshift(): Agrega uno o más elementos al inicio del array y devuelve la nueva longitud del array.
  • splice(): Permite agregar, eliminar o reemplazar elementos en cualquier posición del array.
  • slice(): Devuelve una copia de una parte del array, especificando un rango de índices.
  • concat(): Combina dos o más arrays en uno solo y devuelve el nuevo array resultante.
  • indexOf(): Busca la posición del primer elemento que coincida con el valor especificado y devuelve el índice de ese elemento, o -1 si no se encuentra en el array.
  • lastIndexOf(): Busca la posición del último elemento que coincida con el valor especificado y devuelve el índice de ese elemento, o -1 si no se encuentra en el array.
  • forEach(): Ejecuta una función para cada elemento del array, sin devolver un nuevo array.
  • map(): Crea un nuevo array con los resultados de aplicar una función a cada elemento del array original.
  • filter(): Crea un nuevo array con los elementos del array original que cumplen con una condición dada.
    reduce(): Aplica una función acumulativa a cada elemento del array para reducirlo a un solo valor.
  • sort(): Ordena los elementos del array alfabéticamente o numéricamente, según el valor de los elementos.
  • reverse(): Invierte el orden de los elementos en el array.
    .

Estos son algunos de los métodos más comunes que se pueden usar con los arrays en JavaScript, pero hay muchos más disponibles. La documentación de JavaScript es una buena fuente para conocer más métodos y sus usos.

quien en el 2024 😁

Arrays o arreglos:

Es un tipo de variable donde se puede guardar varia información.

Debemos crear una variables para que se guarden nuestras variables donde esta la información, pero esta variable debe utilizar [ ] ya que es una variable de tipo arreglo

Ejemplo:

**let mokepones  = []** //En esta variable lo que buscamos es que se guarden hay nuestras variables que tiene la información //

**mokepones.push(hipodoge,capipepo,ratigueya)** // Acá lo que estamos indicando es que con la función **push** nos empuje dentro de la variable tipo array **mokepones** nuestras variables que tiene la información.

Asi lo entendi yo al igual les dejo aca una documentación donde pueden entender mas.

Esto de los Arrays es muy util, que suerte que podemos almazenar varios valores!!

Array:

En programación, un array o arreglo es una estructura de datos que permite almacenar y acceder a un conjunto de elementos del mismo tipo en una ubicación de memoria contigua.
.
Cada elemento del array tiene una posición única en el mismo y se puede acceder a él utilizando su índice. El índice de un array comienza en 0 y va hasta el número de elementos menos uno. Por ejemplo, un array con 5 elementos tendría índices de 0 a 4.
.
Los arrays son muy útiles en programación porque permiten trabajar con grandes cantidades de datos de manera eficiente y organizada. También son muy flexibles, lo que significa que pueden ser utilizados para resolver una amplia variedad de problemas.
.
En muchos lenguajes de programación, los arrays pueden ser inicializados con un tamaño fijo en el momento de su creación o pueden crecer o reducir dinámicamente durante la ejecución del programa. Además, los elementos de un array pueden ser de cualquier tipo de datos, como números, cadenas de texto, objetos, etc.

great.

Los comentarios y la clase me hicieron recordar que desde hace muchos años yo cuento la edad desde 0 si dicen tengo 30 años, yo les digo realmente estas viviendo tus 31 😅 se ponen atónitos pero es real 😁

No sabía que a los `array` se los llamaba *arreglos*, yo los conocía como *listas* porque, bueno, eran como una lista de cosas 🛒🧾🛍. Me parece súper útil saber diferentes formas de llamar a las cosas porque así puedo leer documentaciones diferentes y saber a qué se refieren 💫

Consejo: no pongan al profe De Granda en velocidad 0.5x, si no quieren verlo hablar con unos tragos de más… jajajaja

Me encanta cómo explica la funcionalidad de cada palabra con su traducción del inglés. Por primera vez estoy comprendiendo mucho más a fondo cada nueva línea de código 😄 No es lo mismo tener que imaginarse uno mismo lo que hace cada palabra nueva que se usa, pensando su traducción, en comparación a que Diego la traduzca, explique y dé un ejemplo cuando la usa por primera vez. En serio, gracias.

array --> variable que contiene diferentes valores y tipos de datos

nombre.push --> arrega un elemento a un array

Me encanta como el profesor Diego De Granda hace super sencillo entender estos temas! felicitaciones por ello @degranda10

Que increíbles clases esta dando el Don Diego!! Que fácil hace ver todo. En su momento si que me costo entender este tema de clases. Me hubiera encantado tener estas clases de Diego en su momento. Realmente, son ORO!!

Que buen profesor, explica lento y con pausa. De por si en lo que llevo del curso, todos me han gustado.

Recuerden nunca parar de aprender.

Cuando usamos arrays o arreglos podemos mandar a llamar todas los objetos con una variable como el arrays y yo no será necesario llamar a objeto por objeto,

array es una variable simbolizado con corchetes. ejemplo:

let mokepones = [ ]

Ademas los arreglos pueden guardar diferentes combinaciones de letras, objetos y diferentes tipos de mokepones xD

tip: cuando estamos programando siempre contamos de el numero cero 0.

Creí que "Arrays" tenía que ver con “Arrayán”. 😂🥲
WAZZAAA (TODOS ESCRIBAN WAZZAAA )
recuerda
lindo
basta!!!
obio nooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
Que genial el método push, pensé en un inicio que íbamos a definir la longitud del array e introducirlos uno a uno, Gracias Profe Diego
Porque en este punto, las imágenes de los personajes dejaron de aparecer?. Me da el error de "Failed to load resource: net::ERR\_FILE\_NOT\_FOUND". Ya verifique las rutas de las imagenes, escribirle su ruta absoluta, avancé hasta la clase 80 y el problema persiste.
Acorde a mis notas y palabras, la forma en la que yo explicaría esto si me preguntan "¿Qué es un arreglo?" sería: *Son una variable en la cual podemos almacenar diferentes valores, cuando se invoca esta variable nos entrega los valores que le asignamos previamente. También nos permite combinar letras, números y objetos.* *Esto es de mucha utilidad para dar mantenimientos y actualizaciones a nuestros objetos.* Jeje
wao bamos lejos :)

Gracias por la clase.

Un array es un conjunto de valores relacionados que se guardan en una sola variable

Me queda la pregunta de si ya el código estaba fucnionando, cual es el objeto de ingresarlos bichos en clases, mas como lo dice… ya veremos los beneficios

Arrays o Arreglos o Matrices o Vectores: es una forma de acumular la información de una manera organizada sin necesidad de tener extendernos mucho con variables y/o constantes.
Luego esa información, esos datos los podemos llamar cuando sea necesario.

Otro ejemplo:

Dios que buen profe, si bien lo había visto antes no me quedaba claro Class y el console.log es muy útil para ir de a poquito viendo que no se rompa todo, al ver ese ‘push’ solo pienso en GitHub y lo recuerdos de Vietnam vienen a mi!

Arreglos y luego aprender matrices 😛

Un arreglo o array es capaz de almacenar datos de muchos tipos como texto, numéricos, objetos, etc.

Definitivamente un arreglo nos arregla las cosas 😅

Un método de un arreglo es push(), que indica agregar un elemento al final de un arreglo.

📌 Los arrays nos permiten guardar varios valores/objetos en una misma variable

Por fin le entendí a los arrays 😃

Los array son un tipo de dato que encontrarás en cualquier lenguaje de programación. Te permiten agrupar todos los valores que necesiten en una sola variable, agregar nuevos, quitarlos, reemplazarlos, entre otras acciones.

Para crear un arreglo en Javascript, utiliza los corchetes [], como si fuese una caja que guarda datos. Es buena práctica que la variable del tipo arreglo tenga su nombre en plural para indicar que dentro habrá una determinada cantidad de valores.

let mokepones = [ ];

Los arreglos nos permiten dentro de una sola variable guardar diferentes tipos de valores (texto, números) para luego poder llamarlos y ejecutarlos.
.
Cada valor dentro del array va a tener un número asociado, recordemos que se comienza a contar desde el valor 0. Ejemplo:
.

  • var myArray = [1, 2, 3, 4];
  • var catNamesArray = [“Jacqueline”, “Sophia”, “Autumn”];

.
Información para complementar: https://developer.mozilla.org/es/docs/Glossary/array

Es interesante la forma en que se usa los listados para llamar objetos, es increible.

muy buena explicación.

Si directamente tipeamos por consola el nombre del array ya nos muestra que valores tiene, sin usar console.log

Arrays[✅]

El objeto Array de JavaScript es un objeto global que es usado en la construcción de arrays, que son objetos tipo lista de alto nivel.

hola, excelente expliacion del teme!!!