?????a

1
?????aµµat?sµ?? ??ad??t???
??. ?a?a???t?? S?µe???d?? ??epaf? ?fa?µ????
?a???sµ??? ?st?? (Front End Programming)
2
??sa????

• St???? t?? d?? a?t?? e??t?t?? e??a? ? pa???s?as?
  s???????? te????????? p????aµµat?sµ?? d?epaf??
  ??a efa?µ???? t?? ?a???sµ??? ?st??.
• ? ???? p?? ???s?µ?p??e?ta? s?µe?a ??a t?? ?e????
  a?af??? st? s????? a?t?? t?? te????????? e??a?
  Dynamic HTML (DHTML).

3
??sa????

• ? DHTML ?? ???? a?af??eta? st? s??d?asµ? t??
  pa?a??t? te?????????
• ??a? stat???? markup ???ssa? ?e?µ???? ?p?? ?
  HTML.
• ??a? ???ssa? ?a????sµ?? st?? pa???s?as??
  ?st?se??d?? (cascading style sheets, e? s??t?µ?a
  CSS).
• ??a? client-side ???ssa? pe????af?? se?a????
  (client-side scripting language) ?p?? ?
  Javascript.
• ???? µ??t???? a?t??e?µ???? ??a ?st?se??de? (HTML
  Document Object Model, e? s??t?µ?a DOM).
• ......µe s??p? t? d?µ??????a d?ad?ast????
  ?st?se??d?? .....

4
??sa????

• ??ad?ast???? ?st?se??de? ?
• ? t??p?? pa???s?as?? ?a? ta pe??e??µe?? t??
  ?st?se??da? µetaß?????ta? d??aµ??? af?? a?t? ??e?
  f??t??e? st?? browser t?? ???st?.

5
??sa????

• ??? ???eta? ? a?ap??sa?µ??? ?
• ???s? client-side se?a???? ?a? ?e?t??????? t??
  DOM, p?? d????? p??sßas? se ??a s????? ap?
  ?d??t?te? p?? ?a?a?t??????? t?? browser ?a? ta
  ep?µ????? s???et??? t?? ?st?se??da?.
• (p.?. s?µa ?st?se??da?, f??µe?, p??a?e? ??p.).
• ? browser ?a??? ?a? ta ep?µ????? s???et???
  st???e?a t?? ?st?se??da? ???????ta? ?? DOM
  a?t??e?µe?a
• ??????a µe t? e?d??? t??? a?????? se ??p??a
  s???e???µ??? ???s?.
• (p.?. Window, Document, Frame, Table, ??p.).
• ???e ???s? p??sf??e? ??a s????? ?e?t??????? µ?s?
  t?? ?p???? d?deta? p??sßas? st?? ?d??t?te? t??
  a?t??e?µ????.

6
??sa????

• ??te ???eta? ? a?ap??sa?µ??? ?
• ?a?????eta? ap? e????e?e? t?? ???st? ap? t??
  ?p??e? p????pt???
• ded?µ??a
• (p.?. e?sa???? ded?µ???? se µ?a f??µa ? ??a
  p??a?a)
• ?a? ?e????ta
• (p.?. p?t?µa ???µp???, µeta????s? p??t?????)
• ta ?p??a epe?e????eta? ??p??? client-side
  se?????.
• ? epe?e??as?a a?t? eµpe????e? t?? ???s?
  ?e?t??????? sta ep?µ????? a?t??e?µe?a p??
  ap?te???? t?? ?st?se??da.
• ?e ???a ????a ??a se????? e??a? ??a p????aµµa t?
  ?p??? epe?e????eta? ta ded?µ??a ?a? ta ?e????ta
  p?? p????pt??? ap? t?? e????e?e? t?? ???st?.

7
??sa????

• ??? ?atas?e?????µe DHTML ?st?se??de??
• ?? ???e? de? apa?te?ta? ? ???s? e?d????
  e??a?e???.
