JAVASCRIPT

1
JAVASCRIPT

• Up until now we have been limited to what HTML
  has to offer in the browser.
• Primarily, we have used forms, which have their
  fairly passive input items, select lists, etc.
• Although the browser is basically for rendering
  HTML pages, there are two reasonably common
  technologies for executing program-like code in
  the browser
• Java applets, which are Java programs which
  execute in the browser with limited rights
• Javascript scripts
• What is a scripting language?
• No real definition but quite simple,
  interpreted, for small things, for specific
  purposes (web browsers, batch job control, shell
  commands)

2
Javascript

• Java-like scripting language
• A browser may enable or disable.
• Used to embed functionality in web pages.
• Java applets implement all functionality.
• Javascript typically only implements a part of
  the functionality.
• Typical example tasks
• Browser detection
• Input data validation
• Customised windows
• Cookie management
• Date/time pickers (programs for date/time
  selection)
• Dynamic changes to html documents
• See examples.
• Please note that the examples for this lecture
  are in Finnish.
• English speakers may want to check a Javascript
  tutorial in English, such as http//www.echoecho.c
  om/javascript0.htm

3
Basic rules

• Java-style statements
• Variables, conditionals, functions, loops, etc.
• We study the language from examples.
• Language is case-sensitive (a is different from
  A)
• In principle you may put statements in head and
  body parts of HTML pages
• Scripts are evaluated as they are encountered in
  the file.
• Logically, declarations (like functions) in head.
• Items connected with body items in the body
  section.
• One of the key features of Javascript is that it
  can access the HTML elements.
• It may find them by name (within their context).
• It may find them by id.
• For a more complete specification,
  seehttp//www.w3.org/TR/html4/interact/scripts.ht
  ml

4
Hello World

• Uses a simple alert popup windows with alert()
• Writes text to the document with
  document.write()
• Notice that the examples are html files with
  embedded javascript tags
• Javascript tags (alert pops up an alert
  window)
• ltscript type"text/javascript"gt alert(Hello
  World!")lt/scriptgt
• ltscriptgt may also specify an external file
• ltscript language"JavaScript" src"calendar/calend
  ar1.js"gt lt/scriptgt
• ltscript srcURIgt specifies an URI
• ltnoscriptgtlt/noscriptgt specify code to be
  executed, if scripting language is not enabled.

5
Document Object Model

• To access the data in the HTML page, the
  JavaScript program needs some data structures to
  access the HTML page.
• As a comparison, the PHP program outputs the HTML
  page sequentially
• It would not be very handy to output the document
  in the changed form to the browser.
• For this, many browser implement an interface to
  what is called the Document Object Model (DOM).
• DOM is a representation of the document in an
  object form, accessible from JavaScript programs
• More explanation and examples can be found in
  http//www.webreference.com/programming/javascript
  /definitive/chap17/

6
Hierarchical DOM structure

• lthtmlgt
• ltheadgt
• lttitlegtMy Titlelt/titlegt
• lt/headgt
• ltbodygt
• lth1gtThis is a titlelt/h1gt
• ltpgtThis is a ltigtsimplelt/igt
• paragraph. lt/pgt
• ltpgtAnother paragraph. lt/pgt
• lt/bodygt
• lt/htmlgt
• The elements are tree nodes.

html
head
body
h1
p
p
My Title
Anotherparagraph
Thisis a
i
paragraph
simple
7
DOM access

• The hierarchical model is implemented using
  tables. See the code snippet (directly from the
  tutorial mentioned earlier)
• var n document.documentElement // This is a
  Node object.
• var children n.childNodes // This is a
  NodeList object.
• var head children.item(0) // Here is one way
  to use a NodeList.
• var body children1 // But this way is
  easier!
• The elements can also be addressed through names.
  See the other snippet from the same source. All
  three do the same
• var f document.forms.namedItem("myform")
• var g document.forms"myform"
• var h document.forms.myform

8
DOM Nodes

• The Nodes have a Type.
• Different Types have different interfaces for
  accessing their information.
• You may, for instance, retrieve, set, or delete
  attributes of an Element.
• Adding, deleting and changing the nodes of the
  DOM model, a JavaScript program can dynamically
  change the HTML page.

9
Events

• Javascript actions may be triggered from events,
  e.g. changes on form fields or a submit button
  being clicked
• onfocus" Form field gets focus (validation)
• onblur" Form field looses focus (validation)
• onchange" Content of a field changes
  (validation)
• onselect" Text is selected
• onmouseover" Mouse moves over a link (animated
  buttons)
