M06UF3Q2. Exercicis de classe
La revisió el 16:12, 16 nov 2021 per Joan (discussió | contribucions) (→Exercici 1: separació de codi html, js, css)
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
Entrega
Entrega al Classroom, en format pdf o google docs, dels codis generats i dels resultats obtinguts. Captures de pantalla.
creat per Joan Quintana Compte, novembre 2021