• ??? s???e???µ??a, ? s????af? DHTML ?st?se??d??,
  CSS st?? ?a? client-side se?a???? µp??e? ?a ???e?
  ???s?µ?p????ta? ??a ?p???d?p?te ?e?µe?????f?.
• ?a?? ta?ta ?p?????? a??et? e??a?e?a p??
  ?p?ß??????.
• ?.?. ?µp????? ?p?? ta Microsoft FrontPage,
  DreamWeaver.
• ?.?. e??a?e?a e?e??e??? ????sµ???? ?p?? ta NVU,
  Joomla ?a? JSEclipse.

8
?e??e??µe?a

• ?as??? st???e?a t?? W3C ???ssa? ?a????sµ?? st??
  pa???s?as?? ?st?se??d?? (W3C CSS).
• ?as??? st???e?a t?? Javascript.
• ?as??? st???e?a t?? W3C µ??t???? a?t??e?µ???? ??a
  ?st?se??de? (W3C HTML DOM).

9
?as??? st???e?a t?? CSS
10
?e??e??µe?a

• ?? e??a? CSS
• ??e??e?t?µata CSS µ??f?p???s??
• S??ta?t??? t?? CSS
• ?d??t?te? CSS
• ?fa?µ??? CSS ?a?????
• ?p??????? CSS ?a?????
• ?p?st????? CSS st? NVU

11
???f?p???s? µe HTML

• ? HTML e??a? s?ed?asµ??? ??a ?a pe?????fe? t?
  pe??e??µe??, ??? t? µ??f?p???s?.
• ?a??de??µa
• ltfont color"yellow"gt
• ltpgtAn HTML formatted paragraphlt/pgt
• lt/fontgt
• ????p???te? p.?. ltfontgtlt/fontgt e??t?te? ??a t?
  µ??f?p???s? ???e st???e??? t?? se??da?!

12
Cascading Style Sheets

• ?p??a??pt?µe?a f???a st??
• W3C p??t?p? T? CSS e??a? ??a? µ??a??sµ?? ??a ?a
  p??s??s??µe st?? se ??a web ????af?.
• ? p?? d?aded?µ??? ???ssa pe????af?? st?? ??a web
  ????afa (HTML, XHTML, XML).
• ?? ???sse? pe????af?? st?? s??e??????ta? µe
  markup ???sse? ??a ?a pe????????? p????? t?
  pe??e??µe?? ?a? t?? pa???s?as? t?? se µ?a se??da.
• ?? st?? pe???aµß??e? ??µata ?p?? ???µata,
  ??aµµat?se????, µe????, d??ta??, t?p???t?s? ??p.
• ?? p??t?p? CSS ?p?st????eta? ap? t???
  pe??ss?te???? d?aded?µ????? browsers.

13
??e??e?t?µata µ??f?p???s?? µe CSS

• ??a?????e? pe??e??µe?? ap? pa???s?as?
• ?p???ste?s?, ??????µ?a, saf??e?a ?a? ap?d?s? se
  s?ed?as?, ???p???s?, ??e??? s??t???s?
  pe??e??µ???? ?a? st??
• ?pa?a???s?µ?p???s?, epe?tas?µ?t?ta pe??e??µ????
  ?a? st??
• ???f?p???s? p????? ?st?se??d?? µe ??a st?? (p.?.
  µ??f?p???s? ???? t?? se??d?? e??? ?st?t?p?? µe t?
  ?d?? st??)
• ??e????a ?? p??? t? µ?s? a?apa??stas??

14
S??ta?? CSS ?a?????

• ?p?????a? ?d??t?ta ??µ?
• ?p?????a? (Selector)
• ??p?? ???f?p???s? ???? t?? st???e??? t?? t?p??
• h1 color red
• ???s? ???f?p???s? ???? t?? a?t??e?µ???? t??
  ???s??
