NF1 A1.2 - Introduccio A Javascript I Eines de Programacio en L'entorn Client

Curs 2017-2018 M06 – Desenvolupament Web En Entorn Client
UF1.- Sintaxi del llenguatge. Objectes predefinits del llenguatge

NF1 A1.2 - Introducció a Javascript i eines de programació en l'entorn client
Índex de continguts
1. Introducció.......................................................................................................2
2. Llenguatges basats amb guions (scripts)........................................................2
2.1. Avantatges i inconvenients...........................................................................2
3. JavaScript: característiques generals..............................................................3
3.1. JavaScript vs Java........................................................................................3
4. Creació de programes amb JavaScript...........................................................4
4.1. Sentències i comentaris................................................................................4
4.2. Assignacions i operadors: expressions........................................................5
a) Assignacions: expressions..............................................................................5
b) Operadors........................................................................................................5
Operadors aritmètics............................................................................................5
Operadors d’assignació.......................................................................................6
Operadors de comparació...................................................................................6
Operadors lògics..................................................................................................6
Operador typeof().................................................................................................7
Operador eval()....................................................................................................7
Altres Operadors..................................................................................................7
4.3. Variables: tipus i àmbits, conversió..............................................................8
a) Noms de les variables.....................................................................................8
b) Declaració de les variables..............................................................................8
c) Tipus les variables...........................................................................................8
d) Conversió de dades.........................................................................................9
5. Paraules reservades en JavaScript...............................................................10
6. Caràcters espcials amb Javascript................................................................11
7. Integració del codi amb les etiquetes HTML.................................................12
7.1. Rutes relatives i absollutes.........................................................................14
8. Eines de desenvolupament integrat per JavaScript (IDE)............................14
9. Per saber-ne més..........................................................................................15
Pàgina 1 de 15

1. Introducció.
Com hem comentat ja en el NF anterior JavaScript és un llenguatge de programació
interpretat, basat amb l'estàndard ECMAScript. Es defineix com orientat a objectes, basat en
prototips i dinàmic.
S'utilitza principalment en l’entorn client (client-side), implementat com a part d'un

navegador web permetent millores en la interfície d'usuari i pàgines web dinàmiques, encara
que existeix una forma de JavaScript del costat del servidor (Server-side JavaScript o SSJS). El
seu ús en aplicacions externes a la web, per exemple en documents PDF, aplicacions
d'escriptori (majoritàriament widgets) és també significatiu.
2. Llenguatges basats amb guions (scripts).

Un llenguatge de programació amb guions és una forma de llenguatge de programació
que se sol interpretar en comptes de compilar. Els programes convencionals es converteixen
permanentment en els arxius executables abans que s'executi. En canvi, els programes en
llenguatge de programació basat amb guions s'interpreten en el moment d'executar l'ordre, una
a una cada cop que s'executa.
Els llenguatges de script tenen la principal finalitat el millorar la gestió d'una aplicació
web, sent executats en el navegador de l'usuari, es a dir la part anomenada client.
En la majoria dels casos, és més fàcil escriure el codi en un llenguatge de scripting que
en un llenguatge compilat. No obstant això, els llenguatges d'script són més lents perquè les
instruccions no són manejats exclusivament pel processador d'instrucció bàsica. Llenguatges
de script permeten el desenvolupament del codi i l'aplicació de manera ràpida i poden
comunicar-se fàcilment amb els programes escrits en altres idiomes.
2.1. Avantatges i inconvenients.

- Avantatges:
1- El llenguatge de scripting és fàcil de llegir i interpretar.
2- El codi Javascript s'executa en el client de manera que el servidor no es sol·licitat

més del compte, d’aquesta manera s’alleugeren les tasques que ha de fer el servidor.
3- Són llenguatges que no calen ser compilats cada cop que s’ha realitzat una
modificació, facilitant les proves en el moment del desenvolupament de l’aplicació.
4- Permeten el desenvolupament del codi i l'aplicació de manera ràpida i poden

comunicar-se fàcilment amb els programes escrits en altres idiomes
- Inconvenients:
1- Els script tenen capacitats limitades, per raons de seguretat, per la qual cosa no és
possible fer tot amb Javascript, sinó que cal emprar-lo conjuntament amb altres llenguatges
evolucionats, possiblement més segurs, com PHP, HTML. Aquesta limitació és encara més
evident si volem operar en el maquinari de l'ordinador.
2- El codi és visible i pot ser llegit per qualsevol, fins i tot si està protegit amb les
lleis del copyright.
Pàgina 2 de 15

