Joan: /* Javascript nadiu. Spidermonkey */

2018-10-24T14:26:39Z

Javascript nadiu. Spidermonkey

Pàgina nova

=Introducció=
En una pràctica anterior has instal.lat en la teva màquina el motor de Javascript SpiderMonkey i t'has familiaritzat amb l'entorn de consola. Has vist i entès com el llenguate Javascript funciona i existeix fora de l'entorn web.

Agafant com a cas d'exemple el llistat de les taules de multiplicar, escriurem aquest exemple amb diferents entorns.

Primer de tot amb codi Javascript nadiu,# amb el Spidermonkey

*En el Spidermonkey, si vols fer les taules de multiplicar, farem:
*Després farem una pàgina web, que la podrem obrir des del nostre navegador preferit.
*I en els exemples 3, 4, 5 i 6, seguint amb un entorn web, veurem com tenim diferents utilitats d'edició online que ens permeten centrar-nos en el codi Javascript i no haver de preocupar-nos de la integració amb el codi HTML.
=Desenvolupament=
==Javascript nadiu. NodeJS==
<pre>
$ joe taules_multiplicar.js

console.log ("Taules de multiplicar");
console.log ("=====================");
var x, y;
for (x=0; x<10; x++) {
for (y=0; y<10; y++) {
console.log(x + " * " + y + " = " + x*y);
}
}
</pre>
<pre>
$ node taules_multiplicar.js

Taules de multiplicar
=====================
0 * 0 = 0
0 * 1 = 0
0 * 2 = 0
0 * 3 = 0
...
</pre>
Recordem que la funció ''print'' no és de Javascript, sinó que és la manera com l'entorn del Spidermonkey redirigeix el resultat cap a la sortida estàndard.

==Entorn HTML. Pàgina web==
Integrem el codi HTML amb el script, i com a resultat tenim la pàgina web ''taules_multiplicar.html'':
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Taules de multiplicar</title>
</head>
<body>

<h1>Taules de multiplicar</h1>
<p id="resultat"></p>
<script>
var res = "";
var x, y;
for (x=0; x<10; x++) {
res += "<br />";
for (y=0; y<10; y++) {
res += x + " * " + y + " = " + x*y + "<br />";
}
}

document.getElementById("resultat").innerHTML = res;
</script>

</body>
</html>
</pre>
Per visualitzar el resultat hem d'utilitzar un navegador web.
==Editor online de Javasctipt. Cas 1: el conegut w3cschools==
A classe ja ens hem familiaritzat amb el curs de Javascript de '''w3cschools'''. Has vist com fàcilment podem editar el codi i veure a l'instant els canvis que proposes. Per fer les taules de multiplicar n'hi ha prou en anar en alguns dels exemples, i canviar el codi. Per exemple, pots anar a la següent url:
*http://www.w3schools.com/js/tryit.asp?filename=tryjs_myfirst
i canviar el codi per el que acabes de fer en l'apartat anterior.

Aquesta és una de les maneres més ràpides de provar el codi sense haver d'editar cap fitxer de text.
==Editor online de Javasctipt. Cas 2: curs online de Javascript de Codeacademy==
La següent url és el punt d'entrada del curs.
*https://www.codecademy.com/tracks/javascript
No cal registrar-se, només cal fer ''Start'', i ja tens un entorn de proves de codi Javascript. Aquest editor està pensat per a codi Javascript pur, no l'has de barrejar amb el codi HTML. A més, l'objecte ''console'' existeix i el pots fer servir. De fet, és la manera correcta per veure els resultats. Per tant, copia el següent codi a la finestra:
<pre>
console.log ("Taules de multiplicar");
console.log ("=====================");
var x, y;
for (x=0; x<10; x++) {
console.log('');
for (y=0; y<10; y++) {
console.log(x + " * " + y + " = " + x*y);
}
}
</pre>
==Editor online de Javasctipt. Cas 3: entorn http://jsfiddle.net/==
A http://jsfiddle.net/ (no cal registrar-se) tens quatre finestres: ''HTML'', ''CSS'', ''Javascript'' i ''Result''. Adaptant el codi anterior de la teva pàgina HTML, a la finestra ''HTML'' posaràs:
<pre>
<h1>Taules de multiplicar</h1>
<p id="resultat"></p>
</pre>
No cal posar les etiquetes ''html'', ''head'', ''title'', ''body''. El que es cerca és la màxima simplificació.

La finestra ''CSS'' la pots deixar buida, i a la finestra ''Javascript'' ficaràs el codi que anava dins l'etiqueta ''<script>'' (però ara no fiquis aquesta etiqueta):
<pre>
var res = "";
var x, y;
for (x=0; x<10; x++) {
res += "<br />";
for (y=0; y<10; y++) {
res += x + " * " + y + " = " + x*y + "<br />";
}
}

document.getElementById("resultat").innerHTML = res;
</pre>
Finalment cliques ''Run'' i t'apareixen les taules de multiplicar en la finestra de resultats. Internament es fa una integració del codi HTML i Javascript. Aquesta aproximació és vàlida en el sentit que una de les coses que perseguirem al llarg del curs és la separació dels continguts, el disseny i del comportament.

Fixa't que ''console.log'' no funciona (compte! sí que funciona en la consola del teu navegador web, en la consola del Firebug). El que haurem de fer és escriure el resultat en una capa o paràgraf, com féiem a w3schools.

==Editor online de Javasctipt. Cas 4: entorn CodePen==
L'entorn '''CodePen''' està de moda. Un dels avantatges és que podem compartir fàcilment els exemples Javascript amb una url. Entrem a '''codepen.io''' i ens haurem de registrar (hi ha l'opció gratis, també hi ha opcions de pagament). Quan cliquem sobre l'etiqueta ''New Pen'' tenim un entorn similar a ''jsfiddle.net'': finestres HTML, CSS, Javascript i Result. I la manera de procedir és exactament com a jsfiddle.net (el codi que has d'escriure en les dues finestres és exactament el mateix).

Despista una mica que no trobes el botó ''Run'', i el codi s'executa automàticament. Trobaràs el botó ''Run'' a Setttings > Behaviour > Want a Run button? Has de desmarcar ''Auto Update Preview''. Tens opcions interessants com la possibiltiat d'utiltizar pre-processadors de Javascript (TBD), incloure llibreries com ara ''JQuery'', netejar el codi (''Tidy''), o un analitzador de codis de Javascript. Ara bé, aquesta última funció el professor ha detectat un error: per ex, ''document.getElementByID'' no ho detecta com a error, quan el correcte és ''document.getElementById''. Ja saps que les minúscules i majúscules importen!

El que és més interessant de ''CodePen'' és la possibilitat de compartir el codi. Aquest exemple de les taules de multiplicar el pots trobar a:
*http://codepen.io/joanillo/pen/PPjWaN
=Conclusió=
Ja veus que tens moltes opcions per practicar el codi Javascript. Fins i tot no és necessari un entorn de programació (IDE) per crear el teu codi. Com sempre, és l'alumne el que ha de trobar un flux de treball que li permeti augmentar la productiviat, i detectar i depurar ràpidament els errors.

Paraules clau (keywords):
*flux de treball (work flow)
*conjunt d'eines a disposar (toolbox)
*Quan programem hem de cercar l'eficiència i la rapidesa (per programar i per depurar els errors)

{{Autor}}, octubre 2015

Entorns online per executar codi Javascript - Historial de revisió

Joan: /* Javascript nadiu. Spidermonkey */