KD KD

KD
• ŽĐƵŵĞŶƚ KďũĞĐƚ DŽĚĞů͗DŽĚĞůŽĚĞKďũĞƚŽ

ĚĞŽĐƵŵĞŶƚŽ͖
KD • /ŶƚĞƌĨĂĐĞĚĞĨŝŶŝĚĂƉŽƌƵŵĂƉůŝĐĂƚŝǀŽƉĂƌĂ
;tϯͿ
ĂĐĞƐƐŽĂŽĚŽĐƵŵĞŶƚŽ͖
WƌŽĨ͘ůĂŶůǀĞƐKůŝǀĞŝƌĂ • EŽŶŽƐƐŽĐĂƐŽ͕ŝŶƚĞƌĨĂĐĞĚĞĨŝŶŝĚĂƉŽƌƵŵ
ŶĂǀĞŐĂĚŽƌƉĂƌĂĂĐĞƐƐŽĂĚŽĐƵŵĞŶƚŽƐ,dD>͖
KD KD
• KƐŶĂǀĞŐĂĚŽƌĞƐtĞďĐŽŵƉĂƚşǀĞŝƐĐŽŵ • KŐƌĂŶĚĞƉƌŽďůĞŵĂĠƋƵĞĨŽƌŶĞĐĞĚŽƌĞƐ
:ĂǀĂ^ĐƌŝƉƚ ũĄĚĞĨŝŶĞŵƵŵŵŽĚĞůŽĚĞŽďũĞƚŽ ĚŝĨĞƌĞŶƚĞƐ;ĚĞŶĂǀĞŐĂĚŽƌĞƐͿŝŵƉůĞŵĞŶƚĂǀĂŵ
ĚĞĚŽĐƵŵĞŶƚŽ͖ ǀĞƌƐƁĞƐĚŝĨĞƌĞŶƚĞƐĚĞKDƐ͖
• KƐƌĞĐƵƌƐŽƐĚŝƐƉŽŶşǀĞŝƐƉĂƌĂ:ĂǀĂ^ĐƌŝƉƚ ĐŽŵŽ • ƚĠƋƵĞĂtϯ ;tŽƌůĚtŝĚĞ tĞď
ĂƐĐŽůĞĕƁĞƐĨŽƌŵƐ΀΁͕ůŝŶŬƐ΀΁ ĞĂŶĐŚŽƌƐ΀΁͕ŽƐ ŽŶƐŽƌƚŝƵŵͿƉĂĚƌŽŶŝǌŽƵŽKD;ŶşǀĞůϭ͕
ŽďũĞƚŽƐǁŝŶĚŽǁ ĞĚŽĐƵŵĞŶƚ ƌĞƉƌĞƐĞŶƚĂŵ ŶşǀĞůϮĞŶşǀĞůϯͿƋƵĞĠŝŵƉůĞŵĞŶƚĂĚŽƋƵĂƐĞ
ƉĂƌƚĞƐĚĞKD ũĄĚŝƐƉŽŶşǀĞŝƐŶŽƐ ƋƵĞƚŽƚĂůŵĞŶƚĞƉĞůŽƐƉƌŝŶĐŝƉĂŝƐ
ŶĂǀĞŐĂĚŽƌĞƐ͖ ŶĂǀĞŐĂĚŽƌĞƐ͖
ϯ ϰ
KD KD
• KDĠŝŶĚĞƉĞŶĚĞŶƚĞĚĞƉůĂƚĂĨŽƌŵĂĞ • ƌĞƉƌĞƐĞŶƚĂĕĆŽĚĞĚŽĐƵŵĞŶƚŽƐ,dD>ŶŽ
ůŝŶŐƵĂŐĞŵ͖ KDĠďĂƐĞĂĚĂĞŵƵŵĂĂƌƋƵŝƚĞƚƵƌĂ
• WĂƌĂŵĂŝŽƌĞƐƌĞĨĞƌġŶĐŝĂƐƚĠĐŶŝĐĂƐ͕ĐŽŶƐƵůƚĞ ŚŝĞƌĄƌƋƵŝĐĂ͕ŽƵƐĞũĂ͕ƵŵĂĄƌǀŽƌĞ͖
ǁǁǁ͘ǁϯ͘ŽƌŐ͘ • KƚŝƉŽĚĞĄƌǀŽƌĞĠƵŵĂĄƌǀŽƌĞŐĞŶĠƌŝĐĂŽŶĚĞ
ƵŵŶſĠƉĂŝ ĚŽƐŶſƐĚŝƌĞƚĂŵĞŶƚĞĂďĂŝǆŽĚĞůĞ
ĞĨŝůŚŽ ĚŽŶſĚŝƌĞƚĂŵĞŶƚĞĂĐŝŵĂĚĞůĞ͖
ϱ ϲ
01 <html>
02 <head>
KD 03
04
05
<title>Exemplo de documento HTML</title>
</head>
<body>
06 <h1>Um documento HTML</h1>
07 <p>Este é um <i>simples</i> documento.</p>
08 </body>
• hŵĞǆĞŵƉůŽ;ĂĚĂƉƚĂĚŽĚĞ&ůĂŶĂŐĂŶ ;ϮϬϬϰͿͿ͗ 09 </html>
ŽĐƵŵĞŶƚ
фŚƚŵůх
фŚĞĂĚх фďŽĚǇх
фƚŝƚůĞх
фŚϭх фƉх
͞ǆĞŵƉůŽĚĞ
ĚŽĐƵŵĞŶƚŽ,dD>͟ ͞hŵĚŽĐƵŵĞŶƚŽ
,dD>͟
͞ƐƚĞΘĞĂĐƵƚĞ͖Ƶŵ͟ фŝх ͞ĚŽĐƵŵĞŶƚŽ͟
͞ƐŝŵƉůĞƐ͟
ϳ ϴ
KD KD
• KƉĂĚƌĆŽKDĚĞĨŝŶĞĂŝŶƚĞƌĨĂĐĞ EŽĚĞ ƉĂƌĂ • WƌŝŶĐŝƉĂŝƐĂƚƌŝďƵƚŽƐĞŵĠƚŽĚŽƐĚĂŝŶƚĞƌĨĂĐĞ
ƋƵĞƐĞƉŽƐƐĂŵĂŶŝƉƵůĂƌĞƉĞƌĐŽƌƌĞƌĂĄƌǀŽƌĞ EŽĚĞ͗
ƋƵĞƌĞƉƌĞƐĞŶƚĂŽĚŽĐƵŵĞŶƚŽ,dD>͖ ƚƌŝďƵƚŽͬŵĠƚŽĚŽ ĞƐĐƌŝĕĆŽ
ĐŚŝůĚEŽĚĞƐ ZĞƚŽƌŶĂƵŵĂ ůŝƐƚĂĐŽŵƚŽĚŽƐŽƐĨŝůŚŽƐĚĞƵŵŶſ
ĨŝƌƐƚŚŝůĚ ZĞƚŽƌŶĂ ŽƉƌŝŵĞŝƌŽĨŝůŚŽĚĞƵŵŶſ
ůĂƐƚŚŝůĚ ZĞƚŽƌŶĂŽƷůƚŝŵŽĨŝůŚŽĚĞƵŵŶſ
ŶĞǆƚ^ŝďůŝŶŐ ZĞƚŽƌŶĂŽƉƌſǆŝŵŽ ŝƌŵĆŽĚĞƵŵŶſ
ƉƌĞǀŝŽƵƐ^ŝďůŝŶŐ ZĞƚŽƌŶĂŽŝƌŵĆŽĂŶƚĞƌŝŽƌĚĞ ƵŵŶſ
ƉĂƌĞŶƚEŽĚĞ ZĞƚŽƌŶĂŽŶſƉĂŝ
ĂƉƉĞŶĚŚŝůĚ;Ϳ ĚŝĐŝŽŶĂ ƵŵŶſĨŝůŚŽ
ƌĞŵŽǀĞŚŝůĚ;Ϳ ZĞŵŽǀĞƵŵŶſĨŝůŚŽ
ƌĞƉůĂĐĞŚŝůĚ;Ϳ ^ƵďƐƚŝƚƵŝƵŵŶſĨŝůŚŽ
ϵ ŝŶƐĞƌƚĞĨŽƌĞ;Ϳ ĚŝĐŝŽŶĂ ƵŵŶſĂŶƚĞƐ ĚŽŶſŝŶĚŝĐĂĚŽŶŽƉĂƌąŵĞƚƌŽ ϭϬ
KD KD
• dŝƉŽƐĚĞŶſƐ͗ • dŝƉŽƐĚĞŶſƐ͗
/ŶƚĞƌĨĂĐĞ ŽŶƐƚĂŶƚĞŶŽĚĞdǇƉĞ sĂůŽƌĚĂĐŽŶƐƚĂŶƚĞ
– ĂĚĂƚŝƉŽĚĞŶſĚĂĄƌǀŽƌĞƉŽƐƐƵŝƵŵĂ
ůĞŵĞŶƚ EŽĚĞ͘>DEdͺEK ϭ
ƐƵďŝŶƚĞƌĨĂĐĞ ĞƐƉĞĐşĨŝĐĂƋƵĞĚĞĨŝŶĞĂƚƌŝďƵƚŽƐĞ dĞǆƚ EŽĚĞ͘dydͺEK ϯ
ŵĠƚŽĚŽƐƉƌſƉƌŝŽƐĚĞƐƐĞƚŝƉŽĚĞŶſ͖ ŽĐƵŵĞŶƚ EŽĚĞ͘KhDEdͺEK ϵ
– ƉƌŽƉƌŝĞĚĂĚĞŶŽĚĞdǇƉĞ ĞƐƉĞĐŝĨŝĐĂŽƚŝƉŽĚŽ ŽŵŵĞŶƚ EŽĚĞ͘KDDEdͺEK ϴ

