Lecture 5: Client Side Programming 1

adapted from slides by Alan Smith and Paweł Dorofiejczyk. Web Information Systems - 2015 Client Side Programming 1

Javascript Introduction Just an overview 1

Javascript Introduction Javascript is ◦ A prototype-based scripting language ◦ Dynamic ◦ Loosely typed ◦ Multi-Paradigm ▫ Object-Oriented ▫ Functional ▫ Imperative

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

Javascript Introduction Anything Else? ◦ Scripting ▫ OpenOffice ▫ Adobe CS  Photoshop  Illustrator  Dreamweaver ◦ Cross-Platform ▫ Enyo ▫ WinJS

Javascript Basics How to use it 2

Javascript Basics Local Variables Introduce Variables with “var” ◦ var myString = “Hi”; ◦ var myNumber = 1; ◦ var myOtherNumber = 1.1; ◦ var myBoolean = true;

Don’t Create a Variable Without var! This is a Global Variable Declaration. Don’t do this!

Javascript Basics Variable Types typeof ◦ typeof “hi”; // string Gotchas ◦ typeof []; // object ◦ typeof null; // object ◦ typeof NaN;// number

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

Javascript Basics Function Syntax function foo() { console.log(“hello world”); } is equivalent to the anonymous var foo = function() { console.log(“hello world”); }

Javascript Basics Function Args Primitives ◦ always passed by value Objects ◦ passed by reference

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

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 (!!!)

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

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

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

Javascript Basics A Simple Object ◦ var obj = {}; A Little More ◦ var obj = { name: “Simple Object” } Access via ◦ obj.name ◦ obj[“name”]

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.

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;

The Document Object Model Javascript in the browser 3

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

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

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

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.

Javascript Libraries Usable Javascript in the browser 4

Javascript Libraries Popular Libraries ◦ jQuery ◦ Underscore ◦ Backbone ◦ Angular Let’s take a look at the difference...

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();

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' });

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");

Javascript Libraries More advanced topics next time...

CREDITS Special thanks to: ◦ Alan Smith ◦ Paweł Dorofiejczyk ▫ http://www.slideshare.net/PaweD orofiejczyk/lets- javascript?qid=35826bbe-211d- 4f50-ad02-29143c7efff2

Lecture 5: Client Side Programming 1

More Related Content

What's hot

Similar to Lecture 5: Client Side Programming 1

Recently uploaded

Lecture 5: Client Side Programming 1