Week 1 Introduction to Mobile Development & Phone Gap Introduction to Javascript.
JavaScript: JS301 Week 1: An Introduction to JavaScript.
-
Upload
fernanda-yap -
Category
Documents
-
view
218 -
download
0
Transcript of JavaScript: JS301 Week 1: An Introduction to JavaScript.
![Page 1: JavaScript: JS301 Week 1: An Introduction to JavaScript.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649c995503460f949567e9/html5/thumbnails/1.jpg)
JavaScript: JS301Week 1: An Introduction to JavaScript
![Page 2: JavaScript: JS301 Week 1: An Introduction to JavaScript.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649c995503460f949567e9/html5/thumbnails/2.jpg)
Introductions
•A little about your instructor
•http://blog.vicmetcalfe.com/
•A little about you
•Experience? Expectations?
![Page 3: JavaScript: JS301 Week 1: An Introduction to JavaScript.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649c995503460f949567e9/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?
![Page 4: JavaScript: JS301 Week 1: An Introduction to JavaScript.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649c995503460f949567e9/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!
![Page 5: JavaScript: JS301 Week 1: An Introduction to JavaScript.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649c995503460f949567e9/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
![Page 6: JavaScript: JS301 Week 1: An Introduction to JavaScript.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649c995503460f949567e9/html5/thumbnails/6.jpg)
I’ll be Using Chrome
•Use any tool you like
•I can help you best if you use Chrome too
![Page 7: JavaScript: JS301 Week 1: An Introduction to JavaScript.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649c995503460f949567e9/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
![Page 8: JavaScript: JS301 Week 1: An Introduction to JavaScript.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649c995503460f949567e9/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
![Page 9: JavaScript: JS301 Week 1: An Introduction to JavaScript.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649c995503460f949567e9/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’.
![Page 10: JavaScript: JS301 Week 1: An Introduction to JavaScript.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649c995503460f949567e9/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");}
![Page 11: JavaScript: JS301 Week 1: An Introduction to JavaScript.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649c995503460f949567e9/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
![Page 12: JavaScript: JS301 Week 1: An Introduction to JavaScript.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649c995503460f949567e9/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"
![Page 13: JavaScript: JS301 Week 1: An Introduction to JavaScript.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649c995503460f949567e9/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
![Page 14: JavaScript: JS301 Week 1: An Introduction to JavaScript.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649c995503460f949567e9/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
![Page 15: JavaScript: JS301 Week 1: An Introduction to JavaScript.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649c995503460f949567e9/html5/thumbnails/15.jpg)
Objects
•Object Literals:> Rectangle = { width: 10, height: 5 }; ▶ Object> rectangle.height 5> rectangle.length undefined
![Page 16: JavaScript: JS301 Week 1: An Introduction to JavaScript.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649c995503460f949567e9/html5/thumbnails/16.jpg)
More Types
•Functions
•Undefined
More on these later.
![Page 17: JavaScript: JS301 Week 1: An Introduction to JavaScript.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649c995503460f949567e9/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
![Page 18: JavaScript: JS301 Week 1: An Introduction to JavaScript.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649c995503460f949567e9/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
![Page 19: JavaScript: JS301 Week 1: An Introduction to JavaScript.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649c995503460f949567e9/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
![Page 20: JavaScript: JS301 Week 1: An Introduction to JavaScript.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649c995503460f949567e9/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/
![Page 21: JavaScript: JS301 Week 1: An Introduction to JavaScript.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649c995503460f949567e9/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/
![Page 22: JavaScript: JS301 Week 1: An Introduction to JavaScript.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649c995503460f949567e9/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/
![Page 23: JavaScript: JS301 Week 1: An Introduction to JavaScript.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649c995503460f949567e9/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/
![Page 24: JavaScript: JS301 Week 1: An Introduction to JavaScript.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649c995503460f949567e9/html5/thumbnails/24.jpg)
Loops: for .. in
•Loops over the items in an array or object
•http://jsfiddle.net/zymsys/s8ABu/
![Page 25: JavaScript: JS301 Week 1: An Introduction to JavaScript.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649c995503460f949567e9/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/
![Page 26: JavaScript: JS301 Week 1: An Introduction to JavaScript.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649c995503460f949567e9/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/
![Page 27: JavaScript: JS301 Week 1: An Introduction to JavaScript.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649c995503460f949567e9/html5/thumbnails/27.jpg)
Next Week...
•Advanced Functions and Closures
•Variable Scope
•The Document Object Model
•jQuery