Pràctica de detecció d'errors i ús del IDE

De Wikijoan
Dreceres ràpides: navegació, cerca

Contingut

Introducció

En aquesta pràctica reflexionarem sobre l'ús del IDE. S'espera que l'alumne practiqui els procediments que encaminen a desenvolupar amb rapidesa i sense errors. Farem servir les eines de desenvolupament integrades dins del navegador (consola, inspector). Pots fer servir tan el Google Chrome com el Mozilla Firefox.

Per això partim d'un exemple que busca la simplicitat i la completitud (incloent conceptes que encara no hem vist a classe, i d'altres que no pertanyen estrictament a l'assignatura). És una pàgina web completa perquè inclou html, javascript i css. Es tracta de validar un NIF (o CIF o NIE).

Desenvolupament

Disposem d'un codi Javascript que conté les funcions per validar el NIF. En el codi s'ha introduït expressament una sèrie d'errors que hauràs de corregir.

Pots descarregar els fitxers per fer la pràctica:

Consta del fitxer html, el fitxer .js i el fitxer .css. Fixa't dins el codi validacio.html com fem referència als fitxers externs script.js i estil.css.

Tasques

1. En el codi s'han introduït errors de sintaxi en els fitxers javascript i css. Fins a 7 errors en el codi Javascript. En el cas del javascript els errors no permeten l'execució correcta del codi. Hauràs de llistar els errors i corregir-los. L'objectiu és poder validar el nif/cif/nie correctament, ja sigui obtenint un valor CORRECTE (en verd) o INCORRECTE (en vermell). Recorda que un dels objectius de l'assignatura no és només programar bé, sinó també programar ràpid introduïnt uns procediments encaminats a programar sense errors i a localitzar ràpidament les falles.

2. Visualitza en la consola del navegador el valor del NIF que estem passant a la funció (no facis un alert)

console.log(a);

3. Visualitza en la consola el resultat de la validació: correcte o incorrecte

4. Des del inspector de les eines de desenvolupador del navegador, canviar el color de la caixa de text (que originalment té un color rosat). Canviar també el color i el tamany de la lletra de la capçalera h3.


NOTA: Compte amb les cometes dobles i senzilles! No és el mateix (incorrecte)

<input type="button" onclick="valida_nif_cif_nie(document.getElementById("nif").value)" name="validar" value="Validar"><br />

que (correcte)

<input type="button" onclick="valida_nif_cif_nie(document.getElementById('nif').value)" name="validar" value="Validar"><br />

Vam veure que en Javascript podem utilitzar tan cometes dobles com senzilles. Ara bé, quan integrem el codi Javascript amb el HTML, això cobra molta importància.

NOTA: la validació del NIF està malament (sempre dóna 1). En la línia 58 trobem:

if( letra = letradni )

No és un error de sintaxi... és un error de concepte. Evidentment, ha de ser:

if( letra == letradni )

Així doncs, aquest error era més difícil de trobar.

Ús del IDE

Per a l'assignatura no hi ha un IDE de preferència. Cada alumne ha de buscar, experimentar i discutir amb els companys, amb l'objectiu de tenir unes eines de treball que li permetin treballar amb rapidesa i comoditat.

Els alumnes treballen amb: Visual Studio Code (VS Code), Sublime Text, Brackets, Atom, NetBeans,...

Un bon IDE haurà de tenir un bon sistema de plugins i/o extensions que afegeixin funcionalitat.

Instal·lació del VS Code a Ubuntu:

Getting started:

Cas d'ús: VS Code i el plugin Live Server

Per exemple, una funcionalitat interessant que augmenta la productivitat és utilitzar dues pantalles, en una pantalla tenim el navegador i el layout de la nostra web, en l'altre pantalla tenim el VS Code (IDE). Volem que quan fem canvis en el IDE, aquests es propaguin automàticament (o ràpidamet) a la web.

Instal·lem el plugin Live Server (de Ritwick Dey). Això és fàcil doncs la gestió dels plugins es fa des del mateix IDE.

Més informació del plugin:

El funcionament és molt senzill: en la barra de tasques hem de clicar: Go Live. Per veure els canvis que estem editant en el IDE, el més ràpid és Ctrl-S (guardar), i els canvis es propaguen automàticament. En el IDE (File > Preferències) també hi ha la possibilitat de fer un autosave (però un Ctrl-S és ben senzill i ràpid).

Entrega

Els alumnes entregaran al Schoology tots els fitxers generats (fitxers html). S'empaquetaran tots aquests fitxers i es pujaran al Moodle dins del termini d'entrega de la pràctica.

Recorda la normativa per entregar les pràctiques al Google Classroom: ASIX-M10-UF2#Normativa_d.27entrega_de_les_pr.C3.A0ctiques_al_Google_Classroom


creat per Joan Quintana Compte, Octubre 2018

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