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


2/16

reaCtion


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


4/16

selector:pseuo-class { PsueDo-clAss attach to a selector with a colon

property: value;

property: value;

property: value;

}



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;

}



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


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.



8/16

document.write(Hello World!)



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.



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


11/16

adding reaction w/mouse events classic rollover


12/16

object nAme

nAmeD objects AttRibute

AttRibutes neW vAlue

adding reaction w/mouse events classic rollover


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


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


15/16

how jQuery works


16/16

demojQuery slideDown

class 5: getting interactive

Documents