Chapter 3 : Processing on the Front End

1
Chapter 3 Processing on the Front End

• JavaScript
• Technically its name is ECMA-262, which refers
  to the international standard which defines it.
• The standard is derived mostly from Netscape's
  JavaScript, but it does have some features from
  Microsoft's JScript.
• Its most common use (by far) is to provide
  scripting support for Web browsers. All of the
  popular "modern" Web browsers support the core
  standard.

2

• Scripts are included in HTML files by placing
  them inside an HTML script container inside
  either the head or body section of the document.

ltscript language"javascript"gt lt!-- JavaScript
statements //--gt lt/scriptgt

• The HTML comment markers are to hide the
  JavaScript statements from older browsers that
  don't understand the HTML script element.
• JavaScript statements are executed in document
  order as the Web page is first being loaded into
  the browser.
• See firstprogram.html
• See fragmentedscript.html

3

• JavaScript is loosely typed, which means a
  variable can hold any of JavaScript's literal
  types
• var x3.14 // number
• x"a string" // string
• xtrue // Boolean
• The keyword var is used to declare variables
  since no typing is required.
• There are some special fixed literal values.
  It's better to assign predefined literals when
  weird things happen than to crash Web browsers!
• var y // uninitialized variables are
• // assigned the literal undefined
• var y "yi""kes" // y contains NaN
• // Not a Number
• y 3/0 // y contains the literal Infinity

4

• The basic syntax is very similar to that of Java
  and C.
• The operators are standard.

5

• The concatenation operator is .
• x"3"
• y"4"
• zxy // "34"
• ayx // "43"
• But is also used for addition of numbers.
• x3
• y4
• zxy // 7
• This duality is a problem since most data stored
  in HTML form elements is string data. We can
  parseFloat() (or parseInt()) data to force
  addition .
• x"3"
• y"4"
• z parseFloat(x)parseFloat(y) // 7

6

• Conditionals are standard

• Loops are standard

7

• The syntax for functions is standard, with the
  exception that you don't declare types for
  parameters or for returned values.

• Here is an example of a void (no return value)
  style function.
• function customrule(width,char)
• for (var x1 xltwidth x)
• document.write(char)
• document.write("ltbr /gt")
• Here is a sample call to the function.
• customrule(25,"")
• Here is the result in the Web page.

8

• Here is an example of a return style function.
• function times10(num)
• numnum10
• return num
• Here is a sample call to the function.
• var num times10(3)
• The result is that the variable num contains 30.
• Scope in functions is straight-forward and works
  as you would expect.
• Global variables are visible inside functions.
• Function parameters are local to the function
  call and so are variables declared inside
  functions using the var keyword.
• Primitive variables are passed to functions by
  value.
• Objects are passed to functions by reference.

9

• Scope example
• function scopedemo(x)
• var y10
• x
• yxy
• z
• var x2
• var y3
• var z4
• scopedemo(z)
• Result After the function call, the state of the
  global variables are
• xlt--gt2, ylt--gt3, zlt--gt5
• Note that global variables "live" so long as the
  page is loaded into the browser. Refreshing the
  page, re-initializes global variables.
• Local variables "live" only during the function
  call.

10

• Arrays are also standard with the exception that
  you don't need to define what type(s) it may
  hold.
• Create a new array object.
• var listnew Array()
• Initialize some array cells.
• list0"hello"
• list13.14
• list1000true
• The allowed indices are not pre-determined, but
  it's best to stick to standard array indexing,
  unlike the above example which skips some
  indices.
• Array variables are objects. JavaScript doesn't
  yet support classes and inheritance, but there
  are several built in classes with constructors
  (like Array() ) which are available.

11

• Our main focus here is to use JavaScript to
  process HTML forms. Forms are created using only
  HTML.

Form Buttons
12
Text Form Elements
13
Option Form Elements
See bigform.html
14
Part of the Browser Object

• Many aspects of a Web page can be changed by
  changing the Browser Object using JavaScript.
• This statement will change the text color of the
  page to red.
• window.document.fgColor"0000FF"

15

