02 Introduction to Javascript
-
Upload
crgwbr -
Category
Technology
-
view
420 -
download
0
Transcript of 02 Introduction to Javascript
![Page 1: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/1.jpg)
Introduction to JavascriptWeb Development 101 Lesson 02.01
![Page 2: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/2.jpg)
Java·script NounAn interpreted computer programming language. As part of web browsers, implementations allow client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed.
![Page 3: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/3.jpg)
DISCUSSWHY AND HOW DOES JAVASCRIPT ENABLE GMAIL TO WORK?
![Page 4: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/4.jpg)
Example 02.01.01 http://jsfiddle.net/crgwbr/Fqhy4/
![Page 5: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/5.jpg)
var writeTime = function () { var parent = document.getElementById('clock'), timeElem = document.createElement('p'), time = new Date();! timeElem.innerHTML = time.toUTCString(); parent.appendChild(timeElem);};!writeTime();
Javascript clock
![Page 6: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/6.jpg)
var writeTime = function () { var parent = document.getElementById('clock'), timeElem = document.createElement('p'), time = new Date();! timeElem.innerHTML = time.toUTCString(); parent.innerHTML = “”; parent.appendChild(timeElem);};!setInterval(writeTime, 500);
Javascript clock
![Page 7: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/7.jpg)
var writeTime = function () { var parent = document.getElementById('clock'), timeElem = document.createElement('p'), time = new Date();! timeElem.innerHTML = time.toUTCString(); parent.innerHTML = “”; parent.appendChild(timeElem);};!setInterval(writeTime, 500);
The DOM API
![Page 8: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/8.jpg)
Javascript [proper]
![Page 9: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/9.jpg)
Data TypesString: var myString = “Hello World”;!Number var myNum = 42;!Array var myArr = [5, 6, “seven”, 8];!Object var myObj = { key1: “Value”, key2: 42, anotherKey: myArr };
![Page 10: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/10.jpg)
Statements & ExpressionsAn expression produces a value.
Can be written wherever a value is expected.
A value is in itself an expression.
A statement performs an action.
Statements manipulate interpreter flow and perform actions.
Wherever a statement is expected, you may write an Expression. The opposite is not true.
![Page 11: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/11.jpg)
Expressions
var f = function(x) { return (x * x) + 5; };!var a = f(1);var b = f(2 * 3);
f(x) → x2 + 5
!f(1) ≍ 1 f(2 × 3) ≍ 36
![Page 12: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/12.jpg)
Statements
var myStr = “Hello World”, i;!for (i = 0; i < myStr.length; i++) { console.log(myStr[i]);}
var myStr = “Hello World”, i = 0;!while (i < myStr.length) { i++; console.log(myStr[i]);}
![Page 13: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/13.jpg)
Statementsvar comp = function(x, y) { if (x > y) { return 1; } else if (x < y) { return -1; }! return 0;};
var comp = function(x, y) { if (x > y) { return 1; } else { if (x < y) { return -1; } }! return 0;};
![Page 14: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/14.jpg)
Getting Fancy
var random = (function() { return 4; // Verified random by dice roll}());
![Page 15: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/15.jpg)
IIFE Immediately Invoked Function Expression.
Why?
![Page 16: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/16.jpg)
scope The context within the program in which an identifier is valid and can be resolved to find the entity associated with the identifier.
![Page 17: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/17.jpg)
Javascript has lexical scoping nested at the function level, with the global scope being the outermost scope.
![Page 18: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/18.jpg)
Global Scope is dangerousmyCoolApp.js!var myFunc = function() { ...};
someFancyPlugin.js!var myFunc = function() { ...};
![Page 19: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/19.jpg)
Something more sanemyCoolApp.js!(function() { var myFunc = function() { ... };}());
someFancyPlugin.js!(function() { var myFunc = function() { ... };}());
![Page 20: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/20.jpg)
Closure A function together with a referencing environment—a table storing a reference to each of the non-local variables of that function. A closure allows a function to access non-local variables even when invoked outside its immediate lexical scope.
![Page 21: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/21.jpg)
Closuresvar increment = (function() { var i = 0, inc; inc = function(step) { i += step; };! return inc;}());
>>> increment(1);1>>> increment(1);2>>> increment(5);7>>> iundefined
![Page 22: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/22.jpg)
Closuresvar counter = function(step) { var i = 0, inc;! inc = function() { i += step; };! return inc;};
>>> var n = counter(5);>>> n();5>>> n();10>>> n();15
![Page 23: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/23.jpg)
Brainstorm I need to read the state of the counter without incrementing it. How?
![Page 24: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/24.jpg)
OOJSvar Counter = function(step) { var i = 0;! this.inc = function() { i += step; };! this.get = function() { return i; }};
>>> var n = new Counter(5);>>> n.get();0>>> n.inc();5>>> n.get();5
![Page 25: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/25.jpg)
OOJSvar Counter = function(step) { this.i = 0; this.step = step;};!Counter.prototype = { inc: function() { this.i += this.step; },! get: function() { return this.i; }};
>>> var n = new Counter(5);>>> n.get();0>>> n.inc();5>>> n.get();5
![Page 26: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/26.jpg)
Javascript [DOM]
![Page 27: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/27.jpg)
RequirementsWe just wrote a counter object
Add a user interface
Current value should be displayed in the browser document
There should be a button to increment the count
There should be another button to reset the count
![Page 28: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/28.jpg)
Example 02.01.02 http://jsfiddle.net/crgwbr/ynraf/
![Page 30: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/30.jpg)
Requirements Change
Page now needs to have support having n number of counters
Defaults to 3 counters
User can add another by clicking a button
![Page 31: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/31.jpg)
Example 02.01.03 http://jsfiddle.net/crgwbr/UjF5n/
![Page 32: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/32.jpg)
http://jsfiddle.net/crgwbr/UjF5n/
![Page 33: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/33.jpg)
Requirements Change
User should be able to delete any counter on the page
User can name counters they add
![Page 34: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/34.jpg)
Example 02.01.04 http://jsfiddle.net/crgwbr/ejnN2/
![Page 35: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/35.jpg)
http://jsfiddle.net/crgwbr/ejnN2/
![Page 36: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/36.jpg)
That’s a Web Application.
![Page 37: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/37.jpg)
ReviewJavascript is a general purpose, interpreted language.
First-class functions
C-style syntax
Prototypical Inheritance
Runs in a Virtual Machine
Access the outside world through injected APIs
DOM is an API for interacting with the browser and it’s HTML document
Most UI code is event driven
When used well, closures are awesome
![Page 38: 02 Introduction to Javascript](https://reader034.fdocuments.us/reader034/viewer/2022052412/55907bc21a28ab8c6f8b4796/html5/thumbnails/38.jpg)
HomeworkRead: Web Fundamental—Javascript
Watch: Javascript—The Good Parts
http://www.youtube.com/watch?v=hQVTIJBZook