3- El codi del script s’ha de descarregar completament abans de poder ser executar i si
les dades que un script utilitza són molts (per exemple, un recull de cites que es mostrés de
manera casual), el temps que trigarà a descarregar-se serà molt llarg.
3. JavaScript: característiques generals.

Les característiques principals que poden ser considerades són:
 És un llenguatge de scripting.
 Ha ser dissenyat per afegir interactivitat a les pàgines HTML.
 És un llenguatge de programació lleuger.
 Sol ser incorporats directament en les pàgines HTML.
 JavaScript és un llenguatge interpretat (significa que els scripts s'executen
sense una compilació anterior).
 Tota persona pot utilitzar JavaScript sense necessitat d'adquirir una llicència.
JavaScript va ser pensat perquè ser un llenguatge segur. No permet l'ús de punters,
que és la causa més freqüent de violacions de seguretat. A més, en ser un llenguatge
interpretat, no hi ha problemes de temps de compilació i assignació de memòria, que és una
altra font potencial de violacions de la seguretat.
Les pàgines web creades amb JavaScript tenen l'inconvenient de permetre la

visualització del seu codi font complet. Aquesta característica permet a tots els usuaris
observar la pàgina copiar aquesta informació. L'única forma de protegir l'autoria es incloure
entre les seves línies una nota de copyright.
JavaScript s'executa a l'ordinador client, deixant el servidor lliure d'aquesta ocupació.

Quan el codi arriba al ordinador client és el navegador qui es n'ocupa de interpretar-lo i
executar-lo. L'execució del codi en el client evita al servidor l'esforç del processament i a la
xarxa de la transmissió dels resultats. Aquestes característiques permeten que els processos
que es desencadenen amb l'execució del codi siguin més ràpids.
Les diferents versions de JavaScript són:
https://www.w3schools.com/js/js_versions.asp
3.1. JavaScript vs Java.

Java és un llenguatge de programació que es pot utilitzar per a aplicacions o per a
petits programes anomenats applets. Els applets, al sortir a la pàgina web, els carrega el
navegador en segon pla juntament amb el document HTML. Ofereixen la possibilidad d'una
gran varietat d'interaccions i estan formats per arxius class que es guarden separats en un
mateix directori. Java és un llenguatge orientat a objectes la lògica i sintaxi recorden molt a les
de C++. Entre aquests dos llenguatges ha un element diferenciador fonamental i és que Java
és un llenguatge que s'executa en un processador virtual, no en un de real com C++.
JavaScript, en canvi, és un llenguatge script que sempre apareix en text clar. Fins que
no arriba al navegador, no s'interpreta el seu codi font línia per línia. D'aquesta manera queda
garantida la independència de JavaScript davant de la plataforma utilitzada en cada ca i tot. En
la seva forma més comú, JavaScript es vincula directament al document HTML. Això permet
crear d'una manera senzilla documents dinàmics.
Pàgina 3 de 15

4. Creació de programes amb JavaScript.
El codi JavaScript és executat pel navegador quan és llegit. En el cas de les funcions,
aquestes han de ser cridades des d'alguna línia de codi o des dels els esdeveniments que es
generen en les etiquetes HTML. El codi JavaScript s'incorpora al codi HTML d'una manera molt
senzilla.
Per a què el navegador reconegui que un arxiu conté funcions escrites en JavaScript
aquestes funcions han d'estar col·locades entre dues etiquetes:
<script language="javascript" type="text⁄javascript">

.............. codi JavaScript
<⁄script>
L'etiqueta SCRIPT és una extensió de HTML en la qual es tanca el text que composa
el codi del programa JavaScript corresponent. Un document pot tenir diverses etiquetes
SCRIPT, i cadascuna d'elles incloure sentències JavaScript diferents.
L'etiqueta SCRIPT admet un paràmetre opcional LANGUAGE que indica el llenguatge

de script que s'ha incrustat en el document així com la versió de JavaScrip.
Les línies de codi tancades entre les etiquetes SCRIPT són ignorades si el navegador
que les llegeix no té el nivell de JavaScript especificat. Per exemple, Navigator 3.0 executa el
codi escrit amb l'etiqueta <SCRIPT LANGUAGE: "JavaScript"> o <SCRIPT
LANGUAGE:"JavaScript 1.2"> però omet el codi que està escrit en versions posteriors de
JavaScript. Si el atribut LANGUAGE és omès els navegat-res assumeixen que és l'última versió
que ells interpreten.
Important!!! JavaScript és un llenguatge de programació Case Sensitive, és a dir,

