JavaScript Overview webinar presentation http://www.returnonintelligence.ru/webinars/javascript-overview/

1. Core Systems Transformation Solutions
Introduction to javaScript
Tutor: Maxim Maltsev, ROI

2. Confidential 2
The Plan
Re-Introduction to Javascript
• History1
• Variables2
• Types3
• Operators4
• Control structures5
• Functions6
• Objects7
• Scope8
• Closures9

3. Confidential 3
The Plan
Re-Introduction to Javascript
• History1
• Variables2
• Types3
• Operators4
• Control structures5
• Functions6
• Objects7
• Scope8
• Closures9

4. Confidential 4
Javascript: History
1995. Brendon Eich,
Netscape
1996. JScript.
Microsoft
1997.
ECMAScript
standard
1999.
ECMAScript
3 standard

5. Confidential 5
The Plan
Re-Introduction to Javascript
• History1
• Variables2
• Types3
• Operators4
• Control structures5
• Functions6
• Objects7
• Scope8
• Closures9

6. Confidential 6
Javascript: Variables
var a;
var name = "simon";
var count = 6;
isInserted = false;

7. Confidential 7
The Plan
Re-Introduction to Javascript
• History1
• Variables2
• Types3
• Operators4
• Control structures5
• Functions6
• Objects7
• Scope8
• Closures9

8. Confidential 8
Numbers
Strings
Booleans
Null
Undefined
Javascript: Types: Numbers
0.1 + 0.2 == 0.30000000000000004
Math.sin(3.5); var d = Math.PI * r * r;
> parseInt("123")
123
> + "42"
42
> parseInt("hello")
NaN
> isNaN(NaN)
true
> 1 / 0
Infinity

9. Confidential 9
Numbers
Strings
Booleans
Null
Undefined
Javascript: Types: Strings
Strings in JavaScript are sequences of
characters.
> "hello".length
5
> "hello".charAt(0)
h
> "hello, world".replace("hello", "goodbye")
goodbye, world
> "hello".toUpperCase()
HELLO

10. Confidential 10
Numbers
Strings
Booleans
Null
Undefined
Javascript: Types: Booleans
> Boolean("")
false
> Boolean(234)
true
false true
0
"“
NaN
null
undefined
all other values

11. Confidential 11
Numbers
Strings
Booleans
Null
Undefined
Javascript: Types: null
null is a value that indicates a deliberate
non-value
var a = null

12. Confidential 12
Numbers
Strings
Booleans
Null
Undefined
Javascript: Types: undefined
Undefined means not initialized!
var a;
a // undefined
var b={};
b.name // undefined

13. Confidential 13
The Plan
Re-Introduction to Javascript
• History1
• Variables2
• Types3
• Operators4
• Control structures5
• Functions6
• Objects7
• Scope8
• Closures9

14. Confidential 14
Javascript: Operators
Assigning: =
var x = 5
Arithmetic: +, -, /, *, %
x = 3 + 5 // 8
Compound assignment: <operator> = <value>
x /= 4 // 2, mean x = x / 4
X += 5
X = X + 5

15. Confidential 15
Javascript: Operators
Comparisons: >,<, >=, <=, ==, !=, ===, !==
x == “2” // true, but
x === “2” // false
Logical: &&, ||, !

16. Confidential 16
Javascript: Operators
Some cases:
“3” + 4 + 5 // “345”
3 + 4 +”5” // “75”
true + 3 // 4
true + “3” // “true3”
false || 5 // 5
false || 0 || 5 || 3 // 5

17. Confidential 17
The Plan
Re-Introduction to Javascript
• History1
• Variables2
• Types3
• Operators4
• Control structures5
• Functions6
• Objects7
• Scope8
• Closures9

18. Confidential 18
Javascript: Control Structures
if (condition1) {
//do something
} else if (condition2) {
//do something
} else {
//do something
}
for (statement 1; statement 2; statement 3) {
code block to be executed
}
for (x in person) {
// do something
}
while (condition) {
code block to be executed
}
do {
code block to be executed
} while (condition);
switch(expression) {
case n:
code block
break;
case n:
code block
break;
default:
default code block
}

19. Confidential 19
The Plan
Re-Introduction to Javascript
• History1
• Variables2
• Types3
• Operators4
• Control structures5
• Functions6
• Objects7
• Scope8
• Closures9

20. Confidential 20
Javascript: Functions
function doSomething (parameters) {
code to be executed
}
var x = function (a, b) {return a * b};
x(5, 7)
(function () {
var x = "Hello!!"; // I will invoke myself
})();

21. Confidential 21
Javascript: Functions - this
Place of using Example This references to…
Outside functions this Global object, e.g window
Inside the regular function funcName(); Global object, e.g window
Inside a function by using
call / apply
func.call(obj);
func.apply(obj);
obj
Inside a function, using .
operator
someObject.func() someObj

22. Confidential 22
The Plan
Re-Introduction to Javascript
• History1
• Variables2
• Types3
• Operators4
• Control structures5
• Functions6
• Objects7
• Scope8
• Closures9

23. Confidential 23
Javascript: Object
var obj = new Object();
var obj = {};
obj.width = 300;
obj[‘height’] = 200;

