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