1

• Projektowanie warstwy klienckiej aplikacji
  internetowych
• JavaScript
• Prezentacja jest wspólfinansowana przez Unie
  Europejska w ramach Europejskiego Funduszu
  Spolecznego w projekcie pt.
• Innowacyjna dydaktyka bez ograniczen -
  zintegrowany rozwój Politechniki Lódzkiej -
  zarzadzanie Uczelnia, nowoczesna oferta
  edukacyjna i wzmacniania zdolnosci do
  zatrudniania osób niepelnosprawnych
• Prezentacja dystrybuowana jest bezplatnie

Politechnika Lódzka, ul. Zeromskiego 116, 90-924
Lódz, tel. [phone] www.kapitalludzki.p.lod
z.pl
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, Firefox,
Opera, Chrome.
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

16
Navigator object

• Contains information about browser
• Used when is necessary to create different
  content based on browser type

Field Description
appCodeName Browser's codename
appName Browser's name
appVersion Browser's version number
userAgent All above represented as single variable
17
Window object

• For each document it exists at least one window
  object
• Window object can be treated as a real browser
  window, document object represents it's content

Field Description
document, history, location Children of Window object
frames Table containing list of all frames, if exist in window
name Name
status Message in status bar
18
Window object (2)
Methods Description
alert(string) Alert window
close() Closes window
confirm(text) Dialog window with text and OK and Cancel buttons
open() Opens new window
scroll(x,y) Scrolls window to coordinates x,y
19
Location object

• Represents current URL

Field Description
host Hostname and port number, e.g. www.dmcs.p.lodz.pl80
hostname Hostname or IP address
href URL
path Path to current document
port Port number
protocol Name of protocol used to connect to current page (http, ftp, etc.)
search All parameters send to current page after question mark(?)
20
History object

• Contains information about current session

Field Description
current Current URL
length Number of positions in history list
previous URL address of previous entry
next URL address of next entry (when available)
Method Description
back() Moves back one entry in history
forward() Moves forward one entry in history
go(num) Moves num entries (num can be positive or negative)
go(string) Moves to the newest entry in history, which contains string (treated as substring) in it's name
21
Document object
Field Description
alinkColor Active link color
anchors Array containing all anchors in document
bgColor Background color
fgColor Text color
forms Array containing all forms in document
lastModified Last modification date
linkColor Normal link color
links Array containing all links in document
referrer URL of previous entry
title Title value
vlinkColor Visited link color
22
Document object (2)
Methods Description
close() Closes current document
write(string) Writes string to the document
writeln(string) Writes string to the document in new line
23
Link, area, anchor objects

• Link object is created when lta href""gt is used
• Anchor object is created when lta name""gt is used
• Area object is created for each ltareagt tag
• All of them has similar fields as an Location
  object and they are able to use following events
  onmouseover, onmouseout, onclick

24
Form object

• Events onsubmit, onreset

Fields Description
name name attribute value
method method attribute value
action action attribute value
encoding encoding attribute value
target Target window
elements Array of elements of form
length Length of elements array
Methods Description
submit() Submits form
reset() Clears form to default values
25
Input object

• Events onfocus, onblur, onSelect, onsubmit,
  onchange

Field Description
name name attribute value
value value attribute value
defaultValue Default value for text field
checked Current state of field (for radio and checkbox)
defaultChecked Default state of field (for radio and checkbox)
Method Description
focus() Focuses on current field
blur() Disactivation of current field
Submit() Submits form
26
Select object
Field Description
Name name attribute value
options Array containing option list
Length Length of above array
selectedIndex Index of currently chosen option
27
Image object

• Events onerror, onabort, onload

Field Description
border border attribute value
height height attribute value
name name attribute value
src src attribute value
width width attribute value
complete shows, if image is completely loaded
28
Date and Math objects

• They are not part of browser's objects hierarchy
• today new Date()
• someDay new Date(hours,minutes,seconds)
• document.write (someDay.getHours())
• Math - set of constants and popular mathematical
  functions
• Math.PI
• Math.E
• Math.abs (number)
• Math.cos (number)

29
New windows creation

• ltscript typetext/javascriptgt
• lt!--
• myWindow window.open("window.htm", "MyWindow",
  "toolbarno, locationno")
• --gt
• lt/scriptgt

30
New windows creation(2)
Property Description
toolbar yes/no Visibility of toolbar
location yes/no Visibility of location bar
directories yes/no Visibility of directories bar
status yes/no Visibility of status bar
menubar yes/no Visibility of menu bar
scrollbars yes/no Visibility of scrollbars
resizable yes/no Sets possibility of resizing window
width pix Width of the window
height pix Height of the window
31

• Projektowanie warstwy klienckiej aplikacji
  internetowych
• JavaScript
• Prezentacja jest wspólfinansowana przez Unie
  Europejska w ramach Europejskiego Funduszu
  Spolecznego w projekcie pt.
• Innowacyjna dydaktyka bez ograniczen -
  zintegrowany rozwój Politechniki Lódzkiej -
  zarzadzanie Uczelnia, nowoczesna oferta
  edukacyjna i wzmacniania zdolnosci do
  zatrudniania osób niepelnosprawnych
• Prezentacja dystrybuowana jest bezplatnie

Politechnika Lódzka, ul. Zeromskiego 116, 90-924
Lódz, tel. [phone] www.kapitalludzki.p.lod
z.pl