javascript in ten minutes javascript)
TRANSCRIPT
-
7/31/2019 Javascript in Ten Minutes Javascript)
1/7
avascript in Ten Minutes (Javascript)
Javascript(ECMAScript)
Javascript in Ten Minut es
Breakdown...
Basic Types
var intValue = 1;
var floatValue = 3.0;
var stringValue = "This is a string\n";
var sqString = 'This is also a string';
Javascript is a dynamically typed language. Variables are declared with thekeyword var. Common simple types are supported.
Arrays
var emptyList = [];
var homogenousList = [1, 2, 3];
var heterogenousList = ["one", 2, 3.0];
Javascript has built-in collection objects. The Array object is a dynamically typedsequence of Javascript values. They are created with the bracket notation [] or
with the new operator on the Array object (e.g. new Array(5)).
Propert y Maps
var emptyMap = {};
var homogenousMap = {"one": 1, "two": 2, "three": 3};
var heterogenousMap = {"one": 1,
"two": "two",
"three": 3.0};
Along with Arrays are the Object objects. They act as property maps with strings
serving as keys to dynamically typed data.
Access
// Dot notation property access
window.alert("Homogenous map property \"one\" "
+ homogenousMap.one);
// Subscript notation property access
window.alert("Homogenous map property \"two\" "
+ homogenousMap["two"]);
Assignment
homogenousMap["one"] = 10;
homogenousMap.two = 20;
log in
I nternal Links
Home
Announceme
infogami Link
Want moreinfogami? Ch
out a random
site!
Make your ow
Unofficial PytTutorial WikiPyTut
Publi c Space
ttp://javascript.infogami.com/Javascript_in_Ten_Minutes (1 of 7) [8/4/2008 9:57:07 PM]
http://javascript.infogami.com/http://javascript.infogami.com/_account/in?path=/Javascript_in_Ten_Minuteshttp://javascript.infogami.com/http://javascript.infogami.com/bloghttp://infogami.com/randomhttp://infogami.com/randomhttp://infogami.com/randomhttp://infogami.com/http://pytut.infogami.com/http://infogami.com/http://pytut.infogami.com/http://infogami.com/http://infogami.com/randomhttp://infogami.com/randomhttp://infogami.com/randomhttp://javascript.infogami.com/bloghttp://javascript.infogami.com/http://javascript.infogami.com/_account/in?path=/Javascript_in_Ten_Minuteshttp://javascript.infogami.com/ -
7/31/2019 Javascript in Ten Minutes Javascript)
2/7
avascript in Ten Minutes (Javascript)
Removal
delete homogenousMap["one"];
delete homogenousMap.two;
I terat ion
for (var key in heterogenousMap) {
window.alert("Heterogenous map property \""
+ key
+ "\" = "
+ heterogenousMap[key]);
}
Functions
var callable = function (message) { //
-
7/31/2019 Javascript in Ten Minutes Javascript)
3/7
avascript in Ten Minutes (Javascript)
initialized) in this example with the dot notation.
The object constructor, MyObject, is an object constructor not in how it's defined,
which looks like any other Javascript function, but in how it's ''invoked''.
var my = new MyObject("foo", 5);
The new operator before the function invokes the function with a newly construced
object as this and returns that the initialized object.
Object Protot ype
Part of what makes a language object oriented is that data not only has propertiesbut also ''behaviors''. Also known as: member functions; methods; and objectmessages. To implement a member function in Javascript one would be temptedto write something like what's below based on the member initialization exampledabove.
function BadObject(data) {
this.data = data
this.memberFunction = function () {// ...functions on data...
}
}
While the code above will work without error, it does create a new closure for eachmember function for each new instance of the object. What's really required is aclass level function that works on instance data. But remember, Javascript objectsaren't class based but prototype based. So how do we implement "class" levelmember functions? (Skip to Implementation) Better yet, how do we implement
"class" level members functions in general?
Enter the prototype member.
The internal object member, prototype, has language defined significance in that
it is used for resolving property names if the property isn't found in the currentproperty map. It's considered internal because, while the instance's prototype
member is ''inherited'' from the ''constructor's'' prototype member, it cannot be
accessed directly from the object instance itself. The defined prototype member
is a property map itself which holds members for property name resolution.Consider the example below:
var parentPropertyMap = {"bar": "I'm the bar"};
// Define the constructor with inheritable properties
function ChildObject(foo) {
this.foo = foo;
}
ChildObject.prototype = parentPropertyMap;
childPropertyMap1 = new ChildObject("I'm the foo1");
childPropertyMap2 = new ChildObject("I'm the foo2");
// Prints "childPropertyMap1.foo = I'm the foo1"
ttp://javascript.infogami.com/Javascript_in_Ten_Minutes (3 of 7) [8/4/2008 9:57:07 PM]
http://javascript.infogami.com/#Member_Function_Implementationhttp://javascript.infogami.com/#Member_Function_Implementation -
7/31/2019 Javascript in Ten Minutes Javascript)
4/7
avascript in Ten Minutes (Javascript)
window.alert("childPropertyMap1.foo = " + childPropertyMap1.foo);
// Prints "childPropertyMap2.foo = I'm the foo2"
window.alert("childPropertyMap2.foo = " + childPropertyMap2.foo);
// Prints "childPropertyMap1.bar = I'm the bar"
window.alert("childPropertyMap1.bar = " + childPropertyMap1.bar);
// Prints "childPropertyMap2.bar = I'm the bar"
window.alert("childPropertyMap2.bar = " + childPropertyMap2.bar);
The member foo is an instance member added to the instance's property map
during construction:
function ChildObject(foo) {
this.foo = foo;
}
while bar is in the constructor's prototype:
var parentPropertyMap = {"bar": "I'm the bar"};
...
ChildObject.prototype = parentPropertyMap;
which is ''inherited'' during the new operation:
childPropertyMap1 = new ChildObject("I'm the foo1");
childPropertyMap2 = new ChildObject("I'm the foo2");
In other words, the member, bar, is shared across all instances ofChildObject.
Therefore, by implementing the prototype member of the constructor function,
we can think of the constructor function itself as the "class" object. Complete withstatic class functions:
function ClassObject() {}
ClassObject.staticClassFunction = function(x) {
return x * 2;
}
static class variables:
function ClassObject() {}
ClassObject.staticClassVariable = 5;
shared member variables:
function ClassObject() {}
ClassObject.prototype.sharedMember = 5;
and of course, shared member functions:
function ClassObject(x) {
this.x = x;
ttp://javascript.infogami.com/Javascript_in_Ten_Minutes (4 of 7) [8/4/2008 9:57:07 PM]
-
7/31/2019 Javascript in Ten Minutes Javascript)
5/7
avascript in Ten Minutes (Javascript)
}
ClassObject.prototype.memberFunction = function(x) {
return x * this.x;
}
Member Function I mplementat ion
function Message(message) {
this.message = message;
}
Message.prototype.show = function() {
window.alert("Message.show() with message = "
+ this.message);
}
(More on Classes and Objects)
Example Code
//////////////////////////////////////// Basic Types
var intValue = 1;
var floatValue = 3.0;
var stringValue = "This is a string\n";
///////////////////////////////////////
// Array
var emptyList = [];
var homogenousList = [1, 2, 3];
var heterogenousList = ["one", 2, 3.0];
///////////////////////////////////////// Property Map
//
var emptyMap = {};
var homogenousMap = {"one": 1, "two": 2, "three": 3};
var heterogenousMap = {"one": 1,
"two": "two",
"three": 3.0};
///////////////////////////////////////
// Functions as values
//
var callable = function (message) { //
-
7/31/2019 Javascript in Ten Minutes Javascript)
6/7
avascript in Ten Minutes (Javascript)
}
///////////////////////////////////////
// Functions as arguments
//
function callCallable(f, x) {
f(x);
}
function composeCallables(f, g, x) {
f(g(x));
}
///////////////////////////////////////
// Objects
//
function MyObject(name, value) {
this.name = name;
this.value = value;
}
///////////////////////////////////////
// Objects with Member Functions
//
function Message(message) {
this.message = message;
}
Message.prototype.show = function() {
window.alert("Message.show() with message = "
+ this.message);
}
///////////////////////////////////////// Demo Utilities
//
function quote(message) {
return "\"" + message + "\"";
}
///////////////////////////////////////
// HTML Invoked demonstration
//
//
function main() {
window.alert("Integer = " + intValue);window.alert("Float = " + floatValue);
window.alert("String = " + stringValue);
for (var item in emptyList) {
window.alert("Empty list item = " + item);
}
// Script style index iteration
for (var i in homogenousList) {
window.alert("Homogenous list item = "
+ homogenousList[i]);
ttp://javascript.infogami.com/Javascript_in_Ten_Minutes (6 of 7) [8/4/2008 9:57:07 PM]
-
7/31/2019 Javascript in Ten Minutes Javascript)
7/7
avascript in Ten Minutes (Javascript)
}
// C style index iteration
for (var i=0; i < heterogenousList.length; ++i) {
window.alert("Heterogenous list item = "
+ heterogenousList[i]);
}
// Dot notation property access
window.alert("Homogenous map property \"one\" "
+ homogenousMap.one);
// Subscript notation property access
window.alert("Homogenous map property \"two\" "
+ homogenousMap["two"]);
for (var key in heterogenousMap) {
window.alert("Heterogenous map property \""
+ key
+ "\" = "
+ heterogenousMap[key]);
}
callable("(Function value invoked)");
closure();
closure();
callCallable(closure);
composeCallables(callable, quote, "My Message");
var my = new MyObject("foo", 5);
window.alert("MyObject my.name = " + my.name);
window.alert("MyObject my[\"value\"] = " + my["value"]);
var msg = new Message("bar");for (var key in Message.prototype) {
window.alert("Message prototype member \""
+ key
+ "\" = "
+ Message.prototype[key]);
}
window.alert("Message msg.message = " + msg.message);
msg.show();
}
last updated 1 year ago #