OO鐨凧avaScript騫朵笉楂樻繁錛岄夯鐑﹀氨楹葷儲鍦╣oogle鍑烘潵鐨勫浗浜轟粙緇嶆枃绔犵粡甯哥綏緗楀棪鍡︼紝鑰屼笖涔嬮棿鐨勮娉曡繕鍚勬湁涓嶅悓錛屾憜鍦ㄤ竴璧峰氨璁╀漢鐪嬩簡澶村ぇ銆?br />榪欓噷閲嶆嬀綆鍗曚富涔夛紝浠ヤ竴涓渶綆鍗曠殑渚嬪瓙鎶奜O Javascript璇存槑鐧姐?/p>
1.涓涓涓虹簿綆鐨勪緥瀛?/strong>
鍙渶鐞嗚В涓変釜鍏抽敭瀛?
絎竴涓槸function 錛孞S涓栫晫閲孋lass鐨勫畾涔夌敤"function"錛宖unction閲岄潰鐨勫唴瀹瑰氨鏄瀯閫犲嚱鏁扮殑鍐呭銆?/p>
絎簩涓槸this鎸囬拡錛屼唬琛ㄨ皟鐢ㄨ繖涓嚱鏁扮殑瀵硅薄銆?/p>
絎笁涓槸prototype錛岀敤瀹冩潵瀹氫箟鎴愬憳鍑芥暟錛?姣旇緝瑙勮寖鍜屼繚闄┿?/p>
//瀹氫箟Circle綾伙紝鎷ユ湁鎴愬憳鍙橀噺r錛屽父閲廝I鍜岃綆楅潰縐殑鎴愬憳鍑芥暟area()
function Circle(radius)
{聽聽
聽 this.r = radius;
}
Circle.PI = 3.14159;
Circle.prototype.area = function(聽 ) {return Circle.PI * this.r * this.r;}
//浣跨敤Circle綾?br />var c = new Circle(1.0);聽聽鍙﹀鎴愬憳鍑芥暟瀹氫箟榪樺彲浠ュ啓鎴愯繖鏍?
alert(c.area());
function compute_area(){return Circle.PI * this.r * this.r;}
Circle.prototype.area=compute_area;2.緇ф壙
娉ㄦ剰涓ょ偣
1.瀹氫箟緇ф壙鍏崇郴 ChildCircle.prototype=new Circle(0); 鍏朵腑0鏄崰浣嶇敤鐨?br />2.璋冪敤鐖剁被鐨勬瀯閫犲嚱鏁奧?br />聽聽聽聽聽this.base=Circle;
聽 聽聽 this.base(radius);
//瀹氫箟ChildCircle瀛愮被
function ChildCircle(radius)
{聽聽
聽聽聽聽 this.base=Circle;
聽 聽聽 this.base(radius);
}
ChildCircle.prototype=new Circle(0);
function Circle_max(a,b)
{
聽聽聽 if (a.r > b.r) return a;
聽聽聽 else return b;
}
ChildCircle.max = Circle_max;
//浣跨敤ChildCircle瀛愮被
var c = new ChildCircle(1);
var聽d = new ChildCircle(2);聽聽
var bigger = d.max(c,d);
alert(bigger.area());
3.var寮忓畾涔?/strong>
JS榪樻敮鎸佷竴縐峷ar Circle={raidus:1.0,PI:3.1415}鐨勫艦寮忥紝璇硶灝卞CSS鐨勫畾涔夈?br />鍥犳濡傛灉Circle鍙湁涓涓疄渚嬶紝涓嬮潰鐨勫畾涔夋柟寮忔洿綆媧侊細
var newCircle=BTW.鍚冮ケ浜嗘拺鐫鍙互鐪嬬湅Rails甯︾殑OO Javascript搴?-Prototype
{
r:1.0,
PI:3.1415,
area: function(){ return this.PI * this.r * this.r;}
};
alert(newCircle.area());
鍏跺疄錛孞avascript鐜板湪鐨勮娉曠湡鐨勪笉閫傚悎閭ｄ箞鍒壄鐨勫啓鎴怬O妯″紡....
]]>
var ret = 1 ;
if(stringObj.value=="")return ret ;
var dataPat = /^\S+$/;
var matchArray = stringObj.value.match(dataPat);
if (matchArray == null) ret = 0;
if(!ret){
alert("璇瘋緭鍏ユ紜殑浠ｇ爜綾誨瀷:[A-Za-z0-9]!");
stringObj.focus();
stringObj.select();
}
return ret ;
}
function isValidInteger(integerObj){
var ret = true ;
if(integerObj.value=="")return ret ;
var dataPat = /^(\d+)(\.?)$/;
var matchArray = integerObj.value.match(dataPat);
if (matchArray == null) ret = false;
if(!ret){
alert("璇瘋緭鍏ユ紜殑鏁村瀷:([0-9]!");
integerObj.focus();
integerObj.select();
}
return ret ;
}
function isValidNumeric(numericObj){
var ret = 1 ;
if(numericObj.value=="")return ret ;
var dataPat = /^(\d+)(\.?)(\d*)$/;
var matchArray = numericObj.value.match(dataPat);
if (matchArray == null) ret = 0;
if(!ret){
alert("璇瘋緭鍏ユ紜殑鏁板瓧綾誨瀷:(xx*.yy*)!");
numericObj.focus();
numericObj.select();
}
return ret ;
}
//
//媯鏌ユ湁鏁堟棩鏈?BR>function isValidDate(dateObj){
var ret = 1 ;
if(dateObj.value=="") return ret ;
var datePat = /^(\d{4})(\-)(\d{1,2})(\-)(\d{1,2})$/;
var matchArray = dateObj.value.match(datePat);
if (matchArray == null) ret = 0;
if(ret){
//alert(matchArray[1]+'-'+matchArray[3]+'-'+matchArray[5]);
var d= new Date(matchArray[1], matchArray[3],matchArray[5]);
// alert(d.getDate()+'aa'+d.getMonth()+'bb');
if(matchArray[3]==12){
matchArray[3] = 0 ;
matchArray[1] = parseInt(matchArray[1]) + 1;
}
//if(d.getFullYear()!=matchArray[1]) {ret = 0; alert(matchArray[1]); }
//if(ret&&(d.getMonth()!=matchArray[3])){ ret = 0; alert(matchArray[3]); }
//if(ret&&(d.getDate()!=matchArray[5])) {ret = 0; alert(matchArray[5]);}
}
if(!ret){
alert("璇瘋緭鍏ユ紜殑鏃ユ湡鏍煎紡:(yyyy-mm-dd)!");
dateObj.focus();
dateObj.select();
return false;
}
return true ;
}
//鍒ゆ柇鐢ㄦ埛宸茬粡杈撳叆澶氬皯涓瓧絎?BR>function strlength(str){
var l=str.length;
var n=l
for (var i=0;i<l;i++) {
if (str.charCodeAt(i)<0||str.charCodeAt(i)>255) n++
}
return n
}
]]>
顥ヮ棩
顥ヮ棩var dom = (document.getElementsByTagName) ? true : false;
顥ヮ棩var ie = (document.getElementsByTagName && document.all) ? true : false;
顥ヮ棩var arrowUp, arrowDown;
顥ヮ棩
顥ヮ棩if (ie || dom)
顥ヮ棩 initSortTable();
顥ヮ棩
顥ヮ棩function initSortTable() {
顥ヮ棩 arrowUp = document.createElement("SPAN");
顥ヮ棩 var tn = document.createTextNode("鈻?);
顥ヮ棩 arrowUp.appendChild(tn);
顥ヮ棩 arrowUp.className = "arrow";
顥ヮ棩
顥ヮ棩 arrowDown = document.createElement("SPAN");
顥ヮ棩 var tn = document.createTextNode("鈻?);
顥ヮ棩 arrowDown.appendChild(tn);
顥ヮ棩 arrowDown.className = "arrow";
顥ヮ棩}
顥ヮ棩
顥ヮ棩
顥ヮ棩
顥ヮ棩function sortTable(tableNode, nCol, bDesc, sType) {
顥ヮ棩 var tBody = tableNode.tBodies[0];
顥ヮ棩 var trs = tBody.rows;
顥ヮ棩 var trl= trs.length;
顥ヮ棩 var a = new Array();
顥ヮ棩
顥ヮ棩 for (var i = 0; i < trl; i++) {
顥ヮ棩 a[i] = trs[i];
顥ヮ棩 }
顥ヮ棩
顥ヮ棩 var start = new Date;
顥ヮ棩 window.status = "Sorting data...";
顥ヮ棩 a.sort(compareByColumn(nCol,bDesc,sType));
顥ヮ棩 window.status = "Sorting data done";
顥ヮ棩
顥ヮ棩 for (var i = 0; i < trl; i++) {
顥ヮ棩 tBody.appendChild(a[i]);
顥ヮ棩 window.status = "Updating row " + (i + 1) + " of " + trl +
顥ヮ棩 " (Time spent: " + (new Date - start) + "ms)";
顥ヮ棩 }
顥ヮ棩
顥ヮ棩 // check for onsort
顥ヮ棩 if (typeof tableNode.onsort == "string")
顥ヮ棩 tableNode.onsort = new Function("", tableNode.onsort);
顥ヮ棩 if (typeof tableNode.onsort == "function")
顥ヮ棩 tableNode.onsort();
顥ヮ棩}
顥ヮ棩
顥ヮ棩function CaseInsensitiveString(s) {
顥ヮ棩 return String(s).toUpperCase();
顥ヮ棩}
顥ヮ棩
顥ヮ棩function parseDate(s) {
顥ヮ棩 return Date.parse(s.replace(/\-/g, '/'));
顥ヮ棩}
顥ヮ棩
顥ヮ棩/* alternative to number function
顥ヮ棩 * This one is slower but can handle non numerical characters in
顥ヮ棩 * the string allow strings like the follow (as well as a lot more)
顥ヮ棩 * to be used:
顥ヮ棩 * "1,000,000"
顥ヮ棩 * "1 000 000"
顥ヮ棩 * "100cm"
顥ヮ棩 */
顥ヮ棩
顥ヮ棩function toNumber(s) {
顥ヮ棩 return Number(s.replace(/[^0-9\.]/g, ""));
顥ヮ棩}
顥ヮ棩
顥ヮ棩function compareByColumn(nCol, bDescending, sType) {
顥ヮ棩 var c = nCol;
顥ヮ棩 var d = bDescending;
顥ヮ棩
顥ヮ棩 var fTypeCast = String;
顥ヮ棩
顥ヮ棩 if (sType == "Number")
顥ヮ棩 fTypeCast = Number;
顥ヮ棩 else if (sType == "Date")
顥ヮ棩 fTypeCast = parseDate;
顥ヮ棩 else if (sType == "CaseInsensitiveString")
顥ヮ棩 fTypeCast = CaseInsensitiveString;
顥ヮ棩
顥ヮ棩 return function (n1, n2) {
顥ヮ棩 if (fTypeCast(getInnerText(n1.cells[c])) < fTypeCast(getInnerText(n2.cells[c])))
顥ヮ棩 return d ? -1 : +1;
顥ヮ棩 if (fTypeCast(getInnerText(n1.cells[c])) > fTypeCast(getInnerText(n2.cells[c])))
顥ヮ棩 return d ? +1 : -1;
顥ヮ棩 return 0;
顥ヮ棩 };
顥ヮ棩}
顥ヮ棩
顥ヮ棩function sortColumnWithHold(e) {
顥ヮ棩 // find table element
顥ヮ棩 var el = ie ? e.srcElement : e.target;
顥ヮ棩 var table = getParent(el, "TABLE");
顥ヮ棩
顥ヮ棩 // backup old cursor and onclick
顥ヮ棩 var oldCursor = table.style.cursor;
顥ヮ棩 var oldClick = table.onclick;
顥ヮ棩
顥ヮ棩 // change cursor and onclick
顥ヮ棩 table.style.cursor = "wait";
顥ヮ棩 table.onclick = null;
顥ヮ棩
顥ヮ棩 // the event object is destroyed after this thread but we only need
顥ヮ棩 // the srcElement and/or the target
顥ヮ棩 var fakeEvent = {srcElement : e.srcElement, target : e.target};
顥ヮ棩
顥ヮ棩 // call sortColumn in a new thread to allow the ui thread to be updated
顥ヮ棩 // with the cursor/onclick
顥ヮ棩 window.setTimeout(function () {
顥ヮ棩 sortColumn(fakeEvent);
顥ヮ棩 // once done resore cursor and onclick
顥ヮ棩 table.style.cursor = oldCursor;
顥ヮ棩 table.onclick = oldClick;
顥ヮ棩 }, 100);
顥ヮ棩}
顥ヮ棩
顥ヮ棩function sortColumn(e) {
顥ヮ棩 var tmp = e.target ? e.target : e.srcElement;
顥ヮ棩 var tHeadParent = getParent(tmp, "THEAD");
顥ヮ棩 var el = getParent(tmp, "TD");
顥ヮ棩
顥ヮ棩 if (tHeadParent == null)
顥ヮ棩 return;
顥ヮ棩
顥ヮ棩 if (el != null) {
顥ヮ棩 var p = el.parentNode;
顥ヮ棩 var i;
顥ヮ棩
顥ヮ棩 // typecast to Boolean
顥ヮ棩 el._descending = !Boolean(el._descending);
顥ヮ棩
顥ヮ棩 if (tHeadParent.arrow != null) {
顥ヮ棩 if (tHeadParent.arrow.parentNode != el) {
顥ヮ棩 tHeadParent.arrow.parentNode._descending = null; //reset sort order
顥ヮ棩 }
顥ヮ棩 tHeadParent.arrow.parentNode.removeChild(tHeadParent.arrow);
顥ヮ棩 }
顥ヮ棩
顥ヮ棩 if (el._descending)
顥ヮ棩 tHeadParent.arrow = arrowUp.cloneNode(true);
顥ヮ棩 else
顥ヮ棩 tHeadParent.arrow = arrowDown.cloneNode(true);
顥ヮ棩
顥ヮ棩 el.appendChild(tHeadParent.arrow);
顥ヮ棩
顥ヮ棩
顥ヮ棩
顥ヮ棩 // get the index of the td
顥ヮ棩 var cells = p.cells;
顥ヮ棩 var l = cells.length;
顥ヮ棩 for (i = 0; i < l; i++) {
顥ヮ棩 if (cells[i] == el) break;
顥ヮ棩 }
顥ヮ棩
顥ヮ棩 var table = getParent(el, "TABLE");
顥ヮ棩 // can't fail
顥ヮ棩
顥ヮ棩 sortTable(table,i,el._descending, el.getAttribute("type"));
顥ヮ棩 }
顥ヮ棩}
顥ヮ棩
顥ヮ棩
顥ヮ棩function getInnerText(el) {
顥ヮ棩 if (ie) return el.innerText; //Not needed but it is faster
顥ヮ棩
顥ヮ棩 var str = "";
顥ヮ棩
顥ヮ棩 var cs = el.childNodes;
顥ヮ棩 var l = cs.length;
顥ヮ棩 for (var i = 0; i < l; i++) {
顥ヮ棩 switch (cs[i].nodeType) {
顥ヮ棩 case 1: //ELEMENT_NODE
顥ヮ棩 str += getInnerText(cs[i]);
顥ヮ棩 break;
顥ヮ棩 case 3: //TEXT_NODE
顥ヮ棩 str += cs[i].nodeValue;
顥ヮ棩 break;
顥ヮ棩 }
顥ヮ棩
顥ヮ棩 }
顥ヮ棩
顥ヮ棩 return str;
顥ヮ棩}
顥ヮ棩
顥ヮ棩function getParent(el, pTagName) {
顥ヮ棩 if (el == null) return null;
顥ヮ棩 else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase()) // Gecko bug, supposed to be uppercase
顥ヮ棩 return el;
顥ヮ棩 else
顥ヮ棩 return getParent(el.parentNode, pTagName);
顥ヮ棩}
顥ヮ棩//-->
顥ヮ棩
顥ヮ棩-------------------------------------------
顥ヮ棩
顥ヮ棩TABLE onclick="sortColumn(event)
顥ヮ棩-------------------------------------------
顥ヮ棩tr 鍔犲叆 THEAD 鏍囩
顥ヮ棩-------------------------------------------
顥ヮ棩鏈夋椂鍊檍s鑳藉疄鐜頒簺寰堝ソ鐨勫姛鑳姐?BR>顥ヮ棩緙虹偣錛氬綋鏈夎礋鏁版椂錛屼笉鑳芥紜帓搴?nbsp;
鏈夋椂瀹㈡埛绔傚綋鐢ㄤ笅js鍙湁寰堝ソ鐨勬晥鏋?BR> 濡傦細js array
<script language=JavaScript>
var codes = new Array(new Array(<%= len %>),new Array(<%= len %>),new Array(<%= len %>));
<%
for(int i=0; i<len; i++)
{
%>
codes[0][<%= i %>] = "<%= stocks[i][0] %>";
codes[1][<%= i %>] = "<%= StringUtil.getUnicode(stocks[i][1]) %>";
codes[2][<%= i %>] = "<%= stocks[i][2] %>";
<%
}
%>
</script>
鐢氳嚦鍙啓js綾?
]]>