LIS650 lecture 5 forms, JavaScript and the DOM

1
LIS650 lecture 5forms, JavaScript and the DOM

• Thomas Krichel
• 2008-10-12

2
today

• More HTML
• ltformgts and form element
• ltscriptgt and event attributes
• basics of JavaScript
• the DOM in JavaScript
• JavaScript and CSS

3
Forms

• Forms are parts of an HTML document that users
  can fill in. They may include buttons,
  checkboxes, text areas, file selections.
• The thing that users fill in are called the
  controls of the form.
• Some controls are hidden.
• Controls are submitted to PHP in the form of
  variables. Each control in the HTML form becomes
  a variable in PHP. This is seen later.

4
forms examples

• Here is an example in http//wotan.liu.edu/home/kr
  ichel/courses/lis650/examples/forms
• Elements used in forms use a special attribute
  group that I will call the form attributes. I
  will discuss them now.

5
form attribute tabindex

• Stupid users use the mouse to fill in form. Smart
  users use the tab character on the keyboard. It
  is much quicker.
• if you set the tabindex on a in input, you can
  set the order. The value of the attribute is a
  number between 0 and 32767. The input with a
  lower number will be dealt with before the one
  with a higher number.

6
form attribute readonly

• If you set readonly"readonly" the control can
  only be read but not set. This means
• It can receive focus but cannot be modified by
  the user.
• It is included in tabbing navigation.
• It is transmitted to the server for processing.
• readonly is not set by default.

7
form attribute disabled

• If you set disabled"disabled" the control can
  only be read but not set. This means
• it can not receive focus and can not be modified
• it is excluded in tabbing
• it is not transmitted to the server for
  processing.
• disabled is not set by default.

8
ltformgt

• This element encloses a form. It is a block level
  element. All form elements (discussed now) should
  be children of the ltformgt element.
• Technically can be more than one ltformgt in the
  HTML page.
• But it does not make much sense to have several
  ltformgts.
• ltformgt accepts the core and i18n attributes. And
  it has some other attributes. Some of these are
  required.

9
the action attribute of ltformgt

• It has a required action attribute.
• The value of this attribute is the location of a
  file that contains the action to execute when the
  form is submitted.
• In our case, this will be the file name of the
  PHP script that deals with the form on wotan.
• By default, scripts are executed using return on
  the browser while a form element has focus, or a
  special submit button.

10
method of ltformgt

• ltformgt admits a method attribute. This attribute
  determines the http method by which the form is
  submitted to the script. There are only two
  realistic choices
• method"get" (default)?
• method"post"
• When the form is submitted the http request line
  that follows will have the method GET or POST.
• Validation requires lowercase values.

11
method"get"

• If you use GET, the form data is transmitted by
  appending it to the URL of the script. Google's
  Web search does it that way, for example.
• There is a standard way to write the data in the
  URL knows as Common Gateway Interface, CGI. It is
  of no further interest to us.
• Advantage you can bookmark the form.
• Problem there is a limit of 1024 chars for the
  URL, therefore only a limited information can be
  transmitted in this way.

12
method"post"

• If you use post, the user agent sends the form as
  a POST message to the server.
• The data is sent in the body of the http request.
• Thus it can be as long as you want.
• If you use POST you can set the MIME type of the
  data with a special attribute enctype

13
home grown action

• I made an action script for the get method at
  http//wotan.liu.edu/list_get.php.
• It shows the result of the form submission,
  formatted as a definition list.
• On wotan, you can refer to it as "/list_get.php".

14
more attributes to ltformgt

• Here are two more attributes I will list for
  completeness
• accept-charset says what character sets will be
  accepted by the form
• accept says what MIME-types can be accepted

15
the form control ltinput/gt

• This element creates a control. Usually a form
  has several ltinput/gts as well as text that
  explains the from.
• ltinput/gt is a replaced element.
• It is a text level element.
• Despite the fact that it is a child of the
  ltformgt, which is block-level, the ltinput/gt
  requires an extra block level parent.

16
more on ltinput/gt

• ltinput/gt admits the core, i18n and the form
  attributes.
• It requires a type attribute and a name
  attribute.

17
the type attribute of ltinput/gt

