NF1 A1.1 - Esdeveniments

Curs 2017-2018 M06 – Desenvolupament Web En Entorn Client
UF3.- Esdeveniments. Manegament de formularis. Model d'objectes

del document.
NF 1 A1.1 – Esdeveniments.
Índex de continguts
1. Instal·lació Angular CLI..................................................................................2
2. Actualització Angular CLI...............................................................................2
3. Creació projecte.............................................................................................2
4. Instal·lació de mòduls en el projecte.............................................................2
5. Principlas comendes en Angular CLI.............................................................3
a) Generació nova aplicació..........................................................................3
b) Creació qualsevol element........................................................................3
c) Compilació aplicació..................................................................................3
6. Carpetes i fitxers importants dins del projecte...............................................3
a) Carpeta src................................................................................................3
b) Carpeta assets...........................................................................................3
c) Fitxer main.ts.............................................................................................3
d) Fitxer «.angular-cli.json»...........................................................................3
7. Documents per a provar................................................................................3
a) View que utilitzarem en la nostra aplicació de prova....................................3
b) CSS per a l’aplicació de proves....................................................................6
8. Models d’esdeveniments...............................................................................6
9. Models bàsics d’esdeveniments....................................................................7
a) Tipus d’esdeveniments..............................................................................7
10. Objecte event...............................................................................................8
a) Infomració sobre l'esdeveniment...................................................................9
b) Infomració sobre els esdeveniments del teclat...........................................10
c) Informació sobre els esdeveniments del ratolí............................................11
11. Per saber-ne més......................................................................................12
Pàgina 1 de 13

del document.
1. Instal·lació Angular CLI.

Per a instal·lar s'ha d'instal·lar nodejs i npm, per això s'ha de realitzar les següents
execucions:
 sudo apt-get update
 sudo apt-get install curl
(Si culr no està instal·lat)
 sudo curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
 sudo apt-get install nodejs
Per instal·lar Angular CLI:
 sudo npm install -g @angular/cli
Per a saber la versió de cadascú dels programes: node -v, npm -v, ng –version
2. Actualització Angular CLI.

Si es vol actualitzar Angular CLI s'ha de realitzar.
 npm uninstall -g angular-cli

 npm cache clean
 npm install -g @angular/cli@latest
Un cop actualitzat el Framwork de manera general es pot actualitzar en el projecte

creat:
 rm -rf node_modules
 npm uninstall --save-dev angular-cli
 npm install --save-dev @angular/cli@latest
 npm install
3. Creació projecte.
Per a crear un projecte Angular s'ha de realitzar:
 Crear carpeta aplicació: "ng new my-app".

 Situar-se en carpeta: cd my-app
 Iniciar aplicació: ng serve –open
Per tancar projecte sempre amb ctrl+c, mai ctrl+x!!
4. Instal·lació de mòduls en el projecte.

A mesura que anem avançant en l’aplicació s’haurà d’instal·lar mòduls dels quals la
nostra aplicació dependrà, per a fer-ho s’ha de fer:
 Anar a la caprta de la nostra aplicació: "cd /pathToApp/my-app".

 Instal·lar mòdul: sudo npm install «nom mòdul» --save
Pàgina 2 de 13

del document.
5. Principlas comendes en Angular CLI.
a) Generació nova aplicació.

ng new «nomAplicacio»
b) Creació qualsevol element.

En angular tenim diferents elements: components, classes, serveis, pipes...
ng generate «nomElementAcrear» «nomFitxerTs»
c) Compilació aplicació.
1- Primer crear la carpeta final de l’aplicació:

