Mòdul 1. Programacióenelcostatdelclient:llenguatges ...graumultimedia.com › wp-content ›...

Resum mòduls didàctics PROGRAMACIÓ WEB

Madel O. V. 12/2/15 Pàg 1 de 37

Mòdul 1. Programació en el costat del client: llenguatges script en els navegadors

Caracteristiques JavaScript:

• JavaScript és un llenguatge interpretat (no requereix compilació): l'intèrpret és el mateix navegador de l'usuari, que s'encarrega d'executar les sentències JavaScript que conté la pàgina HTML.

• JavaScript és un llenguatge basat en objectes: el model d'objectes del JavaScript inclou els elements necessaris perquè accedeixi a la informació que conté una pàgina HTML i actuï sobre la interfície del navegador.

• JavaScript és un llenguatge orientat a esdeveniments: permet desenvolupar scripts que executin accions en resposta a un esdeveniment que ha ocorregut en el navegador; per exemple, en resposta a un clic del ratolí a un gràfic.

Situació codi JS:

• JavaScript incrustat en el codi HTML.

o En el cos del document:. Un script situat en el cos del document s'executa quan es carrega el cos o el contingut de la pàgina. Per tant, les etiquetes <script> i </script> s'han de situar en algun lloc entre les etiquetes <body> i </body> del document.

o En la capçalera. Un script situat a la capçalera del document s'interpreta o s'executa abans que es carregui el contingut de la pàgina. La capçalera és el lloc adequat per als scripts que no modifiquen els atributs de la pàgina i que s'executen en resposta a una acció de l'usuari. A la capçalera no es pot situar un script que modifiqui parts del document i s'executi quan es carrega la pàgina, ja que aquest codi s'executa abans de carregar el document i no sap, a priori, els objectes que conté.

• JavaScript en un arxiu .js referenciat des de la pàgina HTML. Quan la complexitat del web augmenta, cal que el codi escrit es pugui reutilitzar en diferents pàgines. Una alternativa a inserir el mateix codi en diferents pàgines (cada modificació d'aquest codi implicaria actualitzar totes les pàgines que el contenen) és crear fitxers independents i incloure una referència al fitxer en cadascuna de les pàgines, és a dir, utilitzar biblioteques externes de scripts.

ü JavaScript és sensible a les majúscules i minúscules.

Mètode Write

document.write(cadena de text); write: Per a escriure una cadena de text a la pàgina HTML document.write("Hola\n mon”); \n fa una linea nova document.writeln("Hola”); writeln per fer un salt de linea despres de la cadena. document.write("mon”);

Inclusió d’etiquetes

Es poden escriute etiquetes d’HTML dins de la sentènicia:

document.write("Hola<br> mon”); <br> fa un salt de linea document.write("Hola <strong>mon</strong>”); <strong></strong> negreta


Madel O. V. 12/2/15 Pàg 2 de 37

Paraules reservades:

abstract delete function Null throw

boolean do goto Package throws

break double if private transient

byte else implements protected true

case enum import public try

catch export in return typeof

char extends instanceof short var

class false int static void

const final interface super while

continue finally long switch with

debugger float native syncronized true

default for new this

Tipus de dades:

• Nombre (Valor numéric): 2, 12.4, 2e6… • Cadena (Cadena de Text): “Hola”, ‘Hola’… • Booleà (True o false) • NULL (No hi ha valor) • Objecte (Estructura complexa que conté propietats i mètodes) • Funció (Conjunt de sentències)

Variable:

• Els valors no constants que són manejats pels scripts s'emmagatzemen en variables, definint variable com un contenidor d'informació.

• una variable és global quan és accessible des de tot l'script o codi (utilitza més recursos) • una variable és local quan només és accessible en l'estructura en què s'ha creat (es declara utilitzant

var) • var nom_variable; nom_variable = valor; La primera línia defineix la variable i la segona assigna un

valor a la variable declarada. Condicions que ha de complir el nom que la identifiqui a) No pot tenir espais ni cap altre signe de puntuació ni començar per un nombre b) No es poden fer servir determinades paraules clau


Madel O. V. 12/2/15 Pàg 3 de 37

Operadors:

• Operadors aritmètics. • Operadors d'assignació. • Operadors de comparació. • Operadors booleans. • Operadors de bits. • Operadors especials: l'operador +, l'operador :?, els signes de puntuació (comes, parèntesis i

claudàtors) i els operadors per al treball amb objectes.

Operadors aritmètics:

ü Els operadors aritmètics permeten fer operacions matemàtiques. ü La posició dels operadors d'increment/decrement afecta l'assignació d'aquests operadors.

Operador Descripció Exemple Resultat

+ Suma 3 + 4 7

- Resta 3 - 4 -1

++ Increment 3++ 4

value = ++a Primer incrementa, després assigna

value = a++ Primer assigna, després incrementa

-- Decrement 3-- 2

* Producte 3 * 4 12

/ Divisió 3 / 4 0,75

% Mòdul (resta de la divisió) 3 % 4 3

- Menys unari (negació) - (3 + 4) -7

Operadors d’assignació:

ü Els operadors d'assignació permeten assignar el resultat d'una expressió a una variable

Operador Descripció Exemple Equival a...

= Assigna x = y + z

+= Suma i assigna x + = y x = x + y

-= Resta i assigna x - = y x = x - y

*= Multiplica i assigna x *= y x = x * y

/= Divideix i assigna x /= y x = x / y

%= Calcula el mòdul i assigna x % = y x = x % y

Operadors de comparació:

ü Els operadors de comparació permeten comparar els valors entre dues expressions, que poden ser variables, literals o més complexes.



Madel O. V. 12/2/15 Pàg 4 de 37


== Igualtat 3 == "3" Cert

!= Desigualtat 3 != "3" Fals

< Més petit que 3 < 3 Fals

> Més gran que 3 > 3 Fals

<= Més petit que o igual que 3 <= 3 Cert

>= Més gran que o igual que 3 >= 3 Cert

=== Igualtat estricta 3 === "3" Fals

!== Desigualtat estricta 3 !== "3" Cert 1)

Operadors lògics o booleans:

ü Els operadors lògics permeten formar expressions que només poden tenir com a resultat un valor booleà (true o false)

o L'operador NOT, que és un operador unari (aplicat a un únic operand). La lògica que té és molt simple: canvia el valor de cert a fals i viceversa.

o L'operador OR, que es pot aplicar a dos operands o a més. Si tots els operands són falsos, assigna el valor fals. En cas contrari, és a dir, si almenys n'hi ha un que és cert, assigna el valor cert.

o L'operador AND, que es pot aplicar a dos operands o a més. Si tots són certs, assigna el valor cert. En cas contrari, és a dir, si almenys n'hi ha un de fals, assigna el valor fals.


&& i (AND) x = 1 (x > 0) && (x < = 5)

Cert

|| o (OR) x = 1 (x > 5) || (x == 0)