• This attribute can only take the following values
• text enter text
• password enter text, but don't echo on screen
• checkbox enter checks on boxes
• radio check one select
• submit press to submit form
• reset reset form
• file upload file (can only be done with
  POST)?
• hidden hidden form data, not shown
• image image map submission, not covered
  further
• button a button

18
the name attribute of ltinput/gt

• This give a name to the control that the users
  are setting.
• The script that is found by the action attribute
  will identify the controls by name. Therefore
  every control should have a different name.

19
control name and PHP variable

• When the form is passed to the PHP script named
  with the action of the the ltformgt the controls
  are accessible as PHP variables.
• If name is the name of the control, and if the
  method is POST, the control is read as the
  variable _POST'name'.
• If name is the name of the control, and if the
  method is GET, the control is read as the
  variable _GET'name'.

20
the size attribute of ltinput/gt

• It lets you set the size of the input field.
• Note that the size of the field may not limit the
  input to that size.
• When the type is text or password the value
  you give to this field is the number of
  characters.
• Otherwise it is the number of pixels.

21
the maxlength attribute of ltinput/gt

• This sets the maximum length on the value.
• Note that this is different from the size of the
  input field because there is scrolling.
• If you dont specify a maximum length there is no
  limit.
• But it is good security to have a limit.

22
the value attribute of ltinput/gt

• This gives the initial value of the ltinput/gt.
• The initial value is shown to the user.
• value is optional but should be given for the
  radio and checkbox type.

23
the checked attributes of ltinput/gt

• When the input is of type 'radio', setting the
  checked attribute to any value will tell the
  browser what button is initially set. Of course
  there can only be one of them.
• When the input is of type 'checkbox', setting the
  checked attribute to any value will make sure it
  is checked initially.

24
the src attribute of ltinput/gt

• When the input is of type 'image' the src
  attribute gives the URL of the image.
• This is for input using image maps.

25
creating menus

• This is done with ltselectgt element.
• Each ltselectgt element can have a number of
  ltoptiongt elements that contain the options that
  the user can choose from.
• ltselectgt also takes the core and i18n attributes,
  and some others that we see now.

26
attributes to ltselectgt

• name has the name of the control that is set
• multiple"1" allows and multiple"0" (default)
  disallow multiple selections. However, I dont
  know how they are being transmitted. Therefore I
  suggest you dont use this option.
• size sets how many rows of the selection should
  be displayed at any one time.

27
selectable choice ltoptiongt

• Within a ltselectgt there are a series of ltoptiongt
  elements that contain the selections.
• ltoptiongt takes the core, i18n and form
  attributes. Example
• ltselect name"brewery"gt
• ltoptiongtBruchlt/optiongt
• ltoptiongtKarlsberglt/optiongt
• lt/selectgt

28
value attribute to ltoptiongt

• value can be used to set the value of the
  control when the value set is different than the
  contents string of the ltoption/gt element.
• Example
• ltoption value"bruch"gtBrauerei G. A. Bruch,
  Saarbrückenlt/optiongt

29
other attributes to ltoptiongt

• label can be set to label the option. if it is
  set, the user agent should use label rather than
  the content of the ltoptiongt element. At least
  this is what the spec says. Firefox does not seem
  to agree. See forms/options.html for a test
  example.
• selected can be used to select an option.

30
ltoptgroupgt

• This element has ltoptiongt elements as its
  children.
• It takes the same attributes as ltoptiongt.
• It is used to create hierarchical options. This
  is mainly a time and space-saving device in the
  presence of many options. Say
• ltoptgroup label"dark"gt
• ltoption value"b6"gtBaltika 6lt/optiongt
• ltoption value"gu"gtGuinness"/gtlt/optiongt
• lt/optgroupgt

31
the lttextareagt element

• This creates a text area where you can put a
  large chunk of text. The contents of lttextareagt
  contains the initial value.
• It takes some attributes
• name sets the name of the control that is set.
• cols sets the number of columns in the text
  area.
• rows sets the number of rows in the text area.
• lttextareagt also admits the i18n, core and form
  attributes.

32
ltlabelgt

• This is a way to add labels for inputs.
• Normally, the input label should be taken from
  the label attribute of the control. But that
  only works if the label attribute is available.
• ltlabelgt can be used if the other method can not
  be.

33
the for attribute to label

• The for attribute says what control the label is
  for. You reference the cont