• .info font-weight bold
• ??t??e?µe?? ???f?p???s? e??? µ??? st???e???
• footer background-color gray
• S??d?asµ??
• footer h5 color red
• ?d??t?ta ??µ?
• G?a ???e CSS ?d??t?ta (p.?. font-weight), t?
  p??t?p? ????e? ??sta ap?de?t?? t?µ?? (p.?. normal
  / bold)

15
CSS ?d??t?te?

• ?d??t?te? ??aµµat?se????
• font-family, font-style
• ?d??t?te? ???µ?t?? ?a? f??t??
• color, background-image
• ?d??t?te? ?e?µ????
• letter-spacing, text-align
• ?d??t?te? p?a?s???
• margin-left, border-width
• ?d??t?te? ??sta?
• list-style-type, list-style-image
• ?d??t?te? t?p???t?s??
• left, visibility
• ?d??t?te? e?t?p?s??
• page-break-before, page-break-after

16
?fa?µ??? CSS ?a?????

• ??s?µat?µ??? st??
• ltheadgt
• lttitlegt???f?p???s? µe e?s?µat?µ???
  st??lt/titlegt
• ltstyle type"text/css"gt
• body background-color gray
• lt/stylegt
• lt/headgt
• ?? µp??? t?? CSS ?a????? µ??f?p??e? ??a ta
  st???e?a t?? se??da?
• ?e??????e? t?? epa?????? ?a?????
• ???e se??da p??pe? ?a ????e? ?a? ?a s??t??e? t???
  d????? t?? ?a???e?
• ???s? t?? HTML et???ta? ltstylegt µ?sa st?? e??t?ta
  ltheadgtlt/headgt

17
?fa?µ??? CSS ?a?????

• ???te???? f???? st??
• ltheadgt
• ltlink rel"stylesheet" type"text/css"
  href"style.css"/gt
• lt/headgt
• ?? CSS ?a???e? ??????ta? se ??a s?µe??, se
  ?e????st? a??e?? (p.?. style.css) ?a?
  epa?a???s?µ?p?????ta?
• ? HTML se??da s??d?eta? µe t? e??te???? a??e??
• To e??te???? a??e?? µp??e? ?a s??de?e? ?a? ?a
  µ??f?p???se? p????? HTML se??de?
• ?pa?a???s?µ?p???s? st??, e?????a s??t???s??
  ep??tas??, p????? d?a????sµ?? pe??e??µ???? ap?
  pa???s?as?
• ???s? t?? HTML et???ta? ltstylegt µ?sa st?? e??t?ta
  ltheadgtlt/headgt

18
?p??????? CSS ?a?????

• St?? p???? s??d?????ta? ?? t?e?? t??p?? efa?µ????
  st??, µe ap?t??esµa ?a ?p???e? ep??????? t?? CSS
  ?a?????.
• Se ?e????? ??aµµ??, ?ta? ?p???e? ep???????
  ?a?????, ?? e?d???te??? ?a???e? ?pe??s?????
  ??a?t? t?? ?e????te???.
• To p??t?p? CSS ????e? p??te?a??t?te? st??
  efa?µ??? ?a????? µe te?????? ep???s?? d?af????
  (???p???µ??e? µe ß???) p?? p??s?µ????e? st??
  ?ata????t? (cascade). ??? s???e???µ??a, ??
  ?a???e? efa?µ????ta? µe t?? pa?a??t? se???
• ?a???e? t?? f????µet??t?
• ?a???e? ???sµ???? ap? t? ???st?
• ?a???e? e??te????? .css a??e???
• ??s?µat?µ???? ?a???e?
• ???et?? ?a???e?
• ?a???e? p?? µa??????ta? ?? !important

?????sa se??? ßa??t?ta?
19
?a??de??µa ep???????? CSS ?a?????

• lthtmlgtltheadgt
• ltlink rel"stylesheet" type"text/css"
  href"demostyles.css"gt
• ltstyle type"text/css"gt
• h3 font-size 25pt font-style italic
• lt/stylegtlt/headgt
• ltbodygt
• lth3gtCSS tutoriallt/h3gt
• lth3 style "font-style normal"gt Applying CSS
  rules lt/h3gt
