Diferència entre revisions de la pàgina «M06UF3Q2. Exercicis de classe»
Salta a la navegació
Salta a la cerca
(Es crea la pàgina amb «=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:...».) |
|||
| Línia 56: | Línia 56: | ||
*el codi ''<button onclick="myMove()">'' també ha de desaparèixer. Això ho farem amb el ''addEventListener'', que és molt important. | *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. | 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: | ||
| + | <pre> | ||
| + | /html | ||
| + | .../css | ||
| + | .../js | ||
| + | .../php | ||
| + | .../img | ||
| + | </pre> | ||
| + | |||
=Entrega= | =Entrega= | ||
Entrega al Classroom, en format pdf o google docs, dels codis generats i dels resultats obtinguts. Captures de pantalla. | Entrega al Classroom, en format pdf o google docs, dels codis generats i dels resultats obtinguts. Captures de pantalla. | ||
{{Autor}}, novembre 2021 | {{Autor}}, novembre 2021 | ||
Revisió del 16:12, 16 nov 2021
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