ng build --output-path /var/www/html/nomApp --base-href /nomApp/
2- Després copiar la carpeta o carpetes php de codi de servidor al lloc on toca.
3- Finalment modificar el fitxer "main.bundle.js" per a canviar la propietat this.url de tots els
serveis per a què hi hagi rutes relatives i no absolutes segons lestructura de carpetes.
6.Carpetes i fitxers importants dins del projecte.
a) Carpeta node_modules
Aquesta és la carpeta conté tots els mòduls que l’aplicació pot utilitzar. Cada cop que un
instal·la un mòdul es guarda en aquesta carpeta.
b) Carpeta src.
Aquesta és la carpeta on es troba tot el codi de l'aplicació. Dins d'aquesta carpeta tenim la
subcarpeta «app» que és on posarem el nostre codi.
c) Carpeta assets.
La carpeta "assets" és la que per defecte angular deixa per a tenir url's públiques que poden
ser linkades al document. En aquesta carpeta es deixa bootsraap i jQuery.
d) Fitxer main.ts
Aquest fitxer conté el mòdul principal que apunta a l'aplicació. Es pot canviar el nom del mòdul.
e) Fitxer «.angular-cli.json»
Aquest fitxer conté dades de configuració S'ha de modificar el fitxer ".angular-cli.json" (està
ocult) en compte! Per a incloure en la part
"assets": [
"assets",
"favicon.ico",
"app/images" <-- Incloure carpetes on tens les images
],
Pàgina 3 de 13

del document.
7. Documents per a provar.
a) View que utilitzarem en la nostra aplicació de prova.

<form #reservationForm="ngForm">
<div class="container well">
<div class="form-horizontal" >
<div class="row">
<div class="col-xs-12"><h2>Make a reservation in the best restaurant in the
world</h2></div>
</div>
<br/>
<div class="form-group">
<div class="row">
<div class="col-xs-12" align="center"><h3>Personal data</h3></div>
</div>
<label class="col-sm-2 control-label" for="formGroup">Name *</label>
<div class="col-sm-4">
<input class="form-control" type="text" name="clientName" required />
<div class="has-error" >
<span id="help-block-matrix-range" class="help-block ">Please, enter a valid
name.</span>
</div>
</div>
<label class="col-sm-2 control-label" for="formGroup">Last name *</label>
<input class="form-control" type="text" name="surname" required />
</div>
<label class="col-sm-2 control-label" for="formGroup">Email Adress *:</label>
<input class="form-control" type="email" name="email" required />
<div class="has-error">
<span id="help-block-matrix-range" class="help-block ">Please, enter a valid
email.</span>
</div>
</div>
<label class="col-sm-2 control-label" for="formGroup">Phone *:</label>
<input class="form-control" type="text" name="phone" placeholder="666111222"
required/>
</div>
</div>
<div class="row">
<div class="col-xs-12" align="center"><h3>Reservation details</h3></div>
</div>
Pàgina 4 de 13

del document.
<label class="col-sm-2 control-label" for="formGroup">reservation Date
*:</label>
<p class="input-group">
<input type="text"
class="form-control"
id="reservationDate"
/>
</p>
</div>
<label class="col-sm-2 control-label" for="formGroup">Reservation time: </label>
<select class="form-control" name="checkInTime" id="reservationTime"
required>
</select>
</div>
</div>
<label class="col-sm-2 control-label" for="formGroup">Number of persons
*</label>
<select class="form-control" id="personsNumber" required>
</select>
</div>
<label class="col-sm-2 control-label" for="formGroup">Table preference *</label>
<input type="radio" name="roomPref" value="nextWindow" />Next to the wiondow
<input type="radio" name="roomPref" value="terrace" />At the Terrace
<input type="radio" name="roomPref" value="suite" />Privat room
</div>
</div>
<label class="col-sm-2 control-label" for="formGroup">Special requests</label>
<div>
<input type="checkbox" value=""/>
<label for=""></label>
</div>
</div>
</div>
<label class="col-sm-2 control-label" for="formGroup">Special
instructions</label>
<textarea class="form-control" id="specialInstructions" ></textarea>
</div>
Pàgina 5 de 13

del document.
<label class="col-sm-2 control-label" for="formGroup">Total price:</label>
<input class="form-control" type="text" readonly />
</div>
</div>
<br />
<br />
<label class="col-sm-2 control-label" for="formGroup"></label>
<button type="submit"
class="btn btn-success">
Submit
</button>
<label>
<input class="btn btn-default btn-primary btn-block" type="button"
value="Back"
/>
</label>
</div>
</div>
</div>
</div>
</form>
b) CSS per a l’aplicació de proves.

