front end fundamentals session 1: javascript core
DESCRIPTION
TRANSCRIPT
![Page 1: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/1.jpg)
Front-end Fundamentals Session
1:Javascript Core
Zhao Wenbo
![Page 2: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/2.jpg)
As far as the customer is concerned, the
interface is the product.
![Page 3: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/3.jpg)
Cont
ent
(HTM
L)Pres
enta
tion
(CSS
)
Beha
vior
(Java
scrip
t)Richness of User Experience
![Page 4: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/4.jpg)
HTML
CSS
Javascript language
Javascript in browser
YUI framework
![Page 5: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/5.jpg)
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
![Page 6: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/6.jpg)
![Page 7: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/7.jpg)
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
![Page 8: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/8.jpg)
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
![Page 9: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/9.jpg)
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 = ...
![Page 10: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/10.jpg)
Control structures• Compound statements { … }• if ( … ) else { … }• result = condition ? expression : alternative;• switch ( … ) { … }• for ( … ) { … }• while ( … ) { … }• do { … } while ( … )• try { … } catch (e) { … }
![Page 11: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/11.jpg)
Basic data types• Number• Boolean• String• null• undefined• Object– Array– Function
View Demo
![Page 12: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/12.jpg)
Numbers
![Page 13: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/13.jpg)
Numbers literal• var x = 5; • var y = 3.1415;• var z = 0xFF;• x = -15e9;• x = new Number(5);
![Page 14: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/14.jpg)
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
![Page 15: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/15.jpg)
Advanced mathematical functions
• Math– PI– E– sin()– floor()– ceil()– random()– abs()
View Demo
![Page 16: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/16.jpg)
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
![Page 17: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/17.jpg)
Parse number from string
• parseInt()– parseInt('320px')– parseInt(7.9)– parseInt('FF')– parseInt('FF', 16)
• parseFloat()– parseFloat('3.2million')
View Demo
![Page 18: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/18.jpg)
Formatting output of numbers
• toString()– convert a number to string– (8).toString(2)
• toFixed()– (15365).toFixed(3)– Math.PI.toFixed(2)
View Demo
![Page 19: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/19.jpg)
String
![Page 20: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/20.jpg)
String literal• var s1 = "this is a string";• var s2 = '<img src="logo.png" />';• var s3 = new String("Yahoo!");
![Page 21: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/21.jpg)
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
![Page 22: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/22.jpg)
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
![Page 23: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/23.jpg)
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
![Page 24: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/24.jpg)
Boolean
![Page 25: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/25.jpg)
Boolean• true• false• new Boolean(true)
![Page 26: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/26.jpg)
null &undefined
![Page 27: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/27.jpg)
differences between null & undefined
• null– a special object– empty value
• undefined– a variable or property that hasn't been assigned
View Demo
![Page 28: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/28.jpg)
Audo data type conversion
• Auto data type conversion is performed when the data type is unexpected.– "the answer is " + 42– "42" * 2
![Page 29: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/29.jpg)
Conversion to stringType 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
![Page 30: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/30.jpg)
Conversion to numberType Result
undefined NaN
null 0
Boolean true to 1; false to 0;
String"Infinity" to Infinity; "1.56" to 1.56;Other strings to NaN;
Object NaN
View Demo
![Page 31: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/31.jpg)
Conversion to boolType 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
![Page 32: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/32.jpg)
== and ===• undefined == null ?• {a:1} == {a:1} ?• "5" == 5 ?• "0" == false• new String("yahoo") == "yahoo" ?• new String("y") == new String("y") ?
View Demo
![Page 33: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/33.jpg)
typeof• get data type of variable– typeof null – typeof undefined– typeof 1– typeof []– typeof Math.random– type of {}
View Demo
![Page 34: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/34.jpg)
Array
![Page 35: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/35.jpg)
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];
![Page 36: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/36.jpg)
length property• var a = [1, 2, 3];– a.length == 3
• a[100] = 5; – a.length == ?
• a.length = 0;
View Demo
![Page 37: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/37.jpg)
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
![Page 38: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/38.jpg)
push & pop• push()– append element to the end– return array length
• pop()– remove last element– return removed element
View Demo
![Page 39: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/39.jpg)
shift & unshift• shift()– remove first element– return removed element
• unshift– insert element to the beginning– return array length
View Demo
![Page 40: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/40.jpg)
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"]
![Page 41: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/41.jpg)
concat• concat()– var a = [1, 2, 3];– a.concat([4, 5]); //[1, 2, 3, 4, 5]– a.concat([6, 7], 8, 9)
![Page 42: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/42.jpg)
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
![Page 43: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/43.jpg)
reorder array• sort()• reverse()
![Page 44: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/44.jpg)
Object
![Page 45: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/45.jpg)
Object literal• create empty object• var a = new Object();• var a = { };• object with properties
var a = { "age": 20, "name": "Jerry"}
![Page 46: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/46.jpg)
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
![Page 47: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/47.jpg)
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
![Page 48: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/48.jpg)
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
![Page 49: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/49.jpg)
constructor• a reference to the function who create the
object• var o = {}; var b = false; – o.constructor === Object– b.constructor === Boolean
View Demo
![Page 50: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/50.jpg)
Function
![Page 51: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/51.jpg)
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
![Page 52: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/52.jpg)
arguments• In a function, object "arguments" means
parameters passed to the function
View Demo
![Page 53: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/53.jpg)
this• in function, "this" is the object who call the
function
View Demo
![Page 54: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/54.jpg)
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
![Page 55: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/55.jpg)
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
![Page 56: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/56.jpg)
bind• bind a function and an object using the "bind"
method of the function
View Demo
![Page 57: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/57.jpg)
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
![Page 59: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/59.jpg)
passing by reference/value
• primitive variables pass by value– null, undefined, number, bool, string
• objects pass by reference– object, array, function
View Demo
![Page 60: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/60.jpg)
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
![Page 61: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/61.jpg)
function is object• function can be refered by a variable• function has properties• you can set property for a function
View Demo
![Page 62: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/62.jpg)
function as parameter• function can be passed as parameter• a function as parameter is called "callback"
• View Demo 1• View Demo 2
![Page 63: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/63.jpg)
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
![Page 64: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/64.jpg)
module pattern• hide private members• expose pubic methods
View Demo
![Page 65: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/65.jpg)
inheritance in Javascript
• prototypal inheritance• pseudo-classical inheritance
![Page 66: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/66.jpg)
Date
![Page 67: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/67.jpg)
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
![Page 68: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/68.jpg)
Regular Expression
![Page 69: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/69.jpg)
Regular expression literal
• var r = /ab\d+/ig• var r = new RegExp("ab\d+", "img")
![Page 70: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/70.jpg)
RegExp functions• regexp.exec(str)• regexp.test(str)• string.match(regexp)• string.search(regexp)• string.replace(regexp, replacement)• string.split(regexp)
Further reading
![Page 71: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/71.jpg)
Further reading• Learning advanced Javascript• Mozilla developer network – Javascript
![Page 72: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/72.jpg)
Books
![Page 73: Front end fundamentals session 1: javascript core](https://reader036.vdocuments.site/reader036/viewer/2022062615/548aae93b479591c1a8b46db/html5/thumbnails/73.jpg)
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/
1832165324• 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/