Introducción a JavaScript
¿Por qué aprender JavaScript?
¡Hola Mundo! en Mac
¡Hola Mundo! en Windows
Anatomía de una variable
Tipos de datos en JavaScript
Creación de strings
Operadores aritméticos
Conversión de tipos: Type Casting y Coerción
Conversión de tipos explícita e implícita
Estructuras de Control y Lógica
Operadores de comparación
Operadores lógicos
Ejecución condicional: if
Ejercicio: Adivina el número
Ejecución condicional: switch
Loop: for
Loop: for of
Loop: for in
Loop: while
Loop: do while
Funciones y This
Anatomía de una función
Funciones vs Métodos
Funciones puras e impuras
Arrow function y enlace léxico
Contextos de ejecución y scope chain
¿Qué es Closure?
Preguntas a Desarrolladores Senior: ¿Por qué aprender Desarrollo Web?
Manipulación de Arrays
Introducción a Arrays
Mutabilidad e inmutabilidad de Arrays
Modificación básica del final con push( ), pop( )
Iteración con map( ) y forEach( )
Filtrado y reducción con filter( ) y reduce( )
Búsqueda de elementos con find( ) y findIndex( )
Crear copias con slice( )
Spread operator: casos de uso
Programación Orientada a Objetos
Anatomía de un Objeto
Trabajando con objetos en JavaScript
Función constructora
¿Qué es una clase?
Prototipos y herencias
Herencia en la práctica
Prototipos en la práctica
this en JavaScript
Proyecto: Crea una red social
Proyecto: Crea una red social parte 2
Asincronía en JavaScript
¿Cómo funciona el JavaScript Engine?
Promesas en JavaScript
Usando Async y await en JavaScript
For await of
¿Cómo funciona la web?
¿Cómo funciona HTTP?
Método GET en JavaScript
Método POST en JavaScript
Método DELETE en JavaScript
Importancia del id en el método DELETE
ECMAScript 6 y tus siguientes pasos
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Ejercicio: Adivina el número
13/55Recursos
Aportes 35
Preguntas 3
Ordenar por:
Revisar el contenido de este vídeo, usaron conceptos no explicados. un poco enredado en la explicación.
**Aca mi version!!**
Le hice algunos cambios, le agregue html y css para que se vea mejor y en vez de que sea del 1 al 10, ahora es hasta el 100.
**CODE:**
```js
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adivina el Número!</title>
<style>
:root {
--Azul-oscuro: #282185;
--Amarillo-anaranjado: #fcba3e;
--Blanco: #f8f7f9;
--Azul: #2f2692;
--Marrón-claro: #9b8278;
}
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
display: grid;
place-items: center;
background-color: var(--Azul-oscuro);
}
#game {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid var(--Amarillo-anaranjado);
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-color: var(--Azul);
color: var(--Blanco);
}
input[type="number"] {
width: 50px;
padding: 5px;
margin-right: 10px;
}
input[type="button"] {
padding: 5px 10px;
}
#message {
margin-top: 20px;
}
</style>
</head>
<body>
<script>
let randomNumber = Math.floor(Math.random() * 100) + 1;
let attempts = 0;
function checkGuess() {
let userGuess = document.getElementById('guess').value;
let message = document.getElementById('message');
attempts++;
if (userGuess == randomNumber) {
message.textContent = `¡Felicidades! Adivinaste el número en ${attempts} intentos.`;
message.style.color = 'green';
resetGame();
} else if (userGuess > randomNumber) {
message.textContent = 'Tu suposición es demasiado alta.';
message.style.color = 'red';
} else if (userGuess < randomNumber) {
message.textContent = 'Tu suposición es demasiado baja.';
message.style.color = 'red';
}
}
function resetGame() {
randomNumber = Math.floor(Math.random() * 100) + 1;
attempts = 0;
}
</script>
</body>
</html>
```
Adivina el Número
Adivina un número entre 1 y 100
<label for="game"> <input type="number" id="guess" min="1" max="100"> <input type="button" value="Guess!" onclick="checkGuess()"> </label>
No entiendo porque usar una consola aparte en vez de la consola de VSC como veníamos con Estefany :(
Mi mini juego 🎉
¿Pero que pasó acá? Primero una clase que no tiene contexto de nada y después veo en los comentarios gente con juegos de la clase super bonitos. Estamos en la clase 12 de fundamentos. ¿A que hora aprendieron a hacer eso? Más perdido que la mamá de José Miel.
Si estoy tomando el curso de fundamentos de javascript, no entiendo como de la clase 11 a esta que es la 12 tengo otro profesor y se saltaron un montón de detalles he perdido el hilo del aprendizaje.
Sería lindo que explicarán para sirve cada función, se que ya hay un bagaje pero se entendería mejor la clase, y no toma mucho tiempo.
Si se ejecuta Math.random() solo se genera un numero cero mas decimales ej: 0.15, 0.30 por eso se multiplica por 10 para que de numeros entre el 0 y el 9. Pero como el rango requerido es entre 1 al 10 por eso se le suma 1. Por otro lado Math.floor en términos matemáticos, "floor" se refiere a la función que redondea un número hacia abajo al entero más cercano. Por eso se puede utilizar juntos Math.floor(Math.random() \* 10 + 1)
Me parece que falta mas organización en esa explicación
\\<html lang="en">
\<head> \<meta charset="UTF-8"> \<meta name="viewport" content="width=device-width, initial-scale=1.0"> \<script src="https://cdn.tailwindcss.com">\</script> \<title>Juego secreto\</title>\</head>
\<body> \<section class=" mx-auto max-w-screen-xl px-4 py-32 sm:px-6 lg:flex lg:h-screen lg:items-center lg:px-8"> \
\<h1 class="text-3xl font-extrabold sm:text-5xl"> Bienvenido al juego de:
\Adivina El numero\ \
\
\</section> \<script src="./numero-secreto.js">\</script>\</body>
\</html>
const numeroSecreto = Math.floor(Math.random() \* 15) + 1;const submitBoton = document.querySelector('#boton-s');const resultado = document.querySelector('#resultado');const numeroToAdivinar = document.querySelector('#numero-a-adivinar')const tuNumero = document.querySelector('#tu-numero')
function validacionNumero(numeroJugador) { return numeroJugador === numeroSecreto;}
submitBoton.addEventListener("click", function (e) { e.preventDefault(); *// Prevenimos que se refresque la pantalla* const numeroJugador = parseInt(document.querySelector('#number-input').value, 10); const esCorrecto = validacionNumero(numeroJugador); numeroToAdivinar.innerText = `Numero a Adivinar: ${numeroSecreto}` tuNumero.innerText = `Tu numero Es: ${numeroJugador}` if (esCorrecto) { resultado.innerText = '¡Adivinaste!!!!!!'; } else { resultado.innerText = 'Perdiste animal'; };});Se trata de adivinar el numero que tiene la computadora selecciona un numero entre el \1-15\ \
\ \<form class="mx-auto"> \<input id="number-input" type="number" min="1" max="15" class="mb-3 border-2" required> \<button id="boton-s" class="block w-full rounded bg-rose-600 mx-auto px-12 py-3 text-sm font-medium text-white shadow hover:bg-rose-700 focus:outline-none focus:ring active:bg-rose-500 sm:w-auto" type="submit"> Adivinar \</button> \</form>
\
\\
\\
\\
\Les muestro el proyecto con el cual trabajaré para este curso y el de DOM. Un ToDo List para aplicar todo lo que iré aprendiendo. Vamos con todo !! 💚
```html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ultimate js</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="app.js"></script>
</body>
</html>
```f```js
``````css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f4f4f9;
}
.box {
width: 300px;
padding: 20px;
border: 2px solid #333;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}
.box h1 {
margin-top: 0;
font-size: 24px;
}
.box p {
margin: 10px 0;
}
.box label {
display: block;
margin-bottom: 10px;
}
.box input[type="number"] {
width: 100%;
padding: 8px;
margin-top: 5px;
box-sizing: border-box;
}
.box input[type="button"] {
width: 100%;
padding: 10px;
margin-top: 10px;
background-color: #007bff;
border: none;
color: white;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
.box input[type="button"]:hover {
background-color: #0056b3;
}
#message {
margin-top: 20px;
font-size: 18px;
color: #333;
}
``````js
function checkGuess() {
var guess = document.getElementById('guess').value;
var message = document.getElementById('message');
if (guess >= 1 && guess <= 100) {
message.textContent = 'Your guess is: ' + guess;
} else {
message.textContent = 'Please enter a number between 1 and 100.';
}
}
```![]()
Guess the Number
Adivina un número entre el 1 y el 100
<label for="guess">Introduce tu conjetura: <input type="number" id="guess" min="1" max="100"> </label> <input type="button" value="Guess!" onclick="checkGuess()">
Creo que se unificó el curso anterior de JS basico con las nuevas clases de Estefany. Incluso con los comentarios anteriores! Por eso parece un cambio muy brusco en los contenidos y el hilo de la clase. Y por eso apareces proyectos que parecen mas avanzados
los cursos de platzi siempre me han gustado mucho pero siento que este curso lo hicieron como a la carrera siento que están explicando los conceptos muy por encima pensé que este iba a ser el mejor curso de JS pero honestamente siento que se quedaron cortos por ejemplo el concepto de prompt no lo habían explicado en ninguna clase
intento ejecutar la primera parte del ejercicio donde están las primeras 4 líneas de código y me sale error en el console...
para escribir las comillitas invertidas usar ALT+96 = ` 💻👌
hola chicos como estan, tengo una duda, quise usar el prompt para que el usuario ingresara el numero pero no precisamente para este juego sino para hacer otras comprobaciones con condicionales pero lamentablemente me dice que con un ambiente de en node.js no es posible usarlo, si me pudiesen ayudar por favor
Le pregunté a ChatGPT que podemos hacer con esto para poder interiorizar mejor los conceptos y aquí se los comparto
En cada condición (`if`, `else if`, `else`), puedes ejecutar cualquier código válido de JavaScript. Aquí te doy algunas opciones de lo que puedes hacer:
1. Asignar valores:
Puedes asignar valores a variables.
```javascript
let descuento;
let edad = 22;
if (edad < 18) {
descuento = 0.5;
} else if (edad < 25) {
descuento = 0.2;
} else {
descuento = 0.1;
}
```
2. Mostrar mensajes en la consola:
Es útil para depuración o para interactuar con la consola del navegador.
```javascript
let numero = 10;
if (numero > 0) {
console.log("El número es positivo");
} else {
console.log("El número es negativo o cero");
}
```
3. Llamar funciones:
Puedes ejecutar funciones en cada bloque de condiciones.
```javascript
function saludar() {
console.log("Hola!");
}
let hora = 8;
if (hora < 12) {
saludar(); // Llama a la función si la condición es verdadera
}
```
4. Modificar el DOM:
Si trabajas con una página web, puedes cambiar elementos del HTML usando JavaScript.
```javascript
let temperatura = 30;
if (temperatura > 25) {
document.body.style.backgroundColor = "yellow"; // Cambia el color de fondo de la página
} else {
document.body.style.backgroundColor = "blue";
}
```
5. Operaciones matemáticas:
Puedes realizar cálculos matemáticos o aplicar fórmulas.
```javascript
let a = 5, b = 10;
if (a < b) {
let resultado = b - a;
console.log("Resultado:", resultado);
}
```
6. Bucles o ciclos:
Dentro de una condición, puedes ejecutar bucles como `for`, `while`, etc.
```javascript
let numero = 3;
if (numero > 0) {
for (let i = 0; i < numero; i++) {
console.log("Iteración:", i);
}
}
```
7. Manejo de arreglos (arrays):
Puedes realizar operaciones sobre arrays, como agregar, eliminar, o modificar elementos.
```javascript
let lista = [];
let edad = 16;
if (edad < 18) {
lista.push("Descuento estudiante");
} else {
lista.push("Descuento adulto");
}
console.log(lista);
```
8. Control de flujo con `return`, `break`, `continue`:
Puedes usar estas instrucciones para controlar el flujo de ejecución dentro de las condiciones.
```javascript
function verificarNumero(numero) {
if (numero < 0) {
return "Número negativo"; // Termina la función si la condición es verdadera
} else {
return "Número positivo";
}
}
console.log(verificarNumero(-5));
```
9. Condiciones anidadas:
Puedes tener `if` dentro de otros `if` (condiciones anidadas) para crear lógica más compleja.
```javascript
let edad = 20;
let tieneLicencia = true;
if (edad >= 18) {
if (tieneLicencia) {
console.log("Puedes conducir");
} else {
console.log("Necesitas una licencia para conducir");
}
} else {
console.log("Eres menor de edad");
}
```
10. Manejo de errores o excepciones:
Puedes usar `try...catch` para manejar posibles errores.
```javascript
let input = "abc";
if (isNaN(input)) {
try {
throw new Error("El valor ingresado no es un número");
} catch (e) {
console.log(e.message);
}
} else {
console.log("El valor es un número");
}
```
Resumen:
En cada condición (`if`, `else if`, `else`) puedes ejecutar cualquier tipo de lógica, como asignar valores, ejecutar funciones, modificar el DOM, hacer cálculos, manejar errores, o controlar el flujo del programa. ¡Es muy flexible!
Asi me quedo a mi, Use pues JavaScript, Astro y Tailwind; Aca el codigo:
Aca el codigo JS:
```js
function i(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
var numeroSecreto = i(0, 11);
var botonEnviar = document.getElementById('enviar');
var botonReiniciar = document.getElementById('reiniciar');
botonEnviar.addEventListener('click', recibir);
botonEnviar.addEventListener('click', resultado);
botonEnviar.addEventListener('click', print);
botonEnviar.addEventListener('click', numeroJugadorResultado);
botonReiniciar.addEventListener('click', reiniciar);
function reiniciar() {
location.reload();
}
function recibir() {
var numeroJugador = document.getElementById('texto').value;
const r = numeroJugador;
return Number(r);
}
function resultado() {
if (recibir() >= 0 && recibir() <= 10) {
if (recibir() == numeroSecreto) {
const r = 'Ganaste';
return r;
} else {
const r = 'Perdiste';
return r;
}
} else if (recibir() < 0 || recibir() > 10) {
const r = 'Solo se pueden ingresar numero entre el 0 y el 10, vuelve a intentar, Perdiste';
return r;
} else {
const r = 'Debes ingresar un numero, no letras o símbolos';
return r;
}
}
function numeroJugadorResultado() {
if (resultado() === 'Debes ingresar un numero, no letras o símbolos') {
const r = 'El numero que ingreso el jugador es incorrecto';
return r;
} else if (resultado() === 'Solo se pueden ingresar numero entre el 0 y el 10, vuelve a intentar, Perdiste') {
const r = 'El numero que ingreso el jugador es incorrecto';
return r;
} else if (resultado() === 'Ganaste' || resultado() === 'Perdiste') {
const r = `El numero Jugador del es ${recibir()}`;
return r;
}
}
function styles() {
botonEnviar.disabled = true;
botonEnviar.style.color = '#b6bbc5';
botonEnviar.style.backgroundColor = '#0e6077';
botonReiniciar.style.display = 'flex';
botonReiniciar.style.justifyContent = 'center';
}
function print() {
if (resultado() === 'Solo se pueden ingresar numero entre el 0 y el 10, vuelve a intentar, Perdiste') {
styles();
const color = resultado() == 'Ganaste' ? 'bg-green-500' : 'bg-red-500';
document.querySelector('#result').innerHTML = `
<h1 class="w-[90%]">Solo se pueden ingresar numero entre el 0 y el 10, vuelve a intentar.
<h1 class='w-[30%] rounded-lg ${color}'>Perdiste`;
} else {
styles();
const color = resultado() == 'Ganaste' ? 'bg-green-500' : 'bg-red-500';
document.querySelector('#result').innerHTML = `
</main>
```
El numero secreto es ${numeroSecreto}
${numeroJugadorResultado()}
<h1 class='w-[30%] rounded-lg ${color}'>${resultado()}`; } } ```El codigo HTML y TailWind: ```html <h1 class="relative bottom-8 w-[85vw] text-center text-2xl font-bold text-gray-100 sm:w-[60vw]"> Este es un Juego en el cual tienes que adivinar un numero del 0 al 10, compites contra la PC <main class="h-[40%] w-[90%] rounded-2xl bg-cyan-950 shadow-2xl sm:w-[70%] lg:w-[35%]">
<input
type="number"
id="texto"
class="w-[50%] rounded-lg bg-slate-300 text-center font-semibold text-sky-950 placeholder:font-semibold placeholder:text-sky-950 sm:placeholder:pl-[10%]"
min="0"
max="10"
placeholder="numero de 0 a 10"
/>
<button
id="enviar"
class="mt-4 h-auto w-[5rem] rounded-lg border-[2px] border-[#0e6077] bg-blue-950 font-semibold duration-[120ms] active:scale-95 sm:ml-8 sm:mt-0"
>enviar</button
>
<button
id="reiniciar"
class="hidden h-auto w-[5rem] rounded-lg border-[2px] border-[#0e6077] bg-blue-950 text-[0.9rem] font-semibold duration-[120ms] active:scale-95"
>Reiniciar</button
>
La función **Math.floor()** devuelve el máximo entero menor o igual a un número.
La función **Math.random()** devuelve un número de coma flotante pseudo-aleatorio, comprendido en el rango de 0 a menor que 1 (es decir, incluido el 0 pero no el 1), con una distribución aproximadamente uniforme en este rango. Dicho rango puede ser ampliado hasta los valores deseados.
Hola chicos aqui va mi aporte:\\<html lang="en">\<head> \<meta charset="UTF-8"> \<meta name="viewport" content="width=device-width, initial-scale=1.0"> \<title>ultimate js\</title> \<link rel="stylesheet" href="style.css">\</head>\<body> \
<script src="app.js"></script>
</body>
</html>
```
\
\<script src="app.js">\</script>\</body>\</html>```js
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ultimate js</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
Guess the Number\
\Adivina un número entre el 1 y el 100\
\<label for="guess">Introduce tu conjetura: \<input type="number" id="guess" min="1" max="100"> \</label> \<input type="button" value="Guess!" onclick="checkGuess()"> \\
\Guess the Number
Adivina un número entre el 1 y el 100
<label for="guess">Introduce tu conjetura: <input type="number" id="guess" min="1" max="100"> </label> <input type="button" value="Guess!" onclick="checkGuess()">
mi humilde aporte
Viendo que Algunos compañeros han señalado que es importante hacer una pausa para explicar algunos conceptos como lo indica @wilbort Encomenderos Ruiz por ejemplos qué es un método que fueron los que se uso en la clase y cómo funciona. Esto es crucial, ya que quienes están tomando este curso de fundamentos pueden perder esta información esencial.
Los métodos en JavaScript son funciones que están asociadas a un objeto. Y Permiten realizar acciones específicas o manipular datos. A continuación, se describen algunos métodos comunes:
\#### 1. \*\*Math.floor()\*\*
\*\*Descripción\*\*: Redondea un número hacia abajo al entero más cercano.
\*\*Ejemplo\*\*:
```javascript
let numero = 4.7;
let redondeado = Math.floor(numero);
console.log(redondeado); // Output: 4
```
\#### 2. \*\*Math.random()\*\*
\*\*Descripción\*\*: Devuelve un número decimal aleatorio entre 0 (inclusive) y 1 (exclusive).
\*\*Ejemplo\*\*:
```javascript
let numeroAleatorio = Math.random();
console.log(numeroAleatorio); // Output: un número entre 0 y 1
```
Para obtener un número aleatorio en un rango específico:
```javascript
let min = 1;
let max = 10;
let aleatorioEnRango = Math.floor(Math.random() \* (max - min + 1)) + min;
console.log(aleatorioEnRango); // Output: un número entre 1 y 10
```
\#### 3. \*\*parseInt()\*\*
\*\*Descripción\*\*: Convierte una cadena de texto en un número entero. Puedes especificar la base (radix) del sistema numérico.
\*\*Ejemplo\*\*:
```javascript
let texto = "123";
let numeroEntero = parseInt(texto);
console.log(numeroEntero); // Output: 123
```
Con base:
```javascript
let textoHex = "1A";
let numeroHex = parseInt(textoHex, 16);
console.log(numeroHex); // Output: 26
```
\### Resumen
Estos métodos son herramientas útiles en JavaScript para realizar operaciones matemáticas y manipulación de datos.
Les dejo mis notas por aquí, hice algunas lineas paso a paso para que sean mas faciles de entender y en comentarios intento poner la explicación de cada una.
me parece que falta información para poder seguir y hacerlo a la vez, para vincularlo a un navegador, como construye el html, como vincula o que puerto usar, etc
procura que se vea completo tu código en VS de favor , gracias
Asi quedo mi Juego.
```txt
```
```txt
```
Si tienes vscode porque no ejecutas los códigos ahí mismo tenemos extensiones como code Runner que nos pueden ayudar
Después de terminar todo este curso de JavaScript que me recomiendan seguir ?
```js
const numeroSecreto = Math.floor(Math.random() * 10 + 1);
const numeroJugador = parseInt(
prompt("Adivina el número secreto entre el 1 y el 10")
);
console.log(`Este es el número con el que juegas: ${numeroJugador}`);
if (numeroJugador === numeroSecreto) {
console.log(`Ganaste, el número secreto era: ${numeroSecreto}`);
} else {
console.log(`Perdiste, el número era: ${numeroSecreto}`);
}
```const numeroSecreto = Math.floor(Math.random() \* 10 + 1);
const numeroJugador = parseInt( prompt("Adivina el número secreto entre el 1 y el 10"));
console.log(`Este es el número con el que juegas: ${numeroJugador}`);
if (numeroJugador === numeroSecreto) { console.log(`Ganaste, el número secreto era: ${numeroSecreto}`);} else { console.log(`Perdiste, el número era: ${numeroSecreto}`);}
![]()
Hola compañeros! Aquí les dejo mi solución al ejercicio, tengo que hacer la aclaración de que quise implementar ciclos a pesar de que es un tema que veremos más adelante en el curso! 👀
Comenta tu solución!
```js
// Function to generate a random integer within a range
function generateRandomNumber(minRange, maxRange) {
return Math.floor(Math.random() * maxRange - minRange + 2)
}
invalidLimits = true;
let minimum, maximum
while (invalidLimits) {
minimum = parseInt(prompt("Choose an integer value as your minimum range"));
maximum = parseInt(prompt("Choose an integer value as your maximum range"));
if (isNaN(minimum) || isNaN(maximum)) {
alert("Please provide valid numbers for your guess limits");
} else {
invalidLimits = false;
}
}
alert(`A random number between ${minimum} and ${maximum} has been chosen, get ready your 3 guesses!`);
const randInt = generateRandomNumber(minimum, maximum);
let guessed = false;
// Give the user 3 chances to guess the number
for (let iterator=0; iterator<3; iterator++) {
const guess = parseInt(prompt(`What will your guess #${iterator+1} be?`));
if (guess === randInt) {
alert(`Congratulations! You have guessed the number: ${guess}`);
guessed = true;
break;
} else if (isNaN(guess)) {
alert("You just wasted a guess! Make sure to provide a valid number");
continue;
}
if (guess < randInt) {
alert(`The random number is higher than your guess!`);
} else {
alert(`The random number is lower than your guess!`);
}
}
if (!guessed) {
alert(`You lose, the correct number was ${randInt}`);
}
```
¿Como puedo conectar mi JavaScript con mi navegador web? Para que asi como a el cuando le de enter se ejecute y no tenga que copiarlo todo y correrlo
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?