Java Script Overview

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

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

Confidential 3
The Plan
• History1
• Variables2
• Types3
• Operators4
• Functions6
• Objects7
• Scope8
• Closures9

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

Confidential 5
The Plan
• History1
• Variables2
• Types3
• Operators4
• Functions6
• Objects7
• Scope8
• Closures9

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

Confidential 7
The Plan
• History1
• Variables2
• Types3
• Operators4
• Functions6
• Objects7
• Scope8
• Closures9

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

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

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

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

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

Confidential 13
The Plan
• History1
• Variables2
• Types3
• Operators4
• Functions6
• Objects7
• Scope8
• Closures9

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

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

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

Confidential 17
The Plan
• History1
• Variables2
• Types3
• Operators4
• Functions6
• Objects7
• Scope8
• Closures9

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) {
}
do {
} while (condition);
switch(expression) {
case n:
code block
break;
case n:
code block
break;
default:
default code block
}

Confidential 19
The Plan
• History1
• Variables2
• Types3
• Operators4
• Functions6
• Objects7
• Scope8
• Closures9

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

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

Confidential 22
The Plan
• History1
• Variables2
• Types3
• Operators4
• Functions6
• Objects7
• Scope8
• Closures9

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

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

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

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

Confidential 27
The Plan
• History1
• Variables2
• Types3
• Operators4
• Functions6
• Objects7
• Scope8
• Closures9

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

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

Confidential 30
The Plan
• History1
• Variables2
• Types3
• Operators4
• Functions6
• Objects7
• Scope8
• Closures9

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

Confidential 32
Javascript: Thanks

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

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

Confidential 35
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

Confidential 36
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

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…

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

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

Confidential 40
Javascript: Thanks

Java Script Overview

More Related Content

What's hot (20)

Viewers also liked (7)

Similar to Java Script Overview (20)

More from Return on Intelligence (20)

Recently uploaded (20)

Java Script Overview

Editor's Notes