1. LIS650 lecture 5 forms, JavaScript and the DOM Thomas Krichel 2009-03-01

2. today More HTML – s and form element – 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/krichel/courses/lis650/e xamples/forms/ Elements used in forms use a special attribute group that I will call the “form attributes”. I will discuss them now.

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

6. submitting a form Data from a form is submitted to a special URL where an file can handle a query. I made such a file at http://wotan.liu.edu/list_input.php A form is submitted when either –a special submit input is activated –the return character is entered over a form element.

7. the action= attribute of To specify the locus of submission, has a required attribute action=. On wotan, you can set action="/list_input.php" to call up the special input form exhibitor script I made for you. In LIS651 you learn how to write your own one.

8. method= of 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.

9. 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.

10. 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=

11. more attributes to 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

12. elements to create controls There are four elements to create controls: – for simple text input – for a choice from a menu – for a text box – for a button The first three can only be used as children of the. is a normal text element. All for accept an attribute group I will call the control attributes.

13. control 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 control, you can set the order. The value of the attribute is a number between 0 and 32767. The control with a lower number will be dealt with before the one with a higher number.

14. control 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.

15. control 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.

16. control attribute: name= The name= attribute sets the name of a control. When the form is submitted the value of the control is labeled with a name. Otherwise the receiving application would not know what the submitted value means. The script that is found by the action= attribute will identify the controls by name. Therefore every control should have a different name.

17. control attribute: accesskey= We are familiar with this attribute from the Since from controls also require navigation around the page, it can be useful to set an accesskey= for them.

18. the control This element creates a simple control. Usually a form has several s as well as text that explains the from. is a replaced element. It is a text level element. Despite the fact that it is a child of the, which is block-level, the requires an extra block level parent.

19. more on admits the core and i18n attribute. It admits the name=, readonly=, disabled=, and tabindex= and accesskey= attributes. It requires a type= attribute.

20. the type= attribute of 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’submit hidden form data, not shown –‘image’submit image map –‘button’ a button

21. the size= attribute of 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.

22. the maxlength= attribute of 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 don’t specify a maximum length there is no limit. But it is good security to have a limit.

23. the value= attribute of This gives the initial value of the. The initial value is shown to the user. value= is optional but should be given for the radio and checkbox type.

24. the checked= attributes of 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.

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

26. the control This control selects from a menu. Each element can have a number of elements that contain the options that the user can choose from. also takes the core, i18n, tabindex=, disabled=, and name= attributes, and some others that we see now.

27. attributes to multiple="multiple" allows multiple selections. I don’t know how they are being transmitted. I have not used this option. size= sets how many rows of the selection should be displayed at any one time. The value has to be a natural number.

28. selectable choice: Within a there are a series of elements that contain the selections. takes the core, i18n and form attributes. Example Bruch Karlsberg

29. value= attribute to value= can be used to set the value of the control when the value set is different than the contents string of the element. Example Brauerei G. A. Bruch, Saarbrücken

30. other attributes to take a label= attribute. If label= is set, the user agent should use label= rather than the content of the element. At least this is what the spec says. Firefox does not seem to agree. selected= can be used to select an option. An can be disabled=.

31. This optional element has elements as its children. It is used for hierarchical menus. But itself can't be nested. It takes the core and i18n attributes. It requires a label= attribute. Baltika 6 Guinness

32. control element: This creates a text area where you can put a chunk of text. It requires two attributes –rows= the number of rows in the box –cols= the number of columns in the box This initial value is a child text node of. It also takes name=, accesskey=, readonly=, disabled= and tabindex=.

33. This is a way to add labels for inputs. –It takes a for= attribute says what control the label is for. You reference the control by its id=. Example: your height: <input id="height_input" name="height" type="text"/> also accepts the accesskey=, core and i18n attributes.

34. control element: This makes a button for decoration. It can appear outside. It requires a label= attribute. It takes a type= attribute that can be either be 'button', 'submit' or 'reset'. It has takes a name= attribute. 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 is an element that calls a script. Interestingly enough, you can place 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 element in the If you don't the validator does not complain, but I don't see other ways to specify the language.

37. example window.open("http://www.google.com");

38. external script 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 see krichel.html

39. automated vs triggered scripts is useful to set up automated scripts. The user has to do nothing to get the script to run. When the browser hits the 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 Roll your mouse over me. Here if the user rolls the mouse over the paragraph, the user is alerted by the browser with the message.

41. event attributes Event attributes can be given to all elements that admit the core attributes 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,,,, and with, an element we don’t 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 onsubmit= occurs when a form is submitted. It only applies to the element. onreset= occurs when a form is reset. It only applies to the element.

47. special event attributes with 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 and 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:,, and.

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. It’s a scripting language found it web pages. It’s 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. 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 won’t forget that, will you?

59. 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.

60. 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.

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 double- quoted 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 wine."; 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. 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 < 3 ) { count = count + 1; window.alert( count) ; } while ( cond ) {... }

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 –hills[0]='Deidesheimer Herrgottsacker'; –hills[1]='Bernkasteler Doktor'; –hills[2]='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 –= –== –< –+ –new

81. more operators == checks for equality, != is not equal, = 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_window=window.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_element=document.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_anchor=as[0]; 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. This is not a paragraph. 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.