Download - Básicos Html5 e JavaScript

7/26/2019 Bsicos Html5 e JavaScript

1/100

!"#"$%

$

Redes e Sistemas Multimdia II

Comunicao e Design Multimdia

HyperText Markup Language


3-May-16 CDM - RSM2 - 2015/16 2


2/100

!"#"$%

&


! '()* ,!"#$%&$'( )*%+,# -*./,*/$, - ./01 1234 56 7621 86 9.523:0;?5620$11@ 9.521/01531A1531@ 86 BBBC

! D '()* 506>1A 81=:.>:6A6;06>1A 81F.:A636;1A 5. 19:?0 1A $##$ 5. OPQR G23.4$56 7,%3#8$.#3,% 6* :$;


3/100

!"#"$%

Z


! P236 F.:A6 81 =1:A?3?: 9:0U6: :1F1:V59?62153:1 8.90A153.2 81 F.:A6 ?523653W516 1:6@ 1-@ 81 >:6581 03?E?8681 5. A058. 9?153LF?9.@3653. .0 A6?2 8. /01 56 K?86 /0.3?8?656C

! [ =6: 9.A . '()*@ 20:>?0 36A7-A .=:.3.9.E. '((\ G!"#$%&$'( &%*.4>$% ?%3(3;36H/01 20=.:36 6 3:652F1:V59?6 81 F?9X1?:.2 '()*G1 .03:.2H 63:6K-2 86 I531:513C


3-May-16 CDM - RSM2 - 2015/16 5


! D '()* 2.F:10 K4:?62 1K.E0;Y12 6. E.5>. 8.31A=.@ 2158. 6 K1:21 6 A6?2 03?E?U686C

! O.5308.@ 6 5.K6 ?31:6;


4/100

!"#"$%

]


! `A6 =4>?56 '()* - 9.523?30L86 =.: 0A9671;6EX. GheadH 1 =.: 0A 9.:=. GbodyHC

! R. 9671;6EX. 159.53:6AT21 ?5F.:A6;Y12:1E63?K62 6. 9.531M8. 86 =4>?56@ 9.A. . 3L30E.GtitleH 1 .03:6 A136T?5F.:A6;?56C"a 1J91=;1 5. 5.A1 86

=4>?56 G56 _651E6 8. 1%304$%H@ 6 :1236531?5F.:A6;1 3.8. .9.531M8. /01 - A.23:68. 6. 03?E?U68.:@/0658. 1231 69181 6 1226 A12A6 =4>?56C

! (.86 6 F.:A636;?56 - F1?36

63:6K-2 81 (*/49.A. 1 @1 @ 1 @ 153:1A0?362 .03:62C

! [ >:6581 A6?.:?6 862 (*/42


5/100

!"#"$%

!


! \.: 1J1A=E.@ . 31J3. /01 21 159.53:1 153:1 1 F?96 F.:A6368. 696::1>68.c texto !!"#!$C

! [ (*/81 F19X. - 8?23?5>0?86 86 81 671:30:6=1E6 76::6 d/e G1C>C@ 1 HC


3-May-16 CDM - RSM2 - 2015/16 9


! [ 123:030:6 >1:6E 81 0A6 =4>?56 - 1236c

...

...


3-May-16 CDM - RSM2 - 2015/16 10


6/100

!"#"$%

%


! [2 (*/4G.0 1E1A153.2H '()* =.81A 9.531:63:?703.2 /01 6F1936A 6 F.:A6 9.A. 62 12362F.:A636A 6 =4>?56C

! D2 63:?703.2 21A f F:1531 81 0A6 (*/G81 ?5L9?.H@ A626?586 9.53?8.2 153:1 de G. 45.*6 A$ @$.3%1 . 45.*6 A$ @*53%HC

! [220A1A 3?=?96A1531 6 F.:A6 ...C


3-May-16 CDM - RSM2 - 2015/16 11


! [ >:6581 A6?.:?6 862 (*/4=1:A?311596=20E6A153.@ 2158. 1236 6 F.:A6 8181F?5?: F.:A636;Y12 A6?2 9.A=E1J62C

! I23. -@ =.81A.2 026: (*/4g8153:.h 81 (*/4

=6:6 9.A7?56: K4:?.2 3?=.2 81 F.:A636;


7/100

!"#"$%

i


! \4>?56 G...H

"P2362 (*/4?58?96A 6. 1%304$% /01 1236 21 3:636 810A6 =4>?56 1A '()*@ 1 /01 3.8. . 9.531M8.9.53?8. 153:1 12362 8062 (*/4- '()*C

! O671;6EX. G...H"N


8/100

!"#"$%

k


! N1>01AT21 6E>0A62 862 (*/4A6?2 9.A0528153:. 8. 9.:=. 81 0A6 =4>?56 '()*c

"(L30E. GA6?.:Hc ...

! D 31J3. /01 21 159.53:6: 153:1 12362 8062 (*/4 -A.23:68. 5. 1%304$% 6 96::1>68. 1 9.A 0A 36A65X.81 E13:6 20=1:?.: 6. 36A65X. 81F?5?8. =.: .A?2268.c...! D 31J3. - A.23:68. 6 96::1>68.C

"I34E?9.c...! D 31J3. - A.23:68. 6 ?34E?9. G.0 81 .03:6 F.:A6

g15F43?96hHC


3-May-16 CDM - RSM2 - 2015/16 16


9/100

!"#"$%

#


"IA6>1Ac! P236 (*/51A 56 =4>?56 '()*@ 2158.

?58?968. 5. 63:?703. src. 5.A1 G1@ 21 5191224:?.@ .96A?5X.H 86 ?A6>1AC

! D03:.2 63:?703.2@ 21 71A /01 563m:?.2@ 0206?29.A 1236 (*/@ 20:6 1 6 6E30:6 86 ?A6>1A@6. A12A. /01 31A=. /01 :121:K6A . 12=6;. =6:6 6

?A6>1A 56 =4>?56C! PJ?231 6?586 . alt@ /01 =1:A?31 6=:121536: 0A6

8129:?;1A 1A F.:A6 31J306EC


3-May-16 CDM - RSM2 - 2015/16 17


"'?=1:E?>6;6;?56 '()*@

2


10/100

!"#"$%

$^


"O.A X?=1:E?>6;Y12 36A7-A - =1:A?3?86 6 9:?6;


11/100

!"#"$%

$$


"*?5X6 21=6:68.:6c ! N1:K1 =6:6 ?521:?: 0A6 g76::6h 5. 8.90A153. GF059?.56

9.A. 0A 21=6:68.:HC! R15-:?9. 81 0A6 E?236 5


12/100

!"#"$%

$&


"*?2362 81 81F?5?;15-:?9. 81 0A6 E?236 81 81F?5?;


13/100

!"#"$%

$Z


! *?5X6 3670E6: G(*16$ %30Hc ..."N0:6 86 9-E0E6C [ 2.A6 8.2K6E.:12 81F?5?8.2 1A width@ 50A6 8686 (*16$ %30@ 81K1A=1:F6U1: . K6E.: 3.36E 8. width81F?5?8. =6:6 6 3671E6C

!

O671;6EX. 81 9.E056 G(*16$


14/100

!"#"$%

$]


! O62. 21 =:131586 31: 0A6 9-E0E6 /01 .90=1 . 12=6;.8123?568. 6 8062 .0 A6?2 9-E0E62 G5.03:62 9.E0562H@81K1 026:T21 . 63:?703. colspan9.A . K6E.: ?58?963?K.8. 5MA1:. 81 9-E0E62 6 .90=6:C

Texto A

Texto B

Texto C


3-May-16 CDM - RSM2 - 2015/16 27


! PJ?231 0A 63:?703. 2?A?E6: =6:6 0A6 9-E0E6 .90=6: 8062.0 A6?2 E?5X62c . rowspan@ 36A7-A 9.A . K6E.:?58?963?K. 8. 5MA1:. 81 9-E0E62 6 .90=6:C

Texto A

Texto B

Texto C


3-May-16 CDM - RSM2 - 2015/16 28


15/100

!"#"$%

$!


"n.:A0E4:?.2c ...

! D2 F.:A0E4:?.2 =1:A?31A 6 ?521:;?562 0$1C

!

O.5308.@ - 5191224:?. 0A6 E?5>06>1A 81 4;%5#(5./60J?E?6: =6:6 . =:.91226A153. 812212 A12A.2 868.2 ,1C>C@D*E*F;%5#(.0 \'\C

! [ ?A=.:3W59?6 8. 63:?703.2 name@ action@ method 1enctype21:4 1J=E?9?3686 A6?2 68?6531C


3-May-16 CDM - RSM2 - 2015/16 29


! j153:. 8.2 F.:A0E4:?.2@ =.81A 21: ?521:?8.2 .2 K4:?.21E1A153.2 _4 9.5X19?8.2 81 .03:62 6=E?96;Y12@ 36?29.A. 7.3Y12@ 96A=.2 1 96?J62 81 31J3.@ %*A53 1,((3.41;


16/100

!"#"$%

$%


! S.3Y12c

"(6A7-A - =.22LK1E F6U1: . A12A. 9.A 6 (*/buttonG9.A671:30:6 1 F19X.H 02658. .2 A12A.2 63:?703.2@ 1 63-8?2=.5?7?E?U658. A6?2 =.22?7?E?86812 1A 31:A.2 81F.:A636;C@ 81F?5?: 0A6 ?A6>1A 9.A. 2158. 0A 7.3


17/100

!"#"$%

$i


! n?9X1?:.2c

! PJ=E?96;0A62 6E31:6;Y12 9.A 6 K1:2


18/100

!"#"$%

$k

HTML & XHTML

! [=126: 81 _4 21 9.A1;6: 6 03?E?U6: . '()*! G1. p'()*! 1236: 1A F621 81 81215K.EK?A153.=6:6 . 69.A=65X6:H@ 69306EA1531@ 62 K1:2Y12A6?2 03?E?U6862 8. '()* 1 8. p'()* 6?5862


19/100

!"#"$%

$#

HTML & XHTML

"D2 1E1A153.2 p'()* 3VA 81 21: 21A=:181K?86A1531 F19X68.2 G02658. 0A6 76::6 g/h@/0658. 5


20/100

!"#"$%

&^

Cascading Style Sheets

! [2 ;*4;*A5./ 4("6$ 4?:6A 9.A .?530?3. 81 21=6:6: 6 F.:A636;?56 0$186 206123:030:6@ 0A6 519122?8681 ?8153?F?9686 _4 1AA168.2 8.2 65.2 #^C

! [2 ONN 6E31:6A@ /0658. 5191224:?.@ 6

F.:A636;?562 0$181 0A 25($C

! \6:6 6E-A 8?22.@ - =.22LK1E 76216: 0A 123?E.5.03:. 123?E. _4 1J?231531 1".0 6=:.K1?36: 6X?1:6:/0?6 81 6=E?96;.C


3-May-16 CDM - RSM2 - 2015/16 40


21/100

!"#"$%

&$


! [ 3L30E. ?5F.:A63?K.@ 69306EA1531@ .81215K.EK?A153. - F1?3. 122159?6EA1531 6?58656 K1:2?56 '()*q


3-May-16 CDM - RSM2 - 2015/16 42


22/100

!"#"$%

&&


"50A F?9X1?:. 1J31:5. , 2158.@ 622?A@ =.22LK1E 6206 =6:3?EX6 =.: AME3?=E62 =4>?562 , 63:6K-2 86?521:;0?531 E?5X6 5. 9671;6EX.c C

! PJ91=3. 562 819E6:6;Y12 1A E?5X6@ 3.86 681F?5?;?:6 f K.E36 81 21E193.:12@

/01 =.81A :1F1:?:T21@ 153:1 .03:.2@ 61E1A153.2 '()*@ 5A2@ 9E62212 1 =2108.9E62212C


3-May-16 CDM - RSM2 - 2015/16 43


! `A A12A. 8.90A153. =.81 31: K4:?62 F.EX6281 123?E.2@ =6:6 6E-A 86/01E12 /01 =.81A 21:81F?5?8.2 =.: 6E>052 1%304$%4C

! [ 2.7:1=.2?;


23/100

!"#"$%

&Z


! O.5308.@ 6 03?E?U6;?562 81 0A 45($@ F69?E?3658.@ 81226 F.:A6@ 6>123


24/100

!"#"$%

&]


! N1 . K6E.: 81 0A6 =:.=:?18681 =.220?: A6?2/01 0A6 =6E6K:6@ 81K1A 21: 026862 62=62=6:6 . 81E?A?36:C

! N1 21 8121_6: 12=19?F?96: A6?2 /01 0A6=:.=:?18681@ 12362 81K1A 21: 21=6:6862 =.:=.53.2T1TKL:>0E62C

p {text-align: center;color: red;font-family: sans-serif

}


3-May-16 CDM - RSM2 - 2015/16 47


! N1 AME3?=E.2 1E1A153.2 =6:3?EX6:1A 62A12A62 =:.=:?186812@ - =.22LK1E 6>:0=4TE.2@21=6:658.T.2 9.A KL:>0E62Ch1, h2, h3, h4, h5, h6 {

color: green;

}


3-May-16 CDM - RSM2 - 2015/16 48


25/100

!"#"$%

&!


! b 36A7-A =.22LK1E F6U1: 9.A7?56;Y12 811E1A153.2 5.2 21E193.:12C

! \.: 1J1A=E.@ 21 6=1562 /0?21:A.2 A.8?F?96:6=1562 62 (*/4strong/01 21 159.53:1A8153:. 81 =6:4>:6F.2@ 31:1A.2 6E>.21A1EX6531 6c

p strong {background-color: red;}


3-May-16 CDM - RSM2 - 2015/16 49


! b =.22LK1E 81F?5?: 123?E.2 8?K1:2.2 =6:6 .A12A. 1E1A153. '()*@ 63:6K-2 86 81F?5?;


26/100

!"#"$%

&%


! R.31T21 /01 62 9E62212 X1:86A 62 81F?5?;Y1263:?70L862 6. 21E193.: 762168.2 1A (*/4@69:129153658. 5.K62 .0 20723?30?58. 62 _41J?2315312C

! [ 1J91=;


27/100

!"#"$%

&i


! b =.22LK1E 36A7-A 6=E?96: A6?2 /01 0A69E6221 6. A12A. 31A=.@ X6K158. 0A6?531:219;


28/100

!"#"$%

&k


! \6:6 1E1A153.2 /01 21_6A 8?F1:159?68.263:6K-2 8. 210 3?=. GtypeH , .0@ 56 =:43?96@63:6K-2 81 /06E/01: 63:?703. ,@ 9.A. - . 962.8.2 1E1A153.2 8.2 F.:A0E4:?.2@ - 5191224:?.?58?94TE. 9.A :190:2. 6 =6:V5312?2 :193.2C

! \.: 1J1A=E.@ =6:6 0A6 96?J6 81 31J3. 31A.2cinput[type=text] {

background-color: blue}


3-May-16 CDM - RSM2 - 2015/16 55


! b =.22LK1E 36A7-A 81F?5?: 123?E.2 63:6K-2 8121E193.:12 81 id (#)c#verde {color: green}C

! O.A ?23.@ . 1E1A153. '()* /01 3?K1: 6

?8153?F?96;


29/100

!"#"$%


! D2 21E193.:12 81 id36A7-A =.81A 21:6=E?968.2 6 1E1A153.2 12=19LF?9.2C

! \.: 1J1A=E.@ . 21>0?531 21E193.: 2m 21:46=E?968. 6 =6:4>:6F.2 GpH 9.A . 5A?>06E 6#*%*/%*>3Gcp#paragrafoX {text-align: center;

color: red}

Texto vermelhocentrado


3-May-16 CDM - RSM2 - 2015/16 57


! \6:6 6E-A 8.2 21E193.:12 /01 K?A.26531:?.:A1531@ 36A7-A - =.22LK1E 6 81F?5?;1:68.2 =1E. 03?E?U68.:C

! `A 8.2 962. A6?2 9.A052 .581 21 6=E?96A=2108.9E62212 - 562 X?=1:E?>6;Y12 GaHC


3-May-16 CDM - RSM2 - 2015/16 58


30/100

!"#"$%

Z^


! R62 X?=1:E?>6;Y12@ - =.22LK1E 81F?5?:9.A=.:36A153.2 8?F1:15312 =6:6 62 21>0?53122?306;Y12c

"X?=1:E?>6;6;


31/100

!"#"$%

Z$


! R. 1J1A=E. 6531:?.:@ =.81 5.36:T21 61J?23V59?6 81 0A 9.A1534:?.C

! PA ONN@ 2m 1J?231 0A 3?=. 81 9.A1534:?.2c

"81E?A?368. =.: g/*h 1 g*/hq

"A0E3?E?5X6 G21 71A /01 =.226 36A7-A 21:6=E?968. 6 E?5X62 ?2.E6862HC/* Isto um comentrio

em CSS. */


3-May-16 CDM - RSM2 - 2015/16 61


! \6:6 6E-A 8.2 21E193.:12 6=:1215368.26531:?.:A1531@ X4 6?586 A0?3.2 .03:.2 G/06213.8.2 :1E69?.568.2 9.A =2108.T9E62212HC"D=3.0T21@ 9.5308.@ =.: 67.:86: 6=1562 .2 962.2

A6?2 9.A052C

! [?586 622?A@ A159?.56T21 6?586 A6?2 0A962.c . 21E193.: *@ /01 21:K1 =6:6 21E199?.56:3.8.2 .2 1E1A153.2 =:1215312 50A8.90A153.C"\.: 1J1A=E.c* {font-family: Helvetica, Arial,sans-serif}C


3-May-16 CDM - RSM2 - 2015/16 62


32/100

!"#"$%

Z&


! [=126: 81 21: =.22LK1E@ 9.A OON@ 6E31:6: .9.A=.:36A153. 81 K?:306EA1531 /06E/01:1E1A153. '()*@ X4 8.?2 812312 1E1A153.2/01 A1:191A 12=19?6E 81236/01c span1 divC

! P2362 8062 (*/45


33/100

!"#"$%

ZZ


! [22?A@ 21 =:131581:A.2@ =.: 1J1A=E.@6>:0=6: 0A 9.5_053. 81 =6:4>:6F.2@ =.81A.21596=20E4TE.2 153:1 62 (*/41 C

Texto de um pargrafo

Texto de outro pargrafo

Texto de ainda mais outro

pargrafo


3-May-16 CDM - RSM2 - 2015/16 65


! D 1J1A=E. 6531:?.:@ 36E 9.A. 21 159.53:6@5686 F6U 81 K?206EA1531 1K?81531 C

! O.5308.@ 21 69:1291536:A.2 . 63:?703. id181=.?2 622.9?6:A.2@ 1A ONN@ 0A 21E193.: id

6. div@ =.81A.2 6E31:6: 62 =:.=:?186812 8.7E.9.C"(6A7-A 81K1 21: 69:12915368. . 63:?703. name@

=6:6 21 =.81: A65?=0E6: 62 =:.=:?186812 8. div63:6K-2 81 4;%5#(4C

"P 36A7-A - =.22LK1E . A12A. 02658. 9E62212CCCA62 A15.2 0206EC


3-May-16 CDM - RSM2 - 2015/16 66


34/100

!"#"$%

Z]


! D 1J1A=E. F?96:?6 622?Ac

Texto de um pargrafo

Texto de outro pargrafo

Texto de ainda mais outro

pargrafo

! \.231:?.:A1531@ - 5191224:?. 81F?5?: . 21E193.:81 5A#estiloBlocoC


3-May-16 CDM - RSM2 - 2015/16 67


! [ 3L30E. 81 1J1A=E.@ . 123?E. =.81:?6 81F?5?:9.: 81 F058. 1 A6:>1Ac#estiloBloco {

background-color: yellow;border-style: solid;

border-width: 1px;}


3-May-16 CDM - RSM2 - 2015/16 68


35/100

!"#"$%

Z!


! [E>0A62 =:.=:?186812 81 02. 9.A0A 1=:43?9. 9.A 6 03?E?U6;152 Gtop@ left@ bottom1rightHq

"=:.F058?8681 Gz-indexHc /0653. A6?.:@ A6?2g=:mJ?A.h 1236:4 8. 03?E?U68.:q


3-May-16 CDM - RSM2 - 2015/16 70


36/100

!"#"$%

Z%


" K?2?7?E?8681 GvisibilityHc =.8158. 1236: K?2LK1EGvisibleH .0 .90E3. GhiddenHq

"F.:A6 81 6=:121536;


37/100

!"#"$%

Zi


! \6:6 31:A?56:@ .2 123?E.2 =.81A 5.2C

! [22?A@ /0658. 81F?5?8.2 8153:. 86 =4>?560$1G5. 9671;6EX.H@ .2 123?E.2 81K1A F?96:81E?A?368.2 =.: 9.A1534:?.2 '()*C


3-May-16 CDM - RSM2 - 2015/16 73

JavaScript


3-May-16 CDM - RSM2 - 2015/16 74


38/100

!"#"$%

Zk

JavaScript

! DD*E*F;%5#(GrNH - 0268. 1A A?EXY12 81=4>?562 0$1=6:6 A1EX.:6: . 210 A$45/.@K6E?86: F.:A0E4:?.2@ 1 A0?3.2 A6?2 62=193.2C

! D rN F.? 81215K.EK?8. .:?>?56EA1531 =1E6R$(4;*#$@ 1 - 6 E?5>06>1A 81 4;%5#(5./G;65$.(I45A$H A6?2 =.=0E6: 86 I531:513C

! n059?.56 9.A K?:306EA1531 3.8.2 .2 1%304$%4A6?2 :1915312 1 6?586 5. 693?K.C


3-May-16 CDM - RSM2 - 2015/16 75

JavaScript

! D rN 31K1@ 1 31A@ 9.A. 0A 8.2 =:?59?=6?2=:.=m2?3.2 68?9?.56: ?531:693?K?8681 f2=4>?562 '()*C

! D rN - 0A6 E?5>06>1A 81 4;%5#(5./, ?23. -@0A6 E?5>06>1A 81 =:.>:6A6;686C! `A 4;%5#(rN - 0A 9.5_053. 81 E?5X62 81

9m8?>. 81 9.A=0368.: 1J19034K1E@0206EA1531 1A717?8. 8?:1936A1531 562=4>?562 '()*C


3-May-16 CDM - RSM2 - 2015/16 76


39/100

!"#"$%

Z#

JavaScript

! D rN - 0A6 E?5>06>1A ?531:=:13686@ . /01/01: 8?U1: /01 5152 9.A=E136A15318?23?5362C


3-May-16 CDM - RSM2 - 2015/16 77

JavaScript

! DD*E* - 0A6 E?5>06>1A 81 =:.>:6A6;


40/100

!"#"$%

]^

JavaScript

! D rN =.81 :16>?: 6 1K153.2 , =.8158. 21:9.5F?>0:68. =6:6 1J19036: /0658. 6E>.69.53191@ 9.A. /0658. 0A6 =4>?56 6967.081 96::1>6: .0 . 03?E?U68.: ?531:6>1 9.A6E>0A 1E1A153. '()*C

! D rN =.81 E1: 1 129:1K1: 1E1A153.2 '()* ,=.8158. A12A. E1: 1 6E31:6: . 9.531M8. 810A 1E1A153. '()*C


3-May-16 CDM - RSM2 - 2015/16 79

JavaScript

! D rN =.81 21: 03?E?U68. =6:6 K6E?86: 868.2 ,=.8158. 21: 03?E?U68. =6:6 K6E?86: .2 868.2?521:?8.2 1A F.:A0E4:?.2@ 65312 81 1231221:1A 15K?68.2 =6:6 . 21:K?8.:@ =.0=658.T. 6=:.91226A153. 8125191224:?.C

! O.A 6E>052 8.2 5.K.2 1E1A153.2 =:12153125. '()*!@ 9.A . rN =6226 6 21: =.22LK1E9.53:.E6: 6 :1=:.80;


41/100

!"#"$%

]$

JavaScript

! D2 4;%5#(4=.81A 21: 81F?5?8.2 1 ?521:?8.23653. 5. 9671;6EX. G


42/100

!"#"$%

]&

JavaScript

! `A 1J1A=E.c

algumas instrues usualmente,

definies de funes que so chamadas

noutro local)

mais algumas instrues


3-May-16 CDM - RSM2 - 2015/16 83

JavaScript

! N1 . 4;%5#(F.: 81F?5?8. 50A F?9X1?:. 1J31:5.@=.81A.2 024TE. 622?A@ 96::1>658.T. 5.9671;6EX.c

algumas instrues


3-May-16 CDM - RSM2 - 2015/16 84


43/100

!"#"$%

]Z

JavaScript

! F;%5#(4 81F?5?8.2 1A F?9X1?:.2 1J31:5.2 2?56 0$1@ .0 A12A. /0658. 2?562 50A 45($ 0$1C

! P236 .=;?56@60A1536 6 206 E1>?7?E?8681 1 F69?E?36 6 206

A650315;


44/100

!"#"$%

]]

JavaScript

! `A6 5.36c 36E 9.A. 1A ONN@ .2 =.53.2T1TKL:>0E62 5


45/100

!"#"$%

]!

JavaScript Variveis

! [22?A@ 21 =:131581A.2 819E6:6: 6E>0A 3?=. 81K6:?4K1E@ 6=1562 X4 519122?8681 81 129:1K1:var nomevar = valorC

"PA 6E>0A62 9?:90523W59?62@ 63- 21 =.81 .A?3?: 6=6E6K:6T9X6K1 var, ?C1C@ nomevar = valorC


3-May-16 CDM - RSM2 - 2015/16 89

JavaScript Variveis

! PA7.:6 62 K6:?4K1?2 5


46/100

!"#"$%

]%

JavaScript Objectos Predefinidos

! PAD*E*F;%5#(X4 _4 0A 9.5_053. 81 .7_193.2=:181F?5?8.2@ /01 =.81A 21: 03?E?U68.28?:1936A1531C"j12212 .2 .7_193.2@ 8123696AT21c

! D navigator@ /01 :1=:121536 . 1%304$%@ 1 8?2=.5?7?E?U66E>0A62 =:.=:?186812 M31?2 9.A.c

"appName@ . 5.A1 8. 1%304$%q

"appVersion@ 6 K1:206>1A 8. 7:.l21:q

"platform@ 6 =E636F.:A6 81 20=.:31 6. 1%304$%@ . /019.::12=.581 6. 2?231A6 .=1:63?K.C


3-May-16 CDM - RSM2 - 2015/16 91


! D window@ /01 :1=:121536 6 _651E6 8. 1%304$%@ 18?2=.5?7?E?U6 6E>052 A-3.8.2 M31?2 9.A.c

"open()@ 67:1 0A6 _651E6 9.A 0A 8131:A?568. 1581:1;. .0gK6U?6h , M3?E@ =.: 1J1A=E.@ =6:6#3# ,#4G21 71A /01 12312315X6A 96L8. K?:306EA1531 1A 81202.Hq

"close()@ F19X6 6 _651E6q

"prompt()@ A.23:6 0A6 96?J6 9.A 0A6 =1:>0536 1 F?96 f12=1:6 81 0A6 :12=.236q

"confirm()@ A.23:6 0A6 96?J6 9.A 0A6 =1:>0536 1 F?96 f12=1:6 81 0A [email protected] .C3 G.0@ 1A 6E31:563?K6@ 3+.0 ;*.;$6*%Hq

"alert()@ A.23:6 0A6 96?J6 9.A 0A6 A1526>1AC


3-May-16 CDM - RSM2 - 2015/16 92


47/100

!"#"$%

]i


! D document@ /01 :1=:121536 0A6 =4>?56 0$1@8?2=.5?7?E?U658.@ 153:1 .03:.2@ .2 A-3.8.2c

"write() 1 writeln()@ =6:6 129:1K1: 5. 8.90A153.G=4>?56Hq

"getElementById()@ =6:6 69181: 6 0A 1E1A153. '()*63:6K-2 8. 210 5AC

! D screen@ /01 :1=:121536 . -9:65 8. 9E?1531@8?2=.5?7?E?U658. 63:?703.2 9.A.c

"height 1 width@ /01 :1=:121536A 6 6E30:6 1 6 E6:>0:6 1A=?J-?2 8. -9:65q

"availHeight1 availWidth@ /01 :1=:121536A 6 6E30:6 1 6 E6:>0:61A =?J-?2 8?2=.5LK1?2 5. -9:65 G3?:658. 62 76::62 81 F1::6A15362Hq


3-May-16 CDM - RSM2 - 2015/16 93


! D history@ /01 :1=:121536 . X?23m:?9. 81 56K1>6;0?5312 A-3.8.2 163:?703.2c

"back() 1 forward()@ =6:6 6K65;6: .0 :1906: 0A6 =.2?;658. 62 :12=193?K62 =4>?562Hq

"go()@ =6:6 96::1>6: 0A6 8131:A?5686 =4>?56 /01 _4 315X6

2?8. K?236 5. X?23m:?9.@ :1917158. 9.A. 6:>0A153. . 5MA1:.81 :13:.9122.2 .0 6K65;.2@ .0 =6:31 8. `Q* 1C>C@ go(-1)q

"length@ /01 ?58?96 . 5MA1:. 81 1581:1;.2 `Q* =:1215312 5.X?23m:?9.C

! R.31T21 /01 . .7_193. history- 6918?8. 6 =6:3?: 8..7_193. window, ?C1C@ window.historyC


3-May-16 CDM - RSM2 - 2015/16 94


48/100

!"#"$%

]k


