Mòduls amb Javascript - Historial de revisió

Joan: /* Tasques a realitzar */

2022-03-31T17:39:12Z

Tasques a realitzar

Joan: /* Entrega al Classroom */

2022-03-27T22:42:53Z

Entrega al Classroom

Joan: /* Tasques a realitzar */

2022-03-27T22:41:22Z

Tasques a realitzar

Joan a 09:23, 23 març 2022

2022-03-23T09:23:25Z

Joan: /* Cas pràctic. Dibuixar un mapa amb la llibreria OpenLayers */

2022-03-23T09:23:04Z

Cas pràctic. Dibuixar un mapa amb la llibreria OpenLayers

Mostra els canvis

Joan: /* Mòduls. Introducció */

2022-03-23T09:21:29Z

Mòduls. Introducció

Joan: /* Mòduls. Introducció */

2022-03-23T09:18:18Z

Mòduls. Introducció

Joan a 09:15, 23 març 2022

2022-03-23T09:15:03Z

Joan: /* Feina per l'alumne */

2022-03-23T08:21:17Z

Feina per l'alumne

Joan: /* Dibuixar tots els dòlmens. Solució */

2022-03-23T08:17:39Z

Dibuixar tots els dòlmens. Solució

@@ Línia 65: / Línia 65: @@
 =Tasques a realitzar=
 L'exemple mínim per dibuixar un cercle en un canvas el trobaràs per exemple a:
 *https://www.w3schools.com/tags/canvas_arc.asp

@@ Línia 91: / Línia 91: @@
 =Entrega al Classroom=
-(TBD)
+Entregaràs al Classroom, dins del termini, un pdf amb dues captures de pantalla dels dos canvas, el codi del script ''circle.js'', i el codi del fitxer ''main.js''.
 {{Autor}}, març 2022

@@ Línia 65: / Línia 65: @@
 =Tasques a realitzar=
-(TBD)
+L'exemple mínim per dibuixar un cercle en un canvas el trobaràs per exemple a:
 =Entrega al Classroom=
 (TBD)
 {{Autor}}, març 2022

@@ Línia 68: / Línia 68: @@
 =Entrega al Classroom=
 (TBD)
 {{Autor}}, març 2022

@@ Línia 18: / Línia 18: @@
 Trobem els ''exports'' en els scripts de la carpeta ''modules/'': ''canvas.js'' i ''square.js''. Les funcions definides en aquests mòduls s'importen en el ''main.js'', que és el fitxer principal de Javascript. El ''index.html'' és el punt d'entrada de la web/html, i fa referència al ''main.js'' com has fet moltes vegades.
