16. Objects & JSON. Dr. Dave Parker. Informa;on and the Web, 2014/15

Size: px

Start display at page:

Download "16. Objects & JSON. Dr. Dave Parker. Informa;on and the Web, 2014/15"

Sharon Morrison
5 years ago
Views:

1 16. Objects & JSON Dr. Dave Parker Informa;on and the Web, 2014/15 1

2 The module: What's lej Exercises #8 (AJAX): online now Assessments #3: marks/feedback within approx. 1 week #4: due 4pm last day of term (Fri 27 Apr) Lectures objects & JSON detailed example: AJAX + data jquery PHP 2

3 Today Last ;me AJAX: loading text and XML dynamic document crea;on Today assessment 4 objects in JavaScript JSON (as an alterna;ve to XML in AJAX) parsing JSON for AJAX 3

4 Quiz Here's some JavaScript code to get extract the ids from some "menu" divs and abach events that load some content when they are clicked. function initialise()! {! var arr = {};! var menus = document.getelementsbyclassname("menu");! for (var i = 0; i < menus.length; i++) {! var id = menus[i].id;! arr.pop(id);! menus[i].onclick = function() { loadpage(id+".html"); };! }! }! How many errors can you find? 4

Quiz Here's some JavaScript code to get extract the ids from some "menu" divs and abach events that load some content when they are clicked. function initialise()! {! var arr = {};!

5 Quiz Here's some JavaScript code to get extract the ids from some "menu" divs and abach events that load some content when they are clicked. function initialise()! {! var arr = {};! var menus = document.getelementsbyclassname("menu");! for (var i = 0; i < menus.length; i++) {! var id = menus[i].id;! arr.pop(id);! menus[i].onclick = function() { loadpage(id+".html"); };! }! }! How many errors can you find? 3 5

6 Quiz Here's some JavaScript code to get extract the ids from some "menu" divs and abach events that load some content when they are clicked. function initialise()! {! var arr = [];! var menus = document.getelementsbyclassname("menu");! for (var i = 0; i < menus.length; i++) {! var id = menus[i].id;! arr.push(id);! menus[i].onclick = function() { loadpage(this.id+".html"); };! }! }! How many errors can you find? 3 6

7 Objects in JavaScript JavaScript is object- oriented (amongst other things) Objects have proper;es (data) and methods examples: elem.classname = "important";! elem.getelementsbytagname("div");! and we have seen some "Java- like" code: var xmlhttp = new XMLHttpRequest();! xmlhttp.open("post", url, true);! But JavaScript does not have classes (or instances) instead, it is based on prototypes 7

8 Objects An object is a collec;on of proper;es A property associates a value to a name An example of an object literal: var infoweb = {!!title: "Information and the Web",!!lectures: 18,!!assessments : ["XML", "HTML+CSS", "JS", "AJAX"]! };! Debugging: alert(infoweb.lectures);! alert(json.stringify(infoweb));! alert(json.stringify(infoweb, null, 4));! console.log(infoweb);! 8

9 Objects Objects can contain other objects Object proper;es can be func;ons (methods) var infoweb = {!!title: "Information and the Web",!!lecturer: {!!!surname: "Parker",!!!forename: "Dave"!!},!!lectures: 18,!!assms : ["XML", "HTML+CSS", "JS", "AJAX"],!!numAssms : function() { return this.assms.length; }! };! var n = infoweb.numassms();! 9

10 Simple example: Crea;ng objects var infoweb = {};! infoweb.title = "Information and the Web";! infoweb.print = function() { alert(this.title); };! infoweb.print();! Object defini;on using constructors/prototypes: // Constructor! function Module(title) { this.title = title; }! //! Adding properties/methods! Module.prototype.title! = null;! Module.prototype.print! = function() { alert(this.title); };!!!// Creation/usage!! var infoweb = new Module("Information and the Web");!! infoweb.print();! 10

JSON JSON = JavaScript Object Nota;on lightweight

humans/computers to read/write alterna;ve to XML

language independent similar nota;on to many other

11 JSON JSON = JavaScript Object Nota;on lightweight data- interchange format open standard easy for both humans/computers to read/write alterna;ve to XML Language support based on a subset of JavaScript but language independent similar nota;on to many other programming languages genera;on/parsing support in many languages 11

booleans, null, arrays, objects Example: Extra " No functions {! }!!"title": "Information and the Web",!

12 JSON format A JSON object: an object is an unordered set of name/value pairs starts/ends with { } commas separate pairs, colons separate name/value names are strings, values are: strings, numbers, booleans, null, arrays, objects Example: Extra " No functions {! }!!"title": "Information and the Web",!!"lectures": 18,!!"assessments" : ["XML", "HTML+CSS", "JS", "AJAX"]! No trailing ; Nested arrays (or objects) 12

Parsing JSON How do we parse a JSON object? i.e. convert from a string to an object for example, in the context of an AJAX request Use built- in JSON support in browsers: var json = JSON.

13 Parsing JSON How do we parse a JSON object? i.e. convert from a string to an object for example, in the context of an AJAX request Use built- in JSON support in browsers: var json = JSON.parse(xmlhbp.responseText); An alterna;ve approach: use eval() var json = eval("(" + xmlhbp.responsetext + ")"); but there are some security risks so not recommended 13

14 eval() eval() evaluates JavaScript code given as a string it is a func;on of the global object Examples var x = eval("2+3"); // x = 5! var y = 10;! var expr = "2 + y";! var x = eval(expr); // x = 12! var x = eval("alert('hi!')");! 14

15 Summary Objects in JavaScript proper;es, methods (i.e. func;on proper;es) object = collec;on of proper;es but no classes/instances; prototypes/constructors instead JSON lightweight data exchange format alterna;ve to XML easy to convert to an object: JSON.parse() 15

CSC 337. JavaScript Object Notation (JSON) Rick Mercer

CSC 337. JavaScript Object Notation (JSON) Rick Mercer CSC 337 JavaScript Object Notation (JSON) Rick Mercer Why JSON over XML? JSON was built to know JS JSON JavaScript Object Notation Data-interchange format Lightweight Replacement for XML It's just a string