Fals

! negació (NOT) x = 1 !(x > 5 )

Cert

Operadors de bits:

ü Els operadors de bits permeten modificar o comparar valors en l'àmbit de bits, és a dir, operen amb conjunts d'uns i zeros, encara que el resultat que retornen és expressat en la manera estàndard de JavaScript per als valors numèrics.

Operador Descripció

& (AND) Retorna un 1 si els dos valors són 1.

| (OR) Retorna un 1 si almenys un dels dos valors és 1.

^ (XOR) Retorna un 1 si només un dels dos valors és 1.

<< Desplaçament a l'esquerra d'un determinat nombre de bits. Els espais de la dreta que queden "buits" s'emplenen amb 0.

>> Desplaçament a la dreta d'un determinat nombre de bits i afegeix per l'esquerra els bits que s'han desbordat per la dreta.

>>> Desplaçament a la dreta d'un determinat nombre de bits. Els espais de l'esquerra que queden "buits"


Madel O. V. 12/2/15 Pàg 5 de 37

Operador Descripció

s'emplenen amb 0.

&= x& = y equival a x = x&y

|= x| = y equival a x = x|y

^= x^ = y equival a x=x^y

<<= x<< = y equival a x = x<<y

>>= x>> = y equival a x = x>>y

>>>= x>>> = y equival a x = x>>>y

Operadors +:

ü El significat del símbol + és diferent segons el tipus de les expressions entre les quals es troba. o Quan les expressions són de tipus nombre, el símbol + actua com a operador aritmètic. o Quan un dels operands es de tipus cadena de text, l’operador + fa l’acció de concatenar.

Operadors per a treballar amb objectes:

Operador Descripció Exemple

new Crea un objecte. avui = new Date()

delete Destrueix un objecte. delete avui

this Referencia l'objecte actual.

in Ítem a l'objecte.

typeof Instància de l'objecte.

void No retorna cap valor.

Prioritat d’operadors:

Crida a una funció i membre de... ( ) [ ]

Negació, menys unari, increment i decrement ! - ++ –

Producte, divisió i mòdul * / %

Suma i resta + -

Desplaçament de bits >> << >>>

Comparació de relació < <= > >=

Comparació d'igualtat i desigualtat == !=

AND binari &

XOR binari ^

OR binari |

AND lògic &&

OR lògic ||

Condicional :?

Assignació = += -= *= /= %= &= |= ^= <<= >>= >>>=

Coma ,


Madel O. V. 12/2/15 Pàg 6 de 37

Estructures de control condicionals:

Una estructura de control condicional és una estructura que controla el flux. D'aquesta manera, s'aconsegueix que l'script faci una tasca o una altra depenent del resultat d'avaluar una certa condició

Estructures de control if. • El funcionament és molt bàsic: es duu a terme una acció específica en cas que

es compleixi una condició.

if ( condició ){ grup de sentències }

Estructures de control if… else. • Aquesta estructura inclou la possibilitat d'executar un conjunt d'accions en cas

que la condició no es compleixi.

if ( condició ){ grup de sentències 1 } else { grup de sentències 2 }

Estructures de control if… else if…

• Aquesta estructura permet l'ús de condicionals nous en cas que no es compleixi el primer.

if ( condició1 ){ grup de sentències 1 } else if ( condició2 ) { grup de sentències 2 }

Estructures de control switch • L'estructura switch es basa a avaluar una variable, de manera

que en el cos de l'estructura es compara amb un conjunt de valors. Així, doncs, en cas de coincidència, s'executa el conjunt de sentències que està associat al valor coincident.

switch ( variable ){ case valor1: {grup de sentències 1} break; case valor2: {grup de sentències 2} break; ....................... case valorN: {grup de sentències N} break; default: {grup de sentències si no es compleix cap dels casos anteriors} }


Madel O. V. 12/2/15 Pàg 7 de 37

ü La paraula reserva break serveix per sortir de la estructura switch, de manera que no es segueixi evaluant el codi, ni les expressions posteriors dins el bloc.

Estructures de control iteratives:

Una sentència iterativa, repetitiva o bucle és una estructura que permet repetir una tasca un nombre determinat de vegades.

Estructures de control for • En aquesta estructura s'utilitza un comptador que determina el nombre de vegades

que s'ha de portar a cap l'acció especificada.

