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:

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

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

2012-05-09 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()?

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

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…

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

2012-05-09 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.

2012-05-09 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

2012-05-09 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));

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

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

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

String ManipulationMake me a sweater

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

Strings in JavaScript Strings come with several methods

and properties

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

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

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

6

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

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

6

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

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

hello123!

HELLO123!

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

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

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

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

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("."));

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

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

2012-05-09 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

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

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

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

Document Object Model

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

Document Object Model

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

You should recognize several of these names

Document Object Model

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

body

Document Object Model

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

images

Document Object Model

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

<a></a> links

Document Object Model

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

forms

Document Object Model

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

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.

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

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

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

An Example DOM: The HTML

2012-05-09 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

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

The DOM Tree

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

html

body

h1

p a

p

head title

DOM Properties & MethodsNot real estate

2012-05-09 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

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

works since id attributes should be unique in HTML

2012-05-09 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

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

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

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

2012-05-09 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

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

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!

2012-05-09

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

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

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

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

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