Advanced JavaScript dates JavaScript timing events JavaScript - PowerPoint PPT Presentation

Advanced JavaScript Lars Larsson Today JavaScript strings JavaScript Advanced JavaScript dates JavaScript timing events JavaScript Lars Larsson cookies Graceful degradation AJAX Summary Lecture #11

Advanced JavaScript 1 JavaScript strings Lars Larsson Today JavaScript 2 JavaScript dates strings JavaScript dates 3 JavaScript timing events JavaScript timing events JavaScript 4 JavaScript cookies cookies Graceful degradation 5 Graceful degradation AJAX Summary 6 AJAX 7 Summary

Advanced JavaScript JavaScript strings Lars Larsson Today We have used strings during these lectures, but not covered JavaScript strings some of the more advanced functionality. For upcoming JavaScript examples and in general, the following are of interest: dates JavaScript timing events • string1.length — returns the length of string1 (just like JavaScript an Array) cookies • string1.indexOf(string2, startPos?) — returns the Graceful degradation index of the first occurrence of string2 in string1 starting AJAX from startPos , or -1 if string2 is not part of string1 Summary ( startPos may be omitted, hence the question mark) • string1.substr(start, length) — returns the substring starting at index start with the given length The entire set of methods can be found here: http://developer.mozilla.org/en/docs/Core JavaScript 1.5 Reference:Global Objects:String

Advanced JavaScript String examples Lars Larsson Today JavaScript strings JavaScript dates JavaScript var s = "Hello world!"; timing events JavaScript cookies alert(s.length); // 12 Graceful alert(s.indexOf("wor")); // 6 degradation AJAX alert(s.indexOf("abc")); // -1 Summary alert(s.substr(3, 4)); // lo w alert(s.substr(3, 400)); // lo world!

Advanced JavaScript JavaScript dates Lars Larsson Today Dates are represented by Date objects in JavaScript. Internally, JavaScript strings they keep track of the number of milliseconds since midnight of JavaScript January 1, 1970. We use a set of methods like the following to dates manipulate dates: JavaScript timing events JavaScript • get { Hours,Minutes,Seconds,Milliseconds } () — in local cookies time, returns the hour (0–23), minute (0–59), second Graceful degradation (0–59), or millisecond (0–999), respectively AJAX • getYear()/getMonth()/getDate() — in local time, Summary returns the year (browser dependent representation), the month (0–11), and the day (1–31), respectively • getFullYear() — returns the year in four–digit notation • getTime() — returns the number of milliseconds since midnight January 1, 1970

Advanced JavaScript JavaScript dates continued Lars Larsson Today JavaScript strings JavaScript dates JavaScript There are set–versions of all these as well, that take the suitable timing events parameter (so, setFullYear() takes a parameter like 2008). JavaScript cookies Additionally, there are UTC (Universal Time Coordinated) Graceful degradation versions of both the get– and set–versions of the functions. AJAX Simply add UTC to the name, right after get/set (so setDate() Summary becomes setUTCDate()).

Advanced JavaScript JavaScript dates continued Lars Larsson Today JavaScript strings Dates can be represented as strings, and can be parsed from JavaScript strings as well. A Date object can be represented as a string in dates the following ways: JavaScript timing events JavaScript • someDate.toString() — returns a String including time cookies zone information and offset from Greenwich mean time Graceful degradation • someDate.toLocaleString() — returns a String AJAX containing the local time and date formatted according to Summary the visitor’s locale (country) settings • someDate.toUTCString() — returns a String containing the UTC time and date formatted according to the visitor’s locale settings

Advanced JavaScript JavaScript dates Lars Larsson Today JavaScript strings JavaScript To obtain today’s local date and time, we simply create a new dates Date object: JavaScript timing events JavaScript cookies var rightNow = new Date(); Graceful degradation AJAX We can supply parameters to the Date constructor as well, to Summary initialise the object to some other point in time. Read the full specification here: http://developer.mozilla.org/en/docs/Core JavaScript 1.5 Reference:Global Objects:Date

