Presentation is loading. Please wait.

Presentation is loading. Please wait.

Style Sheets (CSS) Separate structure (HTML tags) from browser presentation Control a site’s look and feel Three types – Inline: apply to a single HTML.

Similar presentations


Presentation on theme: "Style Sheets (CSS) Separate structure (HTML tags) from browser presentation Control a site’s look and feel Three types – Inline: apply to a single HTML."— Presentation transcript:

1 Style Sheets (CSS) Separate structure (HTML tags) from browser presentation Control a site’s look and feel Three types – Inline: apply to a single HTML tag – Document level: apply to groups of a document’s tags – External: apply to groups of tags in a set of web site documents JavaScript: alters CSS properties in an element’s style property object

2 Style Sheets in an HTML Document Inline: Document Level tag.class {foo:bar; … foo:bar} /* name attribute selector */... tag.#id {foo:bar; … foo:bar} /* id attribute selector */ External: – Note: fileName.css is a text file – The syntax is the same as a document level CSS without the style tag

3 HTML Example Markup Code Demo Input#button { border-style:outset; background-color:#F0F0F0; color:blue; text-align:center; border-width:5px } JavaScript Version Demo var tag = document.getElementById("button"); tag.style.borderStyle = "outset"; tag.style.backgroundColor = "#F0F0F0"; tag.style.color = "blue"; tag.style.textAlign = "center"; tag.style.borderWidth = "5px";

4 How Does JavaScript Fit? CSSJavaScriptCSSJavaScript text-aligntag.style.textAlign word-spacing tag.style.wordSpacing font-family tag.style.fontFamily letter-spacing ltag.style.etterSpacing font-size tag.style.fontSize margin-top tag.style.marginTop font-style tag.style.fontStyle margin-bottom tag.style.marginBottom font-weight tag.style.fontWeight margin-left tag.style.marginLeft font-variant tag.style.fontVariant margin-right tag.style.marginRight text-indent tag.style.textIndent background-image tag.style.backgroundImage colortag.style.color background-color tag.style.backgroundColor positiontag.style.position text-decoration tag.style.textDecoration text-align tag.style.textAlign text-transform tag.style.textTransform More Complete Reference: W3Schools:

5 JavaScript Example // Create component for confirmation messages var messageBackground = acorns.system.getColor(255, 255, 204); div = document.createElement("div"); div.id = "message"; div.style.display = "none"; div.style.borderStyle = "solid"; div.style.backgroundColor = "#C0C0C0"; div.style.color = "black"; div.style.textAlign = "center"; div.style.position = "absolute"; div.style.maxWidth = Math.max(200, Math.ceil(body.clientWidth*3/4))+"px"; div.style.maxHeight = (windowSize.height - 50) + "px"; div.style.margin = "auto"; // Centers div, but not in IE div.style.overflow = "auto"; body.appendChild(div);

6 Resolve Pixel Differences // Pixels per inch var getPixelsPerInch = function() {var element = document.createElement('div'); element.style.width = '1in'; element.style.padding = '0'; document.body.appendChild (element); var ppi = element.offsetWidth; element.parentNode.removeChild (element); return ppi; } // Pixels per point var getDefaultFontSize = function() { var element = document.createElement('div'); element.appendChild (document.createTextNode('M')); document.body.appendChild(element); var fs= [element.offsetWidth, element.offsetHeight]; element.parentNode.removeChild (element); return fs[1]; }

7 Create a Custom Label var span = document.createElement("span"); span.style.height = (15*getPixelsPerInch())+"px"; span.style.backgroundColor = "black"; span.style.color = "white"; span.style.fontSize = (6 * getDefaultFontSize()) + "pt"; span.style.borderStyle = "solid"; span.style.position = "relative"; span.style.verticalAlign = "super"; // superscript alignment span.style.borderWidth = "1px"; span.id = "layername"; div.appendChild(span);

