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

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 string

var txt = "Hello!";alert(txt.length);


6

Length of a string

var txt = "Hello!";alert(txt.length);


6

Change Casing

var 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 thestring

var txt = "Hello123!";alert(txt.subStr(0,2));

alert(txt.subStr(5,3));




He

123

123!

123!

split("…")

Split a string into anarray of substrings

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


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






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


<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


Documents

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