JavaScript

1
JavaScript

• Bartosz Sakowicz

2
JavaScript - basics
JavaScript is used in millions of Web pages to
improve the design, validate forms, detect
browsers, create cookies, and much
more. JavaScript is the most popular scripting
language on the internet, and works in all major
browsers, such as Internet Explorer, Mozilla,
Firefox, Netscape, Opera.
3
JavaScript basics (2)

• JavaScript was designed to add interactivity to
  HTML pages
• JavaScript is a scripting language
• A JavaScript is usually embedded directly into
  HTML pages
• JavaScript is an interpreted language
• It is free
• Java ! JavaScript !!!

4
JavaScript - examples
lthtmlgt ltbodygt ltscript type"text/javascript"gt lt!
document.write(It is JavaScript!") //--gt
lt/scriptgt lt/bodygt lt/htmlgt
5
JavaScript examples(2)
lthtmlgtltheadgt ltscript typetext/javascriptgt funct
ion pushbutton() alert(Hello!") lt/scriptgtlt/
headgtltbodygt ltformgt ltinput type"button"
name"hello" valueHello" onclick"pushbutton()"gt
lt/formgt lt/bodygtlt/htmlgt
6
JavaScript examples(3)
lthtmlgtltheadgt ltscript typetext/javascriptgt funct
ion getname(str) alert("Hi, "
str"!") lt/scriptgtlt/headgtltbodygt ltpgtEnter your
namelt/pgt ltformgt ltinput type"text" name"name"
onblur"getname(this.value)" value""gt lt/formgtlt/bo
dygtlt/htmlgt
7
Inserting JavaScript

• ltheadgt section (as in previous transparencies)
• Inline scripts
• ltbodygt ltscript type"text/javascript"gt ....
  lt/scriptgt lt/bodygt
• 3) External file
• ltheadgt
• ltscript srcmenu.js"gtlt/scriptgt
• lt/headgt

8
Hierarchy of objects
9
Basics usage of objects
a) With dot (.) the same as in C (preferred
way) b) With usage the table of properties of
object, eg   document1 useful with
loops  c) With usage of association
table   document"href"
10
Expressions operators
x7 // variables doesnt have type! str Some
text" (bool1 true) (bool2 false) str
Some" " text" All the operators are
identical as in C/Java.
11
Control flow statements
12
Events - onload and onUnload
Events are triggered when the user enters or
leaves the page. The onload event is often used
to check the visitor's browser type and browser
version, Events are often used to deal with
cookies that should be set when a user enters or
leaves a page. Eg ltbody onload"DoSthonload"gt
ltbody onunload"DoSthonunload"gt
13
Events - onFocus, onBlur and onChange
Events are often used in combination with
validation of form fields. Eg ltinput
type"text" size"30 id"email"
onchange"checkEmail()"gt
14
Events - onSubmit
Event is used to validate all form fields before
submitting it. Eg ltform method"post"
action"xxx.htm" onsubmit"return checkForm()"gt
15
Events - onMouseOver and onMouseOut
Events are often used to create "animated"
buttons, eg lthtmlgtltheadgt ltscript
typetext/javascriptgtlt!-- function
changeImage(i,j) document.imagesi.src
image"j".gif" --gtlt/scriptgtlt/headgtltbodygt lta
href "doc.htm" onmouseover"changeImage(0,2)"
onmouseout"changeImage(0,1)"gt ltimg
srcimage1.gif" altimage1"/gtlt/agt lta href
"doc.htm" onmouseover"changeImage(1,2)"
onmouseout"changeImage(1,1)"gt ltimg
srcimage1.gif" altimage1"/gtlt/agtlt/bodygtlt/htmlgt