LIS650 lecture 5forms, JavaScript and the DOM

Thomas Krichel

2009-03-01

today

• More HTML– <form>s and form element

– <script> and event attributes

• basics of JavaScript• the DOM in JavaScript• JavaScript and CSS

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.

forms examples

• Here is an example in http://wotan.liu.edu/home/krichel/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.

<form>• This element encloses a form. It is a block level

element. All form elements (discussed now) should be children of the <form> element.

• Technically can be more than one <form> in the HTML page.

• But it does not make much sense to have several <form>s.

• <form> accepts the core and i18n attributes. And it has some other attributes. Some of these are required.

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.

the action= attribute of <form>

• To specify the locus of submission, <form> 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.

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

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.

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=

more attributes to <form>

• 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

elements to create controls

• There are four elements to create controls:– <input/> for simple text input

– <select/> for a choice from a menu

– <textarea/> for a text box

– <button/> for a button

• The first three can only be used as children of the <form>. <button/> is a normal text element.

• All for accept an attribute group I will call the control attributes.

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.

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.

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.

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.

control attribute: accesskey=

• We are familiar with this attribute from the <a>

• Since from controls also require navigation around the page, it can be useful to set an accesskey= for them.

the <input/> control

• This element creates a simple control. Usually a form has several <input/>s as well as text that explains the from.

• <input/> is a replaced element.

• It is a text level element.

• Despite the fact that it is a child of the <form>, which is block-level, the <input/> requires an extra block level parent.

more on <input/>

• <input/> admits the core and i18n attribute.

• It admits the name=, readonly=, disabled=, and tabindex= and accesskey= attributes.

• It requires a type= attribute.

the type= attribute of <input/>• 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

the size= attribute of <input/>

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

the maxlength= attribute of <input/>

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

the value= attribute of <input/>

• This gives the initial value of the <input/>.

• The initial value is shown to the user.

• value= is optional but should be given for the radio and checkbox type.

the checked= attributes of <input/>

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

the src= attribute of <input/>

• When the input is of type 'image' the src= attribute gives the URL of the image.

• This is for input using image maps.

the <select> control

• This control selects from a menu.

• Each <select> element can have a number of <option> elements that contain the options that the user can choose from.

• <select> also takes the core, i18n, tabindex=, disabled=, and name= attributes, and some others that we see now.

attributes to <select>

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

selectable choice: <option>

• Within a <select> there are a series of <option> elements that contain the selections.

• <option> takes the core, i18n and form attributes. Example

<select name="brewery">

<option>Bruch</option>

<option>Karlsberg</option>

</select>

value= attribute to <option>

• value= can be used to set the value of the control when the value set is different than the contents string of the <option/> element.

• Example

<option value="bruch">Brauerei G. A. Bruch, Saarbrücken</option>

other attributes to <option>

• <option> take a label= attribute. If label= is set, the user agent should use label= rather than the content of the <option> element. At least this is what the spec says. Firefox does not seem to agree.

• selected= can be used to select an option.

• An <option> can be disabled=.

<optgroup>• This optional element has <option> 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. <optgroup label="dark">

<option value="b6">Baltika 6</option>

<option value="gu">Guinness</option>

</optgroup>

control element: <textarea>

• 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 <textarea>.

• It also takes name=, accesskey=, readonly=, disabled= and tabindex=.

<label>

• 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:

<label for="height_input">your height:</label> <input id="height_input" name="height"

type="text"/>

• <label> also accepts the accesskey=, core and i18n attributes.

control element: <button> • This makes a button for decoration.

• It can appear outside <form>.

• 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!

the <script>

• <script> is an element that calls a script.• Interestingly enough, you can place <script> 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.

default script language

• You should set the default scripting language used in the document using the <meta/> element in the <head>

• <meta http-equiv="content-script-type" content="text/javascript"/>

• If you don't the validator does not complain, but I don't see other ways to specify the language.

example

<script type="text/javascript">

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

</script>

external script

• <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 <script type="text/javascript" src="krichel.js"></script>

• see krichel.html

automated vs triggered scripts

• <script> is useful to set up automated scripts. The user has to do nothing to get the script to run. When the browser hits the <script> 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.

triggering script example

• Example <p onmouseover="alert('Thank you. That feels

good!')">Roll your mouse over me.</p>

• Here if the user rolls the mouse over the paragraph, the user is alerted by the browser with the message.

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.

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.

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.

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.

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 <a>, <button>, <label>, <textarea>, and with <area>, 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.

special event attributes with <form>

• onsubmit= occurs when a form is submitted. It only applies to the <form> element.

• onreset= occurs when a form is reset. It only applies to the <form> element.

special event attributes with <body>

• onload= occurs when the user agent finishes loading a document.

• onunload= occurs when the user agent removes a document from a window.

special event attributes for controls

• onselect= occurs when a user selects some text in a text field. This attribute may be used with the <input> and <textarea> 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: <input>, <select>, and <textarea>.

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.

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.

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.

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.

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.

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!

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.

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 */

example

// here is a comment.

;

// that was the empty statement.

/* it turns out that JavaScript is not as hard

as people think */

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?

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.

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.

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"

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

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.

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.

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

string concatenation

• We can concatenate two strings with +var start_sentence = "I love";

var end_sentence = " my wine.";

var sentence = start_sentence + end_sentence;

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";

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()

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

if( cond ) { ... } else { ... }

• If executes a block of statements, delimited by braces, if a condition is true, or else the othervar wine;

if ( wine.grape == 'Riesling') {

window.alert ('This is a great wine.');

}

else {

window.alert ('You could do with a better wine.');

}

• 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 ) { ... }

Objects

• Objects are compound data types that usually represent some real thing. For example– the browser window

– the document in the browser

– a date

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.

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.

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.

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 bracketsvar hills;

hills = [ 'Herrgottsacker', 'Wuerzgarten'];

var taste;

taste = [ 90, 94 ];

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.

functions with a name

• I can create function with parameters as function name ( parameters ) { body }

• Examplefunction sum ( x , y ) {

return x + y;

}

• I can then later say var x = sum(1, 2) ;

// x is now equals to 3

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.

operators

• We have already seen some operators, without me telling you that the are operators– =

– ==

– <

– +

– new

more operators

• == checks for equality, != is not equal

• <, >, <=, >= compare numbers

• + - * / do familiar mathematical operations

• ! means not

• && is logical and

• || is logical or

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.

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.

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.

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.

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.

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.

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.

• Exampleif(window.confirm('Did you drink a bottle of Riesling?')) {

window.alert( 'You are too drunk to use this site.');

return false;

}

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.

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

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.

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'");

}

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 getvar as = document.getElementsByTagName('a');

var first_anchor=as[0];

• Each element of the array is an element.

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.

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.

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.

element.childNodes[]

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

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.<p>This is not a paragraph.</p>

• How do we change the text in the paragraph?

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

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

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.

example: form_hints

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

http://openlib.org/home/krichel

Thank you for your attention!

Please shutdown computers when you are done.