ŽĐƵŵĞŶƚ&ƌĂŐŵĞŶƚ EŽĚĞ͘KhDEdͺ&Z'DEdͺEK ϭϭ
Ŷſ͖
ƚƚƌ EŽĚĞ͘ddZ/hdͺEK Ϯ
– KŶſƌĂŝǌĚĞƵŵĂĄƌǀŽƌĞKDĠƵŵŽďũĞƚŽ
ŽĐƵŵĞŶƚ͘
ϭϭ ϭϮ
KD KDĞ,dD>
• ƚƌŝďƵƚŽƐ͗ • KƉĂĚƌĆŽKDĨŽŝƉƌŽũĞƚĂĚŽƉĂƌĂƵƐŽĐŽŵ
– KƐĂƚƌŝďƵƚŽƐĚĞƵŵĞůĞŵĞŶƚŽ;ƐƌĐ͕ǁŝĚƚŚ͕ ĚŽĐƵŵĞŶƚŽƐ,dD>ĞyD>͖
ƚĂƌŐĞƚ͕ĞƚĐ͘ͿƉŽĚĞŵƐĞƌĐŽŶƐƵůƚĂĚŽƐ͕ŝŶĐůƵşĚŽƐ͕ • ůŐƵŶƐĞůĞŵĞŶƚŽƐĞĂƚƌŝďƵƚŽƐƐĆŽ
ĐŽŶĨŝŐƵƌĂĚŽƐĞĞǆĐůƵşĚŽƐĂƚƌĂǀĠƐĚŽƐŵĠƚŽĚŽƐ ƌĞůĂƚŝǀĂŵĞŶƚĞŐĞŶĠƌŝĐŽƐ͕ƐĞƌǀŝŶĚŽĂŽƐĚŽŝƐ
ŐĞƚƚƚƌŝďƵƚĞ;Ϳ ĞƐĞƚƚƚƌŝďƵƚĞ;Ϳ͖
ƉĂĚƌƁĞƐ͖
– KŵĠƚŽĚŽŐĞƚƚƚƌŝďƵƚĞEŽĚĞ;Ϳ ƌĞƚŽƌŶĂƵŵ
ŽďũĞƚŽƚƚƌ ĐŽŵŽĂƚƌŝďƵƚŽĞƐĞƵǀĂůŽƌ͘ • ůŐƵŵĂƐŝŶƚĞƌĨĂĐĞƐƐĆŽĞƐƉĞĐşĨŝĐĂƐƉĂƌĂ
ĚŽĐƵŵĞŶƚŽƐ,dD>͖
ϭϯ ϭϰ
KDĞ,dD> KDĞ,dD>
• ďĂŝǆŽ͕ƵŵĂŚŝĞƌĂƌƋƵŝĂƉĂƌĐŝĂůĚĂƐŝŶƚĞƌĨĂĐĞƐ • ƐŝŶƚĞƌĨĂĐĞƐ,dD>ŽĐƵŵĞŶƚ Ğ
KD;&>E'E͕ϮϬϬϰͿ͗ ,dD>ůĞŵĞŶƚ ;ĞƐƵĂƐƐƵďŝŶƚĞƌĨĂĐĞƐͿƐĆŽ
ŽĐƵŵĞŶƚ ,dD>ŽĐƵŵĞŶƚ ,dD>,ĞĂĚůĞŵĞŶƚ
ĞƐƉĞĐşĨŝĐĂƐƉĂƌĂĚŽĐƵŵĞŶƚŽƐ,dD>͖
dĞǆƚ ,dD>ŽĚǇůĞŵĞŶƚ • ŝǀĞƌƐĂƐŝŶƚĞƌĨĂĐĞƐƐĆŽĞƐƉĞĐşĨŝĐĂƐƉĂƌĂ
EŽĚĞ
ŚĂƌĂĐƚĞƌĂƚĂ
,dD>dŝƚůĞůĞŵĞŶƚ ĞůĞŵĞŶƚŽƐ,dD>;,dD>,ĞĂĚůĞŵĞŶƚ͕
ŽŵŵĞŶƚ
,dD>WĂƌĂŐƌĂƉŚůĞŵĞŶƚ
,dD>ŽĚǇůĞŵĞŶƚ͕ĞƚĐ͘Ϳ͖
ůĞŵĞŶƚ ,dD>ůĞŵĞŶƚ ,dD>/ŶƉƵƚůĞŵĞŶƚ
,dD>dĂďůĞůĞŵĞŶƚ
ĞƚĐ͘͘͘
ƚƚƌ ϭϱ ϭϲ
KDĞ,dD> KDĞ,dD>
• ŝŶƚĞƌĨĂĐĞ,dD>ůĞŵĞŶƚ ĚĞĨŝŶĞĂƐƐĞŐƵŝŶƚĞƐ • KƐŶŽŵĞƐĚĞƉƌŽƉƌŝĞĚĂĚĞƐ,dD>ƉŽƐƐƵĞŵ
ƉƌŽƉƌŝĞĚĂĚĞƐ͗ŝĚ͕ƐƚǇůĞ͕ƚŝƚůĞ͕ůĂŶŐ͕Ěŝƌ Ğ ƵŵƉĂĚƌĆŽŶŽKD͗
ĐůĂƐƐEĂŵĞ͖
– ^ĞŵƉƌĞĐŽŵĞĕĂŵĐŽŵůĞƚƌĂŵŝŶƷƐĐƵůĂ͖
• ƐƚĂƐƉƌŽƉƌŝĞĚĂĚĞƐƌĞĨĞƌĞŵͲƐĞĂŽƐĂƚƌŝďƵƚŽƐ
– ^ĞŽŶŽŵĞĚĂƉƌŽƉƌŝĞĚĂĚĞƉŽƐƐƵŝŵĂŝƐĚĞƵŵĂ
ŝĚ͕ƐƚǇůĞ͕ƚŝƚůĞ͕ůĂŶŐ͕Ěŝƌ ĞĐůĂƐƐ͕ĐŽŵƵŶƐĂ
ƉĂůĂǀƌĂ͕ĂƉƌŝŵĞŝƌĂůĞƚƌĂĚĞĐĂĚĂƉĂůĂǀƌĂĠ
ƚŽĚĂƐĂƐŵĂƌĐĂƐ,dD>͖
ŵĂŝƷƐĐƵůĂ͖
• ƐƐƵďŝŶƚĞƌĨĂĐĞƐ ĚĞ,dD>ůĞŵĞŶƚ ĚĞĨŝŶĞŵ͕ – ǆĞŵƉůŽ͗ĂƚƌŝďƵƚŽ͗ŵĂǆůĞŶŐƚŚ ;фŝŶƉƵƚхͿʹ
ĂůĠŵĚĞƐƚĂƐ͕ƉƌŽƉƌŝĞĚĂĚĞƐĞƐƉĞĐşĨŝĐĂƐĚĂ ƉƌŽƉƌŝĞĚĂĚĞKD͗ŵĂǆ>ĞŶŐƚŚ͖
ŵĂƌĐĂĂƋƵĞƐĞƌĞĨĞƌĞŵ͖
ϭϳ ϭϴ
KDĞ,dD> KDĞ,dD>
• KƐŶŽŵĞƐĚĞƉƌŽƉƌŝĞĚĂĚĞƐ,dD>ƉŽƐƐƵĞŵ • hŵƉƌŝŵĞŝƌŽĞǆĞŵƉůŽ͗
ƵŵƉĂĚƌĆŽŶŽKD͗ – ŽŵŽƉƌŝŵĞŝƌŽĞǆĞŵƉůŽ͕ǀĂŵŽƐĐŽŶƐƚƌƵŝƌƵŵĂ
– ^ĞŽŶŽŵĞĚĞƵŵĂƚƌŝďƵƚŽĐŽŶĨůŝƚĂƌĐŽŵŽŶŽŵĞ ƉĄŐŝŶĂƋƵĞŵŽƐƚƌĞĂƐƵĂƉƌſƉƌŝĂĞƐƚƌƵƚƵƌĂ͖
ĚĞƵŵĂƉĂůĂǀƌĂƌĞƐĞƌǀĂĚĂĚŽ:ĂǀĂ^ĐƌŝƉƚ͕ĞůĞĠ – sĞũĂĐŽŵŽĂĂƉůŝĐĂĕĆŽĚĞǀĞĨƵŶĐŝŽŶĂƌ͗
ƉƌĞĐĞĚŝĚŽƉŽƌ͞Śƚŵů͗͟ĂƚƌŝďƵƚŽ͗ĨŽƌ ;фůĂďĞůхͿʹ
ƉƌŽƉƌŝĞĚĂĚĞKD͗Śƚŵů&Žƌ͖
– hŵĂĞǆĐĞĕĆŽăƌĞŐƌĂĠĂƉƌŽƉƌŝĞĚĂĚĞ
ĐůĂƐƐEĂŵĞ͕ƌĞĨĞƌĞŶƚĞĂŽĂƚƌŝďƵƚŽĐůĂƐƐ͘
ϭϵ ϮϬ
KDĞ,dD>
• hŵƉƌŝŵĞŝƌŽĞǆĞŵƉůŽ͗
– KďŽƚĆŽ͞>ŝƐƚĂƌĞƐƚƌƵƚƵƌĂ͟ĚĞǀĞĂƉƌĞƐĞŶƚĂƌ͕ĚĞ
ĨŽƌŵĂĚŝŶąŵŝĐĂ͕ƚŽĚĂĂĞƐƚƌƵƚƵƌĂĚŽĚŽĐƵŵĞŶƚŽ
,dD>;ƐĞƵƐĞůĞŵĞŶƚŽƐͿĐŽŶƐŝĚĞƌĂŶĚŽƚĂŵďĠŵ
ĂƐƵĂƌĞůĂĕĆŽ;ƉĂŝ͕ĨŝůŚŽĞŝƌŵĆŽͿ͖
– KďŽƚĆŽ͞>ŝŵƉĂƌ͟ĚĞǀĞĂƉĂŐĂƌĂĞƐƚƌƵƚƵƌĂ
ĂƉƌĞƐĞŶƚĂĚĂ͘
Ϯϭ ϮϮ
01
02
03
<html>
<head>
<title>Exemplo DOM</title>
KDĞ,dD>
04 <script language="JavaScript">
05 function imprimeElementos(no, prefixo) {
06
07
08
}
document.getElementById("lista").innerHTML = varreDocumento(document, '');
function varreDocumento(no, prefixo) {

• hŵƉƌŝŵĞŝƌŽĞǆĞŵƉůŽ͗
09 var result = "";
10
11
if (no.nodeType == 1) // ELEMENT_NODE
result += "<br />" + prefixo + no.tagName;
– ĨƵŶĕĆŽŝŵƉƌŝŵĞůĞŵĞŶƚŽƐ ;ůŝŶŚĂƐϬϱĂϬϳͿ
12
13
var filhos = no.childNodes;
prefixo += "-";
ĂƉĞŶĂƐĂĚŝĐŝŽŶĂŽĐŽŶƚĞƷĚŽĂŽĚŽĐƵŵĞŶƚŽ
for (var i = 0; i < filhos.length; i++)
14
15 result += varreDocumento(filhos[i], prefixo); ,dD>͖
16 return result;
17 }
18 </script> – ĨƵŶĕĆŽǀĂƌƌĞŽĐƵŵĞŶƚŽ ;ϬϴĂϭϳͿƉĞƌĐŽƌƌĞ
19 </head>
20
21
<body>
<h1>Exemplo DOM</h1>
ƌĞĐƵƌƐŝǀĂŵĞŶƚĞĂĄƌǀŽƌĞĚĞŶſƐ;ŶŽĚĞƐͿĞ͕Ă
22
23
<input type="button" value="Listar estrutura" onclick="imprimeElementos();">
<input type="button" value="Limpar" ĐĂĚĂĞůĞŵĞŶƚŽ,dD>ĞŶĐŽŶƚƌĂĚŽ͕ǀĂŝŵŽŶƚĂŶĚŽ
24 onclick="document.getElementById('lista').innerHTML = '';">
25 <p>Estrutura do documento:</p> ƵŵĂƐƚƌŝŶŐ ƋƵĞƐĞƌĄƌĞƚŽƌŶĂĚĂƉĂƌĂƐĞƌ
26 <span id="lista"></span>
27
28
</body>
</html>
ĂĚŝĐŝŽŶĂĚĂĂŽĚŽĐƵŵĞŶƚŽ͖
Ϯϯ Ϯϰ
KDĞ,dD> KDĞ,dD>
• hŵƉƌŝŵĞŝƌŽĞǆĞŵƉůŽ͗ • ^ĞŐƵŶĚŽĞǆĞŵƉůŽ͗
– WĞƌĐĞďĂƋƵĞĂĨƵŶĕĆŽǀĂƌƌĞŽĐƵŵĞŶƚŽ ƌĞĐĞďĞ – ŽŵƵŵĂƉĞƋƵĞŶĂĂůƚĞƌĂĕĆŽŶŽĞǆĞŵƉůŽ
ĚŽŝƐƉĂƌąŵĞƚƌŽƐ͗ ĂŶƚĞƌŝŽƌ͕ǀĂŵŽƐƉĞƌĐŽƌƌĞƌŽĚŽĐƵŵĞŶƚŽĞŵ
• ŶŽ͗ŶſĂƉĂƌƚŝƌĚŽƋƵĂůƐĞƌĄĨĞŝƚĂĂǀĂƌƌĞĚƵƌĂ͖ ďƵƐĐĂĚŽƐĞƵĐŽŶƚĞƷĚŽĚĞƚĞǆƚŽ͖
• ƉƌĞĨŝǆŽ͗ƵŵĂƐƚƌŝŶŐ ƋƵĞĐŽŶƚƌŽůĂǀŝƐƵĂůŵĞŶƚĞĐŽŵŽ – sĞũĂŶŽƉƌſǆŝŵŽƐůŝĚĞ͗
ƐĞƌĄŝŵƉƌĞƐƐĂĂƌĞůĂĕĆŽĞŶƚƌĞŽƐŶſƐ͘
Ϯϱ Ϯϲ
01 <html>
02 <head>
03 <title>Exemplo 2 DOM</title>
05 function imprimeTexto() {
06 document.getElementById("lista").innerHTML = textoDocumento(document);
07 }
08 function textoDocumento(no) {
09 var result = "";
10 if (no.nodeType == 3) // TEXT_NODE
11 if (trim(no.nodeValue).length > 0) {
12 if (no.parentNode.tagName != "SCRIPT")
13 result += "<br />" + no.parentNode.tagName + ": " + no.nodeValue;
14 }
15 var filhos = no.childNodes;
16 for (var i = 0; i < filhos.length; i++)
17 result += textoDocumento(filhos[i]);
18 return result;
19 }
20 function trim(str) {
21 return str.replace(/^\s+|\s+$/g,"");
22 }
23 </script>
24 </head>
Ϯϳ Ϯϴ
KDĞ,dD>
• ^ĞŐƵŶĚŽĞǆĞŵƉůŽ͗
25 <body>
26 <h1>Exemplo 2 DOM</h1>
27
28
<p>Este exemplo mostra o texto que compõe este documento.</p>
<div>É um exemplo <span>simples</span>, por isso o documento não
– ĨƵŶĕĆŽƚĞǆƚŽŽĐƵŵĞŶƚŽ ǀĂƌƌĞŽĚŽĐƵŵĞŶƚŽă
29
30
possui muito conteúdo.</div>
<strong>A função não exibe o texto do script.</strong>
ƉƌŽĐƵƌĂĚĞŶſƐĚŽƚŝƉŽϯ;dydͺEKͿ͖
31 <br /><br />
32
33
<input type="button" value="Listar texto do documento" onclick="imprimeTexto();">
<input type="button" value="Limpar"
– WĂƌĂĐĂĚĂŶſĞŶĐŽŶƚƌĂĚŽĠǀĞƌŝĨŝĐĂĚŽƐĞŽƐĞƵ
34 onclick="document.getElementById('lista').innerHTML = '';">
35 <p>Texto contido no documento:</p> ĐŽŶƚĞƷĚŽŶĆŽĠǀĂǌŝŽ͘^ĞŶĆŽĨŽƌ͕ŵŽƐƚƌĂĂƚĂŐ ă
36 <span id="lista"></span>
37
38
</body>
</html>
ƋƵĂůŽƚĞǆƚŽƉĞƌƚĞŶĐĞĞŽĐŽŶƚĞƷĚŽ͘
Ϯϵ ϯϬ
ůƚĞƌĂŶĚŽƵŵĚŽĐƵŵĞŶƚŽ ůƚĞƌĂŶĚŽƵŵĚŽĐƵŵĞŶƚŽ
• KƉƌŝŶĐŝƉĂůŽďũĞƚŝǀŽĚŽƵƐŽĚĞ:ĂǀĂ^ĐƌŝƉƚ Ğŵ • KŵĠƚŽĚŽĂƉƉĞŶĚŚŝůĚ ƉĞƌŵŝƚĞĂĚŝĐŝŽŶĂƌ
ĐŽŶũƵŶƚŽĐŽŵŽ,dD>ĠƚŽƌŶĂƌŽƐ ƵŵŶſĂŽƵƚƌŽŶſƋƵĂůƋƵĞƌ͘KŶſƋƵĞĐŚĂŵĂ
ĚŽĐƵŵĞŶƚŽƐĚŝŶąŵŝĐŽƐ;,dD>Ϳ͖ ŽŵĠƚŽĚŽƌĞĐĞďĞƌĄƵŵŶŽǀŽŶſĨŝůŚŽ͖
• WĂƌĂƋƵĞŝƐƐŽƉŽƐƐĂĂĐŽŶƚĞĐĞƌ͕ŵĠƚŽĚŽƐĞ • WŽƌĞǆĞŵƉůŽ͕ĐŚĂŵĂŶĚŽĂƉƉĞŶĚŚŝůĚ ĚĞƵŵ
ĂƚƌŝďƵƚŽƐĚĞŵĂŶŝƉƵůĂĕĆŽĚĞƵŵĚŽĐƵŵĞŶƚŽ ŶſďŽĚǇ͕ĞƐƚĂƌĞŵŽƐĂĚŝĐŝŽŶĂŶĚŽƵŵĨŝůŚŽĂŽ
ƉƌĞĐŝƐĂŵƐĞƌĚŝƐƉŽŶŝďŝůŝǌĂĚŽƐ͖ ĐŽƌƉŽĚŽĚŽĐƵŵĞŶƚŽ͘KĨŝůŚŽĂĚŝĐŝŽŶĂĚŽƐĞƌĄ
• KDĚĞĨŝŶĞĚŝǀĞƌƐŽƐŵĠƚŽĚŽƐĚĞ ŽƷůƚŝŵŽ ĨŝůŚŽĚŽĞůĞŵĞŶƚŽďŽĚǇ͖
ŵĂŶŝƉƵůĂĕĆŽĚĞƵŵĚŽĐƵŵĞŶƚŽ͕ĞŶƚƌĞĞůĞƐ͕ • ƐƚĞŵĠƚŽĚŽƌĞĐĞďĞƵŵŽďũĞƚŽEŽĚĞ ;ƋƵĞ
ĂƉƉĞŶĚŚŝůĚ ĞƌĞŵŽǀĞŚŝůĚ͖ ƐĞƌĄĂĚŝĐŝŽŶĂĚŽͿĐŽŵŽƉĂƌąŵĞƚƌŽ͘
ϯϭ ϯϮ
• KŵĠƚŽĚŽƌĞŵŽǀĞŚŝůĚ ƉĞƌŵŝƚĞƌĞŵŽǀĞƌƵŵ • EŽŶŽƐƐŽƉƌſǆŝŵŽĞǆĞŵƉůŽǀĂŵŽƐĐŽŶƐƚƌƵŝƌ
ŶſĨŝůŚŽĚĞŽƵƚƌŽŶſ͘KŶſƋƵĞĐŚĂŵĂŽ ƵŵĂƉĄŐŝŶĂƋƵĞƉĞƌŵŝƚĂƋƵĞŽƵƐƵĄƌŝŽ
ŵĠƚŽĚŽƚĞƌĄŽĨŝůŚŽƌĞŵŽǀŝĚŽ͖ ĂĚŝĐŝŽŶĞĞƌĞŵŽǀĂƉĂƌĄŐƌĂĨŽƐ͖
• WŽƌĞǆĞŵƉůŽ͕ĐŚĂŵĂŶĚŽƌĞŵŽǀĞŚŝůĚ ĚĞƵŵ • WĂƌĂĐĂĚĂƉĂƌĄŐƌĂĨŽĂĚŝĐŝŽŶĂĚŽƐĞƌĄƚĂŵďĠŵ
ŶſďŽĚǇ͕ĞƐƚĂƌĞŵŽƐƌĞŵŽǀĞŶĚŽƵŵ ĂĚŝĐŝŽŶĂĚŽƵŵďŽƚĆŽƉĂƌĂĂƐƵĂĞǆĐůƵƐĆŽ͖
ĞůĞŵĞŶƚŽĚŽĐŽƌƉŽĚŽĚŽĐƵŵĞŶƚŽ͖ • sĞũĂĂƐƚĞůĂƐĚĂƉĄŐŝŶĂƋƵĞƐĞƌĄĐƌŝĂĚĂ͗
• ƐƚĞŵĠƚŽĚŽƌĞĐĞďĞƵŵŽďũĞƚŽEŽĚĞ ;ƋƵĞ
ƐĞƌĄƌĞŵŽǀŝĚŽͿĐŽŵŽƉĂƌąŵĞƚƌŽ͘
ϯϯ ϯϰ
01 <html>
02 <head>
03 <title>Manipulando documentos</title>
05 var controle = 0;
06 function adicionar() {
07 var pNode = document.createElement("P"); // Cria o elemento P
08 pNode.setAttribute("id", "p" + controle); // Cria um id para remoção
09 var texto = document.getElementById("txtParagrafo").value; // Recupera o texto
10 texto += " "; // Adiciona um espaço em branco ao texto
11 var tNode = document.createTextNode(texto); // Cria o elemento TEXT
12 var bNode = document.createElement("INPUT") // Cria o elemento INPUT
13 // Define atributos para o elemento INPUT
14 bNode.setAttribute("type", "button");
15 bNode.setAttribute("value", "Excluir");
16 bNode.setAttribute("onclick", "excluir('p" + controle + "');");
17 pNode.appendChild(tNode); // Adiciona TEXT como filho de P
18 pNode.appendChild(bNode); // Adiciona INPUT como filho de P
19 document.body.appendChild(pNode); // Adiciona P como filho de BODY
20 controle++;
21 }
22 function excluir(id) {
23 document.body.removeChild(document.getElementById(id));
24 }
25 </script>
26 </head>
27 <body>
28 <h1>Manipulando documentos</h1>
29 <p>Digite o texto do parágrafo abaixo:</p>
30 <input type="text" id="txtParagrafo" size="30">
31 <input type="button" value="Adicionar parágrafo" onclick="adicionar();">
32 </body>
33 </html>
ϯϱ ϯϲ
• ǆĞŵƉůŽϭ͗ • ǆĞŵƉůŽϭ͗
– KŵĠƚŽĚŽĐƌĞĂƚĞůĞŵĞŶƚ ;ůŝŶŚĂƐϬϳĞϭϮͿĐƌŝĂĞ – KŵĠƚŽĚŽŐĞƚůĞŵĞŶƚǇ/Ě ;ůŝŶŚĂƐϬϵĞϮϯͿ
ƌĞƚŽƌŶĂƵŵŽďũĞƚŽůĞŵĞŶƚ ĚĞĂĐŽƌĚŽĐŽŵĂ ƌĞƚŽƌŶĂƵŵĞůĞŵĞŶƚŽƉĞůŽƐĞƵŝĚĞŶƚŝĨŝĐĂĚŽƌ͕
ŵĂƌĐĂ;ƚĂŐͿƉĂƐƐĂĚĂĐŽŵŽƉĂƌąŵĞƚƌŽ͖ ŝŶĚŝĐĂĚŽĐŽŵŽƉĂƌąŵĞƚƌŽ͖
– KŵĠƚŽĚŽƐĞƚƚƚƌŝďƵƚĞ ;ůŝŶŚĂƐϬϴ͕ϭϰ͕ϭϱĞϭϲͿ – KŵĠƚŽĚŽĐƌĞĂƚĞdĞǆƚEŽĚĞ ;ůŝŶŚĂϭϭͿ ĐƌŝĂƵŵŶſ
ĚĞĨŝŶĞƵŵĂƚƌŝďƵƚŽƉĂƌĂƵŵĞůĞŵĞŶƚŽ͘ůĞ ĚŽƚŝƉŽƚĞǆƚŽĞŽƌĞƚŽƌŶĂ͘ƐƚĞŵĠƚŽĚŽƌĞĐĞďĞ
ƌĞĐĞďĞĚŽŝƐƉĂƌąŵĞƚƌŽƐ͗ŽŶŽŵĞĚŽĂƚƌŝďƵƚŽĞŽ ĐŽŵŽƉĂƌąŵĞƚƌŽŽĐŽŶƚĞƷĚŽ;ƚĞǆƚŽͿĚŽŶſ͘
ǀĂůŽƌĚŽĂƚƌŝďƵƚŽ͖
ϯϳ ϯϴ
ƚŝǀŝĚĂĚĞ ůƚĞƌĂŶĚŽƵŵĚŽĐƵŵĞŶƚŽ
ϭ͘ /ŵƉůĞŵĞŶƚĞŽƐƚƌġƐĞǆĞŵƉůŽƐǀŝƐƚŽƐĂƚĠĂŐŽƌĂ͕ĨĂĕĂĂůƚĞƌĂĕƁĞƐŶŽĐŽŶƚĞƷĚŽĚŽĚŽĐƵŵĞŶƚŽ
ĞĂŶĂůŝƐĞĂƐŵƵĚĂŶĕĂƐĞĐŽŵƉŽƌƚĂŵĞŶƚŽĚĂĂƉůŝĐĂĕĆŽ͘WƌŽĐƵƌĞŝŵƉůĞŵĞŶƚĂƌŶŽǀĂƐ • ůĠŵĚŽƐŵĠƚŽĚŽƐĂƉƉĞŶĚŚŝůĚ;Ϳ Ğ
ĨƵŶĐŝŽŶĂůŝĚĂĚĞƐĞĚĂƌŵĂŝƐĨůĞǆŝďŝůŝĚĂĚĞĞĚŝŶĂŵŝƐŵŽĂĞƐƚĞƐĞǆĞŵƉůŽƐ͘
ƌĞŵŽǀĞŚŝůĚ;Ϳ͕ŽŵĠƚŽĚŽƌĞƉůĂĐĞŚŝůĚ;Ϳ
ƚĂŵďĠŵƉŽĚĞƐĞƌƵƐĂĚŽƉĂƌĂĂůƚĞƌĂƌŽ
ĐŽŶƚĞƷĚŽĚĞƵŵĚŽĐƵŵĞŶƚŽ͖
• ůĞƌĞĐĞďĞĚŽŝƐƉĂƌąŵĞƚƌŽƐ͗ŽƉƌŝŵĞŝƌŽĠŽ
ŶŽǀŽŶſĨŝůŚŽĞŽƐĞŐƵŶĚŽĠŽŶſƋƵĞƐĞƌĄ
ƐƵďƐƚŝƚƵşĚŽ͖
ϯϵ ϰϬ
• ǆĞŵƉůŽϮ͗ • ǆĞŵƉůŽϮ͗
– sĂŵŽƐǀĞƌŶĞƐƐĞĞǆĞŵƉůŽĐŽŵŽƐƵďƐƚŝƚƵŝƌƵŵ
ĞůĞŵĞŶƚŽĞŵƵŵĚŽĐƵŵĞŶƚŽ,dD>͖
– DĂŝƐĞƐƉĞĐŝĨŝĐĂŵĞŶƚĞ͕ǀĂŵŽƐƐƵďƐƚŝƚƵŝƌƵŵ
ƉĂƌĄŐƌĂĨŽ͕ĐŽŶĨŽƌŵĞŵŽƐƚƌĂĚŽŶŽƉƌſǆŝŵŽ
ƐůŝĚĞ͘
ϰϭ ϰϮ
01
02
<html>
<head>
ůƚĞƌĂŶĚŽƵŵĚŽĐƵŵĞŶƚŽ
03 <title>Manipulando documentos</title>
05 function criarParagrafo(texto) {
06
07
var pNode = document.createElement("P");
var tNode = document.createTextNode(texto);
• ǆĞŵƉůŽϮ͗
08 pNode.appendChild(tNode);
return pNode;
09
10 } – ĨƵŶĕĆŽĐƌŝĂƌWĂƌĂŐƌĂĨŽ;Ϳ ĐƌŝĂƵŵŶŽǀŽŶſ͞W͟
11 function substituir(idElemento) {
12
13
try {
elemAntigo = document.getElementById(idElemento);
ĐŽŵŽƚĞǆƚŽƌĞĐĞďŝĚŽĐŽŵŽƉĂƌąŵĞƚƌŽ͖
14 elemNovo = criarParagrafo("Novo parágrafo.");
15
16
elemAntigo.parentNode.replaceChild(elemNovo, elemAntigo);
} catch (e) {
– ĨƵŶĕĆŽƐƵďƐƚŝƚƵŝƌ;Ϳ ƌĞĐƵƉĞƌĂŽŶſĂƐĞƌ
17
18 }
alert(e);
ƐƵďƐƚŝƚƵşĚŽƉĞůŽŝĚ͕ƌĞĐĞďŝĚŽĐŽŵŽƉĂƌąŵĞƚƌŽ͕
19 }
20 </script> ĐƌŝĂŽŶŽǀŽŶſ;ƵƚŝůŝǌĂŶĚŽĂĨƵŶĕĆŽ
21 </head>
22
23
<body>
<h1>Manipulando documentos</h1>
ĐƌŝĂƌWĂƌĂŐƌĂĨŽ;ͿͿĞĨĂǌĂƐƵďƐƚŝƚƵŝĕĆŽ͘
24 <p id="p1">Este parágrafo será substituído ao clicar no
25 botão.</p>
26 <input type="button" value="Substituir" onclick="substituir('p1');">
27 </body>
28 </html>
ϰϯ ϰϰ
ZĞĐƵƉĞƌĂŶĚŽĞůĞŵĞŶƚŽƐ ZĞĐƵƉĞƌĂŶĚŽĞůĞŵĞŶƚŽƐ
• ŽŵŽũĄǀŝŵŽƐĞŵĞǆĞŵƉůŽƐĂŶƚĞƌŝŽƌĞƐ͕ • WŽĚĞŵŽƐƚĂŵďĠŵƌĞĐƵƉĞƌĂƌĞůĞŵĞŶƚŽƐ
ĞǆŝƐƚĞŵĚŝǀĞƌƐĂƐĨŽƌŵĂƐĚĞƌĞĐƵƉĞƌĂƌ ĂƚƌĂǀĠƐĚĞĂůŐƵŵĂƐƉƌŽƉƌŝĞĚĂĚĞƐƋƵĞ
ĞůĞŵĞŶƚŽƐĞŵƵŵĚŽĐƵŵĞŶƚŽ,dD>͖ ƌĞƚŽƌŶĂŵƵŵǀĞƚŽƌĚĞĞůĞŵĞŶƚŽƐ͗
document.forms
• ŵ͕ĨŽƌŵƵůĄƌŝŽƐ͕ƉŽƌĞǆĞŵƉůŽ͕ƉŽĚĞŵŽƐƵƐĂƌ
document.anchors
ŽŶŽŵĞĚŽĨŽƌŵƵůĄƌŝŽĐŽŵŽĂƚƌŝďƵƚŽĚŽ document.images
ŽďũĞƚŽĚŽĐƵŵĞŶƚ͗
document.frm1...
• ůĠŵĚĂƌĞĐƵƉĞƌĂĕĆŽĂƚƌĂǀĠƐĚŽŝĚ͗
document.getElementById(<id do elemento>)
document.frm2...
ϰϱ ϰϲ
• sĂŵŽƐĐŽŶŚĞĐĞƌŵĂŝƐĚŽŝƐŵĠƚŽĚŽƐƋƵĞ • ŐĞƚůĞŵĞŶƚƐǇdĂŐEĂŵĞ;Ϳ
ƉŽĚĞŵƐĞƌďĂƐƚĂŶƚĞƷƚĞŝƐŶĂƌĞĐƵƉĞƌĂĕĆŽĞ – ƐƚĞŵĠƚŽĚŽƌĞĐĞďĞĐŽŵŽƉĂƌąŵĞƚƌŽĂŵĂƌĐĂ
ŵĂŶŝƉƵůĂĕĆŽĚĞĞůĞŵĞŶƚŽƐ,dD>͗ ,dD>ƋƵĞƐĞĚĞƐĞũĂƌĞĐƵƉĞƌĂƌ;^ƚƌŝŶŐͿ͖
– ŐĞƚůĞŵĞŶƚƐǇdĂŐEĂŵĞ;Ϳ – ƌĞƚŽƌŶĂƵŵǀĞƚŽƌ;ƐŽŵĞŶƚĞůĞŝƚƵƌĂͿĐŽŵƚŽĚŽƐ
– ŐĞƚůĞŵĞŶƚƐǇEĂŵĞ;Ϳ ŽƐŶſƐĐŽƌƌĞƐƉŽŶĚĞŶƚĞƐăŵĂƌĐĂĞƐƉĞĐŝĨŝĐĂĚĂ
ŶŽƉĂƌąŵĞƚƌŽ͘
ϰϳ ϰϴ
ZĞĐƵƉĞƌĂŶĚŽĞůĞŵĞŶƚŽƐ
• ŐĞƚůĞŵĞŶƚƐǇdĂŐEĂŵĞ;Ϳ
– ǆĞŵƉůŽ͗
• EŽƐƐŽĞǆĞŵƉůŽĠƵŵĂƉĄŐŝŶĂƋƵĞǀĞƌŝĨŝĐĂĂ
ĞǆŝƐƚġŶĐŝĂĚĞƵŵĚĞƚĞƌŵŝŶĂĚŽĞůĞŵĞŶƚŽ,dD>͕
ĞƐĐƌĞǀĞŶĚŽ͕ŶĂƉƌſƉƌŝĂƉĄŐŝŶĂ͕ĚĞƚĂůŚĞƐƐŽďƌĞĞƐƐĞ
ĞůĞŵĞŶƚŽ͖
ϰϵ ϱϬ
01 <html> 33 <body>
02 <head> 34 <h1 name="head1">getElementsByTagName</h1>
03 <title>getElementsByTagName</title> 35 <table name="tabela1">
04 <script language="JavaScript"> 36 <tr><td>Esta é a tabela 1</td></tr>
05 function verificar(elemento) { 37 </table>
06 try { 38 <table name="tabela2">
07 var el = document.getElementsByTagName(elemento); 39 <tr><td>Esta é a tabela 2</td></tr>
08 var quant = el.length; 40 </table>
09 adicionaElemento("BR", "", document.body); 41 <table name="tabela3">
10 adicionaElemento("SPAN", "Este documento possui " + el.length + " elementos " 42 <tr><td>Esta é a tabela 3</td></tr>
11 + elemento + ": ", document.body); 43 </table>
12 for (var i = 0; i < quant; i++) { 44 <p name="par1">Este é o parágrafo 1</p>
13 var nome = el[i].getAttribute("Name"); 45 <p name="par2">Este é o parágrafo 2</p>
14 if (nome != null && nome != "") { 46 <br />
15 adicionaElemento("BR", "", document.body); 47 <div name="div1"> Esta é uma DIV</div>
16 adicionaElemento("SPAN", nome, document.body); 48 <p name="par3">
17 } 49 Digite o nome do elemento a ser verificado:
18 } 50 <input id="txtElemento" type="text" size="20">
19 } catch (e) { 51 <input type="button" value="Verificar"
20 alert(e); 52 onclick="verificar(document.getElementById('txtElemento').value);">
21 } 53 </p>
22 } 54 </body>
23 function adicionaElemento(elemento, texto, pai) { 55 </html>
24 var no = document.createElement(elemento);
25 if (texto != "") {
26 noTxt = document.createTextNode(texto);
27 no.appendChild(noTxt);
28 }
29 pai.appendChild(no);
30 }
31 </script>
32 </head>
ϱϭ ϱϮ
• ŐĞƚůĞŵĞŶƚƐǇdĂŐEĂŵĞ;Ϳ • ŐĞƚůĞŵĞŶƚƐǇdĂŐEĂŵĞ;Ϳ
– ǆĞŵƉůŽ͗ – ǆĞŵƉůŽ͗
• ĨƵŶĕĆŽǀĞƌŝĨŝĐĂƌ;Ϳ ƌĞĐĞďĞĐŽŵŽƉĂƌąŵĞƚƌŽĂŵĂƌĐĂ • ĨƵŶĕĆŽĂĚŝĐŝŽŶĂůĞŵĞŶƚŽ;Ϳ ĨŽŝĐƌŝĂĚĂƉĂƌĂĨĂĐŝůŝƚĂƌ
ƋƵĞƐĞƌĄƉĞƐƋƵŝƐĂĚĂŶŽĚŽĐƵŵĞŶƚŽ͖ ĂŝŶƐĞƌĕĆŽĚĞĞůĞŵĞŶƚŽƐŶŽĚŽĐƵŵĞŶƚŽ͖
• KǀĞƚŽƌĠƌĞĐƵƉĞƌĂĚŽƵƚŝůŝǌĂŶĚŽ • ůĂƌĞĐĞďĞŽĞůĞŵĞŶƚŽĂƐĞƌĂĚŝĐŝŽŶĂĚŽ;^ƚƌŝŶŐͿ͕Ž
ŐĞƚůĞŵĞŶƚƐďǇdĂŐEĂŵĞ;Ϳ ĞƐĆŽĂĚŝĐŝŽŶĂĚŽƐ ƚĞǆƚŽĚŽĞůĞŵĞŶƚŽ;^ƚƌŝŶŐͿĞŽŶſƋƵĞŝƌĄƌĞĐĞďĞƌŽ
ĞůĞŵĞŶƚŽƐ^WE ƉĂƌĂŵŽƐƚƌĂƌĂƋƵĂŶƚŝĚĂĚĞĚĞ ĞůĞŵĞŶƚŽĐŽŵŽĨŝůŚŽ͘
ĞůĞŵĞŶƚŽƐƌĞĨĞƌĞŶƚĞƐăŵĂƌĐĂƐŽůŝĐŝƚĂĚĂĞŽŶŽŵĞ
ĚĞƐƚĞƐĞůĞŵĞŶƚŽƐ͖
ϱϯ ϱϰ
• ŐĞƚůĞŵĞŶƚƐǇEĂŵĞ;Ϳ • ŐĞƚůĞŵĞŶƚƐǇEĂŵĞ;Ϳ
– ƐƚĞŵĠƚŽĚŽƌĞĐĞďĞĐŽŵŽƉĂƌąŵĞƚƌŽŽŶŽŵĞ – ǆĞŵƉůŽ͗
ĚŽĞůĞŵĞŶƚŽƋƵĞƐĞĚĞƐĞũĂƌĞĐƵƉĞƌĂƌ͖ • EŽƐƐŽƉƌſǆŝŵŽĞǆĞŵƉůŽǀĂŝŵŽƐƚƌĂƌƵŵĂůŝƐƚĂĚĞ
– ŽŵŽĞŵ,dD>ƉŽĚĞŵŽƐƚĞƌĚŝǀĞƌƐŽƐ ŽƉĕƁĞƐ;ƌĂĚŝŽͿĞƵŵĂǀĞƌŝĨŝĐĂĕĆŽĚŝŶąŵŝĐĂƋƵĞ
ŵŽƐƚƌĂŽǀĂůŽƌĚĞĐĂĚĂŽƉĕĆŽĞƐĞĞůĂĞƐƚĄ
ĞůĞŵĞŶƚŽƐĐŽŵŽŵĞƐŵŽŶŽŵĞ͕ŽŵĠƚŽĚŽ
ƐĞůĞĐŝŽŶĂĚĂŽƵŶĆŽ͖
ƌĞƚŽƌŶĂƵŵǀĞƚŽƌ;ƐŽŵĞŶƚĞůĞŝƚƵƌĂͿĐŽŵƚŽĚŽƐ
ŽƐŶſƐƋƵĞƉŽƐƐƵĞŵŽŶŽŵĞĞƐƉĞĐŝĨŝĐĂĚŽ͘
ϱϱ ϱϲ
01 <html>
02 <head>
ZĞĐƵƉĞƌĂŶĚŽĞůĞŵĞŶƚŽƐ 03
04
05
<title>getElementsByTagName</title>
<script language="JavaScript">
function verificar() {
06 try {
07 var el = document.getElementsByName("opcoes");
08 var quant = el.length;
• ŐĞƚůĞŵĞŶƚƐǇEĂŵĞ;Ϳ 09
10
adicionaElemento("BR", "", document.body);
adicionaElemento("SPAN", "A lista tem " + el.length + " opções :",
11 document.body);
12 for (var i = 0; i < quant; i++) {
13 var valor = el[i].getAttribute("Value");
14 valor += " - ";
15 valor += el[i].checked ? "Selecionado" : "Não selecionado";
16 adicionaElemento("BR", "", document.body);
17 adicionaElemento("SPAN", valor, document.body);
18 }
19 } catch (e) {
20 alert(e);
21 }
22 }
23 function adicionaElemento(elemento, texto, pai) {
24 var no = document.createElement(elemento);
25 if (texto != "") {
26 noTxt = document.createTextNode(texto);
27 no.appendChild(noTxt);
28 }
29 pai.appendChild(no);
30 }
31 </script>
32 </head>
ϱϳ ϱϴ
33 <body>
34 <h1 name="head1">getElementsByName</h1>
35
36
37
<input name="opcoes" checked="true" type="radio" value="op1" />Opção
1<br />
<input name="opcoes" type="radio" value="op2" />Opção 2<br />
ZĞĐƵƉĞƌĂŶĚŽĞůĞŵĞŶƚŽƐ
38 <input name="opcoes" type="radio" value="op3" />Opção 3<br />
39 <input type="button" value="Verificar" onclick="verificar();">
40 </body>
41 </html>
• ŐĞƚůĞŵĞŶƚƐǇEĂŵĞ;Ϳ
– ǆĞŵƉůŽ͗
• ĨƵŶĕĆŽǀĞƌŝĨŝĐĂƌ;Ϳ ƌĞĐƵƉĞƌĂŽƐĞůĞŵĞŶƚŽƐĂƚƌĂǀĠƐ
ĚŽŶŽŵĞ͘WĞƌĐĞďĂƋƵĞĨŽŝĚĂĚŽŽŵĞƐŵŽŶŽŵĞ
;ŶĂŵĞͿĂƚŽĚŽƐŽƐĞůĞŵĞŶƚŽƐƌĂĚŝŽ͖
• WĂƌĂĐĂĚĂĞůĞŵĞŶƚŽƐĆŽŵŽƐƚƌĂĚŽƐŽƐĂƚƌŝďƵƚŽƐǀĂůƵĞ
ĞĐŚĞĐŬĞĚ͘
ϱϵ ϲϬ
,dD>ĐŽŵ^^͕:ĂǀĂƐĐƌŝƉƚ Ğ
ƚŝǀŝĚĂĚĞ
KD
ϭ͘ KƐƷůƚŝŵŽƐĚŽŝƐĞǆĞŵƉůŽƐĂůƚĞƌĂŵŽĚŽĐƵŵĞŶƚŽ,dD>ŝŶƐĞƌŝŶĚŽĞůĞŵĞŶƚŽƐф^WEх͘ůƚĞƌĞ
ĞƐƚĞƐĞǆĞŵƉůŽƐŝŶĐůƵŝŶĚŽƵŵďŽƚĆŽƉĂƌĂ͞ůŝŵƉĂƌ͟ŽĚŽĐƵŵĞŶƚŽ͕ĞǆĐůƵŝŶĚŽƚŽĚŽƐŽƐŶſƐ • ŽŵŽũĄĚĞǀĞƐĞƌĚĞĐŽŶŚĞĐŝŵĞŶƚŽĚĞƚŽĚŽƐ͕
ф^WEхƋƵĞĨŽƌĂŵŝŶƐĞƌŝĚŽƐ͘ƚĞŶĕĆŽ͗ ŶĆŽĚĞǀĞƐĞƌĨĞŝƚŽƐŝŵƉůĞƐŵĞŶƚĞŽƌĞĐĂƌƌĞŐĂŵĞŶƚŽ
ĚŽĚŽĐƵŵĞŶƚŽ͕ĠŶĞĐĞƐƐĄƌŝŽĞǆĐůƵŝƌŽƐĞůĞŵĞŶƚŽƐф^WEхŝŶƐĞƌŝĚŽƐ͘ ^^;ĂƐĐĂĚŝŶŐ ^ƚǇůĞ ^ŚĞĞƚƐͿƐĆŽƵŵƉĂĚƌĆŽ
ƉĂƌĂĞƐƉĞĐŝĨŝĐĂƌŽĞƐƚŝůŽ;ĨŽƌŵĂƚĂĕĆŽǀŝƐƵĂůͿ
ĚĞƵŵĚŽĐƵŵĞŶƚŽ,dD>;ŽƵyD>Ϳ͖
• hƚŝůŝǌĂƌ^^ĞŵĐŽŶũƵŶƚŽĐŽŵ:ĂǀĂƐĐƌŝƉƚ ;Ğ
KDͿƉĞƌŵŝƚĞƵŵĂǀĂƌŝĞĚĂĚĞĞŶŽƌŵĞĞ
ƉŽĚĞƌŽƐĂĚĞĞĨĞŝƚŽƐǀŝƐƵĂŝƐĞŵƵŵ
ĚŽĐƵŵĞŶƚŽ,dD>͖
ϲϭ ϲϮ
,dD>ĐŽŵ^^͕:ĂǀĂƐĐƌŝƉƚ Ğ ,dD>ĐŽŵ^^͕:ĂǀĂƐĐƌŝƉƚ Ğ
KD KD
• ƐƐĞƐĞĨĞŝƚŽƐǀŝƐƵĂŝƐĚĆŽŽƌŝŐĞŵĂƵŵ • ďĂŝǆŽ͕ĂƌĞůĂĕĆŽĚĞĂƚƌŝďƵƚŽƐ^^
ĚŽĐƵŵĞŶƚŽĚŝŶąŵŝĐŽ͕ǇŶĂŵŝĐ ,dD> ƌĞĨĞƌĞŶƚĞƐăǀŝƐŝďŝůŝĚĂĚĞ͕ƚĂŵĂŶŚŽĞƉŽƐŝĕĆŽ
;,dD>Ϳ͖ ĚĞĞůĞŵĞŶƚŽƐ,dD>͗
• ^^ƉŽĚĞĚĞĨŝŶŝƌĚŝǀĞƌƐĂƐĐĂƌĂĐƚĞƌşƐƚŝĐĂƐ ƚƌŝďƵƚŽ ĞƐĐƌŝĕĆŽ
ǀŝƐƵĂŝƐ͖ ƉŽƐŝƚŝŽŶ ƐƉĞĐŝĨŝĐĂŽƚŝƉŽĚĞƉŽƐŝĐŝŽŶĂŵĞŶƚŽĂƉůŝĐĂĚŽĂƵŵĞůĞŵĞŶƚŽ͗
ƐƚĂƚŝĐ ͮƌĞůĂƚŝǀĞ ͮĂďƐŽůƵƚĞ ͮĨŝǆĞĚ
• KƐĂƚƌŝďƵƚŽƐƌĞĨĞƌĞŶƚĞƐăǀŝƐŝďŝůŝĚĂĚĞ͕ ƚŽƉ͕ůĞĨƚ ƐƉĞĐŝĨŝĐĂĂƉŽƐŝĕĆŽĚĂƐďŽƌĚĂƐƐƵƉĞƌŝŽƌĞĞƐƋƵĞƌĚĂĚĞƵŵĞůĞŵĞŶƚŽ
ƚĂŵĂŶŚŽĞƉŽƐŝĕĆŽĚĞĞůĞŵĞŶƚŽƐƐĆŽŵƵŝƚŽ ďŽƚƚŽŵ͕ƌŝŐŚƚ ƐƉĞĐŝĨŝĐĂĂƉŽƐŝĕĆŽĚĂƐďŽƌĚĂƐŝŶĨĞƌŝŽƌ ĞĚŝƌĞŝƚĂĚĞƵŵĞůĞŵĞŶƚŽ
ǁŝĚƚŚ͕ŚĞŝŐŚƚ ƐƉĞĐŝĨŝĐĂŽƚĂŵĂŶŚŽ;ůĂƌŐƵƌĂ͕ĂůƚƵƌĂͿĚĞƵŵĞůĞŵĞŶƚŽ
ŝŵƉŽƌƚĂŶƚĞƐƋƵĂŶĚŽƐĞĨĂůĂĞŵĚŝŶĂŵŝǌĂƌ
ǌͲŝŶĚĞǆ ƐƉĞĐŝĨŝĐĂ ĂŽƌĚĞŵĚĞĞŵƉŝůŚĂŵĞŶƚŽĚĞƵŵĞůĞŵĞŶƚŽĞŵƌĞůĂĕĆŽĂ
ƵŵĂƉĄŐŝŶĂ͖ ŽƵƚƌŽƐĞůĞŵĞŶƚŽƐƐŽďƌĞƉŽƐƚŽƐ;ƚĞƌĐĞŝƌĂĚŝŵĞŶƐĆŽͿ
ĚŝƐƉůĂǇ ƐƉĞĐŝĨŝĐĂ ĐŽŵŽĞƐĞƵŵĞůĞŵĞŶƚŽĠĞǆŝďŝĚŽ͗
ϲϯ
ŝŶůŝŶĞ ͮďůŽĐŬ ͮůŝƐƚͲŝƚĞŵ ͮƌƵŶͲŝŶ ͮ͘͘͘ ϲϰ
KD KD
• ďĂŝǆŽ͕ĂƌĞůĂĕĆŽĚĞĂƚƌŝďƵƚŽƐ^^ • ǆĞŵƉůŽ͗
ƌĞĨĞƌĞŶƚĞƐăǀŝƐŝďŝůŝĚĂĚĞ͕ƚĂŵĂŶŚŽĞƉŽƐŝĕĆŽ – EŽƉƌſǆŝŵŽĞǆĞŵƉůŽ͕ǀĂŵŽƐĐŽŶƐƚƌƵŝƌƵŵĂ
ĚĞĞůĞŵĞŶƚŽƐ,dD>͗ ĂƉůŝĐĂĕĆŽƋƵĞĚĞŵŽŶƐƚƌĂĂŵĂŝŽƌŝĂĚŽƐ
ƚƌŝďƵƚŽ ĞƐĐƌŝĕĆŽ ĂƚƌŝďƵƚŽƐŶĂƚĂďĞůĂĂŶƚĞƌŝŽƌ͖
ǀŝƐŝďŝůŝƚǇ ƐƉĞĐŝĨŝĐĂƐĞƵŵĞůĞŵĞŶƚŽĠǀŝƐşǀĞů͗ǀŝƐŝďůĞ ͮŚŝĚĚĞŶ ͮĐŽůůĂƉƐĞ
ĐůŝƉ ĞĨŝŶĞĂ͞ƌĞŐŝĆŽĚĞĐŽƌƚĞ͟ĚĞƵŵĞůĞŵĞŶƚŽ
ŽǀĞƌĨůŽǁ ƐƉĞĐŝĨŝĐĂŽƋƵĞĨĂǌĞƌƐĞƵŵĞůĞŵĞŶƚŽĨŽƌŵĂŝŽƌĚŽ ƋƵĞŽĞƐƉĂĕŽ
ĚĞƐƚŝŶĂĚŽĂĞůĞ͗ǀŝƐŝďůĞ ͮŚŝĚĚĞŶ ͮƐĐƌŽůů ͮĂƵƚŽ
ϲϱ ϲϲ
ϲϳ ϲϴ
ϲϵ ϳϬ
01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 30 <table id="tab2" style="border: solid 1px; width: 25%; height: 25%;
02 <html> 31 position: absolute; left: 25%; top: 25%;
03 <head> 32 background: blue; visibility: hidden;"
04 <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> 33 onclick="document.getElementById('tab1').style.zIndex=0; this.style.zIndex=1">
05 <title>Demonstração CSS</title> 34 <tr>
06 <script type="text/Javascript"> 35 <td>Tabela 2</td>
07 function alteraPosicao() { 36 </tr>
08 var pTop = parseInt(document.getElementById("txtTop").value); 37 </table>
09 var pLeft = parseInt(document.getElementById("txtLeft").value); 38
10 var imagem = document.getElementById("img1"); 39 <img src="img1.jpg" id="img1" style="position:absolute; left: 35%; top: 55%;
11 imagem.style.top = pTop + "%"; 40 clip: rect(50px 150px 150px 50px)"
12 imagem.style.left = pLeft + "%"; 41 onmouseover="this.style.clip='rect(auto auto auto auto)';"
13 } 42 onmouseout="this.style.clip='rect(50px 150px 150px 50px)';">
14 </script> 43
15 </head> 44 <div style="position: absolute; left: 10%; top: 60%; border: solid 1px;
16 <body> 45 width: 200px; height: 100px";>
17 46 Posição da imagem (%)
18 <input type="button" value="Mostrar tabela 2" 47 <br />
19 onclick="document.getElementById('tab2').style.visibility='visible';"> 48 Borda superior: <input type="text" size="4" value="55" id="txtTop">
20 <br /> 49 <br />
21 <br /> 50 Borda esquerda: <input type="text" size="4" value="35" id="txtLeft">
22 51 <br />
23 <table id="tab1" style="border: solid 1px; width: 25%; height: 25%; 52 <input type="button" value="Alterar" onclick="alteraPosicao()">
24 position: absolute; left: 15%; top: 15%; background: red;" 53 </div>
25 onclick="document.getElementById('tab2').style.zIndex=0; this.style.zIndex=1"> 54
26 <tr> 55 </body>
27 <td>Tabela 1</td> 56 </html>
28 </tr>
29 </table>
ϳϭ ϳϮ
KD KD
• ǆĞŵƉůŽ͗ • ǆĞŵƉůŽ͗
– KƉŽƐŝĐŝŽŶĂŵĞŶƚŽĚĞĂŵďĂƐĂƐƚĂďĞůĂƐĨŽŝĨĞŝƚŽ – WĞůĂŽƌĚĞŵĚĞĐĂƌƌĞŐĂŵĞŶƚŽŶĂƉĄŐŝŶĂ͕Ă
ƵƚŝůŝǌĂŶĚŽŽĂƚƌŝďƵƚŽƉŽƐŝƚŝŽŶ ĐŽŵǀĂůŽƌ ƚĂďĞůĂϮƐŽďƌĞƉƁĞĂƚĂďĞůĂϭ͕ƉŽƌĠŵ͕ĐŽŵŽƵƐŽ
ĂďƐŽůƵƚĞ ĞŽƐĂƚƌŝďƵƚŽƐƚŽƉ ĞůĞĨƚ͕ĐŽŵǀĂůŽƌĞƐ ĚŽĂƚƌŝďƵƚŽǌͲŝŶĚĞǆ ƉŽĚĞŵŽƐĂůƚĞƌĂƌĞƐƚĂ
ƉĂƐƐĂĚŽƐĞŵƉĞƌĐĞŶƚƵĂů͖
ƉƌŝŽƌŝĚĂĚĞ͘hŵĐůŝƋƵĞŶĂƚĂďĞůĂ;ƋƵĂůƋƵĞƌƵŵĂ
– ƚĂďĞůĂϮĞƐƚĄŝŶǀŝƐşǀĞůƋƵĂŶĚŽĂƉĄŐŝŶĂĠ ĚĞůĂƐͿŝŶǀĞƌƚĞĂƐŽďƌĞƉŽƐŝĕĆŽ͖
ĐĂƌƌĞŐĂĚĂ͘ǆŝƐƚĞƵŵďŽƚĆŽƋƵĞĂƚŽƌŶĂǀŝƐşǀĞů
;DŽƐƚƌĂƌƚĂďĞůĂϮͿ͘KƋƵĞƚŽƌŶĂŝƐƐŽƉŽƐƐşǀĞůĠŽ – ŝŵĂŐĞŵƚĂŵďĠŵĨŽŝƉŽƐŝĐŝŽŶĂĚĂĐŽŵ
ĂƚƌŝďƵƚŽǀŝƐŝďŝůŝƚǇ ;ŽƌŝŐŝŶĂůŵĞŶƚĞĐŽŵǀĂůŽƌ ƉŽƐŝƚŝŽŶ͕ƚŽƉ ĞůĞĨƚ͖
ŚŝĚĚĞŶͿ͖
ϳϯ ϳϰ
KD KD
• ǆĞŵƉůŽ͗ • ǆĞŵƉůŽ͗
– WŽƌĠŵĞůĂŶĆŽĞƐƚĄƐĞŶĚŽƚŽƚĂůŵĞŶƚĞĞǆŝďŝĚĂ͘ – hŵĂĚŝǀ ĨŽŝĂĐƌĞƐĐĞŶƚĂĚĂĂŽĚŽĐƵŵĞŶƚŽ͕
&ŽŝƵƚŝůŝǌĂĚŽŽĂƚƌŝďƵƚŽĐůŝƉ ƉĂƌĂĞǆŝďŝƌĂƉĞŶĂƐ ƚĂŵďĠŵƉŽƐŝĐŝŽŶĂĚĂƉŽƌƉŽƐŝƚŝŽŶ͕ƚŽƉ ĞůĞĨƚ͖
ƵŵĂĄƌĞĂĚĂŝŵĂŐĞŵ͖ – EĞƐƚĂĚŝǀ ĞǆŝƐƚĞŵĚƵĂƐĐĂŝǆĂƐĚĞƚĞǆƚŽƋƵĞ
– WĂƐƐĂŶĚŽŽŵŽƵƐĞƐŽďƌĞĞůĂĠƉŽƐƐşǀĞů͕ ƉĞƌŵŝƚĞŵŽƌĞƉŽƐŝĐŝŽŶĂŵĞŶƚŽĚĂŝŵĂŐĞŵŶŽ
ĂůƚĞƌĂŶĚŽŽƐǀĂůŽƌĞƐĚĞƐƐĞĂƚƌŝďƵƚŽ͕ǀŝƐƵĂůŝǌĂƌ ĚŽĐƵŵĞŶƚŽ;ĞŵƉĞƌĐĞŶƚƵĂůͿ͖
ƚŽĚĂĂŝŵĂŐĞŵ͖ – KďŽƚĆŽůƚĞƌĂƌ ĞĨĞƚƵĂŽƌĞƉŽƐŝĐŝŽŶĂŵĞŶƚŽĚĞ
ĂĐŽƌĚŽĐŽŵŽƐĚĂĚŽƐĚŝŐŝƚĂĚŽƐŶĂƐĐĂŝǆĂƐĚĞ
ƚĞǆƚŽ͖
ϳϱ ϳϲ
KD KD
• ǆĞŵƉůŽ͗ • ǆĞŵƉůŽϮ͗
– hŵĂĚŝǀ ĨŽŝĂĐƌĞƐĐĞŶƚĂĚĂĂŽĚŽĐƵŵĞŶƚŽ͕ – EŽƐĞŐƵŶĚŽĞǆĞŵƉůŽ͕ďĂƐĞĂĚŽĞŵ;&>E'E͕
ƚĂŵďĠŵƉŽƐŝĐŝŽŶĂĚĂƉŽƌƉŽƐŝƚŝŽŶ͕ƚŽƉ ĞůĞĨƚ͖ ϮϬϬϰͿ͕ǀĂŵŽƐĐŽŶƐƚƌƵŝƌƵŵĂƉĄŐŝŶĂƋƵĞĞǆŝďĞ
– EĞƐƚĂĚŝǀ ĞǆŝƐƚĞŵĚƵĂƐĐĂŝǆĂƐĚĞƚĞǆƚŽƋƵĞ ƵŵŐƌĄĨŝĐŽĚĞďĂƌƌĂƐƉĂƌĂƵŵĂĚĂĚĂĞǆƉƌĞƐƐĆŽ
ƉĞƌŵŝƚĞŵŽƌĞƉŽƐŝĐŝŽŶĂŵĞŶƚŽĚĂŝŵĂŐĞŵŶŽ ŵĂƚĞŵĄƚŝĐĂ͖
ĚŽĐƵŵĞŶƚŽ;ĞŵƉĞƌĐĞŶƚƵĂůͿ͖ – KŐƌĄĨŝĐŽĠƚŽĚŽĐŽŶƐƚƌƵşĚŽĐŽŵďĂƐĞŶŽƐ
– KďŽƚĆŽůƚĞƌĂƌ ĞĨĞƚƵĂŽƌĞƉŽƐŝĐŝŽŶĂŵĞŶƚŽĚĞ ĐŽŶĐĞŝƚŽƐĚĞƚĂŵĂŶŚŽĞƉŽƐŝĐŝŽŶĂŵĞŶƚŽĚŽ^^
ĂĐŽƌĚŽĐŽŵŽƐĚĂĚŽƐĚŝŐŝƚĂĚŽƐŶĂƐĐĂŝǆĂƐĚĞ ǀŝƐƚŽƐĂŶƚĞƌŝŽƌŵĞŶƚĞ͖
ƚĞǆƚŽ͖
ϳϳ ϳϴ
01 /**
02 * utilGrafico.js:
03 * Baseado em (FLANAGAN, 2004)
04 * A função makeBarChart recebe quatro parâmetros:
05 * - data: conjunto de dados (vetor) que irá compor o gráfico
06 * - width: largura do gráfico
07 * - height: altura do gráfico
08 * - barcolor: cor da barra do gráfico
09 **/
10 function makeBarChart(data, width, height, barcolor) {
11 // Atribui valores padrão para largura, altura e cor do gráfico.
12 if (!width) width = 500;
13 if (!height) height = 350;
14 if (!barcolor) barcolor = "blue";
15
16 // As duas linhas abaixo calculam a área útil do gráfico, diminuindo
17 // 24px referentes a margem e padding.
18 width -= 24;
19 height -= 14;
20
21 // Cria um elemento que representará o gráfico. Perceba que é utilizada uma DIV.
22 var chart = document.createElement("DIV");
23 chart.style.position = "relative"; // Define o tipo de posicionamento
24 chart.style.width = width + "px"; // Define o tamanho
25 chart.style.height = height + "px"; // Define a altura
26 chart.style.border = "solid black 2px"; // Define a borda
27 chart.style.paddingLeft = "10px"; // Atribui o padding
28 chart.style.paddingRight = "10px"; // Atribui o padding
29 chart.style.paddingTop = "10px"; // Atribui o padding
30 chart.style.paddingBottom = "0px"; // Atribui o padding
31 chart.style.backgroundColor = "white"; // Atribui cor de fundo
ϳϵ ϴϬ
32 // Calcula a largura de cada barra do gráfico 01 <!– HTML -->

33 var barwidth = Math.floor(width/data.length); 02 <html>
34 // Encontra o maior dado no conjunto para calcular a escala. 03 <head>
35 var maxdata = Math.max.apply(this, data); 04 <title>Gráfico dinâmico</title>
36 // Calcula a escala. 05 <script src="utilGrafico.js"></script>
37 var scale = height/maxdata; 06 <script type="text/Javascript">
38 07 function calculaGrafico() {
39 // Cria uma barra para cada valor constante no conjunto de dados. 08 var quantos = parseInt(document.getElementById("txtResultados").value);
40 for(var i = 0; i < data.length; i++) { 09 var funcao = document.getElementById("txtFuncao").value;
41 var bar = document.createElement("div"); // Cria um elemento DIV para a barra 10 var dados = new Array(quantos);
42 var barheight = data[i] * scale; // Calcula a altura da barra 11 for (var i = 0; i < quantos; i++) {
43 bar.style.position = "absolute"; // Define o tipo de posicionamento 12 y = i;
44 bar.style.left = (barwidth*i+1+10)+"px"; // Define o posicionamento da barra 13 eval(funcao);
45 bar.style.top = height-barheight+10+"px";// Define o posicionamento 14 dados[i] = x;
46 bar.style.width = (barwidth-2) + "px"; // Define o tamanho da barra 15 }
47 bar.style.height = (barheight-1) + "px"; // Define a altura da barra 16 makeBarChart(dados, 600, 250, "red");
48 bar.style.border = "solid black 1px"; // Define a borda da barra 17 }
49 bar.style.backgroundColor = barcolor; // Define a cor da barra 18 </script>
50 bar.style.fontSize = "1px"; // bug IE 19 </head>
51 chart.appendChild(bar); // Adiciona a barra ao gráfico 20 <body>
52 } 21 <h1>Gráfico dinâmico</h1>
53 22 Entre com uma equação de x em função de y:
54 // Adiciona o gráfico ao corpo do documento 23 <input type="text" id="txtFuncao">
55 document.body.appendChild(chart); 24 <br />
56 25 Calcular quantos resultados:
57 // Retorna o elemento referente ao gráfico, caso seja necessário manipulá-lo 26 <input type="text" id="txtResultados">
58 return chart; 27 <input type="button" value="Gerar gráfico" onclick="calculaGrafico();">
59 } 28 </body>
29 </html>
ϴϭ ϴϮ
KD KD
• ǆĞŵƉůŽϮ͗ • ǆĞŵƉůŽϮ͗
– EĂƐůŝŶŚĂƐϭĂϱϵ;ĂƌƋƵŝǀŽƵƚŝů'ƌĂĨŝĐŽ͘ũƐͿĞƐƚĄĂ – ĐŽŵƉĂŶŚĞĂĨƵŶĕĆŽŵĂŬĞĂƌŚĂƌƚ;Ϳ ůŝŶŚĂĂ
ĨƵŶĕĆŽƋƵĞĐŽŶƐƚƌſŝŽŐƌĄĨŝĐŽĚĞďĂƌƌĂƐ͕ ůŝŶŚĂ͕ĞůĂĞƐƚĄƚŽĚĂĐŽŵĞŶƚĂĚĂ͘
ƵƚŝůŝǌĂŶĚŽĞůĞŵĞŶƚŽƐ/s͖
– EŽƷůƚŝŵŽƐůŝĚĞĚŽĐſĚŝŐŽĞƐƚĄĂƉĄŐŝŶĂ,dD>
ƋƵĞƉĞƌŵŝƚĞĂŵŽŶƚĂŐĞŵĚŽŐƌĄĨŝĐŽĐŚĂŵĂŶĚŽ
ĂĨƵŶĕĆŽŵĂŬĞĂƌŚĂƌƚ;Ϳ͖
ϴϯ ϴϰ
KD KD
• ŽŶǀĞŶĕĆŽƉĂƌĂŶŽŵĞƐĚĞĂƚƌŝďƵƚŽƐ^^Ğŵ • ŽŶǀĞŶĕĆŽƉĂƌĂŶŽŵĞƐĚĞĂƚƌŝďƵƚŽƐ^^Ğŵ
:ĂǀĂ^ĐƌŝƉƚ͗ :ĂǀĂ^ĐƌŝƉƚ͗
– KĂĐĞƐƐŽĂĂƚƌŝďƵƚŽƐ^^ĚĞƵŵĞůĞŵĞŶƚŽĠ – ǆĞŵƉůŽƐ͗
ĨĞŝƚŽĂƚƌĂǀĠƐĚĂƉƌŽƉƌŝĞĚĂĚĞƐƚǇůĞ ĚŽĞůĞŵĞŶƚŽ͖
ƚƌŝďƵƚŽ^^ ĐĞƐƐŽ:ĂǀĂ^ĐƌŝƉƚ
– KŶŽŵĞĚŽĂƚƌŝďƵƚŽĞŵ^^ĞĞŵ:ĂǀĂ^ĐƌŝƉƚ ĠŽ
ĨŽŶƚͲĨĂŵŝůǇ ĞůĞŵĞŶƚ͘ƐƚǇůĞ͘ĨŽŶƚ&ĂŵŝůǇ
ŵĞƐŵŽ͕ĞǆĐĞƚŽŶŽƐĐĂƐŽƐĞŵƋƵĞŽĂƚƌŝďƵƚŽ^^
ďĂĐŬŐƌŽƵŶĚͲĐŽůŽƌ ĞůĞŵĞŶƚ͘ƐƚǇůĞ͘ďĂĐŬŐƌŽƵŶĚŽůŽƌ
ĐŽŶƚĠŵƵŵŚşĨĞŶ͘EĞƐƐĞĐĂƐŽ͕ƌĞƚŝƌĂͲƐĞŽŚşĨĞŶĞ ǌͲŝŶĚĞǆ ĞůĞŵĞŶƚ͘ƐƚǇůĞ͘ǌ/ŶĚĞǆ
ĂƉƌŝŵĞŝƌĂůĞƚƌĂŝŵĞĚŝĂƚĂŵĞŶƚĞĂƉſƐĞůĞĠ ďŽƌĚĞƌͲůĞĨƚͲǁŝĚƚŚ ĞůĞŵĞŶƚŽ͘ƐƚǇůĞ͘ďŽƌĚĞƌ>ĞĨƚtŝĚƚŚ
ĐŽůŽĐĂĚĂĞŵŵĂŝƷƐĐƵůŽ͖
ϴϱ ϴϲ
KD KD
• hŵĂĨƵŶĕĆŽƉĂƌĂĂŶŝŵĂĕƁĞƐďĂƐĞĂĚĂƐĞŵ • hŵĂĨƵŶĕĆŽƉĂƌĂĂŶŝŵĂĕƁĞƐďĂƐĞĂĚĂƐĞŵ
^^;&>E'E͕ϮϬϬϰͿ͗ ^^;&>E'E͕ϮϬϬϰͿ͗
– sĂŵŽƐǀĞƌĂĚŝĂŶƚĞƵŵĂĨƵŶĕĆŽŐĞŶĠƌŝĐĂƉĂƌĂ – ĞƐĐƌŝĕĆŽĚĂĨƵŶĕĆŽĂŶŝŵĂƚĞ^^;Ϳ͗
ƚƌĂďĂůŚĂƌĐŽŵĂŶŝŵĂĕƁĞƐƵƚŝůŝǌĂŶĚŽĂƚƌŝďƵƚŽƐ • WĂƌąŵĞƚƌŽƐ͗
^^Ğ:ĂǀĂ^ĐƌŝƉƚ͖ – ĞůĞŵĞŶƚ͗ŽĞůĞŵĞŶƚŽƋƵĞƐĞƌĄĂŶŝŵĂĚŽ͖
– ĨƵŶĕĆŽĐŚĂŵĂͲƐĞĂŶŝŵĂƚĞ^^;Ϳ͕ĞƐĞƌĄƐĂůǀĂ – ŶƵŵ&ƌĂŵĞƐ͗ŶƷŵĞƌŽƚŽƚĂůĚĞĨƌĂŵĞƐŶĂĂŶŝŵĂĕĆŽ͖
ĞŵƵŵĂƌƋƵŝǀŽĐŽŵŽŵĞƐŵŽŶŽŵĞ͖ – ƚŝŵĞWĞƌ&ƌĂŵĞ͗ƚĞŵƉŽĚĞĐŽƌƌŝĚŽĞŶƚƌĞĂĞǆŝďŝĕĆŽĚĞĐĂĚĂ
ĨƌĂŵĞ;ŵŝůŝƐƐĞŐƵŶĚŽƐͿ͖
ϴϳ ϴϴ
KD KD
– ĞƐĐƌŝĕĆŽĚĂĨƵŶĕĆŽĂŶŝŵĂƚĞ^^;Ϳ͗ – ĞƐĐƌŝĕĆŽĚĂĨƵŶĕĆŽĂŶŝŵĂƚĞ^^;Ϳ͗
• WĂƌąŵĞƚƌŽƐ͗ • WĂƌąŵĞƚƌŽƐ͗
– ĂŶŝŵĂƚŝŽŶ͗ĠƵŵŽďũĞƚŽƋƵĞĚĞǀĞĞƐƉĞĐŝĨŝĐĂĂ;ƐͿ – ǁŚĞŶĚŽŶĞ͗ĐŚĂŵĂĚĂĚĞĨƵŶĕĆŽ;ŽƉĐŝŽŶĂůͿƋƵĞƐĞƌĄĨĞŝƚĂ
ƉƌŽƉƌŝĞĚĂĚĞ;ƐͿ^^ƋƵĞƐĞƌĄ;ĆŽͿĂĨĞƚĂĚĂ;ƐͿƉĞůĂĂŶŝŵĂĕĆŽ͘K ƋƵĂŶĚŽĂĂŶŝŵĂĕĆŽƚĞƌŵŝŶĂƌ͘
ǀĂůŽƌĚĞĐĂĚĂƉƌŽƉƌŝĞĚĂĚĞ^^ĚĞǀĞƐĞƌƌĞƚŽƌŶĂĚŽƉŽƌƵŵĂ
ĨƵŶĕĆŽ͘KƐǀĂůŽƌĞƐƌĞĨĞƌĞŶƚĞƐĂŽŶƷŵĞƌŽĚŽĨƌĂŵĞĞŽ
ƚĞŵƉŽĚĞĐŽƌƌŝĚŽƐŶĂĂŶŝŵĂĕĆŽƐĆŽƉĂƐƐĂĚŽƐƉĂƌĂĚĞŶƚƌŽĚĂ
ĨƵŶĕĆŽĞƉŽĚĞŵƐĞƌƵƚŝůŝǌĂĚŽƐƉŽƌĞůĂ͖
ϴϵ ϵϬ
KD KD
– ĞƐĐƌŝĕĆŽĚĂĨƵŶĕĆŽĂŶŝŵĂƚĞ^^;Ϳ͗ – ĞƐĐƌŝĕĆŽĚĂĨƵŶĕĆŽĂŶŝŵĂƚĞ^^;Ϳ͗
• ĨƵŶĕĆŽƉŽƐƐƵŝĂŝŶĚĂƵŵĂƐƵďĨƵŶĕĆŽ͗
• ƉƌŝŶĐŝƉĂůĐĂƌĂĐƚĞƌşƐƚŝĐĂĚĂĨƵŶĕĆŽĂŶŝŵĂƚĞ^^;Ϳ ĠĂ
ĚŝƐƉůĂǇEĞǆƚ&ƌĂŵĞ;Ϳ͖
ĨůĞǆŝďŝůŝĚĂĚĞ͘ŽŵŽĂĂŶŝŵĂĕĆŽĠĚĞĨŝŶŝĚĂĂƚƌĂǀĠƐĚĞ
• ĐŚĂŵĂĚĂĂĚŝƐƉůĂǇEĞǆƚ&ƌĂŵĞ;Ϳ ĠĂŐĞŶĚĂĚĂƵƐĂŶĚŽ ŽƵƚƌĂĨƵŶĕĆŽ͕ƉĂƌĂƋƵĂůƋƵĞƌĂƚƌŝďƵƚŽ^^͕ĂŵĞƐŵĂ
ŽŵĠƚŽĚŽƐĞƚ/ŶƚĞƌǀĂů;Ϳ͖ ĨƵŶĕĆŽƉŽĚĞƐĞƌƵƚŝůŝǌĂĚĂĞŵĚŝǀĞƌƐĂƐƐŝƚƵĂĕƁĞƐ͘
• ƐƚĂĨƵŶĕĆŽǀĞƌŝĨŝĐĂƐĞĂŝŶĚĂŚĄĨƌĂŵĞƐĂƐĞƌĞŵ
ĞǆŝďŝĚŽƐ͘ŵĐĂƐŽƉŽƐŝƚŝǀŽ͕ŽƐĂƚƌŝďƵƚŽƐ^^ĚŽŽďũĞƚŽ
ĂŶŝŵĂƚŝŽŶ ƐĆŽƉĞƌĐŽƌƌŝĚŽƐĞĂƚƵĂůŝǌĂĚŽƐ͘
ϵϭ ϵϮ
01 /** 22 // Função que mostra o novo frame

02 * animateCSS.js: 23 function displayNextFrame() {
03 * Baseado em (FLANAGAN, 2004) 24 if (frame >= numFrames) {
04 * A função animateCSS recebe cinco parâmetros: 25 clearInterval(intervalId);
05 * - element: o elemento que será animado 26 if (whendone)
06 * - numFrames: número total de frames na animação 27 whendone(element);
07 * - timePerFrame: tempo decorrigo entre a exibição de cada frame (milissegundos) 28 return;
08 * - animation: a animação que será feita. É um objeto que deve especificar a(s) 29 } // Varre cada propriedade CSS do objeto animation
09 * propriedade(s) CSS que será(ão) afetada(s) pela animação. O valor de cada 30 for (var cssprop in animation) {
10 * propriedade CSS deve ser retornado por uma função. Os valores referentes 31 try {
11 * ao número do frame e o tempo decorridos na animação são passados para dentro 32 // Para cada propriedade do objeto animation, chama a função de
12 * da função e podem ser utilizados por ela. 33 // animação. O try/catch ignova eventuais exceções
13 * - whendone: uma chamada de função (opcional) que pode ser feita ao término da 34 element.style[cssprop] = animation[cssprop](frame, time);
14 * animação 35 } catch (e) {
15 **/ 36 }
16 function animateCSS(element, numFrames, timePerFrame, animation, whendone) { 37 }
17 var frame = 0; // Número de frames 38 frame++; // Incrementa o número do frame
18 var time = 0; // Tempo decorrido 39 time += timePerFrame; // Incrementa o tempo
19 40 }
20 // Agenda a chamada à função que fará a animação 41 }
21 var intervalId = setInterval(displayNextFrame, timePerFrame);
ϵϯ ϵϰ
KD KD
01 <script type="text/JavaScript">
– KƚƌĞĐŚŽĂďĂŝǆŽĨĂǌĂĐŚĂŵĂĚĂăĨƵŶĕĆŽĚĞ 02
03
animateCSS(document.getElementById("title"), 100, 10,
{
ĂŶŝŵĂĕĆŽƉĂƌĂƵŵŽďũĞƚŽĚĞŝĚƚŝƚůĞ͖ 04
05
left: function(f, t) {return 0 + f * 5 + "px";}
});
06 </script>
– ĂŶŝŵĂĕĆŽĠĨĞŝƚĂĂůƚĞƌĂŶĚŽĂƉĞŶĂƐƵŵ
ĂƚƌŝďƵƚŽ^^͕ŽĂƚƌŝďƵƚŽůĞĨƚ͘/ƐƐŽƐŝŐŶŝĨŝĐĂƋƵĞŽ
ĞůĞŵĞŶƚŽ,dD>ĂŶŝŵĂĚŽǀĂŝƐĞĚĞƐůŽĐĂƌ
ŚŽƌŝǌŽŶƚĂůŵĞŶƚĞ͕ƉŽƌϭϬϬĨƌĂŵĞƐ͕ĂĐĂĚĂϭϬ
ŵŝůŝƐƐĞŐƵŶĚŽƐ͖
ϵϱ ϵϲ
KD KD
– :ĄŽƉƌſǆŝŵŽƚƌĞĐŚŽĚĞƐĐƌŝƉƚĞǆĞĐƵƚĂƵŵĂ – ůĠŵĚĂĂŶŝŵĂĕĆŽĚĞĚĞƐůŽĐĂŵĞŶƚŽ͕ĠƉĂƐƐĂĚĂ
ĂŶŝŵĂĕĆŽŵĂŝƐĐŽŵƉůĞǆĂ͕ĨĂǌĞŶĚŽƵŵďŽƚĆŽ ƵŵĂĨƵŶĕĆŽŶŽƉĂƌąŵĞƚƌŽǁŚĞŶĚŽŶĞ ĚĞ
ŐŝƌĂƌĞŵĐşƌĐƵůŽƐƉŽƌϭϬϬĨƌĂŵĞƐĂĐĂĚĂϱϬ ĂŶŝŵĂƚĞ^^;Ϳ ƋƵĞĨĂǌĐŽŵƋƵĞŽƚĞǆƚŽĚŽďŽƚĆŽ
ŵŝůŝƐƐĞŐƵŶĚŽƐ͖ ;ƉƌŽƉƌŝĞĚĂĚĞǀĂůƵĞͿƐĞũĂĂůƚĞƌĂĚŽĂŽĨŝŶĂůĚĂ
– KďǀŝĂŵĞŶƚĞ͕ƉĂƌĂĐƌŝĂƌĞƐƐĞƚŝƉŽĚĞĂŶŝŵĂĕĆŽ͕ ĂŶŝŵĂĕĆŽ͘
ĂƐƉƌŽƉƌŝĞĚĂĚĞƐƚŽƉ ĞůĞĨƚ ĚŽĞůĞŵĞŶƚŽ
ƉƌĞĐŝƐĂŵƐĞƌĂůƚĞƌĂĚĂƐĂĐĂĚĂĨƌĂŵĞ͖
ϵϳ ϵϴ
,dD>ĐŽŵ^^͕:ĂǀĂƐĐƌŝƉƚ Ğ
KD
• hŵĂĨƵŶĕĆŽƉĂƌĂĂŶŝŵĂĕƁĞƐďĂƐĞĂĚĂƐĞŵ
^^;&>E'E͕ϮϬϬϰͿ͗
01 <script type="text/JavaScript">
02 animateCSS(document.forms[0].elements[0], 100, 50,
03 {
04 left: function(f, t) {return 200 + 100 * Math.cos(f/8) + "px";},
05 top: function(f, t) {return 200 + 100 * Math.sin(f/8) + "px";}
06 },
07 function(button) {button.value="Pronto!";});
08 </script>
ϵϵ

