M06UF3Q2. Exercicis de classe - Historial de revisió

Joan: /* Exercici 3: drag and drop */

2021-11-18T18:27:42Z

Exercici 3: drag and drop

Joan: /* Exercici 1: separació de codi html, js, css */

2021-11-18T18:22:07Z

Exercici 1: separació de codi html, js, css

Joan: /* Exercici 3: drag and drop */

2021-11-17T12:05:21Z

Exercici 3: drag and drop

Joan: /* Entrega */

2021-11-17T09:37:05Z

Entrega

Joan: /* Exercici 2: Apollo 11 Guidance Computer (AGC) */

2021-11-17T09:35:29Z

Exercici 2: Apollo 11 Guidance Computer (AGC)

Joan: /* Exercici 2: Apollo 11 Guidance Computer (AGC) */

2021-11-16T16:52:14Z

Exercici 2: Apollo 11 Guidance Computer (AGC)

Joan: /* Exercici 1: separació de codi html, js, css */

2021-11-16T16:50:04Z

Exercici 1: separació de codi html, js, css

Joan: /* Exercici 1: separació de codi html, js, css */

2021-11-16T16:12:41Z

Exercici 1: separació de codi html, js, css

Joan: 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:...».

2021-11-16T16:11:29Z

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:...».

Pàgina nova

=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:

<pre>
<!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>
</pre>
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.
=Entrega=
Entrega al Classroom, en format pdf o google docs, dels codis generats i dels resultats obtinguts. Captures de pantalla.

{{Autor}}, novembre 2021

@@ Línia 127: / Línia 127: @@
 '''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)

@@ Línia 65: / Línia 65: @@
 .../img
 </pre>
 ==Exercici 2: Apollo 11 Guidance Computer (AGC)==
 *https://github.com/chrislgarry/Apollo-11/tree/master/

← Versió més antiga		Revisió del 12:05, 17 nov 2021
Línia 124:		Línia 124:

	'''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).		'''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=

@@ Línia 77: / Línia 77: @@
 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=

@@ 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:
 *https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_copy_clipboard2
 =Entrega=

@@ Línia 126: / Línia 126: @@
 =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. 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.
 {{Autor}}, novembre 2021