Information Design. Professor Danne Woo! infodesign.dannewoo.com! ARTS 269 Fall 2018 Friday 10:00PM 1:50PM I-Building 212

Size: px

Start display at page:

Download "Information Design. Professor Danne Woo! infodesign.dannewoo.com! ARTS 269 Fall 2018 Friday 10:00PM 1:50PM I-Building 212"

Shawn Randall
5 years ago
Views:

1 Information Design Professor Danne Woo! infodesign.dannewoo.com! ARTS 269 Fall 2018 Friday 10:00PM 1:50PM I-Building 212

2 Interactive Data Viz Week 8: Data, the Web and Datavisual! Week 9: JavaScript and jquery! Week 10: JavaScript and APIs! Week 11: In Class Work! Week 12: JavaScript and D3! Week 13: In Class Work! Week 14: Final!

3 Web Programming Languages HTML Text and Content <h1>hello</h1> CSS Design and Style h1 { color: #ffffff; } JavaScript Animation and Interaction alert( Hi class );

4 JavaScript

5 Why JavaScript?

6 JavaScript and Data Load static data files Pull live data from API s Dynamically analyze data Dynamically visualize data Interact with the visualization

7 JavaScript Variables Arrays Functions Objects Push to HTML if statements Loops Events

8 JavaScript Noodling

9 JavaScript Variables var variablename; variablename = 10; alert(variablename);

10 JavaScript Variables

11 JavaScript Variables var numname = 10.52; var stringname = "Hi class"; var boolname = true;

12 JavaScript Arrays var arrayname = [37, 82, 95]; arrayname[1] = 82; arrayname.length = 3;

13 JavaScript Functions alert(content); console.log(content);

14 Internal JS

15 External JS

16 JavaScript Functions var greeting = "Hi class!"; function sayhello() { alert(greeting); } sayhello();

17 JavaScript Functions

18 JavaScript Functions function drawrectdiv(w, h, c) { document.write("<div style='width:" + w + "; height: " + h + "; background-color: " + c + ";'></div> "); } drawrectdiv("130px", "200px", "red");

19 JavaScript Objects var objectvarname = { name: 'Name', number: 20, boolean: true, array: ['value1', 'value2', 'value3'], fx: function() { function content; Parameters Methods } }

20 JavaScript Objects

21 JavaScript Objects var robot = { name: 'Tim', model: 1000, direction: 'right', speed: 5, walk: function() { function content; } }

22 JavaScript Objects var robotname = robot.name; var robotwalk = robot.walk(); console.log(robotname); // Tim robotwalk; // Will run walk function

23 JavaScript Objects

24 JavaScript Objects Constructor function robotarmy(name, model, weapon) { this.name = name; this.model = model; this.weapon = weapon; this.destroyhumans = function() { return this.weapon; } }

25 JavaScript Objects Constructor var t100 = new robotarmy('t-100', '100', 'Me'); var ironman = new robotarmy('iron Man', '1000', 'Missiles );

26 JavaScript Built in Objects Browser Objects: window current browser window or tab document current webpage location url or current page navigator information about browser screen devices display information Example: Get window width: window.innerwidth;

27 JavaScript Built in Objects Document Objects: title get current document title url returns current url of current document domain returns just the domain of current document write() method to write content to the document getelementbyid() method to get an HTML element by ID getelementbyclassname() method to get HTML element by class createelement() creates a new element Example: Write to webpage: document.write(); Add content to a ID: document.getelementbyid('idname').textcontent();

28 JavaScript Built in Objects String Objects: length get total number of characters touppercase() method to make text uppercase tolowercase() method to make text lowercase substring() method returns specific characters in string split() splits the string into an array at a certain point trim() removes space from start and end of string replace() allows you to replace characters Example: Split on space: var stringvar = "Hi class ; stringvar.split(" "); Returns an array: ["Hi", "class"];

29 JavaScript Built in Objects Math Objects: PI returns PI 3.14 round() rounds to nearest int ceil() rounds up floor() rounds down random() generates a random number between 0 and 1

30 JavaScript Built in Objects var today = new Date(); Tue Nov :07:36 GMT-0500 (EST) Date Objects: getdate() getday() getfullyear() gethours() getmilliseconds()

31 JavaScript Decisions if (score >= 50) { document.write('you Passed!'); } else { document.write('try again '); } == is equal!= is not equal > is greater than < is less than === is definitely equal!== is definitely not equal >= is greater than or equal <= is less than or equal

32 JavaScript Decisions if (score >= 80 && score < 90) { } document.write('you got a B!'); && and or! logical not (takes a boolean and inverts it)

33 JavaScript Loops for (var i = 0; i < 10; i++) { } document.write(i);

34 JavaScript Loops var arraynum = [ 30, 82, 94, 72, 94 ]; for (var i = 0; i < arraynum.length; i++) { document.write("<div style='height: 20px; background-color: red; width: " + arraynum[i] + "px;'></div>"); }

35 JavaScript Events Window: load when the page has loaded resize when the page has been resized scroll when the user scrolls the page Keyboard: keydown when user presses a key (repeats while down) keyup when a user releases a key

36 JavaScript Events Mouse: click when the user clicks an element dblclick when a user double clicks an element mousedown when a user presses the mouse while over an element mouseup when a user release the mouse over an element mousemove when a use moves the mouse mouseover when a user hovers over an element mouseout when a user moves the mouse off an element

37 JavaScript Events Handling Events var el = document.getelementbyid('button'); el.addeventlistener('click', function() { }, true); alert('button clicked!');

38 jquery

39 jquery Selector Parameters jquery( 'li' ).addclass( 'important' ); jquery Object Method

40 jquery $( 'li' ).addclass( 'important' );

41 jquery HTML Elements: $( 'li' ).addclass( 'important' ); Class Name: $( '.classname' ).addclass( 'important' ); ID Name: $( '#idname' ).addclass( 'important' );

42 jquery Chaining $('#box').hide().delay(500).fadein(1500);

43 jquery Common Methods.html("<div id='box'></div>");.text("text goes here.");.replacewith("replaced text with this.");.remove();.hide();.show();.toggle();.append("add this text to the end of the existing text.");.prepend("add this text to the beginning of the existing text.");

44 jquery Common Stylistic Methods.addClass("Add this class to this element");.removeclass("remove this class from this element");.css("background-color", "red");.css("margin-left", "+=20");.css({ "background-color": "red", "font-family": "Helvetica" });

45 jquery Common Event Methods.on("click", function() { }); $(this).hide(); Popular Events: click, dblclick, mouseup, mousedown, mouseover, mousemove, mouseout, hover, resize, scroll, input, keydown, keyup, keypress

46 jquery Basic Effect Methods.delay(milliseconds);.slideUp("speed");.slideDown("speed");.slideToggle("speed");.fadeIn(milliseconds);.fadeOut(milliseconds);.fadeTo("speed", range from 0-1);.stop();

47 jquery Animating CSS Properties.animate({ // CSS styles go here. }, speed); $('.box').on('click', function() { }); $(this).animate({ 'opacity': '0.5', 'margin-left': '+=100' }, 1000);

48 jquery Checking if Page is Ready $('document').ready(function() { } // Your script goes here

49 jquery Documentation

50 In Class Assignment / Homework Create a simple abstract clock using JavaScript and jquery. Try not to use numbers but rather look at changing the appearance of HTML elements; look at using simple shapes, type, images and changing their size, color, location, opacity, rotation, etc. Tips: Create a function to display the time. Use the Date object to get the current time. Use setinterval(displaytimefunction, 1000) to update the time function every second.

729G26 Interaction Programming. Lecture 4

729G26 Interaction Programming Lecture 4 Lecture overview jquery - write less, do more Capturing events using jquery Manipulating the DOM, attributes and content with jquery Animation with jquery Describing