8 Creating a Popup Menu var makePopupMenu = function() {var div = document.createElement("div"); div.style.overflow = "auto"; div.style.zIndex = 99; // Higher numbers always in front div.style.borderStyle = "solid"; div.style.backgroundColor = BACKGROUND_COLOR; div.style.position = "absolute"; div.style.display = "none"; div.id = "popup"; return div; }

9 Events and Listeners Event: Object created in response to a user or programming action. Listener: A function, which processes an event when it occurs Event Processing – Capturing: The outermost tag’s listener fires first, an handling proceeds down to inner tags. – Bubbling: The innermost tag’s listener fires first, and handling proceeds up to outer tags. – Explorer bubbles; other browsers handle both

10 Attaching a Listener to a Tag Attaching listener by setting a tag’s event attribute tag.onclick = function(e) {}, tag.onmousedown = foo, tag.onmouseup = foo, image.onload = foo, tag.onkeydown = foo, tag.ontouch = foo, tag.onmousemove = foo, image.onabort = foo, window.onresize = foo, and many more Call a tag’s method to add a listener (IE 9 is now compatible) this.addListener = function(tag, type, handler) { if (this.isExplorer()) { tag.attachEvent("on" + type, handler); } else tag.addEventListener(type, handler, false); // bubble up } // false for bubbling, true for capturing Removing a listener – If (isExplorer()) { tag.detachEvent(“click”, functionName); elsetag.removeEventListener(tag, functionName); – Tag.onclick = undefined; // attach & detatch if multiple listeners

11 Capture or Bubble Events Capture: broadcast an event to all the sub nodes in the DOM Bubble: broadcast an event to all the parent nodes. addEventListener last argument (onCapture argument) – true implies capture – false implies bubble Eliminate capture and bubbling – event.preventDefault() – return false;

12 The Event Object Key Properties altKey, ctrlKey, metaKey, shiftKey: Boolean indicator if special keyboard keys pressed keyCode or charCode (IE): Unicode value of pressed key clientX, clientY : mouse position relative to web-page offsetX, offsetY: mouse position relative to element Type: type of event causing this listener to be called bubbles: boolean (not IE) button: Indicates which mouse button is pressed, 0=left, 1=middle,2=right target or srcElement (IE): The element to which listener is attached Created in response to a user or programmatic event

13 Event Listener Example var pictureHandler = function(event, category) { if (!event) event = window.event; // IE strikes again var element; if (event.currentTarget) element = event.currentTarget; else event = event.srcElement.parentNode; // IE strikes again element.style.borderStyle = "inset"; category.displayMultiplePictureData(element); var setBorder = function() { element.style.borderStyle=“outset”; } setTimeout(setBorder, 250); } Display button depress and then release ¼ second later

14 Event Listener Example (DnD) var mouseDownHandler = function(event) // Grab element for Dragging {if (!eventl) event = window.event; var element = document.elementFromPoint(event.clientX, event.clientY); if (element.name != "magnet") return; startPos = {x: event.clientX, y: event.clientY }; offsetPos = {x: parseInt(element.style.left), y: parseInt(element.style.top) }; dndTag = element; } var mouseMoveHandler = function(event) // Move element during drag {if (dndTag==undefined) return; var left = offsetPos.x + event.clientX - startPos.x; var top = offsetPos.y + event.clientY - startPos.y; setPosition(dndTag, left, top); }

15 Event Listener Example var buttonHandler = function(event) {if (!event) event = window.event; var element = (event.currentTarget) ? event.currentTarget : event.srcElement; element.style.borderStyle = "inset"; value = element.getAttribute("alt"); switch (value) {case "play“:/* Play the audio */ break; case "replay“:/* Replay from user selected starting point */ break; case "pause“: /* Pause the audio playback */ break; case "stop“: /* Stop the audio playback */ break; } setTimeout(function() { element.style.borderStyle = "outset" }, 250); }

16 User Interface (UI) Submitting to Server

for text boxes, radio buttons, check boxes, submit buttons, reset buttons, hidden fields, etc. for multiple rows of input Drop down menu items: within tag Bunch of GUI components within a form tag (if submitting to a server ) Use JavaScript to style and position the components, attach listeners, and establish the user look & feel

17 The Input Tag math yes Use this tag to create most of the GUI components Note: hidden components are useful for adding data to a form that a user does not have to enter, like time of day.

18 Browser Differences A Few Explorer Differences AttachEvent, not addEventListener No HTML5 before version 9.0. IE Only browser supporting bgsound Extra margin around block tags No onload event for cached images Different bounds of image tags Event handler object is not always passed to listeners If (!event) event = window.event; Typical Pseudo Code Internet Explorer If (internet explorer) Do the weird thing Else Do what all other browsers do Some properties are not universally supported If (property defined) Property-based logic Else Perform fallback code To Make Matters Worse Microsoft outsources Explorer for MAC; is differs from the PC version Each Explorer version is significantly different from the previous IE ’s market share is dropping IE version 9 is closer to the W3School standard, but not perfect. Hopeful Signs

19 Explorer Differences (Partial List) ExplorerOther Browsers tag.style.styleFloattag.style.cssFloat getAttribute(“className”) getAttribute(“class”) getAttribute(“htmlFor”) getAttribute(“for”) event.clientX event.pageX event.clientY event.pageY window.innerWidth document.documentElement.clientWidth window.innerHeight document.documentElement.clientWidth tag.style.filter = "alpha(opacity=80)";tagstyle.opacity = "0.5"; Suggestions: 1.Stick to w3School standards 2.Check w3Schools, which indicates browser support 3.Find an alternate approach other than if (isExplorer()) 4.There are many subtle differences. Thoroughly test on Explorer after debugging on other browsers

20 Fonts and Audio Font face style: supports fonts not installed on the client { font-family:"Aboriginal Sans Majdy"; src: url("allLessons/Assets/Fonts/aboriginalsansmajdy.eot"); { font-family:"Aboriginal Sans Majdy"; src: local("Aboriginal Sans Majdy"), // In case already on client system url("allLessons/Assets/Fonts/aboriginalsansmajdy.ttf") format("truetype"); } – Explorer does not support TTF font files; EOT is a non-standard Microsoft format – Both fonts need to be present for cross browser compatibility HTML audio tag – Browsers supports different codecs; Explorer is only one without wav support – For Safari, a browser plugin is required to playback audio files

21 Attributes are not a Tag’s Property sets foo attribute to value, bar. – attributes is tag’s property, pointing to a DOM Node object with the tag’s attributes – foo is one of the tag’s attributes – setAttribute("foo“,"bar") sets foo in attributes property tag.foo sets a property in the tag object, not necessarily the value in the tag’s attribute object If foo is both an attribute and a property, some browsers set both; others do not. Class Id Value Src Name id attributes Note: id is both an attribute and a tag property

22 Lots of Browser Differences this.getWindowSize = function() {var width = 0, height = 0; if( typeof( window.innerWidth ) == 'number' ) {width = window.innerWidth; height = window.innerHeight; } // Not IE else try {width = document.documentElement.clientWidth; // IE 6+ height = document.documentElement.clientHeight; } catch (e) { try {width = document.body.clientWidth;// IE 4 height = document.body.clientHeight; } catch(e) {} } return {width:width, height: height }; }; // End of getWindowSize()

23 Width of String in Pixels this.widthOfString = function(text, size) {if (testComponent==undefined) {testComponent = document.createElement("span"); testComponent.style.position = "absolute"; testComponent.style.left = "-1000px"; testComponent.style.top = "-1000px"; testComponent.style.visibility = "hidden"; document.body.appendChild(testComponent); } iftestComponent.style.fontSize = size + "px"; testComponent.innerHTML = text; return testComponent.clientWidth; }

24 AJAX Acronym – Wikipedia: Asynchronous JavaScript and XML – Inaccurate: AJAX is Asynchronous JavaScript and XML, Text, and HTML. So AJAX now is not a descriptive acronym. Purpose: Facilitate communication between client (through JavaScript) and server using XMLHTTP calls. Advantage: Parts of pages can be updated without requiring a full download from the server Disadvantage: The back browser buttons don’t work unless using HTML 5 pushState() and popState() methods and binding the popstate event to the window object Solution: HTML5 history pushState method

25 AJAX calls ajaxFunction() { try // Browsers other than IE { return new XMLHttpRequest(); } catch (e) { try // Newer IE versions { return new activeXObject("Msxml2.XMLHTTP"); } catch (e) { try // Older IE versions { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ return false; } } Collection of technologies fostering client/server communication 2005, James Garrett, AJAX, a new Approach to Web Applications Note: A complete example is in one of the last chapters of the text

26 AJAX Limitations Local host files in directory containing the web-site – Firefox, Safari: work fine – IE: asks user if they want to proceed – Chrome: Can’t unless local host is a server – Opera: Requires a hack. Add iframe with XML, extract text, then remove iframe. Problem – Distributing applications on CDs becomes problematic – Users likely won’t be able to set up their computer as a server ACORNS solution: The XML file containing lesson information is a JavaScript string, which all browsers can parse

27 Parse XML from a String this.parseXMLString = function(fileName, xmlString) {if (window.DOMParser) {parser=new DOMParser(); xmlDoc=parser.parseFromString(xmlString,"text/xml"); if (xmlDoc.documentElement.nodeName=="parsererror") return false; } else // Internet Explorer {xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="false"; xmlDoc.loadXML(xmlString); } var root = xmlDoc.documentElement; // Doc = XML DOM root element if (root) return getAcorns(fileName, root); // Now can traverse the DOM return undefined; }


Download ppt "Style Sheets (CSS) Separate structure (HTML tags) from browser presentation Control a site’s look and feel Three types – Inline: apply to a single HTML."

Similar presentations


Ads by Google