View
2
Download
0
Category
Preview:
Citation preview
CS102: Monsoon 2015
CS 102 Human-Computer Interaction
Lecture 13: HTML, HTTP, CSS and Javascript
1
CS102: Monsoon 2015
Course updatesUser understanding report due today
All (remaining) project teams should meet course staff Tuesday 3-4.30pm or Friday 9-11am
Aswin Venu will be computer lab assistant
Think of a name for your project
Deadline for personal home page now Monday Oct 26 (not a graded assignment)
2
CS102: Monsoon 2015
HTML & CSS Introhttps://www.codecademy.com/en/tracks/htmlcss
(Complete the whole course)
3
CS102: Monsoon 2015
Chrome Devtools coursehttp://discover-devtools.codeschool.com/
(at least Chapters 1 and 2)
4
CS102: Monsoon 2015
Quiz 1: recapContrasting types of memory: episodic vs. semantic
Stroop test: time to name color can tell if participant might know meaning of the word (not just color words)
Cognitive biases:
Representativeness: Ignoring the base rate
Availability: Biased by samples that are easier to access
5
CS102: Monsoon 2015
Transactive memory
6
human
Externalized memory to other repositories like other people, paper or written materials, tangible objects, etc.
CS102: Monsoon 2015
EthnographyEthnography is a general method (contrast: anthropology is a discipline)
Ethnographic studies are often used by product designers to better understand their users
7
CS102: Monsoon 2015
Recap
8
CS102: Monsoon 2015
HTML 5<video>, <audio> tags
<svg>, <canvas> for drawing
form input types (date, color, email, number, etc)
Semantic tags (<article>, <section>, <progress>, etc)
localStorage - for sites to persist data in the browser (per domain)
Geolocation
Drag and drop
etc.
Examples: http://cs.ashoka.edu.in/cs102/html5.html
9 http://www.html5rocks.com/
CS102: Monsoon 2015
Events
10
human
CS102: Monsoon 2015
EventsMuch code in interactive systems is in event handlers that deal with user input
Types of events:
click, dblclick, focus, blur, hover, mousedown, mouseup, resize, unload, etc.
Event handlers are provided details such as target element, X, Y coordinates, key modifiers (alt, shift, ctrl), keycode, ….
11
CS102: Monsoon 2015
UI threadEvent handlers can trigger at any time
Which thread of execution handles the event?
UI thread, often called the main thread, handles all UI events
Long-running computations should not block the UI thread, otherwise the interface appears to freeze
12
CS102: Monsoon 2015
Runaway scripts
13
CS102: Monsoon 2015
UI threadGeneral guideline: limit computation on UI thread to no more than 50ms. Otherwise, system feels sluggish
In the browser: outsource serious computation to Web workers to avoid blocking the UI thread
Communicate between UI threads and Web workers using postMessage()
14 High Performance Javascript
CS102: Monsoon 2015
EventsEvent capture goes from top to bottom
Event bubbling: bottom to top
Handlers can be associated with either phase
Example: http://cs.ashoka.edu.in/cs102/events.html
15 http://www.quirksmode.org/js/events_order.html
CS102: Monsoon 2015
Javascript
16
human
CS102: Monsoon 2015
OverviewDesigned by Brendan Eich in 1994
De facto standard in all browsers
Now standardized as ECMAscript
Inherits ideas from Self and Scheme
Functional, object-oriented, unthreaded, loosely typed
17
CS102: Monsoon 2015
Simple operationso.p or o[‘p’]: looks up property p in object o
f(a): calls function f with argument a
x = y assigns y’s value to x
if, for, return, …
A few math operators
…
18
CS102: Monsoon 2015
Javascript primitivesAll numbers are 64 bit floats (no integers)
The values 0, null, NaN, undefined, false, ‘’” all are treated as false in if statements
No block scope, only function scope
function() { var a = 1; { var a = 2; } }
19
CS102: Monsoon 2015
Javascript objectsEach object has a pointer to another object, its prototype
Objects created with new F() where F is a function
o.p looks for p in o; if not found, in o.prototype, etc.
Properties can be added or deleted on the fly
new F() creates an object o, sets its prototype link to F’s prototype, and calls F with this set to o
20
CS102: Monsoon 2015
Javascript functionsFunctions are first-class objects: they can be passed and returned to other functions
Functions can be nested
Closures retain state after a function returns
function a() {
var x = 1;
return function() { console.log (x); }
}
21
CS102: Monsoon 2015
`
22
Recommended