Introduction to Javascript
Web Development 101
Lesson 02.01
Java·script
Noun

An interpreted computer programming language. As part of
web browsers, implementations allow client-side...
DISCUSS
WHY AND HOW DOES JAVASCRIPT ENABLE GMAIL TO WORK?
Example 02.01.01
http://jsfiddle.net/crgwbr/Fqhy4/
Javascript clock
var writeTime = function () {	
var parent = document.getElementById('clock'),	
timeElem = document.create...
Javascript clock
var writeTime = function () {	
var parent = document.getElementById('clock'),	
timeElem = document.create...
The DOM API
var writeTime = function () {	
var parent = document.getElementById('clock'),	
timeElem = document.createEleme...
Javascript

[proper]
Data Types
String:	
var myString = “Hello World”;	
!
Number	
var myNum = 42;	
!
Array	
var myArr = [5, 6, “seven”, 8];	
!
...
Statements & Expressions
An expression produces a value.

Can be written wherever a value is expected.

A value is in itse...
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...
Statements
var myStr = “Hello World”,	
i;	
!
for (i = 0; i < myStr.length; i++) {	
console.log(myStr[i]);	
}	

var myStr =...
Statements
var comp = function(x, y) {	
var comp = function(x, y) {	
if (x > y) {	
if (x > y) {	
return 1;	
return 1;	
} e...
Getting Fancy
var random = (function() {	
return 4; // Verified random by dice roll	
}());
IIFE
Immediately Invoked Function Expression.
Why?
scope
The context within the program in which an identifier is valid and
can be resolved to find the entity associated with ...
Javascript has lexical scoping nested at the
function level, with the global scope being the
outermost scope.
Global Scope is dangerous
myCoolApp.js	
!
var myFunc = function() {	
...	
};

someFancyPlugin.js	
!
var myFunc = function(...
Something more sane
myCoolApp.js	
!
(function() {	
var myFunc = function() {	
...	
};	
}());

someFancyPlugin.js	
!
(funct...
Closure
A function together with a referencing environment—a table storing a reference to
each of the non-local variables ...
Closures
var increment = (function() {	
var i = 0, 	
inc;	
	
inc = function(step) { 	
i += step;	
};	
!
return inc;	
}());...
Closures
var counter = function(step) {	
var i = 0, 	
inc;	
!
inc = function() { 	
i += step;	
};	
!
return inc;	
};

>>>
...
Brainstorm
I need to read the state of the counter without
incrementing it. How?
OOJS
var Counter = function(step) {	
var i = 0;	
!
this.inc = function() { 	
i += step;	
};	
!
this.get = function() {	
re...
OOJS
var Counter = function(step) {	
this.i = 0;	
this.step = step;	
};	
!
Counter.prototype = {	
inc: function() { 	
this...
Javascript

[DOM]
Requirements
We just wrote a counter object

Add a user interface

Current value should be displayed in the browser docume...
Example 02.01.02
http://jsfiddle.net/crgwbr/ynraf/
http://jsfiddle.net/crgwbr/ynraf/
Requirements Change
Page now needs to have support having n number of counters

Defaults to 3 counters

User can add anoth...
Example 02.01.03
http://jsfiddle.net/crgwbr/UjF5n/
http://jsfiddle.net/crgwbr/UjF5n/
Requirements Change

User should be able to delete any counter on the page

User can name counters they add
Example 02.01.04
http://jsfiddle.net/crgwbr/ejnN2/
http://jsfiddle.net/crgwbr/ejnN2/
That’s a Web Application.
Review
Javascript is a general purpose,
interpreted language.


Access the outside world
through injected APIs


First-cla...
Homework
Read: Web Fundamental—Javascript

Watch: Javascript—The Good Parts

http://www.youtube.com/watch?v=hQVTIJBZook
Upcoming SlideShare
Loading in …5
×

02 Introduction to Javascript

695 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
695
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

02 Introduction to Javascript

  1. 1. Introduction to Javascript Web Development 101 Lesson 02.01
  2. 2. Java·script Noun An 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.
  3. 3. DISCUSS WHY AND HOW DOES JAVASCRIPT ENABLE GMAIL TO WORK?
  4. 4. Example 02.01.01 http://jsfiddle.net/crgwbr/Fqhy4/
  5. 5. Javascript clock var writeTime = function () { var parent = document.getElementById('clock'), timeElem = document.createElement('p'), time = new Date(); ! timeElem.innerHTML = time.toUTCString(); parent.appendChild(timeElem); }; ! writeTime();
  6. 6. Javascript clock 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);
  7. 7. The DOM API 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);
  8. 8. Javascript [proper]
  9. 9. Data Types String: var myString = “Hello World”; ! Number var myNum = 42; ! Array var myArr = [5, 6, “seven”, 8]; ! Object var myObj = { key1: “Value”, key2: 42, anotherKey: myArr };
  10. 10. Statements & Expressions An 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.
  11. 11. 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
  12. 12. 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]); }
  13. 13. Statements var comp = function(x, y) { var comp = function(x, y) { if (x > y) { if (x > y) { return 1; return 1; } else { } else if (x < y) { if (x < y) { return -1; return -1; } } ! } return 0; ! }; return 0; };
  14. 14. Getting Fancy var random = (function() { return 4; // Verified random by dice roll }());
  15. 15. IIFE Immediately Invoked Function Expression. Why?
  16. 16. scope The context within the program in which an identifier is valid and can be resolved to find the entity associated with the identifier.
  17. 17. Javascript has lexical scoping nested at the function level, with the global scope being the outermost scope.
  18. 18. Global Scope is dangerous myCoolApp.js ! var myFunc = function() { ... }; someFancyPlugin.js ! var myFunc = function() { ... };
  19. 19. Something more sane myCoolApp.js ! (function() { var myFunc = function() { ... }; }()); someFancyPlugin.js ! (function() { var myFunc = function() { ... }; }());
  20. 20. 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.
  21. 21. Closures var increment = (function() { var i = 0, inc; inc = function(step) { i += step; }; ! return inc; }()); >>> increment(1); 1 >>> increment(1); 2 >>> increment(5); 7 >>> i undefined
  22. 22. Closures var counter = function(step) { var i = 0, inc; ! inc = function() { i += step; }; ! return inc; }; >>> >>> 5 >>> 10 >>> 15 var n = counter(5); n(); n(); n();
  23. 23. Brainstorm I need to read the state of the counter without incrementing it. How?
  24. 24. OOJS var Counter = function(step) { var i = 0; ! this.inc = function() { i += step; }; ! this.get = function() { return i; } }; >>> >>> 0 >>> 5 >>> 5 var n = new Counter(5); n.get(); n.inc(); n.get();
  25. 25. OOJS var Counter = function(step) { this.i = 0; this.step = step; }; ! Counter.prototype = { inc: function() { this.i += this.step; }, ! get: function() { return this.i; } }; >>> >>> 0 >>> 5 >>> 5 var n = new Counter(5); n.get(); n.inc(); n.get();
  26. 26. Javascript [DOM]
  27. 27. Requirements We 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
  28. 28. Example 02.01.02 http://jsfiddle.net/crgwbr/ynraf/
  29. 29. http://jsfiddle.net/crgwbr/ynraf/
  30. 30. 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
  31. 31. Example 02.01.03 http://jsfiddle.net/crgwbr/UjF5n/
  32. 32. http://jsfiddle.net/crgwbr/UjF5n/
  33. 33. Requirements Change User should be able to delete any counter on the page User can name counters they add
  34. 34. Example 02.01.04 http://jsfiddle.net/crgwbr/ejnN2/
  35. 35. http://jsfiddle.net/crgwbr/ejnN2/
  36. 36. That’s a Web Application.
  37. 37. Review Javascript is a general purpose, interpreted language. Access the outside world through injected APIs First-class functions C-style syntax DOM is an API for interacting with the browser and it’s HTML document Prototypical Inheritance Most UI code is event driven Runs in a Virtual Machine When used well, closures are awesome
  38. 38. Homework Read: Web Fundamental—Javascript Watch: Javascript—The Good Parts http://www.youtube.com/watch?v=hQVTIJBZook

×