## PreWork ## Hello, JavaScript! Trabajamos un poquito m谩s con JavaScript, que es lo que le da **vida** al c贸digo 馃槉 Dentro de nuestra carpeta personal de prework, creamos la carpeta `javascript` (recordar, siempre en min煤sculas). En forma de 谩rbol, la estructura de carpetas es (ejemplo: wendy-darling): ``` staff |- pepito-grillo |- campa-nilla |- peter-pan |- wendy-darling |- prework |- app |- javascript ``` En la carpeta `app` se encuentran los ficheros del ejercicio anterior, realizado durante estos d铆as anteriores. En la carpeta `javascript` a帽adimos uno a uno los ejercicios que realizamos a continuaci贸n. ### hello-world Ponemos un ejemplo, para que se entienda la din谩mica. Dentro de la carpeta `javascript`, creamos otra carpeta `hello-world` (en min煤sculas, y separando las palabras por un gui贸n). Dentro de ella creamos dos ficheros, `index.html`, y `main.js`. ``` staff |- ... |- wendy-darling |- prework |- app |- javascript |- hello-world |- index.html |- main.js ``` Dentro del fichero `main.js` escribimos un c贸digo b谩sico para saludarnos con JavaScript: **main.js** ```javascript console.log('Hello, World!') ``` Y ahora, dentro del fichero `index.html`, escribimos la estructura b谩sica de un documento HTML, con el t铆tulo `Hello, World!` en la cabeza (dentro del `<title>` en el `<head>`) y en el cuerpo (dentro del `<h1>` en el `<body>`). A帽adimos una etiqueta `<script>` (justo antes de cerrar el `</body>`) para enlazar el fichero JavaScript anterior (`main.js`) con este documento: **index.html** ```htmlmixed <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello, World!</title> </head> <body> <h1>Hello, World!</h1> <script src="main.js"></script> </body> </html> ``` Por 煤ltimo, probamos el resultado abriendo este fichero `index.html` en el navegador, mediante la extensi贸n *Live Server*, previamente instalada en el *Visual Studio Code*. Con la p谩gina ya cargada, nos vamos al *inspector* del navegador, y en la *C贸nsola de JavaScript* vemos el mensaje: ```javascript Hello, World! ``` Esto confirma que hemos realizado bien los pasos anteriores 馃槈 ### string-to-array Vamos con el primer challenge. Creamos la estructura de carpetas, an谩loga al ejemplo anterior: ``` staff |- ... |- wendy-darling |- prework |- app |- javascript |- ... |- string-to-array |- index.html |- main.js ``` El `index.html` es pr谩cticamente igual, s贸lo ponemos el t铆tulo `String To Array` (en el head y el body). Este fichero s贸lo lo usamos para cargar y probar el c贸digo JavaSCript que tenemos en el `main.js`, cuando abrimos este documento en el navegador y observamos lo que se muestra en el inspector (C贸nsola de JavaScript). Se trata de desarrollar una funci贸n que permita "convertir" (extraer, mejor dicho) un `array` de un `string`. Por ejemplo, si tenemos un string `"Cocoliso"`, al enviarlo a la funci贸n como par谩metro, 茅sta lo procesa extrayendo cara car谩cter de ese string para ponerlo en un nuevo array `['C', 'o', 'c', 'o', 'l', 'i', 's', 'o']` y luego retornarlo (devolverlo) desde la funci贸n. Para ello nos basamos en el siguiente c贸digo de base, el cual escribimos en el `main.js`: **main.js** ```javascript function stringToArray(string) { // TODO implement me with a for loop } // CASE Hello, World! var helloString = 'Hello, World!' var helloChars = stringToArray(helloString) console.log(helloChars) // (13) ['H', 'e', 'l', 'l', 'o', ',', ' ', 'W', 'o', 'r', 'l', 'd', '!'] // CASE empty string var emptyString = '' var noChars = stringToArray(emptyString) console.log(noChars) // [] // CASE blank string (3 spaces) var blankString = ' ' var spaceChars = stringToArray(blankString) console.log(spaceChars) // (3) [' ', ' ', ' '] ``` El objetivo es implementar la funci贸n `stringToArray` para que cumpla con estos ejemplos de prueba de c贸digo (casos de prueba, CASEs). Para comprobar que la funci贸n est谩 haciendo lo que se especifica en estas pruebas, revisamos la C贸nsola de JavaScript en el inspector, una vez abierta la p谩gina en el navegador (con *Live Server*). Ese proceso de desarrollo de c贸digo es un constante ir y venir entre el *Visual Studio Code* y el inspector del navegador, donde comprobamos el resultado cada vez que cambiamos algo en el fichero `main.js`. Una vez terminado el desarrollo, subimos la soluci贸n a la carpeta del drive (explicada d铆as atr谩s en un v铆deo del prework). ### register-user En este challenge implementamos una funci贸n que nos permita registrar un usuario en una base de datos (un array). La estructura de ficheros es: ``` staff |- ... |- wendy-darling |- prework |- app |- javascript |- ... |- register-user |- index.html |- main.js ``` Partimos del siguiente c贸digo HTML, en el `index.html`: **index.html** ```htmlmixed <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Register</title> </head> <body> <h1>Register</h1> <form id="register-form"> <label for="name">Name</label> <input id="name" type="text"> <label for="email">Email</label> <input type="email" id="email"> <label for="password">Password</label> <input id="password" type="password"> <button class="right">Register</button> </form> <script src="main.js"></script> </body> </html> ``` y el siguiente c贸digo JavaScript, en el `main.js`: **main.js** ```javascript const users = [ { name: 'Pepito Grillo', email: 'pepito@grillo.com', password: '123123123' }, { name: 'Campa Nilla', email: 'campa@nilla.com', password: '123123123' } ] function registerUser(name, email, password) { // TODO implement register logic here } const registerForm = document.getElementById('register-form') registerForm.onsubmit = function (event) { event.preventDefault() const name = event.target.name.value const email = event.target.email.value const password = event.target.password.value const result = registerUser(name, email, password) if (result) alert('User successfully registered') else alert('User already exists') } ``` El objetivo es implementar la funci贸n `registerUser` presentada arriba y que haga lo siguiente: - Buscar en el array de `users` un objeto con los datos del usuario que se est谩 intentando registrar. Para ello buscamos en el array un objeto que tenga la propiedad `email` igual al email que se env铆a a la funci贸n. - Si encontramos a un usario en el array, entonces significa que el usuario ya existe (ya se hab铆a registrado antes) y, por tanto, no se puede volver a registrar. En ese caso, la funci贸n tiene que devolver `false`, indicando as铆 que no ha podido registrarlo (porque ya existe). - Si no encontramos a ning煤n usuario con ese email, entonces procedemos a registrarlo (a帽adirlo a la base de datos, el array `users`). Para ello creamos un objeto nuevo, con los datos del usuario como propiedades (`name`, `email`, `password`), y luego lo a帽adimos al array. Para comprobar que todo es proceso de registro est谩 funcionando, simplemente abrimos la C贸nsola de JavaScript, y luego de registrar un usuario, revisamos el array `users`. Deber铆amos ver, que el usuario ha sido a帽adido al array, si no exist铆a antes. Ejemplo: Abrimos el `index.html` en el navegador. Con ello se abre el formulario de registro. Llenamos el formulario con los datos de un usuario en los campos correspondientes, por ejemplo: - name: **Peter Pan** - email: **peter@pan.com** - password: **123123123** Luego enviamos el formulario, y si el usuario es nuevo (no estaba registrado), veremos el mensaje de alerta "User successfully registered". Por el contrario, si el usuario ya estaba registrado, veremos el mensaje "User already exists" (por ejemplo, si probamos de registrar al usuario *campa@nilla.com*, que ya existe en el array de `users`). Probamos ambas situaciones, de manera que testeamos bien la funcionalidad del registro de usuarios, y la funci贸n que hemos implementado (`registerUser`).