Front end fundamentals session 1: javascript core

1,275 views

Published on

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

No Downloads
Views
Total views
1,275
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
13
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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/

×