Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 16 vistas

    TPRG17 Miiisii S03 Ej01

    Cargado por

    Emanuel moreno
    Este documento presenta un ejercicio para desarrollar habilidades de JavaScript para manipular el DOM. Se pide crear un archivo HTML con dos divisiones y clases CSS. Luego, se modifica el archivo HTML para asignar clases CSS a los elementos mediante JavaScript. Finalmente, se pide agregar más elementos, modificar sus clases y agregar un botón para cambiar el color del nombre del estudiante.

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd

    TPRG17 Miiisii S03 Ej01

    Cargado por

    Emanuel moreno
    16 vistas3 páginas
    Este documento presenta un ejercicio para desarrollar habilidades de JavaScript para manipular el DOM. Se pide crear un archivo HTML con dos divisiones y clases CSS. Luego, se modifica el archivo HTML para asignar clases CSS a los elementos mediante JavaScript. Finalmente, se pide agregar más elementos, modificar sus clases y agregar un botón para cambiar el color del nombre del estudiante.

    Título original

    TPRG17_MIIISII_S03_EJ01.docx

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Este documento presenta un ejercicio para desarrollar habilidades de JavaScript para manipular el DOM. Se pide crear un archivo HTML con dos divisiones y clases CSS. Luego, se modifica el archivo HTML para asignar clases CSS a los elementos mediante JavaScript. Finalmente, se pide agregar más elementos, modificar sus clases y agregar un botón para cambiar el color del nombre del estudiante.

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Descargar como docx, pdf o txt
    16 vistas3 páginas

    TPRG17 Miiisii S03 Ej01

    Cargado por

    Emanuel moreno
    Este documento presenta un ejercicio para desarrollar habilidades de JavaScript para manipular el DOM. Se pide crear un archivo HTML con dos divisiones y clases CSS. Luego, se modifica el archivo HTML para asignar clases CSS a los elementos mediante JavaScript. Finalmente, se pide agregar más elementos, modificar sus clases y agregar un botón para cambiar el color del nombre del estudiante.

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Descargar como docx, pdf o txt
    de 3

    EJERCICIOS: TPRG17_MIIISII_S03_EJ01

    Modulo III. Desarrolla aplicaciones web. Submódulo II: Desarrolla aplicaciones que se
    ejecutan en el cliente.
    Competencia Profesional: C4. Emplea JavaScript para validar formato de datos.
    Nombre del Alumno (a): Grupo:

    Ejercicio #1: Crearemos un archivo HTML para que funcione con los métodos de
    clase, con dos elementos y algunas clases.

    Crea un nuevo archivo HTML y llámalo EjerSumativo3pte.html


    Y copia el siguiente código.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="ejercicioSum.css">
    <title>Ejercicio Sumativo</title>
    </head>

    <body>
    <div>Div 1</div>
    <div class="active">Div 2</div>

    </body>
    </html>

    2.- Ahora crearemos un archivo llamado en este caso ejercicioSum.css, y añadiremos el


    siguiente código.
    Nota; es importante que vayas copiando por línea el código css y lo vayas ejecutando paso a
    paso para que le entiendas lo que mas adelante vas a hacer.

    body {
    max-width: 600px;
    margin: 0 auto;
    font-family: sans-serif;
    }

    .active {
    border: 2px solid blue;
    }

    .warning {
    border: 2px solid red;
    }

    .hidden {
    display: none;
    }

    div {
    border: 2px dashed lightgray;
    padding: 15px;
    margin: 5px;
    }

    3.- La salida será la siguiente:

    4.- Ahora agregaremos el siguiente código en el archivo EjerSumativo3pte.html

    La propiedad className se introdujo para evitar conflictos con la palabra clave de class que


    se encuentra en JavaScript y otros lenguajes que tienen acceso al DOM. Puede
    utilizar className para asignar un valor directamente a la clase.

    <script>
    // Seleccionamos el primer div
    const div = document.querySelector('div');

    // asignamos la clase warning programado en ejercicioSum.css al primer div


    div.className = 'warning';

    </script>

    5.-La salida será la siguiente:


    Hemos asignado la clase warning definida en los valores CSS de ejercicioSum.css  al
    primer div. Obtendrá el siguiente resultado.
    6.- Ahora de acuerdo a las modificaciones hechas, y del entendimiento agrega dos
    elementos y modifica sus clases (puedes asignar lo programado ya en el css o también
    puedes crear tu propia clase css con sus atributos en total serian 4 div).

    7.- ahora de lo aprendido en las sesiones en línea sobre los ejemplos del DOM, anexa a este
    ejercicio tu nombre y cámbiale el color por ejemplo por medio de un botón.

    El ejercicio se envía el próximo viernes 27 de mayo antes de las 3 pm


    El nombre del archivo a enviar será: TPRG17_MIIISII_S03_LC01_#lista#nombre.pdf
    Recuerden que debe de llevar: Portada, hoja de ejercicios del código y la salida y la rubrica al final.

    También podría gustarte