5. What's Javascript
• Cross-platform
• Object-oriented
• Scripting language
• Interpreted language
• Standardized by ECMA-262
• Created in 1995 by Brendan Eich
• First named LiveScript then Javascript
6.
7. Hello World Example
<?doctype html>
<html>
<head>
<title>Hello World Example</title>
</head>
<body>
<script type="text/javascript">
alert('Hello World');
</script>
</body>
</html>
View Demo
8. Hello World Example 2
<?doctype html>
<html>
<head>
<title>Hello World Example</title>
</head>
<body>
<script type="text/javascript">
console.log('Hello World');
</script>
</body>
</html>
View Demo
9. Syntax
• Javascript syntax comes from Java and C.
• Javascript is case-sensitive.
• Statement ends with semicolon;
• Comment starts with //
• Multiple line comments embraced with /* */
• Assign value with =
...
10. Control structures
• Compound statements , … -
• if ( … ) else , … -
• result = condition ? expression : alternative;
• switch ( … ) , … -
• for ( … ) , … -
• while ( … ) , … -
• do , … - while ( … )
• try , … - catch (e) , … -
11. Basic data types
• Number
• Boolean
• String
• null
• undefined
• Object
– Array
– Function
View Demo
20. String literal
• var s1 = "this is a string";
• var s2 = '<img src="logo.png" />';
• var s3 = new String("Yahoo!");
21. Most used operations
• Use + to concatenate strings
– var s = "hello" + "world";
– s += 'mobile search';
– s = s.concat("abc");
• Get string length
– "yahoo".length //5
• Get character in specific position
– "abcd"[2] //c
– "abcd".charAt(2) //c
22. Search a substring
• indexOf() / lastIndexOf()
– "This is a test".indexOf('is') //2
– "This is a test".lastIndexOf('is') //5
– "This is a test".indexOf('abc') //-1
27. differences between null &
undefined
• null
– a special object
– empty value
• undefined
– a variable or property that hasn't been assigned
View Demo
28. Audo data type conversion
• Auto data type conversion is performed when
the data type is unexpected.
– "the answer is " + 42
– "42" * 2
29. Conversion to string
Type Result
undefined "undefined"
null "null"
Boolean "true" or "false"
Number "NaN", "Infinity", "153.23", "2.8e10", "-5"
Object Call toString method of the object
View Demo
30. Conversion to number
Type Result
undefined NaN
null 0
true to 1;
Boolean
false to 0;
"Infinity" to Infinity;
String "1.56" to 1.56;
Other strings to NaN;
Object NaN
View Demo
31. Conversion to bool
Type Result
undefined false
null false
String empty string to false; other to true
Number 0 and NaN to false; other to true
Object true
View Demo
32. == and ===
• undefined == null ?
• {a:1} == {a:1} ?
• "5" == 5 ?
• "0" == false
• new String("yahoo") == "yahoo" ?
• new String("y") == new String("y") ?
View Demo
33. typeof
• get data type of variable
– typeof null
– typeof undefined
– typeof 1
– typeof []
– typeof Math.random
– type of {}
View Demo
37. Array iteration
• for (var i = 0; i < a.length; i++) { ... a[i] ... }
• for (var i = 0, j = a.length; i < j; i++) { ... a[i] ... }
• for (var i in a) { ... a[i] ... }
View Demo
38. push & pop
• push()
– append element to the end
– return array length
• pop()
– remove last element
– return removed element
View Demo
39. shift & unshift
• shift()
– remove first element
– return removed element
• unshift
– insert element to the beginning
– return array length
View Demo
42. slice & splice
• slice(index1, index2)
– get a sub-array
• splice(index, count, add1, add2 ...)
– perform surgery on array
– replace some elements with new elements
View Demo
45. Object literal
• create empty object
• var a = new Object();
• var a = { };
• object with properties
var a = {
"age": 20,
"name": "Jerry"
}
46. get & set property
• var a = {};
• set property
– a['name'] = 'Jerry';
– a.age = 20;
• get property
– "He is " + a.name
– "He is " + a['age'] + " years old"
View Demo
47. prototype
• every object is linked to a prototype object
from which it can inherit properties
• all objects created from object literal are
linked to Object.prototype.
• all arrays are linked to Array.prototype
View Demo
48. object itration
• Use for ... in
• loop all properties of the object, including that
extends from prototype
• how to get properties excluding inherited
from prototype?
View Demo
49. constructor
• a reference to the function who create the
object
• var o = {}; var b = false;
– o.constructor === Object
– b.constructor === Boolean
View Demo
51. function literal
function f(x, y) {
return x + y;
}
var f = function(x, y) {
return x - y;
}
var f = new Function("x", "y", "return x * y");
View Demo
52. arguments
• In a function, object "arguments" means
parameters passed to the function
View Demo
54. function as Class
function Person(name, age) {
this.name = name;
this.age = age;
}
var p = new Person("Adam", 20);
create a new Object, point "this" to that object.
View Demo
55. call & apply
• f.call(thisObj, arg1, arg2, …)
– call function f with parameters arg1, arg2 …
– this point to thisObj
• f.apply(thisObj, *arg1, arg2, …+)
– same as call
– different ways to pass arguments
View Demo
56. bind
• bind a function and an object using the "bind"
method of the function
View Demo
57. variable scope
• NO block scope
• has function scope
– variable defined in a function is not visible outside
the function
– variable defined in a function is visible ANYWHERE
within the function
View Demo
59. passing by reference/value
• primitive variables pass by value
– null, undefined, number, bool, string
• objects pass by reference
– object, array, function
View Demo
60. first class function
• can be stored in variable and data structures
• can be passed as parameter
• can be returned as result
• can be constructed at run-time
• has intrinsic identity
61. function is object
• function can be refered by a variable
• function has properties
• you can set property for a function
View Demo
62. function as parameter
• function can be passed as parameter
• a function as parameter is called "callback"
• View Demo 1
• View Demo 2
63. function as return value
• function can be returned
• function returned still have access to variables
of the function it's defined within
• function together with a referencing
environment for non-local variables is called
"Closure"
View Demo