-Debes prestar atención a las pruebas locales — si intentas cargar el archivo HTML localmente (es decir, con una URL file:///), te encontrarás con errores de CORS debido a los requisitos de seguridad del módulo JavaScript. Necesitas hacer tus pruebas a través de un servidor.
+Has de tindre en compte els problemes que et trobaràs amb les proves locals (si intentes carregar l'arxiu HTML localment, és a dir, amb una URL file:///, ettrobaràs amb errors de CORS degut als requisits de seguretat del mòdul JavaScript. Necessites fer les teves proves en el teu servidor web:
 =Utilitzar mòduls a la consola.=
 En aquesta cas hem d'utilitzar l'extensió ''.mjs'' (mòduls de js en comptes de .js). El codi mínim i que no té interfície gràfica seria:

← Versió més antiga		Revisió del 09:18, 23 març 2022
Línia 21:		Línia 21:

	Comprovar que el primer exemple funciona correctament (''basic-modules''), i comprovar que funciona la resta d'exemples.		Comprovar que el primer exemple funciona correctament (''basic-modules''), i comprovar que funciona la resta d'exemples.
		+	=Utilitzar mòduls a la consola.=
		+	En aquesta cas hem d'utilitzar l'extensió ''.mjs'' (mòduls de js en comptes de .js). El codi mínim i que no té interfície gràfica seria:
		+
		+	script ''square.mjs'':
		+	<pre>
		+	const name = 'square';
		+
		+	function instanciar(length, color) {
		+	return {
		+	length: length,
		+	color: color
		+	};
		+	}
		+
		+	function reportArea(length) {
		+	console.log(length*length);
		+	}
		+
		+	function reportPerimeter(length) {
		+	console.log(4*length);
		+	}
		+
		+	export { name, instanciar, reportArea, reportPerimeter };
		+	</pre>
		+
		+	script ''main.mjs'':
		+	<pre>
		+	import { name, instanciar, reportArea, reportPerimeter } from './square.mjs';
		+
		+	let square1 = instanciar(100, 'blue');
		+	reportArea(square1.length);
		+	reportPerimeter(square1.length);
		+	</pre>
		+
		+	I si fem:
		+	<pre>
		+	$ node main.mjs
		+	10000
		+	400
		+	</pre>
		+	Podem provar aquest codi en l'espai que tens en el servidor '''vps-89148e22.vps.ovh.net'''.

	=Cas pràctic. Dibuixar un mapa amb la llibreria OpenLayers=		=Cas pràctic. Dibuixar un mapa amb la llibreria OpenLayers=

← Versió més antiga		Revisió del 09:15, 23 març 2022
Línia 290:		Línia 290:
	Entregaràs al Classroom la teva solució, dins del termini previst per fer-ho.		Entregaràs al Classroom la teva solució, dins del termini previst per fer-ho.

−	~~=Utilitzar mòduls a la consola. Actualitzar Node=~~	+	{{Autor}}, març 2022
−	~~El codi mínim i que no té interfície gràfica seria:~~
−
−	~~script ''square.js'':~~
−	~~<pre>~~
−	~~const name = 'square';~~
−
−	~~function instanciar(length, color) {~~
−	~~return {~~
−	~~length: length,~~
−	~~color: color~~
−	};
−	}
−
−	~~function reportArea(length) {~~
−	~~console.log(length*length);~~
−	}
−
−	~~function reportPerimeter(length) {~~
−	~~console.log(4*length);~~
−	}
−
−	~~export { name, instanciar, reportArea, reportPerimeter };~~
−	~~</pre>~~
−
−	~~script ''main.js'':~~
−	~~<pre>~~
−	~~import { name, instanciar, reportArea, reportPerimeter } from './square.mjs';~~
−
−	~~let square1 = instanciar(100, 'blue');~~
−	~~reportArea(square1.length);~~
−	~~reportPerimeter(square1.length);~~
−	~~</pre>~~
−
−	~~I si fem:~~
−	~~<pre>~~
−	~~$ node main.js~~
−	~~import { name, instanciar, reportArea, reportPerimeter } from './square.js';~~
−	^
−
−	~~SyntaxError: Unexpected token {~~
−	~~at Module._compile (internal/modules/cjs/loader.js:723:23)~~
−	~~...~~
−	~~</pre>~~
−	~~dóna error, no sap què és aquesta sintaxi. I és que cal tenir el node ben actualitzat. Com es comenta a:~~
−	*https://stackoverflow.com/questions/39436322/node-js-syntaxerror-unexpected-token-import
−	~~això funciona en la versió 13. Jo tinc la versió:~~
−	~~<pre>~~
−	~~$ node --version~~
−	~~v10.19.0~~
−	~~</pre>~~
−	~~i per tal de què funcioni el codi s'ha de fer:~~
−	~~#posar els scripts amb extensió .mjs en comptes de .js~~
−	~~#utilitzar l'opció --experimental-modules~~
−	~~<pre>~~
−	~~$ node --experimental-modules main.mjs~~
−	~~(node:5212) ExperimentalWarning: The ESM module loader is experimental.~~
−	~~10000~~
−	~~400~~
−	~~</pre>~~
−	~~==Actualitzar Node a la última versió==~~
−	*https://phoenixnap.com/kb/update-node-js-version
−	~~1. First, clear the npm cache:~~
−	~~<pre>~~
−	~~$ npm cache clean -f~~
−	~~</pre>~~
−	~~2. Install n, Node’s version manager:~~
−	~~<pre>~~
−	~~$ sudo npm install -g n~~
−	~~</pre>~~
−	~~3. With the n module installed, you can use it to:~~
−	~~<pre>~~
−	~~$ n latest~~
−	~~$ sudo n latest~~
−	~~installing : node-v16.1.0~~
−	~~mkdir : /usr/local/n/versions/node/16.1.0~~
−	~~fetch : https://nodejs.org/dist/v16.1.0/node-v16.1.0-linux-x64.tar.xz~~
−	~~installed : v16.1.0 (with npm 7.11.2)~~
−
−	~~Note: the node command changed location and the old location may be remembered in your current shell.~~
−	~~old : /usr/bin/node~~
−	~~new : /usr/local/bin/node~~
−	~~To reset the command location hash either start a new shell, or execute PATH="$PATH"~~
−	~~</pre>~~
−	~~Tanco la consola i n'obro una altra, i ara ja tenim la última versió:~~
−	~~<pre>~~
−	~~$ node --version~~
−	~~v16.1.0~~
−	~~</pre>~~
−	~~i podem provar el nostre codi, que ara ja funciona sense experimental:~~
−	~~<pre>~~
−	~~$ node main.mjs~~
−	~~10000~~
−	~~400~~
−	~~</pre>~~
−	~~ara bé, si vull utilitzar l'extensió .js, necessito un package.json:~~
−	~~<pre>~~
−	~~$ node main.js~~
−	~~(node:7055) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.~~
−	~~(Use `node --trace-warnings ...` to show where the warning was created)~~
−	~~/home/joan/main.js:1~~
−	~~import { name, instanciar, reportArea, reportPerimeter } from './square.js';~~
−	~~^^^^^^~~
−
−	~~SyntaxError: Cannot use import statement outside a module~~
−	~~</pre>~~
−	{{Autor}}, març ~~2021~~

@@ Línia 276: / Línia 276: @@
 </pre>
 O bé qualsevol altra informació que consideris d'interès (però han de ser nodes/punts, no vies). En cas de dubte, consultar el professor.
 Exemple real: mapa interactiu de les restes de la muralla medieval de Màlaga:
 *https://umap.openstreetmap.fr/es/map/muralla-medieval-de-malaga_563990#16/36.7246/-4.4135
 =Desplegament de l'aplicatiu=
 Mira aquest projecte similar:

@@ Línia 266: / Línia 266: @@
 *solució_v0: index_v0.html i main_v0.html. Pintem només una icona (un dolmen) sobre el mapa.
 *solució_v1: index_v1.html i main_v1.html. Pintem tots els dòlmens. En l'exercici anterior havies aconseguit pintar un marker (icona). Ara es tracta de recórrer tots els dòlmens, omplir tota la matriu, i posar una icona ben geolocalitzada per cada dolmen.
-*solució_v2: index_v2.html i main_v2.html. Volem ampliar la funcionalitat. Quan cliquem sobre el dolmen se'ns mostra una caixa de text amb el nom i el municipi del dolment.
+*solució_v2: index_v2.html i main_v2.html. Volem ampliar la funcionalitat. Quan cliquem sobre el dolmen se'ns mostra una caixa de text amb el nom i el municipi del dolmen.
 =Feina per l'alumne=