Activity two

.gitignore

@@ -110,3 +110,4 @@ dist
 .tern-port
 
 .vscode/
+.idea/

activity/1_session/aboutme.js

@@ -1,4 +1,16 @@
-console.log("hello world");
+/**
+ * Create a function that returns a string
+ *
+ * @param completeName
+ * @param profession
+ * @param position
+ */
 
+const myName = "César Ibarra";
+const myProfession = "Frontend Developer";
+const myPosition = "Fullstack Developer";
 
-console.log("laater");
+const aboutMe = `Hola, me llamo ${myName} y me dedico a ${myProfession}. Estoy cursando este Máster porque me 
+gustaría trabajar en ${myPosition}`
+
+export { aboutMe };

activity/1_session/index.js

@@ -1,14 +1,78 @@
 // Ejercicio 1
-import "./aboutme.js";
-console.log("Ejercicio 1");
+import {  aboutMe } from "./aboutme";
+console.log("🎈 Ejercicio 1");
+
+console.log(aboutMe);
 
 // Ejercicio 2
+console.log("🎈 Ejercicio 2");
+const myAnswer =  "El orden de ejecución es debido a cómo funciona la importación de modulos en JavaScript y/o" +
+    " TypeScript. El contenido en aboutme.js se ejecuta antes que la llamada del console.log('Ejercicio 1'); en el index.js"
+console.log(myAnswer);
 
 // Ejercicio 3
+console.log("🎈 Ejercicio 3")
+/**
+ * Divisible by 7 with for
+ */
+for (let i = 1; i <=100; i++){
+    if(i % 7 === 0){
+        console.log(i);
+    }
+};
 
 // Ejercicio 4
+console.log("🎈 Ejercicio 4");
+const myAnwer4 = "Al finalizar el bucle el valor de i sera 101, esto es porque se declara de forma global con " +
+    "var y para que no se declare fuera del bloque se tiene que declarar con let, asi no existirá fuera de ella el valor" +
+    " que tendria es de 100"
+console.log(myAnwer4);
 
 // Ejercicio 5
+console.log("🎈 Ejercicio 5");
+/**
+ * ¿Cuáles son las diferencias entre ejecutar un fichero JavaScript en un navegador web en formato <script> y
+ * en formato <script type=”module”>?. Busca documentación para enumerar los principales comportamientos de ambas.
+ * */
+
+const myAnswer5 = `La diferencia entre ejecutar un script solo con <script> es que al momento de importarlo en el
+    html se ejecuta hasta la linea en la que llega a esa etiqueta <script>. Mientras el que <script type='module'>
+    se puede ejecutar asincronamente en el navegador sin alterar las variables que esta en la etiqueta <script>. 
+    a su vez solo se ejecuta una vez el tipo module en el navegador.`;
+
+/**
+ * https://es.javascript.info/modules-intro
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
+ * https://desarrolloweb.com/articulos/es6-modules.html
+ * */
+
+console.log(myAnswer5);
+
 
 // Ejercicio 6
+console.log("🎈 Ejercicio 6");
+/**
+ *     • Crea un objeto llamado formatter con un atributo, que llamaremos “prefix”, que tendrá de valor “Hello “,
+ *     y un método que llamaremos “append”, que imprimirá la concatenación entre el atributo “prefix” y la cadena que
+ *     pasemos como argumento en el método. formatter.append(“World”) // Result: Hello World
+ *     • Ahora añade mediante el atributo prototype otro método que acepte también un solo argumento e imprima esa misma
+ *     cadena en minúsculas. formatter.toLowerString(“I’m Lucas”) // Result: i’m lucas
+ * */
+
+const formatter = {
+    prefix: "Hello ",
+    append: function (append){
+        console.log(this.prefix + append);
+    }
+}
+
+const name = {
+    function(string){
+        console.log(string.toLowerCase());
+    }
+}
+
+formatter.append("World");
+name.function("I’m César Ibarra");
 

activity/2_session/index.js

@@ -1,13 +1,164 @@
 // Ejercicio 1
+console.log("🔮 Ejercicio 1");
+
+
+let person = {
+  name: "Cesar Ibarra",
+  age: 29,
+  profession: "Ingeniero Mecatronico"
+}
+
+const getPerson = data => {
+  return Object.keys(data);
+}
+
+console.log(getPerson(person));
 
 // Ejercicio 2
+console.log("🔮 Ejercicio 2 valores this");
+console.log("1. En el contexto global (window)", this); //window
+console.log("2. En una funcion");
+function test(){
+  console.log(this); //window
+}
+test();
+
+console.log("3. metodo de objeto");
+const object = {
+  name: "Objecto",
+  getObject: function(){
+    console.log(this); // Object
+  }
+};
+
+object.getObject();
+
+console.log("4. en un constructor");
+function Test(data){
+  this.data = data;
+}
+
+const ejemplo = new Test('Hello World');
+console.log(ejemplo.data);
+
+console.log("5. en un evento en el DOM");
+//document.getElementById("myBtn").addEventListener("click", function(){
+ // console.log(this); // <button id="myBtn">...</button>
+//});
+
+console.log("6. en una funcion llamada con call");
+function greet() {
+  console.log(this.name);
+}
+const obj = { name: 'John Doe' };
+greet.call(obj); // 'Alice'
+
+console.log("7. en unba funcion con bind");
+function greet2(){
+  console.log(this.name);
+}
+
+const obj2 = { name: "Jane Doe"};
+const boundGreet2 = greet2.bind(obj2);
+boundGreet2();
+
+console.log("Diferencias arrow function y expressions");
+console.log("Arrow: no tienen su propio this. heredan el this del contexto donde lo definieron");
+console.log("Function: Si tienen su propio this, que depende de como lo llames");
+const example = {
+  value: 42,
+  regularFunction: function() {
+    console.log(this.value); // 42
+  },
+  arrowFunction: () => {
+    console.log(this.value); // undefined (hereda `this` del contexto global o padre)
+  }
+};
+example.regularFunction();
+example.arrowFunction();
+
 
 // Ejercicio 3
