Fluency with Information Technology INFO100 and CSE100 Katherine Deibel 2012-05-09Katherine Deibel,...
-
Upload
kerry-kelley -
Category
Documents
-
view
214 -
download
0
Transcript of Fluency with Information Technology INFO100 and CSE100 Katherine Deibel 2012-05-09Katherine Deibel,...
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.
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 string
var txt = "Hello!";alert(txt.length);
2012-05-09 Katherine Deibel, Fluency in Information Technology 14
6
Length of a string
var txt = "Hello!";alert(txt.length);
2012-05-09 Katherine Deibel, Fluency in Information Technology 15
6
Change Casing
var 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 thestring
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-09 Katherine Deibel, Fluency in Information Technology 18
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("."));
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 24
You should recognize several of these names
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 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
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.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
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