TAMZ I (Design of Applications for Mobile Devices I)
Lecture 3
JS DOM/BOM HTML5 – part 1 JavaScript
Browser Object Model Document Object Model Browser O. M. – Window object (1)
Window – browser window, default, references other objs Obj.: document, frames, history, location, navigator, screen Attributes providing/setting browser window parameters closed (closed window?), length (number of (i-)frames), innerHeight/innerWidth (window content sizes) outerHeight/outerWidth (window dimension incl. toolbars and scrollbars), screenX/screenY (relative window position to screen), pageXOffset/ pageYOffset (pixel position scrolled from TL corner) name (window name) opener (window, which opened this one), parent (parent window), self (current window), top (topmost window) Browser O.M. – Window object (2) Window methods, directly accessible in code alert(msg) – alert message with OK button confirm() – confirmation message with OK+Cancel buttons prompt(text, default_val) – prompts for user input with a dialog (OK/Cancel), returns string with input or null (cancel) open()/focus()/blur()/close() - Open/Focus/Unfocus/Close current window, may be blocked (e.g.close) or unavailable btoa()/atob() - Encodes/Decodes a base-64 string moveBy(dx,dy)/moveTo(x,y)/resizeBy(dw,dh)/resizeTo(w,h) change window dimensions scrollBy(dx,dy)/scrollTo(x,y) - scrolls content of the window stop() – stops loading of the the window print() – prints the content of this window setTimeout(fn, ms)/clearTimeout(id) – delayed execution setInterval(function, ms)/clearInterval(id) – repeated timer Browser Object Model – Objects Several objects accessing browser info/current location Navigator – information about the web browser appCodeName (e.g. Mozilla), appName (e.g. Netscape), appVersion (e.g. 5.0 (additional info)), product (engine), platform (e.g. Linux x86_64), userAgent (full UA string) cookieEnabled (check cookie support), onLine (is online?) language (default language of the browser, e.g. cs javaEnabled() – check Java support in browser History – access browser history Methods: back(), forward(), go(+/-index), Attribute: length Location – get/update document's URL Methods: assign(new_URL), reload(), replace(repl_URL) Attributes: protocol, host, port, pathname, hostname (server:port), origin (http://hostname) hash (#xyz), search (?xyz), href (protocol://host:port/pathnamehashsearch) Screen – screen view parameters availHeight/availWidth – screen sizes (without taskbar), width/height – total screen sizes, colorDepth (BPP) The document Object Provides access to individual parts of HTML document Properties for accessing individual parts document.anchors, .links, .images, .forms document.cookie, .implementation (object), .applets Global document properties baseURI, documentURI, URL, domain, inputEncoding title, referrer (the document which lead here), lastModified doctype (object with document parameters) readyState (uninitialized/loading/interactive/complete) document.documentElement (the whole ), .body getElementsByName("x") – all form elements with name x Methods for HTML document manipulation open(MIME,repl_hist)/close() – output HTML stream write(), writeln() - write HTML or JS code to the document importNode(n, desc) – import node n from other document createDocumentFragment() – empty fragment for DOM createElement()/createTextNode()/createComment()/createAttribute() DOM – Elements, whole Document
Accessing document elements var x = document.getElementById("id1"); //
) for example, replace first item in first unordered list
var list=document.getElementsByTagName("ul")[0]; list.getElementsByTagName("li")[0].innerHTML="Replaced I1";
Document manipulation: normalize() – deletes empty text nodes, joins adjacent nodes
Note: The DOM slides are mainly for reference, we will use mainly jQuery for DOM manipulation DOM – Element (1)
Attributes of Element object R/W access to standard set of attributes and content: accessKey, className, dir, id, lang, tabIndex, style, title nodeValue – value of form elements, innerHTML – inside of the element, textContent – text without formatting Arrays of objects: attributes, childNodes Navigation: firstChild, lastChild, nextSibling, previousSibling parentNode, ownerDocument (root element) namespaceURI, tagName/nodeName, nodeType (1 - element) Dimensions: offsetHeight/offsetWidth – element size, clientHeight/ clientWidth – viewable,offsetLeft, offsetTop, offsetParent scrollHeight/scrollWidth – entire size, scrollTop/scrollLeft - distance of element from top/left edge of the view DOM – Element (2)
Methods of Element object Feature/parameters verification: isDefaultNamespace() hasAttribute(name)/hasAttributes()/hasChildNodes() isEqualNode()/isSameNode()/isSupported() Attribute manipulation getAttribute(name) – just text, getAttributeNode() – node setAttribute(), setAttributeNode(), setIdAttributeNode() removeAttribute()/removeAttributeNode() User data key/element: getUserData()/setUserData() Node manipulation: appendChild() – adds a new lastChild, cloneNode(deep_c) insertBefore(new, existing) – insert new node after existing n1.compareDocumentPosition(n2) – position n2 from n1 toString() Child node list – attribute length, method item(x) DOM – Attribute
Attributes isId – is this attribute an ID?, specified – is present? name – name of the attribute, value – value of the attribute Named node map (element.attributes) length – number of attributes item(index) – returns item with given index getNamedItem(name) – returns item for given name removeNamedItem(name) – removes attribute name setNamedItem(node) – sets the specified attribute
var btn=document.getElementsByTagName("h3")[0]; var type=document.createAttribute("class"); type.nodeValue="myclass"; btn.attributes.setNamedItem(type); HTML5 (as a mobile platform) Basic functions of a mobile platform
Provide user interface High-level GUI Output using pre-defined well-known UI elements Input of basic input types (text, passwords, selections, but also numbers, dates, …) Low-level GUI Output using graphics primitives Direct input from a user – touches, keypresses, mouse, … Provide storage for user data Configuration, persistent data Data shared between different applications/screens Caching of commonly used application components Provide means of communication HTTP, sockets, local connectivity, … Are the features present in HTML5?
Provide user interface High-level GUI Yes, we have already done that for HTML forms HTML5 UI extensions (platform compatibility issues) Custom UI elements (e.g. the Date pickers) Low-level GUI HTML5 Canvas Events in HTML documents Provide storage for user data Web DOM Storage for configuration, user data, … Different pages in a document can share data directly Web Application Cache for offline use Provide means of communication HTTP/HTTPS, AJAX, Web Sockets (some browsers), … HTML5
Web Storage & Offline use
Examples e.g.: http://www.w3schools.com/html/html5_webstorage.asp http://www.w3schools.com/html/html5_app_cache.asp http://diveintohtml5.info/storage.html
Specifications: http://www.w3.org/TR/webstorage/ http://www.w3.org/TR/offline-webapps/ Web Storage Abused nowadays for usertracking, no easy way to display stored data, but main idea was to persist data inside a session and between sessions localStorage – data without expiration date sessionStorage – data for current browser session (lost after browser restart)
Everything stored as string key-value pairs in an object (must be converted to strings and back for non-string values – esp. objects and arrays) // Really basic use for objects, using JSON if (typeof(Storage)!=="undefined" && localStorage != null) {…}
localStorage.conversions = JSON.stringify(conversions); 16 conversions = JSON.parse(localStorage.conversions); Storage interface Storage interface Attributes length – number of elements in storage (readonly) Methods key(idx) – returns string key for idx getItem(key) – returns string value (data) for key setItem(key, data) – stores data for key in the storage removeItem(key) – deletes data for key from the storage clear() – clears the whole storage (removes everything) Storage event in DOM fired on each setItem(), removeItem() and clear() storage event (key, oldvalue, newvalue, url, storage area) Storage attributes in HTML document localStorage, sessionStorage QUOTA_EXCEEDED_ERR – storing to already full storage Web Storage examples
Persistent counter with local storage