Advanced JavaScript Date example Lars Larsson Today JavaScript strings JavaScript dates JavaScript timing events var rightNow = new Date(); JavaScript cookies rightNow.setMinutes(40); Graceful degradation alert(rightNow.getSeconds()); AJAX alert(rightNow.getHours() - rightNow.getUTCHours()); Summary alert(rightNow.toLocaleString());

Advanced JavaScript JavaScript timing events Lars Larsson Today For timed events (such as, “run the following code in X JavaScript strings milliseconds”), JavaScript offers two functions: JavaScript dates • setTimeout(func, delay, param1?, param2?, ...) — JavaScript timing events calls the function func after delay milliseconds with the JavaScript given (optional) function parameters cookies • setInterval(func, delay, param1?, param2?, ...) — Graceful degradation repeatedly calls the function func after delay milliseconds AJAX with the given (optional) function parameters Summary The return values of these calls are IDs for timers that we can cancel, using the appropriate function: • clearTimeout(timeoutID) — cancels the given timeout • clearInterval(intervalID — cancels the given interval

Advanced JavaScript Example Lars Larsson Today JavaScript strings JavaScript dates JavaScript timing events JavaScript Let us see these functions in an example! cookies Graceful Open example-timers.xhtml and see what it does and study degradation the code. AJAX Summary

Advanced JavaScript Note on timers Lars Larsson Today JavaScript strings Note that we may run into problems if we overwrite the JavaScript dates timeout or interval ID — if it is overwritten, there is no easy JavaScript way of getting it back. The example featured a “safe” interval timing events and an unsafe timeout. Consider the following: JavaScript cookies Graceful degradation interval = setInterval(...) AJAX interval = setInterval(...) Summary clearInterval(interval); Only the second interval is cleared in this case — the first one is still active. This may not be what we intended.

Advanced JavaScript JavaScript cookies Lars Larsson Today JavaScript strings JavaScript dates Due to a design decision, web servers do not keep track of its JavaScript timing events users (this would potentially be very wasteful of resources). JavaScript However, to give users the impression of being recognised as cookies returning visitors, web servers may ask that the web browser Graceful degradation keeps some data stored on behalf of the server. When the AJAX browser opens a page from that same server, the data is passed Summary along, and the server can act appropriately. Such morsels of data are called cookies.

Advanced JavaScript Swedish cookies Lars Larsson Today JavaScript strings JavaScript dates Due to politics, Swedish web sites must inform their visitors if JavaScript timing events they use cookies and for what purpose. Keep this in mind if JavaScript you start creating cookie–enabled sites! cookies Graceful You should also keep in mind that some people are afraid of degradation cookies and disallow them completely (or erase them as the AJAX browser closes). Never rely on cookies for anything, and if you Summary do, state that you are doing so clearly.

Advanced JavaScript Cookie domain scope Lars Larsson Today JavaScript strings Cookies are only accessible from part of the web site. In fact, JavaScript we limit cookies by domain and by path . dates JavaScript A cookie set for the domain “www.asdf.com” will not be timing events accessible on other domains, not even “hello.asdf.com”. A JavaScript cookies cookie set for “asdf.com”, however, will be accessible to both Graceful “www.asdf.com” and “hello.asdf.com”. degradation AJAX A cookie cannot be set for some other domain than the current Summary one (we cannot set a cookie for “asdf.com” unless we actually own that domain and the web page setting the cookie is hosted on it). If we omit specifying the domain, the current one is used by default.

Advanced JavaScript Cookie path scope Lars Larsson Today JavaScript Assume that we have the following folders on our web server: strings JavaScript dates / JavaScript /imageGallery/ timing events /imageGallery/vacationPhotos/ JavaScript cookies /funStuff/ Graceful degradation A cookie set for the path “/” can be read from a page residing AJAX in any of these folders, whereas a cookie with path Summary “/funStuff/” can only be read by pages in that particular folder. Every page that is below the path in the hierarchy can read a cookie for a “higher” path. If we omit specifying a path, the web page’s own path is the default.