Front end fundamentals session 1: javascript core
73
Front-end Fundamentals Session 1: Javascript Core Zhao Wenbo
-
Upload
web-zhao -
Category
Technology
-
view
832 -
download
3
description
Transcript of Front end fundamentals session 1: javascript core
Front-end Fundamentals Session
1:Javascript Core
Zhao Wenbo
As far as the customer is concerned, the
interface is the product.
Cont
ent
(HTM
L)Pres
enta
tion
(CSS
)
Beha
vior
(Java
scrip
t)Richness of User Experience
HTML
CSS
Javascript language
Javascript in browser
YUI framework
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
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 *= 10
View 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 hasn't 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 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
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
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
== 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.prototype
View 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 function
View Demo
this• in function, "this" is the object who call the
function
View 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 function
View 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
passing by reference/value
• primitive variables pass by value– null, undefined, number, bool, string
• objects pass by reference– object, array, function
View 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 function
View 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 it's defined within• function together with a referencing
environment for non-local variables is called "Closure"
View Demo
module pattern• hide private members• expose pubic methods
View 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 = /ab\d+/ig• var r = new RegExp("ab\d+", "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/
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/
