Fluency with Information Technology INFO100 and CSE100 Katherine Deibel Katherine Deibel, Fluency in Information Technology1
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 Technology2
Arrays let you work with multiple values using only one variable name An index distinguishes each value Example: Katherine Deibel, Fluency in Information Technology3 stuff (0)"weasels" (1)10 (2) (3)"A cute kitty" (4)true An array called stuff stuff[0] == "weasels" stuff[1] == 10 stuff[2] == etc.
Actually… Objects Katherine Deibel, Fluency in Information Technology4
What's going on? What's 'Math.' all about? Function identifiers cannot use periods! Why not just random()? Katherine Deibel, Fluency in Information Technology5 Math.random()
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 == … Katherine Deibel, Fluency in Information Technology6
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 Technology7
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 Technology8
Compartmentalize related code Examples of built-in objects in JS: Math Date Boolean Number String Katherine Deibel, Fluency in Information Technology9
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)); Katherine Deibel, Fluency in Information Technology10 x = y = 1.67
Beyond the scope of this course CSE 142/143 discuss object-oriented programming in Java W3Schools: We will focus on some objects built-in to JavaScript: String The Document Object Model Katherine Deibel, Fluency in Information Technology11
Make me a sweater Katherine Deibel, Fluency in Information Technology12
Strings come with several methods and properties Katherine Deibel, Fluency in Information Technology13
var txt = "Hello!"; alert(txt.length); Katherine Deibel, Fluency in Information Technology14 6
var txt = "Hello!"; alert(txt.length); Katherine Deibel, Fluency in Information Technology15 6
var txt = "Hello123!"; alert(txt.toLowerCase()); alert(txt.toUpperCase()); Katherine Deibel, Fluency in Information Technology16 hello123! HELLO123!
var txt = "Hello123!"; alert(txt.indexOf('H')); alert(txt.indexOf('h')); alert(txt.indexOf('llo')); Katherine Deibel, Fluency in Information Technology17 0 2
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)); Katherine Deibel, Fluency in Information Technology18 He !
Split a string into an array of substrings var txt = "Hello"; alert(txt.split("")); alert(txt.split("l")); alert(txt.split("ll")); txt = " alert(txt.split(".")); Katherine Deibel, Fluency in Information Technology19 H,e,l,l,o He,,o He,o www, uw, edu
On the day of his daughter's wedding, the DOM offers favors Katherine Deibel, Fluency in Information Technology20
Usually just called the DOM Some call it the Browser Object Model Susie thinks such people are silly Katherine Deibel, Fluency in Information Technology21 The BOM? You must be joking!?
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 Technology22
Katherine Deibel, Fluency in Information Technology23
Katherine Deibel, Fluency in Information Technology24 You should recognize several of these names
Katherine Deibel, Fluency in Information Technology25 body
Katherine Deibel, Fluency in Information Technology26 images
Katherine Deibel, Fluency in Information Technology27 links
Katherine Deibel, Fluency in Information Technology28 forms
Katherine Deibel, Fluency in Information Technology29 What are these? History? Navigator? Location?
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 Technology30 What? I majored in Art, not CS!
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 Technology31
Katherine Deibel, Fluency in Information Technology32
The tag forms the root The tag is the trunk Tags nested within each other form branches off of branches Katherine Deibel, Fluency in Information Technology33
Katherine Deibel, Fluency in Information Technology34 html body h1 pa p headtitle
Not real estate Katherine Deibel, Fluency in Information Technology35
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 Technology36
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 Katherine Deibel, Fluency in Information Technology37
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 Technology38
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']. … Katherine Deibel, Fluency in Information Technology39
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 Katherine Deibel, Fluency in Information Technology40
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 Technology41
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 ! Katherine Deibel, Fluency in Information Technology42
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 Technology43
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 Technology44
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 Technology45