www.scandiweb.com Public speaking challenge by Konstantin Zhukov

1. Javascript
04.02.2015. KZ.

2. What we won’t cover
1. Basics
2. Creating and using variables
3. Funcitons
4. Conditional statements
5. Loops
6. ……...

3. What we will cover
1. Scope
2. SAF (self-invoking anonymous functions)
3. Closures
4. Classes and objects

4. 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.

5. Scope
1. 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.

6. Scope
1. 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.

7. Scope
Why this is important?

8. 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();

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

10. SAF
Why SAF should be used?

11. Closures
1. 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?

12. Closures
1. 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?

13. 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. }

14. Closures
So what?

15. 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.

16. 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()”!

17. Objects
1. 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. }

18. Classes
1. // 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. };

19. Classes
1. 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. };

20. Classes
1. 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 :)

21. Javascript
Questions?

22. Javascript
Thank u ;)