{"id":1230,"date":"2013-09-25T16:57:01","date_gmt":"2013-09-25T15:57:01","guid":{"rendered":"http:\/\/meier-online.com\/?p=1230"},"modified":"2014-03-02T17:27:29","modified_gmt":"2014-03-02T16:27:29","slug":"webapp-javascript-incompabilities","status":"publish","type":"post","link":"https:\/\/meier-online.com\/en\/2013\/09\/webapp-javascript-incompabilities\/","title":{"rendered":"JavaScript Incompatibilities in Webapps"},"content":{"rendered":"<p>Below, I present some stumbling blocks that I met during developing a mobile, cross-platform, JavaScript-based WebApp.<!--more--><\/p>\n<h3>Loading and Saving Dates<\/h3>\n<p>Virtually all modern browsers are implementing \u201clocal storage\u201d, a service to store data locally on the device. The localStorage object implements a so-called key-value store. That works cross-platform amazingly well.<\/p>\n<p>We want to store a date, so we need to transform the date into a string first. To read it back, we need to convert the string to a date object back again. Because JavaScript has a date object since the last century, you expect that it to provides the appropriate functions.<\/p>\n<p>Surprisingly, the standard methods such as date.parse() are not very helpful. The only defined date format is RFC2822, but this format is optimized for English-language people. A date in this format will look like this:<\/p>\n<p><em>\u201cMon, 31 Dec 1995 12:30:00\u201d<\/em><\/p>\n<p>A much better format is defined in ISO 8601. Dates will look like this: &#8220;<em>YYYY-MM-DDThh:mmTZD<\/em>&#8220;.<\/p>\n<p>The complexity is much lower. No month names or week day names must be parsed, and the fields are in a fixed position. So it is much easier to read and write for computers.<\/p>\n<p>Nevertheless, a call to date.parse() with an ISO date does not work in many devices: in my tests, I got errors on devices with Android 2.1 and 2.3, as well as with a BlackBerry OS6 device. The reverse method Date.toISOString() is also missing. ISO-dates are officially supported only since JavaScript 1.8.5 or ECMAScript version 5.<\/p>\n<h3>Dialogs and the prompt-method<\/h3>\n<p>JavaScript offers built-in functions for simple dialogs:<\/p>\n<ul>\n<li>alert()<\/li>\n<li>confirm()<\/li>\n<li>prompt()<\/li>\n<\/ul>\n<p>The dialogs of this methods are presented in the correct platform-specific design automatically. Since there are modal dialogs, the application logic becomes trivial. If we want to ask the user for a string, this simple program line is enough:<\/p>\n<p>username = prompt(&#8216;Your username&#8217;);<\/p>\n<p>However, Microsoft decided that the prompt-method is a security problem. Because of this, prompt() is<a title=\"Microsoft note about javascript prompt\" href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/ms536673.aspx\" target=\"_blank\"> no longer supported<\/a> in Internet Explorer starting with version 7 (in the default setting), and also not in Windows Mobile.<\/p>\n<p>Annoying is that the Windows Mobile browser suppresses the dialog &#8220;secretly&#8221;. We can not distinguish the result of the suppressed prompt()-call from an empty user input, and so we can no longer react and offer alternatives for text input. So we need to do the unpopular &#8220;browser sniffing&#8221; again.<\/p>","protected":false},"excerpt":{"rendered":"<p class=\"qtranxs-available-languages-message qtranxs-available-languages-message-en\">Sorry, this entry is only available in <a href=\"https:\/\/meier-online.com\/de\/wp-json\/wp\/v2\/posts\/1230\" class=\"qtranxs-available-language-link qtranxs-available-language-link-de\" title=\"Deutsch\">Deutsch<\/a>.<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[106,104],"tags":[186,150,100],"class_list":["post-1230","post","type-post","status-publish","format-standard","hentry","category-mobile","category-develop","tag-android","tag-javascript","tag-webapp","entry"],"_links":{"self":[{"href":"https:\/\/meier-online.com\/en\/wp-json\/wp\/v2\/posts\/1230"}],"collection":[{"href":"https:\/\/meier-online.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meier-online.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meier-online.com\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/meier-online.com\/en\/wp-json\/wp\/v2\/comments?post=1230"}],"version-history":[{"count":12,"href":"https:\/\/meier-online.com\/en\/wp-json\/wp\/v2\/posts\/1230\/revisions"}],"predecessor-version":[{"id":1594,"href":"https:\/\/meier-online.com\/en\/wp-json\/wp\/v2\/posts\/1230\/revisions\/1594"}],"wp:attachment":[{"href":"https:\/\/meier-online.com\/en\/wp-json\/wp\/v2\/media?parent=1230"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meier-online.com\/en\/wp-json\/wp\/v2\/categories?post=1230"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meier-online.com\/en\/wp-json\/wp\/v2\/tags?post=1230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}