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

Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

16D
6H
22M
59S

C贸mo declarar variables y usar prompt

7/84
Recursos

Estos dos procesos pueden ser muy 煤tiles cuando est谩s aprendiendo a programar.

C贸mo declarar variables en JavaScript

Sin complicarnos mucho, puedes declarar una variable en JavaScript escribiendo lo siguiente:

  1. La palabra reservada 鈥渓et鈥.
  2. El nombre que quieres para tu variable.
  3. El signo 鈥=鈥 para asignar un valor a ese nombre.
  4. El valor que quieres para la variable. Puede ser texto (strings), n煤meros, y otras cosas que aprender谩s si profundizas un poco m谩s en JavaScript.
let a = 1;

鈥淒eclarar una variable鈥 consiste en reservar un nombre en la memoria de la computadora y asignarle el valor que t煤 indiques.

En JavaScript (el lenguaje que entienden los navegadores de internet) hay varias formas de declarar una variable. Sin embargo, cuando estas empezando, puedes declarar variables con 鈥渓et鈥 sin mayor problema 馃憤

Uso de promt()

鈥淧rompt()鈥 es una funci贸n nativa del navegador. Cuando la usas, esta dispara una peque帽a ventana con el texto que indiques entre los par茅ntesis, d贸nde le pide al usuario que te entregue alguna informaci贸n. Por lo tanto, podemos usarla para obtener informaci贸n del usuario y usarla en otro lugar.

Ejemplo:

let nombre = "";
nombre = prompt("驴Cu谩l es tu nombre?");
alert(nombre + ", Bienvenido a Platzi :)");

Prueba a correr ese c贸digo en el navegador para que veas lo que ocurre, y animate a experimentar un poco con lo que aprendiste aqu铆 馃槉

Luego, pasa con confianza a la siguiente clase: Algoritmo de piedra, papel o tijera.

Contribuci贸n creada por: Jhonkar Sufia (Platzi Contributor).

Aportes 208

Preguntas 169

Ordenar por:

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

o inicia sesi贸n.

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

NO olviden divertirse mientras toman el curso
馃槉

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?? 馃挌

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>

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.

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>

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.

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

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

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

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

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

