javascript: js301 · what is javascript? • javascript is a scripting language built into web...
TRANSCRIPT
![Page 1: JavaScript: JS301 · What is JavaScript? • JavaScript is a scripting language built into web browsers • It is not Java - it is ECMAScript • It powers web apps, mobile apps,](https://reader034.vdocuments.us/reader034/viewer/2022051912/60037d82ae22f27ff51a9717/html5/thumbnails/1.jpg)
JavaScript: JS301Week 1: An Introduction to JavaScript
1Tuesday, 10 January, 12
![Page 2: JavaScript: JS301 · What is JavaScript? • JavaScript is a scripting language built into web browsers • It is not Java - it is ECMAScript • It powers web apps, mobile apps,](https://reader034.vdocuments.us/reader034/viewer/2022051912/60037d82ae22f27ff51a9717/html5/thumbnails/2.jpg)
Introductions
• A little about your instructor
• http://blog.vicmetcalfe.com/
• A little about you
• Experience? Expectations?
2Tuesday, 10 January, 12
![Page 3: JavaScript: JS301 · What is JavaScript? • JavaScript is a scripting language built into web browsers • It is not Java - it is ECMAScript • It powers web apps, mobile apps,](https://reader034.vdocuments.us/reader034/viewer/2022051912/60037d82ae22f27ff51a9717/html5/thumbnails/3.jpg)
Fuzzy Syllabus
• Intro and Basics
• Closures and Scope
• The Document Object Model (DOM)
• jQuery
• Object Oriented JavaScript
• Best Practices
• node.js? ajax? Windows 8?
3Tuesday, 10 January, 12
![Page 4: JavaScript: JS301 · What is JavaScript? • JavaScript is a scripting language built into web browsers • It is not Java - it is ECMAScript • It powers web apps, mobile apps,](https://reader034.vdocuments.us/reader034/viewer/2022051912/60037d82ae22f27ff51a9717/html5/thumbnails/4.jpg)
What is JavaScript?
• JavaScript is a scripting language built into web browsers
• It is not Java - it is ECMAScript
• It powers web apps, mobile apps, server apps and desktop apps
• It is asynchronous, fast and powerful as hell
• JavaScript is fun!
4Tuesday, 10 January, 12
![Page 5: JavaScript: JS301 · What is JavaScript? • JavaScript is a scripting language built into web browsers • It is not Java - it is ECMAScript • It powers web apps, mobile apps,](https://reader034.vdocuments.us/reader034/viewer/2022051912/60037d82ae22f27ff51a9717/html5/thumbnails/5.jpg)
No Server Required
• JavaScript can run on a server but most commonly runs on the client or browser
• Consoles in most browsers:
• Chrome JavaScript Console
• Firebug for Firefox
• Safari Error Console
• Internet Explorer Developer Tools
5Tuesday, 10 January, 12
![Page 6: JavaScript: JS301 · What is JavaScript? • JavaScript is a scripting language built into web browsers • It is not Java - it is ECMAScript • It powers web apps, mobile apps,](https://reader034.vdocuments.us/reader034/viewer/2022051912/60037d82ae22f27ff51a9717/html5/thumbnails/6.jpg)
I’ll be Using Chrome
• Use any tool you like
• I can help you best if you use Chrome too
6Tuesday, 10 January, 12
![Page 7: JavaScript: JS301 · What is JavaScript? • JavaScript is a scripting language built into web browsers • It is not Java - it is ECMAScript • It powers web apps, mobile apps,](https://reader034.vdocuments.us/reader034/viewer/2022051912/60037d82ae22f27ff51a9717/html5/thumbnails/7.jpg)
Great JavaScript Resources
• W3 Schools: http://www.w3schools.com/js/
• YUI Theater: http://yuilibrary.com/theater/
• O’Reilly Books:
• JavaScript: The Definitive Guide
• JavaScript Patterns
7Tuesday, 10 January, 12
![Page 8: JavaScript: JS301 · What is JavaScript? • JavaScript is a scripting language built into web browsers • It is not Java - it is ECMAScript • It powers web apps, mobile apps,](https://reader034.vdocuments.us/reader034/viewer/2022051912/60037d82ae22f27ff51a9717/html5/thumbnails/8.jpg)
Getting to the Console
• In Chrome right click and choose “Inspect Element”, then go to the Console tab.
• Type:document.write(“Hello World”);
• Then press enter
8Tuesday, 10 January, 12
![Page 9: JavaScript: JS301 · What is JavaScript? • JavaScript is a scripting language built into web browsers • It is not Java - it is ECMAScript • It powers web apps, mobile apps,](https://reader034.vdocuments.us/reader034/viewer/2022051912/60037d82ae22f27ff51a9717/html5/thumbnails/9.jpg)
What just Happened?
• In web browsers, document is an object which represents the current HTML document.
• It has a method called write which writes content to the HTML document.
• We invoked that method with the text we wanted to write as a parameter.
• The method returned the value ‘undefined’.
9Tuesday, 10 January, 12
![Page 10: JavaScript: JS301 · What is JavaScript? • JavaScript is a scripting language built into web browsers • It is not Java - it is ECMAScript • It powers web apps, mobile apps,](https://reader034.vdocuments.us/reader034/viewer/2022051912/60037d82ae22f27ff51a9717/html5/thumbnails/10.jpg)
How to break it
• Try these variations:
• Document.write("Hello World");
• document.write('Hello World');
• document.write("Hello World")
• {document.write("Hello World");}
10Tuesday, 10 January, 12
![Page 11: JavaScript: JS301 · What is JavaScript? • JavaScript is a scripting language built into web browsers • It is not Java - it is ECMAScript • It powers web apps, mobile apps,](https://reader034.vdocuments.us/reader034/viewer/2022051912/60037d82ae22f27ff51a9717/html5/thumbnails/11.jpg)
Variables
• Variables hold values:
• This also sends “Hello World” to the browser.
• Variable assignments return the assignment value.
> greeting = "Hello World"; "Hello World"> document.write(greeting); undefined
11Tuesday, 10 January, 12
![Page 12: JavaScript: JS301 · What is JavaScript? • JavaScript is a scripting language built into web browsers • It is not Java - it is ECMAScript • It powers web apps, mobile apps,](https://reader034.vdocuments.us/reader034/viewer/2022051912/60037d82ae22f27ff51a9717/html5/thumbnails/12.jpg)
Operators
• You can perform operations on variables:
• What other operations do you think you could apply to variables?
> apples = "Apples"; "Apples"> bananas = "Bananas"; "Bananas"> ilike = apples + " & " + bananas; "Apples & Bananas"
12Tuesday, 10 January, 12
![Page 13: JavaScript: JS301 · What is JavaScript? • JavaScript is a scripting language built into web browsers • It is not Java - it is ECMAScript • It powers web apps, mobile apps,](https://reader034.vdocuments.us/reader034/viewer/2022051912/60037d82ae22f27ff51a9717/html5/thumbnails/13.jpg)
Types
• Variables have types:
Number:
> one = 1; 1> two = 2; 2> one + two 3
String:
> one = "1"; "1"> two = "2"; "2"> one + two "12"
Boolean:
> yup = true; true> nope = false; false> 5 < 2; false> !nope true
13Tuesday, 10 January, 12
![Page 14: JavaScript: JS301 · What is JavaScript? • JavaScript is a scripting language built into web browsers • It is not Java - it is ECMAScript • It powers web apps, mobile apps,](https://reader034.vdocuments.us/reader034/viewer/2022051912/60037d82ae22f27ff51a9717/html5/thumbnails/14.jpg)
Arrays• Array literals:
> fibonacci = [0,1,1,2,3,5,8,13]; [0, 1, 1, 2, 3, 5, 8, 13]> fibonacci.push(21); 9> fibonacci [0, 1, 1, 2, 3, 5, 8, 13, 21]> fibonacci.length; 9> fibonacci[2]; 1> fibonacci[6]; 8
14Tuesday, 10 January, 12
![Page 15: JavaScript: JS301 · What is JavaScript? • JavaScript is a scripting language built into web browsers • It is not Java - it is ECMAScript • It powers web apps, mobile apps,](https://reader034.vdocuments.us/reader034/viewer/2022051912/60037d82ae22f27ff51a9717/html5/thumbnails/15.jpg)
Objects
• Object Literals:> Rectangle = { width: 10, height: 5 }; ▶ Object> rectangle.height 5> rectangle.length undefined
15Tuesday, 10 January, 12
![Page 16: JavaScript: JS301 · What is JavaScript? • JavaScript is a scripting language built into web browsers • It is not Java - it is ECMAScript • It powers web apps, mobile apps,](https://reader034.vdocuments.us/reader034/viewer/2022051912/60037d82ae22f27ff51a9717/html5/thumbnails/16.jpg)
More Types
• Functions
• Undefined
More on these later.
16Tuesday, 10 January, 12
![Page 17: JavaScript: JS301 · What is JavaScript? • JavaScript is a scripting language built into web browsers • It is not Java - it is ECMAScript • It powers web apps, mobile apps,](https://reader034.vdocuments.us/reader034/viewer/2022051912/60037d82ae22f27ff51a9717/html5/thumbnails/17.jpg)
if conditional> age = 13; 13> if (age >= 16) console.log("Old enough to vote!"); undefined> age = 25; 25> if (age >= 16) console.log("Old enough to vote!"); Old enough to vote! undefined
17Tuesday, 10 January, 12
![Page 18: JavaScript: JS301 · What is JavaScript? • JavaScript is a scripting language built into web browsers • It is not Java - it is ECMAScript • It powers web apps, mobile apps,](https://reader034.vdocuments.us/reader034/viewer/2022051912/60037d82ae22f27ff51a9717/html5/thumbnails/18.jpg)
if conditional> age = 15; 15> if ((age > 12) && (age < 20)) console.log("Teen"); Teen undefined> if ((age > 12) && (age < 20)) { console.log("Teen"); } Teen undefined
18Tuesday, 10 January, 12
![Page 19: JavaScript: JS301 · What is JavaScript? • JavaScript is a scripting language built into web browsers • It is not Java - it is ECMAScript • It powers web apps, mobile apps,](https://reader034.vdocuments.us/reader034/viewer/2022051912/60037d82ae22f27ff51a9717/html5/thumbnails/19.jpg)
if conditional> age = 15; 15> if (age >= 16) { console.log("Old enough to drive"); } else { console.log("Old enough in " + (16 - age) + " year(s)"); } Old enough in 1 year(s) undefined
19Tuesday, 10 January, 12
![Page 20: JavaScript: JS301 · What is JavaScript? • JavaScript is a scripting language built into web browsers • It is not Java - it is ECMAScript • It powers web apps, mobile apps,](https://reader034.vdocuments.us/reader034/viewer/2022051912/60037d82ae22f27ff51a9717/html5/thumbnails/20.jpg)
JSFIDDLE
• We’re outgrowing the JavaScript console!
• JSFIDDLE is another great way to play with JavaScript.
• Check out the next demo there:http://jsfiddle.net/zymsys/J88N5/
20Tuesday, 10 January, 12
![Page 21: JavaScript: JS301 · What is JavaScript? • JavaScript is a scripting language built into web browsers • It is not Java - it is ECMAScript • It powers web apps, mobile apps,](https://reader034.vdocuments.us/reader034/viewer/2022051912/60037d82ae22f27ff51a9717/html5/thumbnails/21.jpg)
Loops: for
• For loops are the most common type of loop in JavaScript:
for (i = 1; i <=10; i++) { document.write("<div>" + i + "</div>");}
http://jsfiddle.net/zymsys/awXGn/
21Tuesday, 10 January, 12
![Page 22: JavaScript: JS301 · What is JavaScript? • JavaScript is a scripting language built into web browsers • It is not Java - it is ECMAScript • It powers web apps, mobile apps,](https://reader034.vdocuments.us/reader034/viewer/2022051912/60037d82ae22f27ff51a9717/html5/thumbnails/22.jpg)
Loops: while
• While loops run until a condition is met
i = 1; while (i <=10) { document.write("<div>" + i + "</div>"); i += 1;}
http://jsfiddle.net/zymsys/AShuA/
22Tuesday, 10 January, 12
![Page 23: JavaScript: JS301 · What is JavaScript? • JavaScript is a scripting language built into web browsers • It is not Java - it is ECMAScript • It powers web apps, mobile apps,](https://reader034.vdocuments.us/reader034/viewer/2022051912/60037d82ae22f27ff51a9717/html5/thumbnails/23.jpg)
Loops: break & continue
• Break jumps out of a loop
• Continue jumps back to the start of the loop
• http://jsfiddle.net/zymsys/8uHr6/
23Tuesday, 10 January, 12
![Page 24: JavaScript: JS301 · What is JavaScript? • JavaScript is a scripting language built into web browsers • It is not Java - it is ECMAScript • It powers web apps, mobile apps,](https://reader034.vdocuments.us/reader034/viewer/2022051912/60037d82ae22f27ff51a9717/html5/thumbnails/24.jpg)
Loops: for .. in
• Loops over the items in an array or object
• http://jsfiddle.net/zymsys/s8ABu/
24Tuesday, 10 January, 12
![Page 25: JavaScript: JS301 · What is JavaScript? • JavaScript is a scripting language built into web browsers • It is not Java - it is ECMAScript • It powers web apps, mobile apps,](https://reader034.vdocuments.us/reader034/viewer/2022051912/60037d82ae22f27ff51a9717/html5/thumbnails/25.jpg)
Functions
• Functions group code into re-usable chunks
• Can take parameters
• Can return values
• http://jsfiddle.net/zymsys/heKGP/
• http://jsfiddle.net/zymsys/DwMBE/
25Tuesday, 10 January, 12
![Page 26: JavaScript: JS301 · What is JavaScript? • JavaScript is a scripting language built into web browsers • It is not Java - it is ECMAScript • It powers web apps, mobile apps,](https://reader034.vdocuments.us/reader034/viewer/2022051912/60037d82ae22f27ff51a9717/html5/thumbnails/26.jpg)
Exception Handling
• Instead of returning error codes you can “throw” errors up the call stack to error handlers
• http://jsfiddle.net/zymsys/xskxy/
26Tuesday, 10 January, 12
![Page 27: JavaScript: JS301 · What is JavaScript? • JavaScript is a scripting language built into web browsers • It is not Java - it is ECMAScript • It powers web apps, mobile apps,](https://reader034.vdocuments.us/reader034/viewer/2022051912/60037d82ae22f27ff51a9717/html5/thumbnails/27.jpg)
Next Week...
• Advanced Functions and Closures
• Variable Scope
• The Document Object Model
• jQuery
27Tuesday, 10 January, 12