• lth2gtSyntaxlt/h2gt
• ltp classp1gtRememberlt/pgt
• ltp classp2gtInline rules prevail!lt/pgt
• lt/bodygtlt/htmlgt
• demostyles.css
• h2 text-decoration underline
• h3 font-family serif font-size 130 color
  red
• .p1 font-size 11pt margin-left 100px
• .p2 font-family arial font-type bold

???te???? a??e?? CSS ?a?????
??s?µat?µ??? st??
???et? st??
20
?a??de??µa ep???????? CSS ?a?????
21
CSS st? NVU

• ???s??a (CSS Editor) µ?s? t?? ?p??a? ? ???st??
  µp??e? ?a ???se? ?a? ?a t??p?p???se? CSS ?a???e?
  ?a? ?a t??? efa?µ?se? se ?st?se??de?.

22
?as??? st???e?a t?? Javascript
23
?e??e??µe?a

• ???sµ?? ?a? e?t??es? se?a???? Javascript.
• ?ed?µ??a ?a? µetaß??t??.
• ?e?est??.
• ??t???? s???????.
• ??t???? epa???????.
• S??a?t?se??.
• ?t??µe? s??a?t?se??.
• ?p?st????? Javascript st? e??a?e?? NVU.

24
???sµ?? ?a? e?t??es? se?a???? Javascript.

• ? ???sµ?? e??? se?a???? Javascript µ?sa se µ?a
  HTML ?st?se??da µp??e? ?a ???e? a??µesa se
  et???te?
• ltscript language javascriptgt lt/scriptgt
• S??des? µe e??te???? se?????
• ltscript language javascript src
  myexternal.jsgt lt/scriptgt
• Se????a st? body
• e?te????ta? ?ta? f??t??eta? ? se??da.
• Se????a st? head
• e?te????ta? µe ß?s? t?? e????e?e? t?? ???st?.
• s????? s??a?t?se??.

25
?a??de??µa
lthtmlgt ltheadgt ltscript language"javascript"gt function myfunction() alert("HELLO") lt/scriptgt lt/headgt ltbodygt ltformgt ltinput type"button" onclick"myfunction()" value"Call function"gt lt/formgt ltpgt ?at??ta? t? ???µp? ?a?e?ta? ? s????t?s? myfunction. lt/pgt lt/bodygt lt/htmlgt
26
?ed?µ??a ?a? ?etaß??t??

• ?? ßas???? t?p?? ded?µ???? p?? µp??e? ?a
  d?a?e???ste? ??p???? µ?s? e??? se?a????
  Javascript e??a?
• a???µ?t???? t?µ?? (p.?. 4, 3.14)
• a?fa???µ?t??? (p.?. hello world)
• ??????? t?µ?? true, false.
• ?e? ???eta? d?????s? µeta?? a?e?a??? ?a?
  p?a?µat????.

27
?ed?µ??a ?a? ?etaß??t??

• ?? µetaß??t?? e??a? s?µß????? ???µata µe ta ?p??a
  µp??e? ?a ???e? a?af??? se a???µ?t???? t?µ??,
  a?fa???µ?t??? ?a? ??????? t?µ??.
• ??a µetaß??t? µp??e? ?a d????e? ???s?µ?p????ta?
  t? ???? ??e?d? var ?a? t? ???µa t?? µetaß??t??.
• ?e? ?a?????eta? t?p?? µetaß??t??

var x var carname x 7 carname lucile var mycars new Array() mycars0 "Saab" mycars1 "Volvo" mycars2 "BMW"
28
?e?est??

• ??ass???? te?est?? p?? µp????? ?a ????st??? se 6
  ?at?????e?
• ????µ?t???? te?est??.
• S?????t???? te?est??.
• ??????? te?est??.
• ??ad???? te?est??.

