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

C贸mo declarar variables y usar prompt

7/84
Recursos

Aportes 66

Preguntas 46

Ordenar por:

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

JavaScript a veces puede ser medio raro 馃

.
驴T煤 tambi茅n esperabas que el alert dijera 鈥淏ienvenida 10鈥? Te explico por qu茅 pasa 馃憞.
.
En programaci贸n en general, existe un concepto ch茅vere llamado 鈥渢ipo de dato鈥, por ahora hemos visto dos de ellos:
.

  • Cadenas de texto
  • N煤meros

.
Cuando le pedimos a un usuario que escriba algo desde cualquier campo de texto, JavaScript SIEMPRE va a tomar ese dato como una cadena de texto, no importa si el usuario escribe un n煤mero, para JavaScript eso es una cadena de texto 馃槃.
.
Entonces, una cosa curiosa es que JavaScript NO puede hacer operaciones matm谩ticas con cadenas de texto. Entonces, al toparse con que ese 鈥5 + 5鈥 es una cadena de texto pues JavaScript lo que hace es 鈥減egar鈥 ese 鈥5 + 5鈥 a nuestra cadena de texto que dice 鈥淏ienvenida鈥 porque ya sabes que esto es concatenaci贸n 馃憖.
.
Recuerda siempre esto: Cualquier cosa que un usuario escriba en un campo de texto en nuestra p谩gina web, para JavaScript, eso siempre va a ser una cadena de texto 馃槃.

La calidad entre el anterior curso de Programaci贸n b谩sica y este ha incrementado bastante!!! Muy recomendado que lo terminen se nota el esfuerzo de todo el Platzi Team 馃挌

驴Qui茅n m谩s esta emocionado y d谩ndose marat贸n con este curso renovado y buen铆simo de Platzi?? 馃挌

NO olviden divertirse mientras toman el curso
馃槉

Uno ejemplo de hueco de seguridad al que se refiere Freddy es que un atacante puede inyectar y sobrescribir cualquier funci贸n de JS como prompt

C贸mo hacerlo?

1. Copia y pega esto en la consola o tu archivo JS (b谩sicamente sobre escribes prompt con cualquier funcionalidad que desees)
	```
	const _prompt = window.prompt;
	window.prompt = function(p) {
  		const value = _prompt(p);
  		alert(`I intercepted ${value}`);
  		return value;
	}
	```
1. let nombre = "";
2. nombre = prompt("Cual estu nombre?")
3. Rellena el prompt
4. En cuanto mandes el prompt se ejecutara el c贸digo sobre escrito y veras el alert  `I intercepted X`
Cabe destacar que este ejemplo es un poco tonto pero recuerda que podemos poner cualquier c贸digo en ese prompt 

y c贸mo te `infectas`? 
Por ejemplo una extensi贸n maliciosa puede sobre escribir prompt por eso no debemos instalar extensiones al navegador que no sean confiables 

C贸mo declarar variables y usar prompt



Al declarar una variable se reserva el nombre de esta en la memoria para luego usarla en otros lugares de la aplicaci贸n.

  • let permite crear una variable para usarla despu茅s.
  • prompt muestra un di谩logo con un mensaje opcional solicitando al usuario que introduzca cierta informaci贸n.
	<script> 
	let nombre = "" //declara la variable nombre vac铆a de tipo texto
	nombre = prompt ("Cual es tu nombre") // pide introducir el nombre en pantalla y se almacena en la variable nombre
	alert ("Bienvenida " + nombre) // Muestra el mensaje de Bienvenida y el nombre introducido. 
	</script>

Las explicaciones de Freddy siempre son bastante claras lo malo que no hace muchos cursos 馃槮

MIS APUNTES CON MUCHO LOVE PARA T馃槑

  • Let nos permite crear una variable.
  • Cuando abres y cierras comillas, le dices al programa que la variable va a ser de texto.
  • prompt es la v铆a mas utilizada para enviar ordenes al sistema.

7 - C贸mo declarar variables y usar prompt

  • let nombre = ""Declara una variable: reservar el nombre de la variable en la memoria
  • prompt("Cual es tu nombre?:") 鈫 Pregunta el nombre (se parece al alert)
  • Para concatenar un texto con uan variable se usa 鈫 +

<aside>
馃挕 Caso de uso 鈫抏n vez de ingresar nombre ingresar una suma 鈥5+5鈥
Resultado 鈫 dispara un alert con el 鈥5+5鈥

  • Por defecto esto viene como STRING, para hacer un calculo se debe convertir a numero.
    de hecho esto es un hueco de seguridad

</aside>

<html>
<head>
		<title>Titulo de la pagina</title>
		<script>
            // Declarar una variable
            let nombre = ""
            // Dispara una alert preguntando nombre
            // y guardarlo en la variable "nombre" 
            nombre = prompt("Cual es tu nombre?:")
            // alert que concatena el nombre con un texto de bienvenida
            alert("Bienvenido " + nombre)
		</script> 