• You reference the control by its id.
• Example
• ltlabel for"height_input"gtyour heightlt/labelgt
• ltinput id"height_input" name"height"
  type"text"/gt

34
the push button ltbuttongt

• This makes a button for decoration.
• It is not a form element stricly speaking because
  it can appear outside ltformgt
• It takes a type attribute that can be either be
  'button', 'submit' or 'reset'.
• It has takes a name attribute for the name of
  the control that it sets.
• It takes a value attribute to set a value.
• It also takes the core and i18n attributes.
• And it can have character contents!

35
the ltscriptgt

• ltscriptgt is an element that calls a script.
• Interestingly enough, you can place ltscriptgt in
  the head or the body.
• It requires a type attribute that gives the type
  of the script language. e.g. type"text/javascript
  ".
• It takes a defer attribute. If set as defer"1"
  you tell the user agent that the script will
  generate no output. This helps the user agent in
  that case.

36
default script language

• You should set the default scripting language
  used in the document using the ltmeta/gt element in
  the ltheadgt
• ltmeta http-equiv"content-script-type"
  content"text/javascript"/gt
• If you don't the validator does not complain, but
  I don't see other ways to specify the language.

37
example

• ltscript type"text/javascript"gt
• window.open("http//www.google.com")
• lt/scriptgt

38
external script

• ltscriptgt takes the src argument that gives a URI
  where the script can be found. Such a script is
  called an external script.
• You can also create an external file, say
  google.js with the line
• window.open("http//openlib.org/home/krichel")
  
• Then you can call it up in the html file
• ltscript type"text/javascript" src"krichel.js"gtlt/
  scriptgt
• see krichel.html

39
automated vs triggered scripts

• ltscriptgt is useful to set up automated scripts.
  The user has to do nothing to get the script to
  run. When the browser hits the ltscriptgt it
  executes the script.
• You can also trigger a script. To do that, you
  attach an attribute to a HTML element. These
  attributes are called event attributes.

40
triggering script example

• Example
• ltp onmouseover"stink"gtCow shit is ... lt/pgt
• as the user moves the mouse over the
  paragraph, the browser fires up an imaginary
  script called stink that makes it start to stink.

41
event attributes

• Event attributes can be given to elements (like
  any attribute, really)?
• The name of the attributes gives a certain event
  that could happen to the element.
• The value of the event attribute is the script to
  be executed when the event occurs on the element
  that has the event attribute.

42
core event attributes

• Some event attributes can be used on all elements
  that also accept the core (as by Thomas
  naming) attributes.
• I will refer to such attributes as core event
  attributes.
• Other event attributes are limited to certain
  elements.

43
core event attributes with the mouse

• onmousedown occurs when the pointing device
  button is pressed over an element.
• onmouseup occurs when the pointing device button
  is released over an element.
• onmouseover occurs when the pointing device is
  moved onto an element.
• onmousemove occurs when the pointing device is
  moved while it is over an element.
• onmouseout occurs when the pointing device is
  moved away from an element.

44
core events attributes press click

• onclick occurs when the pointing device button
  is clicked over an element.
• ondblclick occurs when the pointing device
  button is double clicked over an element.
• onkeypress occurs when a key is pressed and
  released over an element.
• onkeydown occurs when a key is pressed down over
  an element.
• onkeyup occurs when a key is released over an
  element.

45
special event attributes focusing

• onfocus occurs when an element receives focus
  either by the pointing device or by tabbing
  navigation. This attribute may only be used with
  the ltagt, ltbuttongt, ltlabelgt, lttextareagt, and with
  ltareagt, an element we dont cover.
• onblur occurs when an element loses focus either
  by the pointing device or by tabbing navigation.
  It may be used with the same elements as onfocus.

46
special event attributes with ltformgt

• onsubmit occurs when a form is submitted. It
  only applies to the ltformgt element.
• onreset occurs when a form is reset. It only
  applies to the ltformgt element.

47
special event attributes with ltbodygt

• onload occurs when the user agent finishes
  loading a document.
• onunload occurs when the user agent removes a
  document from a window.

48
special event attributes for controls

• onselect occurs when a user selects some text in
  a text field. This attribute may be used with the
  ltinputgt and lttextareagt elements.
