básicos html5 e javascript
TRANSCRIPT
-
7/26/2019 Bsicos Html5 e JavaScript
1/100
!"#"$%
$
Redes e Sistemas Multimdia II
Comunicao e Design Multimdia
HyperText Markup Language
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 2
-
7/26/2019 Bsicos Html5 e JavaScript
2/100
!"#"$%
&
HyperText Markup Language
! '()* ,!"#$%&$'( )*%+,# -*./,*/$, - ./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* :$;
-
7/26/2019 Bsicos Html5 e JavaScript
3/100
!"#"$%
Z
HyperText Markup Language
! 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
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 5
HyperText Markup Language
! 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;
-
7/26/2019 Bsicos Html5 e JavaScript
4/100
!"#"$%
]
HyperText Markup Language
! `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
-
7/26/2019 Bsicos Html5 e JavaScript
5/100
!"#"$%
!
HyperText Markup Language
! \.: 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
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 9
HyperText Markup Language
! [ 123:030:6 >1:6E 81 0A6 =4>?56 - 1236c
...
...
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 10
-
7/26/2019 Bsicos Html5 e JavaScript
6/100
!"#"$%
%
HyperText Markup Language
! [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
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 11
HyperText Markup Language
! [ >: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/26/2019 Bsicos Html5 e JavaScript
7/100
!"#"$%
i
HyperText Markup Language
! \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
-
7/26/2019 Bsicos Html5 e JavaScript
8/100
!"#"$%
k
HyperText Markup Language
! 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
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 16
-
7/26/2019 Bsicos Html5 e JavaScript
9/100
!"#"$%
#
HyperText Markup Language
"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
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 17
HyperText Markup Language
"'?=1:E?>6;6;?56 '()*@
2
-
7/26/2019 Bsicos Html5 e JavaScript
10/100
!"#"$%
$^
HyperText Markup Language
"O.A X?=1:E?>6;Y12 36A7-A - =1:A?3?86 6 9:?6;
-
7/26/2019 Bsicos Html5 e JavaScript
11/100
!"#"$%
$$
HyperText Markup Language
"*?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
-
7/26/2019 Bsicos Html5 e JavaScript
12/100
!"#"$%
$&
HyperText Markup Language
"*?2362 81 81F?5?;15-:?9. 81 0A6 E?236 81 81F?5?;
-
7/26/2019 Bsicos Html5 e JavaScript
13/100
!"#"$%
$Z
HyperText Markup Language
! *?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$
-
7/26/2019 Bsicos Html5 e JavaScript
14/100
!"#"$%
$]
HyperText Markup Language
! 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
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 27
HyperText Markup Language
! 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
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 28
-
7/26/2019 Bsicos Html5 e JavaScript
15/100
!"#"$%
$!
HyperText Markup Language
"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
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 29
HyperText Markup Language
! 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;
-
7/26/2019 Bsicos Html5 e JavaScript
16/100
!"#"$%
$%
HyperText Markup Language
! 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
-
7/26/2019 Bsicos Html5 e JavaScript
17/100
!"#"$%
$i
HyperText Markup Language
! n?9X1?:.2c
! PJ=E?96;0A62 6E31:6;Y12 9.A 6 K1:2
-
7/26/2019 Bsicos Html5 e JavaScript
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
-
7/26/2019 Bsicos Html5 e JavaScript
19/100
!"#"$%
$#
HTML & XHTML
"D2 1E1A153.2 p'()* 3VA 81 21: 21A=:181K?86A1531 F19X68.2 G02658. 0A6 76::6 g/h@/0658. 5
-
7/26/2019 Bsicos Html5 e JavaScript
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
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 40
-
7/26/2019 Bsicos Html5 e JavaScript
21/100
!"#"$%
&$
Cascading Style Sheets
! [ 3L30E. ?5F.:A63?K.@ 69306EA1531@ .81215K.EK?A153. - F1?3. 122159?6EA1531 6?58656 K1:2?56 '()*q
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 42
-
7/26/2019 Bsicos Html5 e JavaScript
22/100
!"#"$%
&&
Cascading Style Sheets
"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
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 43
Cascading Style Sheets
! `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?;
-
7/26/2019 Bsicos Html5 e JavaScript
23/100
!"#"$%
&Z
Cascading Style Sheets
! O.5308.@ 6 03?E?U6;?562 81 0A 45($@ F69?E?3658.@ 81226 F.:A6@ 6>123
-
7/26/2019 Bsicos Html5 e JavaScript
24/100
!"#"$%
&]
Cascading Style Sheets
! 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
}
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 47
Cascading Style Sheets
! 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;
}
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 48
-
7/26/2019 Bsicos Html5 e JavaScript
25/100
!"#"$%
&!
Cascading Style Sheets
! 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;}
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 49
Cascading Style Sheets
! b =.22LK1E 81F?5?: 123?E.2 8?K1:2.2 =6:6 .A12A. 1E1A153. '()*@ 63:6K-2 86 81F?5?;
-
7/26/2019 Bsicos Html5 e JavaScript
26/100
!"#"$%
&%
Cascading Style Sheets
! 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=;
-
7/26/2019 Bsicos Html5 e JavaScript
27/100
!"#"$%
&i
Cascading Style Sheets
! b =.22LK1E 36A7-A 6=E?96: A6?2 /01 0A69E6221 6. A12A. 31A=.@ X6K158. 0A6?531:219;
-
7/26/2019 Bsicos Html5 e JavaScript
28/100
!"#"$%
&k
Cascading Style Sheets
! \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}
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 55
Cascading Style Sheets
! 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;
-
7/26/2019 Bsicos Html5 e JavaScript
29/100
!"#"$%
Cascading Style Sheets
! 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
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 57
Cascading Style Sheets
! \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
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 58
-
7/26/2019 Bsicos Html5 e JavaScript
30/100
!"#"$%
Z^
Cascading Style Sheets
! 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;
-
7/26/2019 Bsicos Html5 e JavaScript
31/100
!"#"$%
Z$
Cascading Style Sheets
! 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. */
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 61
Cascading Style Sheets
! \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
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 62
-
7/26/2019 Bsicos Html5 e JavaScript
32/100
!"#"$%
Z&
Cascading Style Sheets
! [=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
-
7/26/2019 Bsicos Html5 e JavaScript
33/100
!"#"$%
ZZ
Cascading Style Sheets
! [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
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 65
Cascading Style Sheets
! 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
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 66
-
7/26/2019 Bsicos Html5 e JavaScript
34/100
!"#"$%
Z]
Cascading Style Sheets
! 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
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 67
Cascading Style Sheets
! [ 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;}
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 68
-
7/26/2019 Bsicos Html5 e JavaScript
35/100
!"#"$%
Z!
Cascading Style Sheets
! [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
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 70
-
7/26/2019 Bsicos Html5 e JavaScript
36/100
!"#"$%
Z%
Cascading Style Sheets
" K?2?7?E?8681 GvisibilityHc =.8158. 1236: K?2LK1EGvisibleH .0 .90E3. GhiddenHq
"F.:A6 81 6=:121536;
-
7/26/2019 Bsicos Html5 e JavaScript
37/100
!"#"$%
Zi
Cascading Style Sheets
! \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
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 73
JavaScript
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 74
-
7/26/2019 Bsicos Html5 e JavaScript
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
Redes e Sistemas Multimdia II
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
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 76
-
7/26/2019 Bsicos Html5 e JavaScript
39/100
!"#"$%
Z#
JavaScript
! D rN - 0A6 E?5>06>1A ?531:=:13686@ . /01/01: 8?U1: /01 5152 9.A=E136A15318?23?5362C
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 77
JavaScript
! DD*E* - 0A6 E?5>06>1A 81 =:.>:6A6;
-
7/26/2019 Bsicos Html5 e JavaScript
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
Redes e Sistemas Multimdia II
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;
-
7/26/2019 Bsicos Html5 e JavaScript
41/100
!"#"$%
]$
JavaScript
! D2 4;%5#(4=.81A 21: 81F?5?8.2 1 ?521:?8.23653. 5. 9671;6EX. G
-
7/26/2019 Bsicos Html5 e JavaScript
42/100
!"#"$%
]&
JavaScript
! `A 1J1A=E.c
algumas instrues usualmente,
definies de funes que so chamadas
noutro local)
mais algumas instrues
Redes e Sistemas Multimdia II
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
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 84
-
7/26/2019 Bsicos Html5 e JavaScript
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;
-
7/26/2019 Bsicos Html5 e JavaScript
44/100
!"#"$%
]]
JavaScript
! `A6 5.36c 36E 9.A. 1A ONN@ .2 =.53.2T1TKL:>0E62 5
-
7/26/2019 Bsicos Html5 e JavaScript
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
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 89
JavaScript Variveis
! PA7.:6 62 K6:?4K1?2 5
-
7/26/2019 Bsicos Html5 e JavaScript
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
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 91
JavaScript Objectos Predefinidos
! 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
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 92
-
7/26/2019 Bsicos Html5 e JavaScript
47/100
!"#"$%
]i
JavaScript Objectos Predefinidos
! 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
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 93
JavaScript Objectos Predefinidos
! 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
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 94
-
7/26/2019 Bsicos Html5 e JavaScript
48/100
!"#"$%
]k
JavaScript Objectos Predefinidos
! 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
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 95
JavaScript Objectos Predefinidos
! \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
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 96
-
7/26/2019 Bsicos Html5 e JavaScript
49/100
!"#"$%
]#
JavaScript Operadores
! (6E 9.A. 1AD*E*@ 1 .03:62 E?5>06>152 81=:.>:6A6;?9.2c &&@ ||1 !C
Redes e Sistemas Multimdia II
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;
-
7/26/2019 Bsicos Html5 e JavaScript
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
-
7/26/2019 Bsicos Html5 e JavaScript
51/100
!"#"$%
!$
JavaScript Funes
function soma(a, b) {var c = a + b;return c;
}
! R.31T21 /01 .2 6:>0A153.2 86 F05;
-
7/26/2019 Bsicos Html5 e JavaScript
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;
-
7/26/2019 Bsicos Html5 e JavaScript
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;
-
7/26/2019 Bsicos Html5 e JavaScript
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?;
-
7/26/2019 Bsicos Html5 e JavaScript
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];
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 110
-
7/26/2019 Bsicos Html5 e JavaScript
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
-
7/26/2019 Bsicos Html5 e JavaScript
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
-
7/26/2019 Bsicos Html5 e JavaScript
59/100
!"#"$%
!#
JavaScript Eventos
! j.2 AME3?=E.2 1J?2315312@ 6E>052 8.2 1K153.2A6?2 9.A052 2
-
7/26/2019 Bsicos Html5 e JavaScript
60/100
!"#"$%
%^
JavaScript Eventos
! (6A7-A - =.22LK1E 6 63:?70?;
-
7/26/2019 Bsicos Html5 e JavaScript
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?;
-
7/26/2019 Bsicos Html5 e JavaScript
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;
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 124
-
7/26/2019 Bsicos Html5 e JavaScript
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;
-
7/26/2019 Bsicos Html5 e JavaScript
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
Redes e Sistemas Multimdia II
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
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 128
-
7/26/2019 Bsicos Html5 e JavaScript
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
Redes e Sistemas Multimdia II
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
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 130
-
7/26/2019 Bsicos Html5 e JavaScript
66/100
!"#"$%
%%
HTML5
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 131
HTML5 Porqu?
! D 69306E 4(*.A*%A'()* G21_6 56?A=E1A1536;
-
7/26/2019 Bsicos Html5 e JavaScript
67/100
!"#"$%
%i
HTML5 Porqu?
! [22?A@ =6:6 6E-A 81 =:.90:6: F69?E?36: 6123:030:6;
-
7/26/2019 Bsicos Html5 e JavaScript
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. &$;
-
7/26/2019 Bsicos Html5 e JavaScript
69/100
!"#"$%
%#
HTML5 Estrutura Base
! P . A12A. 69.53191 =6:6 6 ?59E02
-
7/26/2019 Bsicos Html5 e JavaScript
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;
-
7/26/2019 Bsicos Html5 e JavaScript
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
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 142
-
7/26/2019 Bsicos Html5 e JavaScript
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=;
-
7/26/2019 Bsicos Html5 e JavaScript
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
-
7/26/2019 Bsicos Html5 e JavaScript
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;
-
7/26/2019 Bsicos Html5 e JavaScript
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();
Redes e Sistemas Multimdia II
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
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 150
-
7/26/2019 Bsicos Html5 e JavaScript
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);
Redes e Sistemas Multimdia II
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;
-
7/26/2019 Bsicos Html5 e JavaScript
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
Redes e Sistemas Multimdia II
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
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 154
-
7/26/2019 Bsicos Html5 e JavaScript
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 .=;
-
7/26/2019 Bsicos Html5 e JavaScript
79/100
!"#"$%
i#
HTML5 udio
! P2312 63:?703.2 2
-
7/26/2019 Bsicos Html5 e JavaScript
80/100
!"#"$%
k^
HTML5 udio
! O62. . 1%304$% 501T21 0A 1J1A=E. 9.A /063:. 5LK1?2 8181>:686;
-
7/26/2019 Bsicos Html5 e JavaScript
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!
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 161
HTML5 Vdeo
! D2 1E1A153.2 video=1:A?31A 36A7-A 681F?5?;
-
7/26/2019 Bsicos Html5 e JavaScript
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
Redes e Sistemas Multimdia II
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
-
7/26/2019 Bsicos Html5 e JavaScript
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;
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 165
HTML5 udio & Vdeo
"D731: 6 =.2?;
-
7/26/2019 Bsicos Html5 e JavaScript
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
Redes e Sistemas Multimdia II
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;
-
7/26/2019 Bsicos Html5 e JavaScript
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
Redes e Sistemas Multimdia II
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;
-
7/26/2019 Bsicos Html5 e JavaScript
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
-
7/26/2019 Bsicos Html5 e JavaScript
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
Redes e Sistemas Multimdia II
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:
-
7/26/2019 Bsicos Html5 e JavaScript
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
Redes e Sistemas Multimdia II
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
-
7/26/2019 Bsicos Html5 e JavaScript
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;
}}
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 178
-
7/26/2019 Bsicos Html5 e JavaScript
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;
}}
Redes e Sistemas Multimdia II
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
Redes e Sistemas Multimdia II
9-May-16 CDM - RSM2 - 2015/16 180
-
7/26/2019 Bsicos Html5 e JavaScript
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
Redes e Sistemas Multimdia II
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);
Redes e Sistemas Multimdia II
9-May-16 CDM - RSM2 - 2015/16 182
-
7/26/2019 Bsicos Html5 e JavaScript
92/100
!"#"$%
#&
HTML5 Estruturao e Semntica
! PA 31:A.2 21AW53?9.2 G12=19?F?96A1531 6.5LK1E 86 8129:?;
-
7/26/2019 Bsicos Html5 e JavaScript
93/100
!"#"$%
#Z
HTML5 Estruturao e Semntica
! 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.
Redes e Sistemas Multimdia II
3-May-16 CDM - RSM2 - 2015/16 185
HTML5 Estruturao e Semntica
! 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;
-
7/26/2019 Bsicos Html5 e JavaScript
94/100
!"#"$%
#]
HTML5 Estruturao e Semntica
! PA ME3?A6 ?523W59?6@ 12312 5.K.2 1E1A153.269676A =.: 5:6581 8?23?5;
-
7/26/2019 Bsicos Html5 e JavaScript
95/100
!"#"$%
#!
HTML5 Estruturao e Semntica
! O62. 5
-
7/26/2019 Bsicos Html5 e JavaScript
96/100
!"#"$%
#%
HTML5 + JS Animao & Interao
! s?:306EA1531 3.86 1 /06E/01: 65?A6;
-
7/26/2019 Bsicos Html5 e JavaScript
97/100
!"#"$%
#i
HTML5 + JS Animao & Interao
! 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;
-
7/26/2019 Bsicos Html5 e JavaScript
98/100
!"#"$%
#k
HTML5 + JS Animao & Interao
! `A6 6E31:563?K6 f F05;
-
7/26/2019 Bsicos Html5 e JavaScript
99/100
!"#"$%
##
HTML5 + JS Animao & Interao
! PJ?231 6?586 0A6 31:91?:6 6E31:563?K6 /01153:13653. 21 9.A1;6 6 >151:6E?U6:@ 6 F05;
-
7/26/2019 Bsicos Html5 e JavaScript
100/100
!"#"$%
HTML5 + JS Animao & Interao
! D03:. 62=193. ?A=.:36531@ 1A _.>.2 1 1A?531:69;