YUI 做 Yahoo suggest.
public class TestAutoCompleteServlet extends HttpServlet {
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
out.println("誰誰誰");
out.println("神神神");
out.println("一一一");
out.println("二二二");
out.println("aaa");
out.println("bbb");
out.println("ccc");
out.println("ddd");
out.println("eee");
out.println("fff");
out.println("ggg");
out.println("hhh");
} finally {
out.close();
}
}
// doGet, doPost call processRequest
}
TestAutoComplete.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/autocomplete/assets/skins/sam/autocomplete.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/connection/connection-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/autocomplete/autocomplete-min.js"></script>
<style type="text/css">
#myAutoComplete {
width:25em; /* set width here or else widget will expand to fit its container */
padding-bottom:2em;
}
</style>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body class="yui-skin-sam">
<div id="myAutoComplete">
<input id="myInput" type="text">
<div id="myContainer"></div>
</div>
<script type="text/javascript">
var test = function() {
// Use an XHRDataSource
var oDS = new YAHOO.util.XHRDataSource("${pageContext.request.contextPath}/TestAutoCompleteServlet");
// Set the responseType
oDS.responseType = YAHOO.util.XHRDataSource.TYPE_TEXT;
// Define the schema of the delimited results
oDS.responseSchema = {
recordDelim: "\n",
fieldDelim: "\t"
};
// Enable caching
oDS.maxCacheEntries = 5;
// Instantiate the AutoComplete
var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
oAC.formatResult = function(oResultData, sQuery, sResultMatch) {
var resultDataString = new String(oResultData);
var queryString = new String(sQuery);
var minusString = resultDataString.substr(queryString.length, resultDataString.length);
var hasMatch = resultDataString.indexOf(queryString) > -1;
if ( hasMatch ) {
return '<font color=orange>' + queryString + '</font>' + minusString;
} else {
return resultDataString;
}
};
return {
oDS: oDS,
oAC: oAC
};
}();
</script>
</body>
</html>
Posted at 12:14上午 七月 07, 2009 by shooeugenesea in JavaScript | 迴響[0]
JavaScript - addEventListener 做拖曳 div 的效果
<style>
#article {
position:absolute;
width:700px;
top:200px;
left:200px;
}
</style>
<script type="text/javascript">
window.onload = function() {
function clearChildren(target) {
if (!target) { return; }
if ( target.firstChild ) {
target.removeChild(target.firstChild);
clearChildren(target);
}
}
function showText(text, positionShower) {
clearChildren( positionShower );
positionShower.appendChild( document.createTextNode(text) );
}
function makeMovable(target, targetInitX, targetInitY) {
if ( !target ) { return; }
if ( !targetInitX ) { targetInitX = 0; }
if ( !targetInitY ) { targetInitY = 0; }
var startX = 0;
var startY = 0;
var selectedElmt = null;
target.addEventListener('mousedown', function(e) {
selectedElmt = e.target;
startX = e.clientX;
startY = e.clientY;
} , false);
target.addEventListener('mouseup', function(e) {
if ( selectedElmt != null ) {
targetInitX = targetInitX + (e.clientX - startX);
targetInitY = targetInitY + (e.clientY - startY);
selectedElmt = null;
startX = 0;
startY = 0;
}
}, false);
target.addEventListener('mousemove', function(e) {
if ( selectedElmt != null ) {
var positionShower = document.getElementById('positionShower');
showText('(' + e.clientX + ',' + e.clientY + ')', positionShower);
target.style.top = targetInitY + (e.clientY - startY) + 'px';
target.style.left = targetInitX + (e.clientX - startX) + 'px';
}
}, false);
}
makeMovable(document.getElementById('article'), 200, 200);
}
</script>
<body>
<span id="positionShower">(0,0)</span>
<div id="article">
ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE
ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE
ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE
ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE ARTICLE
</div>
</body>
Posted at 12:45上午 三月 30, 2009 by shooeugenesea in JavaScript | 迴響[0]
JavaScript - Java 呼叫 JavaScript
package test;
import javax.script.Invocable;
import javax.script.ScriptEngine;
import javax.script.ScriptEngineManager;
import javax.script.ScriptException;
public class TestJavaScript {
public static void main(String[] args) {
try {
TestJavaScript test = new TestJavaScript();
test.test();
} catch (Exception ex) {
ex.printStackTrace();
}
}
private void test() throws ScriptException, NoSuchMethodException {
ScriptEngineManager scriptManager = new ScriptEngineManager();
ScriptEngine js = scriptManager.getEngineByExtension("js");
js.eval("function test(x) { return x; }");
Invocable invocable = (Invocable) js;
for ( int i = 0; i < 5; i++ ) {
Object result = invocable.invokeFunction("test", String.valueOf(i));
System.out.println(result);
}
}
}
package test;
import java.awt.event.ActionListener;
import javax.script.Bindings;
import javax.script.Invocable;
import javax.script.ScriptEngine;
import javax.script.ScriptEngineManager;
import javax.script.ScriptException;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.WindowConstants;
public class TestJavaScript {
public final String HELLO_FINAL = "hello final";
public static String HELLO_STATIC = "hello static";
public static void main(String[] args) {
try {
TestJavaScript test = new TestJavaScript();
test.test();
} catch (Exception ex) {
ex.printStackTrace();
}
}
private void test() throws ScriptException, NoSuchMethodException {
ScriptEngineManager scriptManager = new ScriptEngineManager();
ScriptEngine js = scriptManager.getEngineByExtension("js");
js.eval("var x = '';" +
"function setX(x) { this.x = x; }" +
"function actionPerformed(e) { " +
"var testJavaScript = new Packages.test.TestJavaScript();" +
"println( '1:' + testJavaScript );" +
"println( '2:' + testJavaScript.testShowFromJS() );" +
"println( '3:' + testJavaScript.HELLO_FINAL );" +
"println( '4:' + Packages.test.TestJavaScript.HELLO_STATIC );" +
"println( '5:' + testJavaScript.showTestJavaScript( testJavaScript )); " +
"println( '6:' + x );" +
"}");
Invocable invocable = (Invocable) js;
invocable.invokeFunction("setX", "XXXXXX");
JFrame f = new JFrame();
JButton b = new JButton("test");
b.addActionListener( (ActionListener) invocable.getInterface(ActionListener.class) );
f.setDefaultCloseOperation(WindowConstants.DISPOSE_ON_CLOSE);
f.getContentPane().add(b);
f.pack();
f.setVisible(true);
}
public String showTestJavaScript(TestJavaScript tester) {
return "show it. " + tester;
}
@Override
public String toString() {
return super.toString() + "this is TestJavaScript.class";
}
public String testShowFromJS() {
System.out.println("here!");
return "You call me.";
}
}
Posted at 02:03上午 三月 04, 2009 by shooeugenesea in JavaScript | 迴響[0]
JavaScript - class, constructor, prototype
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
window.onload = function() {
var p = new Person('John', 'Smith');
alert(p.firstName);
alert(p.lastName);
}
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
Person.prototype.show = function() {
alert("Hi, " + this.firstName + ' ' + this.lastName);
}
Person.prototype.age = 5;
}
window.onload = function() {
var p1 = new Person('A1', 'A2');
var p2 = new Person('B1', 'B2');
p1.show(); // Hi, A1 A2
p2.show(); // Hi, B1 B2
alert(p1.age); // 5
alert(p2.age); // 5
Person.prototype.age = 6;
alert(p1.age); // 6
alert(p2.age); // 6
p1.age = 99; // 這時候已經在 p1 物件裡建立一個 age 屬性, 而非改寫 Person 的 age 屬性
alert(p1.age); // 99
alert(p2.age); // 6
}
function Person(name) {
this.name = name;
Person.prototype.hi = function() {
with(this) {
alert('Hi, ' + name);
}
}
Person.prototype.hi2 = function() {
alert('Hi, ' + name);
}
}
window.onload = function() {
var p1 = new Person('Smith');
var p2 = new Person("John");
p1.hi(); // Hi, Smith
p1.hi2(); // Hi, John
p2.hi(); // Hi, John
p2.hi2(); // Hi, John
}
function Person(age) {
this.age = age;
Person.prototype.toString = function() {
return '[Person age=' + this.age + "]";
}
}
window.onload = function() {
var persons = [new Person(5),new Person(3),new Person(4),new Person(1),new Person(2)];
persons.sort(function(personA,personB) {
if ( !personA || !personB || !('age' in personA) || !('age' in personA) ) {
throw new Error("Not Person. personA=" + personA + ",personB=" + personB );
}
return personA.age - personB.age;
});
alert(persons); // [Person age=1],[Person age=2],[Person age=3],[Person age=4],[Person age=5]
}
Object.prototype.testname = 'objectname';
Object.prototype.testname2 = 'objectname2';
Object.prototype.testname3 = 'objectname3';
function Person() {
this.testname = 'Persontestname';
}
Person.prototype.testname = 'Personprototypetestname';
Person.prototype.testname2 = 'Personprototypetestname2';
window.onload = function() {
var p = new Person();
alert(p.testname); // Persontestname
alert(p.testname2); // Personprototypetestname2
alert(p.testname3); // objectname3
}
function Animal(name) {
this.name = name;
}
Animal.prototype.breath = function() {
return this.name + ' can breath.';
}
function Mammal(name, isAquatic) {
Animal.call(this, name); // 初始化 super class
this.isAquatic = isAquatic;
}
Mammal.prototype = new Animal('default'); // 這樣會把 Mammal 的 prototype 指向 Animal 的 prototype
Mammal.constructor = Mammal; // 指定 prototype 後 Mammal 的建構子會和 Animal 的一樣.
// 但我們不想要建構子是同一個, 所以要把建構子指回 Mammal
Mammal.prototype.nurse = function() {
var aquaticStr = this.isAquatic ? ' is aquatic. ' : ' is not aquatic. ';
return this.name + ' which ' + aquaticStr + ' can nurse.';
}
Mammal.prototype.breath = function() {
var aquaticStr = this.isAquatic ? ' is aquatic. ' : ' is not aquatic. ';
return this.name + ' which ' + aquaticStr + Animal.prototype.breath();
}
window.onload = function() {
alert(Mammal.constructor == Animal.constructor);
alert(new Animal('People').breath());
alert(new Mammal('whale', true).nurse());
alert(new Mammal('whale', true).breath());
alert(new Mammal('whale').breath());
alert(new Mammal('whale').nurse());
var m = new Mammal('people', false);
alert(m instanceof Object); // true
alert(m instanceof Animal); // true
alert(m instanceof Mammal); // true
}
Posted at 01:16上午 二月 16, 2009 by shooeugenesea in JavaScript | 迴響[0]
JavaScript - function
var f = function ff() {
alert('ff=' + ff);
}
window.onload = function() {
alert('f=' + f);
f();
alert('ff=' + ff); // undefined error
}
上面程式宣告的 f 是 function literal, ff 則只能用在 f function 主體裡面. 如果在外部使用 ff 就會出現 undefined 的錯誤.
var f = function() {
alert('f');
}
window.onload = function() {
f();
}
2. 直接傳入成為參數
var callAnyWay = function(f) {
f();
}
window.onload = function() {
callAnyWay( function() {
alert( 'Pass to callAnyWay' );
} );
}
3. 宣告 function 直接呼叫
window.onload = function() {
var callAnyWay = function(f) {
f();
}( function() {
alert('Pass to callAnyWay');
} );
}
function testParams(a, b, c) {
a = a || [];
b = b || 'bb';
alert('a=' + a);
alert('b=' + b);
alert('c=' + c);
}
window.onload = function() {
testParams(); // alert a= b=bb c=undefined
testParams('aa', null); // alert a=aa b=bb c=undefined (null 被當成 false)
testParams('aa', 'bb22'); // alert a=aa b=bb22 c=undefined
}
function writeAllArgs(arg0) {
for ( var i = 0; i < arguments.length; i++ ) {
alert(arguments[i]);
}
alert(arg0); // 1
arguments[0] = 123456;
alert(arg0); // 123456
}
window.onload = function() {
writeAllArgs(1,2,3,4);
}
function testCallee() {
alert(arguments.callee);
}
window.onload = function() {
testCallee(1,2,3);
}
function callMe(me) {
me();
}
function showMsg(msg) {
alert(msg);
}
window.onload = function() {
showMsg('a'); // a
var a = showMsg;
a('show from a'); // show from a
var b = new Object();
b.showMsgFromB = showMsg;
b.showMsgFromB('show msg from BB'); // show msg from BB
callMe( a('show in callMe') );
}
function showLength1() {
alert(arguments.length); // 5
alert(arguments.callee.length); // 0
}
function showLength2(args) {
alert(arguments.length); // 6
alert(arguments.callee.length); // 1
}
window.onload = function() {
showLength1(1,2,3,4,5);
showLength2(1,2,3,4,5,6);
}
function showThis() {
var s = '';
for ( var i = 0; i < arguments.length; i++ ) {
s += arguments[i];
}
return this + s;
}
window.onload = function() {
var o = new Object();
alert(showThis(1,2,3)); // [object Window]123
alert(showThis.call(o,1,2,3,4)); // [object Object]1234
}
function showThis() {
var s = '';
for ( var i = 0; i < arguments.length; i++ ) {
s += arguments[i];
}
return this + s;
}
window.onload = function() {
var o = new Object();
alert(showThis(1,2,3)); // [object Window]123
alert(showThis.apply(o,[1,2,3,4])); // [object Object]1234
}
function myF() {
methodA();
function methodA() {
alert("inner MA");
}
}
function methodA() {
alert("outter MA");
}
window.onload = function() {
myF(); // inner MA
}
這樣就算 methodA 重覆到了也沒關係, 因為都包在自己定�����的 myF 裡面了. 但還需要一個 myF 的名稱. 如果需要的話可以更簡單
(function() {
methodA();
function methodA() {
alert("inner MA");
}
})();
這樣也是呼叫 methodA 又不會佔用到任何廣域名稱. 還有, 可以把動態的屬性藏在匿名 function 中, 再回傳匿名 function 夾帶著動態屬性, 這樣每次呼叫一個 function 都會得到不同的結果.
var test1 = function() {
var id = 0;
return function() {
return id++;
}
}
var test2 = (function() {
var id = 0;
return function() {
return id++;
}
})();
window.onload = function() {
var t1 = test1();
alert(t1()); // 0
alert(t1()); // 1
alert(t1()); // 2
alert(test2()); // 0
alert(test2()); // 1
alert(test2()); // 2
}
從上面的 function 中, test1 是直接回傳一個 id 為 0 且回傳 id++ 的 function, 每次呼叫 test1() 都會初始 id 為 0. test2 則是先起始 id 為 0 傳到 test2 變數中, 則每次呼叫 test2() 都是執行回傳 id++ 的 function.
Posted at 07:11下午 一月 29, 2009 by shooeugenesea in JavaScript | 迴響[0]
JavaScript - 動態新增欄位
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function addReceiver() {
var nameSpan = createSpan('Name : ');
var mailSpan = createSpan('Email : ');
var nameInput = createInput('receiverName');
var mailInput = createInput('receiverMail');
var contentTdL = document.createElement('td');
contentTdL.appendChild(nameSpan);
contentTdL.appendChild(nameInput);
var contentTdR = document.createElement('td');
contentTdR.appendChild(mailSpan);
contentTdR.appendChild(mailInput);
var delBtn = document.createElement('input');
delBtn.setAttribute('type', 'button');
delBtn.setAttribute('value', 'Del');
var btnTd = document.createElement('td');
btnTd.appendChild( delBtn );
var contentTr = document.createElement('tr');
contentTr.appendChild( contentTdL );
contentTr.appendChild( contentTdR );
contentTr.appendChild( btnTd );
document.getElementById('receivers').appendChild( contentTr );
delBtn.onclick = function() {
document.getElementById('receivers').removeChild( contentTr );
}
}
function createInput(elmtName) {
elmtName = elmtName ? elmtName : '';
var inputElmt = document.createElement('input');
inputElmt.setAttribute('type', 'text');
inputElmt.setAttribute('name', elmtName);
inputElmt.setAttribute('class', 'column');
return inputElmt;
}
function createSpan(textVal) {
textVal = textVal ? textVal : '';
var spanElmt = document.createElement('span');
spanElmt.setAttribute('class', 'desc');
spanElmt.appendChild(document.createTextNode(textVal));
return spanElmt;
}
function showInnerHTML() {
var target = document.getElementById('receivers');
var shower = document.getElementById('innerHTMLShower');
clearChildren( shower );
shower.appendChild( document.createTextNode(target.innerHTML) );
}
function clearChildren( target ) {
while ( target.firstChild ) {
target.removeChild( target.firstChild );
}
}
</script>
<style>
.column {
color:red;
background:aqua;
}
.desc {
font-size: small;
color:blue;
}
</style>
</head>
<body>
<input type="button" value="show innerHTML" onclick="showInnerHTML();" />
<table>
<tbody id="receivers">
<tr>
<td>
<span class="desc">Name :</span>
<span class="column">
<input name="receiverName" class="column" />
</span>
</td>
<td>
<span class="desc">Email :</span>
<span class="column">
<input name="receiverEmail" class="column" />
</span>
</td>
<td>
<input type="button" value="Add" onclick="addReceiver()" />
<input type="button" value="Add From Dialog" onclick="window.showModalDialog('ReceiverSelectorDialog.html', 'Selector', 'width=500,height=300')" />
</td>
</tr>
</tbody>
</table>
<textarea id="innerHTMLShower" cols="100" rows="20"></textarea>
</body>
</html>
ReceiverSelectorDialog.html : 如果能做到 check 更直接的對 opener 操作, 例如取消選取就把 parent 增加的物件刪掉更好. 可是沒時間做那些.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script>
function createInput(elmtName, val) {
elmtName = elmtName ? elmtName : '';
var inputElmt = document.createElement('input');
inputElmt.setAttribute('type', 'text');
inputElmt.setAttribute('name', elmtName);
inputElmt.setAttribute('class', 'column');
inputElmt.setAttribute('value', val);
return inputElmt;
}
function createSpan(textVal) {
textVal = textVal ? textVal : '';
var spanElmt = document.createElement('span');
spanElmt.setAttribute('class', 'desc');
spanElmt.appendChild(document.createTextNode(textVal));
return spanElmt;
}
function addReceiverIntoParent(receivers, nameVal, mailVal) {
var nameSpan = createSpan('Name : ');
var mailSpan = createSpan('Email : ');
var nameInput = createInput('receiverName', nameVal);
var mailInput = createInput('receiverMail', mailVal);
var contentTdL = document.createElement('td');
contentTdL.appendChild(nameSpan);
contentTdL.appendChild(nameInput);
var contentTdR = document.createElement('td');
contentTdR.appendChild(mailSpan);
contentTdR.appendChild(mailInput);
var delBtn = document.createElement('input');
delBtn.setAttribute('type', 'button');
delBtn.setAttribute('value', 'Del');
var btnTd = document.createElement('td');
btnTd.appendChild( delBtn );
var contentTr = document.createElement('tr');
contentTr.appendChild( contentTdL );
contentTr.appendChild( contentTdR );
contentTr.appendChild( btnTd );
receivers.appendChild( contentTr );
delBtn.onclick = function() {
receivers.removeChild( contentTr );
}
return contentTr;
}
function doAddReceivers() {
var receivers = window.opener.document.getElementById('receivers');
if ( document.getElementById('check_1').checked ) {
var nameVal1 = document.getElementById('nameVal_1').value;
var mailVal1 = document.getElementById('mailVal_1').value;
addReceiverIntoParent(receivers, nameVal1, mailVal1);
}
if ( document.getElementById('check_2').checked ) {
var nameVal2 = document.getElementById('nameVal_2').value;
var mailVal2 = document.getElementById('mailVal_2').value;
addReceiverIntoParent(receivers, nameVal2, mailVal2);
}
if ( document.getElementById('check_3').checked ) {
var nameVal3 = document.getElementById('nameVal_3').value;
var mailVal3 = document.getElementById('mailVal_3').value;
addReceiverIntoParent(receivers, nameVal3, mailVal3);
}
if ( document.getElementById('check_4').checked ) {
var nameVal4 = document.getElementById('nameVal_4').value;
var mailVal4 = document.getElementById('mailVal_4').value;
addReceiverIntoParent(receivers, nameVal4, mailVal4);
}
if ( document.getElementById('check_5').checked ) {
var nameVal5 = document.getElementById('nameVal_5').value;
var mailVal5 = document.getElementById('mailVal_5').value;
addReceiverIntoParent(receivers, nameVal5, mailVal5);
}
window.close();
}
</script>
</head>
<body>
<input type="button" value="OK" onclick="doAddReceivers();" />
<table>
<tr>
<td>
<input id="check_1" type="checkbox" />
</td>
<td>
<input id="nameVal_1" type="text" value="A1" />
</td>
<td>
<input id="mailVal_1" type="text" value="A1" />
</td>
</tr>
<tr>
<td>
<input id="check_2" type="checkbox" />
</td>
<td>
<input id="nameVal_2" type="text" value="A2" />
</td>
<td>
<input id="mailVal_2" type="text" value="A2" />
</td>
</tr>
<tr>
<td>
<input id="check_3" type="checkbox" />
</td>
<td>
<input id="nameVal_3" type="text" value="A3" />
</td>
<td>
<input id="mailVal_3" type="text" value="A3" />
</td>
</tr>
<tr>
<td>
<input id="check_4" type="checkbox" />
</td>
<td>
<input id="nameVal_4" type="text" value="A4" />
</td>
<td>
<input id="mailVal_4" type="text" value="A4" />
</td>
</tr>
<tr>
<td>
<input id="check_5" type="checkbox" />
</td>
<td>
<input id="nameVal_5" type="text" value="A5" />
</td>
<td>
<input id="mailVal_5" type="text" value="A5" />
</td>
</tr>
</table>
</body>
</html>
Posted at 01:20上午 十二月 12, 2008 by shooeugenesea in JavaScript | 迴響[0]
JavaScript - Object and Array
function TestObj() {
TestObj.prototype.toString = function() {
var result = 'props=';
for ( var propName in this ) {
result += ',' + this[propName];
}
return result;
}
}
function test() {
var o = new TestObj();
o.a0 = 'a0';
for ( var i = 1; i < 10; i++ ) {
o['a' + i] = 'a' + i;
alert( 'setup o value=' + o['a' + i] );
}
alert( o );
}
var o = { x:1, y:2 };
alert( 'constructor' in o ); // true
alert( o.hasOwnProperty('constructor') ); // false
alert( o.hasOwnProperty('z') ); // false
alert( o.hasOwnProperty('x') ); // true
function test() {
var o = { x:1, y:2, abc:4 };
alert( o.propertyIsEnumerable('constructor') ); // false
alert( o.propertyIsEnumerable('z') ); // false
alert( o.propertyIsEnumerable('x') ); // true
alert( o.propertyIsEnumerable('abc') ); // true
}
function TestObj() {
this.x = 1;
this.y = 2;
this.abc = 4;
this.test = function() {
return 'test';
}
TestObj.prototype.testPrototype = function() {
return 'this is prototype function';
}
}
function test() {
var o = new TestObj();
alert( TestObj.prototype.isPrototypeOf(o) ); // true
alert( TestObj == o.constructor ); // true
alert( o.testPrototype == TestObj.prototype.testPrototype); // true
alert( o.testPrototype.isPrototypeOf( TestObj.prototype.testPrototype ) ); // false
alert( TestObj.prototype.testPrototype.isPrototypeOf( o.testPrototype ) ); // false
}
var a = new Array(10,9); // index 0 : 10, index 1 : 9
a['ab'] = 5; // key ab : 5
for ( var propName in a ) {
alert( propName ); // show 0, 1 and ab
}
function test() {
var a = [1,2,3];
alert( a ); // 1,2,3
a.length = 5;
alert( a ); // 1,2,3,,
a[50] = 50;
alert( a.length ); // 51
a.length = 2;
alert( a ); // 1,2
}
function test() {
var a = [1,2,3];
alert( a.join('') ); // 123
alert( a.join(',') ); // 1,2,3
alert( a.join('abc') ); // 1abc2abc3
}
function test() {
var a = [1,2,3];
alert( a.join(',') ); // 1,2,3
a.reverse();
alert( a.join(',') ); // 3,2,1
}
function test() {
var a = [22,111,3];
alert( a.sort().join(',') ); // 111,22,3
var comparator = function(a, b) {
return a.toString().length - b.toString().length;
};
alert( a.sort( comparator ).join(',') ); // 3,22,111
}
function test() {
var a = [1,2];
a = a.concat(3);
alert( a ); // 1,2,3
a = a.concat(4,5);
alert( a ); // 1,2,3,4,5
a = a.concat([6,7]);
alert( a ); // 1,2,3,4,5,6,7
a = a.concat([8,9],[10,11]);
alert( a ); // 1,2,3,4,5,6,7,8,9,10,11
a = a.concat([12,13,[14,15]],16);
alert( a ); // 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16
alert( a.length ); // 15 因為 [14,15] 只算一個
}
var a = [1,2,3,4,5,6,7,8,9,10];
alert( a.slice(5) ); // 6,7,8,9,10
alert( a.slice(2, 4) ); //3,4
alert( a.slice(4, 2) ); //無值
alert( a.slice(-3) ); // 8,9,10
alert( a.slice(-3,-1) ); // 8,9
alert( a.slice(-1,-3) ); // 無值
function test() {
var a = [1,2,3,4,5];
var as = a.splice(2, 1); // 從第 2 個位置刪掉一個值
alert( a ); // 1,2,4,5
alert( as ); // 3
a = [1,2,3,4,5];
as = a.splice(2, 2, 6,7,8,9); // 從第二個位置刪掉兩個值, 再加上 6,7,8,9
alert( a ); // 1,2,6,7,8,9,5
alert( as ); // 3,4
}
function test() {
var a = [1,2,3,4,5];
alert( a ); // 1,2,3,4,5
alert( a.push(6,7,8) ); // 8
alert( a ); // 1,2,3,4,5,6,7,8
alert( a.pop() ); // 8
alert( a ); // 1,2,3,4,5,6,7
}
function test() {
var a = [1,2,3,4,5];
alert( a ); // 1,2,3,4,5
alert( a.unshift(7,8,6) ); // 8 (IE6 是 undefined)
alert( a ); // 7,8,6,1,2,3,4,5
alert( a.shift() ); // 7
alert( a ); // 8,6,1,2,3,4,5
}
Posted at 11:17下午 十一月 22, 2008 by shooeugenesea in JavaScript | 迴響[0]
JavaScript - expression
var testb = false;
if ( testb )
alert( 'if testb 1' )
if ( testb )
alert('if testb 2');
else
alert('else');
function test() {
var q = [ 'abc', 'bcd', 'test', 'a' ];
var v = 'testa';
switch ( v ) {
case 1 :
alert( 1 );
break;
default :
alert( 'this is default option' );
case 'a' :
alert( 'a' );
break;
case 'ab' :
alert( 'ab' );
break;
case q[0] :
alert( q[0] );
break;
case q[2] + q[3] :
alert( 'q2 + q3');
break;
}
}
function test() {
var obj = { a:'abc', b:true, c:123 };
for ( var propName in obj ) {
alert( propName + " : " + obj[propName] );
}
}
function test() {
var obj = { a:'abc', b:true, c:123 };
var i = 0;
var cloneObjPropNames = new Array();
for ( cloneObjPropNames[i++] in obj ) {
alert( 'clone obj propName : ' + cloneObjPropNames[i - 1] );
}
alert( cloneObjPropNames );
}
function test() {
var obj = { a:'abc', b:true, c:123 };
for ( var propName in obj ) {
delete obj.b;
obj.d = 'ddd';
alert( 'd' in obj );
alert( propName );
}
}
function TestObj() {
var a = 0; // 不被列舉
var b = 1; // 不被列舉
function c() {} // 不被列舉
TestObj.prototype.d = 2; // 會被列舉
TestObj.prototype.e = function() {} // 會被列舉
}
function test() {
Date.prototype.toString = function() {
return 'custom toString';
}
Date.prototype.custom = function() {
return 'custom';
}
for ( var propName in new Date() ) {
alert( propName ); // 除 custom function 外通通沒列舉 (包括 toString 也沒列舉)
}
for ( var propName in new TestObj() ) {
alert( propName );
}
}
function test() {
a :
for ( var i = 0; i < 5; i++ ) {
alert( 'a' );
b :
for ( var j = 0; j < 5; j++ ) {
if ( i == 2 ) {
continue a;
}
}
}
}
function test() {
for ( var i = 0, b = 'a', c = true; i < 5; i++, b+='b', c = !c ) {
alert( 'i=' + i + ',b=' + b + ',c=' + c );
}
}
i = 1;
var j = 0;
function test() {
alert( 'i' in window ); // true
alert( 'j' in window ); // true
delete i;
delete j;
alert( 'i' in window ); // false
alert( 'j' in window ); // true
}
function test() {
alert( r ); // 顯示 function 的內容
var r = '2';
alert( r ); // 顯示 2
function r() {
return '1';
}
alert( r ); // 顯示 2
}
function test() {
try {
while( true ) {
try {
throw new Error( 'something wrong' );
} catch (error) {
alert( 'inner error : name=' + error.name + ', message=' + error.message );
break;
} finally {
alert( 'inner finally' );
}
}
} catch (error) {
alert( 'outer error : name=' + error.name + ', message=' + error.message );
} finally {
alert( 'outer finally' );
}
}
function test() {
for ( var i = 0; i < 10; i++ ) {
try {
alert( 'i = ' + i );
if ( i < 5 ) {
throw new Error( ' eight ' );
}
} catch (error) {
alert( error );
} finally {
// 因為這行所以只會 alert 一次還有一次 error
break;
}
}
}
Posted at 12:48上午 十一月 16, 2008 by shooeugenesea in JavaScript | 迴響[0]
JavaScript - variable, operator and operand
var v = 'global variable';
window.onload = function() {
alert( v ); // undefined
var v = 'local variable';
alert( v ); // local variable
}
alert( v ); // 先執行, 印出 global variable
| + | 加法 |
如果其中一個運算元是字串, 另一個就也會轉字串, 如 alert( 5 + '6' ); 會印出 '56'. 為什麼加號遇到字串就不算數字結果而是字串串起來是因為 + 的字串運算元優先權大於數字運算元, 所以 '1' + '2' = '12'. 另外 + 運算子是由左到右, 所以 1 + 2 + 'test' = '3test' 而 'test' + 1 + 2 = 'test12' |
| = | 指定運算子 | = 是由右向左的結合性, 總之就是又變的值為主, 目前一直是這樣. |
| += | 加並指定 | += 除了可計算數字以外還可用在字串上 |
| - * % | 減法 乘法 求餘數 | 如果運算元不是數字就會被轉成數字 |
| - + | 減號加號 |
放在運算元之前會把運算元轉數字, 如果轉不了會變 NaN 例如本 alert( +'100' ); 會印出 100, alert( - '100b' ); 會印 NaN
function TestObj() {
TestObj.prototype.valueOf = function() {
return 5;
}
}
window.onload = function() {
alert( + new TestObj() ); // 印出 5
alert( - new TestObj() ); // 印出 -5
}
|
| / | 除法 | 因為 JavaScript 都是浮點數, 所以 5 / 2 = 2.5, 5 / 0 = Infinity, 0 / 0 = NaN |
| delete | 刪除屬性定義 | |
| typeof | 傳回資料型態 |
function MyObj() {}
function test() {
alert( 'number' == typeof(123) );
alert( 'boolean' == typeof(true) );
alert( 'object' == typeof(new MyObj()) );
alert( 'object' == typeof(null) );
alert( 'string' == typeof('teststring') );
alert( 'function' == typeof(test) );
alert( 'undefined' == typeof(abc) );
}
|
| new | 建立物件 | 除了可以 new Object() 以外, 最特別的就是如果建構子不用參數, 可以不用括號. 比方說
function MyObj() {
MyObj.prototype.toString = function() {
return 'this is MyObj';
}
}
function test() {
alert( new MyObj );
}
|
| delete | 刪除屬性, 變數或陣列 |
var a = 0;
b = 1;
function test() {
alert( a ); // 0
alert( b ); // 1
alert( delete a ); // false
alert( delete b ); // true
alert( a ); // 0
alert( b ); // runtime error because b is not defined
}
|
| void | 回傳 undefined | 如果需要一個運算式產生額外作用又不希望顯示結果就可以用 void
<a href='javascript:void window.open();'>Test</a>
|
| instanceof | 撿查物件型態是否為特定型態 | 像在 java 一樣使用
function TestObj() {}
function test() {
var a = new TestObj();
alert( a instanceof TestObj );
}
|
| && | AND | 左右兩個運算元都要 true 才回傳 true. 如果左邊的運算元為 false 就直接回傳左邊的值, 否則就回傳右邊運算元的值
alert( 'abc' && new Date() ); // alert new Date().toString()
alert( 'abc' && null ); // alert null
alert( undefined && true ); // alert undefined
|
| || | OR | 兩個運算元只要有一個為 true 就回傳 true 的那個
alert( 'abc' || new Date() ); // alert 'abc'
alert( 'abc' || null ); // alert 'abc'
alert( undefined || true ); // alert true
|
| | | NOT | 就是變成布林的相反值, 有個特別的用法就是連續兩個 ! 就可以把值換成原來的布林值
alert( !!'abc' ); // alert true
|
| 位元運算子 |
|
|
| & | AND | 如果兩個位元都是 1 就回傳 1
alert( Number(9).toString(2) ); // alert 1001
alert( Number(6).toString(2) ); // alert 0110
alert( Number( 9 & 6 ).toString(2) ); // alert 0
alert( Number( 9 & 1 ).toString(2) ); // alert 1
|
| | | OR | 只要有一個是 1 結果就是 1
alert( Number(9).toString(2) ); // alert 1001
alert( Number(6).toString(2) ); // alert 0110
alert( Number(1).toString(2) ); // alert 0001
alert( Number( 9 | 6 ).toString(2) ); // alert 1111
alert( Number( 9 | 1 ).toString(2) ); // alert 1001
|
| ^ | XOR | 兩個一樣為 0 不一樣為 1
alert( Number(9).toString(2) ); // alert 1001
alert( Number(6).toString(2) ); // alert 0110
alert( Number(1).toString(2) ); // alert 0001
alert( Number( 9 ^ 6 ).toString(2) ); // alert 1111
alert( Number( 9 ^ 1 ).toString(2) ); // alert 1000
|
| ~ | NOT | 把位元變成相反, 1 -> 0, 0 -> 1.
alert( Number(9).toString(2) ); // alert 1001
alert( Number(6).toString(2) ); // alert 0110
alert( Number(1).toString(2) ); // alert 0001
alert( Number( ~9 ).toString(2) ); // alert 0110
alert( Number( ~6 ).toString(2) ); // alert 1001
alert( Number( ~1 ).toString(2) ); // alert 1110
|
| << | 位元左移 | 移動的位元必須在 0 - 31 個, 如果超出 31 就取 31 的餘數
alert( Number(9).toString(2) ); // alert 1001
alert( Number(6).toString(2) ); // alert 0110
alert( Number(-10).toString(2) ); // alert -1010
alert( Number( 9 << 2 ).toString(2) ); // alert 100100
alert( Number( 6 << 3 ).toString(2) ); // alert 110000
alert( Number( -10 << 5 ).toString(2) ); // alert -101000000
|
| >> | 有號位元右移 | 有號就是說位元往右移, 如果原本的數是正號就補 0, 負號就補 1.
alert( Number(9).toString(2) ); // alert 1001
alert( Number(6).toString(2) ); // alert 0110
alert( Number(-10).toString(2) ); // alert -1010
alert( Number( 9 >> 2 ).toString(2) ); // alert 10
alert( Number( 6 >> 3 ).toString(2) ); // alert 0
alert( Number( -10 >> 10 ).toString(2) ); // alert -1
|
| >>> | 無號位元右移 | 和 >> 一樣, 差別是都補 0 |
| in | 撿查屬性是否存在 | 覺得這很有用, 可以先檢查有沒有某個屬性再做動作, 很適合 function 對未知型態的參數做動作之前預先處理以防錯誤發生
function test() {
var o = { a : 1, b : 2 };
alert( 'a' in o ); // true
alert( 'c' in o ); // false
}
|
| == | 傳回是否相等 |
|
| === | 傳回是否相同 | |
Posted at 02:44上午 十一月 15, 2008 by shooeugenesea in JavaScript | 迴響[0]
JavaScript - 基本的資料型態
// 一般的 parseInt, parseFloat
alert( parseInt('5 anc') ); // 5, 就是數字之後的單位會被忽略
alert( parseInt('0xFF') ); // 255
alert( parseFloat( '123.45 abcc' ) ); // 123.45 就是數字之後的單位會被忽略
alert( parseFloat( '1.23e5' ) ); // 123000
alert( parseFloat('12.23') ); // 12.23
// parseInt 可指定基數 (parseFloat 就不行)
alert( parseInt('101', 2) ); // 5
alert( parseInt('ff', 16) ); // 255
alert( parseInt('0123456', 10) ); // 123456
// 數字之前有非數字字串就不能轉換成功
alert( parseInt('$100') ); // NaN
alert( parseFloat('$100') ); // NaN
// Boolean to Number
alert( Number(true) ); // 1
alert( Number(false) ); // 0
// Boolean to String
alert( String(true) ); // 'true'
alert( String(false) ); // 'false
// Object to Boolean
alert( Boolean(new Object()) ); // true
alert( Boolean(null) ); // false
alert( Boolean(Number(0)) ); // false
alert( Boolean(Number(NaN)) ); // false
// 一般的宣告方式
function cal(a) {
return a + a;
}
// function literal 或稱 lambda function
var cal = function(a) {
return a + a;
}
// 用字串組成 function
var cal = new Function( 'a', 'return a + a' );
var objA = new Object();
objA.x = 1;
objA.y = 2;
alert( objA.x ); // 1
alert( objA['x'] ); // 1
alert( objA['y'] ); // 2
var A = { name : 'A' };
alert( A.name ); // A
var B = {
name : 'B',
children : {
C : { name : 'C' },
D : { name : 'D' }
}
};
alert( B.name );
alert( B.children.C.name ); // C
var E = {
name : 'E',
'F' : {
name : 'FF'
}
};
alert( E.F.name ); // FF
var TestO = function() {
TestO.prototype.toString = function() {
return 'This is toString of TestO';
}
TestO.prototype.valueOf = function() {
return 100;
}
}
window.onload = function() {
alert( new TestO() ); // 'This is toString of TestO'
alert( new TestO() + 50 ); // 150
}
var a1 = new Array();
a1[0] = 'a';
a1[1] = 1.2;
a1[2] = true;
a1[3] = { name : 'a3' }
a1[5] = 'a5'
alert( a1[3].name ); // a3
alert( a1[4] ); // undefined
var a2 = new Array( 'a', 1.2, true, {name : 'a3'} );
alert( a2[3].name ); // a3
var a3 = new Array(10); // 建立長度 10 的陣列
var a4 = [ 'a', 1.2, true, {name : 'a4'} ];
alert( a4[3].name ); // a4
var a5 = [ [1,2,3], ['a','b'], [] ];
alert( a5[1][0] ); // a
alert( null == undefined ); // true
alert( null === undefined ); // false
alert( new Date() ); // today
alert( new Date(2008, 10, 17) ); // 2008/11/17
var someD = new Date();
someD.setFullYear( someD.getFullYear() + 1 );
alert( someD ); // today add one year
alert( someD.toLocaleDateString() ); // 顯示區域的時間, 如 2008年11月9日
alert( 'abcdefghijklmnopqrstu'.substr(1, 5) );
alert( true.toString() );
alert( 123.45678.toFixed(2) );
alert( new Object('te') + new Object('st') ); // test
alert( !new Object(true) ); // false
alert( new Object(1) + new Object(2) ); // 3
var TestObj = function() {
TestObj.prototype.test = function() {
alert( 'you are calling test' );
}
}
window.onload = function() {
var t = new TestObj();
t.test();
eval( 'new TestObj().test()' ); // alert
eval( 't.test()', t ); // alert
eval( new String('t.test()'), t ); // do nothing..
}
var b = new Boolean( false );
alert( b ); // false
alert( Boolean( b ) ); // true
function TestObj() {}
var t = new TestObj();
alert( 5 - t ); // 沒有實做 valueOf 和 toString, 所以 t 會取得 '[object Object]' 的字串, 5 - '[object Object] 就因為不是數字而印出 'NaN'
TestObj.prototype.toString = function() {
return '6';
}
alert( 5 - t ); // 實做了 toString, 但沒有 valueOf. 所以 t 會在發現 valueOf 沒有回傳基本值之後去取 toString, 就是實做回傳的 '6'. 因為 '6' 可以直接轉成數字, 所以這行程式就印出 -1
TestObj.prototype.valueOf = function() {
return 7;
}
alert( 5 - t ); // 實做了 valueOf, 所以直接取得 valueOf 的回傳值就能計算了, 最後印出 -2
window.onload = function() {
function TestObj() {}
TestObj.prototype.valueOf = function() {
return '1';
}
TestObj.prototype.toString = function() {
return '2';
}
var t = new TestObj();
alert( t ); // 直接呼叫 toString -> 2
alert( 1 + t ); // 加號所以呼叫 valueOf, 但是回傳字串, 變 11
alert( 1 - t ); // 減號所以呼叫 valueOf, 1 - 1 = 0
TestObj.prototype.valueOf = function() {
return 1;
}
alert( 1 + t ); // 加號所以呼叫 valueOf, 回傳數字 1 所以結果變 2
}
function TestObj() {
this.a = 100;
this.addA = function( a ) {
this.a = this.a + a;
}
this.getA = function() {
return this.a;
}
}
function changeInsA( insA ) {
insA = new TestObj();
alert( insA.getA() ); // 100
}
function testCalByRef( insA, valA ) {
insA.addA( valA );
}
function testCallByVal( a, b ) {
a = a + b;
}
window.onload = function() {
var a = 0;
var b = 1;
testCallByVal(a, b);
alert( a ); // call by value, 所以 a 沒改變, 仍為 0
var c = new TestObj();
alert( c.getA() ); // 100
testCalByRef( c, 5 );
alert( c.getA() ); // call by reference, 所以 c.a 從 100 變成 105, 也不用拿變數去接
changeInsA( c );
alert( c.getA() ); // 雖然在 changeInsA 中傳過去的變數被改成新的 TestObj 但 c 變數的 instance 仍存在, 所以 105 不變
}
function compareStr( strA, strB ) {
return strA == strB;
}
window.onload = function() {
var a = new String('hello');
var b = new String('hell');
var c = new String('o');
alert( compareStr( a, b + c ) ); // true
alert( compareStr( b, a.substr(0, 4) ) ); // true
}
Posted at 01:21上午 十一月 10, 2008 by shooeugenesea in JavaScript | 迴響[0]
JavaScript - 非同步發 request
function AjaxRequest() {
var request = null;
if ( window.XMLHttpRequest ) {
try {
request = new XMLHttpRequest();
} catch (e) {
request = null;
}
} else if ( window.ActiveXObject ) {
try {
requet = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
request = null;
}
}
}
AjaxRequest.prototype.send = function (type, url, handler, postDataType, postData) {
if ( request == null ) {
return;
}
request.abort();
url += (( url.indexOf('?') > -1 ) ? "&" : "?") + "dummy=" + new Date().getTime();
try {
request.onreadystatechange = handler ;
request.open( type, url, true ); // always asynchronous (true)
if ( type.toLowerCase() == "get" ) {
request.send( null );
} else {
request.setRequestHeader("Content-Type", postDataType);
request.send( postData );
}
} catch ( e ) {
alert( "Ajax error communicating with the server.\n" + "Details: " + e );
}
}
AjaxRequest.prototype.getReadyState = function () {
return request.readyState;
}
AjaxRequest.prototype.getStatus = function () {
return request.status;
}
AjaxRequest.prototype.getResponseText = function () {
return request.responseText;
}
AjaxRequest.prototype.getResponseXML = function() {
return request.responseXML;
}
}
AjaxRequestServlet.java
...
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
out.println(request.getParameter("test"));
}
...
AjaxRequestXMLServlet.java
...
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/xml;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
StringBuffer sb = new StringBuffer();
sb.append( "" );
for ( int i = 0; i < 5; i++ ) {
sb.append( "" );
sb.append( "" + request.getParameter( "name" ) + i + " " );
sb.append( "" + request.getParameter( "age" ) + i + " " );
sb.append( " " );
}
sb.append( " " );
String xmlString = sb.substring(0);
logger.info( "xmlString=" + xmlString );
out.println( xmlString );
} finally {
out.close();
}
}
...
demo jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript" src="AjaxRequest.js"> </script>
<script type="text/javascript">
function testText() {
var ajaxRequest = new AjaxRequest();
var handler = function() {
if ( ajaxRequest.getReadyState() == 4 && ajaxRequest.getStatus() == 200 ) {
alert( 'response text = ' + ajaxRequest.getResponseText() );
}
}
var urlString = "${pageContext.servletContext.contextPath}/AjaxRequestServlet";
ajaxRequest.send("POST", urlString, handler, "application/x-www-form-urlencoded; charset=UTF-8", "test=" + document.getElementById('personName').value);
}
function testXML() {
var ajaxRequest = new AjaxRequest();
var handler = function() {
if ( ajaxRequest.getReadyState() == 4 && ajaxRequest.getStatus() == 200 ) {
var responseXML = ajaxRequest.getResponseXML();
var names = responseXML.getElementsByTagName('name');
var ages = responseXML.getElementsByTagName('age');
var context = document.getElementById('personContexts');
clearElmt( context );
if ( names.length == ages.length ) {
for ( var i = 0; i < names.length; i++ ) {
var nameText = document.createTextNode( elmtToText(names[i]) );
var ageText = document.createTextNode( elmtToText(ages[i]) );
var br = document.createElement("br");
context.appendChild( nameText );
context.appendChild( ageText );
context.appendChild( br );
}
}
}
}
var urlString = "${pageContext.servletContext.contextPath}/AjaxRequestXMLServlet";
var params = "name=" + document.getElementById('personName').value;
params += "&age=" + document.getElementById('personAge').value;
ajaxRequest.send("POST", urlString, handler, "application/x-www-form-urlencoded; charset=UTF-8", params);
}
function elmtToText(ele) {
var firstChildNodeValue = ele.firstChild.nodeValue;
return firstChildNodeValue ? firstChildNodeValue : "";
}
function appendElmtsToText(ele) {
var result = "";
if ( !ele ) { return; }
for ( var i = 0; i < ele.childNodes.length; i++ ) {
var child = ele.childNodes[i];
if ( child.nodeValue ) {
result += child.nodeValue;
} else {
if ( child.childNodes && child.childNodes[0].nodeValue ) {
result += child.childNodes[0].nodeValue;
}
}
}
return result;
}
function clearElmt( elmt ) {
if ( elmt == null ) { return; }
while ( elmt.firstChild ) {
elmt.removeChild( elmt.firstChild );
}
}
</script>
</head>
<body>
<h2>Hello World 2!</h2>
<input type="button" value="testText" onclick="testText();"/>
<input type="button" value="testXML" onclick="testXML();"/>
<input type="text" id="personName"/>
<input type="text" id="personAge"/>
<div id="personContexts"></div>
</body>
</html>
Posted at 01:56上午 十月 08, 2008 by shooeugenesea in JavaScript | 迴響[0]
JavaScript - instance method, class owned instance method, class method
<!--
Document : TestObject
Created on : 2008/9/29, 上午 02:42:07
Author : Administrator
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript">
// add class owned instance method into standard class
Date.prototype.toClassOwnedInstanceString = function() {
return "[DateClassOwnedInstanceString date=" + this.toString();
}
// add class owned method into standard class
Date.toClassOwnedString = function(date) {
return "class owned string date=" + date;
}
function Blog(date, body, imgName) {
// instance property : all instances have different properties
this.date = date;
this.body = body;
this.imgName = imgName;
// class property : all instances have same class property
Blog.prototype.prototypeProperty = "prototype property";
Blog.classProperty = "classProperty";
// instance method : all instances have different functions (even if same context)
this.toInstanceString = function() {
return "[instanceString date=" + this.date + ",body=" + this.body + ",imgName=" + this.imgName + "]";
}
// class owned instance method : all instances have same class owned instance method, can access "this" instance
Blog.prototype.toClassOwnedInstanceString = function() {
return "[classOwnedInstanceString date=" + this.date + ",body=" + this.body + ",imgName=" + this.imgName + "]";
}
// class method : all instances has same class method, can't access "this" instance
Blog.toClassOwnedString = function(blog) {
return "[class-owned-string date=" + blog.date + ",body=" + blog.body + ",imgName=" + imgName + ",classProperty=" + Blog.prototype.classProperty + "]";
}
}
window.onload = function() {
var blog = new Blog(new Date("08/08/2008"), "testbody");
var blogWithImg = new Blog(new Date("08/09/2007"), "testbodywithImgName", "test.png");
alert( blog.toInstanceString() );
alert( blog.toClassOwnedInstanceString() );
alert( Blog.toClassOwnedString(blog) );
alert( new Date().toClassOwnedInstanceString() );
alert( blog.date.toClassOwnedInstanceString() );
alert( Date.toClassOwnedString(new Date()) );
alert( blogWithImg.toInstanceString() );
alert( Blog.prototype.prototypeProperty );
alert( Blog.classProperty );
}
</script>
</head>
<body>
<div></div>
</body>
</html>
Posted at 01:31上午 九月 30, 2008 by shooeugenesea in JavaScript | 迴響[0]
JavaScript - 操作 style, 排序, 自建物件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript">
function Blog(body, date) {
this.body = body;
this.date = date;
}
function getBlogs() {
return [
new Blog( "Hello1", new Date("08/19/2009") ),
new Blog( "Hello1", new Date("08/19/2008") ),
new Blog( "Hello1", new Date("08/19/2007") ),
new Blog( "Hello1", new Date("08/19/2006") ),
new Blog( "Hello1", new Date("08/19/2005") ),
new Blog( "Hello2", new Date("09/19/2004") ),
new Blog( "Hello3", new Date("10/19/2003") ),
new Blog( "Hello4", new Date("11/19/2002") )
];
}
function showBlog() {
var blogs = getBlogs();
blogs.sort(function(blog1, blog2) {
return blog1.date - blog2.date;
});
var blogBody = document.getElementById('blog');
for ( var i = 0; i < blogs.length; i++ ) {
var bodyPTag = document.createElement("p");
if ( i % 2 == 0 ) {
bodyPTag.style.backgroundColor = "#EEEEEE";
}
var strongTag = document.createElement("strong");
var dateStr = blogs[i].date.getMonth() + "/" + ( blogs[i].date.getDate() + 1 )+ "/" + blogs[i].date.getFullYear();
strongTag.appendChild(document.createTextNode(dateStr) );
bodyPTag.appendChild( strongTag );
bodyPTag.appendChild( document.createElement("br") );
bodyPTag.appendChild( document.createTextNode(blogs[i].body) );
blogBody.appendChild( bodyPTag );
}
}
window.onload = function() {
document.getElementById('showAll').onclick = function() {
showBlog();
}
}
</script>
</head>
<body>
<input type="button" id="showAll" value="Show All Blog Entries"/>
<div id="blog"></div>
</body>
</html>
用 innerHTML - 非 standard
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript">
function Blog(body, date) {
this.body = body;
this.date = date;
}
function getBlogs() {
return [
new Blog( "Hello1", "08/19/2008" ),
new Blog( "Hello2", "09/19/2008" ),
new Blog( "Hello3", "10/19/2008" ),
new Blog( "Hello4", "11/19/2008" )
];
}
function showBlog() {
var blogs = getBlogs();
var blogBody = "";
for ( var i = 0; i < blogs.length; i++ ) {
if ( i % 2 == 0 ) {
blogBody += "<p style='background-color:#EEEEEE'>";
} else {
blogBody += "<p>";
}
blogBody += "<strong>" + blogs[i].date + "</strong><br/>" + blogs[i].body + "</p>";
}
document.getElementById('blog').innerHTML = blogBody;
}
window.onload = function() {
document.getElementById('showAll').onclick = function() {
showBlog();
}
}
</script>
</head>
<body>
<div id="blog"></div>
<input type="button" id="showAll" value="Show All Blog Entries"/>
</body>
</html>
Posted at 06:24下午 九月 28, 2008 by shooeugenesea in JavaScript | 迴響[0]
JavaScript - cookie 的 CRUD ( javascript 和 html 分開 )
基礎基礎...反正就是把 javascript 和 html 分開, 就像是邏輯和資料分開放一樣.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript">
var showAllCookie = function(showerObj) {
showerObj.value = document.cookie;
}
var clearCookies = function(){
var cookieAry = document.cookie.split(';');
for ( var cookieCnt = 0; cookieCnt < cookieAry.length; cookieCnt++ ) {
var cookieKey = cookieAry[cookieCnt].split('=')[0];
deleteCookie( cookieKey );
}
}
var deleteCookie = function( key ) {
writeCookie( key, '', -1 );
}
var readCookie = function( key ) {
var cookieAry = document.cookie.split(';');
for ( var cookieCnt = 0; cookieCnt < cookieAry.length; cookieCnt++ ) {
var cookieStr = cookieAry[cookieCnt];
while ( cookieStr.charAt(0) == ' ' ) {
cookieStr = cookieStr.substr(1, cookieStr.length);
}
if ( cookieStr.indexOf( key + '=', 0) == 0 ) {
return cookieStr.substring( (key + '=').length, cookieStr.length );
}
}
return null;
}
var writeCookie = function( key, value, days ) {
if ( isNaN(days) ) {
days = 1;
}
var expireDate = new Date();
expireDate.setTime( expireDate.getTime() + ( days * 24 * 60 * 60 * 1000 ));
var expireDateStr = "; expires=" + expireDate.toGMTString();
var strToCookie = key + "=" + value + expireDateStr + "; path=/";
document.cookie = strToCookie;
}
window.onload = function(){
var cookieKeyObj = document.getElementById('cookieKey');
var cookieValueObj = document.getElementById('cookieValue');
var expireDaysObj = document.getElementById('expireDays');
var writeCookieObj = document.getElementById('writeCookieBtn');
var showAllCookieObj = document.getElementById('showAllCookieBtn');
var showerObj = document.getElementById('shower');
var findCookieObj = document.getElementById('findCookieBtn');
var clearCookieObj = document.getElementById('clearCookieBtn');
var deleteCookieObj = document.getElementById('deleteCookieBtn');
writeCookieObj.onclick = function(){
writeCookie( cookieKeyObj.value, cookieValueObj.value, expireDaysObj.value )
showAllCookie( showerObj );
};
showAllCookieObj.onclick = function() {
showAllCookie( showerObj );
};
findCookieObj.onclick = function() {
showerObj.value = readCookie( cookieKeyObj.value );
};
clearCookieObj.onclick = function() {
clearCookies();
showAllCookie( showerObj );
};
deleteCookieObj.onclick = function() {
deleteCookie( cookieKeyObj.value );
showAllCookie( showerObj );
}
}
</script>
</head>
<body>
cookie key : <input type="text" id="cookieKey"/><br/>
cookie value : <input type="text" id="cookieValue"><br/>
Expire days : <input type="text" id="expireDays"/><br/>
<input type="button" id="writeCookieBtn" value="write cookie"/>
<input type="button" id="showAllCookieBtn" value="show all cookie"/>
<input type="button" id="findCookieBtn" value="find cookie"/>
<input type="button" id="deleteCookieBtn" value="delete cookie" />
<input type="button" id="clearCookieBtn" value="clear cookies" /><br/>
<textarea cols="50" rows="20" id="shower"></textarea><br/>
</body>
</html>
Posted at 12:14上午 九月 22, 2008 by shooeugenesea in JavaScript | 迴響[0]
JavaScript - cookie 的 CRUD
呃...我知道這很基礎啦...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript">
function clearCookies() {
var cookieAry = document.cookie.split(';');
for ( var cookieCnt = 0; cookieCnt < cookieAry.length; cookieCnt++ ) {
var cookieKey = cookieAry[cookieCnt].split('=')[0];
deleteCookie( cookieKey );
}
}
function deleteCookie( key ) {
writeCookie( key, '', -1 );
}
function readCookie( key ) {
var cookieAry = document.cookie.split(';');
for ( var cookieCnt = 0; cookieCnt < cookieAry.length; cookieCnt++ ) {
var cookieStr = cookieAry[cookieCnt];
while ( cookieStr.charAt(0) == ' ' ) {
cookieStr = cookieStr.substr(1, cookieStr.length);
}
if ( cookieStr.indexOf( key + '=', 0) == 0 ) {
return cookieStr.substring( (key + '=').length, cookieStr.length );
}
}
return null;
}
function writeCookie( key, value, days ) {
if ( isNaN(days) ) {
days = 1;
}
var expireDate = new Date();
expireDate.setTime( expireDate.getTime() + ( days * 24 * 60 * 60 * 1000 ));
var expireDateStr = "; expires=" + expireDate.toGMTString();
var strToCookie = key + "=" + value + expireDateStr + "; path=/";
document.cookie = strToCookie;
}
</script>
</head>
<body>
cookie key : <input type="text" id="cookieKey"/><br/>
cookie value : <input type="text" id="cookieValue"><br/>
Expire days : <input type="text" id="expireDays"/><br/>
<input type="button" value="write cookie" onclick="writeCookie(document.getElementById('cookieKey').value,document.getElementById('cookieValue').value,document.getElementById('expireDays').value);"/>
<input type="button" value="show all cookie" onclick="document.getElementById('textArea').value=document.cookie" />
<input type="button" value="find cookie" onclick="document.getElementById('textArea').value=readCookie(document.getElementById('cookieKey').value);"/>
<input type="button" value="delete cookie" onclick="deleteCookie( document.getElementById('cookieKey').value );"/>
<input type="button" value="clear cookies" onclick="clearCookies();"/><br/>
<textarea cols="50" rows="20" id="textArea"></textarea><br/>
</body>
</html>
Posted at 07:17下午 九月 20, 2008 by shooeugenesea in JavaScript | 迴響[0]