0
Front-end Fundamentals      Session 1:   Javascript Core       Zhao Wenbo
As far as the customer isconcerned, the interface     is the product.
Richness ofUser Experience
Whats Javascript•   Cross-platform•   Object-oriented•   Scripting language•   Interpreted language•   Standardized by ECM...
Hello World Example​<?doctype html> <html>   <head>     <title>Hello World Example</title>   </head>   <body>     <script ...
Hello World Example 2​<?doctype html> <html>   <head>     <title>Hello World Example</title>   </head>   <body>     <scrip...
Syntax•   Javascript syntax comes from Java and C.•   Javascript is case-sensitive.•   Statement ends with semicolon;•   C...
Control structures•   Compound statements , … -•   if ( … ) else , … -•   result = condition ? expression : alternative;• ...
Basic data types•   Number•   Boolean•   String•   null•   undefined•   Object    – Array    – Function    View Demo
Numbers
Numbers literal•   var x = 5;•   var y = 3.1415;•   var z = 0xFF;•   x = -15e9;•   x = new Number(5);
Arithmetic•   var x = 2;•   var y = 5;•   x+y x-y x*y x/y x%y•   x++ y--•   x += 8     y *= 10View Demo
Advanced mathematical              functions• Math  –   PI  –   E  –   sin()  –   floor()  –   ceil()  –   random()  –   a...
Special Numbers• Infinity   – 1/0 == Infinity   – -1/0 == -Infinity   – isFinite(1/0)• NaN   – console.log(13 / Yahoo! )  ...
Parse number from string• parseInt()  – parseInt(320px)  – parseInt(7.9)  – parseInt(FF)  – parseInt(FF, 16)• parseFloat()...
Formatting output of numbers• toString()  – convert a number to string  – (8).toString(2)• toFixed()  – (15365).toFixed(3)...
String
String literal• var s1 = "this is a string";• var s2 = <img src="logo.png" />;• var s3 = new String("Yahoo!");
Most used operations• Use + to concatenate strings  – var s = "hello" + "world";  – s += mobile search;  – s = s.concat("a...
Search a substring• indexOf() / lastIndexOf()  – "This is a test".indexOf(is) //2  – "This is a test".lastIndexOf(is) //5 ...
Get substring• substr(start [, length])   – "mobile search".substr(7, 3) //sea   – "mobile search".substr(7) //search   – ...
Boolean
Boolean• true• false• new Boolean(true)
null &undefined
differences between null &           undefined• null  – a special object  – empty value• undefined  – a variable or proper...
Audo data type conversion• Auto data type conversion is performed when  the data type is unexpected.  – "the answer is " +...
Conversion to stringType        Resultundefined   "undefined"null        "null"Boolean     "true" or "false"Number      "N...
Conversion to numberType        Resultundefined   NaNnull        0            true to 1;Boolean            false to 0;    ...
Conversion to boolType        Resultundefined   falsenull        falseString      empty string to false; other to trueNumb...
== and ===•   undefined == null ?•   {a:1} == {a:1} ?•   "5" == 5 ?•   "0" == false•   new String("yahoo") == "yahoo" ?•  ...
typeof• get data type of variable  – typeof null  – typeof undefined  – typeof 1  – typeof []  – typeof Math.random  – typ...
Array
Array literal• var a = ["dog", "cat", "hen"];• var b = new Array("dog", "cat");  – b[2] = "hen";  – b[3] = 1.4;  – b[4] = ...
length property• var a = [1, 2, 3];   – a.length == 3• a[100] = 5;   – a.length == ?• a.length = 0;   View Demo
Array iteration• for (var i = 0; i < a.length; i++) { ... a[i] ... }• for (var i = 0, j = a.length; i < j; i++) { ... a[i]...
push & pop• push()  – append element to the end  – return array length• pop()  – remove last element  – return removed ele...
shift & unshift• shift()   – remove first element   – return removed element• unshift   – insert element to the beginning ...
join & split• array.join()   – [1, 2, 3].join("|") -> "1|2|3"   – [1, 2, 3].join() -> "1,2,3"• string.split   – "a b c".sp...
concat• concat()  – var a = [1, 2, 3];  – a.concat([4, 5]); //[1, 2, 3, 4, 5]  – a.concat([6, 7], 8, 9)
slice & splice• slice(index1, index2)  – get a sub-array• splice(index, count, add1, add2 ...)  – perform surgery on array...
reorder array• sort()• reverse()
Object
Object literal•   create empty object•   var a = new Object();•   var a = { };•   object with properties    var a = {     ...
get & set property• var a = {};• set property  – a[name] = Jerry;  – a.age = 20;• get property  – "He is " + a.name  – "He...
prototype• every object is linked to a prototype object  from which it can inherit properties• all objects created from ob...
object itration• Use for ... in• loop all properties of the object, including that  extends from prototype• how to get pro...
constructor• a reference to the function who create the  object• var o = {}; var b = false;  – o.constructor === Object  –...
Function
function literalfunction f(x, y) {       return x + y;}var f = function(x, y) {       return x - y;}var f = new Function("...
arguments• In a function, object "arguments" means  parameters passed to the functionView Demo
this• in function, "this" is the object who call the  functionView Demo
function as Classfunction Person(name, age) {      this.name = name;      this.age = age;}var p = new Person("Adam", 20);c...
call & apply• f.call(thisObj, arg1, arg2, …)   – call function f with parameters arg1, arg2 …   – this point to thisObj• f...
bind• bind a function and an object using the "bind"  method of the functionView Demo
variable scope• NO block scope• has function scope  – variable defined in a function is not visible outside    the functio...
anonymous function• (function (){ ... })();View Demo
passing by reference/value• primitive variables pass by value  – null, undefined, number, bool, string• objects pass by re...
first class function•   can be stored in variable and data structures•   can be passed as parameter•   can be returned as ...
function is object• function can be refered by a variable• function has properties• you can set property for a functionVie...
function as parameter• function can be passed as parameter• a function as parameter is called "callback"• View Demo 1• Vie...
function as return value• function can be returned• function returned still have access to variables  of the function its ...
module pattern• hide private members• expose pubic methodsView Demo
inheritance in Javascript• prototypal inheritance• pseudo-classical inheritance
Date
Date & time•   new Date()•   new Date("December 22, 2012 03:24:00")•   new Date(2012, 12, 22)•   new Date(2012, 12 ,22 ,3 ...
Regular Expression
Regular expression literal• var r = /abd+/ig• var r = new RegExp("abd+", "img")
RegExp functions•   regexp.exec(str)•   regexp.test(str)•   string.match(regexp)•   string.search(regexp)•   string.replac...
Further reading• Learning advanced Javascript• Mozilla developer network – Javascript
Books
CC images used•   http://www.flickr.com/photos/bright/106000370/•   http://www.flickr.com/photos/oskay/472097903/•   http:...
Front end fundamentals session 1: javascript core
Front end fundamentals session 1: javascript core
Upcoming SlideShare
Loading in...5
×

Front end fundamentals session 1: javascript core

938

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
938
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Front end fundamentals session 1: javascript core"

  1. 1. Front-end Fundamentals Session 1: Javascript Core Zhao Wenbo
  2. 2. As far as the customer isconcerned, the interface is the product.
  3. 3. Richness ofUser Experience
  4. 4. Whats Javascript• Cross-platform• Object-oriented• Scripting language• Interpreted language• Standardized by ECMA-262• Created in 1995 by Brendan Eich• First named LiveScript then Javascript
  5. 5. 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
  6. 6. 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
  7. 7. 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 = ...
  8. 8. Control structures• Compound statements , … -• if ( … ) else , … -• result = condition ? expression : alternative;• switch ( … ) , … -• for ( … ) , … -• while ( … ) , … -• do , … - while ( … )• try , … - catch (e) , … -
  9. 9. Basic data types• Number• Boolean• String• null• undefined• Object – Array – Function View Demo
  10. 10. Numbers
  11. 11. Numbers literal• var x = 5;• var y = 3.1415;• var z = 0xFF;• x = -15e9;• x = new Number(5);
  12. 12. Arithmetic• var x = 2;• var y = 5;• x+y x-y x*y x/y x%y• x++ y--• x += 8 y *= 10View Demo
  13. 13. Advanced mathematical functions• Math – PI – E – sin() – floor() – ceil() – random() – abs()View Demo
  14. 14. Special Numbers• Infinity – 1/0 == Infinity – -1/0 == -Infinity – isFinite(1/0)• NaN – console.log(13 / Yahoo! ) – 13 / Yahoo! == NaN ? – isNaN(12 * mobile) View Demo
  15. 15. Parse number from string• parseInt() – parseInt(320px) – parseInt(7.9) – parseInt(FF) – parseInt(FF, 16)• parseFloat() – parseFloat(3.2million) View Demo
  16. 16. Formatting output of numbers• toString() – convert a number to string – (8).toString(2)• toFixed() – (15365).toFixed(3) – Math.PI.toFixed(2) View Demo
  17. 17. String
  18. 18. String literal• var s1 = "this is a string";• var s2 = <img src="logo.png" />;• var s3 = new String("Yahoo!");
  19. 19. 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
  20. 20. 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
  21. 21. Get substring• substr(start [, length]) – "mobile search".substr(7, 3) //sea – "mobile search".substr(7) //search – "mobile search".substr(-3, 3) //rch• substring(index1 [, index2]) – "mobile search".substring(0, 3) //mob – "mobile search".substring(3, 0) //mob – "mobile search".substring(-3, 0) //empty string• slice(index1 [, index2]) – same as substring except negative index is valid
  22. 22. Boolean
  23. 23. Boolean• true• false• new Boolean(true)
  24. 24. null &undefined
  25. 25. differences between null & undefined• null – a special object – empty value• undefined – a variable or property that hasnt been assigned View Demo
  26. 26. Audo data type conversion• Auto data type conversion is performed when the data type is unexpected. – "the answer is " + 42 – "42" * 2
  27. 27. Conversion to stringType Resultundefined "undefined"null "null"Boolean "true" or "false"Number "NaN", "Infinity", "153.23", "2.8e10", "-5"Object Call toString method of the objectView Demo
  28. 28. Conversion to numberType Resultundefined NaNnull 0 true to 1;Boolean false to 0; "Infinity" to Infinity;String "1.56" to 1.56; Other strings to NaN;Object NaNView Demo
  29. 29. Conversion to boolType Resultundefined falsenull falseString empty string to false; other to trueNumber 0 and NaN to false; other to trueObject trueView Demo
  30. 30. == and ===• undefined == null ?• {a:1} == {a:1} ?• "5" == 5 ?• "0" == false• new String("yahoo") == "yahoo" ?• new String("y") == new String("y") ?View Demo
  31. 31. typeof• get data type of variable – typeof null – typeof undefined – typeof 1 – typeof [] – typeof Math.random – type of {} View Demo
  32. 32. Array
  33. 33. Array literal• var a = ["dog", "cat", "hen"];• var b = new Array("dog", "cat"); – b[2] = "hen"; – b[3] = 1.4; – b[4] = [1, 2, 3];
  34. 34. length property• var a = [1, 2, 3]; – a.length == 3• a[100] = 5; – a.length == ?• a.length = 0; View Demo
  35. 35. 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
  36. 36. push & pop• push() – append element to the end – return array length• pop() – remove last element – return removed element View Demo
  37. 37. shift & unshift• shift() – remove first element – return removed element• unshift – insert element to the beginning – return array length View Demo
  38. 38. join & split• array.join() – [1, 2, 3].join("|") -> "1|2|3" – [1, 2, 3].join() -> "1,2,3"• string.split – "a b c".split(" ") -> ["a", "b", "c"] – "yahoo".split() -> ["yahoo"]
  39. 39. concat• concat() – var a = [1, 2, 3]; – a.concat([4, 5]); //[1, 2, 3, 4, 5] – a.concat([6, 7], 8, 9)
  40. 40. 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
  41. 41. reorder array• sort()• reverse()
  42. 42. Object
  43. 43. Object literal• create empty object• var a = new Object();• var a = { };• object with properties var a = { "age": 20, "name": "Jerry" }
  44. 44. 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
  45. 45. 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.prototypeView Demo
  46. 46. 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
  47. 47. constructor• a reference to the function who create the object• var o = {}; var b = false; – o.constructor === Object – b.constructor === Boolean View Demo
  48. 48. Function
  49. 49. function literalfunction 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
  50. 50. arguments• In a function, object "arguments" means parameters passed to the functionView Demo
  51. 51. this• in function, "this" is the object who call the functionView Demo
  52. 52. function as Classfunction 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
  53. 53. 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
  54. 54. bind• bind a function and an object using the "bind" method of the functionView Demo
  55. 55. 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
  56. 56. anonymous function• (function (){ ... })();View Demo
  57. 57. passing by reference/value• primitive variables pass by value – null, undefined, number, bool, string• objects pass by reference – object, array, functionView Demo
  58. 58. 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
  59. 59. function is object• function can be refered by a variable• function has properties• you can set property for a functionView Demo
  60. 60. function as parameter• function can be passed as parameter• a function as parameter is called "callback"• View Demo 1• View Demo 2
  61. 61. function as return value• function can be returned• function returned still have access to variables of the function its defined within• function together with a referencing environment for non-local variables is called "Closure"View Demo
  62. 62. module pattern• hide private members• expose pubic methodsView Demo
  63. 63. inheritance in Javascript• prototypal inheritance• pseudo-classical inheritance
  64. 64. Date
  65. 65. Date & time• new Date()• new Date("December 22, 2012 03:24:00")• new Date(2012, 12, 22)• new Date(2012, 12 ,22 ,3 , 24, 0)View Demo
  66. 66. Regular Expression
  67. 67. Regular expression literal• var r = /abd+/ig• var r = new RegExp("abd+", "img")
  68. 68. RegExp functions• regexp.exec(str)• regexp.test(str)• string.match(regexp)• string.search(regexp)• string.replace(regexp, replacement)• string.split(regexp)Further reading
  69. 69. Further reading• Learning advanced Javascript• Mozilla developer network – Javascript
  70. 70. Books
  71. 71. CC images used• http://www.flickr.com/photos/bright/106000370/• http://www.flickr.com/photos/oskay/472097903/• http://www.flickr.com/photos/ashleyrosex/2450534945/• http://www.flickr.com/photos/wolfnowl/6187621227/• http://www.flickr.com/photos/chberge/4122421509/• http://www.flickr.com/photos/greenmambagreenmamba/183 2165324• http://www.flickr.com/photos/20792787@N00/53071820/• http://www.flickr.com/photos/snapsi42/3385220387• http://www.flickr.com/photos/amandarudkin/321429630• http://www.flickr.com/photos/teddy-rised/3998772594/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×