Front end fundamentals session 1: javascript core

  • 821 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
821
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
9
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Front-end Fundamentals Session 1: Javascript Core Zhao Wenbo
  • 2. As far as the customer isconcerned, the interface is the product.
  • 3. Richness ofUser Experience
  • 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. 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. 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. 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. Control structures• Compound statements , … -• if ( … ) else , … -• result = condition ? expression : alternative;• switch ( … ) , … -• for ( … ) , … -• while ( … ) , … -• do , … - while ( … )• try , … - catch (e) , … -
  • 9. Basic data types• Number• Boolean• String• null• undefined• Object – Array – Function View Demo
  • 10. Numbers
  • 11. Numbers literal• var x = 5;• var y = 3.1415;• var z = 0xFF;• x = -15e9;• x = new Number(5);
  • 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. Advanced mathematical functions• Math – PI – E – sin() – floor() – ceil() – random() – abs()View Demo
  • 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. Parse number from string• parseInt() – parseInt(320px) – parseInt(7.9) – parseInt(FF) – parseInt(FF, 16)• parseFloat() – parseFloat(3.2million) View Demo
  • 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. String
  • 18. String literal• var s1 = "this is a string";• var s2 = <img src="logo.png" />;• var s3 = new String("Yahoo!");
  • 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. 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. 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. Boolean
  • 23. Boolean• true• false• new Boolean(true)
  • 24. null &undefined
  • 25. differences between null & undefined• null – a special object – empty value• undefined – a variable or property that hasnt been assigned View Demo
  • 26. Audo data type conversion• Auto data type conversion is performed when the data type is unexpected. – "the answer is " + 42 – "42" * 2
  • 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. 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. Conversion to boolType Resultundefined falsenull falseString empty string to false; other to trueNumber 0 and NaN to false; other to trueObject trueView Demo
  • 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. typeof• get data type of variable – typeof null – typeof undefined – typeof 1 – typeof [] – typeof Math.random – type of {} View Demo
  • 32. Array
  • 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. length property• var a = [1, 2, 3]; – a.length == 3• a[100] = 5; – a.length == ?• a.length = 0; View Demo
  • 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. push & pop• push() – append element to the end – return array length• pop() – remove last element – return removed element View Demo
  • 37. shift & unshift• shift() – remove first element – return removed element• unshift – insert element to the beginning – return array length View Demo
  • 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. concat• concat() – var a = [1, 2, 3]; – a.concat([4, 5]); //[1, 2, 3, 4, 5] – a.concat([6, 7], 8, 9)
  • 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. reorder array• sort()• reverse()
  • 42. Object
  • 43. Object literal• create empty object• var a = new Object();• var a = { };• object with properties var a = { "age": 20, "name": "Jerry" }
  • 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. 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. 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. constructor• a reference to the function who create the object• var o = {}; var b = false; – o.constructor === Object – b.constructor === Boolean View Demo
  • 48. Function
  • 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. arguments• In a function, object "arguments" means parameters passed to the functionView Demo
  • 51. this• in function, "this" is the object who call the functionView Demo
  • 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. 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. bind• bind a function and an object using the "bind" method of the functionView Demo
  • 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. anonymous function• (function (){ ... })();View Demo
  • 57. passing by reference/value• primitive variables pass by value – null, undefined, number, bool, string• objects pass by reference – object, array, functionView Demo
  • 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. function is object• function can be refered by a variable• function has properties• you can set property for a functionView Demo
  • 60. function as parameter• function can be passed as parameter• a function as parameter is called "callback"• View Demo 1• View Demo 2
  • 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. module pattern• hide private members• expose pubic methodsView Demo
  • 63. inheritance in Javascript• prototypal inheritance• pseudo-classical inheritance
  • 64. Date
  • 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. Regular Expression
  • 67. Regular expression literal• var r = /abd+/ig• var r = new RegExp("abd+", "img")
  • 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. Further reading• Learning advanced Javascript• Mozilla developer network – Javascript
  • 70. Books
  • 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/