Presentation is loading. Please wait.

Presentation is loading. Please wait.

More about JavaScript INE2720 Web Application Software Development Essential Materials.

Published byMelinda Cobb Modified over 9 years ago

Similar presentations

Presentation on theme: "More about JavaScript INE2720 Web Application Software Development Essential Materials."— Presentation transcript:

1 More about JavaScript INE2720 Web Application Software Development Essential Materials

2 INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.2 Outline – Part C Working with Browser Objects Working with Browser Objects –Document Object Model (DOM) Window, document, history, location Objects Window, document, history, location Objects Properties and Methods Properties and Methods –Form Validation Script Creating Cookies in JavaScript Creating Cookies in JavaScript –Constructing a standard cookie –Cookie Property –Interaction with the cookie –Using JavaScript to manipulate HTTP cookies

3 INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.3 Using Browser Objects In the previous lectures, you were introduced to predefined objects in JavaScript In the previous lectures, you were introduced to predefined objects in JavaScript –Math, String, Object, Boolean, Date, … JavaScript also provides you with objects that can control and manipulate the displays of browsers. JavaScript also provides you with objects that can control and manipulate the displays of browsers. –More dynamic and interactive. When a browser loads a webpage, it creates a number of JavaScript objects. When a browser loads a webpage, it creates a number of JavaScript objects.

4 INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.4 Document Object Model (DOM) history DOM is an object-oriented model that describes how all elements in an HTML page are arranged. DOM is an object-oriented model that describes how all elements in an HTML page are arranged. It is used to locate any object in your HTML page (an unique address). It is used to locate any object in your HTML page (an unique address). There are different DOM levels There are different DOM levels –The Level 0 DOM (DOM0) –The Level 1 DOM (DOM1) –The Level 2 DOM (DOM2) –The Level 3 DOM (DOM3) Under development Under development

5 INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.5 How the DOM works? <head><script> function toggle() { document.img.button1.src=“button_on.gif”; } </script></head><body> </body> action reaction ActionEventJavaScriptDOMReaction src= “ button_off.gif ” onmouseovertoggle()document.img.button1Src= “ button_on.gif ” 1)User moves mouse over object 2)Event senses that something happened to the object 3)JavaScript tells the object what to do (Even handler) 4)Locates object on the web page 5)Object ’ s image source is changed

6 INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.6 Browser Hierarchy Model window documentframelocationhistory anchorimageformlink buttoncheckbox select textarea submit radio reset text

7 INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.7 The “ window ” Object It is the highest-level object in the JavaScript browser object hierarchy. It is the highest-level object in the JavaScript browser object hierarchy. It is the default object and is created automatically when a page is loaded. It is the default object and is created automatically when a page is loaded. Since it is the default object, we may omit writing window explicitly. Since it is the default object, we may omit writing window explicitly. –document.write(“a test message”); –window.document.write(“a test message”); It also includes several properties and methods for us to manipulate the webpage. It also includes several properties and methods for us to manipulate the webpage.

8 INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.8 Properties and methods of the “ window ” Object PropertyDescription length An integer value representing the number of frames in the window name A string value containing the name of a window parent A string value containing the name of the parent window status A string value representing status bar text MethodDescriptionalert(text) Pop up a window with “ text ” as the message close() Closes the current window open(url) Open a new window populated by a URL. setTimeout(expression, time) Executes an expression after the elapse of the interval time.

9 INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.9 Example of using the “ window ” Object Opening and closing windows Opening and closing windows Window attributes of the “ open() ” method Window attributes of the “ open() ” method AttributeDescription toolbar Creates the standard toolbar location Creates the location entry field directories Creates standard directory buttons status Creates the status bar menubar Creates the menu bar at the top of a window scrollbars Creates scrollbars when the document exceeds the window size resizable Enables the user to resize the window width Specifies the width of the window height Specifies the height of the window

10 INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.10 The “ document ” Object It is one of the important objects in any window or frame. It is one of the important objects in any window or frame. The document object represents a web document or a page in a browser window. The document object represents a web document or a page in a browser window. When you access multiple sites simultaneously, there would be multiple windows opened. When you access multiple sites simultaneously, there would be multiple windows opened. –Each window would have a corresponding window object, and each window object would have its own document object.