• onchange occurs when a control loses the input
  focus and its value has been modified since
  gaining focus. This attribute applies to the
  following elements ltinputgt, ltselectgt, and
  lttextareagt.

49
JavaScript

• This is a client-side scripting language.
• Your web page is read by the client. If it
  contains instructions written in JavaScript, the
  client executes the command, provided it knows
  about JavaScript.
• Different browser capabilities when it comes to
  executing JavaScript did bedevil JavaScript at
  the outset.

50
principal features

• It contains instructions for a user agent to
  execute. Javascript is not run by the server.
• It resembles Java, but not the same language.
• It is an object-oriented language.

51
object

• In an object-oriented language, an object is the
  prime focus of attention.
• An object has properties and methods.
• Example from real life. Let an XML element.
• name could be the name of a property. It
  contains the name of the element
• delete_child_element could be the same of a
  method.

52
objects in JavaScript

• Properties are accessed by
• object_name.property_name
• Methods are accessed by
• object_name.method_name()?
• where object_name is the name of an object,
  property_name is the name of a property and
  method_name() is the name of an object. Note the
  use of the dot and the parenthesis.

53
JavaScript history

• A programming language that was developed by
  Netscape for their browser in 1995.
• To counter, Mickeysoft developed Jscript.
• It has been standardized by the European Computer
  Manufacturers Association as ECMA 262.

54
bad reputation

• JavaScript makes you think of a downgraded
  version of Java.
• Its a scripting language found it web pages.
  Its open source at its worse web designers
  rather than programmers
• Incoherent implementation in browsers led to
  branching into pieces of code by browser. Yuck!

55
statements

• A piece of JavaScript is a sequence of
  statements.
• Each statement is ended by a semicolon.
• Example
• var x
• This is a statement that creates a variable
  called x. The x is the name of the variable.
  'var' is a keyword.

56
comments

• You can add comments to your JavaScript writings.
  There are two types of comments.
• If a line starts with // it is a comment. The
  comment goes until the end of the line. Example
• // this is a comment
• Everything between / and / is a comment, even
  if it contains several lines.
• / this is comment and it goes on
• this is still part of the comment /

57
example

• // here is a comment.
• // that was the empty statement.
• / it turns out that JavaScript is not as hard
• as people think /

58
identifiers

• Names of variables, names of functions and names
  of labels are identifiers in JavaScript.
• When you invent a new variable, a new function or
  a new label, you have to give it an identifier by
  which it will be known.
• Identifiers use letters, digits, the underscore
  and the dollar. It can't start with a digit.
  Examples
• i1
• my_variable_name
• str
• These examples are all valid identifiers.

59
keywords

• There are a number of words that can not be used
  as identifiers. Here they are
• abstract boolean break byte case catch char class
  const continue debugger default delete do double
  else enum export extends false final finally
  float for function goto if implements import in
  instanceof int interface long native new null
  package private protected public return short
  static super switch synchronized this throw
  throws transient true try typeof var void
  volatile while with
• "var" is a keyword. It is not an identifier.

60
variables

• In any computer language, variables store values.
• Before you use a variable in JavaScript you have
  to create it. This is done with "var". Example
• var x
• var my_variable
• Above you have seen two meaningful statements.
  Each statement is ended with a semicolon. You
  wont forget that, will you?

61
values of variables

• Once a variable is create with "var", you can
  give it a value with the operator. Example
• var foo // I create a variable "foo"
• foo 3 // now foo takes the value 3
• var bar // I create a variable "bar"
• bar 'hello world' // bar takes the value "hello
  world"

62
variable types

• Variables are used to store data.
• Data can be of different types.
• Primitive types only contain one thing.
• Numbers
• Strings
• Booleans
• Compound types contain several things
• Objects
• Arrays

63
numbers

• Numbers in Javascript use the usual notation of a
  sequence of digits with an optional decimal
  point.
• Examples
• 1
• 1.1
• 0003
• You can also use "scientific" notation with an
  "e" but I have never encountered an occasion
  where I had to do that.

64
strings

• Strings contain chains of characters.
• If you create such a chain, you have to enclose
  it with single or double quotes. Examples
• "I love Riesling."
• "She said 'I love Riesling'."
• 'She said "I love Riesling".'
• "She said \"I love Riesling\"."
• There are some special characters in strings. The
  backslash \ is a special character. In the last
  example, it quotes the double quote to make it
  loose its special meaning.