+/*
+Crea una clase a la que llamaremos "InvertirCadena" con las siguientes propiedades:
+    • Un atributo llamado cadenaInvertir que sea una cadena vacía.
+    • Una función que tome el atributo cadenaInvertir e imprima en pantalla el resultado invertido. Ej "Hola mundo" quedaría "odnum aloH". Recuerda la diferencia al llamar this en function arrows vs function expressions.
+    • Si el parámetro de la cadena cadenaInvertir es vacío, lance un error (throw). Ej. "". throw error.
+    • Ahora instancia la clase en un objeto que llamaremos invertirCadena.
+Ejecuta primero la función sin cambiar cadenaInvertir. ¿Cómo podemos hacer para que nuestro código no rompa al ejecutarse?.
+Ahora cambia el valor a cadenaInvertir y vuelve a llamar la función. ¿Cuál es el resultado?.
+Por último, intenta acceder al siguiente método invertirCadena.nuevoMetodo(). ¿Cómo podemos hacer para que no de un error? */
+console.log("🔮 Ejercicio 3");
+class InvertirCadena {
+  constructor() {
+      this.cadenaInvertir = "";
+  }
+
+  invertirCadena() {
+      if (this.cadenaInvertir === "") {
+          throw new Error("La cadena está vacía");
+      } else {
+          console.log(this.cadenaInvertir.split('').reverse().join(''));
+      }
+  }
+}
+
+// Instanciar la clase
+const invertirCadena = new InvertirCadena();
+
+// Ejecuta la función sin cambiar cadenaInvertir
+try {
+  invertirCadena.invertirCadena();
+} catch (error) {
+  console.error(error.message);  // Esto imprimirá "La cadena está vacía"
+}
+
+invertirCadena.cadenaInvertir = "Hola desde mexico";
+invertirCadena.invertirCadena(); 
+
+// Intentar acceder a un método no definido
+try {
+  invertirCadena.nuevoMetodo();
+} catch (error) {
+  console.error("El método no existe:", error.message);
+}
 
 // Ejercicio 4
+console.log("🔮 Ejercicio 4");
+
+class newUser {
+username = "";
+password = "";
+
+ constructor(username, password){
+  this.username = username;
+  this.password = password;
+  this.login();
+ } 
+
+  login(){
+    if(this.username === "admin" && this.password === "passwd"){
+      alert("Usuario logeado");
+    } else {
+      alert("User y/o password son incorrectos")
+    }
+  }
+}
+
+// Ejemplo de uso:
+let admin = new newUser('admin', 'passwd'); 
+let user = new newUser('cesar', '123456'); 
 
 // Ejercicio 5
 
+document.getElementById("loginSuccess").addEventListener("click", ()=>{
+  const admin = new newUser("admin", "passwd");
+})
+
+document.getElementById("loginFailure").addEventListener("click", ()=>{
+  const user = new newUser("cesar", "123456");
+})
+
 // Ejercicio 6
 
 let loginWitUsername = (username, password) => {
@@ -18,6 +169,24 @@ let loginWitUsername = (username, password) => {
         } else {
           rejected("Error: invalid username or password");
         }
-      }, 200);
+      }, 1000);
     });
 };
+
+document.getElementById("loginSuccessAsync").addEventListener("click", async ()=>{
+    try {
+      const example = await loginWitUsername("admin", "passwd");
+      alert(example, "Usuario logeado");
+    } catch(err){
+      alert(err);
+    }
+});
+
+document.getElementById("loginFailureAsync").addEventListener("click", async ()=>{
+  try {
+    const example = await loginWitUsername("cesar", "123456");
+    alert(example, "User y/o password son incorrectos");
+  } catch(err){
+    alert(err);
+  }
+})

activity/typescript/index.html

@@ -58,7 +58,7 @@ <h2 id="ejercicio-4">Ejercicio 4</h2>
 <span class="hljs-built_in">console</span>.log(newNumArray); <span class="hljs-regexp">// --&gt; [2, 3, 4, 5, 6, 7];
 console.log(newMixedArray); //</span><span class="hljs-function"> --&gt;</span> [<span class="hljs-string">'I'</span>, <span class="hljs-string">'have'</span>, <span class="hljs-number">3</span>, <span class="hljs-string">'tasks'</span>];
 </code></pre>
-
+<h2 id="ejercicio-4">Ejercicio 5</h2>
         </div>
     </div>
     <script src="../../prism.js"></script>