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

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

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!

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

JavaScript

Why JavaScript?

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

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

JavaScript Noodling

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

JavaScript Variables

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

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

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

Internal JS

External JS

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

JavaScript Functions

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

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

JavaScript Objects

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

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

JavaScript Objects

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

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

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;

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();

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"];

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

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

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

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

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

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>"); }

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

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

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

jquery

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

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

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

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

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.");

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" });

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

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

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

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

jquery Documentation

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.