</head>
<body>
		<h1>Esto es un texto grande</h1>
		<p>Esto es un parrafo</p>
</body>
</html>

Usar alert() o prompt() es genial cuando aprendemos. Pero en el futuro casi no lo usaremos. Lo que s铆 usaremos es (y es un spoiler) console.log() y ser谩 de nuestros mejores amigos cuando estamos realizando p谩ginas web y verificando el c贸digo javascript.

En JavaScript, para poder usar un espacio en memoria y ponerle un nombre a ese espacio y un contenido dentro, debes reservarlo primero. Para eso usas alguna de estas palabras: var, let, o const. Cada una de estas palabras es para manejar el espacio/variable en memoria de una forma diferente. Por ejemplo, const la usamos para reservar un espacio cuyo contenido no pueda ser cambiado. Lo que se guarde all铆 no podr谩 ser distinto nunca.

Si quiero guardar mi edad en un espacio en memoria, lo hago as铆: var mi_edad = 28 pero no siempre tendr茅 28 a帽os, por eso uso la palabra var, con ella no tendr茅 problemas cuando quiera cambiar 28 por 29. Pero si en un espacio quisiera guardar PI, har铆a as铆 const PI = 13.1415 como PI siempre valdr谩 lo mismo y jam谩s deber铆a cambiar, entonces reservamos este espacio con const que significa que su valor es constante, que no cambiar谩.
let es muy parecido a var. Y lo mejor es que sepas sus diferencias mientras avances en tu aprendizaje de JavaScript.

Aspectos importantes a repasar en esta clase:

  1. Para declarar una variable 鈥淟et鈥
  2. Para un cuadro de di谩logo que nos permita saber y obtener un texto: Prompt
  3. Recuerda, tenemos cadena de texto y n煤meros, cuando usamos los 2 se forma una= Concatenaci贸n

*Mundo de la programaci贸n, ag谩rrate :3
**Deje su like, se帽or o se帽orita

En casi 4 minutos explico javascript de una manera tan sencilla que lo entendi mejor que en el curso basico.

Estuve 40min buscando el error pq se rompi贸 el c贸digo. Y Era la comilla

Puedes declarar muchos tipos de variables diferentes pero al declararlas lo puedes hacer de muchas formas, iniciando

var variable = "variable" // Variable de uso global

o tambi茅n como:

let variable = "variable" //Variable de uso local

o tambi茅n como:

const variable = "nunca cambiare" //Variable de uso constante 

Uso practico para entender el tipo de declaraci贸n let y como usarla localmente:

let x = 1;

if (x === 1) {
  let x = 2;

  alert(x);
  // resultado de alerta esperada: 2
}

alert(x);
  // resultado de alerta esperada: 1

Definitivamente Freddy Vega es el mejor maestro de programaci贸n. Siempre le entiendo tan claro y lo hace ver sencillo.

Actualmente la computadora necesita que seamos muy espec铆ficos para que nos entienda, esto es un principio del 脕lgebra. Por ejemplo:
alert no es igual que Alert

Por esa raz贸n 5+5 no es una suma hasta que no le digamos a la computadora que 5 es un n煤mero y que + es el operador suma

馃ス Recordando 茅l anterior curso de programaci贸n b谩sica 鈥淗ola mam谩 ya s茅 programar 鈥 鈥渓a calculadora del peso en otros planetas 馃獝 鈥 鈥淧akiman 鈥 y el 鈥淎rduinobot鈥 Awww me encantan estos cursos 馃挌馃挌馃挌

Ya de negativa pens茅 que se har铆a pesado y m谩ximo pensaba ver 5 clases, ahora creo que llego a diez. Para asimilar, repasar y seguir ma帽ana. Sin prisa pero sin pausa.

Estuve 5 min revisando que se hab铆a roto en mi c贸digo; b谩sicamente el 鈥=鈥 lo hab铆a colocado as铆: nombre prompt =("驴Cu谩l es tu nombre?") en vez de as铆: nombre = prompt("驴Cu谩l es tu nombre?") //definitivamente esto me sirve para poner m谩s atenci贸n a los detalles.

Acabe esta clase y me puse a practicar, para que me apareciera la ventana preguntando nombre, lo escribo, otra ventana preguntando apellido, lo escribo, otra ventana preguntando el a帽o, lo escribo y que al final el alert me diga Bienvenido y aparece nombre, apellido y la edad que tengo, porque le puse que haga la resta del a帽o actual menos el que uno le escribe
alert("Bienvenido " + nombre + " " + apellido + " " + "tienes " + (2022 - a帽o))
vamos bien 馃槃

Francisca xd

