JavaScript Print slides by Sean Boyle, with overall content based on material provided by Dan Bogaard, from: http://people.rit.edu/dsbics/536/lecture/jsBasics.html Additional material by Charlie Roberts 1

JavaScript What is it? NOT Java Based on ECMAScript Light-weight language (compiled V8, SpiderMonkey, Chakra) Object-oriented Client-side and server-side via node.js application NOT Java LiveScript JavaScript JScript Based on ECMAScript Open-source “universal” language

JavaScript Prototype-based inheritance model (based on Self) Any object can inherit from any other object Different from C++/Java which use abstract classes. Functional Functions are first-class values, can be passed as arguments to functions and returned from calls to functions. They’re also objects! Syntax is based on Java (part of the reason for the name “JavaScript”) which in turn is based on C++

JavaScript ES5 – first standardized in 2009, now supported in almost all browsers. Only contains functional scoping (more later). ES6 / ES2015 – Mostly supported, but only Safari (!!!) has 100% support. Enables both block and functional scoping and in general is much, much, nicer. http://kangax.github.io/compat-table/es6/

JavaScript How do I know it will work? Implemented in all major browsers …but not implemented the same http://caniuse.com/

JavaScript Basics Placement Between a pair of <script> and </script> tags in body or head. //comments, code and functions go here! var x=5; myFunct(x); </script> From an external file specified by the src attribute of <script> tag <script type="text/javascript" src="../myScript.js”/>

JavaScript Basics Placement In an event handler, specified as the value of an HTML attribute such as onclick or onmouseover <a href="#" onclick="window.location='http://www.rit.edu’; alert(myFunct())">click to make it happen</a> As the body of a URL that uses the special javascript: protocol. <a href="javascript: window.location='http://www.rit.edu'; alert(myFunct())">click to make it happen</a>

JavaScript Basics Comments: Troubleshooting //This is a single line comment /*This is a multiple line comment*/ Troubleshooting Firefox: Go Tools > Web Developer > Web Console, or use Firebug Chrome: Right-click > Inspect Element > Console 8

Programming Refresher Variables (type, scope, declaration) JavaScript variables are un-typed Scope is very important. Assuming we’re using ES5, all scope of variables is determined by the function they’re created in. If they’re not created inside of a function, then they are global. Conditionals (if, switch) Loops (for, for...in, while, do...while) Functions Discuss the concept of scope 9

JS Objects Everything is an object! Window Document Navigator elements Properties - Object Descriptions Name Length Source Value Methods - Object Actions write() open() cloneNode() RemoveEventListener()

Document Object Model

DOM Everything in HTML is a box Everything also is uniquely identified by ID (we know how to do this, right?) JavaScript can access any element within this structure, by its name or ID…

JavaScript Basics Use document.querySelector to find element via CSS selector: // find by id attribute myBtn = document.querySelector(‘#myBtn’) // find by class myBtn2 = document.querySelector(‘.myBtn2’) // find by tag name header = document.querySelector(‘h1’)

JS Events Object 'Triggers': onload onunload onclick onmouseover onmouseout onmousemove onmousedown onmouseup onmove onresize onchange onsubmit onreset onresize onabort onblur onfocus ondblclick ondragdrop onerror onkeydown onkeypress onkeyup …and more! These are events that we respond to via EVENT LISTENERS 14

JS Events JavaScript Event vs. HTML attribute HTML attribute events are case in-sensitive (onmouseover or onMouseOver) <img src="pic.jpg" onmouseover="jsFunct();"> - OK! <img src="pic.jpg" onMouseOver="jsFunct();"> - OK! JS event (written between <script> tags) MUST be lower case (onmouseover) objName.onmouseover=functToHappen; - OK! objName.onMouseOver=functToHappen; - Will Break! JS is Case Sensitive! (var x is a different variable than var X)

Functions Why functions? Convenient, cleaner code, re-usability, can make execute only when we desire! Function creation must use the function keyword with parentheses and { } function myFunct(arg1, arg2){ } Function calls simply put the name of the function in the code with ( ) (that is 2 parentheses) myFunct(); myFunct(arg1, arg2); i.e. Methods 16

Functions return can be used to return a value, or jump out of a function early Useful (pre-built) functions: setTimeout() setInterval() eval() parseInt() typeof() Math.random() Math.floor() blur() focus()

Arrays Simple array construction (all of the following are same, but you should only use the last option): var newArr = new Array(3); newArr[0]=”me"; newArr[1]=34; newArr[2]=6.1; var newArr=new Array(”me",34,6.1); var newArr = [”me", 34, 6.1];

Arrays Ordered set of indexed elements... Indexed by numbers document.images[0].width - Index the array with a number Arrays are objects, so they can also have properties: console.log( ‘length is:’, myArray.length ) While document.querySelector returns a single item, document.querySelectorAll will return an array of all items matching a CSS selector.

So what? Behavior “layer” (remember those?) Rollovers (mostly done with CSS these days) Form processing and validation Web apps Games http://www.chromeexperiments.com/tag/not-webgl/ We will be scratching the surface with JavaScript, but there’s a LOT more it can do. Note 330, games in JS. 20

Demo Let’s make some rollovers!