distingeix entre majúscules i minúscules, per tant, caldrà tenir especial cura amb la forma
d'escriure les variables i les ordres del llenguatge.
4.1. Sentències i comentaris.

Una sentència de codi en JavaScript consisteix en un o més ítems en una línia. Una
línia nova comença una nova sentència, però és convenient acabar les sentències d'una
manera explícita, JavaScript utilitza el punt i coma (;), que és el caràcter d'acabament en
JavaScript.
Exemple 1: al introduir les següents sentències en el lloc el text apareix en pantalla.

La instrucció que permet escriure text en la finestra actual es document.write ("Text"); Aquesta
instrucció permet l'escriptura de codi HTML entre cometes.

document.write ("Comencem <br>");
document.write (“Aquí incloguem una nova línia de text”);
</script>
Exemple 2: si volem veure la versió del navegador en el que s'esta executant la

sentència seria:

document.write("Versio del navegador: " + navigator.appVersion);
</script>
Pàgina 4 de 15

Un comentari d'una sola línia en JavaScript comença amb un parell de barres (//). Un
bloc de comentaris comença amb una barra i un asterisc (/*), i finalitza amb l'in-vers (* /)
Exemple 3: comentaris

//Comentari d'una sola línia
var numeroDies = 3;
/* Comentari que pot tenir més d'una línia si es dóna el cas

que s'ha d'incloure més d'una línia de comentaris o ometre part del codi
var numeroDies = 5 */
</script>
4.2. Assignacions i operadors: expressions.
a) Assignacions: expressions.
El signe igual (=) s'utilitza en JavaScript per indicar l'acció d'assignar un valor. Es a
dir, una sentència de JavaScript podria ser per exemple:
edat = 3;
Els operadors que s'utilitzen en JavaScript són els mateixos que es poden utilitzar en
qualsevol altre llenguatge de programació
Una expressió en JavaScript és una cosa que es pugui llegir com una expressió
booleana o una expressió numèrica. Les expressions contenen caràcters com "+" en lloc
d'expresar-ho com "sumat a". Qualsevol combinació vàlida de valors, variables, operadors, i
expressions constitueixen una expressió, exemples d'expressions:
var Expressio1 = 3 * (4 / 5);

var Expressio2 = “Hola” + ” qué tal”;
var Expressio3 = 4+6;
var Expressio4 = Expressio1 + Expressio3;
b) Operadors.
Combinant variables i valors, es poden formular expressions més complexes. Les

expressions són una part essencial dels programes. Per formular expressions s'utilitzen els
operadors.
5. Operadors aritmètics.
Operador Descripció
+ Suma
- Resta
* Producte
/ Divisió
% Resta de la divisió.
Pàgina 5 de 15

 Operadors d’assignació.
= Assigna a la variable de la part esquerra el
valor de la part dreta.
x=5; La variable obté el valor 5
+= Suma els operands esquerre i dret i assigna el
resultat al operant esquerre.
x+=2; La variable obté el valor 7 (5 +2)
-= Resta els operands esquerre i dret i assigna el
resultat al operant esquerre.
x-=3; La variable obté el valor 4 (7 – 4)
*= Multiplica els operands esquerre i dret i
assigna el resultat al operant esquerre.
x*=4; La variable obté el valor 16 (4*4)
/= Divideix els operands esquerre i dret i assigna
el resultat al operant esquerre.
x/=2; La variable obté el valor 8 (16/2)
%= Divideix dos operands i assigna la resta al
operant esquerre.
x%=3 La variable obté el valor 2 (la resta de 8/3 es 2)
 Operadors de comparació.
== Retorna el valor true quan els dos operands
són iguals.
!= Retorna el valor false quan els dos operands
són iguals.
> Retorna el valor true quan l’operand de
l’esquerra és més gran que el de la dreta.
< Retorna el valor true quan l’operand de la
dreta és més gran que el de l’esquerra
>= Retorna el valor true quan l’operand de
l’esquerra és més gran o igual que el de la
dreta.
<= Retorna el valor true quan l’operand de la
dreta és més gran o igual que el de l’esquerra
 Operadors lògics.
&& I lògica. El valor de devolució és true quan tots
dos operands són veritat.
|| O lògica. El valor de devolució és true quan un
dels dos operands són veritat.
! Negació lògica. El valor de devolució és true
quan el valor es fals.
Pàgina 6 de 15

 Operador typeof().