/*
.ng-invalid.ng-dirty
{
border-color:red
}
.ng-valid.ng-dirty
{
border-color:green
}*/
.ng-valid[required], .ng-valid.required {
border-left: 5px solid #42A948; /* green */
}
.ng-invalid:not(form) {
border-left: 5px solid #a94442; /* red */
}
Pàgina 6 de 13

del document.
.ng-focus:not(form) {
border-left: 5px solid blue; /* red */
}
8. Models d’esdeveniments.
Crear pàgines i aplicacions web sempre ha estat molt més complex del que hauria de
ser-ho a causa de les incompatibilitats entre navegadors. Tot i que existeixen desenes
d'estàndards per a les tecnologies emprades, els navegadors no els suporten completament o
fins i tot els ignoren.
Les principals incompatibilitats es produeixen en el llenguatge XHTML, en el suport de

fulls d'estils CSS i sobretot, en la implementació de JavaScript. De totes elles, la
incompatibilitat més important es dóna precisament en el model d'esdeveniments del
navegador. Així, hi ha fins a tres models diferents per manejar els esdeveniments segons el
navegador en què s'executi l'aplicació.
- Model bàsic d’esdeveniments: aquest model simple d'esdeveniments es va introduir

per a la versió 4 de l'estàndard HTML i es considera part del nivell més bàsic de DOM. Encara
que les seves característiques són limitades, és l'únic model que és compatible en tots els
navegadors i per tant, l'únic que permet crear aplicacions que funcionen de la mateixa manera
en tots els navegadors.
- Model d’esdeveniments estàndard: Les versions més avançades de l'estàndard

DOM (DOM nivell 2) defineixen un model d'esdeveniments completament nou i molt més
poderós que l'original. Tots els navegadors moderns l'inclouen, excepte Internet Explorer.
- Model d’esdeveniments d’Internet Explorer: Internet Explorer utilitza el seu propi

model d'esdeveniments, que és similar però incompatible amb el model estàndard. Es va
utilitzar per primera vegada a Internet Explorer 4 i Microsoft va decidir seguir utilitzant-lo en la
resta de versions, tot i que l'empresa havia participat en la creació de l'estàndard de DOM que
defineix el model d'esdeveniments estàndard.
9. Models bàsics d’esdeveniments.
a) Tipus d’esdeveniments.
En aquest model, cada element o etiqueta XHTML defineix la seva pròpia llista de
possibles esdeveniments que se li poden assignar. Un mateix tipus d'esdeveniment (per
exemple, punxar el botó esquerre del ratolí) pot estar definit per diversos elements XHTML
diferents i un mateix element XHTML pot tenir associats diversos esdeveniments diferents.
El nom de cada esdeveniment es construeix mitjançant el prefix on, seguit del nom en
anglès de l'acció associada a l'esdeveniment. Així, l'esdeveniment de punxar un element amb el
ratolí es denomina onclick i l'esdeveniment associat a l'acció de moure el ratolí es denomina
onmousemove.
La següent taula resumeix els esdeveniments més importants definits per JavaScript:
Esdeveniment Descripció Elements per als que està definit

onblur Quan l'element perd el focus. <button>, <input>, <label>, <select>,
<textarea>, <body>
Pàgina 7 de 13

