Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 9."— Presentation transcript:

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

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

3 3 Review: Forms HTML forms contain text input fields, clickable buttons, select menus, radio buttons, and check boxes All paced inside of the tag A Web page can contain one or multiple forms Form’s use cases

4 4 Review: 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 5 Review: Tag (cont’d) The event attributes  Standard mouse and keyboard event-related attributes onKeyPress, etc onMouseOver, etc  Two special attributes onSubmit onReset Example: formeg1.htmlformeg1.html

6 6 Review: 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 7 Review: Text Fields single line of text  Set type to password to mask text  size and maxlength attributes  value attributes Example: formeg1.htmlformeg1.html

8 8 Review: Multiline Text Area The tag Attributes  cols  rows  wrap Off,virtual,physical Wrap example: form_textarea_wrap.htmlform_textarea_wrap.html Example: formeg1.htmlformeg1.html

9 9 Check Boxes Check boxes for “check all that apply” questions   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.htmlformeg1.html

10 10 Radio Buttons Similar as checkboxes, but only one in the group may be selected  Example: formeg1.htmlformeg1.html

11 11 Multiple Choice Elements The tag creates either pull-down menus or scrolling lists The tag defines each item within a tag tag attributes  size attribute  multiple attribute  name attribute Example: formeg1.htmlformeg1.html

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

13 13 Action Buttons (cont’d) What are they?  Submit buttons  Reset buttons  Regular buttons  Clickable image buttons Example: formeg1.htmlformeg1.html

14 14 HTML Forms Resources HTML Forms tutorial  http://info.netmar.com/creating/forms.html http://info.netmar.com/creating/forms.html HTML Forms and Input  http://www.w3schools.com/html/html_forms.asp http://www.w3schools.com/html/html_forms.asp

15 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.htmlsunflowerlady.html  window.document.sunflowerphoto

16 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 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 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 userinput.html

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

20 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 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 22 Functions (cont’d) Examples  Function takes no input arguments userinput.html (listing 1.3 in JS book) userinput.html  Function takes fixed input arguments func_fixargument.html  Function takes variable input arguments func_argument.html

23 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 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 tag  format type=“text/javascript” language=“JavaScript”  Example: listing2.1.htmllisting2.1.html

25 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 listing2.2.html

26 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 whileloop.html

27 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.htmllisting2.3.html

28 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 29 JavaScript Resource JavaScript Tutorial for Programmers  http://wdvl.internet.com/Authoring/JavaScript/ Tutorial/ http://wdvl.internet.com/Authoring/JavaScript/ Tutorial/

30 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 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.html mylibrary.jslisting2.6.htmlmylibrary.js Usage:

32 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 33 Document Structure The DOM specifies that a document is structured into a tree consisting of nested nodes is at the top/bottom, are its children,, instances are children of, etc Every item in the document is a node with a parent and possibly children

34 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 Hello world p text nodealign

35 35 Visualizing Nodes

36 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 37 Some basic DOM operations document.getElementByID() document.getElementsByTag() document.createNode() document.createTextNode() node.appendChild() node.setAttribute(‘att’,’val’) node.style. =“value”

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

39 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 40 Example 3: Pagewriter Use Javascript to append nodes to a page dynamically at loading. Addresses scaling issue if code is externally linked.


Download ppt "Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 9."

Similar presentations


Ads by Google