Pràctica de Firebug

De Wikijoan
Dreceres ràpides: navegació, cerca

Contingut

Introducció

En aquesta pràctica de Firebug s'espera que l'alumne practiqui els procediments que encaminen a desenvolupar amb rapidesa i sense errors. I s'ha demostrat que Firebug és una eina que ajuda a la programació web, una eina totalment integrada en el navegador Firefox.

Per això partim d'n 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

NOTA: Els alumnes que utilitzen Google Chrome no cal que utilitzin Firebug, sinó les eines integrades dins de Google Chrome i que persegueixen la mateixa finalitat.

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 Firebug 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. Configura el Firebug per tal de què el teu editor per defecte sigui aquell que estàs utilitzant. Per ex: sublime, gedit,...

5. Des del Firebug, canviar el color de la caixa de text (que originalment té un color rosat).

6. Des del Firebug, canviar el color i el tamany de la lletra de la capçalera h3.

7. Segurament se t'ocurriran altres exercicis a realitzar. Practica tot el que vulguis i comparteix les teves descobertes amb els companys.


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.

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