diagramas.html

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Web Fundamentals - Diagramas VV</title>
    <link rel="stylesheet" href="/styles/index.css" />
  </head>
  <body>
    <header class="header">
      <div class="container header__container">
        <a href="/index.html">
          <img
            src="assets/images/codeable-logo-sm.svg"
            alt="codeable-logo"
            width="135"
            height="32"
            class="header__logo"
          />
        </a>
        <nav class="navigation">
          <ul>
            <li class="active"><a href="/diagramas.html">Diagramas VV</a></li>
            <li><a href="/funciones.html">Funciones</a></li>
            <li><a href="/dom.html">Manipulación del DOM</a></li>
          </ul>
        </nav>
        <p class="header__name">Angélica Arias</p>
      </div>
    </header>
    <main>
      <div class="section-xl">
        <article class="container__blog">
          <h1 class="title__blog">Diagramas VV</h1>
          <h2 class="subtitle__blog">Instrucciones</h2>
          <p class="text__blog">
            Dibuja el estado del diagrama de variables y valores para cada
            momento indicado por el ejercicio. Añade una imagen del diagrama al
            documento. El diagrama deberá contener únicamente las variables y
            valores que permanecen en la memoria. Luego contesta las preguntas
            dejando marcado (checked) el radio button o el/los checkboxes
            correspondientes.
          </p>
          <h2 class="subtitle__blog">Ejercicios</h2>
          <h3 class="subtitle2">Ejercicio 1</h3>
          <p class="text__blog">
            Analiza el siguiente código y dibuja el diagrama VV al terminar de
            ejecutarse
          </p>
          <pre><code>
            const juan = {
            nombre: "Juan",
            edad: 25,
            residencia: {
              direccion: "Loma Hermosa 240",
              ciudad: "Lima",
              pais: "Peru",
            },
          };
          
          const sandra = {
            nombre: "Sandra",
            edad: 25,
            residencia: {
              direccion: "Loma Hermosa 240",
              ciudad: "Lima",
              pais: "Peru",
            },
          };</code></pre>
          <figure class="imagen__blog">
            <img src="/assets/images/ejercicio1.png" class="diagrama__code" />
            <figcaption class="img__description">
              Diagrama al final de la ejecución
            </figcaption>
          </figure>
          <form class="form1__blog">
            <p class="form__option">
              La expresión `juan.edad === sandra.edad` retorna
            </p>
            <label>
              <input type="radio" id="result" name="result" checked /> true
            </label>
            <label>
              <input type="radio" id="result" name="result" /> false
            </label>
          </form>
          <form class="form1__blog">
            <p class="form__option">
              La expresión `juan.residencia === sandra.residencia` retorna
            </p>
            <label>
              <input type="radio" id="result" name="result" /> true
            </label>
            <label>
              <input type="radio" id="result" name="result" checked /> false
            </label>
          </form>
          <form class="form1__blog">
            <p class="form__option">
              La expresión `juan.residencia.ciudad === sandra.residencia.ciudad`
              retorna
            </p>
            <label>
              <input type="radio" id="result" name="result" checked /> true
            </label>
            <label>
              <input type="radio" id="result" name="result" /> false
            </label>
          </form>
          <h3 class="subtitle2">Ejercicio 2</h3>
          <p class="text__blog">
            Analiza el siguiente código y dibuja el diagrama VV al terminar de
            ejecutarse
          </p>
          <pre><code>
            const objeto1 = {};
            const objeto2 = { b: 5 };
            const objeto3 = { a: 10 };
            
            objeto1.a = objeto3.a;
            objeto2.a = objeto1.a + 5;
            objeto3.b = objeto1.b;
            objeto1.b = 10;
          </code></pre>
          <figure class="imagen__blog">
            <img src="/assets/images/ejercicio2.png" class="diagrama__code" />
            <figcaption class="img__description">
              Diagrama al final de la ejecución
            </figcaption>
          </figure>
          <form class="form1__blog">
            <p class="form__option">
              La expresión `objeto1.a + objeto2.b === objeto2.a` retorna
            </p>
            <label>
              <input type="radio" id="result" name="result" checked /> true
            </label>
            <label>
              <input type="radio" id="result" name="result" /> false
            </label>
          </form>
          <form class="form1__blog">
            <p class="form__option">El valor de `objeto3.b` es</p>
            <label> <input type="radio" id="result" name="result" /> 5 </label>
            <label> <input type="radio" id="result" name="result" /> 10 </label>
            <label>
              <input type="radio" id="result" name="result" /> null
            </label>
            <label>
              <input type="radio" id="result" name="result" checked /> undefined
            </label>
            <label>
              <input type="radio" id="result" name="result" /> Error
            </label>
          </form>
          <form class="form1__blog">
            <p class="form__option">
              La expresión `objeto1.a === objeto1.b` retorna
            </p>
            <label>
              <input type="radio" id="result" name="result" checked /> true
            </label>
            <label>
              <input type="radio" id="result" name="result" /> false
            </label>
          </form>
          <h3 class="subtitle2">Ejercicio 3</h3>
          <p class="text__blog">
            Analiza el siguiente código y dibuja un diagrama VV para cada uno de
            los momentos indicados. Recuerda que una función es un valor
            representado por el símbolo `( )`. No es necesario escribir el
            contenido de la función en el diagrama.
          </p>
          <pre><code>
            function agregar(arreglo, valor) {
              return arreglo.push(valor);
            }
            
            const frutas = ["pera", "manzana"];
            
            const resultado = agregar(frutas, "durazno");
            
            // Punto A: dibuja el diagrama en este punto
            
            const copia = frutas;
            
            agregar(copia, "platano");
            
            // Punto B: dibuja el diagrama en este punto
          </code></pre>
          <figure class="imagen__blog">
            <img src="/assets/images/ejercicio3.a.png" class="diagrama__code" />
            <figcaption class="img__description">
              Diagrama en punto A
            </figcaption>
          </figure>
          <figure class="imagen__blog">
            <img src="/assets/images/ejercicio3.b.png" class="diagrama__code" />
            <figcaption class="img__description">
              Diagrama en punto B
            </figcaption>
          </figure>
          <form class="form1__blog">
            <p class="form__option">El valor de resultado `resultado` es</p>
            <label>
              <input type="radio" id="result" name="result" /> ['pera',
              'manzana', 'durazno']
            </label>
            <label>
              <input type="radio" id="result" name="result" /> 'durazno'
            </label>
            <label>
              <input type="radio" id="result" name="result" checked /> 3
            </label>
            <label> <input type="radio" id="result" name="result" /> 4 </label>
          </form>
          <form class="form1__blog">
            <p class="form__option">
              El valor de `frutas.length` en el Punto B es
            </p>
            <label> <input type="radio" id="result" name="result" /> 2 </label>
            <label> <input type="radio" id="result" name="result" /> 3 </label>
            <label>
              <input type="radio" id="result" name="result" checked /> 4
            </label>
            <label>
              <input type="radio" id="result" name="result" /> undefined
            </label>
          </form>
          <h3 class="subtitle2">Ejercicio 4</h3>
          <p class="text__blog">
            Analiza el siguiente código y dibuja un diagrama VV al finalizar la
            ejecución. Recuerda que una función es un valor representado por el
            símbolo `( )`. No es necesario escribir el contenido de la función
            en el diagrama.
          </p>
          <pre><code>
            function Persona(nombre) {
              this.nombre = nombre;
            }
            
            Persona.prototype.presentarse = function () {
              return `Hola, mi nombre es ${this.nombre}`;
            };
            
            function Mago(nombre, casa) {
              Persona.call(this, nombre);
              this.casa = casa;
            }
            
            Mago.prototype = Object.create(Persona.prototype);
            Mago.prototype.constructor = Mago;
            
            Mago.prototype.invocarHechizo = function () {
              return `${this.nombre} invoca un hechizo`;
            };
            
            const petunia = new Persona("Petunia");
            const harry = new Mago("Harry", "Gryffindor");
          </code></pre>
          <figure class="imagen__blog">
            <img src="/assets/images/ejercicio4.png" class="diagrama__code" />
            <figcaption class="img__description">
              Diagrama al final de la ejecución
            </figcaption>
          </figure>
          <form class="form1__blog">
            <p class="form__option">Marca todas las correctas</p>
            <label>
              <input type="checkbox" id="result" name="result" checked />
              `Persona` y `Mago` son funciones constructoras
            </label>
            <label>
              <input type="checkbox" id="result" name="result" /> El prototipo
              de `harry` es `petunia`
            </label>
            <label>
              <input type="checkbox" id="result" name="result" checked /> Los
              objetos creado con la función `Mago` tienen acceso al método
              `presentarse`
            </label>
            <label>
              <input type="checkbox" id="result" name="result" /> El uso de la
              palabra `new` es opcional
            </label>
            <label>
              <input type="checkbox" id="result" name="result" checked /> Solo
              el objeto `harry` tiene acceso al método `invocarHechizo`
            </label>

            <p class="form__option">`harry` es una instancia de `Persona`</p>
            <label>
              <input type="checkbox" id="result" name="result" /> true
            </label>
            <label>
              <input type="checkbox" id="result" name="result" checked /> false
            </label>

            <p class="form__option">
              La expresión `harry.invocarHechizo.call(petunia)` retorna
            </p>
            <label>
              <input type="checkbox" id="result" name="result" /> 'Harry invoca
              un hechizo'
            </label>
            <label>
              <input type="checkbox" id="result" name="result" checked />
              'Petunia invoca un hechizo'
            </label>
            <label>
              <input type="checkbox" id="result" name="result" /> Error
            </label>

            <p class="text__blog">
              Re-escribe el código usando la sintaxis de Clases de JavaScript
            </p>
            <pre><code>
              class Persona {
                constructor(nombre) {
                this.nombre = nombre;
              }
              
              presentarse () {
                return `Hola, mi nombre es ${this.nombre}`;
              }
            }
              
              class Mago{
                constructor(nombre, casa) {
                Persona.call(this, nombre);
                this.casa = casa;
              }
              
              invocarHechizo() {
                return `${this.nombre} invoca un hechizo`;
              }
            }

            Mago.prototype = Object.create(Persona.prototype);
              
              const petunia = new Persona("Petunia");
              const harry = new Mago("Harry", "Gryffindor");
            </code></pre>
          </form>
        </article>
      </div>
    </main>
  </body>
</html>