KD KD

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

KD KD

Uploaded by

Copyright:

Available Formats

KD

• ŽĐƵŵĞŶƚ KďũĞĐƚ DŽĚĞů͗DŽĚĞůŽĚĞKďũĞƚŽ

• hŵĞǆĞŵƉůŽ;ĂĚĂƉƚĂĚŽĚĞ&ůĂŶĂŐĂŶ ;ϮϬϬϰͿͿ͗ 09 </html>

– ƉƌŽƉƌŝĞĚĂĚĞŶŽĚĞdǇƉĞ ĞƐƉĞĐŝĨŝĐĂŽƚŝƉŽĚŽ ŽŵŵĞŶƚ EŽĚĞ͘KDDEdͺEK ϴ

function varreDocumento(no, prefixo) {

32 // Calcula a largura de cada barra do gráfico 01 <!– HTML -->

01 /** 22 // Função que mostra o novo frame

You might also like

KD KD

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

KD KD

Uploaded by

Copyright:

Available Formats

KD

• ŽĐƵŵĞŶƚ KďũĞĐƚ DŽĚĞů͗DŽĚĞůŽĚĞKďũĞƚŽ

• hŵĞǆĞŵƉůŽ;ĂĚĂƉƚĂĚŽĚĞ&ůĂŶĂŐĂŶ ;ϮϬϬϰͿͿ͗ 09 </html>

– ƉƌŽƉƌŝĞĚĂĚĞŶŽĚĞdǇƉĞ ĞƐƉĞĐŝĨŝĐĂŽƚŝƉŽĚŽ ŽŵŵĞŶƚ EŽĚĞ͘KDDEdͺEK ϴ

function varreDocumento(no, prefixo) {

32 // Calcula a largura de cada barra do gráfico 01 <!– HTML -->

01 /** 22 // Função que mostra o novo frame

You might also like

KD

• ŽĐƵŵĞŶƚ KďũĞĐƚ DŽĚĞů͗DŽĚĞůŽĚĞKďũĞƚŽ

– ƉƌŽƉƌŝĞĚĂĚĞŶŽĚĞdǇƉĞ ĞƐƉĞĐŝĨŝĐĂŽƚŝƉŽĚŽ ŽŵŵĞŶƚ EŽĚĞ͘KDDEdͺEK ϴ