![](

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.

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鈥

馃ス 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 馃挌馃挌馃挌

Mi resumen en codigo

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <title>Mi pagina web</title>
    <script>
        let nombre = ""
        nombre = prompt("Cu谩l es tu nombre?")
        alert("Bienvenido/a " + nombre)

    </script>
  </head>
  <body>
    <h1>Como declarar variables y usar prompt</h1>
    <p>La palabra <strong>let</strong> se utiliza para declarar el nombre de la variable</p>
    <p>La funci贸n <strong>prompt</strong> nos permite pedir datos al usuario de en una forma de cagita de texto con alerta</p>
  </body>
</html>


隆Esta clase me ha desafiado bastante!
Les comparto mi pr谩ctica, la vi en los aportes y quise hacerla.
Los invito a intentarlo tambi茅n 馃榿

<html>
<head> 
	<meta charset="utf-8" />
		<title>Mi primera programada</title>
		<script>
		let nombre = ""
		nombre = prompt("Cu谩l es tu nombre?")
		
		apellido = ""
		apellido = prompt("Cu谩l es tu apellido?")
		alert("Bienvenida " + nombre + " " + apellido)
		a帽o = ""
		a帽o = prompt("Cu谩l es tu a帽o de nacimiento")
		alert("Soy " + nombre + " " + apellido + " y tengo " + (2022-a帽o) + " a帽os.")
		</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> 

Acepto feedback :3

Estoy empezando de ceros en este mundo y me parece fascinante鈥
Genial como explicas cada detalle Fredy.

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
Esta una chimba y se nota la calidad de edici贸n con respecto al primer curso gratis de programaci贸n

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

Que gran forma de explicar. Sencilla, Practica, Digerible. Estoy tan entusiasmado con esto!!

Clase siete terminada.

Tipos de Variables
(Programaci贸n) 馃捇






鈥斺 馃懢 鈥斺

STRING 馃挰
Un STRING o cadena de caracteres es un tipo de dato que se utiliza para almacenar textos, no es una variable primitiva como el el int, el bool o el float, sino que es un conjunto de variables primitivas tipo caracter.

Ejemplo: 鈥淛oseal es un tio muy cool鈥

鈥斺 馃懢 鈥斺

INT 鉂
Las variables de tipo entero o int聽son aquellas que almacenan un n煤mero (ya sea positivo o negativo) no decimal聽. Debido a que cuando creamos una variable reservamos memoria para ella, cada tipo de variable reservar谩 m谩s o menos memoria para representar el dato que almacenar谩n.

Ejemplo: 1, 2, 6, 90, 442, 1080

鈥斺 馃懢 鈥斺

FLOAT 釐
Las variables tipo punto flotante permiten representar datos que pertencecen al conjunto num茅rico de los n煤meros reales, as铆 que podemos usarla para representar n煤meros que tengan esa naturaleza, por ejemplo el peso, temperatura, volumen, altura.
Es de 32 bits, y sus decimale son de 6 d铆gitos

Ejemplo: 1.2, 4.56, 101.234, 5.563724

鈥斺 馃懢 鈥斺

DOUBLE 鈽勶笍

El tipo double es similar a float, pero se utiliza cuando la precisi贸n de una variable de coma flotante no es suficiente. Las variables declaradas como tipo double pueden contener aproximadamente el doble de d铆gitos significativos que las variables de tipo float.

Es de 64 bits, y sus decimale son de 12 d铆gitos

Ejemplo: 3.2, 4.56, 201.234, a.563724789542

鈥斺 馃懢 鈥斺

BOOLEAN 鉁

Las variables booleanas se almacenan como n煤meros de 16 bits (de 2 bytes), aunque solo pueden tener los valores True o False. Las variables booleanas se muestran como: True o False (cuando se usa Print ) o. #TRUE# o #FALSE# (cuando se usa Write #.

Es de 16 bits

Ejemplo: true, false

鈥斺 馃懢 鈥斺

Si te gusta este contenido, comenta, comparte, guarda y da like 馃挅

Diferencia entre let y var:

-Let evita que se sobrescriba nuevamente el valor una vez declarado en el c贸digo y si se realiza un console.log a dicha variable, no se autodeclara.
-Var fue antes la 煤nica variable que hab铆a en JavaScript, pero que debido al problema de que pueda sobrescribirse su valor y que si se realice un console.log a dicha variable se autodeclarara como undefined, en el EC6 se defini贸 los tipos de variable LET y CONST.

Este profesor Freddy es incre铆blemente claro鈥

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);

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

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

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.

Buenas con todas las ganas del mundo para aprender a programar y entrar a este mundo

Peque帽o aporte:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Mi primera pagina</title>
	<script>
		function myNombre(){
			let nombre = prompt("Ingresa tu nombre", "Harry Potter");
			if(nombre != null){
				document.getElementById('nombres').innerHTML="隆Hola "+nombre+"! 驴Como estas hoy?";
			}
		}
	</script>
</head>
<body>
	<h1>El objeto window</h1>
	<h2>El m茅todo prompt()</h2>
	<p >Haga click en el boton para ver aviso</p>
	<button type="button" onclick="myNombre()">Nombre</button>
	<p id="nombres"></p>
</body>
</html>

Nuevos aportes

