Scribd
Cargar
29 vistas

Webdev-Labs - Práctica de JavaScript - conZIP

Cargado por

j8043031
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
29 vistas

Webdev-Labs - Práctica de JavaScript - conZIP

Cargado por

j8043031
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 7

Temario Horario Asignaciones Lecturas y Calendario Campuswire (en

CS396: Primavera de 2022


Referencias inglés)

Introducción al Desarrollo Web


Asignaciones > Laboratorio 6. Práctica de
JavaScript
Fecha de vencimiento el viernes, 05/06 @ 11:59 PM. 5 puntos.

Introducción
El objetivo del laboratorio de hoy es:

1. Te ayudará a practicar el uso de JavaScript para segmentar y modificar elementos


HTML en tu árbol DOM.

2. Continúa practicando tus habilidades de CSS.

3. Te animamos a que sigas pensando en mejorar la accesibilidad de tu sitio web.

Hemos creado una hoja de trucos (a continuación) con ejemplos de diferentes métodos de
selección y enfoques para actualizar el DOM.

Métodos de selección
Método Ejemplo

getElementById() document.getElementById("my_element")

querySelector() document.querySelector("#my_element")
document.querySelector("p")
document.querySelector(".my-announcements")

querySelectorAll() document.querySelectorAll("p")

getElementsByTagName() document.getElementsByTagName("div")

getElementsByClassName() document.getElementsByClassName(".panel")
Temario Horario Asignaciones Lecturas y Calendario Campuswire (en
Referencias inglés)

Algunos ejemplos de atributos HTML que puede modificar


Atributo Ejemplo

className document.querySelector("div").className = "panel";

innerHTML document.querySelector("div").innerHTML = "<p>hi</p>";

src (para document.querySelector(".my_image").src = "sponge_bob.png";


imágenes)

href (para document.querySelector(".my_link").href =


enlaces) 'https://www.wikipedia.org';

Algunos ejemplos de propiedades de estilo que se pueden


modificar
Propiedad Ejemplo

Ancho document.querySelector("div").style.width = "200px";

altura document.querySelector("div").style.width = "200px";

color de fondo document.querySelector("div").style.backgroundColor = "hotpink";

ancho-borde document.querySelector("div").style.borderWidth = "5px";

relleno document.querySelector("div").style.padding = "10px";

Monitor document.querySelector("div").style.display = "ninguno";

Sus tareas
DESCARGAR LAB 6 

Descargue el archivo lab05.zip, descomprímalo y mueva la carpeta lab06 dentro de su


carpeta webdev-labs. La estructura de tu directorio debería tener un aspecto similar al
siguiente:
Temario Horario Asignaciones Lecturas y Calendario Campuswire (en
webdev-labs Referencias inglés)
├── .git
├── lab01
│ ├── exercise01
│ └── exercise02
├── lab02
│ ├── .gitignore
│ ├── Procfile
│ ├── app.py
│ ├── helpers
│ ├── requirements.txt
│ ├── static
│ └── templates
├── lab03
│ ├── answers.sql
│ └── photo_app_lab03.tar
└── lab06
├── 01-font-switcher
├── 02-theme-switcher
├── 03-dyslexia-mode
└── style.css

A continuación, complete las tareas que se indican a continuación.

1. Ajustador de tamaño de fuente


Abra font-switcher/index.html en VS Code y anote las etiquetas HTML. También tenga en
cuenta que dentro de la etiqueta de encabezado hay una etiqueta de script que se vincula
a su archivo JavaScript:

<script src="index.js" defer></script>

La palabra clave significa que el script no se ejecutará hasta que se cargue toda la página
web. defer

Abra en Atom y descomente la sección en la parte inferior eliminando los símbolos /* y


*/: 01-font-switcher/index.js

/*
document.querySelector(???).addEventListener('click', makeBigger);
document.querySelector(???).addEventListener('click', makeSmaller);
*/

Reemplace el con el selector correcto, de modo que su función makeBigger y la función


makeSmaller se adjunten a los elementos DOM correctos. ???
Temario Horario
Por último, Asignaciones
modifique Lecturas y y makeSmaller
las funciones makeBigger Calendario Campuswire
para que modifiquen el(en
tamaño de fuente del elemento y delReferencias
elemento. Cuando hayas terminado,inglés)
tu página web
debería verse así: div.content h1

2. Conmutador de temas
Otra forma de hacer que tu sitio sea más accesible es crear una hoja de estilo o una clase
CSS de "alto contraste". Para este ejercicio, haga lo siguiente:

1. Abra y adjunte un controlador de eventos de clic a cada uno de los cuatro botones de
la barra de navegación. 02-theme-switcher/index.js

2. Cada controlador de eventos debe modificar la clase de la etiqueta para que coincida
con el tema del botón en el que se hizo clic. body
• Las clases de tema disponibles son: , y . Para ver los temas, abra el archivo y
desplácese hasta la parte inferior. ocean desert high-contrast style.css

3. Si se hace clic en el botón, simplemente desconfigure la clase en la etiqueta del


cuerpo. default

Cuando hayas terminado, tu página web debería verse así:


Temario Horario Asignaciones Lecturas y Calendario Campuswire (en
Referencias inglés)

3. Modo dislexia
En la parte 3, usarás JavaScript para crear un método para que las personas con dislexia
lean más fácilmente tu página web. Esta técnica se basa en este artículo: Agregar un modo
amigable para la dislexia a un sitio web. Complete las siguientes tareas:

1. En , cree una nueva clase llamada . style.css .dyslexia-mode

2. Siguiendo las recomendaciones del artículo anterior de Smashing Magazine,


asegúrese de que su clase haga lo siguiente:
• Ajuste el espaciado entre letras y palabras a la configuración recomendada
• Deshabilita las ligaduras
• Modificar el interlineado
• Modifique el grosor de la fuente (para que sea más audaz) o el color (para que
sea más oscuro)
• Aumentar el tamaño de la fuente
• Estreche el ancho de la línea (las líneas que son demasiado largas en la
dirección horizontal son difíciles de leer)

3. Cuando haya terminado, cree un botón y agregue la funcionalidad necesaria para


permitir que el usuario active y desactive el "Modo de dislexia".

4. Tenga en cuenta que Smashing Magazine también hace uso de localStorage para que
el sitio "recuerde" las preferencias de los usuarios para la próxima vez.

Cuando hayas terminado, tu página web debería verse así:


Temario Horario Asignaciones Lecturas y Calendario Campuswire (en
Referencias inglés)

¿Qué entregar?
Para enviar el Lab 6:

1. Envía todos tus archivos a GitHub


Copie la última versión de sus archivos en GitHub emitiendo los siguientes comandos:
Confirme y envíe la última versión de sus archivos a GitHub mediante la emisión de los
siguientes comandos:

git add . # stages all of your old and new files


git commit -m 'Commiting my completed lab06 files'
git status # to make sure that all of your files are being tracked
git push # sends your files to GitHub

2. Pega un enlace a tu repositorio en Canvas


Pegue un enlace a su repositorio de GitHub en el cuadro de texto de Canvas para Lab
6. webdev-labs
Temario Horario Asignaciones Lecturas y Calendario Campuswire (en
Referencias inglés)

También podría gustarte