Developing Interactive Web Sites

1
Developing Interactive Web Sites

• JavaScript

School of Computing and Mathematics University
of Ulster at Jordanstown
2
Developing Interactive Web Sites

• The following is a brief overview of Javascript.
• It is there to give an outline of how it can be
  used to enhance HTML script.
• The next three Presentations on the website after
  this one, give much more detail look at these
  yourself.
• To use Javascript you must be able to access the
  HTML code you created.

3
The JavaScript Language

• Features
• Small and simple
• Dynamic - react to user input
• Object-based - user and system objects
• Embedded in HTML with a browser that can parse
  JavaScript

4
Capabilities of JavaScript

• Client-side operation
• Interact with user without network transmission
  and Common Gateway Interface
• Companion to Java
• Can access public members of Java classes
• Similar syntax to Java

5
A first JavaScript Program

• ltHTMLgt
• ltHEADgt
• ltTITLEgtOutputting Hello in Program Onelt/TITLEgt
• ltSCRIPT LANGUAGEJavaScriptgt
• function helloWorld()
• alert (Hello World!) // document.write(Hello
  World!)
• lt/SCRIPTgt
• lt/HEADgt
• ltBODYgt
• ltFORMgt
• ltINPUT TYPEbutton VALUESay Hello
  ONCLICKhelloWorld()gt
• lt/FORMgt
• ltPgtThat's all, folks.
• lt/BODYgt
• lt/HTMLgt

6
Embedding a Script

• Tags
• ltSCRIPT LANGUAGEJavaScriptgt lt/SCRIPTgt
• Place function declarations in the HEAD section
  so that it is always available before the BODY
  section
• Comments in Scripts to hide from incompatible
  browsers
• lt!-- Open comment
• // --gt Close comment

7
Functions

• Functions are one of the fundamental building
  blocks in JavaScript
• A function is a JavaScript procedure - a set of
  statements that performs a specific task
• A function definition has these basic parts
• The function keyword
• A function name
• A comma-separated list of arguments to the
  function in parentheses
• The statements in the function in curly braces

8
Example of a Function toSquare a Number