for ([expressió inicialització];[condició];[expressió increment o decrement] ){ grup d'accions; } for (i = 0; i < cars.length; i++) { text += cars[i]; }

Estructures de control while • L'estructura de control while es basa a dur a terme un grup d'accions en cas que

es compleixi una certa condició. Pot ser que aquest grup d'accions no s'executi mai si la condició no es compleix, ja que aquesta condició és al començament de l'estructura.

while (condició){ grup d'accions } while (i < 10) { text += "The number is " + i; i++; }

Estructures de control do… while • Aquesta estructura es diferencia de l'anterior en el fet que les accions s'executen

almenys una vegada. Això és així perquè la condició d'acabament és al final del bloc.

do { grup d'accions } while(condició) do { text += "The number is " + i; i++; } while (i < 10);


Madel O. V. 12/2/15 Pàg 8 de 37

Sentències:

• Break: força la interrupció de l'execució d'un bucle. • Continue: interromp l'execució de la iteració actual i transfereix el control a la iteració següent. • With: aquest operador permet fer servir un objecte arbitrari com l’àmbit del proper grup de

sentències, de manera que no faci falta indicar, en cadascuna de les sentències, l'objecte a què fan referència.

with (objecte) { grup de sentències }

with (pilota) { inflar(); botar(); xutar(); }


Madel O. V. 12/2/15 Pàg 9 de 37

Funcions i objectes bàsics:

Una funció es defineix com un conjunt de sentències que duen a terme una tasca específica, i que pot ser cridada des de qualsevol part de l'aplicació. Es defineix amb function

• El nom de la funció. • La llista de paràmetres de la funció, inclosos entre parèntesis i separats per comes. Els paràmetres

són les dades d'entrada, que la funció necessita per a fer una tasca. Una funció pot rebre tants paràmetres com faci falta.

• Les sentències JavaScript que defineixen la funció, incloses entre claus.

function nom_funcio( [paràmetre 1, paràmetre 2... ] ){ bloc de sentències; }

• Perquè una funció i s'executi ha de ser cridada: Els esdeveniments són el mecanisme que permet

controlar les accions dels usuaris i definir un comportament associat a aquestes accions. Per exemple, quan un usuari prem un botó, edita un camp de text o surt d'una pàgina, es produeix un esdeveniment.

• Les funcions també poden tornar un valor. El valor que ha de retornar la funció s'especifica en el cos de la funció amb la paraula reservada return. Pot retornar qualsevol expressió que es pugui assignar a una variable. Atura l’execució de la funció.

Funció que recorre un array unidimensional function recorre (ar){ for (i=0; i < ar.length; i++) { console.log(ar[i]); } }

Funcions recursives:

Una funció recursiva és aquella en que el seu propi codi conté la crida a ella mateixa.

Per evitar que la recursivitat continuï indefinidament, s'hi ha d'incloure una condició d'acabament.

Hi ha moltes funcions matemàtiques que es defineixen d'una manera recursiva. N'és un exemple el factorial d'un nombre enter n. La funció factorial es defineix com a:


Madel O. V. 12/2/15 Pàg 10 de 37

Funcions locals: A vegades, és útil limitar l'àmbit d'ús d'una funció a una altra funció, és a dir, que la primera funció només es pugui utilitzar dins de la segona. Per a crear una funció local, només fa falta declarar-‐la a dins del bloc d'instruccions de la funció que la conté:

function nom_funcio( [paràmetre 1, paràmetre 2, ...] ){ function nom_local([paràmetre 1, paràmetre 2, ...]){ bloc de sentències } bloc de sentències }

Funcions predefinides:

• eval Descripció Avalua i executa l'expressió o sentència

que conté la cadena de text que rep com a paràmetre.

Sintaxi eval(cadena de text)

Exemple eval("x=10;y=30;document.write(x+y)"); escriu el valor 40 a la pàgina web.

• paseInt

Descripció Converteix una cadena de text en un nombre enter segons la base indicada. Si s'omet la base, se suposa que és en base 10. Si la conversió produeix un error, retorna el valor NaN.

Sintaxi parseInt(cadena de text, [base])

Exemple Any = parseInt("2001"); Any += 100;

• parseFloat

Descripció Converteix una cadena de text en un nombre real. Si la conversió produeix un error, retorna el valor NaN.

Sintaxi parseFloat(cadena de text)

Exemple Pi = parseFloat("3.141516"); A = pi * r * r;

• isNaN

Descripció Retorna true si el paràmetre no és un nombre i false quan és un nombre.

Sintaxi isNaN( valor )

Exemple if ( isNaN("2001") ) {

alert("No és una dada numèrica"); }

• isFinite

Descripció Retorna true, si el paràmetre és un nombre finit, i false, en cas contrari.

Sintaxi isFinite( nombre )

Exemple if ( isFinite(2001) ) alert( "ok" );

• Number Descripció Converteix a nombre una expressió. Si

la conversió produeix un error, retorna el valor NaN.

Sintaxi Number( expressió )

Exemple Number( "2001" ) retorna el valor numèric 2001;

Number("Hola") retorna el valor NaN;

• String

Descripció Converteix en cadena de text una expressió. Si la conversió produeix un error, retorna el valor NaN.

Sintaxi String( expressió )

Exemple String(123456);

• toString

Descripció Converteix un objecte en una cadena de text. El resultat depèn de l'objecte a què s'aplica. Els casos són els següents:


Madel O. V. 12/2/15 Pàg 11 de 37

String: retorna la mateixa string. Number: retorna l'string equivalent. Boolean: true o false. Array: els elements de l'array separats per comes. Function: el text que defineix la funció. Alguns dels objectes DOM que no han de retornar res, com string, si s'hi aplica la funció toString retornen una cosa com: [object tipus de l'objecte].

Sintaxi toString( [base] )

Exemple ... var lletres= new Array("a", "b", "c")

document.write(lletres.toString()) ... El resultat a la pàgina és aquest: a,b,c


Madel O. V. (modificat per Pere Amengual) 12/2/15 Pàg 12 de 37

Mòdul 2. Introducció a la programació orientada a objectes

Un programa és un conjunt d'instruccions que s'executen amb l'objectiu de resoldre un cert problema. Els programes es componen en diversos algorismes, i cadascun d'aquests algorismes resol una part del problema inicial. D'aquesta manera, la complexitat de cadascuna de les parts és més petita que la del programa complet (aquesta tècnica es coneix com a divideix i venceràs).

• Programació imperativa: La programació imperativa es basa en un conjunt d'instruccions que indiquen al maquinari com ha de fer una tasca. Es considera la més comuna i la representen, per exemple, llenguatges com C o BASIC.

• Programació funcional: La programació funcional és un paradigma de programació que es basa a utilitzar funcions matemàtiques. El màxim representant d'aquest paradigma és el llenguatge Lisp.

• Programació Lògica: Generalment, en els llenguatges de programació imperatius, quan ens enfrontem a un problema complex, la implementació de la solució d'aquest problema en pot ocultar o dificultar la comprensió. En aquest sentit, la lògica matemàtica és la manera més senzilla d'expressar formalment problemes complexos i de resoldre'ls aplicant regles, hipòtesis i teoremes. El llenguatge principal és el Prolog.

• Programació orientada a objectes: Eiffel, Java, PHP5, JavaScript. És un dels models més productius, que es deu a les grans capacitats i els grans avantatges que té davant de la resta de models de programació. L'orientació a objectes es basa en la divisió del programa en petites unitats lògiques de codi; aquestes unitats es coneixen com a objectes. Aquests objectes són unitats independents que es comuniquen entre elles mitjançant missatges.

Avantatges principals:

• El foment de la reutilització i extensió del codi. • L'elaboració de sistemes més complexos. • La relació del sistema amb el món real. • La creació de programes visuals. • La construcció de prototips. • L'agilització del desenvolupament de programari. • La facilitació del treball en equip. • El manteniment més senzill del programari.

Conceptes fonamentals:

• Classes. • Objectes. • Herència. • Tramesa de missatges.



A. Classes:

L'estandardització és una tècnica que provoca que hi hagi diferents objectes d'un mateix tipus, que comparteixen el procés de fabricació.

La classe és un model o prototip, que defineix les variables i els mètodes comuns a tots els objectes, o una plantilla genèrica per a un conjunt d'objectes de característiques semblants.

ü La instància és un objecte d'una classe en particular.

Les propietats es defineixen a dins de la classe declarant variables.

class elMeuPunt { int x, y; }

B. Objectes:

• Un objecte és una unitat de codi format per propietats, que en defineixen l'estat, i mètodes, que en defineixen el comportament.

• Un objecte te característiques i comportaments; d'aquesta manera, els objectes en la programació emmagatzemen les característiques en variables i implementen el comportament amb funcions.

L'operador new crea una instància d'una classe (un objecte) i torna una referència a aquest objecte:

elmeuPunt p2 = new elmeuPunt(2,3);

C. Herència:

ü L'herència és un dels conceptes més importants en la programació orientada a objectes i consisteix en la possibilitat de crear classes a partir d'altres classes que ja hi ha. El que fa tan potent l'herència és que la classe nova pot heretar de la primera les propietats i els mètodes (apareixen així els conceptes de classe pare o superclasse i classe filla o subclasse).

Es poden crear, mitjançant els prototips, objectes especialitzats a partir d’objectes més generals, i que disposen de les propietats i mètodes dels ascendents. Una subclasse pot tenir incorporades les propietats i els mètodes heretats de la classe pare i, a més, pot afegir propietats i mètodes propis als heretats.

• L'herència simple es produeix quan el llenguatge només permet que una classe derivi d'una classe. En l'exemple següent es veu com la classe punt hereta de la classe posició:

2)• L'herència múltiple es produeix quan una classe es pot derivar de més d'una

classe. L'exemple següent mostra com a partir de dues classes que defineixen objectes de so i imatge es pot crear una classe nova que hereti de les dues anteriors:



Característiques de la programació orientada a objectes:

1. Abstracció:

• Gràcies a l'abstracció es poden representar les característiques essencials d'un objecte sense preocupar-‐se de les altres característiques (no essencials).

• En els llenguatges de programació orientada a objectes, el concepte de Classe és la representació i el

mecanisme pel qual es gestionen les abstraccions. Un objecte ha de representar una certa idea o tasca i per tant un objecte ha de proporcionar les propietats i els mètodes que se n’esperen. Es pot aconseguir fent servir herència i també fent servir composició.

En POO, es pot considerar una Persona, per exemple, com un objecte que té propietats (nom, alçada, pes, color dels cabells, color dels ulls, etc.) i mètodes (parlar, mirar, caminar, córrer, parar, etc.). Amb l'abstracció, un objecte Tren pot manipular objectes Persona sense tenir en compte ni les seves propietats ni els seus mètodes, ja que només li interessa, per exemple, calcular la quantitat de persones que hi viatgen en aquell moment, sense tenir present cap més informació relacionada amb aquestes persones, com l'alçada, el nom o el color dels ulls. A vegades, és útil limitar l'àmbit d'ús d'una funció a una altra funció, és a dir, que la primera funció només es pugui utilitzar dins de la segona. Per a crear una funció local, només fa falta declarar-‐la a dins del bloc d'instruccions de la funció que la conté:

2. Ocultament o encapsulació:

És la capacitat d'ocultar els detalls interns del comportament d'una classe i exposar públicament tan sols els detalls que són necessaris per a la resta del sistema.

• Restringir l'ús de la classe: hi ha cert comportament privat de la classe a què no poden accedir altres classes.

• Controlar l'ús de la classe: hi ha certs mecanismes per a modificar l'estat de la classe i és amb aquests mecanismes que es valida que algunes condicions es compleixin.

Les classes tenen tres modificadors possibles que defineixen el tipus de control d'accés:

• Public: les propietats o els mètodes declarats amb public són accessibles des de qualsevol lloc en què sigui accessible la classe, i els hereten les subclasses.

• Private: les propietats o els mètodes declarats private només són accessibles des de la classe. • Protected: les propietats o els mètodes declarats protected només són accessibles per a les seves

subclasses. class Pare { // Hereta d'Object **** CODI JAVA **** // Atributs: private int numeroFavorit, nascutFa, dinersDisponibles; // Mètodes: public int getAposta() { return numeroFavorit; } protected int getEdat() { return nascutFa; } private int getSaldo() { return dinersDisponibles; } }



3. Polimorfisme:

El polimorfisme permet modificar el comportament d'un operador depenent dels operands. • 1) Polimorfisme de sobrecàrrega: (ad hoc). Una implementació separada per cada tipus.

Funció à diferents implementacions depenent del tipus dels arguments que se li apliquen. Operadors à el seu comportament depenent del tipus dels paràmetres que s'hi apliquin..

• 2) Polimorfisme paramètric: Una funció pot manejar idènticament valors independentment del seu tipus. Per exemple, es poden definir diversos mètodes homònims de suma() fent una suma de valors, de manera que, si els paràmetres són numèrics, torni el valor de la suma d'aquests paràmetres i, si són cadenes de text, torni la concatenació de les cadenes.

• 3) Polimorfisme de subtipificació: Una funció escrita per operar en l’element supertipus també pot

