• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
JavaScript
 

JavaScript

on

  • 1,939 views

 

Statistics

Views

Total Views
1,939
Views on SlideShare
1,938
Embed Views
1

Actions

Likes
0
Downloads
25
Comments
0

1 Embed 1

http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    JavaScript JavaScript Presentation Transcript

    • JavaScript: The Good Parts Part Eleven: JSON Douglas Crockford [email_address]
    • JSON The x in Aja x Douglas Crockford Yahoo! Inc.
    • The Yoda of lambda programming and JavaScript Brendan Eich, 2006-07-31
    • [JSON is] not even XML! Who did this travesty? Let’s find a tree and string them up. Now. Dave Winer, 2006-12-20
    • any damn fool could produce a better data format than XML James Clark, 2007-04-06
    • I Discovered JSON
      • I do not claim to have invented JSON. It already existed in nature.
      • I do not claim to have been the first to discover it.
      • I gave it a name, a specification, and a little website.
      • The rest happened by itself.
    • JSON News
    • Native JSON support in ECMAScript, Fifth Edition. It is available now in IE8. http://www.JSON.org/json2.js
    • JSON.parse( text , reviver )
      • text is a JSON text to be parsed.
      • reviver is an optional function that will be called for each of the values in the new object, giving an opportunity to modify the result.
      • function reviver ( key , value ) {
      • return new_value ;
      • }
    • Example
      • If a property name contains date , convert the value into a Date object.
      • function my_reviver(key, value) {
      • return key.indexOf('date') >= 0 ? new Date(value) : value;
      • }
      • my_object = JSON.parse(my_text, my_reviver);
    • Recommended Practice
      • Design your constructor functions to take a single parameter which is the value produced by JSON.parse .
      • The constructor can attach structure and behavior to the data.
    • JSON.stringify( value , replacer , space )
      • value is a JavaScript value to be stringified.
      • replacer is an optional function that will be called for each of the values, giving an opportunity to modify the result.
      • space is an optional pretty printing parameter.
    • toJSON
      • An object may have or inherit a toJSON method that will be called by JSON.stringify .
      • It allows the object to substitute another value.
      • It does not return the serialization of the value.
      • It returns the value to be serialized.
      • function toJSON(key) {
      • return new_value ;
      • }
    • replacer
      • The replacer function is passed the key and the value produced by toJSON .
      • this is bound to the object that holds the key , so this[ key ] is the original value.
      • function replacer ( key , value ) {
      • return new_value ;
      • }
    • Example
      • If a property name contains date , convert the value into string.
      • function my_reviver(key, value) {
      • return key.indexOf('date') >= 0 ? value.toISOString() : value;
      • }
      • my_object = JSON.stringify(my_text, my_reviver);
    • replacer Whitelist
      • If replacer is an array of strings, those strings will be used to select the properties that will be stringified.
    • space
      • The optional space parameter can be the number of spaces in each level in indentation, or a string (such as ' ' ) that will be accumulated for each level of indentation.
      • This can produce strings that are easier to read.
      • {
      • "value": "=",
      • "arity": "binary",
      • "first": {
      • "value": "make_parse",
      • "arity": "name"
      • },
      • "second": {
      • "value": "function",
      • "arity": "function",
      • "first": [],
      • "second": [
      • {
      • "value": "=",
    • JSON Databases
      • CouchDB is a distributed, fault-tolerant and schema-free document-oriented database accessible via a RESTful HTTP/JSON API.
      • Also, Persevere, DBSlayer, StrokeDB, SpringDB.
    • What about XML?
    • XML Form
      • <recipe name=&quot;bread&quot; prep_time=&quot;5 mins&quot; cook_time=&quot;3 hours&quot;>
      • <title>Basic bread</title>
      • <ingredient amount=&quot;8&quot; unit=&quot;dL&quot;>Flour</ingredient>
      • <ingredient amount=&quot;10&quot; unit=&quot;grams&quot;>Yeast</ingredient>
      • <ingredient amount=&quot;4&quot; unit=&quot;dL&quot; state=&quot;warm&quot;>Water</ingredient>
      • <ingredient amount=&quot;1&quot; unit=&quot;teaspoon&quot;>Salt</ingredient>
      • <instructions>
      • <step>Mix all ingredients together.</step>
      • <step>Knead thoroughly.</step>
      • <step>Cover with a cloth, and leave for one hour in warm room.</step>
      • <step>Knead again.</step>
      • <step>Place in a bread baking tin.</step>
      • <step>Cover with a cloth, and leave for one hour in warm room.</step>
      • <step>Bake in the oven at 180(degrees)C for 30 minutes.</step>
      • </instructions>
      • </recipe>
    • Data Form
      • {&quot;recipe&quot;: {
      • &quot;name&quot;: &quot;bread&quot;, &quot;title&quot;: &quot;Basic bread&quot;
      • &quot;cook_time&quot;: &quot;3 hours&quot;, &quot;prep_time&quot;: &quot;5 mins&quot;,
      • &quot;ingredient&quot;: [
      • {&quot;amount&quot;: 8, &quot;content&quot;: &quot;Flour&quot;, &quot;unit&quot;: &quot;dL&quot;},
      • {&quot;amount&quot;: 10, &quot;content&quot;: &quot;Yeast&quot;, &quot;unit&quot;: &quot;grams&quot;},
      • {&quot;amount&quot;: 4, &quot;content&quot;: &quot;Water&quot;, &quot;state&quot;: &quot;warm&quot;, &quot;unit&quot;: &quot;dL&quot;},
      • {&quot;amount&quot;: 1, &quot;content&quot;: &quot;Salt&quot;, &quot;unit&quot;: &quot;teaspoon&quot;}
      • ],
      • &quot;instructions&quot;: {&quot;step&quot;: [
      • &quot;Mix all ingredients together.&quot;,
      • &quot;Knead thoroughly.&quot;,
      • &quot;Cover with a cloth, and leave for one hour in warm room.&quot;,
      • &quot;Knead again.&quot;,
      • &quot;Place in a bread baking tin.&quot;,
      • &quot;Cover with a cloth, and leave for one hour in warm room.&quot;,
      • &quot;Bake in the oven at 180(degrees)C for 30 minutes.&quot;
      • ]}
      • }}
    • Data Form
      • {&quot;recipe&quot;: {
      • &quot;name&quot;: &quot;bread&quot;, &quot;title&quot;: &quot;Basic bread&quot;
      • &quot;cook_time&quot;: &quot;3 hours&quot;, &quot;prep_time&quot;: &quot;5 mins&quot;,
      • &quot;ingredient&quot;: [
      • {&quot;amount&quot;: 8, &quot;content&quot;: &quot;Flour&quot;, &quot;unit&quot;: &quot;dL&quot;},
      • {&quot;amount&quot;: 10, &quot;content&quot;: &quot;Yeast&quot;, &quot;unit&quot;: &quot;grams&quot;},
      • {&quot;amount&quot;: 4, &quot;content&quot;: &quot;Water&quot;, &quot;state&quot;: &quot;warm&quot;, &quot;unit&quot;: &quot;dL&quot;},
      • {&quot;amount&quot;: 1, &quot;content&quot;: &quot;Salt&quot;, &quot;unit&quot;: &quot;teaspoon&quot;}
      • ],
      • &quot;instructions&quot;: {&quot;step&quot;: [
      • &quot;Mix all ingredients together.&quot;,
      • &quot;Knead thoroughly.&quot;,
      • &quot;Cover with a cloth, and leave for one hour in warm room.&quot;,
      • &quot;Knead again.&quot;,
      • &quot;Place in a bread baking tin.&quot;,
      • &quot;Cover with a cloth, and leave for one hour in warm room.&quot;,
      • &quot;Bake in the oven at 180(degrees)C for 30 minutes.&quot;
      • ] }
      • } }
    • Data Form
      • {&quot;recipe&quot;: {
      • &quot;name&quot;: &quot;bread&quot;, &quot;title&quot;: &quot;Basic bread&quot;
      • &quot;cook_time&quot;: &quot;3 hours&quot;, &quot;prep_time&quot;: &quot;5 mins&quot;,
      • &quot;ingredient&quot;: [
      • {&quot;amount&quot;: 8, &quot;content&quot;: &quot;Flour&quot;, &quot;unit&quot;: &quot;dL&quot;},
      • {&quot;amount&quot;: 10, &quot;content&quot;: &quot;Yeast&quot;, &quot;unit&quot;: &quot;grams&quot;},
      • {&quot;amount&quot;: 4, &quot;content&quot;: &quot;Water&quot;, &quot;state&quot;: &quot;warm&quot;, &quot;unit&quot;: &quot;dL&quot;},
      • {&quot;amount&quot;: 1, &quot;content&quot;: &quot;Salt&quot;, &quot;unit&quot;: &quot;teaspoon&quot;}
      • ],
      • &quot;instructions&quot;: {&quot;step&quot;: [
      • &quot;Mix all ingredients together.&quot;,
      • &quot;Knead thoroughly.&quot;,
      • &quot;Cover with a cloth, and leave for one hour in warm room.&quot;,
      • &quot;Knead again.&quot;,
      • &quot;Place in a bread baking tin.&quot;,
      • &quot;Cover with a cloth, and leave for one hour in warm room.&quot;,
      • &quot;Bake in the oven at 180(degrees)C for 30 minutes.&quot;
      • ] }
      • } }
      my_object. recipe. instructions .step [0] my_object.instructions[0]
    • Data Form is more effective than XML at representing data. It is not effective at representing documents and semidocuments.
    • Array Form
      • [&quot;recipe&quot;, {&quot;cook_time&quot;: &quot;3 hours&quot;, &quot;name&quot;: &quot;bread&quot;, &quot;prep_time&quot;: &quot;5 mins&quot;},
      • [&quot;title&quot;, &quot;Basic bread&quot;],
      • [&quot;ingredient&quot;, {&quot;amount&quot;: 8, &quot;unit&quot;: &quot;dL&quot;}, &quot;Flour&quot;],
      • [&quot;ingredient&quot;, {&quot;amount&quot;: 10, &quot;unit&quot;: &quot;grams&quot;}, &quot;Yeast&quot;],
      • [&quot;ingredient&quot;, {&quot;amount&quot;: 4, &quot;state&quot;: &quot;warm&quot;, &quot;unit&quot;: &quot;dL&quot;}, &quot;Water&quot;],
      • [&quot;ingredient&quot;, {&quot;amount&quot;: 1, &quot;unit&quot;: &quot;teaspoon&quot;}, &quot;Salt&quot;],
      • [&quot;instructions&quot;,
      • [&quot;step&quot;, &quot;Mix all ingredients together.&quot;],
      • [&quot;step&quot;, &quot;Knead thoroughly.&quot;],
      • [&quot;step&quot;, &quot;Cover with a cloth, and leave for one hour in warm room.&quot;],
      • [&quot;step&quot;, &quot;Knead again.&quot;],
      • [&quot;step&quot;, &quot;Place in a bread baking tin.&quot;],
      • [&quot;step&quot;, &quot;Cover with a cloth, and leave for one hour in warm room.&quot;],
      • [&quot;step&quot;,&quot;Bake in the oven at 180(degrees)C for 30 minutes.&quot;]
      • ]
      • ]
    • Object Form
      • {&quot;tagName&quot;: &quot;recipe&quot;, &quot;cook_time&quot;: &quot;3 hours&quot;, &quot;name&quot;: &quot;bread&quot;, &quot;childNodes&quot;: [
      • {&quot;tagName&quot;: &quot;title&quot;, &quot;childNodes&quot;: [&quot;Basic bread&quot;]},
      • {&quot;amount&quot;: &quot;8&quot;, &quot;unit&quot;: &quot;dL&quot;, &quot;tagName&quot;: &quot;ingredient&quot;, &quot;childNodes&quot;: [&quot;Flour&quot;]},
      • {&quot;amount&quot;: &quot;10&quot;, &quot;unit&quot;: &quot;grams&quot;, &quot;tagName&quot;: &quot;ingredient&quot;, &quot;childNodes&quot;: [&quot;Yeast&quot;]},
      • {&quot;amount&quot;: &quot;4&quot;, &quot;unit&quot;: &quot;dL&quot;, &quot;tagName&quot;: &quot;ingredient&quot;, &quot;state&quot;: &quot;warm&quot;, &quot;childNodes&quot;: [&quot;Water&quot;]},
      • {&quot;amount&quot;: &quot;1&quot;, &quot;unit&quot;: &quot;teaspoon&quot;, &quot;tagName&quot;: &quot;ingredient&quot;, &quot;childNodes&quot;: [&quot;Salt&quot;]},
      • {&quot;tagName&quot;: &quot;instructions&quot;, &quot;childNodes&quot;: [
      • {&quot;tagName&quot;: &quot;step&quot;, &quot;childNodes&quot;: [&quot;Mix all ingredients together.&quot;]},
      • {&quot;tagName&quot;: &quot;step&quot;, &quot;childNodes&quot;: [&quot;Knead thoroughly.&quot;]},
      • {&quot;tagName&quot;: &quot;step&quot;, &quot;childNodes&quot;: [&quot;Cover with a cloth, and leave for one hour in warm room.&quot;]},
      • {&quot;tagName&quot;: &quot;step&quot;, &quot;childNodes&quot;: [&quot;Knead again.&quot;]},
      • {&quot;tagName&quot;: &quot;step&quot;, &quot;childNodes&quot;: [&quot;Place in a bread baking tin.&quot;]},
      • {&quot;tagName&quot;: &quot;step&quot;, &quot;childNodes&quot;: [&quot;Cover with a cloth, and leave for one hour in warm room.&quot;]},
      • {&quot;tagName&quot;: &quot;step&quot;, &quot;childNodes&quot;: [&quot;Bake in the oven at 180(degrees)C for 30 minutes.&quot;]}]}
      • ], &quot;prep_time&quot;: &quot;5 mins&quot;
      • }
    • XML To Three JSON Forms
      • Data Form is most compact.
      • Data Form is conveniently manipulated by programs.
      • Data Form loses document structure.
      • The Array and Object forms retain document structure (JSONML).
      • Array Form is more compact than Object Form.
      • Object Form conventions match DOM.
    • JSON.java Reference Implementation http://www.JSON.org/java/
    • Where did the idea come from that data should be represented by a document format?
    • RUNOFF
      • .SK 1
      • Text processing and word processing systems
      • typically require additional information to
      • be interspersed among the natural text of
      • the document being processed. This added
      • information, called &quot;markup&quot;, serves two
      • purposes:
      • .TB 4
      • .OF 4
      • .SK 1
      • 1.#Separating the logical elements of the
      • document; and
      • .OF 4
      • .SK 1
      • 2.#Specifying the processing functions to be
      • performed on those elements.
      • .OF 0
      • .SK 1
    • GML
      • :h1.Chapter 1: Introduction
      • :p.GML supported hierarchical containers, such as
      • :ol
      • :li.Ordered lists (like this one),
      • :li.Unordered lists, and
      • :li.Definition lists
      • :eol.
      • as well as simple structures.
      • :p.Markup minimization (later generalized and
      • formalized in SGML),
      • allowed the end-tags to be omitted for the &quot;h1&quot;
      • and &quot;p&quot; elements.
      • :eol.
      • ::ol.
      • </ol>
    • Scribe
      • @Quote(Any damn fool)
      • ( ) [ ] { }
      • < > &quot; &quot; ' '
      • @Begin(Quote)
      • Any damn fool
      • @End(Quote)
    • Scribe
      • @techreport(PUB, key=&quot;Tesler&quot;, author=&quot;Tesler, Larry&quot;, title=&quot;PUB: The Document Compiler&quot;, year=1972, number=&quot;ON-72&quot;, month=&quot;Sep&quot;, institution=&quot;Stanford University Artificial Intelligence Project&quot;) @book(Volume3, key=&quot;Knuth&quot;,
      • author=&quot;Knuth, Donald E.&quot;, title=&quot;Sorting and Searching&quot;, publisher=&quot;Addison-Wesley&quot;, year=1973, volume=3,
      • series=&quot;The Art of Computer Programming&quot;, address=&quot;Reading, Mass.&quot;)
    • Languages
      • Arabic
      • Bulgarian
      • Chinese
      • Czech
      • Dutch
      • French
      • German
      • Greek
      • Hebrew
      • Hungarian
      • Indonesian
      • Italian
      • Japanese
      • Korean
      • Persian
      • Polish
      • Portuguese
      • Russian
      • Slovenian
      • Spanish
      • Turkish
      • Vietnamese
    • Languages
      • ActionScript
      • C / C++
      • C#
      • Cold Fusion
      • Delphi
      • E
      • Erlang
      • Haskell
      • Java
      • Lisp
      • Lua
      • Perl
      • Objective-C
      • Objective CAML
      • PHP
      • Prolog
      • Python
      • Rebol
      • Ruby
      • Scheme
      • Squeak
      • TCL
    • Versionless
      • JSON has no version number.
      • No revisions to the JSON grammar are anticipated.
      • JSON is very stable.
      • Stability is more valuable than any feature we could add.
    • Supersets
      • YAML is a superset of JSON.
        • A YAML decoder is a JSON decoder.
      • JavaScript is a superset of JSON.
        • A JavaScript compiler is a JSON decoder.
      • New programming languages based on JSON.
    • JSONT
      • var rules = {
        • self:
      • '<svg>< {closed} stroke=&quot; {color} &quot; points=&quot; {points} &quot; /></svg>',
        • closed: function (x) {return x ? 'polygon' : 'polyline';},
        • 'points[*][*]': ' {$} '
      • };
      • var data = {
        • &quot;color&quot;: &quot;blue&quot;,
        • &quot;closed&quot;: true,
        • &quot;points&quot;: [[10,10], [20,10], [20,20], [10,20]]
      • };
      • jsonT(data, rules)
      • <svg><polygon stroke=&quot;blue&quot;
      • points=&quot;10 10 20 10 20 20 10 20 &quot; /></svg>
    • http://goessner.net/articles/jsont/
      • function jsonT(self, rules) {
      • var T = {
      • output: false,
      • init: function () {
      • for (var rule in rules) if (rule.substr(0,4) != &quot;self&quot;) rules[&quot;self.&quot; + rule] = rules[rule];
      • return this;
      • },
      • apply: function(expr) {
      • var trf = function (s) {
      • return s.replace(/{([A-Za-z0-9_$.[]'@()]+)}/g, function ($0, $1){
      • return T.processArg($1, expr);
      • })
      • }, x = expr.replace(/[[0-9]+]/g, &quot;[*]&quot;), res;
      • if (x in rules) {
      • if (typeof(rules[x]) == &quot;string&quot;) res = trf(rules[x]);
      • else if (typeof(rules[x]) == &quot;function&quot;) res = trf(rules[x](eval(expr)).toString());
      • } else res = T.eval(expr);
      • return res;
      • },
      • processArg: function (arg, parentExpr) {
      • var expand = function (a, e) {
      • return (e = a.replace(/^$/,e)).substr(0, 4) != &quot;self&quot; ? (&quot;self.&quot; + e) : e;
      • }, res = &quot;&quot;;
      • T.output = true;
      • if (arg.charAt(0) == &quot;@&quot;) res = eval(arg.replace(/@([A-za-z0-9_]+)(([A-Za-z0-9_$.[]']+))/, function($0, $1, $2){
      • return &quot;rules['self.&quot; + $1 + &quot;'](&quot; + expand($2,parentExpr) + &quot;)&quot;;
      • }));
      • else if (arg != &quot;$&quot;) res = T.apply(expand(arg, parentExpr));
      • else res = T.eval(parentExpr);
      • T.output = false;
      • return res;
      • },
      • eval: function (expr) {
      • var v = eval(expr), res = &quot;&quot;;
      • if (typeof(v) != &quot;undefined&quot;) {
      • if (v instanceof Array) {
      • for (var i = 0; i < v.length; i++) if (typeof(v[i]) != &quot;undefined&quot;) res += T.apply(expr + &quot;[&quot; + i + &quot;]&quot;);
      • } else if (typeof(v) == &quot;object&quot;) {
      • for (var m in v) if (typeof(v[m]) != &quot;undefined&quot;) res += T.apply(expr+&quot;.&quot;+m);
      • } else if (T.output) res += v;
      • }
      • return res;
      • }
      • };
      • return T.init().apply(&quot;self&quot;);
      • }
    • Don't wrap JSON text in comments
      • Intended to close a browser hole.
        • /* jsontext */
      • May open a new hole.
        • &quot;*/ evil(); /*&quot;
      • Security is not obtained by tricks.
      • Never put data on the wire unless you intend that it be delivered.
      • Do not rely on Same Origin Policy.
    • www.JSON.org