CS 102 Human-Computer Interaction Lecture 13: HTML, HTTP, CSS and Javascript CS102: Monsoon 2015 1
Course updates User understanding report due today All (remaining) project teams should meet course sta ff 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) CS102: Monsoon 2015 2
HTML & CSS Intro https://www.codecademy.com/en/tracks/htmlcss (Complete the whole course) CS102: Monsoon 2015 3
Chrome Devtools course http://discover-devtools.codeschool.com/ (at least Chapters 1 and 2) CS102: Monsoon 2015 4
Quiz 1: recap Contrasting 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 CS102: Monsoon 2015 5
Transactive memory Externalized memory to other repositories like other people, paper or written materials, tangible objects, etc. 6 CS102: Monsoon 2015
Ethnography Ethnography is a general method (contrast: anthropology is a discipline) Ethnographic studies are often used by product designers to better understand their users CS102: Monsoon 2015 7
Recap CS102: Monsoon 2015 8
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 CS102: Monsoon 2015 9 http://www.html5rocks.com/
Events 10 CS102: Monsoon 2015
Events Much 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 modi fi ers (alt, shift, ctrl), keycode, …. CS102: Monsoon 2015 11
UI thread Event 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 CS102: Monsoon 2015 12
Runaway scripts CS102: Monsoon 2015 13
UI thread General 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() CS102: Monsoon 2015 14 High Performance Javascript
Events Event 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 CS102: Monsoon 2015 15 http://www.quirksmode.org/js/events_order.html
Javascript 16 CS102: Monsoon 2015
Overview Designed 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 CS102: Monsoon 2015 17
Simple operations o.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 … CS102: Monsoon 2015 18
Javascript primitives All numbers are 64 bit fl oats (no integers) The values 0, null, NaN, unde fi ned, false, ‘’” all are treated as false in if statements No block scope, only function scope function() { var a = 1; { var a = 2; } } CS102: Monsoon 2015 19
Javascript objects Each 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 fl y new F() creates an object o , sets its prototype link to F ’s prototype, and calls F with this set to o CS102: Monsoon 2015 20
Javascript functions Functions are fi rst-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); } } CS102: Monsoon 2015 21
` CS102: Monsoon 2015 22
Recommend
More recommend