65
\ escape sequences

• To conveniently include other special characters
  in strings, we can use
• \n for the new line
• \t for the tab
• \" for the double quote
• \' for the single quote
• \\ for the backslash
• \udddd where d is hexadecimal number, for any
  Unicode char with that number.
• There are others, but they are the ones you may
  need.

66
string concatenation

• We can concatenate two strings with
• var start_sentence "I love"
• var end_sentence " my dog."
• var sentence start_sentence end_sentence

67
Boolean

• Booleans are variables that take the values true
  or false, where, as you will remember both true
  and false are keywords.
• You will never have to create a Boolean yourself,
  but here is how you would do it.
• var x
• x true
• Note that this is different from
• x "true"

68
evaluating to Boolean

• Sometimes values of other variable have to be
  evaluated as a Boolean.
• This is particular important when making
  decisions. Decisions take a yes/no value.
• The classic decision making point is the if()?

69
if( cond ) ...

• If executes a block of statements, delimited by
  braces, if a expression cond evaluates to true
• var wine
• if ( wine.grape 'Riesling')
• window.alert ('This is a great wine.')
• Between and you see a block of statements,
  each delimited with a semicolon.
• There is no need for the semicolon after the .

70
if( cond ) ... else ...

• If executes a block of statements, delimited by
  braces, if a condition is true, or else the other
