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 “Bienvenida 10”? Te explico por qué pasa 👇.
.
En programación en general, existe un concepto chévere llamado “tipo 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 “pegar” ese “5 + 5” a nuestra cadena de texto que dice “Bienvenida” 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 →en 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 “Let”
  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 “Hola mamá ya sé programar “ “la calculadora del peso en otros planetas 🪐 “ “Pakiman ” y el “Arduinobot” 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(“Bienvenido, ¿Cuál es tu nombre?”);
let edad = ""
edad = prompt(“Bienvenido, ¿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(“String”) 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=“es”>
<head>
<!-- ATRIBUTO -->
<meta charset=“UTF-8”>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
<meta name=“viewport” content=“width= , initial-scale=1.0”>
<!-- ATRIBUTO -->
<title>PLATZY-HTML</title>
<link rel=“icon” href="./img/ico/games_01.ico" type=“image/x-icon” />
<script>
let nombre = “”;
nombre = prompt(‘Cual 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(“Hola bienvenido al test basico”)
alert(“Vamos a pedirle unos datos basicos”)
nombre = prompt(“Cual es su primer nombre?”)
apellido = prompt(“Cual es su primer apellido?”)
alert("Muy bien " + nombre + “, ya te hemos registrado”)
fraseMotivadora = prompt(“Cual 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 “var” 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 “bienvenida/o” para que diga bienvenido / bienvenida

muy bueno, nunca se deja de aprender…