• Here, we are mostly concerned with form objects.
• ltform name"fred"gt
• ltinput type"text" value"hello" name"textbox"
  /gt
• ltinput type"button" value"click me"
  onclick"f()" /gt
• lt/formgt

• A form is an object. Its name is reference to
  the object.
• Form elements are properties of the form object.
  Again, the name of the element is the reference
  to the object.
• A text field is a string object. It's data is
  in its value property.
• document.fred.textbox.value
• The button's onclick event handler calls a
  JavaScript function named f(). The function
  changes the content of the text field. The
  change in the Web page is immediate.
• function f()
• document.fred.textbox.value "there"
• See formobject.html

16

• Event Handlers (listeners) are special
  properties of the various objects.
• Common Examples
• Object Event Handlers
• window onfocus, onblur
• document onload, onunload
• link onclick,onmouseover,onmouseout
• form button onclick
• An event handler can be placed as an attribute
  in the HTML element which creates the object.
• These examples call the built-in JavaScript
  alert() function when the event happens.
• ltbody onload"alert('Welcome')"gt
• lta href"" onmouseover"alert('Hey, man!')"gt
  click melt/agt

See loadevents.html See linkevents.html
17

• We will mostly create custom functions to handle
  user events.
• These functions will primarily access, and
  perhaps change, the elements (hence the data) in
  form object.
• The data is in a form element's properties,
  which are standard variable types.
• Form Element Its Fundamental Data Type(s)
• text field, text area string - the data
• radio button, checkbox Boolean - is it checked?
• string - the data
• menu (single) number - which option is
  selected
• array of strings - the data for each option
• menu (multiple) array of Boolean - is a given
  option checked?
• array of strings - the data for each option

18

• The form of Figure 3.9 and a diagram to
  represent the object.
• The branches show object references.
• The primitive variables are listed at the ends
  of branches

19

• Below is the same form as previous slide
• All form elements are indexed by a built-in
  elements array.
• This is useful when you need to iterate over
  several form elements.
• You can use either this array or the name given
  to the form element for object reference.

20
Client-side processing of data in HTML
forms Text field -- a string with no new line
characters Text area -- a string potentially
with new line characters Note These form
elements are incapable of holding numeric data.
For example, If you assign a numeric literal to a
text element in the Browser Object, it is
converted on the fly into a string.
21
See calculator.html
22
Processing user choices Checkbox -- Boolean
Variable Hidden string data Radio Button --
Boolean Variable Hidden string
data Note There is no built-in way to test
which one(s) are checked from among a group. The
best way is to loop over them and test each one.
23
See cart.html
24
Menus Single selection -- Works like a single
selection group of radio buttons. Note
selectedIndex property of the menu holds the
currently selected menu index -- no need to
iterate to find user's choice. Multiple
selection -- Works like a group of
checkboxes. Note selectedIndex property of the
menu only holds the first (usually) currently
selected menu index -- have to iterate over the
selected properties of the menu options to find
all the user's choices.
See cartax.html
25
Validation Before Submission to Server ltform
name"formname" method"GET"
action"http//www.cknuckles.com/cgi/echo.cgi"gt
. . . ltinput type"submit" value"Submit Form"
/gt lt/formgt ltscript language"JavaScript"gt
document.formname.onsubmitverify // has to be
after def. of submit button function verify()
-return true if form data is ok -return false
otherwise -- form won't be submitted
lt/scriptgt
See menuverify.html See cart2.html
26

• Validation using string object
• var str "Scooby Doo"
• // automatically treated as a string object
• So for example,
• var xstr.charAt(1)
• Causes the variable x to contain the string
• "c"
• Using various methods of a string object, you
  can extract any information you want about the
  string.

27
Summary of the String object

• If you have worked with strings before, most of
  this already should be familiar to you in concept.

28

• Example Verify the following about the form
  below.
• The name must be at least 4 characters long,
  must contain at least one blank space, and must
  neither begin nor end with a space.
• The e-mail address must be at least 5 characters
  long, must contain no blank spaces, must contain
  exactly one _at_ character, and must contain at
  least one period.
• The zip code must be numeric and exactly five
  characters long.

See textverify.html