C贸digo HTML

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Primera prueba Web para HTML</title>
        <meta name="description" content="Esta es mi primera prueba para HTML">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="apple-touch-icon" href="/apple-touch-icon.png">

        <!-- Enlace al CSS de mi primera Web -->
        <link rel="stylesheet" href="primer-css.css" type="text/css" media="screen" />
        <script type="text/javascript" src="primer-javascript.js">

        </script>
    </head>

    <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">
            You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve
            your experience.
            </p>
        <![endif]-->
        <h1>Hola mundo! Mi primer HTML/CSS</h1>
        <h2>Mi nombres es Jos茅 Maldonado</h2>
        <p>Esta es una prueba de HTML con un CSS personalizado usando una paleta de colores creada en Coolors.</p>

        <div id="video" class="video" >

        </div>

        <h2>Ejecutando mi primer Script</h2>

        <p>Presione el siguiente bot贸n para ejecutar el codigo del script (sumando a = 5 y b = 10)</p>
        <button onclick="invokeAddNum()">Ejecutar Script</button>

        <h2>Agregando entrada de datos a la funci贸n</h2>
        <p>En este caso el usuario debe entrar dos n煤meros y los sumaremos tomandolos del input</p>
        <p></p>
        <form method="" id="" action="">
            <label for="fnumber">Primer n煤mero</label>
            <input type="number" id="fnumber" name="fnumber" value="0" min="-9999" max="9999" />
            <label for="snumber">Segundo n煤mero</label>
            <input type="number" id="snumber" name="snumber" value="0" min="-9999" max="9999" />
        </form>
        <p></p>
        <button id="addUserNum" onclick="addUserNumbers()">Suma tus n煤meros!</button>
    </body>
</html>

CSS

body {
    color: #F3EFE00;
    background-color: black;
    font-family: "Inconsolata", "Courier New", Courier, monospace;
}

p,form {
    color: #F3EFE0;
    font-family: "Inconsolata", "Courier New", Courier, monospace;
}

h1 {
    color: #F3EFE0;
    font-size: 24pt;
    font-weight: bold;
    font-family: "Inconsolata", "Courier New", Courier, monospace;
}

h2 {
    color: #F3EFE0;
    font-size: 18pt;
    font-weight: bold;
    font-family: "Inconsolata", "Courier New", Courier, monospace;
}

 h3 {
    color: #F3EFE0;
    font-size: 14pt;
    font-weight: bold;
    font-family: "Inconsolata", "Courier New", Courier, monospace;
}

iframe {
    height: 480px;
}

.video {
    display: table;
    height: 480px;
    padding-left: 25%;
}

JavaScript

/*
 *  Funcion para invocar la suma desde el primer bot贸n de la web
 */
function invokeAddNum () {
  let a = 5;
  let b = 10;

  let sum = addNum(a,b);

  alert("La suma es de " + sum);
};


/*
 * Funci贸n para invocar la suma desde el segundo bot贸n de la web
 */
function addUserNumbers() {

  ///// Buscamos los elementos desde el DOM del HTML /////
  const btn = document.getElementById("addUserNum");

  //// En este caso el input es del tipo string, hacemos casting a enteros ////
  let a = parseInt(document.getElementById("fnumber").value);
  let b = parseInt(document.getElementById("snumber").value);
  let sum = addNum(a,b);

  alert("La suma de los n煤meros indicados por el usuario es: " + sum);
};


/*
 * Funci贸n para sumar dos n煤meros
 */
function addNum (a , b) {
  let sum = a + b;
  return sum;
};

Mientras escuchaba un poco de m煤sica, se me ocurri贸 esta idea para practicar, la dejo a continuaci贸n

<!DOCTYPE html>
   <html>
        <head>
            <meta charset="UTF-8"/>
                <title>METAL EN ESPA脩OL</title>

            <script>
                var nombre =""
                var personaje =""
                prompt ("驴C脷AL ES VUESTRO NOMBRE? " + nombre)
                prompt ("ESCOGE UN PERSONAJE: (1) DON QUIJOTE, (2) Sancho Panza (3) Dulcinea " )
                if (personaje == 1){alert ("ESCOGISTE A DON QUIJOTE")}
                else if (personaje == 2){alert ("ESCOGISTE A SANCHO PANZA")}
                else if (personaje == 3){alert("ESCOGISTE A DULCINEA")}    

            </script>
        </head>
        <body>
            <title>METAL EN ESPA脩OL</title>
            <h1>LA BATALLA CON LOS CUEROS DE VINO</h1>
            <p>Controlando al astuto idalgo, Don Quijote de la mancha
                deberas derrotar a los malvados gigantes
            </p>

        </body>    
   </html> 

Este plugin te ahorrar谩 mucho tiempo