L'operador typeof retorna una cadena de text que descriu el tipus de dades al que
pertany l'operand.
Exemple:
<HTML>
<HEAD>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=”Javascript”>
var ciudad=”Oviedo”;
var edad=6;
var carnet=true;
document.write(typeof ciudad + “<BR>”);
document.write(typeof edad + “<BR>”);
document.write(typeof carnet + “<BR>”);
</SCRIPT>
</BODY>
<HTML>
 Operador eval().
La funció eval () calcula la cadena de caràcters que s'ha de transmetre i retorna el

resultat com a valor. Si la cadena conté caràcters que no es poden interpretar com a part de
l'operació de càlcul, emet un missatge d'error.
En aquest exemple es demanarà que una expressió numèrica i s'esbrinarà el resultat

utilitzant la funció eval ().
Exemple:
var expressio;
expressio =prompt(“Introduce la operación a realizar”,””);
resultat=eval(expressio);
alert (“El resultat de l’operació es “+ resultat);
 Altres Operadors.
A més d'aquests operadors, també hi ha operadors aritmètics unitaris: increment (++),

disminució (-) i la negació unitària (-). Els operadors d'increment i disminució poden estar tant
davant com darrere d'una variable. Aquests operadors augmenten o disminueixen en 1,
respectivament, el valor d'una variable. La diferència entre les dues posicions resideix en el
moment en què s'executa l'operació.
y=++x Incrementa en 1 el valor de la variable x i
després es realitza l’assignació.
y=x++ Es realitza l’assignació i després s’incrementa
en 1 el valor de la variable x.
y=--x Es resta en 1 el valor de la variable x i després
es realitza l’assignació.
y=x-- Es realitza l’assignació i després es resta en 1
el valor de la variable x.
y=-x Assigna a y el valor de la variable x canviat de
signe i x no canvia de valor.
Pàgina 7 de 15

5.2. Variables: tipus i àmbits, conversió.

Les variables són elements del llenguatge que permeten emmagatzemar diferents
valors en cada moment. Es pot emmagatzemar un valor en una variable i consultar aquest
valor posteriorment, també podem modificar el seu contingut sempre que vulguem. Per
exemple, podem sol·licitar el nom de l'usuari en obrir una web i emmagatzemar-lo en una
variable per a què quan l'usuari finalitzi la sessió acomiadar-lo amb una frase que inclogui el
seu nom.
a) Noms de les variables.

Cada variable és identificada per un nom. En assignar un nom a una variables s'han
de tenir en compte les següents regles:
- Es poden utilitzar totes les lletres de l'alfabet en majúscules i minúscules, els números del 0 al
9 i el guió subratllat “_” .
- Els noms de les variables no poden contenir punts ni espais en blanc.
- El primer caràcter ha de ser una lletra o el guió subratllat.
- En el nom es fa distinció entre majúscules i minúscules.
- No es pot utilitzar com a nom cap de les paraules reservades per JavaScript, És a dir, no es
poden utilitzar paraules que coincideixin amb les que pertanyen al llenguatge JavaScript.
- Oficialment no hi ha restriccions pel que fa a la longitud del nom, però aquest ha de cabre en
una sola línia.
Exemples:
Noms correctes Noms NO correctes

Aux_Nom Aux Nom
resultat primer.resultat
mail 2mail
primera_cognom document
b) Declaració de les variables.
Per declarar les variables en JavaScripts utilitza la instrucció var. A cada variable se li
assigna un nom, i opcionalment, un valor inicial. Si no es tracta d'una funció, la instrucció var és
opcional, però es recomana utilitzar-la.
Exemples:
var exemple;
Hola = “Hola”; //és el mateix que var Hola = “Hola”;
var resultat=3+7; //la variable contindrà el valor de 10
c) Tipus les variables.
Els tipus de valors que pot contenir una variable JavaScript són:
- Nombres: pot contenir qualsevol tipus de nombre real o sencer.
Pàgina 8 de 15

- Operadors lògics o boolean: pot contenir un dels següent valors: true, false, 1 i 0.
- Cadenes de caràcters o String: qualsevol combinació de caràcters (lletres,

números, signes especials i espais). Les cadenes es delimiten mitjançant cometes dobles o
simples. Les cometes simples, per norma, seran utilitzades dins de fragments de codi delimitats
per cometes dobles o viceversa.
Exemples:
Tipus de variable Variable

