Mòduls amb Javascript

Mòduls. Introducció

• https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Modules
• https://github.com/mdn/js-examples

$ unzip js-examples-master.zip

Anem al primer exemple:

$ cd js-examples-master/modules/basic-modules/
$ ls
index.html
main.js
modules/
    canvas.js
    square.js

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.

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:

• http://ruta_apache/index.html

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:

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 };

script main.mjs:

import { name, instanciar, reportArea, reportPerimeter } from './square.mjs';

let square1 = instanciar(100, 'blue');
reportArea(square1.length);
reportPerimeter(square1.length);

I si fem:

$ node main.mjs 
10000
400

Podem provar aquest codi en l'espai que tens en el servidor vps-89148e22.vps.ovh.net.

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

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();

En realitat, més que un cercle estàs dibuixant un arc de circunferència. Quan l'angle són 360º (=2*Pi) aleshores l'arc és una circunferència sencera.

El mètode arc() té 5 paràmetres: la posició x i y del centre, el radi, l'angle on comença l'arc, i la longitud de l'arc (en graus).

Basan-te en el codi que has vist a square.js, faràs el script circle.js on definiràs els següents mètodes:

• draw()
• randomCirlce()
• reportArea()
• reportPerimeter

Seguint el mateix esquema, programaràs el script index.html (que contindrà dos canvas diferents) i el script main.js.

1. En el primer canvas, dibuixaràs l'arc de Sant Martí (semicercles concèntrics). En una matriu posaràs els colors de l'Arc de Sant Martí (https://www.krishnamani.in/color-codes-for-rainbow-vibgyor-colours/), i tot recorrent aquesta matriu aniràs construint l'Arc de Sant Martí.

2. En el segon canvas dibuixaràs 10 cercles aleatoris amb diferents graus de gris (serà aleatori el centre, el radi i el nivell de gris).

Entrega al Classroom

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.

---

creat per Joan Quintana Compte, març 2022