del document.
onchange Al desseleccionar un element que s'ha <input>, <select>, <textarea>
modificat.
onclick Al clickar el ratolí. Tots
ondbclick Al clickar el ratolí dos cops. Tots
onfocus Quan l'element rep el focus. <button>, <input>, <label>, <select>,
<textarea>, <body>
onkeydown Al prémer una tecla però sense soltar-la. Elemenst de formulari y <body>
onkeypress Al prémer una tecla. Elemenst de formulari y <body>
onkeyup Al deixar de p´remer una tecla. Elemenst de formulari y <body>
onload Un cop s'ha carregat la pàgina. <body>
onmousedown Al prémer el ratolí sense soltar-lo. Tots
onmousemove Al moure le ratolí. Tots
onmouseout Quan el ratolí fa que surti el punter de Tots
l'element.
onmouseover Quan el ratolí situa el punter sobre l'element. Tots
onmouseup Quan es deixar de prémer el botó que Tots
s'estava pressionat del ratilí.
onreset Al inicialitzar el formulari. <form>
onreseize Al modificar el tamany de la finestra. <body>
onselect Al seleccionar el text. <input>, <textarea>
onsubmit Al enviar el formulari. <form>
onunload Al abandonar la pàgina (per exemple al <body>
tancar el document).
Alguns esdeveniments de la taula anterior (onclick, onkeydown, onkeypress,

onreset, onsubmit) permeten evitar l'"acció per defecte" d'aquest esdeveniment. Més
endavant es mostra en detall aquest comportament, que pot resultar molt útil en algunes
tècniques de programació.
Les accions típiques que realitza un usuari en una pàgina web poden donar lloc a una
successió d'esdeveniments. En prémer per exemple sobre un botó de tipus <input
type="submit"> es desencadenen els esdeveniments onmousedown, onclick, onmouseup i
onsubmit de forma consecutiva.
10. Objecte event.

Normalment, els gestors d'esdeveniments requereixen informació addicional per a
processar les seves tasques. Si una funció per exemple s'encarrega de processar
l'esdeveniment onclick, potser necessiti saber en quina posició estava el ratolí en el moment de
punxar el botó.
No obstant això, el cas més habitual en el qual és necessari conèixer informació

addicional sobre l'esdeveniment és el dels esdeveniments associats al teclat. Normalment, és
molt important conèixer la tecla que s'ha premut, per exemple per diferenciar les tecles normals
Pàgina 8 de 13

del document.
de les tecles especials (ENTER, tabulador, Alt, Ctrl., Etc.).
JavaScript permet obtenir informació sobre el ratolí i el teclat mitjançant un objecte

especial anomenat event. Desafortunadament, els diferents navegadors presenten diferències
molt notables en el tractament de la informació sobre els esdeveniments.
La principal diferència resideix en la manera com s'obté l'objecte event. Internet

Explorer considera que aquest objecte forma part de l'objecte window i la resta de navegadors
el consideren com l'únic argument que tenen les funcions manejadoras d'esdeveniments.
Encara que és un comportament que resulta molt estrany al principi, tots els
navegadors moderns excepte Internet Explorer creen de forma automàtica un argument que es
passa a la funció manejadora, pel que no cal incloure'l en la crida a la funció manejadora.
D'aquesta manera, per a utilitzar aquest argument, només cal assignar-li un nom, ja que els
navegadors ho creen automàticament.
En resum, en els navegadors tipus Internet Explorer, l'objecte event s'obté directament
mitjançant:
Exemple:
var esdeveniment = window.event;
D'altra banda, a la resta de navegadors, l'objecte event s'obté a partir de l'argument

que el navegador crea automàticament:
Exemple:
function gestorEsdeveniments(elEsdeveniment) {
var esdeveniment = elEsdeveniment;
}
Si es vol programar una aplicació que funcioni correctament en tots els navegadors, cal
obtenir l'objecte event de forma correcta segons cada navegador. El següent codi mostra la
forma correcta d'obtenir l'objecte event en qualsevol navegador:
Exemple:
function gestorEsdeveniments(elEsdeveniment) {
var esdeveniment = elEsdeveniment || window.event;
}
Una vegada obtingut l'objecte event, ja es pot accedir a tota la informació relacionada
amb l'esdeveniment, que depèn del tipus d'esdeveniment produït.
a) Infomració sobre l'esdeveniment.

La propietat type indica el tipus d'esdeveniment produït, el que és útil quan una
mateixa funció s'utilitza per treballar amb diversos esdeveniments:
Exemple:
var tipo = esdeveniment.tipe;
La propietat type torna el tipus d'esdeveniment produït, que és igual al nom de

