1. Fluency with Information Technology INFO100 and CSE100 Katherine Deibel 2012-05-09Katherine Deibel, Fluency in Information Technology1

2.  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) 2012-05-09Katherine Deibel, Fluency in Information Technology2

3.  Arrays let you work with multiple values using only one variable name  An index distinguishes each value  Example: 2012-05-09Katherine Deibel, Fluency in Information Technology3 stuff (0)"weasels" (1)10 (2)3.1416 (3)"A cute kitty" (4)true An array called stuff stuff[0] == "weasels" stuff[1] == 10 stuff[2] == 3.1416 etc.

4. Actually… Objects 2012-05-09Katherine Deibel, Fluency in Information Technology4

5.  What's going on?  What's 'Math.' all about?  Function identifiers cannot use periods!  Why not just random()? 2012-05-09Katherine Deibel, Fluency in Information Technology5 Math.random()

6.  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… 2012-05-09Katherine Deibel, Fluency in Information Technology6

7.  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 2012-05-09Katherine Deibel, Fluency in Information Technology7

8.  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. 2012-05-09Katherine Deibel, Fluency in Information Technology8

9.  Compartmentalize related code  Examples of built-in objects in JS:  Math  Date  Boolean  Number  String 2012-05-09Katherine Deibel, Fluency in Information Technology9

10.  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)); 2012-05-09Katherine Deibel, Fluency in Information Technology10 x = 1.333 y = 1.67

11.  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 2012-05-09Katherine Deibel, Fluency in Information Technology11

12. Make me a sweater 2012-05-09Katherine Deibel, Fluency in Information Technology12

13.  Strings come with several methods and properties 2012-05-09Katherine Deibel, Fluency in Information Technology13

14. var txt = "Hello!"; alert(txt.length); 2012-05-09Katherine Deibel, Fluency in Information Technology14 6

15. var txt = "Hello!"; alert(txt.length); 2012-05-09Katherine Deibel, Fluency in Information Technology15 6

16. var txt = "Hello123!"; alert(txt.toLowerCase()); alert(txt.toUpperCase()); 2012-05-09Katherine Deibel, Fluency in Information Technology16 hello123! HELLO123!

17. var txt = "Hello123!"; alert(txt.indexOf('H')); alert(txt.indexOf('h')); alert(txt.indexOf('llo')); 2012-05-09Katherine Deibel, Fluency in Information Technology17 0 2

18. Returns a portion of the string var txt = "Hello123!"; alert(txt.subStr(0,2)); alert(txt.subStr(5,3)); alert(txt.subStr(5,4)); alert(txt.subStr(5,20)); 2012-05-09Katherine Deibel, Fluency in Information Technology18 He 123 123!

19. Split a string into an array of substrings var txt = "Hello"; alert(txt.split("")); alert(txt.split("l")); alert(txt.split("ll")); txt = "www.uw.edu"; alert(txt.split(".")); 2012-05-09Katherine Deibel, Fluency in Information Technology19 H,e,l,l,o He,,o He,o www, uw, edu

20. On the day of his daughter's wedding, the DOM offers favors 2012-05-09Katherine Deibel, Fluency in Information Technology20

21.  Usually just called the DOM  Some call it the Browser Object Model  Susie thinks such people are silly 2012-05-09Katherine Deibel, Fluency in Information Technology21 The BOM? You must be joking!?

22.  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 2012-05-09Katherine Deibel, Fluency in Information Technology22

23. 2012-05-09Katherine Deibel, Fluency in Information Technology23

24. 2012-05-09Katherine Deibel, Fluency in Information Technology24 You should recognize several of these names

25. 2012-05-09Katherine Deibel, Fluency in Information Technology25 body

26. 2012-05-09Katherine Deibel, Fluency in Information Technology26 images

27. 2012-05-09Katherine Deibel, Fluency in Information Technology27 links

28. 2012-05-09Katherine Deibel, Fluency in Information Technology28 forms

29. 2012-05-09Katherine Deibel, Fluency in Information Technology29 What are these? History? Navigator? Location?

30.  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. 2012-05-09Katherine Deibel, Fluency in Information Technology30 What? I majored in Art, not CS!

31.  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 2012-05-09Katherine Deibel, Fluency in Information Technology31

32. 2012-05-09Katherine Deibel, Fluency in Information Technology32

33.  The tag forms the root  The tag is the trunk  Tags nested within each other form branches off of branches 2012-05-09Katherine Deibel, Fluency in Information Technology33

34. 2012-05-09Katherine Deibel, Fluency in Information Technology34 html body h1 pa p headtitle

35. Not real estate 2012-05-09Katherine Deibel, Fluency in Information Technology35

36.  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 2012-05-09Katherine Deibel, Fluency in Information Technology36

37.  Arrays can be indexed with strings as well as numbers  document.images["bluecar"]  image on page named "bluecar" with the id attribute in HTML.  works since id attributes should be unique in HTML 2012-05-09Katherine Deibel, Fluency in Information Technology37

38.  Most objects in the DOM have the.elements property  Returns an array of all elements (tags) within the specified object 2012-05-09Katherine Deibel, Fluency in Information Technology38

39.  Assume a form has the following tag:  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']. … 2012-05-09Katherine Deibel, Fluency in Information Technology39

40.  document.forms[0].id1.value Used with text fields to get or set text  document.forms[0].id2.checked Boolean value used with checkboxes and radio buttons to set if input is clicked/selected 2012-05-09Katherine Deibel, Fluency in Information Technology40

41.  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 2012-05-09Katherine Deibel, Fluency in Information Technology41

42.  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 ! 2012-05-09Katherine Deibel, Fluency in Information Technology42

43.  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 2012-05-09Katherine Deibel, Fluency in Information Technology43

44.  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 2012-05-09Katherine Deibel, Fluency in Information Technology44

45.  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 2012-05-09Katherine Deibel, Fluency in Information Technology45