Numèrica numero1=3;
numero2 = 3.7;
numero3 = 0.6;
numero4 = 5+7;
String cadena1 = “Pepe”;
cadena2 = “Bienvenido a el site web”;
Boolean entrada = true;
salida = false;
auxentrada = 1;
auxsalida = 0;
Un possible contingut d'una variable és el valor null, vol dir que té valor nul i no es
correspon amb cap tipus. Quan es vol declarar una variable i donar-li un valor que no sigui cap
en particular es pot assignar el valor especial null.
Exemple:
var dos = null;
var nota = 3 * dos;
// En aquesta sentència a la variable nota se li assigna el valor 0
Si declarem una variable sense assignar un valor, existeix però el seu valor és
indefinit: NaN (Not a Number).
Exemple:
var numero;
var numeroPer1 = 1 * numero;
// S'assigna el valor NaN a la variable numero degut a què
// numero no té cap valor assignat.
Es pot declarar una variable implícitament (sense utilitzar var) assignant un valor. No
obstant això no es pot utilitzar, una variable que no s'ha declarat mai. Fer-ho genera un error en
temps d'execució.
Exemple:
Vermell = “”;
// Aquesta variable l'hem declarada implícitament.
var alumne= nomAlumne + primerCognomAlumne;

// Genera un error perquè nomAlumne i primerCognomAlumne no s'han definit.
d) Conversió de dades.
En JavaScript no cal que s'especifiqui el tipus de dada d'una variable. El valor que se li
assigna a la variable en un determinat moment és el que determina el seu tipus. Durant el
temps d'execució d'un programa, el tipus de dades d'una variable pot canviar, és a dir, les
Pàgina 9 de 15

variables numèriques es poden convertir, per exemple, t'encadenes. Això s'aconsegueix amb
una simple assignació, per exemple:
Exemple:
var alumne=3;
alumne=”Joan”;
Si la variable número en la primera sentència era numèrica, en la segona s'ha

convertit en tipus string. Els números es poden convertir fàcilment en strings, però els strings
no es poden transformar directament en nombres, per això hi ha funcions explícites de
conversió, parseInt() i parseFloat() són les funcions encarregades de fer-ho.
parseFloat(cadena) transforma en nombre una cadena de caràcters que s'ha de

transmetre i la torna com a valor numèric. Si el nombre es pot interpretar com un número
decimal, la funció ho té en compte. Com a signe decimal s'interpreta el punt. La funció resulta
molt útil, per exemple, per transformar les entrades de l'usuari en valors numèrics que permetin
fer càlculs. Retorna NaN quan la cadena de caràcters comença amb caràcters que no es poden
interpretar com a part d'un nombre. Si la cadena conté caràcters no numèrics cap al final, el
nombre es interpretat sol fins on comencen els caràcters no numèrics, i es retorna com a valor
la part interpretada com nombre.
parseInt(cadena) funciona de forma similar a la funció anterior, però el valor retornat

sempre és un enter i considera el punt com un caràcter. A continuació veurem diferents
exemples de conversió de dades.
Exemple 1:
var aPartirde = 1, frase;
var finsAqui = 10;
var ferQue = "Comptar des de ";
frase = ferQue + aPartirde + " a " + finsAqui + ".";
Després d'executar aquestes sentències, la variable frase contindrà "Comptar des de

1 a 10." Les dades numèriques han estat obligats a prendre la forma d'un string.
Exemple 2:
var araQue = 0, frase;
frase = araQue + 1 + "10";
Després de l'execució de les següents línies de codi la variable frase conté "0110".
Exemple 3:
var araEs = 0, resultat;
resultat = araEs + 1 + parseInt("10"); //
//En aquest cas, "+" realiza una suma de nombres i la variable resultat contñe el
//valor 11.
6. Paraules reservades en JavaScript.

JavaScript té algunes paraules reservades. Aquestes paraules s'agrupen en dos tipus:
paraules reservades de JavaScript, i paraules a evitar.
Paraules reservades en JavaScript

break false in this void
continue for new true while
declare function null typeof with
else if return var
Pàgina 10 de 15

Les paraules que s'han d'evitar són les que s'utilitzen en els noms de funcions o
objectes propis de JavaScript. Paraules com String o parseInt són un exemple. Utilitzar
qualsevol de la primera categoria causessin un error. Utilitzar una paraula reservada del segon
grup pot causar estranys problemes de comportament si intenta utilitzar al mateix temps la seva
variable i l'entitat original del mateix nom, dins del mateix script.
7. Caràcters espcials amb Javascript.

JavaScript té també l'opció d'introduir caràcters espcials (accents, <, >, “...), per fer-ho
s'ha d'utilitzar un codificació especial, en el cas de voler introduir caràcters especials dins del
codi XHTML s'ha de fer:
á á
é é
í í
ó ó
ú ú
Á Á
É É
Í Í
Ó Ó
Ú Ú
Ñ Ñ
ñ ñ
¿ ¿
¡ ¡
Ü Ü
ü ü
& &
" "
< <
> >
En el cas de voler introduir caràcters especials a l'hora de mostrar missatges a

