Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Lecture 5: Client Side Programming 1

252 views

Published on

An introduction to JavaScript

Published in: Education
  • Be the first to comment

Lecture 5: Client Side Programming 1

  1. 1. adapted from slides by Alan Smith and Paweł Dorofiejczyk. Web Information Systems - 2015 Client Side Programming 1
  2. 2. Javascript Introduction Just an overview 1
  3. 3. Javascript Introduction Javascript is ◦ A prototype-based scripting language ◦ Dynamic ◦ Loosely typed ◦ Multi-Paradigm ▫ Object-Oriented ▫ Functional ▫ Imperative
  4. 4. Javascript Introduction What’s it Good For? ◦ Web Apps (Client Side) ▫ Provides programmatic access to certain browser features, your page's elements, their properties, and their styles ◦ Server Side ▫ node.js ◦ Databases ▫ MongoDB, CouchDB
  5. 5. Javascript Introduction Anything Else? ◦ Scripting ▫ OpenOffice ▫ Adobe CS  Photoshop  Illustrator  Dreamweaver ◦ Cross-Platform ▫ Enyo ▫ WinJS
  6. 6. Javascript Basics How to use it 2
  7. 7. Javascript Basics Local Variables Introduce Variables with “var” ◦ var myString = “Hi”; ◦ var myNumber = 1; ◦ var myOtherNumber = 1.1; ◦ var myBoolean = true;
  8. 8. Don’t Create a Variable Without var! This is a Global Variable Declaration. Don’t do this!
  9. 9. Javascript Basics Variable Types typeof ◦ typeof “hi”; // string Gotchas ◦ typeof []; // object ◦ typeof null; // object ◦ typeof NaN;// number
  10. 10. Javascript Basics Functions ◦ Are objects ◦ Can be anonymous with reference stored in a variable ▫ no name necessary ◦ Can create other functions ▫ try not to do this ◦ Are closures ▫ have there own scope ◦ Prototypes ▫ more on this later
  11. 11. Javascript Basics Function Syntax function foo() { console.log(“hello world”); } is equivalent to the anonymous var foo = function() { console.log(“hello world”); }
  12. 12. Javascript Basics Function Args Primitives ◦ always passed by value Objects ◦ passed by reference
  13. 13. Javascript Basics Function Args var test = function(a, b, obj) { obj.modified = true; console.log(arguments); } var obj = {}; console.log(obj.modified); // undefined test(1, 'a', obj); // { '0': 1, '1': 'a', '2': { modified: true } } console.log(obj.modified); // true
  14. 14. Javascript Basics Function Scope ◦ Static (lexical) ◦ Created only by function ◦ Function arguments becomes part of scope ◦ Child scope have reference to parent scope (scope chain) ◦ this is not scope (!!!)
  15. 15. Javascript Basics Function Scope var accumulator = function(x) { this.sum = (this.sum || 0) + x; return this.sum; } console.log(accumulator(1)); //1 console.log(accumulator(1)); //2 console.log(accumulator.sum); //undefined console.log(sum); // 2 !!!
  16. 16. Javascript Basics Notes on “this” } var bar = function(x) { this.x = x; return this.x; } } ← this refers to the global scope by default In the browser, “this” refers to window
  17. 17. Javascript Basics Objects ◦ Dynamic ◦ non-ordered ◦ key-value pairs ◦ Array access or object access ◦ Iterable ◦ Created in runtime ◦ Object literal {} ◦ No privacy control at object level ◦ Prototypal inheritance ◦ Constructor functions
  18. 18. Javascript Basics A Simple Object ◦ var obj = {}; A Little More ◦ var obj = { name: “Simple Object” } Access via ◦ obj.name ◦ obj[“name”]
  19. 19. Javascript Basics Special Operators ◦ “+” will also concat two strings ▫ 1 + 2 = 3 (as expected) ▫ “foo”+”bar” = “foobar” ◦ Unary “+” will change type ▫ +”1” = 1 ◦ “===” and “!==” should be used instead of “==” and “!=” as the former will not attempt type conversion.
  20. 20. Javascript Basics More Special Operators ◦ “&&” and “||” can be used outside of conditionals for smaller, though less readable code. ▫ “&&” will guard against null refs  return obj && obj.name; ▫ “||” will let you assign values only if they exist.  var x = name || obj.name;
  21. 21. The Document Object Model Javascript in the browser 3
  22. 22. The DOM In the DOM, everything is a node: ◦ The document itself is a document node ◦ All HTML elements are element nodes ◦ All HTML attributes are attribute nodes ◦ Text inside HTML elements are text nodes ◦ Comments are comment nodes w3Schools
  23. 23. The DOM Programmatically access page elements Create new elements by: ◦ var paragraph = document.createElement('p'); ◦ paragraph.id = 'content'; ◦ paragraph.appendChild(document.createText Node('Hello, world')); Don’t forget to add the element to the DOM ◦ document.body.appendChild(paragraph);
  24. 24. The DOM Manipulate them by: Setting properties ◦ var element = document.getElementById('content'); element.style.color = 'blue'; Calling methods ◦ var firstNode = document.body.childNodes[0]; document.body.removeChild(firstNode);
  25. 25. The DOM Understanding the DOM is important… But it is verbose, tedious, may not behave as expected across browsers. This leads to implementation and maintainability issues.
  26. 26. Javascript Libraries Usable Javascript in the browser 4
  27. 27. Javascript Libraries Popular Libraries ◦ jQuery ◦ Underscore ◦ Backbone ◦ Angular Let’s take a look at the difference...
  28. 28. Javascript var element = document.getElementById('content'); element.style.color = 'blue'; var firstNode = document.body.childNodes[0]; document.body.removeChild(firstNode); Javascript Libraries JQuery var element =$(“#content”); element.css(“color”, “blue”); or element.css({color:”blue”}) $(‘body:first-child’).remove();
  29. 29. Javascript Libraries $ is the global jQuery object ◦ It has its own properties and methods $ is also a function you can call ◦ $.getJSON('student-list.php'); Relies heavily upon the familiar CSS selector syntax and the Composite design pattern ◦ $('.urgent').css({ backgroundColor: 'red', color: 'white' });
  30. 30. Javascript Libraries Many methods are both getters and setters, depending on the parameter(s), or lack thereof Many of its functions return a jQuery object as well, which allows method chaining ◦ $("p.neat").addClass("ohmy").show("slow");
  31. 31. Javascript Libraries More advanced topics next time...
  32. 32. CREDITS Special thanks to: ◦ Alan Smith ◦ Paweł Dorofiejczyk ▫ http://www.slideshare.net/PaweD orofiejczyk/lets- javascript?qid=35826bbe-211d- 4f50-ad02-29143c7efff2

×