documentjs
TRANSCRIPT
Javascript04.02.2015. KZ.
What we won’t cover
1. Basics2. Creating and using variables3. Funcitons4. Conditional statements5. Loops6. ……...
What we will cover
1. Scope2. SAF (self-invoking anonymous functions)3. Closures4. Classes and objects
Scope
Scope is an area of variable visibility. Most global scope is window object.
You can use defined variable in lower scopes, but you can’t use it in upper scope.
Scope1. var word = "Scandiweb",
2. output = function() {
3. console.log(word);
4. };
5.
6. output();
This is an example of upper scope variable inheritance. This will output to
console “Scandiweb” string, as expected.
Scope1. var word = "Scandiweb",
2. output = function() {
3. var word = "Scandi";
4. console.log(word);
5. };
6.
7. output();
Lower scope variables will always take precedence over upper ones. So, in this case “Scandi” will be outputted to the console.
Scope
Why this is important?
SAF
SAF has no difference from other functions, except it launches itself.
(function(){
// code goes here
})();
// Other way to write it
function() {
// code goes here
}.call();
SAF
It is possible to pass any amount of arguments to this functions, as for usual function.
1. (function($, doc, win, undef){
2. // jQuery is now available with $
3. })(jQuery, document, window);
SAF
Why SAF should be used?
Closures1. var sayHello = (function() {
2. var firstWord = 'Hello, ';
3. return function(name) {
4. return firstWord + name + '!';
5. }
6. })();
7.
8. alert(sayHello('Scandiweb')); // Hello, Scandiweb!
9. alert(sayHello('Antons')); // Hello, Antons!
Why this works this way?
Closures1. var linksArray = document.getElementsByTagName('a');
2.
3. for (var i = 0; i < 3; i++) {
4. linksArray[i].onclick = function() {
5. console.log(i);
6. }
7. }
Considering, we have three links (<a> tags) on page, and on click we want to get link index, what is wrong with this piece of code?
Closures
Right way to do it:
1. var linksArray = document.getElementsByTagName('a');
2.
3. for (var i = 0; i < 3; i++) {
4. linksArray[i].onclick = (function(count) {
5. return function() {
6. alert(count);
7. }
8. })(i);
9. }
Closures
So what?
Objects
So, we all know what is an object, right?
1. var object = {
2. 'foo': 'bar',
3. 'baz': [
4. 'foo',
5. 'bar'
6. ]
7. };
Here is a simple object, containing two elements.
Classes
To make things a bit simplier, let say this: any class in JS basically is a function. At least, up until now - seems like real OOP is coming up in ECMAScript 6.
So, lets try to write our own “Class.create()”!
Objects1. var foo = Class.create({
2. initialize: function() {
3. // code here
4. },
5. someOtherFunction: function() {
6. // code here
7. }
8. });
9.
10. // Or, we even can do this
11. var bar = Class.create({});
12. bar.prototype.initalize = function() {
13. // code here
14. }
Classes1. // Our class creator
2. var Class = {
3. create: function(methods) {
4. function instance() {
5. // Call our contructor function
6. this.start.apply(this, arguments);
7. };
8. for (key in methods) { // Extend our instance with passed methods
9. if (methods.hasOwnProperty(key)) {
10. instance.prototype[key] = methods[key];
11. }
12. }
13. return instance;
14. }
15. };
Classes1. var speakerClass = Class.create({
2. start: function(name) {
3. this.name = name;
4. },
5. sayHiToSpeaker: function() {
6. return 'Hello, ' + this.name + '!';
7. }
8. });
9. var speakerObject1 = new speakerClass('John'),
10. speakerObject2 = new speakerClass('Joe');
11. speakerClass.prototype.smile = function() {
12. return this.name + ' smiles :)';
13. };
Classes1. console.log(speakerObject1.sayHiToSpeaker()); // Hello, John!
2. console.log(speakerObject2.sayHiToSpeaker()); // Hello, Joe!
3.
4. console.log(speakerObject1.smile()); // John smiles :)
5. console.log(speakerObject2.smile()); // Joe smiles :)
Javascript
Questions?
Javascript
Thank u ;)