• var wine
• if ( wine.grape 'Riesling')
• window.alert ('This is a great wine.')
• else
• window.alert ('You could do with a better
  wine.')

71
while ( cond ) ...

• Here cond is a value that is evaluated as a
  Boolean. While it is true, it the block of
  statements is executed.
• var count 0
• while ( count lt 3 )
• count count 1
• window.alert( count)

72
Objects

• Objects are compound data types that usually
  represent some real thing. For example
• the browser window
• the document in the browser
• a date

73
constructors

• A constructor is an expression that is used to
  create an object. They are prefixed with 'new' to
  create a new object.
• Object() is a constructor to create an empty
  object.
• var o new Object()
• var time new Date()
• Date() is the constructor for a date.

74
Arrays

• Arrays contain sequences of data that are of a
  primitive type
• hills0'Deidesheimer Herrgottsacker'
• hills1'Bernkasteler Doktor'
• hills2'Wehlener Sonnenuhr'
• the is used to store the sequence.

75
creating arrays

• An array is in fact an object.
• To create an array, we say
• var my_array
• my_array new Array()
• here, "new" is a keyword and Array() is a
  built-in object.
• The example creates an empty array.

76
other ways to create array

• new Array ( number ) where number is a number,
  creates a new array that has number elements.
• You can also create arrays by enumerating the
  elements between square brackets
• var hills
• hills 'Herrgottsacker', 'Wuerzgarten'
• var taste
• taste 90, 94

77
functions

• Functions are ways to group statements together.
  They are one of the most important concepts in
  procedural computing.
• The keyword function creates a function.
• Most functions have a name. Once a function is
  created, it can be invoked by calling its name.
• The keyword 'return' leaves the function to
  return a value. Sometimes that value is of
  interest, sometimes it is not.

78
functions with a name

• I can create function with parameters as
• function name ( parameters ) body
• Example
• function sum ( x , y )
• return x y
• I can then later say
• var x sum(1, 2)
• // x is now equals to 3

79
values

• A value in Javascript is either a literal string
  or number, a variable, an object property, an
  array element or a function invocation.
• Values, on their own are expressions.
• But values can be be combined using operators to
  form more complicated expressions.

80
operators

• We have already seen some operators, without me
  telling you that the are operators
• lt
• new

81
more operators

• checks for equality, ! is not equal
• lt, gt, lt, gt compare numbers
• - / do familiar mathematical operations
• ! means not
• is logical and
• is logical or

82
Important objects in JavaScript

• Javascript is an object-oriented language and
  much of its work is done in objects.
• In fact, an array is a special type of object.
• array.length for example, returns the length of
  the array array.

83
the window object

• This is the top-level object when we interact
  with the web browser.
• It represents the browser window that the user is
  using.
• Here we are studying properties and methods of
  the window object. All of these are globally
  defined. Therefore the word "window" can be left
  out, but we keep it in here.

84
window.alert()?

• window.alert( string ) creates an alert with
  text string to the user.
• window.alert('The wine is now chilled.')
• The message is shown to the user. The user has to
  click an "ok" button to confirm that she has seen
  it.
• How the box looks differs a bit from browser to
  browser.

85
window.status

• window.status string changes the status to the
  string string.
• So you notice this is a property, not a method.
• Most browsers have some status indication. It's
  usually at the bottom of the window.
• window.status "Ein Prosit, ein Prosit"
• This can be useful to provide a little help on
  mouseovers.

86
window.open()?

• window.open( string ) opens a new window at the
  location given by string.
• If string is not a real URL, or there is some
  other error, the browser just sets an error
  message.
• This feature has been abused to the extent that
  browsers now ask for a new window to be open.
• Nowadays it may be a new tab that is opened.
• The window.open function can take other
  arguments.

87
window.close()?

• This closes a window, but normally only a window
  that you opened before.
• var wine_windowwindow.open()
• wine_window.close()
• This restriction was implemented for security
  reasons.

88
window.confirm()

• With window.confirm( mesg ) you can send the
  string mesg to the user and ask to confirm. If
  she accepts, the method returns true, otherwise
  it returns false.
• Example
• if(window.confirm('Did you drink a bottle of
  Riesling?'))
• window.alert( 'You are too drunk to use this
  site.')
• return false

89
window.document

• This is another object, the document object.
• It provides access to a number of functions that
  have been standardized by the W3C as the DOM, the
  Document Object.
• The DOM has many more methods than we can cover
  here, but I will show just a few important ones.

90
API

• An API is "application programming interfaces".
• It's an ugly term, but the idea is nice.
• Many different languages manipulate the same
  objects to do broadly similar things.
• An API define a number of actions one can do on
  these objects

91
DOM scripting

• DOM stands for Document Object Model.
• The DOM is an API for HTML and XML defined by the
  W3C.
• There are two separate versions, of HTML and XML.
• Since we are running with XML, we use that
  version.
• There are a great number of methods and
  properties, I'll show just some important ones.

92
document.getElementById( id )?

• This object returns the element with an id id.
  The id is just given as a string.
• This returns an element object. The element
  object can then be further manipulated with other
  methods.
• var bottle_elementdocument.getElementById('bottle
  ')
• if(! bottle_element)
• alert("There is no element with the id
  'bottle'")

93
document.getElementsByTagName(name)?

• This method returns an array of elements that
  have the same element name name. To reach a
  specific element you need to get
• var as document.getElementsByTagName('a')
• var first_anchoras0
• Each element of the array is an element.

94
element.getAttribute()?

• If you have an element, you can get the
  attributes of the element using getAttribute(
  name ) where name is the name of the attribute
  that you want to get.

95
element.setAttribute()?

• setAttribute( name , value ) can be used to set,
  within the element that it is applied to, the
  value of the attribute with the name name to the
  value value.

96
element.firstChild, element.lastChild

• These are read only property. It finds the first
  or last child of a node.
• Note this may be a whitespace text node child.

97
element.childNodes

• Is an array of nodes that are children of a node.

98
node.nodeValue

• Sets the value of a node. This can be applied to
  any node. Since elements are nodes, it can be
  done to elements as well.
• Example.
• ltpgtThis is not a paragraph.lt/pgt
• How do we change the text in the paragraph?

99
examples with in-HTML code

• fire.html illustrates in-HTML JavaScript
  triggered by a click on a button.
• behave.html shows the opening of a new window
  triggered by a mouseover.
• boring.html has a new window opened by a

100
examples with external functions

• temptation.html
• hello.html shows the writing of document data
  using the DOM.
• form_hint shows manipulation of CSS
• show_me.html has document changes with mouseovers

101
helper functions in main.js

• toggle_class( id, class ) makes sure that the
  element with the id id is in the class class if
  it was not in it before, and removes it it was.
• set_class_if( id , class , bool ) makes sure that
  the element with the id id is in the class class
  or not, depending on the expression bool that is
  evaluated as a Boolean.

102
example form_hints

• form_hints.html is only slightly more complicated
  than form_hint.html. It has several input
  elements with a hint.

103
http//openlib.org/home/krichel

• Thank you for your attention!
• Please shutdown computers when you are done.