Introduction to Programming the WWW I

1. Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 9

2. Topics Today • Forms (cont’d) • JavaScript Introduction (cont’d) • Introduction to DOM

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

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

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

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

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

8. Review:Multiline Text Area • The <textarea> tag • Attributes • cols • rows • wrap • Off,virtual,physical • Wrap example: form_textarea_wrap.html • Example: formeg1.html

9. Check Boxes • Check boxes for “check all that apply” questions • <input type=checkbox name=XXX value=XXX> • Makesure name identical among a group of checkboxes • Checked attribute • When form is submitted, names and values of checked boxes are sent • Example: formeg1.html

10. Radio Buttons • Similar as checkboxes, but only one in the group may be selected • <input type=radio name=XXX value=XXX> • Example: formeg1.html

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

12. Action Buttons • Some special types of form controls • Act immediately • Effect can not be reversed • Affect the entire content of the form

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

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

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

16. 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;

17. 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”;

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

19. Assignment Operators • Equal sign (“=“) • With assignment operators, we can change the values of variables: var mynumber; mynumber = 42; mynumber += 37; mynumber -= 28;

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

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

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

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

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

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

26. Loops (cont’d) • The while loop • Format: while ( condition ) { statements;} • Example code: • i=5; while (i>1){ …; i-=1; } • Example Web page: • whileloop.html

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

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

29. JavaScript Resource • JavaScript Tutorial for Programmers • http://wdvl.internet.com/Authoring/JavaScript/Tutorial/

30. Where to Placing Scripts • Scripts can go in the HEAD or the BODY • Event handlers in BODY send values to functions in HEAD

31. 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.htmlmylibrary.js Usage: <script type="text/javascript" language=“JavaScript" src="mylibrary.js">

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

33. Document Structure • The DOM specifies that a document is structured into a tree consisting of nested nodes • <html> is at the top/bottom, <head><body> are its children, <p>,<h1> instances are children of <body>, etc • Every item in the document is a node with a parent and possibly children

34. More about nodes • Element nodes: • Each tag is an element node • Text nodes (text contained by element nodes) • Text nodes may contain further children • Attribute nodes (align=“center”) • Attributes and text are children nodes of the node containing it <p align=“center”> Hello world</p> p align text node

35. Visualizing Nodes

36. Manipulating nodes • JavaScript has a DOM API (application programmer interface) that allows us to access, look at, and edit attribute nodes. • Every element node has a style child, and this can also be edited to control everything!

37. Some basic DOM operations • document.getElementByID() • document.getElementsByTag() • document.createNode() • document.createTextNode() • node.appendChild() • node.setAttribute(‘att’,’val’) • node.style.<property>=“value”

38. Example 1: Image rollover • Use the “onMouseOver” attribute to call some functions • These functions get the element and set the attribute

39. Example 2: Updating style • change alignment, color, and size through Javascript buttons • Note that when CSS properties are hyphenated (e.g. text-algin), Javascript refers to them with the dash removed and the next letter capitalized (e.g. textAlign)

40. Example 3: Pagewriter • Use Javascript to append nodes to a page dynamically at loading. • Addresses scaling issue if code is externally linked.