Functional programming with Javascript

spongereasonInternet και Εφαρμογές Web

12 Νοε 2013 (πριν από 4 χρόνια)

88 εμφανίσεις

Advanced Topics in Web Development

JavaScript


Functional Programming

Topics


JavaScript Background


Function Basics


Advanced Functional Features


Libraries and AJAX

Potted History


Created at Netscape


Submitted for standardisation to ECMA


Microsoft : "Jscript"


JS1.5 =
ECMAScript

3


New features added piecemeal

ECMA/JS Versions

http://caniuse.com/#cats=JS_API

Containers



JS requires a "host" environment



Usually, a web browser
-

"Client side"


Also possible server side


Rhino


Node.js

Why Functional Orientation?


A block of code that is defined once but may
be executed, or invoked, any number of times


Roots in GOSUB / RETURN


Brevity, efficiency, safety


(Learning curve)


In JavaScript, functions are
objects


In JavaScript, functions are
closures

Closures


A function or reference to a function together
with a referencing environment


The local variables for a function are kept
alive after the function has returned


Functions inside functions

Function Declaration

function foo(
param
)


{


// contents


return 0;


}

var

foo = function (
param
){


// contents


return 0;


};


Invocation

var

foo = function (
param
){


// contents


return 0;


};

foo();

foo.call
();

foo.apply
();

Methods*

A JS function stored in the property of an object

If you have a function f and an object o, you can
define a method named m of

o with the following line:


o.m

= f;

Having defined the method m() of the object o,
invoke it like this:


o.m
();

Nested Functions*

function hypotenuse(a, b) {


function square(x) { return x*x; }


return
Math.sqrt
(square(a) + square(b));

}

Variable Scope *

foo = function(){


var

i
=6;

};


console.log(
i
);

Function Arguments *

foo = function(){


numberArgs

=
arguments.length
;


console.log("Arguments passed = " +
numberArgs
);


for(
var

i
=0;
i
<
numberArgs
;
i
++){


console.log(arguments[
i
]);


}


};


foo("Fred", "Barney", "Wilma", "Betty");

Testing for Function Support*


if(
document.getElementById
){


console.log('Supports
getElementById
');

}

The Callback Pattern*

foo = function(
callback
){


// Some Processing work


// ..


// trigger the
callback


callback.call
();

};


The Callback Pattern*

foo = function(
callback
){


// Some Processing work


// ..


// trigger the
callback


callback.call
();

};


Array Map & Reduce*

var

total = [0, 1, 2, 3].reduce(function(a, b) {


return a + b;

});

// total == 6

Module Pattern*

var

myModule

= (function(){


return {


method1: function()


{


console.log("Method 1 Called");


}


};



}());


myModule.method1();

CommonJS

math.js


exports.add

= function() {


var

sum = 0,
i

= 0,
args

= arguments, l =
args.length
;


while (
i

< l) {


sum +=
args
[
i
++];


}


return sum;

};


increment.js


var

add = require('math').add;

exports.increment

= function(
val
) {


return add(
val
, 1);

};

Jquery

AJAX and
Callbacks
*

<!
doctype

html>

<html
lang
="en">

<head>


<meta charset="utf
-
8">


<title>HTML5 Template</title>


<script
src
="//ajax.googleapis.com/
ajax
/libs/
jquery
/1.9.1/jquery.min.js"></script>

</head>

<body>


<script>


$(document).ready(function(){


$.
ajax
( )


.done(function(xml) { console.log(xml);})


.fail(function() { alert("error"); }) });


</script>

</body>

</html>

AJAX/XML
-
JSON Example

Client / "Server"

http://www.cems.uwe.ac.uk/~pmatthew/ATWD/jsonxml/client.html

http://www.cems.uwe.ac.uk/~pmatthew/ATWD/jsonxml/


Source

"Server":

http://www.cems.uwe.ac.uk/~pmatthew/ATWD/jsonxml/index.phps

"Client"

http://www.cems.uwe.ac.uk/~pmatthew/ATWD/jsonxml/client.html.txt






Same Origin Policy


Restricts how a document or script loaded
from one origin can interact with a resource
from another origin


Affects
XMLHttpRequest

(AJAX)


Workaround: JSONP


CORS

Book and Resources

YDN

http://developer.yahoo.com/video/