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.

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 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 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
• true
• false
• new Boolean(true)

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 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

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

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

== 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 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 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 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

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 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

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

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, 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 & 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 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

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/

Front end fundamentals session 1: javascript core

More Related Content

What's hot (20)

Similar to Front end fundamentals session 1: javascript core (20)

Recently uploaded (20)

Front end fundamentals session 1: javascript core