Entorns online per executar codi Javascript

De Wikijoan
Revisió de 14:26, 24 oct 2018; Joan (Discussió | contribucions)
(dif) ←Versió més antiga | Versió actual (dif) | Versió més nova→ (dif)
Dreceres ràpides: navegació, cerca

Contingut

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

Desenvolupament

Javascript nadiu. NodeJS

$ 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);  
    }
}
$ node taules_multiplicar.js

Taules de multiplicar
=====================
0 * 0 = 0
0 * 1 = 0
0 * 2 = 0
0 * 3 = 0
...

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:

<!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>

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:

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.

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:

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

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:

<h1>Taules de multiplicar</h1>
<p id="resultat"></p>

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

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;

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:

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


creat per Joan Quintana Compte, octubre 2015

Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
Institut Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines