Download - Class 5: Getting Interactive
-
8/8/2019 Class 5: Getting Interactive
1/16
Class 5
GettinG interaCtive
Web Design, gRAPH-3271-01
Instructor: Erika Tarte
Rhode Island School of Design
Wintersession 2011
-
8/8/2019 Class 5: Getting Interactive
2/16
reaCtion
-
8/8/2019 Class 5: Getting Interactive
3/16
CSS pseudo-classes apply CSS styles to a selectors element is in a specic state
Some o these states include:
hover applies class when the user is hovering over the element
active applies class when the user is activating the element; or example, the
time between when a user presses and releases the element
ocus applies class when an element has input ocus; or example: when a user
clicks or tabs into a search box.
link applies class to unvisited links
visited applies class to visited links
adding reaction w/pseudo-classes
-
8/8/2019 Class 5: Getting Interactive
4/16
selector:pseuo-class { PsueDo-clAss attach to a selector with a colon
property: value;
property: value;
property: value;
}
adding reaction w/pseudo-classes
-
8/8/2019 Class 5: Getting Interactive
5/16
a { selector without a PsueDo-clAss
color: #000;
background-color: #fff;
}
a:hover { that same selector with a PsueDo-clAss
color: #000;
background-color: #ffff00;
}
adding reaction w/pseudo-classes
-
8/8/2019 Class 5: Getting Interactive
6/16
JavaScript Java
JavaScript was created to add interactivity to HTML and CSS-based webpages
Its a scripting language (lightweight programming language)
Like CSS, can be linked to rom your HTML page or embedded directly in your HTML page
Does not require a special server to run its programs
adding reaction w/javascript
-
8/8/2019 Class 5: Getting Interactive
7/16
What can JavaScript do?
can add dynamic text, a.k.a. variable text, to an HTML page
can react to events
can read and write HTML on the fy
can detect a users browser type, size, screen resolution, device, etc.
adding reaction w/javascript
-
8/8/2019 Class 5: Getting Interactive
8/16
document.write(Hello World!)
adding reaction w/javascript
-
8/8/2019 Class 5: Getting Interactive
9/16
Javascript can react to events, a.k.a when something happens:
interace events unload, resize, scroll, ocus/blur, etc.
mouse events click, double click, hover, drag, etc.
orm events submit, reset, etc.
browser events microsot events, mozilla events, etc.
adding reaction w/javascript
-
8/8/2019 Class 5: Getting Interactive
10/16
onmousedown user presses the mouse button on this element
onmouseup user releases the mouse button on this element
onclick 1 mousedown and 1 mouseup detected on element
ondblclick double click detected on element
onmousemove when cursor movement is detected on element
onmouseover user rolls the cursor on to this element
onmouseout user rolls the cursor o o this element
adding reaction w/mouse events
-
8/8/2019 Class 5: Getting Interactive
11/16
adding reaction w/mouse events classic rollover
-
8/8/2019 Class 5: Getting Interactive
12/16
object nAme
nAmeD objects AttRibute
AttRibutes neW vAlue
adding reaction w/mouse events classic rollover
-
8/8/2019 Class 5: Getting Interactive
13/16
JavaScript libraries make JavaScript easier to read and write
Library o pre-written JavaScript with pre-written unctions
Allow you to write scripts using more human language than computer language
adding reaction w/javascript libraries
-
8/8/2019 Class 5: Getting Interactive
14/16
jQuery is a library that emphasizes interaction between HTML, JavaScript and CSS
Easy to lean, modiy and integrate
Known as designers JavaScript
Open-source with dedicated designer/developer ollowing
adding reaction w/jQuery
-
8/8/2019 Class 5: Getting Interactive
15/16
how jQuery works
-
8/8/2019 Class 5: Getting Interactive
16/16
demojQuery slideDown