1 / 43

Announcements

Announcements. Grading Breakdown Change. Announcements. Lab 7 due date extended to Monday Lab 8 will also be due on Monday Work on Lab 8 in sections on Thursday / Friday as it will guide you through writing an interactive application. INFO100 and CSE100. Fluency with Information Technology.

alaqua
Download Presentation

Announcements

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. Announcements • Grading Breakdown Change Katherine Deibel, Fluency in Information Technology

  2. Announcements • Lab 7due date extended to Monday • Lab 8 will also be due on Monday • Work on Lab 8 in sections on Thursday / Friday as it will guide you through writing an interactive application Katherine Deibel, Fluency in Information Technology

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

  4. 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

  5. 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

  6. 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

  7. 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

  8. 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

  9. 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

  10. 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: • The Document Object Model • String Katherine Deibel, Fluency in Information Technology

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

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

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

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

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

  16. 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

  17. 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

  18. 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

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

  20. 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

  21. 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

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

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

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

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

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

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

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

  29. 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

  30. 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

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

  32. 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

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

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

  35. 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

  36. 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

  37. .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

  38. 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

  39. <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

  40. <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

  41. Another Way to Navigate • 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 id's! • var pars = getElementsByTagName("p"); • Brings up an array of all the paragraph tags Katherine Deibel, Fluency in Information Technology

  42. 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

  43. 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