11 INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.11 Properties and methods of the “ document ” Object PropertyDescription bgColor A string value representing the background color of a document alinkColor A string value representing the color for active links location A string value representing the current URL title A string value representing the text specified by tag MethodDescriptionclear() Clears the document window write(content) Writes the text of content to a document writeln() Writes the text and followed by a carriage return open() Open a document to receive data from a write() stream close() Closes a write() stream

12 INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.12 The “ history ” Object Each time you visit a web page and click on the “ Back ” or “ Forward ” arrow buttons on your browser toolbar, you are accessing the history list. Each time you visit a web page and click on the “ Back ” or “ Forward ” arrow buttons on your browser toolbar, you are accessing the history list. You can also add similar buttons / links that allow users to move backward and forward via the information stored in the history object. You can also add similar buttons / links that allow users to move backward and forward via the information stored in the history object.

13 INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.13 Properties and methods of the “ history ” Object PropertyDescription length An integer value representing the number of links in the history object current Contains the URL of the current page next Contains the URL of the next entry in the history list previous Contains the URL of the previous entry in the history list MethodDescriptionback() Sends the user to the previous page in the history list forward() Sends the user to the next page in the history list go(x) Sends back or forward by “ x ” number of pages in the history list

14 INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.14 The “ form ” Object The form object is accessed as a property of the document object. The form object is accessed as a property of the document object. Each form element in a form (text input field, radio buttons), is further defined by other objects. Each form element in a form (text input field, radio buttons), is further defined by other objects. The browser creates a unique “ form ” object for each form in a document. The browser creates a unique “ form ” object for each form in a document. You can access the form object “ form1 ” You can access the form object “ form1 ” –document.form1

15 INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.15 Form Element-Based Objects HTML forms can include eight types of input elements HTML forms can include eight types of input elements –Text fields, Textarea fields –Radio buttons –Check box buttons –Hidden fields –Password fields –Combo box select menu –List select menu –Each object has its own properties and methods.

16 INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.16 Form Validation Script Form Example Form Example function validate() { if (document.form1.yourname.value.length < 1) { if (document.form1.yourname.value.length < 1) { alert("Please enter your full name."); alert("Please enter your full name."); return false; return false; } if (document.form1.address.value.length < 3) { if (document.form1.address.value.length < 3) { alert("Please enter your address."); alert("Please enter your address."); return false; return false; } if (document.form1.phone.value.length < 3) { if (document.form1.phone.value.length < 3) { alert("Please enter your phone number."); alert("Please enter your phone number."); return false; return false; } return true; return true;}</script></head><body> Form Example Form Example Enter the following information. When you press the Display button, the data you entered will be validated, then sent by email. Enter the following information. When you press the Display button, the data you entered will be validated, then sent by email. Name: Name: </p> Address: Address: </p> Phone: Phone: </p> </form></body></html>

17 INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.17 Application: Using JavaScript to Validate CGI Forms 1. Accessing Forms –The document.forms property contains an array of Form entries contained in the document –As usual in JavaScript, named entries can be accessed via name instead of by number, plus named forms are automatically inserted as properties in the document object, so any of the following formats would be legal to access forms var firstForm = document.forms[0]; var firstForm = document.forms[0]; // Assumes // Assumes var orderForm = document.forms["orders"]; var orderForm = document.forms["orders"]; // Assumes // Assumes var registrationForm = document.register; var registrationForm = document.register;

18 INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.18 Application: Using JavaScript to Validate CGI Forms, cont. 2. Accessing Elements within Forms –The Form object contains an elements property that holds an array of Element objects –You can retrieve form elements by number, by name from the array, or via the property name: var firstElement = firstForm.elements[0]; var firstElement = firstForm.elements[0]; // Assumes // Assumes var quantityField = orderForm.elements["quantity"]; var quantityField = orderForm.elements["quantity"]; // Assumes // Assumes var submitButton = register.submitSchedule; var submitButton = register.submitSchedule;

19 INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.19 Checking Form Values Individually, Example On-Line Training On-Line Training <!-- // When the user changes and leaves textfield, check // that a valid choice was entered. If not, alert // user, clear field, and set focus back there. function checkLanguage() { // or document.forms["langForm"].elements["langField"] // or document.forms["langForm"].elements["langField"] var field = document.langForm.langField; var field = document.langForm.langField; var lang = field.value; var lang = field.value; var prefix = lang.substring(0, 4).toUpperCase(); var prefix = lang.substring(0, 4).toUpperCase(); if (prefix != "JAVA") { if (prefix != "JAVA") { alert("Sorry, '" + lang + "' is not valid.\n" + alert("Sorry, '" + lang + "' is not valid.\n" + "Please try again."); "Please try again."); field.value = ""; // Erase old value field.value = ""; // Erase old value field.focus(); // Give keyboard focus field.focus(); // Give keyboard focus }}

20 INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.20 Checking Form Values Individually, Example, cont. // --> </script></head> On-Line Training On-Line Training To see an introduction to any of our on-line training courses, please enter the name of an important Web programming language below. <p><b>Language:</b> <input type=“text" name="langField" onFocus="describeLanguage()" onBlur="clearStatus()" onFocus="describeLanguage()" onBlur="clearStatus()" onChange="checkLanguage()"> onChange="checkLanguage()"><p> </form></body></html>

21 INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.21 Checking Form Values Individually, Results

22 INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.22 Checking Values When Form is Submitted, Example Camp Registration Camp Registration <!-- function isInt(string) { var val = parseInt(string); var val = parseInt(string); return(val > 0); return(val > 0);} function checkRegistration() { var ageField = document.registerForm.ageField; var ageField = document.registerForm.ageField; if (!isInt(ageField.value)) { if (!isInt(ageField.value)) { alert("Age must be an integer."); alert("Age must be an integer."); return(false); return(false); }...... // Format looks OK. Submit form. // Format looks OK. Submit form. return(true); return(true);} // --> </script>

23 INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.23 Checking Values When Form is Submitted, Example, cont. Camp Registration Camp Registration <form action="cgi-bin/register“ name="registerForm" onSubmit="return(checkRegistration())"> onSubmit="return(checkRegistration())"> Age: <input type=“text" name="ageField" onFocus="promptAge()" onBlur="clearStatus()"> onBlur="clearStatus()"> Rank: <input type=“text" name="rankField" onFocus="promptRank()" onBlur="clearStatus()"> onBlur="clearStatus()"> Serial Number: Serial Number: </form></body></html>

24 INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.24 Checking Values When Form is Submitted, Results

25 INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.25 Why we need Cookies? The web servers process requests efficiently because they did not need to maintain any unique requirements for different clients. The web servers process requests efficiently because they did not need to maintain any unique requirements for different clients. Web browsers treat every visit to a web page as an entirely new session, even if users open a different web page on the same server. Web browsers treat every visit to a web page as an entirely new session, even if users open a different web page on the same server. The client information becomes more important for commercial purposes. The client information becomes more important for commercial purposes.

26 INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.26 Cookie Basics When a user closes the browser, the information contained in a hidden form field will be lost. When a user closes the browser, the information contained in a hidden form field will be lost. A cookie is used to store information on the user ’ s computer even when the user switches off his/her computer. A cookie is used to store information on the user ’ s computer even when the user switches off his/her computer. It is a data that is sent from a web server to a web browser when the user visits a site on a server. It is a data that is sent from a web server to a web browser when the user visits a site on a server. –It is just a.txt file in a user ’ s computer.

27 INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.27 Features of Cookies A cookie can be associated with one or more documents on the web server. A cookie can be associated with one or more documents on the web server. More than one cookie can be associated with a document on the web server. More than one cookie can be associated with a document on the web server. Every cookie has a NAME-VALUE pair associated with it. Every cookie has a NAME-VALUE pair associated with it. Cookies have an expiration date associated with them. Cookies have an expiration date associated with them.

28 INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.28 Cookies Applications Web page customization for each user Web page customization for each user Form information storage Form information storage Shopping carts for order information Shopping carts for order information Store userID and password Store userID and password Track how many times the user has visited Track how many times the user has visited Maintain a past score for each player on a test or online games Maintain a past score for each player on a test or online games

29 INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.29 Application: Using JavaScript to Store and Examine Cookies 1. Using document.cookies –Set it (one cookie at a time) to store values document.cookie = "name1=val1"; document.cookie = "name1=val1"; document.cookie = "name2=val2; expires=" + someDate; document.cookie = "name2=val2; expires=" + someDate; document.cookie = "name3=val3; path=/; domain=test.com"; document.cookie = "name3=val3; path=/; domain=test.com"; –Read it (all cookies in a single string) to access values

30 INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.30 Application: Using JavaScript to Store and Examine Cookies 2. Parsing Cookies function cookieVal(cookieName, cookieString) { var startLoc = cookieString.indexOf(cookieName); var startLoc = cookieString.indexOf(cookieName); if (startLoc == -1) { if (startLoc == -1) { return(""); // No such cookie return(""); // No such cookie } var sepLoc = cookieString.indexOf("=", startLoc); var sepLoc = cookieString.indexOf("=", startLoc); var endLoc = cookieString.indexOf(";", startLoc); var endLoc = cookieString.indexOf(";", startLoc); if (endLoc == -1) { // Last one has no ";" if (endLoc == -1) { // Last one has no ";" endLoc = cookieString.length; endLoc = cookieString.length; } return(cookieString.substring(sepLoc+1, endLoc)); return(cookieString.substring(sepLoc+1, endLoc));}

31 INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.31 Cookie, Example <html><head> Widgets "R" Us Widgets "R" Us <!-- function storeCookies() { var expires = "; expires=Monday, 01-Dec-02 23:59:59 GMT"; var expires = "; expires=Monday, 01-Dec-02 23:59:59 GMT"; var first = document.widgetForm.firstField.value; var first = document.widgetForm.firstField.value; var last = document.widgetForm.lastField.value; var last = document.widgetForm.lastField.value; var account = document.widgetForm.accountField.value; var account = document.widgetForm.accountField.value; document.cookie = "first=" + first + expires; document.cookie = "first=" + first + expires; document.cookie = "last=" + last + expires; document.cookie = "last=" + last + expires; document.cookie = "account=" + account + expires; document.cookie = "account=" + account + expires;} // Store cookies and give user confirmation. function registerAccount() { storeCookies(); storeCookies(); alert("Registration Successful."); alert("Registration Successful.");}

32 INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.32 Cookie, Example, cont. function cookieVal(cookieName, cookieString) { var startLoc = cookieString.indexOf(cookieName); var startLoc = cookieString.indexOf(cookieName); if (startLoc == -1) { if (startLoc == -1) { return(""); // No such cookie return(""); // No such cookie } var sepLoc = cookieString.indexOf("=", startLoc); var sepLoc = cookieString.indexOf("=", startLoc); var endLoc = cookieString.indexOf(";", startLoc); var endLoc = cookieString.indexOf(";", startLoc); if (endLoc == -1) { // Last one has no ";" if (endLoc == -1) { // Last one has no ";" endLoc = cookieString.length; endLoc = cookieString.length; } return(cookieString.substring(sepLoc+1, endLoc)); return(cookieString.substring(sepLoc+1, endLoc));} function presetValues() { var firstField = document.widgetForm.firstField; var firstField = document.widgetForm.firstField; var lastField = document.widgetForm.lastField; var lastField = document.widgetForm.lastField; var accountField = document.widgetForm.accountField; var accountField = document.widgetForm.accountField; var cookies = document.cookie; var cookies = document.cookie; firstField.value = cookieVal("first", cookies); firstField.value = cookieVal("first", cookies); lastField.value = cookieVal("last", cookies); lastField.value = cookieVal("last", cookies); accountField.value = cookieVal("account", cookies); accountField.value = cookieVal("account", cookies);} // --> // -->

33 INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.33 Cookie, Example, cont. Widgets "R" Us Widgets "R" Us First Name: First Name: Last Name: Last Name: Account Number: Account Number: Widget Name: Widget Name: </form></body></html>

34 INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.34 Cookie, Example, Result

35 INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.35 References Deitel: Chapter 7 - 12 Deitel: Chapter 7 - 12 CWP: Chapter 24 CWP: Chapter 24 The End. The End. Thank you for patience! Thank you for patience!

Download ppt "More about JavaScript INE2720 Web Application Software Development Essential Materials."

Similar presentations

Chapter 7 JavaScript: Introduction to Scripting. Outline Simple Programs Objects and Variables Obtaining User Input with prompt Dialogs – –Dynamic Welcome.

Chapter 7 JavaScript: Introduction to Scripting. Outline Simple Programs Objects and Variables Obtaining User Input with prompt Dialogs – –Dynamic Welcome.
WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?

WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
JavaScript FaaDoOEngineers.com FaaDoOEngineers.com.

JavaScript FaaDoOEngineers.com FaaDoOEngineers.com.
Computer and Communication Fundamental Basic web programming Lecture 8 Rina Zviel-Girshin.

Computer and Communication Fundamental Basic web programming Lecture 8 Rina Zviel-Girshin.
Lecture 6/2/12. Forms and PHP The PHP $_GET and $_POST variables are used to retrieve information from forms, like user input When dealing with HTML forms.

Lecture 6/2/12. Forms and PHP The PHP $_GET and $_POST variables are used to retrieve information from forms, like user input When dealing with HTML forms.
The Web Warrior Guide to Web Design Technologies

The Web Warrior Guide to Web Design Technologies
JavaScript Forms Form Validation Cookies. What JavaScript can do  Control document appearance and content  Control the browser  Interact with user.

JavaScript Forms Form Validation Cookies. What JavaScript can do  Control document appearance and content  Control the browser  Interact with user.
JavaScript Forms Form Validation Cookies CGI Programs.

JavaScript Forms Form Validation Cookies CGI Programs.
Tutorial 6 Working with Web Forms

Tutorial 6 Working with Web Forms
Information Technology Center Hany Abdelwahab Computer Specialist.

Information Technology Center Hany Abdelwahab Computer Specialist.
Tutorial 6 Working with Web Forms. XP Objectives Explore how Web forms interact with Web servers Create form elements Create field sets and legends Create.

Tutorial 6 Working with Web Forms. XP Objectives Explore how Web forms interact with Web servers Create form elements Create field sets and legends Create.
Web Development & Design Foundations with XHTML Chapter 9 Key Concepts.

Web Development & Design Foundations with XHTML Chapter 9 Key Concepts.
Form Handling, Validation and Functions. Form Handling Forms are a graphical user interfaces (GUIs) that enables the interaction between users and servers.

Form Handling, Validation and Functions. Form Handling Forms are a graphical user interfaces (GUIs) that enables the interaction between users and servers.
CST 200 - JavaScript Validating Form Data with JavaScript.

CST JavaScript Validating Form Data with JavaScript.
Chapter 9 Collecting Data with Forms. A form on a web page consists of form objects such as text boxes or radio buttons into which users type information.

Chapter 9 Collecting Data with Forms. A form on a web page consists of form objects such as text boxes or radio buttons into which users type information.
1 Web Developer & Design Foundations with XHTML Chapter 6 Key Concepts.

1 Web Developer & Design Foundations with XHTML Chapter 6 Key Concepts.
4-Sep-15 HTML Forms Mrs. Goins Web Design Class. Parts of a Web Form A Form is an area that can contain Form Control/Elements. Each piece of information.

4-Sep-15 HTML Forms Mrs. Goins Web Design Class. Parts of a Web Form A Form is an area that can contain Form Control/Elements. Each piece of information.
1 COMM 1213 H1 COMP 4923 X1 JavaScript 2 (Readings: Ch. 12, 13, 14 Knuckles)

1 COMM 1213 H1 COMP 4923 X1 JavaScript 2 (Readings: Ch. 12, 13, 14 Knuckles)
XP Tutorial 6New Perspectives on HTML and XHTML, Comprehensive 1 Creating Web Page Forms Designing a Product Registration Form Tutorial 6.

XP Tutorial 6New Perspectives on HTML and XHTML, Comprehensive 1 Creating Web Page Forms Designing a Product Registration Form Tutorial 6.
Forms and Form Controls Chapter 6. 6.1 What is a Form?

Forms and Form Controls Chapter What is a Form?

Similar presentations

Ads by Google