M06UF3Q2. Exercicis de classe
Contingut
Introducció
Hem continuat amb la teoria del DOM. A partir del que s'ha vist a la classe d'avui, faràs els següents exercicis.
Tasques a realitzar
Exercici 1: separació de codi html, js, css
Partim d'un codi que hem vist a classe:
<!DOCTYPE html>
<html>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
</style>
<body>
<p><button onclick="myMove()">Click Me</button></p>
<div id ="container">
<div id ="animate"></div>
</div>
<script>
function myMove() {
let id = null;
const elem = document.getElementById("animate");
let pos = 0;
clearInterval(id);
id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + "px";
elem.style.left = pos + "px";
}
}
}
</script>
</body>
</html>
Objectius:
- separar totalment el codi html (fitxer index.html), el codi javascript (fitxer js/index.js), i el codi CSS (fitxer css/style.css)
- el codi <button onclick="myMove()"> també ha de desaparèixer. Això ho farem amb el addEventListener, que és molt important.
D'aquesta manera, no quedarà ni rastre de codi javascript en el teu codi html.
Una possibilitat d'organitzar el teu projecte és tenir les següents carpetes:
/html .../css .../js .../php .../img
solució
(TBD)
Exercici 2: Apollo 11 Guidance Computer (AGC)
En aquest enllaç podem trobar el codi original de la missió Apollo XI que va portar l'home a la Lluna (1969). És codi amb llenguatge ensamblador. Per exemple:
En el Github pots veure que tens el botó copiar per copiar el codi font d'aquest fitxer al porta-papers.
Fes una cosa similar. En un DIV omple el codi font d'aquest fitxer, i habilita un botó per copiar el codi. Per saber com es copia al portapapers pots fer servir per exemple el següent codi:
Però aquí no fem servir ben bé l'event copy. Mira't també per al teu interès el següent enllaç:
Exercici 3: drag and drop
Partim del següent codi que funciona correctament: script arrossega.html:
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Arrossega (drag) la imatge dins del rectangle</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="./img/logo_balmes.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>
En aquest codi pots arrossegar la imatge dins del rectangle, i podem detectar l'acció de deixar anar (drop).
NOTA: ev.preventDefault(); : Cancela el evento si este es cancelable, sin detener el resto del funcionamiento del evento, es decir, puede ser llamado de nuevo.
TASCA: A partir d'aquest codi, definiràs tres rectangles, de colors blau, vermell i verd. Podràs posar la imatge dins dels rectangles, i sortirà un missatge que dirà: el logo del Balmes està en el rectangle vermell (o el color que sigui).
solució
script arrossega_exercici.html' (més endavant)
Entrega
Entrega al Classroom, en format pdf o google docs, dels codis generats i dels resultats obtinguts. Captures de pantalla. No cal entregar tot el codi, només el codi més rellevant. I es tracta de donar l'evidència de què el codi l'has fet tu i l'has provat en la teva màquina.
creat per Joan Quintana Compte, novembre 2021