operar sobre elements del suptipus. Es basa en l'habilitat de redefinir un mètode en classes que s'hereten d'una classe base. Per tant, es pot cridar un mètode d'objecte sense haver-‐ne de saber el tipus intrínsec; així es permet no tenir en compte detalls de les classes especialitzades d'una família d'objectes i emmascarar-‐los amb una interfície comuna (aquesta és la classe bàsica). Un exemple pot ser un joc d'escacs amb els objectes Rei, Reina, Alfil, Cavall, Torre i Peó, en què cadascun hereta de l'objecte Peça. El mètode moviment podria fer, usant polimorfisme de subtipificació, el moviment corresponent d'acord amb la classe objecte que es crida.

4. Destrucció d’objectes:

L'intèrpret de Java té un sistema de recuperació de memòria que és l'encarregat d'alliberar una zona de memòria dinàmica que havia estat reservada mitjançant l'operador new, quan l'objecte ja no s'ha d'utilitzar durant el programa (per exemple, quan surt de l'àmbit d'utilització o no es torna a referenciar).

A vegades, una classe manté un recurs que no és de Java, com un descriptor d'arxiu o un tipus de lletra del sistema de finestres. En aquest cas, és recomanable utilitzar l'acabament explícit, per a assegurar-‐se que aquest recurs s'allibera. S’utilitza el mètode finalize.

