javascript - object-oriented programming & remote scripting
TRANSCRIPT
![Page 2: JavaScript - Object-Oriented Programming & Remote Scripting](https://reader036.vdocuments.net/reader036/viewer/2022062503/58a1ce781a28ab9d338b6d5b/html5/thumbnails/2.jpg)
Object-Oriented Programming
• Object• Class• Function• Closure• Example - Minesweeper• Q & A
![Page 3: JavaScript - Object-Oriented Programming & Remote Scripting](https://reader036.vdocuments.net/reader036/viewer/2022062503/58a1ce781a28ab9d338b6d5b/html5/thumbnails/3.jpg)
Remote Scripting
• XMLHttpRequest• Cross-Origin Resource Sharing• JSON with Padding• Image Ping• Polling, Comet, Streaming & WebSocket• Q & A
![Page 4: JavaScript - Object-Oriented Programming & Remote Scripting](https://reader036.vdocuments.net/reader036/viewer/2022062503/58a1ce781a28ab9d338b6d5b/html5/thumbnails/4.jpg)
Object-Oriented Programming
• Object• Class• Function• Closure• Example - Minesweeper• Q & A
![Page 5: JavaScript - Object-Oriented Programming & Remote Scripting](https://reader036.vdocuments.net/reader036/viewer/2022062503/58a1ce781a28ab9d338b6d5b/html5/thumbnails/5.jpg)
Variable Types
• Undefined var u;
• Boolean var b = false;
• Number var n = -0.12345;
• String var s = "foo";
• Function var f = function() {};
• Object var o = {}; // new Object();
• Null var on = null;
• Array var arr = []; // new Array();
![Page 6: JavaScript - Object-Oriented Programming & Remote Scripting](https://reader036.vdocuments.net/reader036/viewer/2022062503/58a1ce781a28ab9d338b6d5b/html5/thumbnails/6.jpg)
Define an Object• Initialize an Object var square = {flag:0, mine:false};
• Add Members square.adjacentSquares = new Array(8);
square.setFlag = function(flag) {
square.flag = flag;
};
square.hit = function() {
square.setFlag(square.mine ? -1 : 2);
};
• Usage square.mine = true;
square.hit();
![Page 7: JavaScript - Object-Oriented Programming & Remote Scripting](https://reader036.vdocuments.net/reader036/viewer/2022062503/58a1ce781a28ab9d338b6d5b/html5/thumbnails/7.jpg)
Object-Oriented Programming
• Object• Class• Function• Closure• Example - Minesweeper• Q & A
![Page 8: JavaScript - Object-Oriented Programming & Remote Scripting](https://reader036.vdocuments.net/reader036/viewer/2022062503/58a1ce781a28ab9d338b6d5b/html5/thumbnails/8.jpg)
Define a Class• Constructor function Square(flag, mine) {
this.flag = flag;
this.mine = mine;
// this.setFlag = function(flag) { ... };
}
• Methods Square.prototype.setFlag = function(flag) { this.flag = flag;
};
Square.prototype.hit = function() {
this.setFlag(this.mine ? -1 : 2);
};
• Usage var square = new Square(0, true);
square.hit();
![Page 9: JavaScript - Object-Oriented Programming & Remote Scripting](https://reader036.vdocuments.net/reader036/viewer/2022062503/58a1ce781a28ab9d338b6d5b/html5/thumbnails/9.jpg)
Inheritance• Constructor function HiddenSquare() {
Square.call(this, -2, false);
this.hidden = true;
}
• Methods HiddenSquare.prototype = new Square();
HiddenSquare.prototype.hit = function() {
alert("Unable to hit this square!");
}
• Usage var hiddenSquare = new HiddenSquare();
hiddenSquare.hit();
![Page 10: JavaScript - Object-Oriented Programming & Remote Scripting](https://reader036.vdocuments.net/reader036/viewer/2022062503/58a1ce781a28ab9d338b6d5b/html5/thumbnails/10.jpg)
Object-Oriented Programming
• Object• Class• Function• Closure• Example - Minesweeper• Q & A
![Page 11: JavaScript - Object-Oriented Programming & Remote Scripting](https://reader036.vdocuments.net/reader036/viewer/2022062503/58a1ce781a28ab9d338b6d5b/html5/thumbnails/11.jpg)
Declaration vs. Expression
• Declarationfunction hitSquare(square) {
square.hit();
}
• Expressionvar hitSquare = function(square) {
square.hit();
};
![Page 12: JavaScript - Object-Oriented Programming & Remote Scripting](https://reader036.vdocuments.net/reader036/viewer/2022062503/58a1ce781a28ab9d338b6d5b/html5/thumbnails/12.jpg)
Block Scope
(function() {// block code here
})();
![Page 13: JavaScript - Object-Oriented Programming & Remote Scripting](https://reader036.vdocuments.net/reader036/viewer/2022062503/58a1ce781a28ab9d338b6d5b/html5/thumbnails/13.jpg)
Object-Oriented Programming
• Object• Class• Function• Closure• Example - Minesweeper• Q & A
![Page 14: JavaScript - Object-Oriented Programming & Remote Scripting](https://reader036.vdocuments.net/reader036/viewer/2022062503/58a1ce781a28ab9d338b6d5b/html5/thumbnails/14.jpg)
Unable to Work for (var i = 0; i < 10; i ++) {
for (var j = 0; j < 10; j ++) {
var btn = document.createElement("input");
btn.type = "button";
btn.onclick = function() {
alert("(" + i + "," + j + ")");
};
document.body.appendChild(btn);
}
document.body.appendChild(document.createElement("br"));
}
![Page 15: JavaScript - Object-Oriented Programming & Remote Scripting](https://reader036.vdocuments.net/reader036/viewer/2022062503/58a1ce781a28ab9d338b6d5b/html5/thumbnails/15.jpg)
Still Unable to Work for (var i = 0; i < 10; i ++) {
for (var j = 0; j < 10; j ++) {
var btn = document.createElement("input");
btn.type = "button";
var i_ = i;
var j_ = j;
btn.onclick = function() {
alert("(" + i_ + "," + j_ + ")");
};
document.body.appendChild(btn);
}
document.body.appendChild(document.createElement("br"));
}
![Page 16: JavaScript - Object-Oriented Programming & Remote Scripting](https://reader036.vdocuments.net/reader036/viewer/2022062503/58a1ce781a28ab9d338b6d5b/html5/thumbnails/16.jpg)
Work with Closure for (var i = 0; i < 10; i ++) {
for (var j = 0; j < 10; j ++) {
var btn = document.createElement("input");
btn.type = "button";
btn.onclick = (function(i_, j_) {
return function() {
alert("(" + i_ + "," + j_ + ")");
};
})(i, j);
document.body.appendChild(btn);
}
document.body.appendChild(document.createElement("br"));
}
![Page 17: JavaScript - Object-Oriented Programming & Remote Scripting](https://reader036.vdocuments.net/reader036/viewer/2022062503/58a1ce781a28ab9d338b6d5b/html5/thumbnails/17.jpg)
Object-Oriented Programming
• Object• Class• Function• Closure• Example - Minesweeper• Q & A
![Page 18: JavaScript - Object-Oriented Programming & Remote Scripting](https://reader036.vdocuments.net/reader036/viewer/2022062503/58a1ce781a28ab9d338b6d5b/html5/thumbnails/18.jpg)
Object-Oriented Programming
• Object• Class• Function• Closure• Example - Minesweeper• Q & A
![Page 19: JavaScript - Object-Oriented Programming & Remote Scripting](https://reader036.vdocuments.net/reader036/viewer/2022062503/58a1ce781a28ab9d338b6d5b/html5/thumbnails/19.jpg)
Remote Scripting
• XMLHttpRequest• Cross-Origin Resource Sharing• JSON with Padding• Image Ping• Polling, Comet, Streaming & WebSocket• Q & A
![Page 20: JavaScript - Object-Oriented Programming & Remote Scripting](https://reader036.vdocuments.net/reader036/viewer/2022062503/58a1ce781a28ab9d338b6d5b/html5/thumbnails/20.jpg)
XMLHttpRequestfunction createXHR() {
if (typeof XMLHttpRequest == "undefined") {
return new ActiveXObject("MSXML2.XMLHttp");
}
return new XMLHttpRequest();
}
var xhr = createXHR();
xhr.open(...);
xhr.onload = function() {...};
xhr.onerror = function() {...};
xhr.send(...);
![Page 21: JavaScript - Object-Oriented Programming & Remote Scripting](https://reader036.vdocuments.net/reader036/viewer/2022062503/58a1ce781a28ab9d338b6d5b/html5/thumbnails/21.jpg)
Remote Scripting
• XMLHttpRequest• Cross-Origin Resource Sharing• JSON with Padding• Image Ping• Polling, Comet, Streaming & WebSocket• Q & A
![Page 22: JavaScript - Object-Oriented Programming & Remote Scripting](https://reader036.vdocuments.net/reader036/viewer/2022062503/58a1ce781a28ab9d338b6d5b/html5/thumbnails/22.jpg)
Cross-Origin Resource Sharing
• RequestOrigin: http://www.xqbase.com/
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
• ResponseAccess-Control-Allow-Origin: http://www.xqbase.com/
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
![Page 23: JavaScript - Object-Oriented Programming & Remote Scripting](https://reader036.vdocuments.net/reader036/viewer/2022062503/58a1ce781a28ab9d338b6d5b/html5/thumbnails/23.jpg)
Remote Scripting
• XMLHttpRequest• Cross-Origin Resource Sharing• JSON with Padding• Image Ping• Polling, Comet, Streaming & WebSocket• Q & A
![Page 24: JavaScript - Object-Oriented Programming & Remote Scripting](https://reader036.vdocuments.net/reader036/viewer/2022062503/58a1ce781a28ab9d338b6d5b/html5/thumbnails/24.jpg)
JSON with Paddingfunction locationCallback(param) {
alert("You're at IP address " + param.ip +
", which is in " + param.city + ", " +
param.region_name);
}
var script = document.createElement("script");
script.src = "http://freegeoip.net/json/?callback=" +
"locationCallback&random=" + Math.random();
document.body.insertBefore(script,
document.body.firstChild);
![Page 25: JavaScript - Object-Oriented Programming & Remote Scripting](https://reader036.vdocuments.net/reader036/viewer/2022062503/58a1ce781a28ab9d338b6d5b/html5/thumbnails/25.jpg)
Remote Scripting
• XMLHttpRequest• Cross-Origin Resource Sharing• JSON with Padding• Image Ping• Polling, Comet, Streaming & WebSocket• Q & A
![Page 26: JavaScript - Object-Oriented Programming & Remote Scripting](https://reader036.vdocuments.net/reader036/viewer/2022062503/58a1ce781a28ab9d338b6d5b/html5/thumbnails/26.jpg)
Image Ping
var img = new Image();
img.onload = function() {...};
img.onerror = function() {...};
img.src = "http://www.xqbase.com/ping";
![Page 27: JavaScript - Object-Oriented Programming & Remote Scripting](https://reader036.vdocuments.net/reader036/viewer/2022062503/58a1ce781a28ab9d338b6d5b/html5/thumbnails/27.jpg)
Remote Scripting
• XMLHttpRequest• Cross-Origin Resource Sharing• JSON with Padding• Image Ping• Polling, Comet, Streaming & WebSocket• Q & A
![Page 28: JavaScript - Object-Oriented Programming & Remote Scripting](https://reader036.vdocuments.net/reader036/viewer/2022062503/58a1ce781a28ab9d338b6d5b/html5/thumbnails/28.jpg)
Polling Comet
Polling, Comet, Streaming and WebSocket
Streaming WebSocket
![Page 29: JavaScript - Object-Oriented Programming & Remote Scripting](https://reader036.vdocuments.net/reader036/viewer/2022062503/58a1ce781a28ab9d338b6d5b/html5/thumbnails/29.jpg)
Polling, Comet, Streaming and WebSocketPolling Comet Streaming WebSocket
Timelineness Bad Good Good Good
Performance Bad Poor Good Excellent
Browser Recv. Frequently HTTP Req.
Wait for HTTP Resp. In Channel In Channel
Browser Send Need One HTTP Req.
Need One HTTP Req.
Need One HTTP Req. In Channel
Browser Tech XmlHttpReq. or JSONP
XmlHttpReq. or JSONP
XmlHttpReq. readyState == 3 (LOADING)
WebSocket
Server Tech TraditionalWeb Server Async Async +
Streaming WebSocket
![Page 30: JavaScript - Object-Oriented Programming & Remote Scripting](https://reader036.vdocuments.net/reader036/viewer/2022062503/58a1ce781a28ab9d338b6d5b/html5/thumbnails/30.jpg)
Remote Scripting
• XMLHttpRequest• Cross-Origin Resource Sharing• JSON with Padding• Image Ping• Polling, Comet, Streaming & WebSocket• Q & A
![Page 31: JavaScript - Object-Oriented Programming & Remote Scripting](https://reader036.vdocuments.net/reader036/viewer/2022062503/58a1ce781a28ab9d338b6d5b/html5/thumbnails/31.jpg)
Thanks
xqbase.com Development [email protected]
JavaScript• Object-Oriented Programming• Remote Scripting