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

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 鈥渆mpujar鈥 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 47

Preguntas 7

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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.

Los arrays son objetos similares a una lista cuyo prototipo proporciona m茅todos para efectuar operaciones de recorrido y de mutaci贸n. Tanto la longitud como el tipo de los elementos de un array son variables.馃槉馃槉馃槉

Por ac谩 les dejo mi aporte de array methods

El profe:

El truco esta en ver los arreglos como cajitas y la matrices como bodegas. 馃樁鈥嶐煂笍

Corchetes cuadrados = Alt + 91

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

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 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.

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.

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

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 馃榿

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.

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 鈥榩ush鈥 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 = [鈥淛acqueline鈥, 鈥淪ophia鈥, 鈥淎utumn鈥漖;

.
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!!!