class ClasseFinalitzada{ **** CODI JAVA **** ClasseFinalitzada() { // Constructor

// Reserva del recurs no Java o recurs compartit } protected void finalize() {

// Alliberament del recurs no Java o recurs compartit }

}



Mòdul 3. Orientació a objectes en JavaScript

Classificació del objectes

• Objectes definits per l’usuari: els defineix i els crea el programador • Objectes natius de JavaScript:

-‐ Objectes associats al tipus de dades primàries que proporciones propietats i mètodes a aquest tipus de dades: String, Number i Boolean

-‐ Objectes associats a tipus de dades compostes; Array, Object. -‐ Objectes que proporcionen utilitats: Date, Math, RegExp.

• Objectes del navegador: BOM. Permeten manipular les finestres i interaccionar amb l’usuari: window i Navigator. No són estàndard.

• Objecte del document: DOM. Defineixen l’estructura de la interfície de la pàgina HTML. El W3C ha dut a terme una especificació estandar del DOM.

Implementació de la programació orientada a objectes

La classe : es defineix una classe mitjançant una funció function Cotxe () {} L’objecte: es crea una instància de la classe, mitjançant la sentència new var cotxe1 = new Cotxe(); alert (cotxe1 instanceOf Cotxe); // mostra true, ens diu si una instància pertany a una classe El constructor: el constructor és cridat quan la classe és instanciada, per crear l’objecte. Les propietats: són variables que formen part de l’objecte i defineixen l’estat de l’objecte com a instància de la classe. Dues instàncies d’una classe es diferencien per les propietats. Poden ser:

-‐ privades (var velocitat): Àmbit local. No són accessibles des de fora de la classe. -‐ públiques (this.velocitat): Àmbit global. Són accessibles des de fora de la classe

Els mètodes: s’implementen a partir de la definició de propietats a les quals s’assignen funcions que tenen definides les accions que ha de portar a terme el mètode. function Cotxe() { this.start = function () {

console.log(“brroomm”); }

}

Exemple creació classe amb propietat privada, pública i mètodes. Accedir, crear instància... function Cotxe (k,m) { var codiClau =k; // variables privades, pe. no es poden accedir amb var x=myCotxe.codiClau this.model = m; // variable pública, sí es pot accedir amb var y=myCotxe.model this.start = function () { console.log(“brroomm”); } } var myAudi = new Cotxe (2333, “A4”); var model = myAudi.model;



Exemple creació classe amb dues propietats i dos mètodes:

Mètodes definits internament

Mètodes afegits al prototip

function EquipDeFutbol (p, c) { this.punts = p; this.categoria = c; this.guanyaPartit = function () { this.punts = this.punts + 3: }; this.quinaCategoria = function () { return this.categoria ; }; }

function EquipDeFutbol (p, c) { this.punts = p; this.categoria = c; } EquipDeFutbol.prototype. guanyaPartit = function () { this.punts = this.punts + 3: }; EquipDeFutbol.prototype.quinaCategoria = function () { return this.categoria; };

Herència: un objecte por heretar mètodes i propietats d’altres objectes utilitzant la propietat prototype. S’implementa a totes les instàncies d’una classe, ja creades o futures.

Car.prototype.velocitat = 120; // tots els objectes de la classe Car ara tenen afegida la propietat velocitat

Car.prototype = new Vehicle ();// afegeix a la classe Cotxe les propietats i mètodes que tingui definides la classe Vehicle.

Podem identificar la classe pare d’un objecte: MyAudi instanceOf Car // mostra true si MyAudi descendeix de Car Composició: Es porta a terme fent que instàncies de classes siguin els valors dels atributs d’altres objectes.

Exemple herència a Javascript Exemple composició a Javascript function Vehicle () { this.hasWheels = true; } function Car (ma, mo) { this.make = ma; this.model = mo; } Car.prototype = new Vehicle (); // Car és un Vehicle var myAudi = new Car (“Audi”, “A4”); // myAudi.hasWheels és true!

function Vehicle () { this.hasWheels = true; this.engine = new Engine(); this.makeSomeNoise = function() { this.engine.startEngine(); // posa en marxa es motor }; } function Engine () { this.startEngine = function () { console.log("motor en marxa") ; }; } var myVehicle = new Vehicle(); myVehicle.makeSomeNoise(); // “motor en marxa”



Encapsulació (ocultament): els objectes han de mantenir internament l’estat que els permet definir el comportament que tenen. Aquestes dades han d’estar ocultes, o accessibles però a partir de la interfície pública que l’objecte proporciona. S’aconsegueix amb l’herència i la definició de variables locals.

Exemple encapsulació (ocultament) a Javascript function Rectangle (h,w,c) { var width = w; var height =h; // variables privades, pe. no es poden accedir amb var x=myRectangle.width; this.color =c; // variables públiques this.setWidth = function (wi) { width = wi;} // mètode privilegiat, sí podem myRectangle.setWidth(5); } Rectangle.prototype.setHeight = function (he) {this.height = he;} // mètode públic, sí podem myRectangle.setWidth(5); Rectangle.prototype.getArea = function (h,w) { // NO PODEM definir aquí per accedir als width i height del rectangle per calcular l’àrea ja que són variables privades } myRectangle = new Rectangle (6,8, “yellow”); myColor = myRectangle.color; // sí puc accedir al seu valor myRectangle.width = 5; // així no puc accedir al seu valor myRectangle.setWidth(40); // així sí puc canviar el valor de width

Polimorfisme: diferents objectes han de respondre de manera diferent a la crida d’un mateix mètode (encara que tinguin el mateix nom, pertanyen a l’objecte) i un mateix objecte ha de comportar-‐se de manera diferent davant d’un mateix mètode, segons el context en el que és cridat (es programa un comportament diferent en una funció depenent dels paràmetres que rebi).

Exemple polimorfisme a Javascript var Person = function( firstName, lastName, treatment ) {

var prefix = treatment;

this.getFullName = function() {

return prefix + " " + firstName + " " + lastName ;

}

}

var p = new Person ("Guy","Mograbi", true);

p.getFullName(); // => "Mr. guy mograbi"

// p.prefix ==> causes an error because it’s private.

var Child = function(firstName, lastName) {

this.getFullName = function(){

return "not allowed to talk with strangers";

}

}

var c = new Child ("Johny","Wannabee");

c.getFullName(); // => "not allowed to talk with strangers "

function whoAreYou(a) {

a.getFullName();

} // => you will get the full name if a is a Person and "not allowed to talk with strangers” if a is a Child



Crear i usar objectes en JavaScript

Literals de funció: utilitzen la paraula clau function però sense nom. Serveix per crear mètodes

this.saluda = function () {alert(“hola”);}; o bé this.missatge= function (missatge) {alert(missatge);};

cridem al mètode: cotxe1.saluda(); o cotxe1.missatge(“Bon dia”); Literals d’objecte: es construeixen a partir d’una llista de parells propietat/valor separats per comes. Pot simplificar la creació de les classes:

var Cotxe { codi: null, nom: “sd500”, saluda: function () {alert(“hola”);} } Tipus de dades primitives i de referència:

-‐ Tipus primitius: es restringeixen a un conjunt de valors definit emmagatzemat a la variable que els manipula. Són dades numèriques, cadenes, lògiques, no definides i nul·∙les.

-‐ Tipus de referència: objectes que poden tenir diverses dades heterogènies: Array, Object, Function..La variable que inclou un tipus de referència no conté el valor real sinó una referència al lloc on s’emmagatzema. x[0] = 20

¡! Els paràmetres de les funcions són passats per valor, però si el paràmetre és un tipus per referència no es passa una còpia del paràmetre sinó la referència i per tant una modificació al cos de la funció provoca una modificació directa de l’atribut fora de la funció.

Arrays associatives: els elements no s’organitzen amb index numèrics sinó per claus no numèriques. provincia[‘tres’] // provincia.tres

No es poden fer servir iteracions. Cal usar l’estructura for/in for ( var ordre in provincia) { alert ( provincia[ordre] ) ; }

Propietats dels objectes

Propietats de les instàncies: només s’afegeix la propietat en l’objecte sobre el que s’actua, no en tots els objectes. Per exemple, la podem eliminar: delete salutacio.idioma Propietats de les classes: quan es vol accedir a una propietat o mètode primer es busca en la instància i si no el troba, el busca en el prototip. Si es crea una instància d’una classe i s’hi passa un paràmetre que defineix alguna propietat, aquest paràmetre sobreescriu el que definia el prototip. Propietats estàtiques: han de contenir dades o codi que no depenguin de cap instància. Per exemple, la propietat PI de l’objecte Math és estàtica, però el mètode toLowerCase () de l’objecte String no. Encadenament de prototips: podem crear una classe a partir d’una instància d’una altra classe, i així heretarà les propietats i mètodes.

Robot.protoype = new Automata(); Destrucció d’objecte: JavaScript de forma automàtica allibera la memòria que no s’utilitzarà. Podem facilitar el procés assignant el valor null a cadascuna de les referències de l’objecte que es vol alliberar.



Objectes predefinits a Javascript Object, Function, Array, Boolean, Date, Math, Number, String FADOBMSN (fa dobbés MSN)

• Objecte Object És l’objecte avi a partir del qual heretaran tots el objectes que hi ha o es creen.

• Objecte Function

És l’objecte de què deriven les funcions de JS. Constructor: new Function (arg1, arg2..., funció) La propietat arguments[] indica el nombre d’arguments passats a la crida de la funció



• Objecte Array Els arrays a Javascript es fan servir per emmagatzemar múltiples valors en una sola variable Sintaxis dels Constructor: var vector1 = new Array(); var vector2 = new Array(5); var vector3 = new Array(“blau”, “groc”) Accés als elements:

var primer= vector[0]; Afegir i modificat elements:

var vector[2]= 132; Eliminar elements: delete vector[2]; // Ara el tercer element retorna undefined, però no es modifica la grandària. Length: indica el primer espai lliure després del darrer element. Indica el nombre d’elements, comptant els buits. Podem eliminar tots els valors d’un array assignant el valor 0 length. vector3.length és 2 Sort: ordena en ordre alfabètic els elements de l’array. Podem definir un altre ordre, mitjançant una altra funció de comparació, per exemple, per ordenar números:

function compara (a,b) { if (a<b) return -‐1; else if (a===b) return 0; else retorn 1;} function ordena () { numeros.sort(compara);

Piles LIFO: el darrer element introduït es el primer en sortir, va al final de l’array

pila.push(15); //afegeix al final de l’array [4,3,15] pila.pop(); //[4,3] i torna 15

Cues FIFO: el primer element introduït es el primer en sortir, va al principi de l’array cua.unshift(15); // [15,4,3] cua.shift(); //[4,3] i torna 15

Concatenar arrays: torna una array amb els arguments afegits sobre l’array al que s’ha fet la crida: var color = [“vermell”,”groc”] var novallista = color.concat(“blanc”); // ara l’array novallista té [“vermell”,”groc”,”blanc”]

Conversió en cadena: torna una cadena amb la separació que indiquem al paràmetre

var color = [“vermell”,”groc”]; var cadena = color.join(“-‐“); //la cadena serà vermell-‐groc

Inversió d’ordre: la mateixa array emmagatzema els elements amb l’ordre invertit color.reverse(); // ara l’array color té l’ordre [“groc”, “vermell”] Extreure fragments: torna una array nova amb els elements seleccionats, des de l’inici al final indicats com a paràmetres. Admet valors negatius, es compten des del final de l’array var num = [2,4,6,5];

num.slice(2); //retorna [6,5] num.slice(1,2); //retorna [4,6]

Afegir, eliminar i modificar. Si no s’indica nombre d’elements a esborrar, s’eliminen tots i són tornats. Els afegits substitueixin els eliminats

splice (inici, elementsEsborrar, elementsAgefir1, elementsAfegir2,...) Arrays multidimensionals. Un array on els elements són arrays. S’accedeix amb dos claudàtors Matriu[0][2]; //accedim al tercer element de la primera array toString: converteix els elements de l’array en text, separat cada element per una coma.



• Objecte Boolean

Representa les dades de tipus lògic, no té propietats ni mètodes (només els de Object) new Boolean(valor).

Si es deixa el paràmetre buit, o té valor 0, null o false, l’objecte pren el valor false. Permet convertir un valor no booleà a booleà.

• Objecte Date Representa...

• Objecte Math Representa...

• Objecte Number Representa...

• Objecte String És el contenidor de tipus primitius de tipus cadena de caràcters. propietat nomCadena.length // retorna la longitud de la cadena prototype // ens permet afegir-‐hi propietats i mètodes

mètodes: indexOf var str=”Hello elephant”; // indexOf(“lo”) retorna 3 match str.match(/el/g); // un array amb el resultat de la cerca: {el, el} split str.split(“ “); // un array amb divisions per “ “: {“Hello”, “elefant”}

toLowerCase str.toLowerCase; // torna “hello elefant”



Mòdul 4. Introducció al DOM

El model estàndard d’objectes:

Jerarquia d’elements

Node: element de l’arbre jeràrquic del DOM. Pot contenir-‐ne d’altres

Tipus de nodes per HTML:

1) Element 2) Atribut 3) Text 8) Comentari 9) Document 10) Tipus document (ETA CD tipus doc)

