Front end fundamentals session 1: javascript core
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Front end fundamentals session 1: javascript core

  • 1,089 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
1,089
On Slideshare
1,089
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
8
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/