Download
javascript not just for the browser n.
Skip this Video
Loading SlideShow in 5 Seconds..
Javascript Not just for the browser. PowerPoint Presentation
Download Presentation
Javascript Not just for the browser.

Javascript Not just for the browser.

152 Views Download Presentation
Download Presentation

Javascript Not just for the browser.

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. JavascriptNot just for the browser. Connor Dunn

  2. About me • Connor Dunn, 2nd year computer scientist • 4th year at Warwick (Switched from Maths after the 2nd year) • Academic President of CompSoc • Interested in web development, most experience using PHP • Recently (last 6 months) became interested in Javascript and Node

  3. Why Javascript? • Simple, easy to learn syntax, similar to Java or C • Available in most web browsers, on most computers • Becoming more available as a server side alternative • In my opinion an expressive language that allows a flexible style of coding

  4. What will this talk cover? • An introduction to the basics of coding in Javascript • A more detailed look at some interesting features of Javascript: • First class functions and closures • Prototype based object orientation • A look at an example of Javascript on the server using some of the features discussed

  5. Javascript basicsVariables varfoo = "String"; bar = 1; foo = 3; • Dynamically typed variables – values have type, variables do not • "var" keyword creates a local variable, without variable is global (more on scope later)

  6. Javascript basicsStructured syntax Javascript supports structured syntax found in imperative programming languages such as C and Java. if (foo == 3) { alert("Foo is 3"); } else { alert("Foo is not 3"); } while (i < 10) { i = i + 1; alert(i); } for (j = 1; j < 4; j++) { alert(j); } switch (k) { case 1: alert("One"); break; case 2: alert("Two"); break }

  7. Javascript basicsExpressions Triple === is strict and also compares type Logical !, ||, && Comparisons ==, != and ===, !== <, <=, >=, > Arithmetic +,-,*,/,% Bitwise |, ^, &, <<, >>, >>>, ~ String + Ternary ? :

  8. Javascript basicsExample var times = 10; varstr = "Hello"; while (times > 0) { if (result === undefined) { result = ""; } result = result + str; times--; } alert(result);

  9. JavascriptfunctionsSimple functions function add(a, b) { return a+b; } alert(add(1,2)); // Output: 3 • Functions in Javascript can be simply defined using the function keyword.

  10. JavascriptfunctionsAnonymous, first class functions add = function (a, b) { return a+b; }; b = add; alert(add(1,2)); // Output: 3 alert(b(1,2)); // Output: 3 • Functions do not need a name, and can be assigned to variables. • Functions can also be passed as arguments and returned by other functions

  11. JavascriptfunctionsScope var a = 10; var b = 20; function foo() { var a = 30; alert(a); // Output: 30 alert(b); // Output: 20 b = 40; } foo(); alert(a) // Output: 10 alert(b) // Output: 40 • Functions have their own scope in Javascript, variables declared in a function only exist within it.

  12. JavascriptfunctionsClosures // Output a message after a delay function delayMsg(delay, message) { function outputMsg() { alert(message); } setTimeout(outputMsg, delay); } delayMsg(1000, "Hello"); • Functions in Javascript can be declared inside other functions, functions inherit variables from their parent

  13. JavascriptobjectsIntro var car = { colour: "Red", beep: function () { alert("Beep"); } } • Objects do not have classes • Objects can be defined as above with an object literal • Properties of objects are just variables, they can be strings, numbers, functions, other objects, etc. • Properties can be accessed using car.colour or car["colour"] • "Methods" (properties which are functions) can be accessed using car.beep() or car["beep"]();

  14. JavascriptobjectsBuilt in objects • Javascript comes with several built in functions: • String • Date • Array • Boolean • Math • RegExp • Function • Number • These objects provide most of Javascripts built in functionality, e.g. Math.random() to generate random numbers

  15. JavascriptobjectsConstructors function Car(colour) { this.colour = colour; this.beep = function () { alert("Beep"); }; } varmyCar = new Car("Blue"); varyourCar = new Car("Red"); • A constructor in Javascript is simply a function invoked using the "new" keyword. • In the constructor function the "this" keyword becomes the object, therefore any properties set on it become part of the object. • Conventional to use a capital letter for constructors, but not required.

  16. JavascriptobjectsPrototypes function Car(colour) { this.colour = colour; this.beep = function () { alert("Beep"); }; } varmyCar = new Car("Blue"); varyourCar = new Car("Red"); Car.prototype.newColour = function (colour) { this.colour = colour; } myCar.newColour("Green"); • Every instance of a constructor function shares the same prototype object • If a property for the object is accessed but does not exist the prototype object will be checked • In the example myCar.newColour does not exist, so Car.prototype.newColour is used • Allows objects to be extended after they are created • Also allows inheritance by setting the prototype object to the parent.

  17. Next up, an example of a server side Javascript application using Node. But first, any questions so far?

  18. What is Node? • Node is a framework that adds asynchronous (more on this next) I/O (Input/Output) to the V8 Javascript engine (the one developed for Google Chrome) • However, it does not run in the browser, it runs standalone scripts on your server. • See www.nodejs.org

  19. What/Why/How is asynchronous I/O? • I/O is very slow. • Asynchronous I/O means not waiting for the result of the operation, but dealing with the result when it becomes available. • This is done in Node using events and callbacks. sys.exec("ls/").addCallback( function (stdout, stderr) { puts(stdout); } );

  20. A simple web framework • As an example node application for this talk we are going to write a simple web framework in node • It will allow loading of modules to display content to the browser • We will then look at how we could write modules using prototyping and closures in Javascript

  21. A simple web framework • example.com/module/method/var1/var2/ • This will call module.method(var1, var2, ...) • The method will be able to send a response to the users browser • Modules will be loaded by adding them to a special object called "loaded" • Lets look at a module

  22. Our first module // Simple module function Simple() { this.hello = function (req, res, arg) { res.simpleSend("Hello World"); } this.talk = function (req, res, arg) { res.simpleSend("Hi, you said: "+arg.join(" ")); } } // Load module loaded.simple = new Simple();

  23. Our framework // Load node http module var http = require('http'); // Loaded modules var loaded = {}; // HTTP Server http.createServer(function (req, res) { // Helper response function res.simpleSend = function (content) { this.sendHeader(200, {'Content-Type': 'text/plain'}); this.sendBody(content); this.finish(); }; // Check the URL if (req.uri.path != '/' && req.uri.path != '') { var module = req.uri.path.split('/'); // Check the module and method exist if (module.length > 2 && loaded[module[1]] !== undefined && (modname = loaded[module[1]]) && modname[module[2]] !== undefined) { modmethod= modname[module[2]]; module.splice(0,3); modmethod(req, res, module); return; } } res.simpleSend("Default response"); }).listen(8000);

  24. Extending our module function Advanced() { this.multiply = function (req, res, arg) { if (arg.length > 1) { res.simpleSend("Result: "+(arg[0] * arg[1])); } else { res.simpleSend("Requires 2 numbers"); } } } // Load simple's methods into advanced Advanced.prototype = new Simple(); // Load advanced loaded.advanced = new Advanced();

  25. Further extensions // Add a method to simple loaded.simple.bye= function (req, res, arg) { res.simpleSend("Goodbye World"); } // Alternative way to add a method (see next slide) Advanced.prototype.add= function (req, res, arg) { if (arg.length > 1) { res.simpleSend("Result: "+(parseInt(arg[0], 10) + parseInt(arg[1], 10))); } else { res.simpleSend("Requires 2 numbers"); } }

  26. Even further extensions // Adds a method to both simple and advanced. Simple.prototype.random= function (req, res, arg) { switch (Math.round(Math.random())) { case 0: res.simpleSend("Hello"); break; case 1: res.simpleSend("Goodbye"); break; } }

  27. Another module using closures function Delay() { this.wait = function (req, res, arg) { if (arg.length > 1) { var delayed = function () { res.simpleSend(arg[1]); }; setTimeout(delayed, arg[0]); } else { res.simpleSend("Requires a number and content"); } }; } loaded.delay = new Delay();

  28. A more advanced delay method Delay.prototype.doin = function (req, res, arg) { if (arg.length > 2) { setTimeout(function () { varmodname = arg[1]; varmodmethod = arg[2]; arg.splice(0, 3); loaded[modname][modmethod](req, res, arg); }, arg[0]); } else { res.simpleSend("Error"); } }

  29. The End • Slides, the full source for the example and instructions on setting up node will be made available on the website • Any questions?