l'usuarui (alert, promt...) tenim:
\n: Salt de línea

\r: Retorn de carro
\t: Tabulació horitzontal
\v: Tabulació vertical
\’: Cometa simple
\”: Cometa doble
\\: Barra invertida
\xdd: Caràcter especial especificat mitjançant dos dígits hexadecimals dd.
Pàgina 11 de 15

Exemple:
alert("No s'ha introdu\xeft cap tem\xe0tica");
8. Integració del codi amb les etiquetes HTML.

Com ja hem comentat en apartats anteriors per a incloure codi JavaScript s’han
d’afegir les etiquetes <script> i </script> en el lloc del document HTML que es cregui necessari,
un exemple podria ser el següent:
Exemple:
<HTML>
<HEAD>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=”Javascript”>
var ciudad=”Oviedo”;
var edad=6;carnet=true;
document.write(typeof ciudad + “<BR>”);
document.write(typeof edad + “<BR>”);
document.write(typeof carnet + “<BR>”);
</SCRIPT>
</BODY>
<HTML>
Pàgina 12 de 15

Incloure el codi JavaScript enmig del codi HTML pot donar força problemes i es
recomanable fer-ho sol si no hi ha altre remei. L’altra opció d’incloure el codi és creant fitxers
amb extensió “.js” on s’inclou el codi JavaScript i després fer referència a aquests fitxers al
document principal HTML, aquestes referències s’han d’incloure en la capçalera del document
principal <head>.
Exemple:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Control d'assistència de l'alumnat</title>
<script src="../jscalendar/calendar.js" type="text/javascript"
xml:space="preserve"></script>
<script src="../jscalendar/lang/calendar-ca.js" type="text/javascript"
<script src="../jscalendar/calendar-setup.js" type="text/javascript"
</head>
<body onload="fnOnLoad();">
<div id="container">
<div id="header">
<form id="selector" name="selector" action="#"
method="post">
<h1>Aplicació de control d'assistència de
l'alumnat </h1><br/>
<ul class="navbar">
<li><span class="bloc" id="selecGrup"><div
style="clear: both;"><label>Grup </label></div></span></li>
<li><span class="bloc" id="selecCredit"><div
style="clear: both;"><label>Crèdit/Mòdul </label></div></span></li>
<li><span class="bloc" id="selecAccio"><div
style="clear: both;"><label>Acció </label></div></span></li>
</ul>
</form>
</div>
<div id="content">
<div class="bloc">
<div id="selecDades">
<h4>Aplicació per a la gestió de les faltes
d'assistència de l'alumnat </h4>
<h5>(c) Equip de desenvolupament de la intranet de l'IES
Provençana </h5>
<h6>José Moreno i Robert Plana </h6>
</div>
<div id="info">
</div>
</div>
</div>
</div>
</body>
</html>
Pàgina 13 de 15

8.1. Rutes relatives i absollutes.
A l’hora d’incloure un fitxer JavaScript s’ha d’indicar el lloc on es troba aquest fitxer.
Dins de l’etiqueta <script> hi trobem un paràmetre que és src on s’indica precisament aquesta
informació. Les rutes que s'inclouen en aquest paràmetre poden ser relatives o absolutes,
s'escollirà una opció en funció de l'aplicació que s'està dissenyant, encara que s'aconsella
utilitzar sempre rutes relatives, d'aquesta manera, si l'aplicació s'ha de migrar en un altre
servidor on hi ha variacions de rutes, no s'ha de modificar cap ruta perquè ja la pàgina web, per
defecte, agafarà les noves rutes.
Exemple ruta relativa:

<script src="../jscalendar/calendar.js " type="text/javascript"
xml:space="preserve" />
En aquest cas el fitxer “calendar.js” a què fa referència aquesta part del codi es troba
en la carpeta “jscalendar” la qual penja d'un altre carpeta que serà l'arrel on es troba la pàgina
web.
Exemple ruta absoluta:

<script src="/var/www/intraproven//jscalendar/calendar.js" type="text/javascript"
xml:space="preserve" />
En aquest cas s'ha inclòs la ruta absoluta, el fitxer “calendar.js” es troba exactament a
“/var/www/intraproven//jscalendar/calendar.js” i en el cas de què es realitzi una migració
(per exemple a un altre servidor on hi hagi més aplicacions en funcionament), l'aplicació hauria
de ser modificada per incloure les noves rutes.
9. Eines de desenvolupament integrat per JavaScript