Accés

Accedir als nodes: var element= document.getElementById("camp1");

Manipulació

A. Bàsica

<script type="text/javascript"> function updatetext(){ document.getElementById('colortext').innerHTML = 'red'; } </script> The apple is <span id='colortext'>green</span>. <input type='button' onclick='updatetext()' value='Change Text'/>

B. Amb text definit per l’usuari

<script type = "text/javascript"> function updatetext() { var userInput = document.getElementById('userInput').value; document.getElementById('colortext').innerHTML = userInput; } </script> <p>The apple is <span id='colortext'>green</span > . </p> <input type = 'text' id = 'userInput' value = 'Apple Color' /> <input type = 'button' onclick = 'updatetext()' value = 'Change Text' />



Creació de nodes

-‐Crear var nouNode = document.createElement("P");

-‐Localitzar

var pare = document.getElementById("elpare");

-‐Inserir

pare.appendChild(nouNode);



C. Canviar tags de l’HTML

< script type = "text/javascript" > function updatetext() { var userInput = document.getElementById('userInput').value; document.getElementById('colortext').innerHTML = "<span style='color:" + userInput + "'>" + userInput + "</span>"; } </script> <p>The apple is <span id='colortext'>green</span > .</p> < input type = 'text' id = 'userInput' value = 'Apple Color' / > < input type = 'button' onclick = 'updatetext()' value = 'Change Text & Color' / >



Els objectes del BOM:

L’objecte Window

...

-‐mètode open

-‐caixes de diàleg

-‐setTimeOut i clearTimeOut

-‐moveBy

-‐manipular marcs

L’objecte Location

L’objecte History

L’objecte Screen

L’objecte Navigator

L’objecte Mimetype

L’objecte Plugin



Els objectes del DOM:

L’objecte Document

Els objectes A, Anchor, Link i Area

L’objecte Image

L’objecte Form

Els objectes Hidden, Text, Textarea i Password

L’objecte Fileupload, File

Els objectes Button, Reset i Submit

L’objecte Radio

L’objecte Checkbox