24. Confidential 24
Javascript: Object Instantiations
function Person (parameters) {
// constructor’s body goes here
}
var classInstance = new Person();
What happens here?
1. New object is created, its type is object
2. It set the internal prototype and constructor property to the same in the
function.
3. Constructor is executing with “this” pointing to the object
4. Result of the call becomes the new expression, if not defined, it points to the
object created in step 1

25. Confidential 25
Javascript: Object’s variables and methods
function Person(name){
this.name = name
}
Person.prototype.sayHi = function() {
return 'Hi, I am ' + this.name
}
var bob = new Person(‘Bob Newman’);
bob.sayHi();

26. Confidential 26
Javascript: Objects - Inheritance
function Person(name){
this.name = name;
}
Person.prototype.sayHi = function() {
return 'Hi, I am ' + this.name
}
function Employee(name){
Person.prototype.constructor.call(this, name);
}
Employee.prototype = new Person();
var bob = new Employee('Bob Newman');
bob.sayHi();

27. Confidential 27
The Plan
Re-Introduction to Javascript
• History1
• Variables2
• Types3
• Operators4
• Control structures5
• Functions6
• Objects7
• Scope8
• Closures9

28. Confidential 28
Javascript: Scope
Global Variables
var myName = "Richard";
firstName = "Richard";
var name;
name;
Local Variables (Function-level scope)
var name = "Richard";
function showName () {
console.log (name); // undefined, beacause of value hoisting!
var name = "Jack"; // local variable; only accessible in this showName function
console.log (name); // Jack
}
console.log (name); // Richard: the global variable

29. Confidential 29
global
first
second
third
fourth
Javascript: Scope
function first(){
second();
function second(){
third();
function third(){
fourth();
function fourth(){
// do something
}
}
}
}
first();

30. Confidential 30
The Plan
Re-Introduction to Javascript
• History1
• Variables2
• Types3
• Operators4
• Control structures5
• Functions6
• Objects7
• Scope8
• Closures9

31. Confidential 31
Javascript: Closures
function makeAdder(a) {
return function(b) {
return a + b;
};
}
x = makeAdder(5);
y = makeAdder(20);
x(6)
?
y(7)
?

32. Confidential 32
Javascript: Thanks

33. Confidential 33
Arrays
Date
RegExp
Javascript: Appendix: Arrays
> var a = new Array();
> a[0] = "dog";
> a[1] = "cat";
> a[2] = "hen";
> a.length
3
> var a = ["dog", "cat", "hen"];
> a.length
3

34. Confidential 34
Javascript: Appendix : Arrays
> var a = ["dog", "cat", "hen"];
> a[100] = "fox";
> a.length
101
> typeof a[90]
undefined
Arrays
Date
RegExp

35. Confidential 35
Javascript: Appendix : Arrays
for (var i = 0; i < a.length; i++) {
// Do something with a[i]
}
for (var i in a) {
// Do something with i
}
Arrays
Date
RegExp

36. Confidential 36
Javascript: Appendix : Arrays
Method name Description
a.toString()
Returns a string with the toString() of each
element separated by commas.
a.toLocaleString()
Returns a string with the toLocaleString() of
each element separated by commas.
a.concat(item[, itemN])
Returns a new array with the items added on
to it.
a.join(sep)
Converts the array to a string - values delimited
by the sep param
a.pop() Removes and returns the last item.
a.push(item[, itemN]) Push adds one or more items to the end.
a.reverse() Reverse the array.
a.shift() Removes and returns the first item.
a.slice(start, end) Returns a sub-array.
a.sort([cmpfn]) Takes an optional comparison function.
a.splice(start, delcount[, itemN])
Lets you modify an array by deleting a section
and replacing it with more items.
a.unshift([item]) Prepends items to the start of the array.
Arrays
Date
RegExp

37. Confidential 37
Javascript: Appendix : Date
new Date();
new Date(value);
new Date(dateString);
new Date(year, month, day, hour, minute,
second, millisecond);
Arrays
Date
RegExp
Useful methods:
toString() – represent the date in the current local
format
parse() – convert the string to date
format() – format date to custom format
getTime() – get time in milliseconds
setTime() – set time in milliseconds
get/set Years, Date, Month, etc…

38. Confidential 38
Javascript: Appendix : RegExp
Literal and constructor notations are
possible:
/pattern/flags;
new RegExp(pattern [, flags]);
Two identical ways of creation:
/ab+c/i;
new RegExp("ab+c", "i");
Arrays
Date
RegExp

39. Confidential 39
Javascript: Appendix : RegExp
More examples can be found here:
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/RegExp
Method Description
exec
A RegExp method that executes a search for a match in a string. It
returns an array of information.
test
A RegExp method that tests for a match in a string. It returns true or
false.
match
A String method that executes a search for a match in a string. It returns
an array of information or null on a mismatch.
search
A String method that tests for a match in a string. It returns the index of
the match, or -1 if the search fails.
replace
A String method that executes a search for a match in a string, and
replaces the matched substring with a replacement substring.
split
A String method that uses a regular expression or a fixed string to break
a string into an array of substrings.
Arrays
Date
RegExp

40. Confidential 40
Javascript: Thanks