JS

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 ;)