l'esdeveniment però sense el prefix on.
Mitjançant aquesta propietat, es pot refer de forma més senzilla l'exemple anterior en el
qual es ressaltava una secció de continguts en passar el ratolí per sobre:
Exemple:
Pàgina 9 de 13

del document.
function resalta(elEsdeveniment) {
switch(esdeveniment .type) {
case 'mouseover':
this.style.borderColor = 'black';
break;
case 'mouseout':
this.style.borderColor = 'silver';
break;
}
}
window.onload = function() {
document.getElementById("seccio").onmouseover = resalta;
document.getElementById("seccio").onmouseout = resalta;
}
<div id="seccio" style="width:150px; height:60px; border:thin solid silver">

Secció de continguts...
</div>
b) Infomració sobre els esdeveniments del teclat.

De tots els esdeveniments disponibles en JavaScript, els esdeveniments relacionats
amb el teclat són els més incompatibles entre diferents navegadors i per tant, els més difícils de
manejar. En primer lloc, hi ha moltes diferències entre els navegadors, els teclats i els sistemes
operatius dels usuaris, principalment a causa de les diferències entre idiomes.
A més, hi ha tres esdeveniments diferents per a les pulsacions de les tecles ( onkeyup,
onkeypress i onkeydown). Finalment, existeixen dos tipus de tecles: les tecles normals (com
lletres, números i símbols normals) i les tecles especials (com ENTER, Alt, Shift, etc.)
Quan un usuari prem una tecla normal, es produeixen tres esdeveniments seguits i en
aquest ordre: onkeydown, onkeypress i onkeyup. L'esdeveniment onkeydown es correspon
amb el fet de prémer una tecla i no deixar-la anar; l'esdeveniment onkeypress és la pròpia
pulsació de la tecla i l'esdeveniment onkeyup fa referència al fet de deixar anar una tecla que
estava premuda.
La forma més senzilla d'obtenir la informació sobre la tecla que s'ha premut és
mitjançant l'esdeveniment onkeypress. La informació que proporcionen els esdeveniments
onkeydown i onkeyup es pot considerar com més tècnica, ja que retornen el codi intern de cada
tecla i no el caràcter que s'ha premut.
A continuació s'inclou una llista amb totes les propietats diferents de tots els
esdeveniments de teclat tant a Internet Explorer com a la resta de navegadors:
* Esdeveniment keydown: mateix comportament en tots els navegadors:

+ Propietat keyCode: codi intern de la tecla
+ Propietat charCode: no definit
* Esdeveniment keypress:
o Internet Explorer:
+ Propietat keyCode: el codi del caràcter de la tecla que s'ha premut
o Resta de navegadors:
+ Propietat keyCode: per a les tecles normals, no definit. Per a les
Pàgina 10 de 13

del document.
tecles especials, el codi intern de la tecla.
+ Propietat charCode: per a les tecles normals, el codi del caràcter de
la tecla que s'ha premut. Per a les tecles especials, 0.
* Esdeveniment keyup: mateix comportament en tots els navegadors:

