INFO100 and CSE100

fallsnowpeasInternet και Εφαρμογές Web

12 Νοε 2013 (πριν από 3 χρόνια και 6 μήνες)

96 εμφανίσεις

Fluency with Information Technology

INFO100 and CSE100

Katherine Deibel

2012
-
05
-
09

Katherine Deibel, Fluency in Information Technology

1


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

Katherine Deibel, Fluency in Information Technology

2


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] == 10

stuff[2] == 3.1416

etc.

Actually… Objects

2012
-
05
-
09

Katherine Deibel, Fluency in Information Technology

4


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


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

Katherine Deibel, Fluency in Information Technology

6


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


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


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


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


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

Make me a sweater

2012
-
05
-
09

Katherine Deibel, Fluency in Information Technology

12


Strings come with several methods
and properties



2012
-
05
-
09

Katherine Deibel, Fluency in Information Technology

13

var

txt = "Hello!";

alert(
txt.length
);

2012
-
05
-
09

Katherine Deibel, Fluency in Information Technology

14

6

var

txt = "Hello!";

alert(
txt.length
);

2012
-
05
-
09

Katherine Deibel, Fluency in Information Technology

15

6

var

txt = "
Hello123!";

alert(
txt.toLowerCase
());

alert(
txt.toUpperCase
());



2012
-
05
-
09

Katherine Deibel, Fluency in Information Technology

16

hello123!

HELLO123!

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

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



2012
-
05
-
09

Katherine Deibel, Fluency in Information Technology

18

He

123

123!

123!

Split a string into an

array 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

On the day of his daughter's wedding, the DOM offers favors

2012
-
05
-
09

Katherine Deibel, Fluency in Information Technology

20


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


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

2012
-
05
-
09

Katherine Deibel, Fluency in Information Technology

23

2012
-
05
-
09

Katherine Deibel, Fluency in Information Technology

24

You should recognize
several of these names

2012
-
05
-
09

Katherine Deibel, Fluency in Information Technology

25

body

2012
-
05
-
09

Katherine Deibel, Fluency in Information Technology

26

images

2012
-
05
-
09

Katherine Deibel, Fluency in Information Technology

27

<a></a> links

2012
-
05
-
09

Katherine Deibel, Fluency in Information Technology

28

forms

2012
-
05
-
09

Katherine Deibel, Fluency in Information Technology

29

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.


2012
-
05
-
09

Katherine Deibel, Fluency in Information Technology

30

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



2012
-
05
-
09

Katherine Deibel, Fluency in Information Technology

31

2012
-
05
-
09

Katherine Deibel, Fluency in Information Technology

32


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

2012
-
05
-
09

Katherine Deibel, Fluency in Information Technology

34

html

body

h1

p

a

p

head

title

Not real estate

2012
-
05
-
09

Katherine Deibel, Fluency in Information Technology

35


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


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


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


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

Katherine Deibel, Fluency in Information Technology

39


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


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


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
!


2012
-
05
-
09

Katherine Deibel, Fluency in Information Technology

42


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

Katherine Deibel, Fluency in Information Technology

43


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


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