1. JavaScript
Print slides by Sean Boyle, with overall content based on material provided by Dan Bogaard, from:
Additional material by Charlie Roberts 1

2. 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

3. 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++

4. 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.

5. JavaScript How do I know it will work?
Implemented in all major browsers
…but not implemented the same

6. 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”/>

7. 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=' 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=' alert(myFunct())">click to make it happen</a>

8. 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

9. 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

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

11. Document Object Model

12. 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…

13. 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’)

14. 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

15. 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)

16. 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

17. 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()

18. 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];

19. 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.

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

21. Demo
Let’s make some rollovers!