Parcial Web Tres Arroyos
Parcial Web Tres Arroyos
Parcial Web Tres Arroyos
Parcial - WEB 1
15 JUNIO 2023 : Sede Tres Arroyos
Teoría General
1. Describa brevemente para qué sirve la Web. ¿Cuál es el rol de cada tecnología web que conoce?
(HTML, CSS y JS). Especificar para cada tecnología cual se ejecuta del lado del cliente y cual del
lado del servidor.
La Web sirve para publicar información de manera distribuida tanto estática como
generada dinámicamente, ofrecer una interfaz para otros sistemas, y
funcionar como plataforma estandarizada para desarrollar aplicaciones.
Las tecnologias web HTML, CSS y JS se ejecutan del lado del cliente. HTML sirve para dar estructura y
contenido, CSS para aplicar estilos visuales y JS para asignar comportamiento.
E. El DOM es:
1. Una interfaz para determinar las dimensiones del modelo de cajas.
2. Un modelo de documento que permite comprender la estructura de un HTML mediante un árbol.
3. Un lenguaje para localizar elementos en una estructura HTML
1
3. HTML y CSS : Analice el siguiente código HTML + CSS
<body> body {
<header> font-family: Times;
<h1>Magazine Tres Arroyos</h1>
color: white;
font-style: normal;
</header>
background-color: black;
<main> }
<aside> h1, p.resaltado {
<h2 class="destacado">Farmacias de Turno</h2> color: blue;
}
<p class="resaltado"><span>Farmacias abiertas hoy</p>
h2.destacado, ul li {
<ul> color: green;
<li>Mendoza 534</li> font-family: Verdana;
<li>San Lorenzo 1034</li> }
</ul> span {
font-style: italic;
</aside>
}
<article> span.destacado {
<h2>Noticias Locales</h2> color: yellow;
<p>Elecciones Municipales: }
<span class="destacado">15 de Julio</span>
footer p {
font-family: Verdana;
</p>
color: red;
</article> }
<article> aside {
<h2>Noticias Deportivas</h2> width: 480px;
height: 380px;
<p><span>Se terminarán las refacciones del estadio</span></p>
border: 2px solid orange;
</article> padding: 5px;
</main> margin-top: 15px;
<footer> margin-bottom: 5px;
<p>Magazine Tres Arroyos - 2023</p> margin-left: 5px;
margin-right: 5px;
</footer>
}
</body> @media only screen and (min-width:
1200px){
main {
display: flex;
flex-direction: row;
}
aside {
width: 530px;
height: 430px;
}
}
a. Indique a continuación con qué fuente, color y estilo de letra se verá cada parte del texto:
2
b. Empleando el concepto de Box-Model determine el tamaño de la caja <aside> en mobile y en
desktop
c. Dibuje con un diagrama de cajas simple como se vería la estructura interna del elemento
<main> en mobile y desktop
Mobile
<aside>
<article>
<article>
Desktop
3
4. JS y JSON
Analice el siguiente código HTML + JS
HTML let btn = document.querySelector("#btn");
<input type="text" id="cant"> btn.addEventListener("click", visualizar);
<button id="btn">Enviar</button>
function visualizar(){
let c = 0;
JS
let arreglo = [ let g = parseInt(document.querySelector("#cant").value);
{ for(let i = 0; i<arreglo.length; i++){
"alumno" : "Perez Pedro", if(arreglo[i].calificacion >= g){
"calificacion" : 10, console.log(arreglo[i].alumno);
"legajo" : 456 console.log(arreglo[i].calificacion);
}, c = c + 1;
}
{
"alumno" : "Garcia Juana", }
"calificacion" : 8, console.log(c);
"legajo" : 412 }
},
{
" "alumno" : "Gomez Camila",
"calificacion" : 5,
"legajo" : 645
},
{
"alumno" : "Martinez Tomás",
"calificacion" : 2,
"legajo" : 459
},
{
"alumno" : "Juarez Gabriela",
"calificacion" : 9,
"legajo" : 556
}
a. Indique qué se verá por consola al enviar por el form el número 11.
Respuesta: 0
b. Indique qué se verá por consola al enviar por el form el número 7.
Respuesta:
4
5. HTML, CSS, JS, JSON
Se desea implementar una página que permita ir ingresando alumnos solo con sus nombres y
calificaciones a través de un formulario. Los alumnos se deben ir agregando uno por uno mediante un
botón “Agregar” y mediante un segundo botón “Ver” se deberá mostrar el listado de alumnos donde
aquellos que tengan calificación menor a 3 se muestran en color rojo.
a. Donde y como vincula los archivos css y js. Especifique las rutas pensando en un proyecto con la siguiente
estructura:
CSS
<head>
<link rel="stylesheet" href="css/style.css">
</head>
JS
<script src="js/js.js"></script>
</body>
</ul>
JS: js.js
5
let arreglo = []; Ayuda JS:
document.querySelectorAll
let btn_agregar = document.querySelector("#btn_agregar"); document.querySelector
let btn_mostrar = document.querySelector("#btn_ver"); document.getElementsByClassName
let lista = document.querySelector("#lista"); document.getElementsByTagName
document.getElementById
btn_agregar.addEventListener("click", agregar); innerHTML
btn_mostrar.addEventListener("click", mostrar); classList.toggle
classList.add
classList.remove
function agregar(){ pop
let alumno = document.querySelector("#alumno").value; push
let calificacion = parseInt(document.querySelector("#calificacion").value);
let objeto = {
"alumno": alumno,
"calificacion" : calificacion
}
arreglo.push(objeto);
}
function mostrar(){
lista.innerHTML = "";
for(let i = 0; i<arreglo.length; i++){
if(arreglo[i].calificacion < 3 ){
lista.innerHTML += "<li class='destacado'>"+ arreglo[i].alumno + "</li>";
}
else {
lista.innerHTML += "<li>"+ arreglo[i].alumno + "</li>";
}
}
}
CSS: style.css
.destacado {
color: red;
}