Buenas noches, estoy muy contento y agradecido por los conocimientos que estoy adquiriendo en este plataforma, la forma que explica el profesor Freddy para mi es muy entendible, estaba en otra plataforma y la verdad era muy dificil espero me ayuden soy nuevo en este tema pero me gusta mucho, espero algun dia llegar a programar

隆Hasta ahora me ha encantado todo! Estoy muy emocionado la verdad. Un poco m谩s lento porque no uso Windows sino Linux Ubuntu, y tuve que buscar las adaptaciones para Linux, pero feliz de entender los dos entornos.

Quise probar con algo m谩s y logr茅 esto:

let usuario = ""
usuario = prompt(鈥淏ienvenido, 驴Cu谩l es tu nombre?鈥);
let edad = ""
edad = prompt(鈥淏ienvenido, 驴Cual es tu edad?鈥)
alert("Bienvenido " + usuario + " , tu edad es " + edad);

Aquivamos. a tu ritmo鈥 cada quien lleva un ritmo鈥 solo intenta no pasar de clases si no estas empapado en esta. no tiene ninguna utilidad llegar al final si no entendistes鈥 cada quien tiene su tiempo鈥

el c贸digo que da funcionalidad al html va en el script

ahora si a programar de verdad

Uno puede reservar el nombre de la variables en la memoria para luego usarla en otras partes de la p谩gina que se esta dise帽ando.

  • let --> Permite crear una variable para usarla despu茅s.
  • prompt --> Permite saber y obtener un texto de forma invasive.
  • Al abrir y cerrar comillas lo que se indica es que dicha variable va a ser de tipo texto o string.
  • Si declaro una variable la cual va a tener un prompt, lo que est谩 va a hacer es es que lo que se escriba dentro del prompt, va a quedar guardado en la variable nombre.

C贸mo declarar variables y usar prompt

  • Declara variable con la palabra reservada let nombre
  • Asignamos el valor de nombre al prompt
  • Concatenamos mensaje de bienvenida con el valor de nombre
<<script>
    let nombre = " "
    nombre = prompt ("驴Cual es tu nombre?")
    alert("Bienvenido " + nombre)
</script>> 