+ Propietat keyCode: codi intern de la tecla
Per convertir el codi d'un caràcter (no confondre amb el codi intern) al caràcter que
representa la tecla que s'ha premut, s'utilitza la funció String.fromCharCode ().
A continuació s'inclou un script que mostra tota la informació sobre els tres
esdeveniments de teclat:
Exemple:
function mostraInformacio(elEsdeveniment) {
var missatge = "Tipus esdeveniment: " + esdeveniment.type + "<br>" +

"Propietad keyCode: " + esdeveniment.keyCode + "<br>" + "Propietad
charCode: " + esdeveniment.charCode + "<br>";
var tipusEsdeveniment =esdeveniment.type;

if (tipusEsdeveniment == "keypress")
{
missatge +="Caràcter clicat: " +
String.fromCharCode(esdeveniment.charCode);
document.getElementById("info").innerHTML += "<br>--------------------------------------
<br>" + missatge;
}
window.onload = function(){
document.onkeyup = mostraInformacio;
document.onkeypress = mostraInformacio;
document.onkeydown = mostraInformacio;
}
...
<div id="info"></div>
En l'esdeveniment keypress, el valor de la propietat charCode varia, ja que el caràcter

a, no és el mateix que el caràcter A. En aquest cas, el valor de charCode coincideix amb el codi
ASCII del caràcter premut.
Les tecles especials no disposen de la propietat charCode, ja que només es guarda el

codi intern de la tecla premuda en la propietat keyCode, en aquest cas el codi 9. Si es prem la
tecla Enter, s'obté el codi 13, la tecla de la fletxa superior produeix el codi 38, etc. Tanmateix,
depenent del teclat utilitzat per prémer les tecles i depenent de la disposició de les tecles en
funció de l'idioma del teclat, aquests codis podrien variar.
Els codis mostrats per les tecles especials coincideixen amb els de Firefox i la resta de
navegadors, però recorda que poden variar en funció del teclat que s'utilitza i en funció de la
disposició de les tecles per a cada idioma.
Pàgina 11 de 13

del document.
c) Informació sobre els esdeveniments del ratolí.
La informació més rellevant sobre els esdeveniments relacionats amb el ratolí és la de
les coordenades de la posició del punter del ratolí. Encara que l'origen de les coordenades
sempre es troba a la cantonada superior esquerra, el punt que es pren com a referència de les
coordenades pot variar.
D'aquesta manera, és possible obtenir la posició del ratolí respecte de la pantalla de

l'ordinador, respecte de la finestra del navegador i respecte de la pròpia pàgina HTML (que
s'utilitza quan l'usuari ha fet scroll sobre la pàgina). Les coordenades més senzilles són les que
es refereixen a la posició del punter respecte de la finestra del navegador, que s'obtenen
mitjançant les propietats clientX i clientY:
Exemple:
function mostraInformacio(elEsdeveniment) {
var coordenadaX = esdeveniment.clientX;
var coordenadaY = esdeveniment.clientY;
alert("Has clicat el ratolí en la posició: " + coordenadaX + ", " + coordenadaY);
}
document.onclick = mostraInformacio;
Les coordenades de la posició del punter del ratolí respecte de la pantalla completa de
l'ordinador de l'usuari s'obtenen de la mateixa manera, mitjançant les propietats screenX i
screenY:
Exemple:
var coordenadaX = esdeveniment.screenX;
var coordenadaY = esdeveniment.screenY;
Moltes vegades, és necessari obtenir un altre parell de coordenades diferents: les que
corresponen a la posició del ratolí respecte de l'origen de la pàgina. Aquestes coordenades no
sempre coincideixen amb les coordenades respecte de l'origen de la finestra del navegador, ja
que l'usuari pot fer scroll sobre la pàgina web. Internet Explorer no proporciona aquestes
coordenades de forma directa, mentre que la resta de navegadors sí que ho fan. D'aquesta
manera, cal detectar si el navegador és de tipus Internet Explorer i en cas afirmatiu fer un càlcul
senzill:
Exemple:
// Detectar si el navegador es Internet Explorer
var ie = navigator.userAgent.toLowerCase().indexOf('msie')!=-1;
if(ie) {
coordenadaX = evento.clientX + document.body.scrollLeft;
coordenadaY = evento.clientY + document.body.scrollTop;
}
else {
coordenadaX = evento.pageX;
coordenadaY = evento.pageY;
}
alert("Has cliclat el ratolí en la posició: " + coordenadaX + ", " + coordenadaY + "
respecte de la pàgina web");
Pàgina 12 de 13

del document.
La variable ie val true si el navegador en el qual s'executa l'script és de tipus Internet
Explorer (qualsevol versió) i val false en cas contrari. Per a la resta de navegadors, les
coordenades respecte de l'origen de la pàgina s'obtenen mitjançant les propietats pageX i
pageY. En el cas d'Internet Explorer, s'obtenen sumant la posició respecte de la finestra del
navegador (clientX, clientY) i el desplaçament que ha patit la pàgina (document.body.scrollLeft,
document.body.scrollTop).
11. Per saber-ne més.

- https://angular.io/
Pàgina 13 de 13

NF1 A1.1 - Esdeveniments

Uploaded by

Document Information

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.1 - Esdeveniments

Uploaded by

Copyright:

Available Formats

Curs 2017-2018 M06 – Desenvolupament Web En Entorn Client

UF3.- Esdeveniments. Manegament de formularis. Model d'objectes

UF3.- Esdeveniments. Manegament de formularis. Model d'objectes

1. Instal·lació Angular CLI.

Per instal·lar Angular CLI:

 sudo npm install -g @angular/cli

2. Actualització Angular CLI.

 npm uninstall -g angular-cli

Un cop actualitzat el Framwork de manera general es pot actualitzar en el projecte

 Crear carpeta aplicació: "ng new my-app".

Per tancar projecte sempre amb ctrl+c, mai ctrl+x!!

4. Instal·lació de mòduls en el projecte.

 Anar a la caprta de la nostra aplicació: "cd /pathToApp/my-app".

UF3.- Esdeveniments. Manegament de formularis. Model d'objectes

a) Generació nova aplicació.

