![Javascript
[proper]](https://image.slidesharecdn.com/02introtojs-140227072659-phpapp02/85/02-Introduction-to-Javascript-8-320.jpg)
![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
};](https://image.slidesharecdn.com/02introtojs-140227072659-phpapp02/85/02-Introduction-to-Javascript-9-320.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]);
}](https://image.slidesharecdn.com/02introtojs-140227072659-phpapp02/85/02-Introduction-to-Javascript-12-320.jpg)
![Javascript
[DOM]](https://image.slidesharecdn.com/02introtojs-140227072659-phpapp02/85/02-Introduction-to-Javascript-26-320.jpg)
02 Introduction to Javascript
- 1. Introduction to Javascript Web Development 101 Lesson 02.01
- 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. DISCUSS WHY AND HOW DOES JAVASCRIPT ENABLE GMAIL TO WORK?
- 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. 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. 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);
- 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. 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. 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. 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. 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. Getting Fancy var random = (function() { return 4; // Verified random by dice roll }());
- 15. IIFE Immediately Invoked Function Expression. Why?
- 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. Javascript has lexical scoping nested at the function level, with the global scope being the outermost scope.
- 18. Global Scope is dangerous myCoolApp.js ! var myFunc = function() { ... }; someFancyPlugin.js ! var myFunc = function() { ... };
- 19. Something more sane myCoolApp.js ! (function() { var myFunc = function() { ... }; }()); someFancyPlugin.js ! (function() { var myFunc = function() { ... }; }());
- 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. 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. 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. Brainstorm I need to read the state of the counter without incrementing it. How?
- 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. 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. Javascript [DOM]
- 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
- 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
- 33. Requirements Change User should be able to delete any counter on the page User can name counters they add
- 36. That’s a Web Application.
- 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. Homework Read: Web Fundamental—Javascript Watch: Javascript—The Good Parts http://www.youtube.com/watch?v=hQVTIJBZook