![](
![](

![](

Excelente profesor 馃憤

Programaci贸n se trata de ser muy descriptivo y ser claro

let : Nos permite declarar una variable para usarla despu茅s.

prompt: Nos permite capturar datos de una manera invasiva , por medio de una caja.

Les comparto mis notas de clase, por ahora estan en construcci贸n mientras voy avanzando!

Enjoy

prompt(): es un m茅todo del objeto window de JavaScript que se usa para mostrar un cuadro de di谩logo con un mensaje que solicita al usuario que ingrese alg煤n texto.

隆隆Excelente explicaci贸n!! A darle con todo.

la verdad ya soy programador intermedio pero me costo mucho aprender y veo este curso que explica de una menera muy chevere los felicito de verdad

Esta una chimba y se nota la calidad de edici贸n con respecto al primer curso gratis de programaci贸n

Conceptos nuevos pero bastante utiles, es repasar y volver a repasar los videos para que quede m谩s claro

la pedagogia de los profesores de platzi es increible ,viendo este curso con la misma ilusion que el primero 鉂わ笍

Comenzamos a programar de verdad 馃殌
Muy emocionante!

let nos permite crear una variable para usarla despu茅s

Si abro y cierro comillas as铆: 鈥溾 le estoy diciendo que la variable va a ser un texto y no tiene nada por dentro

promt nos permite saber y obtener un texto a trav茅s de una caja

wow incre铆ble Todo Este tema de la programaci贸n !!

Lo que aprend铆 hoy es que:
.
let me permite cargar una variable que despu茅s puedo utilizar.
.
prompt me permite poder obtener un texto, pero de manera robusta, y que tambi茅n se puede reutilizar en una variable.
.

El est谩ndar utf-8 permite agregar tildes, 帽 y caracteres especiales y se coloca en el <head>

<head>
<meta charset = "utf-8 />
</head> 

El promt nos muestra un cuadro de di谩logo con un mensaje opcional solicitando al usuario que introduzca cierta informaci贸n.

El let nos permite declarar una variable para usarla luego.

Muchas gracias profe. Freddy, excelentes tutoriales. Estoy aprendiendo a programar.

Me gusta mucho la forma en la que Freddy nos explica y adem谩s nos alienta, lo digo por la frase final de la clase. Muchas gracias

驴C贸mo se declara una variable?
.
let nos permite crear una nueva variable, lo que hacemos es reservarla en la memoria para usarla despu茅s (en este caso la variable declarada es nombre).

let nombre = "" 

Nota: cuando se abren comillas y se cierran inmediatamente, se esta indicando al procesador que la variable va a tener un texto pero que por el momento se encuentra vac铆a.
.
prompt es una alternativa que nos permite capturar textos, al establecer que nombre = prompt, el texto capturado ser谩 guardado en nuestra variable . La cadena de texto 驴Cu谩l es tu nombre? nos servir谩 para especificar la informaci贸n que estamos solicitando.

nombre = prompt("驴Cu谩l es tu nombre?")

Nota: los datos capturados en un prompt son, por defecto, cadenas de texto.
.
A continuaci贸n, y para mostrar que efectivamente hemos capturado el texto, disparamos un alert.

alert("Bienvenida " + nombre)

El resultado en concreto de las l铆neas de c贸digo escritas en esta sesi贸n se ven as铆:

<script>
	let nombre = ""
	nombre = prompt("驴Cu谩l es tu nombre?")
	alert("Bienvenida " + nombre)
	</script>
  • let Permite declarar una variable para usarla despu茅s

  • prompt Permite saber y obtener texto de manera invasiva

  • alert(鈥淪tring鈥)聽method displays an alert box with a message and an OK button. Method is used when you want information to come through to the user.

creo que dejar茅 este curso, estoy en la 7ma clase y hasta ahora no me aparece esa ventana emergente que explica este profe. HELP!!!

Excelente curso, lo hacen ver de una manera practica

Fue tan buena la introduccion que ni me di cuenta que ya estaba programando en JS 馃槑馃挌

Exelente clase profesor鈥 馃槂

Recuerda: La informaci贸n que coloque el usuario en esa caja de texto, este valor ser谩 de tipo String, no hay ning煤n problema mientras necesites un tipo de dato String, pero si necesitas una dato de tipo n煤mero, este valor se pasar铆a como String entonces, lo que tenemos que hacer es cambiar ese tipo de valor String a Number.

Es incre铆ble que lo que me tomo d铆as aprender en clase lo aprenda con Freddy en una hora, definitivamente Platzi es otro nivel. Muchas gracias.

Espero poder terminar este curso en este mes.
Lo estoy iniciando s谩bado 6 de agosto 鉂わ笍

**let **- permite declarar una variable para usarla despu茅s
prompt - permite saber y obtener un texto

<!DOCTYPE html>
<html lang=鈥渆s鈥>
<head>
<!-- ATRIBUTO -->
<meta charset=鈥淯TF-8鈥>
<meta http-equiv=鈥淴-UA-Compatible鈥 content=鈥淚E=edge鈥>
<meta name=鈥渧iewport鈥 content=鈥渨idth= , initial-scale=1.0鈥>
<!-- ATRIBUTO -->
<title>PLATZY-HTML</title>
<link rel=鈥渋con鈥 href="./img/ico/games_01.ico" type=鈥渋mage/x-icon鈥 />
<script>
let nombre = 鈥溾;
nombre = prompt(鈥楥ual es tu nombre?鈥);
alert('Bienvenido 鈥 + 鈥:鈥+ 鈥 鈥 + nombre);
</script>
</head>
<body>
<h1>Primer intento de website</h1>
<p>Este es nuestro primer programa completo y profesional</p>
<p>Gran Programa</p>

</body>
</html>

Notita importante

Java es un lenguaje para servidores, aplicaciones de escritorio y aplicaciones Android

JavaScript es el lenguaje de la web, servidores, robots, etc.

Un peque帽o aporte en la practica de esa clase, pd: No se como pegar im谩genes 馃槮

<script>
let nombre = ""
let apellido = ""
let fraseMotivadora = ""
alert(鈥淗ola bienvenido al test basico鈥)
alert(鈥淰amos a pedirle unos datos basicos鈥)
nombre = prompt(鈥淐ual es su primer nombre?鈥)
apellido = prompt(鈥淐ual es su primer apellido?鈥)
alert("Muy bien " + nombre + 鈥, ya te hemos registrado鈥)
fraseMotivadora = prompt(鈥淐ual es su frase que lo motiva a seguir?鈥)
alert("La frase de " + nombre + " es: " + apellido + " " + fraseMotivadora)
</script>

que bueno que ya empezemos con JS

let te permite declarar variables limitando su alcance al bloque donde se est谩 usando, a diferencia de la palabra clave 鈥渧ar鈥 la cual define una variable global o local en una funci贸n sin importar el 谩mbito del bloque.

Quiero compartir con todos ustedes un proyecto dise帽ado y programado por m铆, es una Documentaci贸n T茅cnica de HTML5. Donde explico con teor铆as y con ejemplos el lenguaje de HTML. Espero que sea de mucha utilidad y de mucho inter茅s. 馃挌 documentacion-html5.tech

NOTA: Si no funciona d谩ndole clic escr铆belo manual en el buscador del navegador.

Hice esto en 鈥渂ienvenida/o鈥 para que diga bienvenido / bienvenida

muy bueno, nunca se deja de aprender鈥