L’objecte Select

L’objecte Option



Gestió d’esdeveniments:

La gestió d’esdeveniments consisteix en assignar codi que s’executa quan ocorre algun esdeveniment tal com clicar sobre un botó (onclick:), quan una pàgina o una imatge s’han acaba de carregar (onload:) passar o deixar de passar per damunt un enllaç (onmouseover: i onmouseout:), etc... La gestió d’events ens permet convertir els documents en entitats dinàmiques.

Les dues maneres tradicionals d’assignar els gestors d’esdeveniments són:

1) Events inline: a) per HTML, fent servir atributs directament dins l’etiqueta i assignant-lis un fragment de codi que indica al navegador l’acció a realitzar quan ocorre l’esdeveniment. Per exemple:

<p onclick="alert('Hola, com va!')">Clica’m</p>

<element onclick="SomeJavaScriptCode">

b) per scripting, que permet assignar els gestors d’events de forma dinàmica, sense haver de modificar el codi HTML de la pàgina. El codi a executar s’ha de definir dins una funció

Per exemple:

document.getElementById("salutacio").onclick = function () {

alert('Hola, com va!');

}

object.onclick=function(){SomeJavaScriptCode};

2) Events de nivell 2 del DOM, ens permeten un nombre teòricament il·limitat d’esdeveniments a un únic element fent servir oients d’esdeveniments: target.addEventListener(type, listener[, useCapture]);

var saludar = function () {

alert('Hola, com va!');

}

document.getElementById("salutacio").addEventListener('mouseover', saludar, false);

object.addEventListener('click', SomeJavaScriptCode, false);



Event bubbling i capturing

Són dues maneres de propagació d’events en el DOM de l’HTML.

Si un element en conté un altre, i els dos están escoltant el mateix tipus d’event, els dos events no tendrán lloc al mateix temps, sino que un tendrá lloc primer i l’altre després.

<body> <ul>

<li><a href="http://phpied.com">my blog</a></li> </ul> </body>

Per exemple, en fer clic sobre l’enllaç també estem fent clic sobre el <li>, el <ul>,el <ul>…

En el tipus d’ordre “capturing”, l’event és capturat per l’element més exterior i després propagat als elements interiors

En el tipus d’ordre “bubbling”, l’event es capturat primer per l’element més interior i després propagat als elements exteriors

addEventListener(type, listener, useCapture)

En aquest exemple, sense fer servir oients d’events, fent clic sobre 3, després es propaga a 2 i a 1.

Per evitar que es propaguin es pot cridar el mètode stopPropagation() de l’objecte de l’event



Mòdul 5. Manipular el DOM amb Javascript

Manipular la pàgina web:

Client

Finestres

Crear finestra filla var novaFinestra = window.open("Pàgina1.html", "Nova pàgina", "status,menubar,height=400,width=300");

Posar contingut a la finestra filla novaFinestra.document.write(contingut);

Accedir des de la finestra filla al valor d’un botó d’un formulari de la finestra pare window.opener.document.forms[0].BT1.value

Comprovar si la finestra actual ha estat creada per codi if (typeof window.opener == "object") { //La finestra ha estat oberta per un script }

Pas de variables entre pàgines El HTML és un protocol sense estat (no pot emmagatzemar informació sobre connexions anteriors)

a) Cookies: les galetes aporten un mecanisme que permet emmagatzemar en l’equip del client un conjunt petit de dades de tipus text que estableix el servidor web.

Assignació : nom=valor [;expires=dataGMT] [;domain=domini] [;path=ruta] [;secure] L’estructura de les galetes només ha d’assignar a la propietat cookie una cadena en què s’especifiqui el nom, els valors, i addicionalment els atributs de caducitat, el domini, la ruta i la seguretat que es volen aplicar.

b) Utilitzar les característiques de l’estructura de marcs

c) Pas de variables mitjançant l’URL que obre la pàgina nova



Marcs

Navegació i menús

Modificar el full d’estil CSS Canviar l’estil d’un element HTML

document.getElementById(id).style.property=new style

document.getElementById("p2").style.color = "blue";

Exemple fent servir un botó:

<h1 id="id1">My Heading 1</h1> <button type="button" onclick="document.getElementById('id1').style.color = 'red'"> Click Me!</button>

Manipulació dinàmica dels fulls d’estil (canviar un full sencer per un altre) a) Assignar un id a l’etiqueta del link <link id="estilPerDefecte" rel="stylesheet" type="text/css" href="estil.css" /> b) Fer servir el següent codi per modificar l’atribut href de l’element document.getElementById("estilPerDefecte").href="estilNou.css";



Formularis dinàmics:

Cursor i focus

Camps del formulari

Desactivar

document.formulari.campText.disabled = true;

Activar

document.formulari.campText.disabled = false;



Posicionament dinàmic:

Propietats CSS del posicionament CSS-‐P Fonaments de l’animació -‐posicionament -‐pas i grandària del recinte -‐temporització myVar = setInterval (“javascript function”, milliseconds); // executar funció cada x milisegons clearInterval (myVar); // aturar execució Aplicacions simples de CSS-‐P



PS PROGRAMACIÓ WEB Exemple consultor 1. Descriu l'ús de la sentència continue. Indica amb codi JavaScript l’ús que es pot fer d’aquesta sentència. 2. Explica amb exemples les avantatges que aporta l’ocultació en la programació orientada a objectes. 3. Si tenim dos objectes “div” superposats que responen a l'event onclick, com evitaríem que respongues l'event del “div” que està sota? 4. Al joc de la PAC2, on emmagatzemaves els nombres que entrava l'usuari? Com mostraves els resultats? 5. A la PO, explica com vas detectar si la bola tocava la pala i a quina part del codi 19/6/2014 1. Explica en què consisteix l'estructura del bucle for. Posa un exemple. 2. Explica per a què fem servir l'herència i posa un exemple en Javascript 3. Diferències entre --X i X-- i === i != (no recordo si aquest últim era != ). 4. Explica com aconseguies a la PAC2 el resum de tots els caràcters de la cadena que s'introduïa. 5. Explica com vas fer a la pràctica per crear un passatger i de quina manera vas fer per relacionar-lo amb el vol corresponent. 25/01/2014 1. Explica que es la recursividad y pon un ejemplo. 2. ¿Que es polimorfismo? enumera que tipos hay 3. Para que se utilizan las Cookies. (galletas). 4. Explica cómo actualizabas la fecha y la hora en la PAC 3 5. Explica com vas mostrar/ocultar els camps de remitent a la PO, i com actualitzaves la carta 18/01/14: 1. Crea una funció q recorri un array unidimensional. 2. Crea una classe amb una propietat privada, i un altre pública i els metodes q facin falta. Accedeix a la classe, crea una instància d'aquesta. 3. Objecte array, explica pq serveixen: concat, sort, pop, push. 4. Explica dues maneres de saber si un element ha estat clicat. Posa ex. 5. Explica com vas mostrar/ocultar els camps de remitent a la PO, i com actualitzaves la carta 15/01/2014 1-Operadors aritmètics i operadors de comparació. Perquè serveixen els següents operadors i amb què es diferencien: X++ i ++X , == i !== 2-Codifica una classe pública i una privada i codifica els mètodes per accedir a elles fora de la funció 3-PAC 2: explica com vas transformar la primera lletra de cada paraula del text a majúscules 4-Posa un exemple en què sigui necessària l'herència 5-PRÀCTICA: Com ho vas fer per ocultar els camps del remitent i perquè es tornessin a actualitzar amb el PO 26/06/2013 1. Posa un exemple de codi ocultació. 2. Posa un exemple de codi amb "Continue". 3. A partir de dos divs i un onClic, com fer que l'esdeveniment afecti només al superior. ( o algo así, no entendí muy bien la pregunta) 4. Com guardaves els nombres que entraba l'usuari a la pac2 i com els mostraves després. (Exercici



