Front end fundamentals session 1: javascript core
•Descargar como PPTX, PDF•
4 recomendaciones•1,043 vistas
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a Front end fundamentals session 1: javascript core
Similar a Front end fundamentals session 1: javascript core (20)
Último
Último (20)
Front end fundamentals session 1: javascript core
- 1. Front-end Fundamentals Session 1: Javascript Core Zhao Wenbo
- 2. As far as the customer is concerned, the interface is the product.
- 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
- 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
- 12. Numbers
- 13. Numbers literal • var x = 5; • var y = 3.1415; • var z = 0xFF; • x = -15e9; • x = new Number(5);
- 14. Arithmetic • var x = 2; • var y = 5; • x+y x-y x*y x/y x%y • x++ y-- • x += 8 y *= 10 View Demo
- 15. Advanced mathematical functions • Math – PI – E – sin() – floor() – ceil() – random() – abs() View Demo
- 16. 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
- 17. Parse number from string • parseInt() – parseInt('320px') – parseInt(7.9) – parseInt('FF') – parseInt('FF', 16) • parseFloat() – parseFloat('3.2million') View Demo
- 18. Formatting output of numbers • toString() – convert a number to string – (8).toString(2) • toFixed() – (15365).toFixed(3) – Math.PI.toFixed(2) View Demo
- 19. String
- 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
- 23. 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
- 24. Boolean
- 25. Boolean • true • false • new Boolean(true)
- 26. null & undefined
- 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
- 34. Array
- 35. 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];
- 36. length property • var a = [1, 2, 3]; – a.length == 3 • a[100] = 5; – a.length == ? • a.length = 0; 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
- 40. 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"]
- 41. concat • concat() – var a = [1, 2, 3]; – a.concat([4, 5]); //[1, 2, 3, 4, 5] – a.concat([6, 7], 8, 9)
- 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
- 43. reorder array • sort() • reverse()
- 44. Object
- 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
- 50. Function
- 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
- 53. this • in function, "this" is the object who call 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
- 58. anonymous function • (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
- 64. module pattern • hide private members • expose pubic methods View Demo
- 65. inheritance in Javascript • prototypal inheritance • pseudo-classical inheritance
- 66. Date
- 67. 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
- 69. Regular expression literal • var r = /abd+/ig • var r = new RegExp("abd+", "img")
- 70. RegExp functions • regexp.exec(str) • regexp.test(str) • string.match(regexp) • string.search(regexp) • string.replace(regexp, replacement) • string.split(regexp) Further reading
- 71. Further reading • Learning advanced Javascript • Mozilla developer network – Javascript
- 72. Books
- 73. 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/