Loading repository data…
Loading repository data…
Programacion-Web-Egg / repository
👣 Paso 24 - ¡Continuamos con Javascript!
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
En el paso anterior comenzamos a poner en práctica los primeros códigos con Javascript. Ahora vamos a ver otros conceptos.
¡Continuemos! 🚀
💡 Para este paso, les vamos a pedir que:
🔸Resuelvan individualmente el ejercicio en su propia computadora.
🔸Preguntar a tus compañeros en caso de no entender alguna parte.
🔸Si no logran resolver algo entre todos, no olviden llamar al mentor para que los ayude.
📌 ¡Recuerden mantener las cámaras encendidas en todo el proceso! ¡Sé protagonista de tus objetivos!
✏️ Actividad - Condicionales en Javascript 📌 Mira el siguiente video dónde mostramos cómo hacer condicionales en Javascript
➕ Vamos a continuar trabajando en el archivo script.js
Crea un condicional que modifique el texto del elemento “Acerca de mí” dependiendo de si la condición se cumple o no se cumple.
🖥️ Cuando todos hayan logrado seguir las instrucciones, de a uno vayan compartiendo pantalla mostrando su código y el resultado de su código.
✏️ Actividad - Funciones en Javascript
📌 Mira el siguiente video dónde mostramos cómo hacer funciones en Javascript
https://youtu.be/z9ydd8ekpzY ➕ Vamos a continuar trabajando en el archivo script.js
Crea un condicional que modifique el texto del elemento “Acerca de mí” dependiendo de si la condición se cumple o no se cumple.
🖥️ Cuando todos hayan logrado seguir las instrucciones, de a uno vayan compartiendo pantalla mostrando su código y el resultado de su código.
✏️ Actividad - Funciones en Javascript
📌 Mira el siguiente video dónde mostramos cómo hacer funciones en Javascript https://youtu.be/z9ydd8ekpzY
➕ Vamos a continuar trabajando en el archivo script.js
Crea una función que modifique el texto del elemento “Acerca de mí” definiendo previamente en la función el texto que quiero utilizar.
🖥️ Cuando todos hayan logrado seguir las instrucciones, de a uno vayan compartiendo pantalla mostrando su código y el resultado de su código.
Descarga la siguiente carpeta dentro de tu compu, y colócala dentro de la carpeta de PWDC 👉Link Carpetas
Abre el archivo nav.html con el liver server y revisa cómo se ve el menú achicando la pantalla del navegador
📌 Verás que al hacer click aún no sucede nada. Y esto es porque vamos a aplicar un código Javascript para que funcione el menú.
Crear un archivo script.js y linkealo al archivo nav.html
Copia el siguiente código Javascript en el archivo script.js
let menu_responsive = document.querySelector(".checkbtn");
menu_responsive.onclick = function () {
navBar = document.querySelector(".navbar");
navBar.classList.toggle("active");
};
Ahora, al hacer click deberías ver cómo se despliega el menú. Pero ¿Qué hace este código?
Lo veremos en el siguiente video:
Les compartimos este video complementario sobre 👉 Cómo manipular el DOM con JavaScript . En el mismo van a ver más formas de cómo manipular el DOM. Dura 47 minutos, por lo que les proponemos que lo vean con calma en sus casas para analizarlo y practicar.
✅ Checklist Asegúrate de:
Revisar cómo se escriben condiciones en Javascript
Revisar cómo se utilizan funciones en Javascript
💡 Revisar estos puntos es muy importante dado que ayudarán a que todos puedan tener la mejor experiencia posible y logren resolver los desafíos correspondientes.
🔎 Resumen y buenas prácticas aprendidas Javascript es un lenguaje muy amplio, aquí veremos partes para aplicar a la web
El DOM es una representación de la estructura de un documento HTML en el navegador
Javascript permite agregar dinamismo a las páginas web
Por último, te proponemos realizar un muy breve test para poner a prueba los aprendizajes alcanzados. Vamos 🚀
⏭️ En el próximo encuentro veremos cómo hacer formularios y validarlos utilizando Javascript
Si queres colaborar o sugerir algun cambio en este paso, hacelo 👉 aquí.
¡Hola! Seguimos avanzando 👟
En los pasos previos vimos cómo agregar interactividad al sitio con Javascript y algunos conceptos básicos.
Ahora vamos a ver cómo armar formularios en HTML y validarlos con Javascript.
¿Listo? ¡Vamos! 🚀
Aquí es donde encontrarás el material descargable que complementará los ejercicios prácticos que vamos a ver en los siguientes pasos.
Para tu primer encuentro en vivo tienes que leer solo el material que te compartimos a continuación 👉 Formularios Documwnto 📢 ¡Importante!
No debes memorizar, concéntrate en entender el concepto. La práctica hará que luego puedas aplicarlo con más agilidad.
Si hay algo que no comprendes, ¡no te preocupes! Anótalo y pregunta a tus compañeros en el encuentro en vivo.
✍️ Para tu próximo encuentro en vivo En esta ocasión te dejamos el siguiente material 👉 Mi primer formulario HTML (https://developer.mozilla.org/es/docs/Learn/Forms/Your_first_form). Te pedimos que lo leas y analices para entender qué elementos componen un formulario en HTML.
✅ Checklist Asegúrate de:
Leer la teoría
Ver el material sobre formularios
💡 Revisar estos puntos es muy importante dado que ayudarán a que todos puedan tener la mejor experiencia posible y logren resolver los desafíos correspondientes.
Si queres colaborar o sugerir algun cambio en este paso, hacelo 👉 aquí.
Llegó el momento de practicar formularios para luego aplicarlo a tu página web.
¡Continuemos! 🚀
💡 Para este paso, les vamos a pedir que:
🔸Resuelvan individualmente el ejercicio en su propia computadora.
🔸Preguntar a tus compañeros en caso de no entender alguna parte.
🔸Si no logran resolver algo entre todos, no olviden llamar al mentor para que los ayude.
📌 ¡Recuerden mantener las cámaras encendidas en todo el proceso! ¡Sé protagonista de tus objetivos!
✏️ Actividad - Creando mi primer formulario Para comenzar con la creación de formularios, la primera recomendación es pensar previamente qué campos van a querer en su formulario y cómo van a querer que luzca en la web.
En este caso vamos a armar un formulario que luzca de la siguiente manera
Vamos a comenzar con la creación del formulario siguiendo estos pasos:
Crear una nueva carpeta con nombre formulario (al mismo nivel de la carpeta de mi_primera_web).
Crear dos archivos, forms.html y styles.css, y vincular el documento de estilos en el documento html
➕ <form> - Todo formulario comienza con la etiqueta <form></form> y puede recibir múltiples atributos. Los dos más importantes son action y method.
Action: indica a qué web se enviará la información (para este ejemplo lo dejaremos vacío)
Method: es el método mediante el cuál viaja la información al servidor. Y esto dependerá de cómo el programador quiera manejar esta opción. En general se utilizan dos métodos GET o POST. A fines prácticos para este ejemplo usaremos GET,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Speaker Submission</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<footer class="form-header">
<h1>Contacto</h1>
<p><em>¡Esperamos tu consulta!</em></p>
<form action="" method="get" class="formulario"></form>
</footer>
</body>
</html>
/* ------------- CSS General ------------- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
color: #5d6063;
background-color: #eaedf0;
font-family: "Helvetica", "Arial", sans-serif;
font-size: 16px;
}
/* ------------- Encabezado Contacto ------------- */
footer {
display: flex;
flex-direction: column;
align-items: center;
}
.form-header {
text-align: center;
background-color: #f6f7f8;
border: 1px solid #d6d9dc;
border-radius: 3px;
width: 80%;
margin: 10px auto;
padding: 50px;
}
.form-header h1 {
font-size: 30px;
margin-bottom: 20px;
}
/* ------------- Formulario ------------- */
.formulario {
background-color: #f6f7f8;
border: 1px solid #d6d9dc;
border-radius: 3px;
width: 80%;
padding: 50px;
margin: 30px 0 40px 0;
}
➕ <input> y <label> (para ingresar textos) - El campo donde el usuario ingresa información es el campo <input/> y si queremos que el campo tenga un título, tendremos que usar la etiqueta <label></label>.
Para los campos de texto utilizaremos type="text"
<form></form><div class="form-row">
<label for="nombre">Nombre</label>
<input id="nombre" name="nombre" type="text" />
</div>
💡Importante: el atributo for de la etiqueta label, debe coincidir con el atributo id del elemento input. Para que estén vinculados.
/* ------------- Campos del Formulario ------------- */
.form-row {
margin-bottom: 40px;
display: flex;
justify-content: flex-start;
flex-direction: column;
flex-wrap: wrap;
}
.form-row input[type="text"] {
background-color: #bdbdbd;
border: 0;
border-radius: 6px;
width: 100%;
padding: 7px;
font-size: 14px;
}
.form-row label {
margin-bottom: 3px;
text-align: initial;
}
📌Revisa el código CSS. Estamos usando las propiedades y valores que ya vimos, como flex, margin, padding, width, etc.
📌input[type="text"] → Este selector en CSS es un selector de atributo que aplica el CSS a los elementos que sean input de tipo text.
🛑✋ Hasta aquí deberían ver lo siguiente:
Pueden agregar el siguiente estilo CSS para adaptar el formulario a resoluciones de más de 700px
/* ------------- Para Pantallas de más de 700px ------------- */
@media only screen and (min-width: 700px) {
.form-header {
padding: 50px;
}
.form-row {
flex-direction: row;
align-items: flex-start;
margin-bottom: 20px;
}
.form-row input[type="text"] {
width: 250px;
height: initial;
}
.form-row label {
text-align: right;
width: 120px;
margin-top: 7px;
padding-right: 20px;
}
}
➕ <input> y <label> (para ingresar email) - Para los campos de email utilizaremos la misma etiqueta de input, pero se modifica el type, en este caso será type="email"
<form></form><div class="form-row">
<label for="email">Email</label>
<input
id="email"
name="email"
type="email"
placeholder="pepe@gmail.com"
/>
</div>
📌Aquí vemos un nuevo atributo: placeholder="pepe@gmail.com", lo que hará es mostrar un texto predeterminado en el campo de email.
🛑✋ Hasta aquí deberían ver lo siguiente:
➕ <textarea> y <label> (para ingresar textos más largos) - Para los campos de texto largo utilizaremos la etiqueta <textarea>.
<form></form><div class="form-row">
<label for="mensaje">Mensaje</label>
<textarea id="mensaje" name="mensaje"></textarea>
</div>