Introduction to Programming the WWW I CMSC 10100 01 Summer 2003 Lecture 9 Topics Today Forms cont d JavaScript Introduction cont d Introduction to DOM 2 Review Forms HTML forms contain text input fields clickable buttons select menus radio buttons and check boxes All paced inside of the form tag A Web page can contain one or multiple forms Form s use cases 3 Review form Tag action attribute Gives the URL of the application to receive and process the form s data action mailto XXX method attribute Sets the method by which the browser sends the form s data to the server GET and POST enctype attribute Browser encodes the form s data before it passes that data to server text plian name attribute 4 Review form Tag cont d The event attributes Standard mouse and keyboard event related attributes onKeyPress etc onMouseOver etc Two special attributes onSubmit onReset Example formeg1 html 5 Review input Tag To define any one of a number of common form controls Text fields multiple choice lists Clickable images Submission buttons Only type and name attribute required 6 Review Text Fields single line of text input type text name XXX Set type to password to mask text size and maxlength attributes value attributes Example formeg1 html 7 Review Multiline Text Area The textarea tag Attributes cols rows wrap Off virtual physical Wrap example form textarea wrap html Example formeg1 html 8 Check Boxes Check boxes for check all that apply questions input type checkbox name XXX value XXX Make sure name identical among a group of checkboxes Checked attribute When form is submitted names and values of checked boxes are sent Example formeg1 html 9 Radio Buttons Similar as checkboxes but only one in the group may be selected input type radio name XXX value XXX Example formeg1 html 10 Multiple Choice Elements The select tag creates either pull down menus or scrolling lists The option tag defines each item within a select tag select tag attributes size attribute multiple attribute name attribute Example formeg1 html 11 Action Buttons Some special types of form controls Act immediately Effect can not be reversed Affect the entire content of the form 12 Action Buttons cont d What are they Submit buttons input type submit name XXX value XXX Reset buttons input type reset name XXX value XXX Regular buttons input type button name XXX value XXX Clickable image buttons input type image name XXX src XXX Example formeg1 html 13 HTML Forms Resources HTML Forms tutorial http info netmar com creating forms html HTML Forms and Input http www w3schools com html html forms asp 14 JavaScript Review Object Properties have values can be accessed set etc Actions methods Object instance Everything in the Web page is modeled by an object Example page sunflowerlady html window document sunflowerphoto 15 More JavaScript Variables Definition a name that stands for some other value like x in algebra Examples local variable var myColor pink global variable window document bgColor myColor 16 Arrays An array is a collection of variables in some particular order Index starts from 0 not 1 Example var mycolors new Array mycolors 0 red mycolors 1 pink mycolors 2 blue 17 Methods Dogs bark cats pur cars slow down document write Hello world Lots of predefined methods for manipulating Web pages we ll also learn how to define our own Methods usually trigged by events userinput html 18 Assignment Operators Equal sign With assignment operators we can change the values of variables var mynumber mynumber 42 mynumber 37 mynumber 28 19 Comparison equality operator 39 30 9 True greater than operator 39 39 True non equality operator 2 2 False OR statement 2 2 3 5 True AND statement 3 4 7 7 False 20 Functions You can write functions to perform specific tasks where the input might be different Format function funcName argument1 argument2 etc Statements Function arguments Pass directly Arguments number fixed Access from an array funcName arguments Good to handle variable arguments 21 Functions cont d Examples Function takes no input arguments userinput html listing 1 3 in JS book Function takes fixed input arguments func fixargument html Function takes variable input arguments func argument html 22 Fundamental Concepts Summary Objects The nouns of the language Instances incarnations of objects Properties attributes of objects Values content for properties Events and Events Handlers Variables containers for data Arrays ordered collections of data Methods The verbs of the language Operators Assignment versus Comparison Functions groups of statements 23 Sequence Doing Things in a Given Order Example start a car Browsers execute statements in the order they are received Statements are placed in the HEAD within the script script tag script format type text javascript language JavaScript Example listing2 1 html 24 Loops Doing things repeatedly The for loop Initial expression Test condition Update expression Example code for i 5 i 1 i Example Web page listing2 2 html 25 Loops cont d The while loop Format while condition statements Example code i 5 while i 1 i 1 Example Web page whileloop html 26 Conditional Branching Code that makes decisions The if else structure Test a condition One set of statements if condition is true Another set of statements if condition is false Take care to not confuse assignment with equality Example page listing2 3 html 27 Comments Single line comments precede the line with two backslashes A single line comment Multi line comment block begin the comment with and close with A dense thicket of commentary spanning many captivating lines of explanation and intrigue 28 JavaScript Resource JavaScript Tutorial for Programmers http wdvl internet com Authoring JavaScript Tutorial 29 Where to Placing Scripts Scripts can go in the HEAD or the BODY Event handlers in BODY send values to functions in HEAD 30 Code Libraries Reuse your favorite scripts Store code libraries in plain text files Use the js extension for code libraries Reference your source libraries using the script tag Example listing2 6 html mylibrary js Usage script type text javascript language JavaScript src mylibrary js 31 The DOM DOM is Document Object Model The DOM provides an abstract description document structure operations on a document The DOM describes several markup languages not just HTML Vendors support this model to make Web pages interoperable The W3C DOM1 replaces proprietary DOMs from Netscape and Microsoft 32 Document Structure The DOM specifies that a document