some dom perignon and more objects of desire a really post-valentines day lecture

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

Fluency with Information Technology

INFO100 and CSE100

Katherine Deibel

2012-05-09 Katherine Deibel, Fluency in Information Technology 1

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)

2012-05-09

Arrays (refresher) Arrays let you work with multiple

values using only one variable name An index distinguishes each value

Example:


stuff(0) "weasels"(1) 10(2) 3.1416(3) "A cute kitty"(4) true

An array called stuff

stuff[0] == "weasels"stuff[1] == 10stuff[2] == 3.1416etc.

Class… ClassesActually… Objects


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()


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…

2012-05-09

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


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.


Objects are Code Organization Compartmentalize related code Examples of built-in objects in JS:

Math Date Boolean Number String


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

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


String ManipulationMake me a sweater


Strings in JavaScript Strings come with several methods

and properties


Length of a stringvar txt = "Hello!";alert(txt.length);


6

Change Casingvar txt = "Hello123!";alert(txt.toLowerCase());alert(txt.toUpperCase());


hello123!

HELLO123!

indexOf( integer );var txt = "Hello123!";alert(txt.indexOf('H'));alert(txt.indexOf('h'));alert(txt.indexOf('llo'));


0

-1

2

subStr(start, length)Returns a portion of thestringvar txt = "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!

split("…")Split a string into anarray of substringsvar txt = "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

Document Object ModelOn the day of his daughter's wedding, the DOM offers favors


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!?

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


Document Object Model




You should recognize several of these names



body



images



<a></a> links



forms



What are these? History? Navigator? Location?

Okay, there is a BOM 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.


What? I majored in Art, not CS!

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


An Example DOM: The HTML


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


The DOM Tree


html

body

h1

p a

p

head title

DOM Properties & MethodsNot real estate


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


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.<img src="bluecar.jpg" id="bluecar" />

works since id attributes should be unique in HTML


.elements property Most objects in the DOM have

the .elements property Returns an array of all elements (tags)

within the specified object



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']. …

2012-05-09

<input> properties in DOM 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


<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



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!

2012-05-09


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

2012-05-09

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


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


some dom perignon and more objects of desire a really post-valentines day lecture

Documents