Utiliza esta extensi贸n para que cuando est茅s trabajando con una tag puedas cambiar tanto la de apertura como de cierre. Por ejemplo, si tienes un H1 y quieres cambiarlo para que sea un P, no tendr谩s que modificar la de apertura y cierre, sino que solo cambiando el nombre de una de las dos, la otra cambia autom谩ticamente.
Esto adem谩s de ser muy 煤til tambi茅n te ahorrar谩 uno que otro bug un poco raro ;3

Let = declarar una variable para usara despu茅s
prompt = muestra una caja invasiva, obtiene un texto y lo reusa debajo con el alert para darte la bienvenida.

lo que mas me agrada es la simplicidad con que explican en especial el profe Fredy , hay q llegar a ese nivel .

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.

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

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

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.

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.

ahora si a programar de verdad

<html>
	<Head>
		<meta charset="utf-8" />
		<title>Mi primera programada</title>
		<script>
			let Nombre = ""
			Nombre = prompt("Cu谩l es tu nombre?")
			alert("bienvenido " + Nombre)
		</script>

	</Head>

<body>
	<h1>Primer intento de Webside</h1>
	<p>Este es nuestro primer programa completo y profesional</p>
	<p>Gran programa</p>

</body>
</html>

Cuando agregamos un** +** se llama concatenaci贸n.

La extensi贸n de los archivos si importa, ya que es este el medio por el que se identifica el tipo de texto o contenido del archivo

As铆 lo entend铆
*Declaro la variable 鈥淣ombre鈥
*luego necesito preguntar esa variable al usuario por eso hago un prompt con la pregunta 鈥渃ual es tu nombre鈥
*Doy una respuesta al usuario diciendo "bienvenido pepito

Variables

a = 1;
b = 2;

a y b son variables, las variables guardan alg煤n tipo de informaci贸n de cualquier tipo de dato (dato num茅rico, dato de texto string), se llaman variables porque su valor, es decir, lo que guardan, puede聽variar聽reasignando esa variable con otro valor, por ejemplo:

-a = 1; //pero en la pr贸xima l铆nea lo reasigno a 3
-a = 3; //Aqu铆 **vari贸** su valor de 1 a 3

Hola. Intento programar y no me salen los alert ni los let.
Esto es lo que escrib铆:
<html>
<head>
<meta charset=鈥渦tf-8鈥/>
<title>Mi primera programada</title>
<script>
let nombre=""
nombre=prompt(Cual es tu nombre?)
alert("Bienvenido "+nombre)
</script>
</head>
<body>
<h1>Primer intento de website</h1>
<p>Este es mi primer texto puesto en mi website</p>
<p>Gran programa</p>
</body>
</html>

He fallado en algo? Porque no me salen?

En javascript en especifico hay tres formas diferentes para declarar variables, estan: let, conts y var; la diferencia de estas 3 es el tipo de alcance que pueden llegar a tener dentro de su mismo ambito

En las varibles podemos guardar informaci贸n que podremos utilizar en nuestro programa

Prompt nos permite imprimir un mensaje donde el usuario puede ingresar una respuesta.

Es interesante la forma en que se usa el prompt para trabajar el funcionamiento de JS, es genial aveces volver a lo basico.

Traduciendo el c贸digo a ingl茅s

<html>
  <head>
    <meta charset="utf-8" />
    <title>My first time programming</title>
    <script>
      let name = "";
      name = prompt("What is your name?");
      alert("Welcome " + name);
    </script>
  </head>
  <body>
    <h1>First website attempt</h1>
    <p>This is our first complete and professional program</p>
    <p>Big program</p>
  </body>
</html>

estoy amando platzi 鉂わ笍 gracias

Clase 7

As铆 va mi pagina poco a poco 馃

Es incre铆ble como entre todos nos ayudamos, Freddy nos ense帽a y gu铆a, pero ver los aportes de todos termina siendo una ayuda y un complemento magn铆fico. 隆Mil gracias!

Me aparece todo junto bienvenidomario, no por separado, que puedo hacer.

Yo empec茅 el curso en ceros, as铆 literalmente, sin nada en el morral. Y como en unos meses empezar茅 a estudiar una ingenieria en sistemas , la verdad no quiero llegar sin nada de conocimientos a la carrera. Con 茅ste curso la neta estoy aprendiendo bastante, me siento contento, me siento muy feliz, pues es fin de semana y me quiero divertir鈥 gracias equipo Platzi