29
??t???? S???????
lthtmlgt ltbodygt ltscript language"javascript"gt var d new Date() var time d.getHours() if (timelt10) document.write( "ltbgtGood morninglt/bgt") else if (timegt10 timelt16) document.write( "ltbgtGood daylt/bgt") else document.write( "ltbgtHello World!lt/bgt") lt/scriptgt ltpgt This example demonstrates the if..else. lt/pgt lt/bodygt lt/htmlgt
lthtmlgt ltbodygt ltscript language"javascript"gt var dnew Date() theDayd.getDay() switch (theDay) case 5 document.write("Finally Friday") break case 6 document.write("Super Saturday") break case 0 document.write("Sleepy Sunday") break default document.write( "I'm looking forward!") lt/scriptgt lt/bodygt lt/htmlgt
30
??t???? ?pa???????
lthtmlgt ltbodygt ltscript language"javascript"gt var
i0 while (ilt10) document.write("The number
is " i) document.write("ltbr /gt")
ii1 lt/scriptgt lt/bodygt lt/htmlgt
lthtmlgt ltbodygt ltscript language"javascript"gt var
i0 for (i0ilt10i) document.write("The
number is " i) document.write("ltbr
/gt") lt/scriptgt lt/bodygt lt/htmlgt
31
S??a?t?se??

• ??a s????t?s? ????eta? ???s?µ?p????ta? t? ????
  ??e?d? function.
• ???????e? t? ???µa t?? s????t?s?? ?a? µ?a ??sta
  pa?aµ?t???.

function map(f,a)    var result new Array   for (var i 0 i ! a.length i)      resulti f(ai)   return result map(function(x) return x x x, 0, 1, 2, 5, 10) // 0, 1, 8, 125, 1000.
32
?t??µe? S??a?t?se??

• ?p?????? d??f??e? ß????t???? s??a?t?se?? p??
  p??sf??e? ?t??µe? ? Javascript
• ??e???? t?p?? ded?µ????.
• ?etat??p?? ap? ??a t?p? ded?µ???? se ??a ????.
• ?p?t?µ?s? e?f??se??.
• ??µ??????a ß????t???? pa?a?????.

33
Javascript st? e??a?e?? NVU

• ???s??a µ?s? t?? ?p??a? ? ???st?? µp??e? ?a
  e????e? t?? ????t?ta ?a? ?a e?te??se? ??d??a
  Javascript.

34
?as??? st???e?a W3C HTML DOM
35
?st?se??de? ??t??e?µe?a - ???se??

• S?µf??a µe t? DOM µ?a ?st?se??da ap?te?e?ta? ap?
  ep?µ????? st???e?a d?af??et???? e?d?? (p.?.
  f??µe?, ???µp??, links, ??p.).
• ?a ep?µ????? a?t? st???e?a ap?te???? ta
  a?t??e?µe?a t?? ?st?se??da?.
• ??a a?t??e?µe??, a?????a µe t? e?d?? t??, a???e?
  se ??p??a s???e???µ??? DOM ???s? (p.?. Form,
  Button, Anchor, ??p.).

36
??t??e?µe?a - ?????e?e?

• ?e ß?s? t? DOM, ta a?t??e?µe?a ??p???? ???se??
  s?et????ta? µe s???e???µ??a ?e????ta (events).
• ? s?s??t?s? a?t? ??e? t?? e??? ?????a
• ?ta? ??a? ???st?? e?te?e? ??p??a e????e?a p??
  eµp???e? t? a?t??e?µe?? µ?a? ?st?se??da? (p.?.
  p?t?µa e??? ???µp???), d?µ?????e?ta? ??a
  a?t?st???? ?e????? (p.?. onclick event).
• ? ?st?se??da µp??e? ?a pe????e? ??p??? se????? t?
  ?p??? s?s?et??eta? µe t? d?µ??????a t??
  ?e????t??.
• ?? se????? ?a e?te?este? µet? t? d?µ??????a t??
  ?e????t??.
• S???????, µe a?t? t?? t??p? µ?a ?st?se??da
  ???eta? d?ad?ast??? - a?t?d?? st?? e????e?e? t??
  ???st?.

37
?e??e??µe?a

• Window
• Document
• Form
• Button, Checkbox, Radio
• Select
• Text, Textarea
• Math, Date, String
• DOM ?a? NVU

38
Window

• Ge???? ? ???s? Window ?a?????e? t?? ßas????
  ?d??t?te? t?? pa?a????? e??? browser sta ?p??a
  f??t????ta? ?? se??de? t?? site p?? ep?s??pteta?
  ??p???? ???st??.

lthtmlgt ltheadgt ltscript type"text/javascript"gt func
tion moveWin() myWindow.moveBy(50,50)
myWindow.focus() lt/scriptgt lt/headgt ltbodygt ltscri
pt type"text/javascript"gt myWindowwindow.open(
'','','width200,height100')
myWindow.document.write("This is
'myWindow'") lt/scriptgt ltinput type"button"
value"Move 'myWindow'" onclick"moveWin()"
/gt lt/bodygt
39
Document

• ? ???s? Document ?a?????e? t?? ßas???? ?d??t?te?
  t?? se??d?? p?? f??t????ta? sta pa?????a t??
  browser ??p???? ???st?.
• ?.?. ta ???µata p?? ???s?µ?p??e? ? ?st?se??da,
  t?? t?t?? t??, t? p?te a???????e te?e?ta?a f???.
• ?p? t?? ßas???te?e? ?d??t?te? e??? a?t??e?µ????
  Document e??a? a?t?? p?? d????? p??sßas? se
  a?t??e?µe?a p?? a?t?st?????? sta ep?µ?????
  st???e?a t?? ?st?se??da? st?? ?p??a a?t?st???e?
  t? a?t??e?µe?? Document,
• ?.?. t?? f??µe? ta applets, ta links ??p.

40
Document
lthtmlgt ltheadgt ltscript type"text/javascript"gt func
tion createNewDoc() var newDocdocument.open("
text/html","replace") var txt"lthtmlgtltbodygtLear
ning about the DOM is FUN!lt/bodygtlt/htmlgt"
newDoc.write(txt) newDoc.close()
lt/scriptgt lt/headgt ltbodygt ltinput type"button"
value"Write to a new document
onclick"createNewDoc()"gt lt/bodygt lt/htmlgt
41
Document
lthtmlgt ltheadgt ltscript type"text/javascript"gt func
tion getValue() var xdocument.getElementById(
"myHeader") alert(x.innerHTML)
x.style.backgroundColor"yellow"
alert(x.nodeType) lt/scriptgt lt/headgt ltbodygt lth1
id"myHeader" onclick"getValue()"gtThis is a
headerlt/h1gt ltpgtClick on the header to alert its
valuelt/pgt lt/bodygt lt/htmlgt
42
Form

• ? ???s? Form ?a?????e? t?? ßas???? ?d??t?te?
  a?t??e?µ???? p?? a?t?st?????? se HTML f??µe?.
• Ge???? ? p??sßas? se ??a a?t??e?µe?? p??
  a?t?st???e? se µ?a f??µa ???eta? µ?s? t??
  a?t??e?µ???? Document p?? a?t?st???e? st??
  ?st?se??da p?? pe????e? t? f??µa.

43
Form
lthtmlgt ltheadgt ltscript type"text/javascript"gt func
tion formReset() document.getElementById("myFor
m").reset() lt/scriptgt lt/headgt ltbodygt ltform
id"myForm"gt Name ltinput type"text"
size"20"gtltbr /gt Age ltinput type"text"
size"20"gtltbr /gt ltbr /gt ltinput type"button"
onclick"formReset()" value"Reset"gt lt/formgt lt/bod
ygt lt/htmlgt
44
Button

• ? ???s? Button ?a?????e? t?? ßas???? ?d??t?te?
  a?t??e?µ???? p?? a?t?st?????? se HTML ???µp??.
• Ge???? ? p??sßas? se ??a a?t??e?µe?? p??
  a?t?st???e? se ??a ???µp? ???eta? µ?s? t??
  a?t??e?µ???? Form (? Document) p?? a?t?st???e?
  st? f??µa (? st?? ?st?se??da ?e????) p?? pe????e?
  t? ???µp?.

45
Button

• lthtmlgt
• ltheadgt
• ltscript type"text/javascript"gt
• function alertValue()
• alert(document.getElementById("myButton").value)
  
• lt/scriptgt
• lt/headgt
• ltbodygt
• ltformgt
• ltinput type"button" value"Click me!"
  id"myButton onclick"alertValue()" /gt
• lt/formgt
• lt/bodygt
• lt/htmlgt

46
Select

• ? ???s? Select, ?a?????e? t?? ßas???? ?d??t?te?
  a?t??e?µ???? p?? a?t?st?????? se HTML select
  st???e?a.
• ?p? t?? p?? ßas???? ?d??t?te? e??? a?t??e?µ????
  Select e??a? ? options
• ??a p??a?a µe t?? ep?????? p?? p??sf????ta? st?
  ???st? µ?s? t?? HTML select st???e???.
• ?p?s?? ? selectedIndex ?d??t?ta e??a? s?µa?t???,
  ?a??? ? t?µ? t?? a?t?st???e? st?? t?????sa
  ep????? t?? ???st?.

47
Select
lthtmlgt ltheadgt ltscript type"text/javascript"gt func
tion getIndex() var xdocument.getElementById(
"mySelect") alert(x.selectedIndex) lt/scriptgt
lt/headgt ltbodygt ltformgt Select your favorite
fruit ltselect id"mySelect"gt
ltoptiongtApplelt/optiongt ltoptiongtOrangelt/optiongt
ltoptiongtPineapplelt/optiongt ltoptiongtBananalt/opti
ongt lt/selectgt ltbr /gtltbr /gt ltinput type"button"
onclick"getIndex()" value"Alert index of
selected option"gt lt/formgt
48
Text, TextArea

• ?? ???se?? Text, Textarea ?a???????? t?? ßas????
  ?d??t?te? a?t??e?µ???? p?? a?t?st?????? se HTML
  ped?a ?e?µ???? ?a? HTML pe?????? ?e?µ????.
• ?p? t?? p?? ßas???? ?d??t?te? e??? a?t??e?µ????
  Text, Textarea e??a? ? value p?? pe????e? t?
  t????? ?e?µe?? p?? ??e? e?sa??e? st? ped??
  ?e?µ???? ap? t? ???st?.

49
Text, TextArea
lthtmlgt ltheadgt ltscript type"text/javascript"gt func
tion alertValue() alert(document.getElementByI
d("text1").value) lt/scriptgt lt/headgt ltbodygt ltfo
rmgt ltinput type"text" id"text1" value"Hello
world!" /gt ltinput type"button" id"button1"
onclick"alertValue()" value"Show default value"
/gt lt/formgt lt/bodygt lt/htmlgt
50
Math, Date, String

• ? Math ????e? µ?a ??sta ap? ???s?µe? µa??µat????
  s??a?t?se??.
• abs(), ceil(), floor(), cos(), sin(), random(),
  round().
• ? Date ????e? µ?a ??sta ap? ???s?µe? µe??d??? p??
  s?et????ta? µe t? d?a?e???s? ?µe??µ?????.
• Ge????, µp????µe ?a d?µ??????s??µe ??a
  a?t??e?µe?? Date e?te µe ß?s? t?? t?????sa
  ?µe??µ???a, e?te µe ß?s? ??p??a ?p??ad?p?te ????
  ?µe??µ???a.
• ? Sting p??sf??e? ???s?µe? µe??d??? p??
  ep?t??p??? t?? e????? d?a?e???s? a?fa???µ?t????.
• concat(), charAt(), indexOf(), substr, replace(),