{"id":697,"date":"2011-02-01T16:11:05","date_gmt":"2011-02-01T15:11:05","guid":{"rendered":"http:\/\/www.dotmana.com\/index.php\/?p=697"},"modified":"2011-02-01T16:11:40","modified_gmt":"2011-02-01T15:11:40","slug":"javascript-en-10-minutes","status":"publish","type":"post","link":"https:\/\/www.dotmana.com\/weblog\/2011\/02\/javascript-en-10-minutes\/","title":{"rendered":"Javascript en 10 minutes"},"content":{"rendered":"

Article original ici<\/a>, je me permets de le sauvegarder en le copiant ici.<\/p>\n

\n\n\n\n
<\/td>\n\n

Javascript<\/a><\/h1>\n

(ECMAScript)<\/p>\n

Javascript in Ten Minutes<\/h2>\n
\n

Breakdown…<\/h2>\n

Basic Types<\/h3>\n
var intValue = 1;\r\nvar floatValue = 3.0;\r\nvar stringValue = \"This is a string\\n\";\r\nvar sqString = 'This is also a string';<\/pre>\n
Javascript is a dynamically typed language.  Variables are declared with the keyword var<\/tt>.  Common simple types are supported.<\/p>\n
Arrays<\/h3>\n
var emptyList = [];\r\nvar homogenousList = [1, 2, 3];\r\nvar heterogenousList = [\"one\", 2, 3.0];<\/pre>\n
Javascript has built-in collection objects.  The Array object is a dynamically typed sequence of Javascript values.  They are  created with the bracket notation []<\/tt> or with the new<\/tt> operator on the Array<\/tt> object (e.g.  new Array(5)<\/tt>).<\/p>\n
Property Maps<\/h3>\n
var emptyMap = {};\r\nvar homogenousMap = {\"one\": 1, \"two\": 2, \"three\": 3};\r\nvar heterogenousMap = {\"one\": 1,\r\n                       \"two\": \"two\",\r\n                       \"three\": 3.0};<\/pre>\n
Along with Array<\/tt>s are the Object<\/tt> objects. They act as property maps with strings serving as keys to dynamically typed data.<\/p>\n
Access<\/h4>\n
\/\/ Dot notation property access\r\nwindow.alert(\"Homogenous map property \\\"one\\\" \"\r\n             + homogenousMap.one<\/span>);\r\n\/\/ Subscript notation property access\r\nwindow.alert(\"Homogenous map property \\\"two\\\" \"\r\n             + homogenousMap[\"two\"]<\/span>);<\/pre>\n
Assignment<\/h4>\n
homogenousMap[\"one\"] = 10;\r\nhomogenousMap.two = 20;<\/pre>\n
Removal<\/h4>\n
delete homogenousMap[\"one\"];\r\ndelete homogenousMap.two;<\/pre>\n
Iteration<\/h4>\n
for (var key<\/span> in heterogenousMap<\/span>) {\r\n    window.alert(\"Heterogenous map property \\\"\"\r\n                 + key<\/span>\r\n                 + \"\\\" = \"\r\n                 + heterogenousMap[key<\/span>]<\/span>);\r\n}<\/pre>\n
Functions<\/h3>\n
var callable = function (message) { \/\/ <-- notice assignment\r\n    window.alert(\"Callable called with message = \"\r\n                 + message);\r\n}\r\n\r\nfunction createClosure(initial) {\r\n    var res = function () {\r\n        initial = initial + 1;\r\n        window.alert(\"Closure with modified state \"\r\n                     + initial);\r\n    }\r\n    return res;\r\n}\r\n\r\nfunction callCallable(f, x) {\r\n    f(x);\r\n}\r\n\r\nfunction composeCallables(f, g, x) {\r\n    f(g(x));\r\n}<\/pre>\n
Functions are first-class objects.  That means that they can be created dynamically, stored, passed and returned  just like any other value.<\/p>\n
Objects<\/h3>\n
function MyObject(name, value) {\r\n    this.name = name;\r\n    this.value = value;\r\n}<\/pre>\n
Javascript supports prototype based object orientation. Not a class type but an object constructor is created for new objects with particular properties.  In the example above the this<\/tt> keyword used to  reference the ”current instance” of the object. The this<\/tt> object is essentially a property map with members accessed (and initialized) in this  example with the dot notation.<\/p>\n
The object constructor, MyObject<\/tt>, is an object constructor not in how it’s defined, which looks like any other Javascript function, but in  how it’s ”invoked”.<\/p>\n
    var my = new MyObject(\"foo\", 5);<\/pre>\n
The new<\/tt> operator before the function  invokes the function with a newly construced object as this<\/tt> and returns that the initialized object.<\/p>\n
Object Prototype<\/h4>\n
Part of what makes a language object oriented is that data not only has properties but also ”behaviors”. Also known as: member functions; methods; and object  messages. To implement a member function in Javascript one would be tempted to write something like what’s below based on the member initialization exampled above.<\/p>\n
function BadObject(data) {\r\n    this.data = data\r\n    this.memberFunction = function () {\r\n        \/\/ ...functions on data...\r\n    }\r\n}\r\n<\/span><\/pre>\n
While the code above will work without error, it does create a new closure for each member function for each new instance of the object.  What’s really required is a class level function that works on instance data. But remember, Javascript objects aren’t class based but prototype based.  So how do we implement “class” level member functions? (Skip to Implementation<\/a>) Better yet, how do we implement “class” level members functions in general?<\/p>\n
Enter the prototype<\/tt> member.<\/p>\n
The internal object member, prototype<\/tt>, has  language defined significance in that it is used for  resolving property names if the property isn’t found in the current property map.  It’s considered internal because, while the instance’s prototype<\/tt> member is ”inherited” from the ”constructor’s” prototype<\/tt> member, it cannot be accessed directly from the object instance itself.  The defined prototype<\/tt> member  is a property map itself which holds members for property  name resolution. Consider the example below:<\/p>\n
 var parentPropertyMap = {\"bar\"<\/span>: \"I'm the bar\"<\/span>};\r\n\r\n \/\/ Define the constructor with inheritable properties<\/span>\r\n function ChildObject(foo) {\r\n     this.foo<\/span> = foo;\r\n }\r\n ChildObject.prototype = parentPropertyMap;\r\n\r\n childPropertyMap1 = new ChildObject(\"I'm the foo1\"<\/span>);\r\n childPropertyMap2 = new ChildObject(\"I'm the foo2\"<\/span>);\r\n\r\n \/\/ Prints \"childPropertyMap1.foo = I'm the foo1\"<\/span>\r\n window.alert(\"childPropertyMap1.foo = \" + childPropertyMap1.foo<\/span>);\r\n\r\n \/\/ Prints \"childPropertyMap2.foo = I'm the foo2\"<\/span>\r\n window.alert(\"childPropertyMap2.foo = \" + childPropertyMap2.foo<\/span>);\r\n\r\n \/\/ Prints \"childPropertyMap1.bar = I'm the bar\"<\/span>\r\n window.alert(\"childPropertyMap1.bar = \" + childPropertyMap1.bar<\/span>);\r\n\r\n \/\/ Prints \"childPropertyMap2.bar = I'm the bar\"<\/span>\r\n window.alert(\"childPropertyMap2.bar = \" + childPropertyMap2.bar<\/span>);<\/pre>\n
The member foo<\/tt> is an instance member added to the instance’s property map during construction:<\/p>\n
 function ChildObject(foo) {\r\n     this.foo = foo;<\/span>\r\n }<\/pre>\n
while bar<\/tt> is in the constructor’s prototype<\/tt>:<\/p>\n
 var parentPropertyMap = {\"bar\": \"I'm the bar\"};\r\n ...\r\n ChildObject.prototype = parentPropertyMap;<\/pre>\n
which is ”inherited” during the new<\/tt> operation:<\/p>\n
 childPropertyMap1 = new ChildObject(\"I'm the foo1\");\r\n childPropertyMap2 = new ChildObject(\"I'm the foo2\");<\/pre>\n
In other words, the member, bar<\/tt>, is shared across  all instances of ChildObject<\/tt>.<\/p>\n
Therefore, by implementing the prototype<\/tt> member of the  constructor function, we can think of the constructor function itself as the “class” object.  Complete with static class  functions:<\/p>\n
 function ClassObject() {}\r\n ClassObject.staticClassFunction = function(x) {\r\n     return x * 2;\r\n }<\/pre>\n
static class variables:<\/p>\n
 function ClassObject() {}\r\n ClassObject.staticClassVariable = 5;<\/pre>\n
shared member variables:<\/p>\n
 function ClassObject() {}\r\n ClassObject.prototype.sharedMember = 5;<\/pre>\n
and of course, shared member functions:<\/p>\n
 function ClassObject(x) {\r\n     this.x = x;\r\n }\r\n ClassObject.prototype.memberFunction = function(x) {\r\n     return x * this.x;\r\n }<\/pre>\n
Member Function Implementation<\/h4>\n
function Message(message) {\r\n    this.message = message;\r\n}\r\n\r\nMessage.prototype.show = function() {\r\n    window.alert(\"Message.show() with message = \"\r\n                 + this.message);\r\n}<\/pre>\n
(More on Classes and Objects<\/a>)<\/p>\n
Example Code<\/h2>\n
\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\r\n\/\/ Basic Types\r\nvar intValue = 1;\r\nvar floatValue = 3.0;\r\nvar stringValue = \"This is a string\\n\";\r\n\r\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\r\n\/\/ Array\r\nvar emptyList = [];\r\nvar homogenousList = [1, 2, 3];\r\nvar heterogenousList = [\"one\", 2, 3.0];\r\n\r\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\r\n\/\/ Property Map\r\n\/\/\r\nvar emptyMap = {};\r\nvar homogenousMap = {\"one\": 1, \"two\": 2, \"three\": 3};\r\nvar heterogenousMap = {\"one\": 1,\r\n                       \"two\": \"two\",\r\n                       \"three\": 3.0};\r\n\r\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\r\n\/\/ Functions as values\r\n\/\/\r\nvar callable = function (message) { \/\/ <-- notice assignment\r\n    window.alert(\"Callable called with message = \"\r\n                 + message);\r\n}\r\n\r\nfunction createClosure(initial) {\r\n    var res = function () {\r\n        initial = initial + 1;\r\n        window.alert(\"Closure with modified state \"\r\n                     + initial);\r\n    }\r\n    return res;\r\n}\r\n\r\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\r\n\/\/ Functions as arguments\r\n\/\/\r\nfunction callCallable(f, x) {\r\n    f(x);\r\n}\r\n\r\nfunction composeCallables(f, g, x) {\r\n    f(g(x));\r\n}\r\n\r\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\r\n\/\/ Objects\r\n\/\/\r\nfunction MyObject(name, value) {\r\n    this.name = name;\r\n    this.value = value;\r\n}\r\n\r\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\r\n\/\/ Objects with Member Functions\r\n\/\/\r\nfunction Message(message) {\r\n    this.message = message;\r\n}\r\n\r\nMessage.prototype.show = function() {\r\n    window.alert(\"Message.show() with message = \"\r\n                 + this.message);\r\n}\r\n\r\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\r\n\/\/ Demo Utilities\r\n\/\/\r\nfunction quote(message) {\r\n    return \"\\\"\" + message + \"\\\"\";\r\n}\r\n\r\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\r\n\/\/ HTML Invoked demonstration\r\n\/\/\r\n\/\/\r\nfunction main() {\r\n    window.alert(\"Integer = \" + intValue);\r\n    window.alert(\"Float = \" + floatValue);\r\n    window.alert(\"String = \" + stringValue);\r\n\r\n    for (var item in emptyList) {\r\n        window.alert(\"Empty list item = \" + item);\r\n    }\r\n\r\n    \/\/ Script style index iteration\r\n    for (var i in homogenousList) {\r\n        window.alert(\"Homogenous list item = \"\r\n                     + homogenousList[i]);\r\n    }\r\n\r\n    \/\/ C style index iteration\r\n    for (var i=0; i < heterogenousList.length; ++i) {\r\n        window.alert(\"Heterogenous list item = \"\r\n                     + heterogenousList[i]);\r\n    }\r\n\r\n    \/\/ Dot notation property access\r\n    window.alert(\"Homogenous map property \\\"one\\\" \"\r\n                 + homogenousMap.one);\r\n    \/\/ Subscript notation property access\r\n    window.alert(\"Homogenous map property \\\"two\\\" \"\r\n                 + homogenousMap[\"two\"]);\r\n\r\n    for (var key in heterogenousMap) {\r\n        window.alert(\"Heterogenous map property \\\"\"\r\n                     + key\r\n                     + \"\\\" = \"\r\n                     + heterogenousMap[key]);\r\n    }\r\n\r\n    callable(\"(Function value invoked)\");\r\n    closure();\r\n    closure();\r\n\r\n    callCallable(closure);\r\n    composeCallables(callable, quote, \"My Message\");\r\n\r\n    var my = new MyObject(\"foo\", 5);\r\n    window.alert(\"MyObject my.name = \" + my.name);\r\n    window.alert(\"MyObject my[\\\"value\\\"] = \" + my[\"value\"]);\r\n\r\n    var msg = new Message(\"bar\");\r\n    for (var key in Message.prototype) {\r\n        window.alert(\"Message prototype member \\\"\"\r\n                     + key\r\n                     + \"\\\" = \"\r\n                     + Message.prototype[key]);\r\n    }\r\n\r\n    window.alert(\"Message msg.message = \" + msg.message);\r\n    msg.show();\r\n}<\/pre>\n
<\/a><\/div>\n<\/td>\n


\n<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"

Article original ici, je me permets de le sauvegarder en le copiant ici. Javascript (ECMAScript) Javascript in Ten Minutes Breakdown… Basic Types var intValue = 1; var floatValue = 3.0; var stringValue = “This is a string\\n”; var sqString = … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-697","post","type-post","status-publish","format-standard","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/www.dotmana.com\/weblog\/wp-json\/wp\/v2\/posts\/697","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dotmana.com\/weblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dotmana.com\/weblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dotmana.com\/weblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dotmana.com\/weblog\/wp-json\/wp\/v2\/comments?post=697"}],"version-history":[{"count":2,"href":"https:\/\/www.dotmana.com\/weblog\/wp-json\/wp\/v2\/posts\/697\/revisions"}],"predecessor-version":[{"id":699,"href":"https:\/\/www.dotmana.com\/weblog\/wp-json\/wp\/v2\/posts\/697\/revisions\/699"}],"wp:attachment":[{"href":"https:\/\/www.dotmana.com\/weblog\/wp-json\/wp\/v2\/media?parent=697"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dotmana.com\/weblog\/wp-json\/wp\/v2\/categories?post=697"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dotmana.com\/weblog\/wp-json\/wp\/v2\/tags?post=697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}