! D location@ /01 :1=:121536 . 1581:1;. 69306E@8?2=.5?7?E?U658.@ 153:1 .03:.2@ .2 21>0?5312 A-3.8.2 163:?703.2c

"assign() 1 replace()@ /01 96::1>6A 0A 5.K. 8.90A153.9.A . `Q* 12=19?F?968. 5. 6:>0A153.q

"reload()@ /01 K.E36 6 96::1>6: . 8.90A153. 69306Eq

"hostname 1 pathname@ /01 81K.EK1A@ :12=193?K6A1531@ .1581:1;. 8. 21:K?8.: 1 96A?5X. 86 =4>?56q

"href@ /01 81K.EK1 . 1581:1;. 9.A=E13. 86 =4>?56C

! (6E 9.A. . .7_193. 6531:?.:@ 36A7-A . location1234622.9?68. 6. .7_193. window, ?C1C@ window.locationC

! (6A7-A =.81 21: 0268. 8?:1936A1531 =6:6 63:?70?: .0.731: . 1581:1;. 86 =4>?56 69306E , 1C>[email protected] = http://www.google.comC


3-May-16 CDM - RSM2 - 2015/16 95


! \6:6 6E-A 8.2 .7_193.2 _4 :1F1:?8.2@ ?531:12266?586 8123696: .2 .7_193.2 =1:315915312 6.jD) GJ3;,@$.( K1L$;( )3A$6HC

! b 5. jD) /01 21 159.53:6@ =.: 1J1A=E.@ .

.7_193. Document@ 9.A. 1Adocument.write(

Ol
)q
! D2 1K153.2@ /01 67.:86:1A.2 A6?2 68?6531@36A7-A 21 159.53:6A 81F?5?8.2 5. jD)C