• onmouseout" Mouse moves out of a link (animated
  )
• onclick" Mouse clicks an object
• onload" Page is finished loading (initial
  actions, info,)
• onSubmit" Submit button is clicked (validation
  etc.)

10
Javascript standard objects

• navigator
• Browser information
• window
• Top level window object
• window.frame
• represents sub-frames as windows
• window.document
• Current document info
• window.history
• Browsing history
• window.location
• Current URL information.

11
Dynamic elements

• The HTML elements are fairly static.
• Javascript can, for instance, use timed events to
  produce dynamic things in the web pages.
• As an example, lets study a clock
  implementation.
• Please notice that this time is time of the
  client computer, because the browser runs on the
  client and accesses the client clock information.
• Similarly with dates.
• If the server sends something in the forms, that
  is server date/time.
• As another example, you may pop up windows
  dynamically.
• I guess these are mostly disturbing or annoying.

12
Input validation

• Using events, it is possible to trigger input
  validation.
• It is possible to validate one item at a time, or
  everything at submit time.
• I will leave the Whats best? question to
  usability experts.
• What to validate?
• HTML forms can limit the input a little bit
  (numeric, length)
• Javascript can be used to validate more.
• However, there are things that the Javascript may
  be unable to do.
• Eg if the database contents or other remote data
  is needed.
• Notice that different validations at different
  moments may be confusing.

13
Regular expressions

• Regular expressions can be used in several
  environments and languages to match strings.
• Examples PHP, JavaScript, Perl
• There are some differences, so it is always worth
  checking the manual, but here are some general
  rules
• Expressions start and end with the slash
  character / and most normal characters have
  normal interpretation
• E.g. /hei/ matches with /no hei/ but not with /no
  ei/
• Strings may be tested if they match a regular
  expression.
• Regular expressions can also be used for
  conversion.
• We will review some general things, more details
  in tutorial http//www.webreference.com/js/column
  5/

14
Regular expressions

• is an or operator /xy/ (x or y)
• The following are special characters \ ()
  ?
• Also, a character followed by \ is a special one,
  e.g. \d
• Grouping with ()
• is to match at the beginning
• match at the end
• Quantifiers after items
• m,n mltoccurrencesltnif m or n is blank, 0 or
  infinite
• n occurs n times
• means 0 or more times

• means 1 or more times
• ? Means 0,1
• E.g. /x(3)/ requires three xs
• . matches any character
• listOfCharacters matches any character in the
  list, you can use intervals a-z matches all
  characters from a to z.
• \ makes special characters normal, e.g \. matches
  a .
• These rules should get you started, but there is
  more to be studied.

15
Browser detection

• Unfortunately not everything works equally well
  in all browsers.
• It is also possible to use a different page for
  different browsers.
• For these reasons, it is sometimes important to
  know what browser the user is using.
• Please study the examples.

16
Date/time pickers

• Dates and times often appear in forms.
• Formatting as text is a problem
• Internationalisation
• Format check
• Day/Month order
• Present-day solution is to use a calendar-like
  date/time picker for choosing the dates.

17
Dynamic content

• JavaScript can be used to directly change the DOM
  model and thereby to change the document.
• The DOM model can also be used to manage XML
  content (and, for istance, to generate HTML from
  it).
• It can also use XMLHttpRequest objects to request
  data from the server without loading the whole
  page again. This provides possibilities to load
  new content to the page without re-loading the
  page.
• Using this technology in combination of DOM and
  the basic HTLM/CSS (or XHTML/CSS) is sometimes
  called Ajax. See the web for more information, if
  you are interested in the details.

18
Conclusions

• Javascript offers possibilities beyond normal
  HTML.
• Some of them are very useful to make your
  application run without problems.
• However, use Javascript with care, because
• You may get increased maintenance problems.
• A user interface, which tries to be too smart, is
  usually very stupid.
• There may still be browsers, which do not run
  Javascript
• In this case for all to work well, you may need a
  ltnoscriptgt alternative implementation.
• Users may disable Javascript.
• Same as above.