(IDE).
Un entorn de desenvolupament integrat, anomenat també IDE (sigla en anglès de
integrated development environment), és un programa informàtic compost per un conjunt
d'eines de programació. Pot dedicar-se en exclusiva a un sol llenguatge de programació o bé
poder utilitzar per a diversos. Dev C++, un entorn per al llenguatge de programació C++.
WebDevStudio, un IDE en línia per al llenguatge de programació C/C++.
Un IDE és un entorn de programació que ha estat empaquetat com un programa

d'aplicació, és a dir, consisteix en un editor de codi, un compilador, un depurador i un
constructor d'interfície gràfica (GUI). Els IDEs poden ser aplicacions per si soles o poden ser
part d'aplicacions existents. El llenguatge Visual Basic, per exemple, pot ser usat dins de les
aplicacions de Microsoft Office, el que fa possible escriure sentències Visual Basic en forma de
macros per a Microsoft Word.
Els IDE proveeixen un marc de treball amigable per a la majoria dels llenguatges de
programació com ara C++, Python, Java, C #, Delphi, Visual Basic, etc. En alguns llenguatges,
un IDE pot funcionar com un sistema en temps d'execució, on es permet utilitzar el llenguatge
de programació en forma interactiva, sense necessitat de treball orientat a arxius de text, com
és el cas de Smalltalk o Objective-C.
Per a JacaScript hi ha diferents IDE’s, podem destacar:
- mootools: és un framework JavaScript compacte i modular, orientat a objecte per a

la creació d'aplicacions web compatible amb qualsevol navegador: http://mootools.net/ .
Pàgina 14 de 15