3-May-16 CDM - RSM2 - 2015/16 96


49/100

!"#"$%

]#

JavaScript Operadores

! (6E 9.A. 1AD*E*@ 1 .03:62 E?5>06>152 81=:.>:6A6;?9.2c &&@ ||1 !C


3-May-16 CDM - RSM2 - 2015/16 97

JavaScript Funes

! `A6 F05;. , 0A 9.5_053. 81?523:0;Y12 , /01 21:4 1J190368. =.: 0A1K153. .0 0A6 9X6A686 6 1226 F05;


50/100

!"#"$%

!^

JavaScript Funes

! [2 F05;Y12 1AD*E*F;%5#(=.81A 21:9.52?81:6862 . 1/0?K6E1531 8.2 A-3.8.2 1Ar6K6@ 1A7.:6 X6_6 8?F1:15;62 9.52?81:4K1?2C

! \.: 1J1A=E.@ 62 F05;Y12 D*E*F;%5#(5


51/100

!"#"$%

!$

JavaScript Funes

function soma(a, b) {var c = a + b;return c;

}

! R.31T21 /01 .2 6:>0A153.2 86 F05;


52/100

!"#"$%

!&

JavaScript Funes

! R.31T21 /01@ /0658. 1236A.2 6 =6226:1E1A153.2 '()* 9.A. 6:>0A153.2 6 0A6F05;0?5312c"eval()

! P236 F05;


53/100

!"#"$%

!Z

JavaScript Execuo Condicionada

! (6E 9.A. 1AD*E*@ 1AD*E*F;%5#(=.81A 21:03?E?U6862 123:030:62 81 9.53:.E. =6:6 :16E?U6:8?F1:15312 69;Y12 1A F05;


54/100

!"#"$%

!]

JavaScript Execuo Condicionada

! )6?2 0A6 K1U@ .D*E*F;%5#(31A 62 A12A62123:030:62 =6:6 9?9E.2 /01 .D*E*31A@F059?.5658. 86 A12A6 A651?:6c". &.&'$ while, =6:6 1J19036: 0A 9.5_053. 81

?523:0;Y12 15/0653. 0A6 9.58?;


55/100

!"#"$%

!!

JavaScriptArrays

! \6:6 68?9?.56: 1E1A153.2 6 0A *%%*"@ 81K1 21:03?E?U68. . A-3.8. push()@ .0@ 1A6E31:563?K6@ 026: . L58?91 , 81K158. F?96: 6.90?868. 8. =:.>:6A68.: 6 21/0V59?6 8.L58?91C

! r4 =6:6 69181: 6 1E1A153.2@ 1J?231A 8062

6E31:563?K62 A6?2 9.A052c 026: . A-3.8.pop()@ 962. /01?:6A.2 :13?:6: . 1E1A153. 8.*%%*"@ .0 15301AT21 1J1A=E.2cvar diasSemana = new Array();

diasSemana.push(Domingo);

...

diasSemana.push(Sbado);

var ultimoDia = diasSemana.pop();

var diaMeio = diasSemana[4];


3-May-16 CDM - RSM2 - 2015/16 110


56/100

!"#"$%

!%

JavaScriptArrays

! PA rN@ 21A=:1 /01 F.: 5191224:?. 69181: 6@ .0A65?=0E6:@ 1E1A153.2 '()*@ =.81A 21:026862 8062 F.:A62@ 81=158158. 8. 1%304$%c"026: . .3@$ 868. 6. 1E1A153. G63:6K-2 8.

63:?703. nameH@ 12=19?F?96A1531 1A F.:A0E4:?.2q

"026: . 5A868. 6. 1E1A153. G63:6K-2 8. 63:?703.idH@ 02658. . :13.:5. 8. A-3.8.document.getElementById()C! P236 81K1:4 21: 6 K1:2


57/100

!"#"$%

!i

JavaScript Classes

! N1>01T21 0A 1J1A=E. :1=:12153658. 0A6X?=.3-3?96 9E6221 ?$443*c

var Pessoa = function (nome, genero, dn) {this.nome = nome;this.genero = genero;this.dn = new Date(dn + ",00:00:00"); // yyyy mm dd

this.calculaIdade = function () {var hoje = new Date();var idade = hoje.getFullYear() - this.dn.getFullYear();var difMes = hoje.getMonth() - this.dn.getMonth();if ((difMes < 0) || ((difMes == 0) && (hoje.getDate() 052 8.2 1K153.2A6?2 9.A052@ /01 =1:A?31A ?531:693?K?8681153:1 03?E?U68.: 1 =4>?56C

! Q1>:6 >1:6E@ .2 1K153.2 123


59/100

!"#"$%

!#

JavaScript Eventos

! j.2 AME3?=E.2 1J?2315312@ 6E>052 8.2 1K153.2A6?2 9.A052 2


60/100

!"#"$%

%^

JavaScript Eventos

! (6A7-A - =.22LK1E 6 63:?70?;


61/100

!"#"$%

%$

JavaScript Acesso a Elementos

"R. 962. 12=19LF?9. 86 A.8?F?96;052 1%304$%4691?36:1A 6 81F?5?;


62/100

!"#"$%

%&

JavaScript Cookies

! \.: /0123Y12 81 21>0:65;6@ 506:86: 5.A1 1A.:686 8. 03?E?U68.:C [22?A@ 31:L6A.2@ =.:1J1A=E.c

document.cookie = nome=Alberto;document.cookie = morada=Coimbra;expires=Mon, 20 May 2013 23:59:59 UTC;

"R.31T21 . 63:?703. expiresc 1231 81F?51 . 31A=.81 K6E?8681 8. ;33+5$C

! P 9.A 6 E1?30:6 69.53191 . A12A.cvar conteudo = document.cookie;


3-May-16 CDM - RSM2 - 2015/16 124


63/100

!"#"$%

%Z

JavaScript Cookies

! j68. 21: 0206E 0A ;33+5$=.81: 9.531: K4:?.2=6:12 63:?703.TK6E.:@ =6:6 69181: 6 12312@ 63-95?96 - 21=6:6: .2 =6:12 =1E.2 =.53.2T1TKL:>0E62 G;H 1 81=.?2 21=6:6: . 63:?703. 8.K6E.: =1E. 2?56E 81 ?>06E G=HC"[22?Acvar pares = conteudo.split(; );

"P@ =6:6 9686 =6:@ 6220A?58.T21 6 ?31:6;6: 0A ;33+5$@ 6 2.E0;


64/100

!"#"$%

%]

JavaScript Consola

! \6:6 31:A?56:@ ?531:1226 :1F1:?: 6 9.52.E6GconsoleH 81D*E*F;%5#(C

! [ 9.52.E6 31A 0A6 2-:?1 81 A-3.8.2 M31?2=6:6 6 81=0:6;?56HC"R.31T21 /01 - 5191224:?.@ 5. 1%304$%@ 693?K6: 6

K?236 86 9.52.E6 81D*E*F;%5#(C


3-May-16 CDM - RSM2 - 2015/16 127

JavaScript Consola

! [22?A@ .2 A-3.8.2 21E199?.568.2 2152 81

1::.q"console.clear() , =6:6 E?A=6: 6 9.52.E6C


3-May-16 CDM - RSM2 - 2015/16 128


65/100

!"#"$%

%!

JavaScript Mos Obra

! O.A. 21 =.81 .721:K6:@ .D*E*F;%5#(- 0A6E?5>06>1A /01@ 1A7.:6 21_6 762365318?F1:1531 8. r6K6@ 31A 0A6 2?536J1 1 0AA.8. 81 F059?.56A153. 6E>. 21A1EX6531 6.D*E*, 86L . 210 5.A1C

! P@ 9.A. 1A /06E/01: .03:6 E?5>06>1A@ 6 M5?96

F.:A6 81 1F193?K6A1531 6 6=:1581: -3:676EX6: 9.A 1J1A=E.2@ :16E?U6: 1J1:9L9?.2 1F6U1: .2 =:m=:?.2 =:.>:6A62C


3-May-16 CDM - RSM2 - 2015/16 129

JavaScript Mos Obra

! Q1F1:V59?62 1 1J1A=E.2 81D*E*F;%5#(@ =6:66E-A 86 7?7E?.>:6F?6@ =.81A 21: 159.53:68.21A 2?312 9.A.c

"X33=c""lllClZ29X..E2C9.A"_2:1F"

"X33=c""lllCl17:1F1:1591C9.A"_2""X33=c""lllC_6K629:?=3t?3C9.A"_2:1F"

"X33=c""81K1E.=1:CA.U?EE6C.:>"15T`N"8.92"B17"r6K6N9:?=3"Q1F1:1591


3-May-16 CDM - RSM2 - 2015/16 130


66/100

!"#"$%

%%

HTML5


3-May-16 CDM - RSM2 - 2015/16 131

HTML5 Porqu?

! D 69306E 4(*.A*%A'()* G21_6 56?A=E1A1536;


67/100

!"#"$%

%i

HTML5 Porqu?

! [22?A@ =6:6 6E-A 81 =:.90:6: F69?E?36: 6123:030:6;


68/100

!"#"$%

%k

HTML5 Porqu?

! [ A6?.: =6:31 8.2 1%304$%4_4 20=.:36A .'()*]!@ 9.A A6?2 .0 A15.2 [email protected] . 6=.?. 86 BZO GN3%6A N5A$ N$123.43%(5,@H 1 8. B'[(Bv GN$1 !"#$%($'(O##65;*(53. &$;


69/100

!"#"$%

%#

HTML5 Estrutura Base

! P . A12A. 69.53191 =6:6 6 ?59E02


70/100

!"#"$%

i^

HTML5 Estrutura Base

! PA 3.8. . 962.@ :19.A1586T21 6 68.=;1 . 91531:@ 2m =6:6 A159?.56:6E>052C

!

D A12A. 69.53191 9.A 6E>052 63:[email protected]. . 7>9.E.:.0 K6E?>5 G36A7-A 2m =6:6 9?36:8.?2H@ 90_6 F05;


71/100

!"#"$%

i$

HTML5 Algumas Novidades

! D '()*! 3:6U 9.52?>. ?5MA1:62 5.K?86812@2158. 67.:86862 81 21>0?86 6E>0A62 862 A6?21K?815312 G1 /01 21:?0 0A6 6E31:563?K66.2 ;33+5$4@ 21 71A /01 9.A 6E>0A6221A1EX65;62c . 63;*6 4(3%*/$1 . 4$4453.4(3%*/$C

! I:1A.2 67.:86: 81 21>0?86 6E>052 8122125.K.2 1E1A153.2@ ?59E0?58.@ 153:1 .03:.2@ .281 81215X.@ 408?. 1 KL81.@ .2 816:A6U156A153.@ 1 9.A1;658. =1E62.A5?=:1215312 W59.:62C


3-May-16 CDM - RSM2 - 2015/16 142


72/100

!"#"$%

i&

HTML5 ncoras

! [2 W59.:62 G/01 =1:A?31A 6 9:?6;6;Y12H =6226A 6 21: 0A 1E1A153.'()* /01 =.81 15>E.76: .03:.2 1E1A153.2c

Sobre mim

Uma curta biografia...

! [ M5?96 1J91=;


73/100

!"#"$%

iZ

HTML5 Canvas

! (08. . /01 123?K1: 153:1 62 (*/481 671:30:6 1. F19X. 8. canvas2m - A.23:68. 21 .1%304$%5


74/100

!"#"$%

i]

HTML5 Canvas

! [=:121536AT21 6E>052 1J1A=E.2 G=6:6 6E-A 8.6531:?.:H =6:6 81215X6: E?5X62@ 9L:90E.2@>:68?15312 1 ?A6>152@ 6220A?58.T21 6 9:?6;


75/100

!"#"$%

i!

HTML5 Canvas

! \6:6 81215X6: 9L:90E.2 G1 6:9.2H@ 81F?51T21 .9153:. G'@ "H@ . :6?.@ . >:60 .581 21 ?5?9?6 69?:905F1:V59?6 1 .581 1236 31:A?56@ 1 .2153?8. 8. 81215X. G5. 2153?8. 8.2 =.531?:.28. :1Em>?. .0 6. 9.53:4:?.HCcontext.fillStyle=red;context.beginPath();context.arc(50, 50, 25, 0, Math.PI * 2, true);context.closePath();context.fill();


3-May-16 CDM - RSM2 - 2015/16 149

HTML5 Canvas

! \6:6 81215X6: >:68?15312@ . 62=193. 122159?6E- 81F?5?: 6 9.: 81 ?5L9?. 8. >:68?1531 1 6 9.: 81F?ACvar gradient =context.createLinearGradient(0, 0, 200, 50);

gradient.addColorStop(0, red);gradient.addColorStop(1, green);context.fillStyle = gradient;context.fillRect(0, 0, 200, 50);

"(6A7-A 21 1J1A=E?F?96@ 5. 1J1A=E. 69?A6@ .81215X. G=:1159X?8.H 81 0A :193W5>0E.C


3-May-16 CDM - RSM2 - 2015/16 150


76/100

!"#"$%

i%

HTML5 Canvas

! \6:6 81215X6: ?A6>152@ 03?E?U6T21 . G_49.5X19?8.H .7_193. Q@*/$@ X6K158. 6>.:6 6=.22?7?E?8681 81 . g81215X6:hCcontext.clearRect(0, 0, canvas.width,canvas.height);


3-May-16 CDM - RSM2 - 2015/16 151

HTML5 Canvas

! \6:6 E?A=6: . ;*.E*4G76236531 9.A0A 562K4:?62 ?31:6;Y12 81 0A6 65?A6;


77/100

!"#"$%

ii

HTML5 udio e Vdeo

! Q1E63?K6A1531 6.2 9.531M8.2 81 408?. 1 KL81.@5. '()*! F.? 3.A686 6 21>0?531 :12.E0;3%@*(34U;3A$;4 A$ V,A53 $ 3,(%34 A354 A$EWA$3H

! [9306EA1531@ .2 F.:A63.2 68.=368.2 =6:6 .

408?. F.:6Ac")\Z G608?."A=1>Hq

"D>> G608?.".>>Hq

"B6K G608?."l6KHC


3-May-16 CDM - RSM2 - 2015/16 153

HTML5 udio e Vdeo

! R. /01 3.96 6. KL81.@ 69306EA1531@ .2F.:A63.2 68.=368.2 F.:6Ac

")\] GK?81."A=]Hq

"D>> GK?81.".>>Hq

"B17)GK?81."l17AHC

! D2 1%304$%481K1A 20=.:36:@ =1E. A15.2@ 0A8.2 F.:A63.2 81 408?. 1 0A 8.2 F.:A63.2 81KL81. ?58?968.2C


3-May-16 CDM - RSM2 - 2015/16 154


78/100

!"#"$%

ik

HTML5 udio

! \6:6 1A703?: 0A F?9X1?:. 81 2.A 50A8.90A153. '()*!@ 76236 ?58?96: /06E . 21096A?5X.c

! O.5308.@ =6:6 =.81:A.2 .0K?: . F?9X1?:. .09.53:.E6: 6 206 :1=:.80;:6581h@ 6 .=;


79/100

!"#"$%

i#

HTML5 udio

! P2312 63:?703.2 2


80/100

!"#"$%

k^

HTML5 udio

! O62. . 1%304$% 501T21 0A 1J1A=E. 9.A /063:. 5LK1?2 8181>:686;


81/100

!"#"$%

k$

HTML5 Vdeo

! \6:6 .2 F?9X1?:.2 81 KL81.@ .2 1E1A153.2'()*! 3VA 0A 9.A=.:36A153. 7623653121A1EX6531 6.2 81 408?.@ 6E31:658.T21 =.09.A6?2 /01 . 5.A1 8.2 1E1A153.2 1 .2 K6E.:128.2 63:?703.2 G1 69:129153658.T21 628?A152Y12 8. KL81.Hc

O seu browser nosuporta este elemento!


3-May-16 CDM - RSM2 - 2015/16 161

HTML5 Vdeo

! D2 1E1A153.2 video=1:A?31A 36A7-A 681F?5?;


82/100

!"#"$%

k&

HTML5 Vdeo

! D 63:?703. poster6=1562 519122?36 86?58?96;1A 6 96::1>6:C

! D03:. 63:?703. /01 =.81:4 21: M3?E - . muted@/01 9.E.96 . K.E0A1 8. KL81. 6 U1:.C


3-May-16 CDM - RSM2 - 2015/16 163

HTML5 udio & Vdeo

! (653. .2 1E1A153.2 81 408?. 9.A. 81 KL81.=1:A?31A . 210 9.53:.E. 63:6K-2 81D*E*F;%5#(@ 962.@ =.: 6E>0A A.3?K.@ 5


83/100

!"#"$%

kZ

HTML5 udio & Vdeo

! j1281 /01 .2 1E1A153.2 1231_6A ?8153?F?968.29.A 0A 5A@ =.81A 21: 0268.2 .2 21>0?5312

A-3.8.2 1 =:.=:?186812c

"Q1=:.80U?:cdocument.getElementById(video).play();

"\6026:c

document.getElementById(video).pause();"\6:6:cdocument.getElementById(video).pause();document.getElementById(video).currentTime=0;


3-May-16 CDM - RSM2 - 2015/16 165

HTML5 udio & Vdeo

"D731: 6 =.2?;


84/100

!"#"$%

k]

HTML5 udio & Vdeo

! Q1E63?K6A1531 6.2 1E1A153.2 81 408?. 1KL81.@ ?531:1226 36A7-A :1F1:?: .2 5.K.21K153.2 /01 EX12 1230?5312@ 8?2=6:68.2 /0653.1E1A153.c"1234 =:.53. =6:6 21: 9.A1;68. 6 :1=:.80U?:c

onPlayq"9.A1;.0 6 21: :1=:.80U?8.c onPlayingq

"1234 =60268.c onPauseq


3-May-16 CDM - RSM2 - 2015/16 167

HTML5 udio & Vdeo

"31:A?5.0c onEndedq

"6K65;6 6. E.5>. 8. 31A=. 81 :1=:.80;


85/100

!"#"$%

k!

HTML5 Formulrios

! R. '()*!@ 36A7-A .2 F.:A0E4:?.2 2.F:1:6AK4:?62 6E31:6;Y12@ 81281 6E>052 5.K.21E1A153.2@ 63- K6E?86;05296A=.2 , ?59.:=.:658.@ 122159?6EA1531@6E>052 9.A=.:36A153.2 /01 1:6A6221>0:68.2 =.:D*E*F;%5#(C


3-May-16 CDM - RSM2 - 2015/16 169

HTML5 Formulrios

! \6226 6 21: 6>.:6 8?2=.5?7?E?U686 563?K6A15316 03?E?U6;


86/100

!"#"$%

k%

HTML5 Formulrios

! (6A7-A 6 .7:?>63.:?18681 8. =:1159X?A153.81 8131:A?568.2 ?3152 =6226 6 21: >6:653?8663:6K-2 86 ?59E02?56@ =6:6 . F.:A0E4:?. ?531?:. .0 6=1562=6:6 0A 868. ?31A@ 63:6K-2 86 ?59E02


87/100

!"#"$%

ki

HTML5 Formulrios

! D2 ?3152 81 input=6226A 36A7-A 6 31:5.K.2 3?=.2@ :1FE193?58. .2 9.531M8.2 /01 20?5312 A653VA . 62=193. 3L=?9.8.2 96A=.2 81 31J3.@ A62 1A 8?2=.2?3?K.29.A 319E68.2 K?:306?2 81K1A =.81: 6E31:6: .A12A. , 1C>C@ 81 319E68. 6EF650A-:?9. =6:6

50A-:?9.c"PTA6?Ec "P581:1;. 0$1c"(1E1F.51c


3-May-16 CDM - RSM2 - 2015/16 173

HTML5 Formulrios

! [E>052 812312 5.K.2 3?=.2 =.2201A K6E?86;63m:?.2HC

! O.5308.@ 962. 21_6 5191224:?. 81F?5?: 0A

=68:


88/100

!"#"$%

kk

HTML5 Formulrios

! \6226 6 X6K1: 3?=.2 81 input=6:6 86362 1X.:62C j12212 5.K.2 3?=.2@ ?531:1226 8123696:.2 21>0?5312c

"j636 1 X.:6c

"j636c "'.:6c


3-May-16 CDM - RSM2 - 2015/16 175

HTML5 Formulrios

! '4 36A7-A 8.?2 3?=.2 =6:6 129.EX6 81 K6E.:1250A 8131:A?568. ?531:K6E. G9.A=:1158?8.153:1 0A K6E.: AL5?A. 1 0A K6E.: A4J?A.HCP2312 2


89/100

!"#"$%

k#

HTML5 Formulrios

! P 6?586 0A 21E193.: 81 9.:12@ 5. F.:A63. QSvc

! I531:1226 :1F1:?:@ =6:6 31:A?56:@ . 63:?703.multiple@ /01 =1:A?31 6 ?521:;68. 9.A . 1E1A153. file@=1:A?31 6 21E19;0A 8.25.K.2 63:?703.2 .0 3?=.2 81 input@ 81 F.:A6 6F.:5191: 6E31:563?K62@ =.81A 21: M31?2 62F05;Y12 21>0?5312c"N671: 21 0A 63:?703.@ 50A 868. 1E1A153.@ -

20=.:368.cfunction elementSupportsAttribute(element,attribute) {var test = document.createElement(element);if (attribute in test) {return true;

}else {return false;

}}


3-May-16 CDM - RSM2 - 2015/16 178


90/100

!"#"$%

#^

HTML5 Formulrios

" N671: 21 0A 63:?703. 8. 1E1A153. ("#$- 20=.:368.cfunction inputSupportsType(type) {var input = document.createElement('input');input.setAttribute('type', type);if (input.type == 'type') {return false;

}else {return true;

}}


3-May-16 CDM - RSM2 - 2015/16 179

HTML5 Armazenamento

! D '()*! 3:.0J1 9.52?>. 0A6 6E31:563?K6 A6?2FE1JLK1E f 03?E?U6;0:6 1 36A7-A A6?2

:4=?86c .2 .7_193.2 81 6:A6U156A153. E.96EG63;*6 4(3%*/$HC

! O.A . 63;*6 4(3%*/$@ 3.862 62 =4>?562 9.A 6A12A6 .:?>1A G8.AL5?. 1 =:.3.9.E.H =.81A=6:3?EX6: .2 A12A.2 868.2C


9-May-16 CDM - RSM2 - 2015/16 180


91/100

!"#"$%

#$

HTML5 Armazenamento

! D2 .7_193.2 81 63;*6 4(3%*/$8?K?81AT21 1A8.?2 3?=.2 81 .7_193.2 8?23?53.2 G6A7.2622.9?68.2 6. .7_193. =:181F?5?8. windowHc"localStorage@ =6:6 6:A6U156A153. 21A E?A?31

81 31A=.q

"sessionStorage@ =6:6 6:A6U156A153. E?A?368.f 80:6;06:86: 1 E1: 868.2C


9-May-16 CDM - RSM2 - 2015/16 181

HTML5 Armazenamento

! `2658. 9.A. 1J1A=E. . .7_193.localStorage G2158. /01 . A12A. 21 6=E?966. sessionStorageH@ 6=:121536T21 9.A.>06:86:@ E1: 1 6=6>6: 868.2c"v06:86:c

localStorage.setItem(utilizador) = xpto;localStorage.utilizador = xpto;

"*1:cutilizador = localStorage.getItem(utilizador);utilizador = localStorage.utilizador;

"[=6>6:clocalStorage.removeItem(utilizador);


9-May-16 CDM - RSM2 - 2015/16 182


92/100

!"#"$%

#&

HTML5 Estruturao e Semntica

! PA 31:A.2 21AW53?9.2 G12=19?F?96A1531 6.5LK1E 86 8129:?;


93/100

!"#"$%

#Z


! P 36A7-A 0A6 A18?86 GmeterH =6:6 .03:621296E62 81 K6E.:12@ 9.A.@ =.: 1J1A=E.@31A=1:630:62@ 81F?5?58.T21 K6E.:12 9.A.K6E.:12 A6?2 76?J.2@ A6?2 6E3.2@ AL5?A.2@A4J?A.2@ A-8?62 1 K6E.:12 m=3?A.2C

Hoje est um dia quente dePrimavera.


3-May-16 CDM - RSM2 - 2015/16 185


! o0653. f 123:030:6 >1:6E 81 0A6 =4>?56 0$1@. '()*! 3:6U 9.52?>. .2 21>0?5312 5.K.21E1A153.2 G153:1 .03:.2Hc

"N19;6;


94/100

!"#"$%

#]


! PA ME3?A6 ?523W59?6@ 12312 5.K.2 1E1A153.269676A =.: 5:6581 8?23?5;


95/100

!"#"$%

#!


! O62. 5


96/100

!"#"$%

#%

HTML5 + JS Animao & Interao

! s?:306EA1531 3.86 1 /06E/01: 65?A6;


97/100

!"#"$%

#i


! R. 962. 81 65?A6;Y12 ?581=15815312 G.09.59.::15312 9.A 69;Y12 8. 03?E?U68.:H@ 0A667.:86>1A 9.A0A - 6 03?E?U6;


98/100

!"#"$%

#k


! `A6 6E31:563?K6 f F05;


99/100

!"#"$%

##


! PJ?231 6?586 0A6 31:91?:6 6E31:563?K6 /01153:13653. 21 9.A1;6 6 >151:6E?U6:@ 6 F05;


100/100

!"#"$%


! D03:. 62=193. ?A=.:36531@ 1A _.>.2 1 1A?531:69;