Diferència entre revisions de la pàgina «M06UF3Q2. Exercicis de classe»
| Línia 74: | Línia 74: | ||
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: | 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: | ||
*https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_copy_clipboard2 | *https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_copy_clipboard2 | ||
| + | |||
| + | Però aquí no fem servir ben bé l'event ''copy''. Mira't també per al teu interès el següent enllaç: | ||
| + | *https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_oncopy | ||
=Entrega= | =Entrega= | ||
Revisió del 16:52, 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
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ç:
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