esbrinar un numero random amb 5 oportunitats) 5. A quina linea de codi vas veure que la pilota tocava la pala. 22/6/2013 1.- diferència entre == i ===. Exemple amb codi; 2.- com inserir un node amb DOM estàndard; 3.- crear una classe amb 2 atributs i 2 mètodes; 4.- com vas fer per trobar les paraules repetides de la PAC2 i com passaves de majúscules a minúscules; 5.- com vas fer les validacions a la pràctica i quins camps validaves. 15/6/2013 1. Quines condicions ha de complir una variable en JavaScript per estar ben definida al llenguatge? 2.- Explica como implementaries la polimorfisme paramètric en JavaScript 3.- Explica com canviaries dinàmicament una pàgina d'estil? 4.- A la PAC1, explica de quina manera detectaves si un nombre era o no primer. 5.- Explica com vas implementar el recinte de la PO, fent que la pilota no sobrepassari aquest. 19/01/2013 1. Explica que es i perquè serveix la paraaula reservada with 2. Explica breument 3 metodes de String 3. Escriu i explica la sintaxi per crear una classe amb dos propietats i dos metodes 4. Explica com vas fer la herencia a la pac 3 5. Explica com vas fer la cerca a la pac1 12/01/2013 1. Estructures iteratives for i while 2. Programacio logica 3. Pac 2 validacio caracters prohibits 4. Diferencies entre break i continue 5. Com vas fer l exercici de l objecte date 23/06/2012 1. Identificar errors de un codi (paraula reservada DO, inici variable amb un nombre, bucle for sense {}) 2. Descriure abstracció i ocultació a la programació orientada a objectes (POO) 3. Com modificaries el full de estil? 4. Com vas fer la herència a la pràctica? 5. Com vas resoldre de passar un número indeterminat de variables a una funció en la PAC2? 20/06/2012 1. Característiques de les funcions recursives 2. Polimorfisme paramètric en javascript 3. Com canviar els estils d'una pàgina dinàmicament 4. Como se aplicó la herencia en la PAC3 5. Com es va fer la gestió de pestanyes en el formulari de cerca de la PO 16/06/2012 1. Diferencias entre variables globales y locales. 2. Explica ocultación y encapsulamiento. 3. Cómo activar y desactivar los campos de un formulario.



4. Cómo programaste la clase caballo en la PAC3 (propiedades y los métodos) 5. Cómo programaste el ejercicio de funciones recursivas y Fibonacci. 23/01/2013 La prueba de síntesis de Programación web sólo tenía 4 preguntas con un valor de 2,5 cada una, pero la última estaba equivocada, así que los puntos se reparten entre las primeras 3: 1. Quiénes son los objetos predefinidos en Javascript? 2. Quién es uso de la propiedad instanceOf a la programación? 3. De qué forma vas plantear la expresión regular que eliminaba caracteres no deseados de una cadena? 4. Cómo vas a solucionar el efecto rebote sobre los límites del área de pantalla en el ejercicio en que mostrabas el desplazamiento en línea recta de un punto? (pregunta eliminada ya que se refería a una práctica del curso anterior) 14/01/2012 1. Cuál es la diferencia entre una variable global y una variable local? 2. Cómo creaste la sucesión de números sin repetición? 3. De qué manera se puede activar o desactivar un campo de un formulario? 4. Cómo ordenaste los accidentes por fecha con el array asociativo? 22/06/2011 1. Avantatges e inconvenients d'incrustar codi JS en la pàgina web 2. Explica els 3 tipus de polimorfismes i posa exemples 3. Intercanvi de dades entre documents HTML 4. Amb quins problemes us heu trobat a la hora de comptar les paraules del textarea en la pràctica? 5. Explica l'algorisme utilitzat en la pràctica del calendari. 18/06/2011 1. Explica las principales ventajas e inconvenientes de incrustar o vincular el código JavaScript en una página web. 2 - Describe dos de las tres formas de polimorfismo, explicando las diferencias entre ellas. 3. ¿En qué consiste la comunicación entre páginas HTML? ¿Cuál es la restricción que determina que se pueda realizar sólo con código JavaScript? 4. Explica el código de la función formado en el ejercicio 4 de la práctica. 5. Explica cómo implementaste la librería TinyMCE en el ejercicio 1 de la práctica. 11/06/2011 1.Explica el retorno de una función con ejemplos. ¿Qué tipo de objetos se pueden retornar? 2. Acceso al contenido de los nodos según el modelo del DOM. 3. Explica las ventajas de la ocultación con tres ejemplos. 4. Explica tu código del ejercicio 7 de la práctica. Cómo has hecho el buscador de actividades. 5. Explica el código del ejercicio 3 de la práctica. Cómo has hecho para visualizar el calendario. 18/01/2011 1. Què és l'herència a Javascript? Posa un exemple. 2. Explica els tipus de polimorfismes que existeixen i posa exemples. 3. Pregunta que s'han colat i suposo que han anul·lat. A la UAB ens han dit que no la responguéssim. (Era algo d'evitar un rebot a la pantalla causat per un punt en 1 moviment...) 4. Explica com has resolt el calendari de la PRAC final.

Mòdul 1. Programacióenelcostatdelclient:llenguatges ...graumultimedia.com › wp-content ›...

Documents

Transcript of Mòdul 1. Programacióenelcostatdelclient:llenguatges ...graumultimedia.com › wp-content ›...

Mòdul 1. Programació*en*el*costatdel*client:llenguatges ...graumultimedia.com › wp-content ›...

Documents

Transcript of Mòdul 1. Programació*en*el*costatdel*client:llenguatges ...graumultimedia.com › wp-content ›...

Mòdul 1. Programacióenelcostatdelclient:llenguatges ...graumultimedia.com › wp-content ›...

Transcript of Mòdul 1. Programacióenelcostatdelclient:llenguatges ...graumultimedia.com › wp-content ›...