- ext: és un framework del costat del client per al desenvolupament d'aplicacions web.
Té un sistema dual de llicència: Comercial i Opern Source. Aquest framework pot córrer en
qualsevol plataforma que pugui processar POST i retornar dades estructurades (PHP, Java,.
NET i algunes altres): http://www.sencha.com/products/extjs/ .
- Dreamweaver: és una aplicació en forma de suite (basada en la forma d'estudi

d'Adobe Flash) que està destinada a la construcció, disseny i edició de llocs i aplicacions Web
basats en estàndards. Creat inicialment per Macromedia (actualment produït per Adobe
Systems) és el programa més utilitzat en el sector del disseny i la programació web, per les
seves funcionalitats, la seva integració amb altres eines com Adobe Flash i, recentment, pel
seu suport dels estàndards del World Wide Web Consortium. El seu principal competidor és
Microsoft Expression Web i té suport tant per a edició d'imatges com per animació a través de
la seva integració amb altres. Fins a la versió MX, va ser durament criticat pel seu escàs suport
dels estàndards de la web, ja que el codi que generava era amb freqüència només vàlid per a
Internet Explorer i no validava com HTML estàndard. Això s'ha anat corregint en les versions
recents. El gran avantatge d'aquest editor sobre altres és el seu gran poder d'ampliació i
personalització del mateix, ja que en aquest programa, les seves rutines (com la d'inserir un
hipervincle, una imatge o afegir un comportament) estan fetes en Javascript-C, la qual que li
ofereix una gran flexibilitat en aquestes matèries. Això fa que els arxius del programa no siguin
instruccions de C + + sinó rutines de Javascript que fa que sigui un programa molt fluid, que tot
això fa, que programadors i editors web facin extensions per al seu programa i ho posi al seu
gust.
- Komodo: Komodo IDE es destaca per estar disponible per a diferents sistemes
operatius, com Windows, Linux i Mac, i també pel seu suport a la majoria de llenguatges per
crear pàgines web. El programa està bé comentat i ve amb una sèrie de tutorials i de projectes
de mostra que aporten un bon acostament al sistema, per a persones que no l'han utilitzat mai.
10. Per saber-ne més.

- “JavaScript: the good parts.”. Autor: Douglas Crockford. Publicat per: O’Reilly Media,
Inc.
- http://www.noupe.com/javascript/23-impressive-tools-for-faster-
javascriptajax-development.html: pàgina on es detallen 23 diferents eines per al
desenvolupament de diferents pàgines web en JavaScript /Ajax.
- http://www.ribosomatic.com/articulos/top-librerias-ajax-dhtml-y-javascript/:
Llistat de llibreries, frameworks i eines per a AJAX, DHTML i JavaScript.
- http://almacenplantillasweb.es/herramientas/frameworks-de-desarrollo-
web-gratis/frameworks-de-desarrollo-web-en-javascript/ : frameworks de
desenvolupament web en Javascript.
Pàgina 15 de 15

NF1 A1.2 - Introduccio A Javascript I Eines de Programacio en L'entorn Client

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

NF1 A1.2 - Introduccio A Javascript I Eines de Programacio en L'entorn Client

Uploaded by

Copyright:

Available Formats

Curs 2017-2018 M06 – Desenvolupament Web En Entorn Client

UF1.- Sintaxi del llenguatge. Objectes predefinits del llenguatge

UF1.- Sintaxi del llenguatge. Objectes predefinits del llenguatge

S'utilitza principalment en l’entorn client (client-side), implementat com a part d'un

2. Llenguatges basats amb guions (scripts).

2.1. Avantatges i inconvenients.

1- El llenguatge de scripting és fàcil de llegir i interpretar.

2- El codi Javascript s'executa en el client de manera que el servidor no es sol·licitat

4- Permeten el desenvolupament del codi i l'aplicació de manera ràpida i poden

UF1.- Sintaxi del llenguatge. Objectes predefinits del llenguatge

3. JavaScript: característiques generals.

Les pàgines web creades amb JavaScript tenen l'inconvenient de permetre la

JavaScript s'executa a l'ordinador client, deixant el servidor lliure d'aquesta ocupació.

Les diferents versions de JavaScript són:

3.1. JavaScript vs Java.

UF1.- Sintaxi del llenguatge. Objectes predefinits del llenguatge

<script language="javascript" type="text⁄javascript">

L'etiqueta SCRIPT admet un paràmetre opcional LANGUAGE que indica el llenguatge

Important!!! JavaScript és un llenguatge de programació Case Sensitive, és a dir,

4.1. Sentències i comentaris.

Exemple 1: al introduir les següents sentències en el lloc el text apareix en pantalla.

<script language="javascript" type="text⁄javascript">

Exemple 2: si volem veure la versió del navegador en el que s'esta executant la

<script language="javascript" type="text⁄javascript">

UF1.- Sintaxi del llenguatge. Objectes predefinits del llenguatge

<script language="javascript" type="text⁄javascript">

/* Comentari que pot tenir més d'una línia si es dóna el cas

4.2. Assignacions i operadors: expressions.

var Expressio1 = 3 * (4 / 5);

Combinant variables i valors, es poden formular expressions més complexes. Les

UF1.- Sintaxi del llenguatge. Objectes predefinits del llenguatge

UF1.- Sintaxi del llenguatge. Objectes predefinits del llenguatge

La funció eval () calcula la cadena de caràcters que s'ha de transmetre i retorna el

En aquest exemple es demanarà que una expressió numèrica i s'esbrinarà el resultat

A més d'aquests operadors, també hi ha operadors aritmètics unitaris: increment (++),

UF1.- Sintaxi del llenguatge. Objectes predefinits del llenguatge

5.2. Variables: tipus i àmbits, conversió.

a) Noms de les variables.

Noms correctes Noms NO correctes

b) Declaració de les variables.

c) Tipus les variables.

- Nombres: pot contenir qualsevol tipus de nombre real o sencer.

UF1.- Sintaxi del llenguatge. Objectes predefinits del llenguatge

- Cadenes de caràcters o String: qualsevol combinació de caràcters (lletres,

Tipus de variable Variable

var alumne= nomAlumne + primerCognomAlumne;

UF1.- Sintaxi del llenguatge. Objectes predefinits del llenguatge

Si la variable número en la primera sentència era numèrica, en la segona s'ha

parseFloat(cadena) transforma en nombre una cadena de caràcters que s'ha de

parseInt(cadena) funciona de forma similar a la funció anterior, però el valor retornat

Després d'executar aquestes sentències, la variable frase contindrà "Comptar des de

6. Paraules reservades en JavaScript.

Paraules reservades en JavaScript

UF1.- Sintaxi del llenguatge. Objectes predefinits del llenguatge

7. Caràcters espcials amb Javascript.

En el cas de voler introduir caràcters especials a l'hora de mostrar missatges a

\n: Salt de línea

UF1.- Sintaxi del llenguatge. Objectes predefinits del llenguatge

8. Integració del codi amb les etiquetes HTML.

UF1.- Sintaxi del llenguatge. Objectes predefinits del llenguatge

UF1.- Sintaxi del llenguatge. Objectes predefinits del llenguatge

Exemple ruta relativa:

Exemple ruta absoluta: