JS A DVANCED JavaScript Advanced Programming. JS A DVANCED JS Browser Detection JS Cookies JS Form Validation JS Timing JS Create Object.

Slides:



Advertisements
Similar presentations
PHP Form and File Handling
Advertisements

MWD1001 Website Production Using JavaScript with Forms.
Cookies, Sessions. Server Side Includes You can insert the content of one file into another file before the server executes it, with the require() function.
JavaScript FaaDoOEngineers.com FaaDoOEngineers.com.
Java Script Session1 INTRODUCTION.
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.
Ch3: Introduction to HTML5 part 2 Dr. Abdullah Almutairi ISC 340 Fall 2014.
1 Configuring Internet- related services (April 22, 2015) © Abdou Illia, Spring 2015.
© Anselm SpoerriInfo + Web Tech Course Information Technologies Info + Web Tech Course Anselm Spoerri PhD (MIT) Rutgers University
Web Page Behavior IS 373—Web Standards Todd Will.
XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.
CS 299 – Web Programming and Design Overview of JavaScript and DOM Instructor: Dr. Fang (Daisy) Tang.
Web Development & Design Foundations with XHTML Chapter 14 Key Concepts.
ASP Cookies Y.-H. Chen International College Ming-Chuan University Fall, 2004.
Client, Server, HTTP, IP Address, Domain Name. Client-Server Model Client Bob Yahoo Server yahoo.com/finance.html A text file named finance.html.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 14 Key Concepts 1 Copyright © Terry Felke-Morris.
Chapter 25 Utilizing Web Storage.
Client-Side programming with JavaScript 3
PHP Tutorials 02 Olarik Surinta Management Information System Faculty of Informatics.
JavaScript Form Validation
JS: DOM Form Form Object Form Object –The Form object represents an HTML form. –For each instance of a tag in an HTML document, a Form object is created.
Department of Information Technology e-Michigan Web Development 0 HTML Form Creation in the Vignette Content Management Application.
Array Object. he following code creates an Array object called myCars: 1: var myCars=new Array(); // regular array (add an optional integer myCars[0]="Saab";
Introduction to JavaScript Dr. John P. Abraham University of Texas – Pan American.
Comp2513 Forms and CGI Server Applications Daniel L. Silver, Ph.D.
Chapter 6: Forms JavaScript - Introductory. Previewing the Product Registration Form.
 2003 Prentice Hall, Inc. All rights reserved. CHAPTER 3 JavaScript 1.
HTML DOM.  The HTML DOM defines a standard way for accessing and manipulating HTML documents.  The DOM presents an HTML document as a tree- structure.
XHTML Introductory1 Forms Chapter 7. XHTML Introductory2 Objectives In this chapter, you will: Study elements Learn about input fields Use the element.
JavaScript Part 1.
What is Validation Understanding Validation (Different from Verification)
JavaScript Lecture 6 Rachel A Ober
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 14 Key Concepts 1 Copyright © Terry Felke-Morris.
History, Navigator, Screen and Form Objects Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan 1.
Robinson_CIS_285_2005 HTML FORMS CIS 285 Winter_2005 Instructor: Mary Robinson.
CC1003N Week 6 More CSS and Javascript.. Objectives: ● More CSS Examples ● Javascript – introduction ● Uses of Javascript ● Variables ● Comments ● Control.
INTRODUCTION TO JAVASCRIPT AND DOM Internet Engineering Spring 2012.
Web Scripting [PHP] CIS166AE Wednesdays 6:00pm – 9:50pm Rob Loy.
Using Client-Side Scripts to Enhance Web Applications 1.
Introduction to JavaScript 41 Introduction to Programming the WWW I CMSC Winter 2004 Lecture 17.
Client-Side Scripting JavaScript.  produced by Netscape for use within HTML Web pages.  built into all the major modern browsers. properties  lightweight,
1 Chapter 9 – Cookies, Sessions, FTP, and More spring into PHP 5 by Steven Holzner Slides were developed by Jack Davis College of Information Science.
Introduction to Client-Side Web Development Introduction to Client-Side programming using JavaScript JavaScript; application examples 10 th February 2005.
COOKIES and SESSIONS. COOKIES A cookie is often used to identify a user. A cookie is a small file that the server embeds on the user's computer. Each.
1-1 HTTP request message GET /somedir/page.html HTTP/1.1 Host: User-agent: Mozilla/4.0 Connection: close Accept-language:fr request.
IS2802 Introduction to Multimedia Applications for Business Lecture 5: JavaScript, form validation and browser detection Rob Gleasure
MEMBERSHIP AND IDENTITY Active server pages (ASP.NET) 1 Chapter-4.
ECMM6018 Enterprise Networking for Electronic Commerce Tutorial 7
HTML 5 Tutorial Chapter 6 Web Storage. Storing Data on The Client HTML5 offers two new objects for storing data on the client: localStorage - stores data.
HTML Overview Part 5 – JavaScript 1. Scripts 2  Scripts are used to add dynamic content to a web page.  Scripts consist of a list of commands that execute.
Making dynamic pages with javascript Lecture 1. Java script java versus javascript Javascript is a scripting language that will allow you to add real.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 14 Key Concepts 1 Copyright © Terry Felke-Morris.
 A cookie is often used to identify a user. A cookie is a small file that the server embeds on the user's computer. Each time the same computer requests.
Working with the Window Object JavaScript considers the browser window an object, which it calls the window object.
Web Page Designing With Dreamweaver MX\Session 1\1 of 9 Session 3 PHP Advanced.
Unit-6 Handling Sessions and Cookies. Concept of Session Session values are store in server side not in user’s machine. A session is available as long.
Client-side (JavaScript) Validation. Associating a function with a click event – Part 1 Use the input tag’s onclick attribute to associate a function.
Javascript Javascript The JavaScript Programming Language – Scripting Languages Executed by an interpreter contained within.
CHAPTER 10 JAVA SCRIPT.
Web Development & Design Foundations with HTML5
Web Development & Design Foundations with HTML5 7th Edition
Fix Yahoo Mail Error 14 Call Yahoo Support
Web Programming– UFCFB Lecture 17
Configuring Internet-related services
The Web Wizard’s Guide To JavaScript
JavaScript Form Validation
Introduction to JavaScript
Web Development & Design Foundations with H T M L 5
Tutorial 10: Programming with javascript
Presentation transcript:

JS A DVANCED JavaScript Advanced Programming

JS A DVANCED JS Browser Detection JS Cookies JS Form Validation JS Timing JS Create Object

J AVA S CRIPT B ROWSER D ETECTION Almost everything in this tutorial works on all JavaScript-enabled browsers. However, there are some things that just don't work on certain browsers - especially on older browsers. Sometimes it can be useful to detect the visitor's browser, and then serve the appropriate information. The Navigator object contains information about the visitor's browser name, version, and more. Note: There is no public standard that applies to the navigator object, but all major browsers support it.

T HE N AVIGATOR O BJECT txt = " Browser CodeName: " + navigator.appCodeName + " "; txt+= " Browser Name: " + navigator.appName + " "; txt+= " Browser Version: " + navigator.appVersion + " "; txt+= " Cookies Enabled: " + navigator.cookieEnabled + " "; txt+= " Platform: " + navigator.platform + " "; txt+= " User-agent header: " + navigator.userAgent + " "; document.getElementById("example").innerHTML=txt;

W HAT IS A C OOKIE ? A cookie is a variable that is stored on the visitor's computer. Each time the same computer requests a page with a browser, it will send the cookie too. With JavaScript, you can both create and retrieve cookie values. Examples of cookies: Name cookie - The first time a visitor arrives to your web page, he or she must fill in her/his name. The name is then stored in a cookie. Next time the visitor arrives at your page, he or she could get a welcome message like "Welcome John Doe!" The name is retrieved from the stored cookie Password cookie - The first time a visitor arrives to your web page, he or she must fill in a password. The password is then stored in a cookie. Next time the visitor arrives at your page, the password is retrieved from the cookie Date cookie - The first time a visitor arrives to your web page, the current date is stored in a cookie. Next time the visitor arrives at your page, he or she could get a message like "Your last visit was on Tuesday August 11, 2005!" The date is retrieved from the stored cookie

C REATE AND S TORE A C OOKIE function setCookie(c_name,value,exdays) { var exdate=new Date(); exdate.setDate(exdate.getDate() + exdays); var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString()); document.cookie=c_name + "=" + c_value; }

R ETURN A C OOKIE function getCookie(c_name) { var i,x,y,ARRcookies=document.cookie.split(";"); for (i=0;i<ARRcookies.length;i++) { x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("=")); y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1); x=x.replace(/^\s+|\s+$/g,""); if (x==c_name) { return unescape(y); } } }

C HECK C OOKIE function checkCookie() { var username=getCookie("username"); if (username!=null && username!="") { alert("Welcome again " + username); } else { username=prompt("Please enter your name:",""); if (username!=null && username!="") { setCookie("username",username,365); } } }

J AVA S CRIPT F ORM V ALIDATION JavaScript can be used to validate data in HTML forms before sending off the content to a server. Form data that typically are checked by a JavaScript could be: has the user left required fields empty? has the user entered a valid address? has the user entered a valid date? has the user entered text in a numeric field?

R EQUIRED F IELDS function validateForm() { var x=document.forms["myForm"]["fname"].value if (x==null || x=="") { alert("First name must be filled out"); return false; } }

E- MAIL V ALIDATION function validateForm() { var x=document.forms["myForm"][" "].value var var dotpos=x.lastIndexOf("."); if (atpos =x.length) { alert("Not a valid address"); return false; } }

D ATE V ALIDATION function validateForm() { var x=document.forms["myForm"][“date"].value var today=new Date(); if (x>today) { alert(“Date in the furture"); return false; } } First name:

J AVA S CRIPT T IMING E VENTS With JavaScript, it is possible to execute some code after a specified time-interval. This is called timing events. The two key methods that are used are: setTimeout() - executes a code some time in the future clearTimeout() - cancels the setTimeout() Note: The setTimeout() and clearTimeout() are both methods of the HTML DOM Window object.

T HE SET T IMEOUT () M ETHOD function timeMsg() { var t=setTimeout("alertMsg()",3000); } function alertMsg() { alert("Hello"); }

I NFINITE L OOP var c=0; var t; var timer_is_on=0; function timedCount() { document.getElementById('txt').value=c; c=c+1; t=setTimeout("timedCount()",1000); } function doTimer() { if (!timer_is_on) { timer_is_on=1; timedCount(); } }

T HE CLEAR T IMEOUT () M ETHOD var c=0; var t; var timer_is_on=0; function timedCount() { document.getElementById('txt').value=c; c=c+1; t=setTimeout("timedCount()",1000); } function doTimer() { if (!timer_is_on) { timer_is_on=1; timedCount(); } } function stopCount() { clearTimeout(t); timer_is_on=0; }

C REATE Y OUR O WN J AVA S CRIPT O BJECTS function person(firstname,lastname,age,eyecolor) { this.firstname=firstname; this.lastname=lastname; this.age=age; this.eyecolor=eyecolor; } var myFather=new person("John","D",50,"blue"); var myMother=new person("Sally",“D",48,"green");