Programar es una cosa bien! Este curso te hace entender los tipos de datos la concatenaci贸n la asignaci贸n! Muy buen curso ! Nunca dejes de aprender y practicar!

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

en c++ es mas complicado con las variables ya que toca declarar si es entero (int) el numero o decimal (float o double) o cadena (string) pero en c++ no toca hacer todo eso

Freddy gracias tu manera de ense帽ar me motiva a aprender cada vez no quiero ni quitar la reproduccion autmatica de videos

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

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

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

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

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

Algunos recursos:

Que humilde al decir que son conceptos avanzados, por eso estudio en Platzi 馃槉

鈥淒eclarar una variable鈥 consiste en reservar un nombre en la memoria de la computadora y asignarle el valor que t煤 indiques.

La etiqueta let sirve para declarar variables, si es de texto luego de nombrar la variable se coloca = ""

yo tome cositas de la pagina.html y el piedra, papel o tijera y en la pagina.html yo lo hice de una pagina de preguntas y me gusto mucho el resultado gracias Freddy miren y perdon por poner un screenshot esque no sabia como hacerlo 馃檲

html>
<head>
<meta charset=鈥渦tf-8鈥 />
<title>Pagina de preguntas</title>
<script>
let nombre = ""
let a帽os = ""
let trabajas = ""
let trabajo = ""
nombre = prompt(鈥淐ual es tu nombre?鈥)
alert("Bienvenid@ " + nombre)
a帽os = prompt(鈥淐uantos a帽os tienes?鈥)
alert("Ya estas viej@ jajajaja tienes " + a帽os)
trabajas = prompt(鈥淭rabajas actualmente si o no?鈥)
if(trabajas == 鈥渟i鈥) {
trabajo = prompt(鈥測 en que trabajas?鈥)
alert("Que chevere que trabajes en " + trabajo)
} else if(trabajas == 鈥渘o鈥) {
alert(鈥淭ienes que conseguir uno jajajaja鈥)
}

</script>

</head>
<body>
<h1>Pagina de preguntas</h1>
<p>Te vas a divertir con este programa de preguntas</p>
<p>Gran programa</p>
</body>
</html>

let = nos sirve para declarar una variable
.
prompt = nos permite saber u obtener informaci贸n de una manera invasiva
.
alert = nos manda un mensaje dentro de una p谩gina

yo hace como 2 a帽os que empec茅 este curso y lo deje,
pero cuando volv铆 atodo cambi贸 XD

en la parte de <meta charset=鈥渦tf-8鈥 /> estaba escribiendo mal un caracter y esto no me mostraba las tildes, esto me demostr贸 que para programar se debe ser preciso en lo que escribimos, la programaci贸n son como las matem谩ticas, exactas

Cuando la variable es n煤mero, pues coloco un n煤mero, cuando es texto, siempre debo usar las comillas.

declarar variable --> reservar su nombre en memoria para luego usarla

let --> parabra reservada para variable javascript

prompt("") --> input javascript

Pero vean que cool ver mi nombre escrito por mi misma jeje

  • let: crea una variable para usarla despu茅s
  • prompt (): funci贸n que tiene como par谩metro un input.
<script>
            let nombre = "" // creamos una variable sin nada pero ya sabe que es tipo texto por los ""
            nombre = prompt("驴cu谩l es tu nombre?") // asignamos al nombre la funci贸n prompt que trae un input como parametro.
            alert("Welcome " + nombre) 
</script>

Genial!, poco a poco se va entendiendo 馃槂 gracias

Excelente la forma de explicar profe, thanks

隆Gracias por la explicaci贸n!

Recuerdo haber visto algo de JavaScript en la uni, pero la verdad nunca entend铆 como hacer nada en ese lenguaje. Y viendo que en HTML es necesario para programar las acciones e interacciones en el sitio, espero poder dominarlo un poco para ver qu茅 cosas puedo hacer con ello.

<let>

sirve para declarar una variable

<promp>

sirve para recolectar informacion del usuario