1 / 45

Some DOM Perignon and more Objects of Desire A Really Post-Valentines Day Lecture

INFO100 and CSE100. Fluency with Information Technology. Some DOM Perignon and more Objects of Desire A Really Post-Valentines Day Lecture. Katherine Deibel. Arrays - Refresher. The basic idea of arrays Sometimes you have multiple pieces of data that are related

season
Download Presentation

Some DOM Perignon and more Objects of Desire A Really Post-Valentines Day Lecture

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. INFO100 and CSE100 Fluency with Information Technology Some DOMPerignon and more Objects of DesireA Really Post-Valentines Day Lecture Katherine Deibel Katherine Deibel, Fluency in Information Technology

  2. Arrays - Refresher • The basic idea of arrays • Sometimes you have multiple pieces of data that are related • You do not want to have to make separate variables for each (could be 1000s) • Examples • Calendars • List of elements on a page • Images (multidimensional arrays) Katherine Deibel, Fluency in Information Technology

  3. Arrays (refresher) • Arrays let you work with multiple values using only one variable name • An index distinguishes each value • Example: An array called stuff stuff[0] == "weasels" stuff[1] == 10 stuff[2] == 3.1416 etc. Katherine Deibel, Fluency in Information Technology

  4. Class… Classes Actually… Objects Katherine Deibel, Fluency in Information Technology

  5. Let's take a closer look • What's going on? • What's 'Math.' all about? • Function identifiers cannot use periods! • Why not just random()? Math.random() Katherine Deibel, Fluency in Information Technology

  6. Object-Oriented Language • JavaScript is an object-oriented language • What's an object? • For our purposes, an object is a structured collection of related variables and functions • Math is an object pre-built in to JS • Math.random() • Math.sqrt(number); • Math.PI == 3.14159265… Katherine Deibel, Fluency in Information Technology

  7. The period . • The period is used for accessing the members of an object • General syntax:objectName.memberName • Example:Math.random()looks in the Math object for a function named random Katherine Deibel, Fluency in Information Technology

  8. It's All About Organization • Imagine a bookstore • There are no topic sections • Books are just listed in alphabetical order by title • Could you find a book there? • Yes, but it would be messy. Katherine Deibel, Fluency in Information Technology

  9. Objects are Code Organization • Compartmentalize related code • Examples of built-in objects in JS: • Math • Date • Boolean • Number • String Katherine Deibel, Fluency in Information Technology

  10. The Bigger Truth • Objects are more than just a monolithic entity like Math • One can have object variables and we have already been doing that • Example: var x = 4/3; /* object of type Number */ Var y = 5/3; /* object of type Number */ alert("x = " + x.toPrecision(4)); alert("y = " + y.toFixed(2)); x = 1.333 y = 1.67 Katherine Deibel, Fluency in Information Technology

  11. Create Your Own Objects • Beyond the scope of this course • CSE 142/143 discuss object-oriented programming in Java • W3Schools: http://www.w3schools.com/js/js_objects.asp • We will focus on some objects built-in to JavaScript: • String • The Document Object Model Katherine Deibel, Fluency in Information Technology

  12. String Manipulation Make me a sweater Katherine Deibel, Fluency in Information Technology

  13. Strings in JavaScript • Strings come with several methods and properties Katherine Deibel, Fluency in Information Technology

  14. Length of a string vartxt = "Hello!";alert(txt.length); 6 Katherine Deibel, Fluency in Information Technology

  15. Length of a string vartxt = "Hello!";alert(txt.length); 6 Katherine Deibel, Fluency in Information Technology

  16. Change Casing var txt = "Hello123!";alert(txt.toLowerCase()); alert(txt.toUpperCase()); hello123! HELLO123! Katherine Deibel, Fluency in Information Technology

  17. indexOf( integer ); var txt = "Hello123!";alert(txt.indexOf('H')); alert(txt.indexOf('h')); alert(txt.indexOf('llo')); 0 -1 2 Katherine Deibel, Fluency in Information Technology

  18. subStr(start, length) Returns a portion of thestring vartxt = "Hello123!";alert(txt.subStr(0,2)); alert(txt.subStr(5,3)); alert(txt.subStr(5,4)); alert(txt.subStr(5,20)); He 123 123! 123! Katherine Deibel, Fluency in Information Technology

  19. split("…") Split a string into anarray of substrings vartxt = "Hello";alert(txt.split(""));alert(txt.split("l"));alert(txt.split("ll"));txt = "www.uw.edu";alert(txt.split(".")); H,e,l,l,o He,,o He,o www, uw, edu Katherine Deibel, Fluency in Information Technology

  20. Document Object Model On the day of his daughter's wedding, the DOM offers favors Katherine Deibel, Fluency in Information Technology

  21. Document Object Model • Usually just called the DOM • Some call it the Browser Object Model • Susie thinks such people are silly The BOM? You must be joking!? Katherine Deibel, Fluency in Information Technology

  22. Document Object Model • Collection of objects that make up the displayed web page • Interpreted from HTML by browser • Document Object Models are used in most document applications today • Word, Excel, PowerPoint • PDFs • Even some interfaces Katherine Deibel, Fluency in Information Technology

  23. Document Object Model Katherine Deibel, Fluency in Information Technology

  24. Document Object Model You should recognize several of these names Katherine Deibel, Fluency in Information Technology

  25. Document Object Model body Katherine Deibel, Fluency in Information Technology

  26. Document Object Model images Katherine Deibel, Fluency in Information Technology

  27. Document Object Model <a></a> links Katherine Deibel, Fluency in Information Technology

  28. Document Object Model forms Katherine Deibel, Fluency in Information Technology

  29. Document Object Model What are these? History? Navigator? Location? Katherine Deibel, Fluency in Information Technology

  30. Okay, there is a BOM What? I majored in Art, not CS! • Browser Object Model contains both the DOM and browser elements related to the page • HTML and JS can be used to manipulate the • Page title bar • Navigation bar • Window size • Etc. Katherine Deibel, Fluency in Information Technology

  31. The DOM (and the BOM) • Every element on the page can be accessed and manipulated through the DOM if you know the structure • The structure: • It's all arrays of objects • Actually, it's more like a tree Katherine Deibel, Fluency in Information Technology

  32. An Example DOM: The HTML Katherine Deibel, Fluency in Information Technology

  33. The DOM Tree • The <html> tag forms the root • The <body> tag is the trunk • Tags nested within each other form branches off of branches Katherine Deibel, Fluency in Information Technology

  34. The DOM Tree html head title h1 body p a p Katherine Deibel, Fluency in Information Technology

  35. DOM Properties & Methods Not real estate Katherine Deibel, Fluency in Information Technology

  36. Array Examples • All forms and images on a page are stored in arrays • document.forms[0]  The first form • document.images[2]  The third image • You can also get the number of such items on the page • document.forms.length • document.images.length Katherine Deibel, Fluency in Information Technology

  37. Objects and Arrays • Arrays can be indexed with strings as well as numbers • document.images["bluecar"] • image on page named "bluecar" with the id attribute in HTML.<imgsrc="bluecar.jpg" id="bluecar" /> • works since id attributes should be unique in HTML Katherine Deibel, Fluency in Information Technology

  38. .elements property • Most objects in the DOM have the .elements property • Returns an array of all elements (tags) within the specified object Katherine Deibel, Fluency in Information Technology

  39. Manipulating Form Inputs • Assume a form has the following tag:<input type="button" id="click" … /> • To access that input through the DOM: • Use the input's id:document.forms[0].click. … • Use the .elements property to get an array of each element inside the form:document.forms[0].elements['click']. … Katherine Deibel, Fluency in Information Technology

  40. <input> properties in DOM • document.forms[0].id1.valueUsed with text fields to get or set text • document.forms[0].id2.checkedBoolean value used with checkboxes and radio buttons to set if input is clicked/selected Katherine Deibel, Fluency in Information Technology

  41. <img> properties in DOM • document.images[0].src = "…"Get or set the source file for the image • document.images[0].alt = "…"Get or set the alt text for the image • document.images[0].width = #document.images[0].height = #Get or set the dimensions of the image Katherine Deibel, Fluency in Information Technology

  42. Accessing a Single Node • var tag = getElementById("…") • attach id-attributes to HTML tags and access page elements by this notation, instead of having to wade through the hierarchy • Remember to use unique ids! Katherine Deibel, Fluency in Information Technology

  43. Accessing Multiple Nodes • document.getElementsByTagName("p") • Returns an array of all instances of a specific tag on the page • Example: returns all paragraphs on the page • document.getElementsByClassName("…") • Returns an array of all instances of tags that are of a specific class Katherine Deibel, Fluency in Information Technology

  44. Adding More Content • var p = document.createElement("p");document.body.appendChild(p); • Allows you to add more nodes to the page • Above code as a paragraph tag to the end of body • p.innerHTML = "Paragraph text";Sets the text, including tags, in paragraph p Katherine Deibel, Fluency in Information Technology

  45. Summary • Objects provide further structure to JavaScript and other languages • Learn more about them at W3Schools • Browsers interpret HTML, CSS, JS, etc. to generate the Document Object Model • You can manipulate this through JS • Again, learn more at W3Schools Katherine Deibel, Fluency in Information Technology

More Related