1 / 40

Introduction to Programming the WWW I

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. Review: Forms. HTML forms contain text input fields, clickable buttons, select menus, radio buttons, and check boxes

griley
Download Presentation

Introduction to Programming the WWW I

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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.

More Related