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

Front end fundamentals session 1: javascript core

on

  • 1,013 views

 

Statistics

Views

Total Views
1,013
Views on SlideShare
1,013
Embed Views
0

Actions

Likes
2
Downloads
8
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Front end fundamentals session 1: javascript core Front end fundamentals session 1: javascript core Presentation Transcript

    • 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 ECMA-262• Created in 1995 by Brendan Eich• First named LiveScript then Javascript
    • 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
    • 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
    • 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 = ...
    • Control structures• Compound statements , … -• if ( … ) else , … -• result = condition ? expression : alternative;• switch ( … ) , … -• for ( … ) , … -• while ( … ) , … -• do , … - while ( … )• try , … - catch (e) , … -
    • 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() – abs()View Demo
    • 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
    • Parse number from string• parseInt() – parseInt(320px) – parseInt(7.9) – parseInt(FF) – parseInt(FF, 16)• parseFloat() – parseFloat(3.2million) View Demo
    • Formatting output of numbers• toString() – convert a number to string – (8).toString(2)• toFixed() – (15365).toFixed(3) – Math.PI.toFixed(2) View Demo
    • 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("abc");• Get string length – "yahoo".length //5• Get character in specific position – "abcd"[2] //c – "abcd".charAt(2) //c
    • 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
    • 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
    • Boolean
    • Boolean• true• false• new Boolean(true)
    • null &undefined
    • differences between null & undefined• null – a special object – empty value• undefined – a variable or property that hasnt been assigned View Demo
    • Audo data type conversion• Auto data type conversion is performed when the data type is unexpected. – "the answer is " + 42 – "42" * 2
    • 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
    • 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
    • Conversion to boolType Resultundefined falsenull falseString empty string to false; other to trueNumber 0 and NaN to false; other to trueObject trueView Demo
    • == and ===• undefined == null ?• {a:1} == {a:1} ?• "5" == 5 ?• "0" == false• new String("yahoo") == "yahoo" ?• new String("y") == new String("y") ?View Demo
    • typeof• get data type of variable – typeof null – typeof undefined – typeof 1 – typeof [] – typeof Math.random – type of {} View Demo
    • Array
    • 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];
    • 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] ... }• for (var i in a) { ... a[i] ... }View Demo
    • push & pop• push() – append element to the end – return array length• pop() – remove last element – return removed element View Demo
    • shift & unshift• shift() – remove first element – return removed element• unshift – insert element to the beginning – return array length View Demo
    • 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"]
    • 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 – replace some elements with new elements View Demo
    • reorder array• sort()• reverse()
    • Object
    • Object literal• create empty object• var a = new Object();• var a = { };• object with properties var a = { "age": 20, "name": "Jerry" }
    • 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
    • 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
    • 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
    • constructor• a reference to the function who create the object• var o = {}; var b = false; – o.constructor === Object – b.constructor === Boolean View Demo
    • Function
    • 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
    • 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);create a new Object, point "this" to that object.View Demo
    • 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
    • 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 function – variable defined in a function is visible ANYWHERE within the function View Demo
    • anonymous function• (function (){ ... })();View Demo
    • passing by reference/value• primitive variables pass by value – null, undefined, number, bool, string• objects pass by reference – object, array, functionView Demo
    • 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
    • function is object• function can be refered by a variable• function has properties• you can set property for a functionView Demo
    • function as parameter• function can be passed as parameter• a function as parameter is called "callback"• View Demo 1• View Demo 2
    • 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
    • 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 , 24, 0)View Demo
    • 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.replace(regexp, replacement)• string.split(regexp)Further reading
    • 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://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/