b) Creació qualsevol element.

ng generate «nomElementAcrear» «nomFitxerTs»

1- Primer crear la carpeta final de l’aplicació:

6.Carpetes i fitxers importants dins del projecte.

UF3.- Esdeveniments. Manegament de formularis. Model d'objectes

a) View que utilitzarem en la nostra aplicació de prova.

UF3.- Esdeveniments. Manegament de formularis. Model d'objectes

UF3.- Esdeveniments. Manegament de formularis. Model d'objectes

b) CSS per a l’aplicació de proves.

UF3.- Esdeveniments. Manegament de formularis. Model d'objectes

Les principals incompatibilitats es produeixen en el llenguatge XHTML, en el suport de

- Model bàsic d’esdeveniments: aquest model simple d'esdeveniments es va introduir

- Model d’esdeveniments estàndard: Les versions més avançades de l'estàndard

- Model d’esdeveniments d’Internet Explorer: Internet Explorer utilitza el seu propi

9. Models bàsics d’esdeveniments.

Esdeveniment Descripció Elements per als que està definit

UF3.- Esdeveniments. Manegament de formularis. Model d'objectes

Alguns esdeveniments de la taula anterior (onclick, onkeydown, onkeypress,

10. Objecte event.

No obstant això, el cas més habitual en el qual és necessari conèixer informació

UF3.- Esdeveniments. Manegament de formularis. Model d'objectes

JavaScript permet obtenir informació sobre el ratolí i el teclat mitjançant un objecte

La principal diferència resideix en la manera com s'obté l'objecte event. Internet

D'altra banda, a la resta de navegadors, l'objecte event s'obté a partir de l'argument

a) Infomració sobre l'esdeveniment.

La propietat type torna el tipus d'esdeveniment produït, que és igual al nom de

UF3.- Esdeveniments. Manegament de formularis. Model d'objectes

<div id="seccio" style="width:150px; height:60px; border:thin solid silver">

b) Infomració sobre els esdeveniments del teclat.

* Esdeveniment keydown: mateix comportament en tots els navegadors:

UF3.- Esdeveniments. Manegament de formularis. Model d'objectes

* Esdeveniment keyup: mateix comportament en tots els navegadors:

var missatge = "Tipus esdeveniment: " + esdeveniment.type + "<br>" +

var tipusEsdeveniment =esdeveniment.type;

En l'esdeveniment keypress, el valor de la propietat charCode varia, ja que el caràcter

Les tecles especials no disposen de la propietat charCode, ja que només es guarda el

UF3.- Esdeveniments. Manegament de formularis. Model d'objectes

D'aquesta manera, és possible obtenir la posició del ratolí respecte de la pantalla de

UF3.- Esdeveniments. Manegament de formularis. Model d'objectes

11. Per saber-ne més.

You might also like