• ltHEADgt
• ltSCRIPT LANGUAGE"JavaScript"gt
• lt!-- Hide script from old browsers
• function square(number) Function
• return number number Declaration
• // End script hiding from old browsers --gt
• lt/SCRIPTgt
• lt/HEADgt
• ltBODYgt
• ltSCRIPTgt
• document.write("The function returned
  ", square(5), ".") Function call
• lt/SCRIPTgt
• ltPgt All done.
• lt/BODYgt
• Declaring the function simply names the function
  and specifies what to do when the function is
  called
• Calling the function actually performs the
  specified actions with the indicated parameters

9
Using the write Method

• As you saw in the previous example, the write
  method of document displays output
• You can display text conditionally or based on
  variable arguments. For these reasons, write is
  one of the most often-used JavaScript methods

10

• ltHEADgt ltSCRIPTgt
• lt!--- Hide script from old browsers
• // This function displays a horizontal bar of
  specified width
• function bar(widthPct)
• document.write("ltHR ALIGN'left'
  WIDTH" widthPct "gt")
• // This function displays a heading of
  specified level and some text
• function output(headLevel, headText, text)
• document.write("ltH", headLevel, "gt",
  headText, "lt/H",
• headLevel, "gtltPgt", text)
• // end script hiding from old browsers --gt
• lt/SCRIPTgt lt/HEADgt
• ltBODYgt
• ltSCRIPTgt
• lt!--- hide script from old browsers
• bar(25)
• output(2, "JavaScript Rules!", "Using JavaScript
  is easy...")
• // end script hiding from old browsers --gt
• lt/SCRIPTgt
• ltPgt This is some standard HTML, unlike the above
  that is generated.

11
Automatic Datatype Conversion

• JavaScript is a loosely typed language. That
  means you do not have to specify the data type of
  a variable when you declare it, and data types
  are converted automatically as needed during
  script execution
• var answer 42
• And later, you could assign the same variable a
  string value
• answer "Thanks for all the fish..."

12
Using Strings

• In expressions involving numeric and string
  values, JavaScript converts the numeric values to
  strings. For example, consider the following
  statements
• x "The answer is " 42
• y 42 " is the answer."
• The first statement returns the string "The
  answer is 42." The second statement returns the
  string "42 is the answer."

13
Variable Scope

• You can declare a variable in two ways
• By simply assigning it a value for example, x
  42
• With the keyword var for example, var x 42
• When you set a variable identifier by assignment
  outside of a function, it is called a global
  variable, because it is available everywhere in
  the current document
• When you declare a variable within a function, it
  is called a local variable, because it is
  available only within the function

14
Conditional Statement

• Use the if statement to perform certain
  statements if a logical condition is true
• Use the optional else clause to perform other
  statements if the condition is false
• An if statement looks as follows
• if (condition) statements1
• else statements2

15

• ltHTMLgt
• ltHEADgt
• ltSCRIPT LANGUAGE"JavaScript"gt
• lt!-- hide script from old browsers
• function pickAWinner(number)
• if(number 1)
• alert("You win a Car!")
• else if(number 2)
• alert("You picked the goat")
• else if(number 3)
• alert("You get to keep your 100")
• else alert("incorrect entry")
• // end script hiding --gt
• lt/SCRIPTgt
• lt/HEADgt
• ltBODYgt
• ltFORMgt
• ltINPUT TYPE"button" VALUE"Curtain 1"
  onClick"pickAWinner(1)"gt
• ltINPUT TYPE"button" VALUE"Curtain 2"
  onClick"pickAWinner(2)"gt

16
Loop Statements

• A loop is a set of commands that executes
  repeatedly until a specified condition is met
• JavaScript supports two loop statements
• for bounded iteration
• A for loop repeats a known number of times until
  a specified condition evaluates to false
• while unbounded iteration
• A while statement repeats a loop as long as a
  specified condition evaluates to true

17
Example of FOR Statement

• ltHTMLgt
• ltHEADgt
• ltSCRIPT LANGUAGE"JavaScript"gt
• lt!-- hide script from old browsers
• for(cels 0 cels lt 100 cels 5)
• fahr cels 9 / 5 32
• document.write(cels " " fahr "ltbrgt")
• // end script hiding --gt
• lt/SCRIPTgt
• lt/HEADgt
• ltBODYgt
• lt/BODYgt
• lt/HTMLgt

18
Example of WHILE Statement

• ltHTMLgt
• ltHEADgt
• ltPREgt
• ltSCRIPT LANGUAGE"JavaScript"gt
• lt!-- hide from older browsers
• i0
• while (i lt 10)
• document.write("loop " i "ltbrgt")
• i
• // end script --gt
• lt/SCRIPTgt
• lt/PREgt
• ltBODYgtlt/BODYgtlt/HTMLgt

19
Using Objects

• JavaScript has the ability to create and use
  objects
• This allows for complex programs using existing
  systems objects
• JavaScript is simplified compared to other Object
  Oriented Programming languages with no classes or
  inheritance

20
Document and FORMs

• Indicated by the ltFORMgt lt/FORMgt tags in HTML
• INPUT allows the user to input values
• The JavaScript system sets static variables to
  record the number of forms in use
• document.forms.length

21

• ltHTMLgtltHEADgtlt/HEADgt
• ltBODY BGCOLOR"FFFFFF"gt
• This is a test.ltPgt
• ltFORM NAME"FORM 1"gt
• ltINPUT TYPE"text" NAME"form1Text" value"Hello"
  SIZE10gt
• ltINPUT TYPE"button" NAME"form1Button"
  value"Test"gt
• lt/FORMgt
• This is a second FormltPgt
• ltFORMgt
• ltSELECT NAME"form2Select" SIZE3 MULTIPLEgt
• ltOPTIONgtMicrosoft
• ltOPTIONgtSun
• ltOPTIONgtNetscape
• lt/SELECTgt
• lt/FORMgt
• ltPREgt
• ltSCRIPT LANGUAGE"JavaScript"gt
• lt!-- hide from older browsers
• document.writeln("Document has "
  document.forms.length " forms") // end script
  --gt

22
Creating Windows

• ltHTMLgtltHEADgtlt/HEADgt
• ltBODY BGCOLOR"FFFFFF"gt
• ltPREgt
• ltSCRIPT LANGUAGE"JavaScript"gt
• lt!-- hide from older browsers
• msgWindow window.open("text/html", "Hello",
  "toolbarno,width500,height100")
• document.write("In the main document")
• msgWindow.document.open()
• msgWindow.document.write("ltH1gt In the Window
  msgWindow lt/H1gt")
• msgWindow.document.close()
• // end script --gt
• lt/SCRIPTgt
• lt/PREgt
• lt/BODYgtlt/HTMLgt

23
Using FORMS

• Elements of a form include
• buttons
• text
• checkboxes
• passwords
• radios
• select
• submit
• textarea

• The next few sections present the properties,
  methods, and attributes of these objects, as well
  as the form of their HTML tags.
• In order to reference these elements you must
  provide the element's array index for the
  specific element of the specific form in the
  document where the element exists, or use the
  element's name
• elementName.propertyName
• elementName.methodName()

24
Buttons

• The button element provides a single trigger
  event that can be used for anything from
  submitting forms to calling up dialog boxes or
  changing the background colour of the document.
  The HTML code for a button element is
• ltINPUT TYPE"button NAME"button name
  VALUE"button text onClick"JavaScript"gt
• onClick(). The onClick() method is called when
  the user presses the button

25
Text

• The text element enables the user to input short
  character sequences such as numbers, words, or a
  sentence
• The text object is defined in the HTML document
  as follows
• ltINPUTTYPE"text NAME"textName
  VALUE"textValue SIZEintegeronBlur"handlerTex
  t"onChange"handlerText"onFocus"handlerText
  "onSelect"handlerText"gt

26
Using Text

• The following example creates two Text objects on
  a form
• Each object has a default value
• The city object has an onFocus event handler that
  selects all the text in the field when the user
  tabs to that field
• The state object has an onChange event handler
  that forces the value to uppercase
• ltFORM NAME"form1"gtltBRgtltBgtCity lt/BgtltINPUT
  TYPE"text" NAME"city VALUE"Anchorage"
  SIZE"20" onFocus"this.select()"gtltBgtState
  lt/BgtltINPUT TYPE"text" NAME"state" VALUE"AK"
  SIZE"2" onChange"this.valuethis.value.toUppe
  rCase()"gtlt/FORMgt

27
Using Buttons

• ltHTMLgtltHEADgt
• ltSCRIPT LANGUAGE"JavaScript"gt
• function helloWorld()
• document.write ("Hello World!")
• lt/SCRIPTgt
• lt/HEADgt
• ltBODY BGCOLOR"FFFFFF"gt
• This is a test.ltPgt
• ltFORM NAME"FORM 1"gt
• ltINPUT TYPE"text" NAME"form1Text" value"Hello"
  SIZE10gt
• ltINPUT TYPE"button" NAME"form1Button"
  value"Test" ONCLICK"helloWorld()"gt
• lt/FORMgt
• lt/BODYgtlt/HTMLgt

28
Checkboxes

• The checkbox element provides a single box that
  can be either selected or unselected - on or off
• You can think of this as being either true or
  false
• If you have several checkboxes, they can all be
  independently selected or deselected without
  affecting each other
• This is different from the radio element, which
  ensures that only one element in the group is
  selected at a time
• The HTML code for the checkbox is
• ltINPUT TYPEcheckbox NAMEcheckbox name
  VALUEcheckbox value
• CHECKED onClickJavaScriptgt
• text displayed next to checkbox

29
Using Checkboxes

• ltHTMLgtltHEADgtlt/HEADgt
• ltBODY BGCOLOR"FFFFFF"gt
• This is a test of a Checkbox.ltPgt
• ltFORM NAME"FORM 1"gt
• ltBgtSpecify your music preferences (check all that
  apply)lt/BgtltBRgt
• ltINPUT TYPE"checkbox" NAME"musicpref_rnb"
  CHECKEDgt RBltBRgt
• ltINPUT TYPE"checkbox" NAME"musicpref_jazz"
  CHECKEDgt JazzltBRgt
• ltINPUT TYPE"checkbox" NAME"musicpref_blues"gt
  BluesltBRgt
• ltINPUT TYPE"checkbox" NAME"musicpref_newage"
  CHECKEDgt New AgeltBRgt
• lt/FORMgt
• lt/BODYgtlt/HTMLgt

30
Passwords

• The password element is similar to the text
  element, except it hides the actual text entered
  by replacing all the letters with an asterisk ()
• This is the typical behaviour for fields that
  accept passwords users would not want anyone
  looking over their shoulder to be able to see
• The HTML tag for a password object is
• ltINPUT TYPE"Password NAME"password_name
  VALUE"Password text" SIZEintegergt

31
Using Passwords

• ltHTMLgt
• ltHEADgt
• lt/HEADgt
• ltBODYgt
• ltFORMgt
• Password
• ltINPUT TYPE"password" NAME"password1" VALUE""
  SIZE10gt
• lt/FORMgt
• lt/BODYgt
• lt/HTMLgt

32
Radio Buttons

• The radio element is a radio button object that
  enables the user to select one button at a time
  out of a group of objects
• This can be used for mutually exclusive items
• To define a radio group, you provide them all
  with the same radio name
• ltINPUT TYPE"radio NAME"radioName
  VALUE"buttonValue CHECKEDonBlur"handlerText
  " onClick"handlerText"onFocus"handlerText"gt
  
• textToDisplay
• groupnameindex.property

33
Using Radio Buttons

• The following example defines a radio button
• group to choose among three music catalogs
• Each radio button is given the same name,
  NAME"musicChoice," forming a group of buttons
  for which only one choice can be selected
• The example also defines a text field that
  defaults to what was chosen via the radio buttons
  but that allows the user to type a nonstandard
  catalog name as well
• The onClick event handler sets the catalog name
  input field when the user clicks a radio button
• ltINPUT TYPE"radio" NAME"musicChoice"
  VALUE"soul-and-rb" onClick"musicForm.catalog
  .value 'soul-and-rb'"gt Soul and RBltINPUT
  TYPE"radio" NAME"musicChoice" VALUE"jazz"
  onClick"musicForm.catalog.value 'jazz'"gt
  JazzltINPUT TYPE"radio" NAME"musicChoice"
  VALUE"classical" onClick"musicForm.catalog.va
  lue 'classical'"gt Classical

34
Select

• A selection list on an HTML form
• The user can choose one or more items from a
  selection list
• ltSELECTNAME"selectName SIZE"integer"
  MULTIPLEonBlur"handlerText"onChange"handl
  erText"onFocus"handlerText"gtltOPTION
  VALUE"optionValue" SELECTEDgt textToDisplay
  ... ltOPTIONgt textToDisplaylt/SELECTgt

35
Using Select

• ltHTMLgtltHEADgtlt/HEADgt
• ltBODYgtltFORMgt
• Choose the music type for your free CD
• ltSELECT NAME"music_type_single"gt
• ltOPTION SELECTEDgt RB
• ltOPTIONgt Jazz
• ltOPTIONgt Blues
• ltOPTIONgt New Age
• lt/SELECTgt
• ltPgtChoose the music types for your free CDs
• ltBRgtltSELECT NAME"music_type_multi" MULTIPLEgt
• ltOPTION SELECTEDgt RB
• ltOPTIONgt Jazz
• ltOPTIONgt Blues
• ltOPTIONgt New Age
• lt/SELECTgt
• lt/FORMgtlt/BODYgtlt/HTMLgt

36
Submit

• The submit element provides a single trigger
  event that causes the form data to be sent to the
  URL specified in the HTML tag
• Otherwise, it is much like the regular button
  element. The HTML code for a submit element is
• ltINPUT TYPE"submit NAME"submitName
  VALUE"buttonText" onBlur"handlerText"
  onClick"handlerText" onFocus"handlerText"
  gt

37
Using Submit

• ltHTMLgt
• ltHEADgt
• lt/HEADgt
• ltBODYgt
• ltFORMgt
• ltINPUT TYPE"submit" NAME"submitButton"
  VALUE"Done"gt
• lt/FORMgt
• lt/BODYgt
• lt/HTMLgt

38
TextAreas

• The textarea element enables the user to input
  longer entries typically used for messages and
  comments that may span more than one line of text
• The textarea object is defined in the HTML
  document as follows
• ltTEXTAREA NAME"textareaName ROWS"integer
  COLS"integer"onBlur"handlerText"onChange"h
  andlerText"onFocus"handlerText"onSelect"ha
  ndlerText"gttextToDisplaylt/TEXTAREAgt

39
Using TextAreas

• The following example creates a Textarea object
  that is six rows long and 55 columns wide
• The textarea field appears immediately below the
  word "Description
• When the form loads, the Textarea object contains
  several lines of data, including one blank line
• ltBgtDescriptionlt/BgtltBRgtltTEXTAREA
  NAME"item_description" ROWS6 COLS55gtOur
  storage ottoman provides an attractive way
  tostore lots of CDs and videos--and it's
  versatileenough to store other things as
  well.It can hold up to 72 CDs under the lid and
  20 videosin the drawer below.lt/TEXTAREAgt

40
Project Perspective

• There is a free Website which contains many
  Javascript routines some quite useful.
• They can be seen in action on the site and
  downloaded easily, and used for free.
• Have a look!!!
• http//javascript.internet.com/