Thursday, July 16, 2009

Ant visualize plugin

 

Thời gian gần đây, tôi có nhu cầu sử dụng Ant, mặc dù đã biết Ant từ khá lâu (hơn 1 năm) nhưng lần này thì mới  là ….”thực sự sử dụng” và trải nghiệm của tôi là : sao mà rắc rối thế.

Ant thì tốt, tuy nhiên điều tôi thấy là nó thiếu một công cụ để hỗ trợ giao diện, như các bạn thấy, đọc một file Ant và thao tác trên nó, đặc biệt trên một file Ant lớn thì quả nhiên là….điên đầu.

Cái khó nên tôi phải ráng ló cái khôn, sau khi cực nhọc cho xong cái project, tôi cũng quyết định viết một plugin cho nó(test và xài cho project sau).

Tôi viết một “Ant Visualize plugin” với mục đích visualize một file Ant, chương trình sẽ đọc file Ant và vẽ một Graph, mỗi một task sẽ tương ứng một node trên graph nà, double click lên task để thực thi.

 

image

Left: thông tin console khi chạy plugin.

Right: Graph visualize của file Ant.

Double Click lên  Task để thực thi.

1. Cài đặt:

Chương trình sử dụng thư viện GEF của eclipse, nếu phiên bản eclipse của bạn là myeclipse thì thư viện này đã được tích hợp sẵn (Tôi kiểm tra trên myeclipse 6.6, 7.0 và 7.5).

Nếu sử dụng eclipse, chương trình có thể chạy được trên phiên bản eclipse 3.4 và 3.5 (ganymede và Galileo) với những version khác thì tôi chưa test, nhưng chắc chắn là nó cũng sẽ chạy được.

1.1 Cài đặt GEF cho eclipse:

Bạn download thư viện GEF từ địa chỉ sau:

http://www.mediafire.com/file/qlz3tittnzz/GEF-ALL-3.5.0.zip

Sau đó giả nén vào thư mục gốc của eclipse:

image

giải nén vào thư mục gốc chứa eclipse.

Lưu ý : Khi giải nén vào thư mục gốc, winrar sẽ chép đè một số file, OK để tiếp tục.

(Nhớ exit eclipse trước khi giải nén).

1.2 Cài đặt Ant Visualize Plugin:

Cài đặt Ant Visualize hết sức đơn giản, bạn download file từ địa chỉ sau:

http://www.mediafire.com/file/om0zwmyyj0y/antvisualize.rar

Chép file AntVisualizePlugin_1.0.0.jar vào thư mục dropins

image

Khởi động (khỏi động lai) eclipse và bạn có thể sử dụng plugin này.

2. Hướng dẫn sử dụng:

Khởi động eclipse/myeclipse

Nếu cửa sổ plugin chưa xuất hiện, bạn vào Window/Show view/Other…

image

Kéo xuống cuối và chọn Ant Visualize.

image

Bạn cũng nên mở cửa sổ Console để theo dõi thông báo từ plugin(Window/Show View/Console).

Trên cửa sổ Ant Visualize click Open Ant

image

Cuối cùng chọn Load/Reload.

image

Double Click vào Node để chạy một task.

(Lưu ý: để một task có thể thực thi được, Ant phải được cài đặt trên hệ thống gồm ANT_HOME và PATH=ANT_HOME/bin. Nói chung nếu máy bạn lâu nay chạy được Ant là được rồi).

Trong quá trình chạy, Console có thể làm cho bạn bị rối, check vào CheckBox : “Clear console before execute task” console sẽ tự clear trước khi chạy một task khác.

Nó được visualize từ file xml như sau:

<?xml version="1.0"?>
<project name="UKLights" default="all" basedir=".">

    <property name="src" value="src"/>
    <property name="build" value="build"/>
    <property name="build.jar" value="build\jar"/>
    <property name="class.dir" value="build\classes"/>
    <property name="lib" value="lib"/>
    <path id="compile.classpath">
        <fileset dir="${lib}">
            <include name="*.jar"/>
        </fileset>
    </path>

    <target name="init">
          <mkdir dir="${build}"/>
    </target>

    <target name="all" depends="UKLights" description="builds whole projects">        <echo> Doing all </echo>     </target>
    <target name="UKLights" depends="compile,copygoogle"
            description="Builds the main UKLights project">
        <echo>Doing UKLights</echo>
    </target>
    <target name="compile" depends="clean,init">
    <mkdir dir="${class.dir}"/>
        <!-- Compile the java code -->
        <javac srcdir="${src}" destdir="${class.dir}">
            <classpath refid="compile.classpath"/>
        </javac>
    </target>
    <target name="jar">
        <mkdir dir="${build.jar}"/>
        <jar destfile="${build.jar}/HelloWorld.jar" basedir="${class.dir}">
            <manifest>
                <attribute name="Main-Class" value="UKLights"/>
            </manifest>
        </jar>
    </target>

    <target name="run">
        <java jar="${build.jar}/HelloWorld.jar" fork="true"/>
    </target>

    <target name="copygoogle" depends="compile">
        <copy file="${src}/google.png" tofile="${class.dir}/google.png"/>
    </target>
    <target name="clean" description="Removes previous build">
        <delete verbose="true">
            <fileset dir="${build}"/>
        </delete>
    </target>
</project>

 

Lần đầu tiên mình viết một sản phẩm cho ….cộng đồng nên chắc là sản phẩm sẽ có những ….ngây ngô nhất định, mong bạn đóng góp để mình cải thiện trong thời gian tới.

Nếu có thể xin comment trên blog này

Blog : dangtritue.blogspot.com

hay gửi một yêu cầu qua mail nhé:

Email: dangtritue@yahoo.com

Download một số ví dụ về Ant tại đây:

http://www.mediafire.com/file/wqndkghyzdh/AntExamples.rar

Nếu bạn nào gặp trục trặc về vấn đề download/Cài đặt, hãy liên hệ ngay nhé.

Hy vọng là một công cụ hữu ích cho cộng đồng.

Lang Thang.

Đọc tiếp...

Wednesday, June 3, 2009

Tài liệu dành cho nhà phát triển của prototype.js

Nội dung chính

Tài liệu này là gì?

Trong trường hợp bạn chưa từng dùng thử, prototype.js là một thư viện JavaScript được viết bởi Sam Stephenson. Thư viện này có ý tưởng xuất sắc và là một mã tương thích chuẩn được viết rất tốt, với hàng loạt các thành phần liên quan đến việc xậy dựng những trang web đa dạng và có tính tương thích cao để giúp bạn xây dựng các trang Web2.0.

Nếu bạn cố gắng sử dụng thư viện này gần đây, bạn có thể nhận thấy rằng tài liệu kèm theo không phải là một điểm mạnh của nó. Như những nhà phát triển trước tôi, tôi phải cật lực xem toàn bộ mã lệnh và thực hành với nó. Tôi nghĩ sẽ là rất tuyệt nếu như để lại vài dòng ghi chú khi tôi học và chia sẻ nó với mọi người.

Tôi cũng giới thiệu un-official reference cho các đối tượng, lớp, hàm số, và phần mở rộng kèm theo thư viện này.

Khi bạn đọc những ví dụ và phần tham khảo, nhà phát triển quen thuộc với ngôn ngữ Ruby sẽ nhận thấy rằng có sự giống nhau có chủ ý các lớp có sẵn của Ruby và nhiều phần mở rộng khác được khởi tạo bởi thư viện này.

toc

Mục có liên quan

Advanced JavaScript guide.

toc

Các hàm tiện ích

Thư viện này mang đến rất nhiều các đối tượng và các hàm tiện ích đã được định nghĩa sẵn. Mục tiêu chủ yếu của các hàm này là nhằm giúp bạn đỡ phải lập đi lặp lại việc đánh máy và các thành ngữ.

toc

Sử dụng hàm $()

Hàm $() là một cách tiện lợi thay thế cho 1 hàm rất quen thuộc đó là document.getElementById() của DOM.Giống như hàm DOM, hàm này trả về thành tố ứng với id được truyền dưới dạng tham số.

Không giống với hàm DOM, hàm này đi xa hơn một bậc. Bạn có thể truyền 1 hay nhiều id và $() sẽ trả về một đối tượngArray với tất cả các thành tố được yêu cầu. Ví dụ dưới đây sẽ minh họa điều này.

<HTML>
<HEAD>
<TITLE> Test Page </TITLE>
<script src="prototype-1.4.0.js"></script>

<script>
	function test1()
	{
		var d = $('myDiv');
		alert(d.innerHTML);
	}

	function test2()
	{
		var divs = $('myDiv','myOtherDiv');
		for(i=0; i<divs.length; i++)
		{
			alert(divs[i].innerHTML);
		}
	}
</script>
</HEAD>

<BODY>
	<div id="myDiv">
		<p>Đây là một đoạn văn bản</p>
	</div>
	<div id="myOtherDiv">
		<p>Đây là một đọan văn bản khác</p>
	</div>

	<input type="button" value=Test1 onclick="test1();"><br> 
	<input type="button" value=Test2 onclick="test2();"><br> 

</BODY>
</HTML>

Một điều thú vị nữa về hàm này đó là bạn có thể truyền được chuỗi id hoặc là đối tượng của thành tốt đó. Điều này làm cho hàm này rất hữu ích khi tạo các hàm khác mà có thể nhận được cả dạng tham số.

toc

Sử dụng hàm $$()

Hàm $$() sẽ giúp bạn rất nhiều nếu bạn muốn tách biết các tập tin CSS ra khỏi khung nội dung. Nó truyền 1 hay nhiều bộ lọc(filter) CSS, từng cái một sẽ được dùng tuẩn tự để xác định thể hiện CSS. Nó sẽ trả về phần tử trùng khớp với bộ lọc CSS ấy

Sử dụng hàm này rất dễ. Hãy xem ví dụ sau:

<script>
function test$$(){
	/*
	  in case CSS is not your forte, the expression below says
	  'find all the INPUT elements that are inside 
	  elements with class=field that are inside a DIV
	  with id equal to loginForm.'
	*/
	var f = $$('div#loginForm .field input');
	var s = '';
	for(var i=0; i<f.length; i++){
		s += f[i].value + '/';
	}
	alert(s); // shows: "joedoe1/secret/"
	
	//now passing more than one expression
	f = $$('div#loginForm .field input', 'div#loginForm .fieldName');
	s = '';
	for(var i=0; i<f.length; i++){
		s += ( f[i].value ? f[i].value : f[i].innerHTML ) + '/';
	}
	alert(s); //shows: "joedoe1/secret/User name:/Password:/"
}


</script>

<div id='loginForm'>
	<div class='field'>
		<span class='fieldName'>User name:</span>
		<input type='text' id='txtName' value='joedoe1'/>
	</div>
	<div class='field'>
		<span class='fieldName'>Password:</span>
		<input type='password' id='txtPass' value='secret' />
	</div>
	<input type='submit' value='login' />
</div> 
<input type=button value='test $$()' onclick='test$$();' />
			

Một ghi chú về hiệu suất. Hàm $$() hiện tại trong prototype.js không được xem là có hiệu quả đặc biệt. Nếu bạn muốn đào sâu hơn về XHTML bằng cách sử dụng $$() thường xuyên, bạn có thể xem xét những thể hiện khác, có thể sẽ thay thế hàm $$().

toc

Sử dụng hàm $F()

Hàm $F() lại là một cách ngắn gọn khác. Nó trả về giá trị của vùng nhập dữ liệu, như hộp văn bản, hay là danh sách thả xuống. Hàm này nhận tham số là id của thành tố hoặc là chính đối tượng của thành tố ấy.

<script>
	function test3()
	{
		alert(  $F('userName')  );
	}
</script>

<input type="text" id="userName" value="Joe Doe"><br> 
<input type="button" value=Test3 onclick="test3();"><br> 
			

toc

Sử dụng hàm $A()

Hàm $A() một tham số nó nhận được thành một đối tượng Array.

Hàm này kết hợp với phần mở rộng của lớp Array, làm cho nó dễ dàng có thể chuyển đổi hoặc sao chép bất cứ danh sách đếm được nào thành đối tượng Array . Có một số người khuyên là nên chuyển đổi đối tượng DOM NodeLists thành một mảng thông thường, để có thể tham chiếu dễ dàng.Xem ví dụ dưới đây.

<script>

	function showOptions(){
		var someNodeList = $('lstEmployees').getElementsByTagName('option');
		var nodes = $A(someNodeList);

		nodes.each(function(node){
				alert(node.nodeName + ': ' + node.innerHTML);
			});
	}
</script>

<select id="lstEmployees" size="10" >
	<option value="5">Buchanan, Steven</option>
	<option value="8">Callahan, Laura</option>
	<option value="1">Davolio, Nancy</option>
</select>

<input type="button" value="Show the options" onclick="showOptions();" > 
			

toc

Sử dụng hàm $H()

Hàm $H() chuyển đổi các đối tượng thành các đối tượng Hash đếm được (enumerable) tương tự như các mảng.

<script>
	function testHash()
	{
		//tạo một đối tượng
		var a = {
			first: 10,
			second: 20,
			third: 30
			};

		//chuyển nó thành mảng băm
		var h = $H(a);
		alert(h.toQueryString()); //displays: first=10&second=20&third=30
	}

</script>
			

toc

Sử dụng hàm $R()

Hàm $R() đơn giản chỉ là cách ngắn gọn viết thay cho new ObjectRange(lowerBound, upperBound, excludeBounds).

Đi đến phần ObjectRange để tham khảo đầy đủ về lớp này. Trong lúc ấy thì hãy xem qua ví dụ đơn giản sau để biết cách sử dụng vòng lặp với phương thức each. Xem thêm về phương thức này tại Enumerable .

<script>
	function demoDollar_R(){
		var range = $R(10, 20, false);
		range.each(function(value, index){
			alert(value);
		});
	}

</script>

<input type="button" value="Sample Count" onclick="demoDollar_R();" > 
			

toc

Sử dụng hàm Try.these()

Hàm Try.these() làm mọi việc đơn giản hơn khi bạn có ý định thử gọi nhiều hàm khác nhau cho đến khi có 1 hàm trong số đó hoạt động. Nó lấy tham số là tên của các hàm và gọi tuần tự các hàm đó cho đến khi có 1 hàm hoạt động. Hàm trả về kết quả của hàm được gọi thành công.

Trong ví dụ dưới đây, hàm xmlNode.text hoạt động trong một số trình duyệt, và hàm xmlNode.textContent hoạt động trong một số trình duyệt khác. Sử dụng hàm Try.these() chúng ta có thể trả về hàm có thể hoạt đọng.

<script>
function getXmlNodeValue(xmlNode){
	return Try.these(
		function() {return xmlNode.text;},
		function() {return xmlNode.textContent;}
		);
}
</script>
			

toc

Đối tượng Ajax

Hàm tiệc ích được đề cập phía trên là rất tốt nhưng, sự thật là nó không phải là cách tốt nhất để làm công việc này. Bạn có thể tự viết nó hoặc có thể có nhưng hàm tương tự trong mã lệnh của bạn. Nhưng những hàm đó chỉ là phần nổi của tảng băng mà thôi.

Tôi chắc chắn là bạn thấy hứng thú với prototype.js là vì khả năng hỗ trợ AJAX của nó. Bây giờ hãy cùng giải thích vì sao thư viện này sẽ làm cho bạn thấy thoải mái hơn khi bạn cần thực hiện các cấu trúc login của AJAX.

Đối tượng Ajax là một đối tượng được định nghĩa sẵn, được tạo bởi thư viện nhằm gói gọn và làm đơn giản những đoạn mã khó hiểu khi viết các chức năng AJAX. Hàm này chứa một số lớp cung cấp các cấu trúc AJAX được gói gọn lại. Nào, hãy xem thử qua một số trong chúng.

toc

Mánh khóe với String

Strings là một đối tượng rất mạnh. Prototype.js tận dụng sức mạnh và nâng nó lên một tầm cao khác về chất lượng.

Thay thế Strings

Khi nghĩ đến thay thế chuỗi trong Javascript, thường thì đã có sẵn các phương thức như String.Replace. Mặc dù nó vẫn có thể hoạt động với biểu thức chính qui(regular expression) nhưng nó vẫn không linh hoạt bằng phương thức thay thế mới trong prototype.js

Hãy đến với phương thức String.gsub. Với phương thức này bạn không chỉ có thể tìm và thay thế 1 chuỗi cố định hay 1 biểu thức chính qui bạn còn có thể kiểm soát được nhiều hơn quá trình thay thế. Ví dụ: bạn có thể sử dụng 1 mẫu có sẵn để chỉ cho phương thức cách mà bạn muốn các kết quả tìm kiếm sẽ được biến đổi (thay vì chỉ là thay thế thông thường)

Ví dụ dưới đây sẽ tìm kiếm những từ chứa 't' và thay thế cả cụm theo sau 't' bằng 'tizzle'. Trong trường hợp ví dụ không rõ ràng, biểu thức chính qui mà chúng ta chọn sẽ sẽ có dạng khai báo thành nhóm : \w+ được để trong ngoặc. Chúng ta có thể lấy được giá trị của nhóm này bằng cách sử dụng #{1} trong chuỗi thay thế mẫu.

Trong ví dụ, chúng ta tiến hành bắt lấy những gì phía sau 't' và thêm vào 'tizzle'. Nếu chúng ta có nhiều nhóm trong biểu thức chính qui, chúng ta có thể lấy các giá trị như sau strong>#{2}, #{3}, ...

<script>
function talkLikeYouKnowSomething(){
	var s = 'prototype string extensions can help you';
	var snoopdogfy = /\b(\w+)t\w+\b/;
	var snooptalk = s.gsub(snoopdogfy, '#{1}tizzle' );
	alert(snooptalk); // shows: "prototizzle stizzle extizzle can help you"				
}
</script>
			

Không nên chỉ dừng tại đây. Những thay thế mà chúng ta vừa thực hiện không phải là mạnh mẽ lắm vì chúng ta chỉ giới hạn chúng ở dạng khớp mẫu (pattern matching) và thay thế. Sẽ là thế nào nếu chúng ta có thể thao tác trên các mẫu khớp với những phép logic tùy ý, và từ đó tạo ra những giá trị thay thế mong muốn? Chúng ta có thể làm được như vậy nếu chúng ta truyền 1 hàm dưới dạng tham số thứ 2 vào gsub. Hàm này sẽ nhận 1 mảng với chuỗi khớp (index 0) và bất cứ giá trị nhóm nào(index 1 đến N.)

<script>
function scamCustomers(){
	var prices = 'book1 $12.5, magazine $5.50, pencil $1.20';
	var priceFinder = /\$([0-9\.]+)/;
	var r = prices.gsub(priceFinder, jackUp);
	alert(r);//shows: "book1 $13.75, magazine $6.05, pencil $1.32"
}
	
function jackUp(matches){
	//increases the prices by 10%
	var price = parseFloat(matches[1]);
   	return '$' + Math.round(110 * price)/100;
}
</script>
			
Mẫu sẵn có của Strings

Khi số lượng mã Javascript tăng lên, đồng nghĩa với việc bạn sẽ thấy xung quanh mình sẽ là tập hợp các đối tượng có cùng 1 kiểu, và bạn cần phải sắp xếp nó theo một trật tự nhất định.

Trong ứng dụng của bạn, sẽ không phải là hiếm để bắt gặp những đoạn code chạy lặp lại qua danh sách các đối tượng, khởi tạo các chuỗi dựa trên đặc tính của đối tượng và trật tự nhất định của một số phần tử. Prototype.js có Template class, nhằm giúp bạn với những tình huống nêu trên.

Ví dụ dưới đây sẽ hướng dẫn cách để định dạng một danh sách các mục trong 1 giỏ hàng trong vài dòng HTML.

<script>
function printCart(){
	//creating a sample cart
	var cart = new Object();
	cart.items = [ ];
	//putting some sample items in the cart
	cart.items.push({product: 'Book 123', price: 24.50, quantity: 1});
	cart.items.push({product: 'Set of Pens', price: 5.44, quantity: 3});
	cart.items.push({product: 'Gift Card', price: 10.00, quantity: 4});
	
	//here we create our template for formatting each item
	var itemFormat = new Template(
			'You are ordering #{quantity} units ' + 
			'of #{product} at $#{price} each'
			);
	var formatted = '';
	
	for(var i=0; i<cart.items.length; i++){
		var cartItem = cart.items[i];
		formatted += itemFormat.evaluate(cartItem) + '<br/>\n';
	}
	
	alert(formatted);
	/* SHOWS:
	You are ordering 1 units of Book 123 at $24.5 each<br/>
	You are ordering 3 units of Set of Pens at $5.44 each<br/>
	You are ordering 4 units of Gift Card at $10 each<br/>
	*/
}
</script>
			

Để tham khảo đầy đủ hơn về danh sách các hàm liên quan đến chuỗi, xem String extensions

toc

Sử dụng lớp Ajax.Request

Nếu bạn không sử dụng bất cứ thư viện hỗ trợ nào, bạn có thể phải viết rất nhiều mã lệnh để tạo ra đối tượng XMLHttpRequest và phải theo dõi các tiến trình không đồng bộ (asynchronous) của nó. Sau đó thì tách ra những hồi đáp (response) và thi hành chúng. Và bạn có thể cho là mình may mắn nếu bạn không cần phải hỗ trợ nhiều hơn 1 loại trình duyệt.

Để hỗ trợ các hứng năng của AJAX, thư viện định nghĩa lớp Ajax.Request.

Cứ cho rằng bạn có một ứng dụng mà cần phải thông tin với máy chủ thông qua url http://yourserver/app/get_sales?empID=1234&year=1998, mà trả về một hồi đáp XML như sau :

<?xml version="1.0" encoding="utf-8" ?> 
<ajax-response>
	<response type="object" id="productDetails">
		<monthly-sales>
			<employee-sales>
				<employee-id>1234</employee-id> 
				<year-month>1998-01</year-month> 
				<sales>$8,115.36</sales> 
			</employee-sales>
			<employee-sales>
				<employee-id>1234</employee-id> 
				<year-month>1998-02</year-month> 
				<sales>$11,147.51</sales> 
			</employee-sales>
		</monthly-sales>
	</response>
</ajax-response>			
			

Giao tiếp với máy chủ và nhận lại mã XML này thật là đơn giản khi dùng đối tượng Ajax.Request . Ví dụ sau sẽ cho thấy nó hoạt động thế nào.

<script>
	function searchSales()
	{
		var empID = $F('lstEmployees');
		var y = $F('lstYears');
		var url = 'http://yourserver/app/get_sales';
		var pars = 'empID=' + empID + '&year=' + y;
		

var myAjax = new Ajax.Request( url, { method: 'get', parameters: pars, onComplete: showResponse });

} function showResponse(originalRequest) { //put returned XML in the textarea $('result').value = originalRequest.responseText; } </script> <select id="lstEmployees" size="10" onchange="searchSales()"> <option value="5">Buchanan, Steven</option> <option value="8">Callahan, Laura</option> <option value="1">Davolio, Nancy</option> </select> <select id="lstYears" size="3" onchange="searchSales()"> <option selected="selected" value="1996">1996</option> <option value="1997">1997</option> <option value="1998">1998</option> </select> <br><textarea id=result cols=60 rows=10 ></textarea>

Bạn có thể thấy được tham số thứ 2 được truyền cho phương thức khởi tạo (constructor) của đối tượng Ajax.Request hay không? Tham số {method: 'get', parameters: pars, onComplete: showResponse} thể hiện một đối tượng vô danh trong phần chú thích ngữ nghĩa (a.k.a. JSON). Điều này có nghĩa là chúng ta đang truyền 1 đối tượng có 1 thuộc tính là method chứa chuỗi 'get', và một thuộc tính khác là parameters chứa các chuỗi truy vấn của yêu cầu HTTP (HTTP request), và một onComplete thuộc tính/phương thức chứa hàm showResponse.

Có thể có thêm một số thuộc tính nữa mà bạn có thể định nghĩa trong đối tượng này, như asynchronous, có thể là true hoặc false và xác định nếu lời gọi của AJAX đến máy chủ sẽ được thực hiện không đồng bộ (giá trị mặc định là true.)

Tham số này định nghĩa một số tùy chọn cho lời gọi AJAX. Trong phần ví dụ, chúng ta đã gọi url trong phần tham số thứ 1 thông qua lệnh HTTP GET, truyền chuỗi truy vấn chứa trong biến pars, và đối tượng Ajax.Request sẽ gọi hàm showResponse khi nó kết thúc việc nhận phản hồi.

Như bạn có thể đã biết rằng XMLHttpRequest thông báo tiến trình trong suốt quá trình gọi HTTP. Tiến trình này có thể cung cấp 4 bậc khác nhau: Loading, Loaded, Interactive, hoặc Complete. You Bạn có thể làm cho đối tượng Ajax.Request gọi một hàm tùy ý trong bất cứ bậc nào, Complete là phần thông dụng nhất. Để xác định hàm cho đối tượng, đơn giản chỉ cần cung cấp thuộc tính/phương thức onXXXXX trong phần lựa chọn yêu cầu, như onComplete trong ví dụ của chúng ta. Hàm mà bạn truyền vào sẽ được gọi bởi đối tượng với 2 tham số, tham số thứ nhất là đối tượng XMLHttpRequest (a.k.a. XHR), tham số thứ hai sẽ là header của HTTP, phản hồi X-JSON (nếu có tồn tại). the second one will be the evaluated X-JSON response HTTP header (if one is present). Bạn có thể sử dụng XHR để lấy dữ liệu trả về và có thể kiểm tra xem thuộc tính status mà sẽ chứa các mã kết quả HTTP của lệnh gọi. X-JSON header rất hữu ích khi bạn muốn trả về một số mã lệnh nào đó hay dữ liệu dưới định dạng JSON.

Hai lựa chọn hấp dẫn khác có thể được dùng để xử lý các kết quả. Bạn có thể chỉ định lựa chọn onSuccess như một hàm có thể được gọi khi AJAX gọi thi hành mà không có lỗi xảy ra. , và ngược lại lựa chọn onFailure có thể là hàm để được gọi khi lỗi máy chủ xảy ra. Giống như là các hàm onXXXXX, 2 hàm này sẽ được gọi để truyền XHR , trong có có hàm gọi AJAX và X-JSON header.

Ví dụ của chúng ta không xử lý phản hồi XML với bất kì cách thức hấp dẫn nào cả. Chúng ta chỉ xuất XML ra vùng văn bản. Cách sử dụng tiêu biểu của phản hồi này có thể tìm những thông tin cần thiết bên trong XML và cập nhật một thành phần trang, hoặc có thể một số loại biến đổi XSLT để tạo ra mã HTML trong trang.

Trong phiên bản 1.5.0, một mẫu dùng để điều khiển các sự kiện gọi lại(event callback handling) được giới thiệu. Nếu bạn có mã lệnh mà phải luôn xử lý một sự kiện đặc biệt nào đấy, mặc cho hàn AJAX nào được gọi, bạn đều có thể sử dụng đối tượng mới này Ajax.Responders.

Cứ cho rằng bạn muốn thể hiện một số hiển thị bằng lời gọi AJAX khi nó đang trong tiến trình, ví dụ như xoay icon hay là một vài thứ khác. Bạn có thể sử dụng 2 phần điều khiển sự kiện toàn cục để giúp bạn. Một cái là để biểu diễn icon khi lời gọi đầu tiên bắt đầu và một cái khác sẽ dấu icon khi lời gọi kết thúc. Xem ví dụ dưới đây.

<script>
	var myGlobalHandlers = {
		onCreate: function(){
			Element.show('systemWorking');
		},

		onComplete: function() {
			if(Ajax.activeRequestCount == 0){
				Element.hide('systemWorking');
			}
		}
	};

	Ajax.Responders.register(myGlobalHandlers);
</script>

<div id='systemWorking'><img src='spinner.gif'>Loading...</div>
	

For more complete explanations, see the Ajax.Request reference and the options reference.

toc

Sử dụng lớp Ajax.Updater

Nếu bạn có một máy chủ đầu cuối có thể trả về thông tin dưới dạng HTML, thư viện sẽ làm mọi việc dễ dàng hơn cho bạn với lớp Ajax.Updater. Với lớp này bạn có thể xách định thành phần nào sẽ được nhận mã HTML trả về từ lời gọi AJAX. Ví dụ sau đây sẽ làm rõ hơn điều này.

<script>
	function getHTML()
	{
		var url = 'http://yourserver/app/getSomeHTML';
		var pars = 'someParameter=ABC';
		

var myAjax = new Ajax.Updater( 'placeholder', url, { method: 'get', parameters: pars });

} </script> <input type=button value=GetHtml onclick="getHTML()"> <div id="placeholder"></div>

Như bạn thấy, mã lệnh trông rất giống với ví dụ trước, trừ một ngoại lệ của hàm onComplete và id của thành phần được truyền cho phương thức khởi tạo. Hãy thay đổi mã lệnh một tí để xem nó có thể điều khiển được lỗi của máy chủ trên máy khách thế nào.

Chúng ta sẽ thêm vào một số tùy chọn nữa chọn lời gọi, để chỉ định một hàm để bắt lỗi. Điều này được thực hiện bằng cách sử dụng lựa chọn onFailure . Chúng ta cũng sẽ chỉ định placeholder chỉ được nhiều hơn khi thao tác thành công. Để đạt được điều này chúng ta phải phải thay đổi 1 tham số từ 1 id đơn giản của phần tử đến 1 đối tượng với 2 thuộc tính, success (được sử dụng khi tất cả đều thành công) và failure (được sử dụng khi có lỗi). Chúng ta sẽ không sử dụng thuộc tính failure trong ví dụ, chỉ có hàm reportError bên trong lựa chọn onFailure.

<script>
	function getHTML()
	{
		var url = 'http://yourserver/app/getSomeHTML';
		var pars = 'someParameter=ABC';
		

var myAjax = new Ajax.Updater( {success: 'placeholder'}, url, { method: 'get', parameters: pars, onFailure: reportError });

} function reportError(request) { alert('Xin lỗi ! Có lỗi xảy ra.'); } </script> <input type=button value=GetHtml onclick="getHTML()"> <div id="placeholder"></div>

Nếu máy chủ của bạn trả về mã JavaScript cùng với mã HTML, đối tượng Ajax.Updater có thể định giá trị mã JavaScript đấy. Để lấy một tượng để nhận phản hồi dưới dạng mã JavaScript, bạn đơn giản chỉ thêm evalScripts: true; vào danh sách thuộc tính trong tham số cuối cùng của đối tượng khởi tạo. Nhưng ở đây có 1 lỗ hổng. Những khối mã này sẽ không được thêm vào mã của trang. Với tên tùy chọn evalScripts gợi ý rằng những mã này sẽ được định giá trị. Thế thì có khác biệt gì? Hãy giả định rằng URL được yêu cầu như sau :

<script language="javascript" type="text/javascript">
	function sayHi(){
		alert('Hi');
	}
</script>

<input type=button value="Click Me" onclick="sayHi()">
			

Trừ trường hợp bạn đã thử nó trước, bạn biết nó sẽ không chạy. Lý do là khối mã lệnh sẽ bị định giá trị, và việc định giá trị của mã như trên sẽ không tạo ra một hàm nào mang tên sayHi. Nó sẽ chẳng làm gì cả. Để tạo hàm này chúng ta cần thay đổi mã lệnh để khởi tạo hàm. Xem bên dưới.

<script language="javascript" type="text/javascript">
	

sayHi = function(){ alert('Hi'); };

</script> <input type=button value="Click Me" onclick="sayHi()">

Ghi chú rằng trong ví dụ trước chúng ta không sử dụng từ khóa var để khai báo các biến. Làm như thế sẽ tạo ra một đối tượng hàm mang tính cục bộ đối với khối mã lệnh (ít nhất thì cũng trong IE). Không có từ khoá var đối tượng hàm sẽ có phạm vi hoạt động trong cửa sổ đó, và đó là điều chúng ta muốn.

Để có được giải thích rõ ràng hơn, hãy xem Ajax.Updater referenceoptions reference.

toc

"?" và □ là cái gì?

Khi bạn viết mẫu thử 1 vài script để cập nhật trang bằng cách sử dụng đối tượng Ajax.Updater, và nó hoạt động rất tốt. Nó vẫn tốt cho đến khi bạn chạy script của mình với dữ liệu thật đột nhiên trong các chuỗi cập nhật xuất hiện những dấu '?' và '□' hay những dấu hiệu lạ khác tại những chỗ không phải là tiếng Anh chuẩn.

Điều nghi ngờ đầu tiên của bạn là prototype.js. Nhưng khoang hãy đổ lỗi cho nó. Hãy hỏi xem là bạn đã thật sự hiểu về mã kí tự(character encoding), mã trang và cách mà trình duyệt xử lý nó hay chưa?

Sau đây tôi sẽ trình bày một cách rõ ràng về vấn đề này, và cho bạn một số gợi ý để bạn có thể bắt đầu chỉnh sửa cho phù hợp với yêu cầu của mình.

Đơn giản là hãy làm theo cách sau: hãy cho trình duyệt những gì mà nó muốn bạn cho nó. Ví dụ: nếu bạn cập nhật trang chứa các kí tự Unicode/UTF-8 thì hãy cho trình duyệt biết về điều ấy.

Hãy bắt đầu với 1 trường hợp đơn giản khi bạn cập nhật trang với văn bạn ở dạng HTML tĩnh nằm trên server. Khi tạo ra tập tin đó, tùy vào công cụ biên tập của bạn mà rất có thể tập tin sẽ được lưu ở dạng ANSI(non-Unicode). Điều này là mặc định ở 1 số công cụ biên tập, đặc biệt là các công cụ biên tập mã nguồn vì kích thước tập tin sẽ nhỏ hơn, và cũng rất hiếm để có kí tự Unicode trong mã nguồn.

Giả sử bạn có tập tin sau tên là static-content.html trên server. Bạn lưu nó dưới dạng ANSI.

<div>
	Hi there, José. Yo no hablo español.
</div>

Trang của bạn sẽ cập nhật bằng việc sử dụng vài dòng mã sau đây.

<script>
	function updateWithFile(){
		var url = 'static-content.html';
		var pars = '';
		var myAjax = new Ajax.Updater(
				'placeholder', url, 
				{method: 'get', parameters: pars});
	}
</script>
<div id="placeholder">(this will be replaced)</div>
<input id="btn" value="Test With Static File" 
                 onclick="updateWithFile()" type="button"/>

Khi bạn nhấn nút, tập tin sẽ được gọi nhưng những kí tự không phải tiếng Anh sẽ được thay thế bằng dấu ? và những kí tự khác. Nó sẽ trông giống như "Hi there, Jos?. Yo no hablo espa?ol." hay "Hi there, Jos?Yo no hablo espa?", tùy vào trình duyệt của bạn.

Trong trường hợp này thì chỉ cần lưu tập tin lại với dạng phù hợp. Hãy lưu nó lại ở dạng UTF-8 và chạy lại. Bạn sẽ thấy rằng nó sẽ hiển thì đúng(bạn nhớ refresh lại trình duyệt để loại bỏ cache)

Nếu HTML mà bạn dùng không phải là dữ liệu tính, và nếu nó được tạo ra bởi một số framework (như ASP.NET, PHP, Ruby hay Perl,), hãy chắc chắn rằng mã tạo ra HTML phải ở dạng phù hợp bao gồm cả HTTP headers. Mỗi hệ cơ sở đều có cách riêng để giải quyết vấn đề này, nhưng đều tương tự nhau cả.

Ví dụ trong ASP.NET bạn có thể xác lập trong web.config

<globalization requestEncoding="utf-8" responseEncoding="utf-8" />

Trong ASP 3.0 bạn sử dụng dòng mã sau.

Response.CodePage = 65001
Response.CharSet = "utf-8" 

Trong PHP, cú pháp để thêm vào header trông như sau.

<?php header('Content-Type: text/html; charset=utf-8'); ?>

Trong trường hợp, mục đích cuối cùng của bạn là để có HTTP header sau gởi cùng với yêu cầu.

Content-Type: text/html; charset=utf-8 

Chúng ta sử dụng UTF-8 trong ví dụ phía trên, nhưng nếu bạn cần những thiết lập khác bạn có thể dễ dàng thay đổi.

Enumerating... Wow! Damn! Wahoo!

Chúng ta đã rất quen thuộc với vòng lặp. Bạn biết đấy, tạo ra một mảng, thêm vào nó các phần tử cùng type, tạo một cấu trúc lặp (for, foreach, while, repeat, ...), truy cập mỗi phần tử một cách tuần tự, bằng số chỉ vị trí của nó, sau đó thì thao tác gì đấy với các phần tử.

Khi bạn nghĩ về nó, hầu hết bạn đều có một mảng trong mã lệnh của bạn, có nghĩa rằng bạn sẽ sử dụng mảng đó trong 1 vòng lặp sớm hay muộn. Sẽ không tốt hơn sao nếu đối tượng mảng có nhiều chức năng hơn để thao tác với các vòng lặp này. Và đúng thế, nó sẽ hay hơn rất nhiều. Và nhiều ngôn ngữ lập trình cung cấp những chức năng như thế cho các mảng hoặc những cấu trúc tương tự (như là tập hợp, danh sách)

Và, ngỡ ra rằng prototype.js cho chúng ta đối tượng Enumerable, đối tượng này khởi tạo một loạt các mánh khóe giúp chúng ta thao tác với dữ liệu lặp. Thư viện prototype.js tiến xa hơn 1 bước nữa và mở rộng lớp Array với tất cả các phương thức của Enumerable.

toc

Vòng lặp, theo type của Ruby

Trong javascript chuẩn, nếu bạn muốn thể hiện tuần tự các phần tử của một mảng, bạn phải viết rất đầy đủ như sau.

<script>
	function showList(){
		var simpsons = ['Homer', 'Marge', 'Lisa', 'Bart', 'Meg'];

for(i=0;i<simpsons.length;i++){ alert(simpsons[i]); }

} </script> <input type="button" value="Show List" onclick="showList();" >

Với người bạn mới, prototype.js, bạn có thể viết lại vòng lặp này như sau.

	function showList(){
		var simpsons = ['Homer', 'Marge', 'Lisa', 'Bart', 'Meg'];

simpsons.each( function(familyMember){ alert(familyMember); });

}

Bạn có thể nghĩ rằng "cần gì phải làm to chuyện, chỉ là nồi cũ vung mới thôi mà" Hãy khoan đã nào, ở ví dụ trên, đúng là chẳng có gì đặc biết cả. Sẽ chẳng có gì là thay đổi với một ví dụ đơn giản. Nhưng dù sao thì hãy cứ đọc tiếp đi nào.

Trước khi chúng ta tiếp tục, bạn có thấy là hàm này được truyền dưới dạng tham số cho phương thức each hay không? Hãy bắt đầu thay nó bằng một hàm lặp.

toc

Vài điều về mảng

Như chúng ta đã đề cập ở trên, việc tất cả các phần tử trong một mảng có cùng một type, cùng thuộc tính và phương thức là rất thông dụng. Hãy xem làm thế nào chúng ta có thể tận dụng ích lợi của các hàm lặp với các mảng mới này.

Tìm một phần tử phù hợp với tiêu chuẩn.

<script>
	function findEmployeeById(emp_id){
		var listBox = $('lstEmployees')
		var options = listBox.getElementsByTagName('option');
		options = $A(options);
		var opt = options.find( function(employee){
			return (employee.value == emp_id);
		});
		alert(opt.innerHTML); // hiển thị tên nhân viên
	}
</script>

<select id="lstEmployees" size="10" >
	<option value="5">Buchanan, Steven</option>
	<option value="8">Callahan, Laura</option>
	<option value="1">Davolio, Nancy</option>
</select>

<input type="button" value="Find Laura" onclick="findEmployeeById(8);" > 
			

Bây giờ hãy thêm 1 mánh nữa nào. Xem làm sao chúng ta có thể lọc ra các phần tử trong các mảng, và chỉ lấy về 1 thành viên mong muốn của mỗi phần tử.

<script>
	function showLocalLinks(paragraph){
		paragraph = $(paragraph);
		var links = $A(paragraph.getElementsByTagName('a'));
		//find links that do not start with 'http'
		var localLinks = links.findAll( function(link){
			var start = link.href.substring(0,4);
			return start !='http';
		});
		//now the link texts
		var texts = localLinks.pluck('innerHTML');
		//get them in a single string
		var result = texts.inspect();
		alert(result);
	}

</script>
<p id="someText">
	This <a href="http://othersite.com/page.html">text</a> has 
	a <a href="#localAnchor">lot</a> of 
	<a href="#otherAnchor">links</a>. Some are 
	<a href="http://wherever.com/page.html">external</a>
	and some are <a href="#someAnchor">local</a>
</p>
<input type=button value="Find Local Links" onclick="showLocalLinks('someText')">
			

Cần phải luyện tập nhiều thì mới có thể hoàn toàn quen thuộc với cú pháp này được. Hãy xem qua EnumerableArray để tham khảo toàn bộ các hàm.

toc

Tài liệu tra cứu cho prototype.js
Phần mở rộng cho các lớp JavaScript

Một trong số các cách mà thư viện prototype.js sử dụng để thêm các chức năng đó là mở rộng các lớp đã có sẵn của JavaScript.

toc

Phần mở rộng cho lớp Object

Phương thức
Loại
Các tham số
Mô tả

extend(destination, source)
static
destination: bất cứ đối tượng nào, source: bất cứ đối tượng nào
Cung cấp 1 cách để khởi tạp sự kế thừa bằng cách sao chép toàn bộ các thuộc tính và phương thức từ source đến destination.

inspect(targetObj)
static
targetObj: bất cứ đối tượng nào
Trả về một chuỗi dễ đọc biểu diễn cho targetObj. Nó mặc định là giá trị trả về của toString nếu đối tượng được gọi không định nghĩa phương thức inspect .

toc

Phần mở rộng cho lớp Number

Phương thức
Loại
Các tham số
Mô tả

toColorPart()
instance
(none)
Trả về con số dưới dạng thập lục phân. Hữu dụng khi muốn chuyển đổi thành phần màu RGB bên trong mã HTML.

succ()
instance
(none)
Trả về số kế tiếp. Hàm này được sử dụng trong hoàn cảnh liên quan đến vòng lặp.

times(iterator)
instance
iterator: đối tượng hàm phù hợp với Function(index)
Gọi lặp lại hàm iterator bằng cách truyền chỉ số hiện tại cho tham số index.

Ví dụ dưới đây sẽ hiển thị hộp cách báo từ 0 đến 9.

<script>
	function demoTimes(){
		var n = 10;
		n.times(function(index){
			alert(index);
		});
		/***************************
		 * you could have also used: 
		 *           (10).times( .... ); 
		 ***************************/
	}

</script>

<input type=button value="Test Number.times()" onclick="demoTimes()">
			

toc

Phần mở rộng cho lớp Function

Phương thức
Loại
Các tham số
Mô tả

bind(object)
instance
object: đối tượng sở hữu phương thức
Trả về một khởi tạo của hàm có liên kết với đối tượng hàm (phương thức)chủ. Hàm trả về sẽ có cùng các tham số như hàm gốc.

bindAsEventListener(object)
instance
object: đối tượng sở hữu phương thức
Trả về một khởi tạo của hàm có liên kết với đối tượng hàm (phương thức)chủ. Hàm trả về sẽ có đối tượng của sự kiện hiện tại là tham số của nó.

Hãy xem những phần mở rộng này trong thực tế.

<input type=checkbox id=myChk value=1> Test?
<script>
	//declaring the class
	var CheckboxWatcher = Class.create();

	//định nghĩa toàn bộ việc khởi tạo lớp
	CheckboxWatcher.prototype = {

	   initialize: function(chkBox, message) {
			this.chkBox = $(chkBox);
			this.message = message;
			//assigning our method to the event
			

this.chkBox.onclick = this.showMessage.bindAsEventListener(this);

}, showMessage: function(evt) { alert(this.message + ' (' + evt.type + ')'); } }; var watcher = new CheckboxWatcher('myChk', 'Changed'); </script>

toc

Phần mở rộng cho lớp String

Phương thức
Loại
Các tham số
Mô tả

stripTags()
instance
(none)
Trả về một chuỗi mà không có thẻ HTML hay XML

stripScripts()
instance
(none)
Trả về chuỗi mà không có các khối <script />

escapeHTML()
instance
(none)
Trả về chuỗi với các kí tự HTML đã được đánh dấu

unescapeHTML()
instance
(none)
Ngược lại với escapeHTML()

extractScripts()
instance
(none)
Trả về một đối tượng Array chứa các khối <script /> được tìm thấy với chuỗi.

evalScripts()
instance
(none)
Định giá trị của khối <script /> được tìm thấy trong chuỗi.

toQueryParams()
instance
(none)
Chia câu truy vấn thành các mảng có chỉ số bằng tên tham số (giống một mảng băm).

parseQuery()
instance
(none)
Giống như toQueryParams().

toArray()
instance
(none)
Chia chuỗi ra thành các mảng chứa các kí tự.

camelize()
instance
(none)
Chuyển đổi chuỗi không có dấu ngang thành chuỗi camelCaseString. Hàm này hữu dụng khi viết mã liên quan đến thuộc tính type, ví dụ như.

toc

Phần mở rộng cho lớp Array

Để bắt đầu, lớp Array mở rộng lớp Enumerable, do đó tất cả các phương thức tiện lợi trong đối tượng Enumerable đều có sẵn. Bên cạnh đó, những phương thức được liệt kê dưới đây cũng được khởi tạo.

Phương thức
Loại
Các tham số
Mô tả

clear()
instance
(none)
Làm rỗng mảng và trả lại chính mảng ấy.

compact()
instance
(none)
Trả lại mảng không chứa phần tử null hoặc undefined nào. Phương thức này không làm ảnh hưởng gì đến mảng.

first()
instance
(none)
Trả về phần tử đầu tiên của mảng.

flatten()
instance
(none)
Trả về mảng một chiều. Điều này được thực hiện bằng cách tìm mỗi các phần tử của mảng và thậm chí là các mảng. Sau đó thì hợp tất cả các phần tử vào mảng được trả về theo type truy hồi.

indexOf(value)
instance
value: cái bạn cần tìm.
Trả về vị trí của value được cho nếu nó được tìm thấy trong mảng. Trả về -1 nếu value không có trong mảng.

inspect()
instance
(none)
Ghi đè lên để trả về một chuỗi có định dạng đẹp biểu diễn cho mảng đó bằng chính những phần tử của nó.

last()
instance
(none)
Returns the last element of the array.

reverse([applyToSelf])
instance
applyToSelf: xác định nếu mảng này cần phải đảo ngược hay không.
Trả về mảng với vị trí đảo ngược. Nếu không có tham số nàm được cho hoặc nếu tham số có giá trị là true thì mảng cũng sẽ bị đảng ngược. Ngoài ra mảng sẽ được giữa nguyên.

shift()
instance
(none)
Trả về phần tử đầu tiên của mảng, xóa nó ra khỏi mảng, giảm chiều dài của mảng đi 1.

without(value1 [, value2 [, .. valueN]])
instance
value1 ... valueN: giá trị sẽ được bỏ qua nếu nó có trong mảng.
Trả về mảng mà không chứa các phần tử đã được liệt kê trong danh sách tham số.

toc

Phần mở rộng cho đối tượng DOMdocument

Phương thức
Loại
Các tham số
Mô tả

getElementsByClassName(className [, parentElement])
instance
className: tên của lớp CSS có liên quan đến các phần tửname of a CSS class associated with the elements, parentElement: đối tượng hay id của phần tử mà có chứa phần tử sẽ được nhận về.
Trả về tất cả các phần tử có liên quan đến lớp CSS được cho. Nếu không có id của parentElement thì toàn bộ phần thân văn bản sẽ được tìm kiếm.

toc

Phần mở rộng cho đối tượng Event

Phương thức
Loại
Các tham số
Mô tả

KEY_BACKSPACE
Number
8: Hằng số. Mã cho phím Backspace.

KEY_TAB
Number
9: Hằng số. Mã cho phím Tab.

KEY_RETURN
Number
13: Hằng số. Mã cho phím Return.

KEY_ESC
Number
27: Hằng số. Mã cho phím Esc.

KEY_LEFT
Number
37: Hằng số. Mã cho phím mũi tên trái.

KEY_UP
Number
38: Hằng số. Mã cho phím mũi tên lên.

KEY_RIGHT
Number
39: Hằng số. Mã cho phím mũi tên phải.

KEY_DOWN
Number
40: Hằng số. Mã cho phím mũi tên xuống.

KEY_DELETE
Number
46: Hằng số. Mã cho phím Delete.

observers:
Array
Liệt kê danh sách các bộ theo dõi . Đây là một phần chi tiết khởi tạo bên trong của đối tượng.

Phương thức
Loại
Các tham số
Mô tả

element(event)
static
event: đối tượng Event
Trả về phần tử của sự kiện ban đầu.

isLeftClick(event)
static
event: đối tượng Event
Trả về true nếu phím trái chuột được nhấn.

pointerX(event)
static
event: đối tượng Event
Trả về tọa độ x của con trỏ chuột trên trang hiện hành.

pointerY(event)
static
event: đối tượng Event
Trả về tọa độ y của con trỏ chuột trên trang hiện hành.

stop(event)
static
event: đối tượng Event
Sử dụng hàm này để thoát khỏi hành vi mặc định của sự kiện, và ngăn không cho nó được truyền đi.

findElement(event, tagName)
static
event: đối tượng Event, tagName: tên của thẻ mong muốn.
Duyệt lên trên cây DOM, tìm kiếm phần tử đầu tiên với tên thẻ được cho, bắt đầu tự phần tử của sự kiện ban đầu.

observe(element, name, observer, useCapture)
static
element: đối tượng hay id, name: tên sự kiện (như 'click', 'load',... ), observer: hàm để điều khiển sự kiện , useCapture: nếu là true, điều khiển sự kiện trong phần capture và nếu là false thì là trong phần bubbling.
Thêm hàm điều khiển sự kiện vào sự kiện.

stopObserving(element, name, observer, useCapture)
static
element: đối tượng hay id, name: tên sự kiện (như 'click'), observer: hàm để điều khiển sự kiện , useCapture: nếu là true, điều khiển sự kiện trong phần capture và nếu là false thì là trong phần bubbling.
Xóa hàm điều khiển sự kiện ra khỏi sự kiện.

_observeAndCache(element, name, observer, useCapture)
static
Phương thức riêng, không cần quan tâm đến nó.

unloadCache()
static
(none)
Phương thức riêng, không cần quan tâm đến nó. Xóa toàn bộ các bộ theo dõi ra khỏi bộ nhớ.

Hãy xem làm sao để sử dụng đối tượng này để thêm bộ điều khiển sử kiện, để nạp sự kiện của đối tượng window.

<script>
	Event.observe(window, 'load', showMessage, false);

	function showMessage() {
	  alert('Page loaded.');
	}
</script>			
			

toc

Các lớp và đối tượng mới được định nghĩa bởi prototype.js

Thư viện hỗ trợ bạn bằng cách cung cấp nhiều đối tượng được khởi tạo để hỗ trợ cho thiết kế hướng đối tượng và hỗ trợ các chức năng tổng quát.

toc

Đối tượng PeriodicalExecuter

Đối tượng này cung cấp phép logic để gọi nhiều lần 1 hàm, với số lượng thời gian được cho.

Phương thức
Loại
Các tham số
Mô tả

[ctor](callback, interval)
constructor
callback: hàm không có tham số, interval:số giây
Tạo một khởi tạo của đối tượng mà gọi lặp lại hàm.

Thuộc tính
Loại
Mô tả

callback
Function()
Hàm sẽ được gọi. Không có tham số nào sẽ được truyền vào.

frequency
Number
Khoảng thời gian (giây)

currentlyExecuting
Boolean
Xác định xem nếu hàm đang được gọi

toc

Đối tượng Prototype

Đối tượng Prototype không có vai trò quan trọng gì ngoài việc khai báo phiên bản của thư viện đang sử dụng.

Thuộc tính
Loại
Mô tả

Version
String
Phiên bản của thư viện

emptyFunction
Function()
Một đối tượng hàm rỗng

K
Function(obj)
Một đối tượng hàm trả về tham số được cho.

ScriptFragment
String
Biểu thức chính qui dùng để xác định mã lệnh

toc

Đối tượng Enumerable

Đối tượng Enumerable cho phép viết mã gọn gàng hơn khi phải lặp lại nhiều phần tử trong cấu trúc tương tự như danh sách.

Có rất nhiều đối tượng thừa kế đối tượng Enumerable để sử dụng hiệu quả hơn giao diện(interface) của nó.

Phương thức
Loại
Các tham số
Mô tả

each(iterator)
instance
iterator: một đối tượng hàm có dạng Function(value, index)
Gọi lặp lại hàm được cho, truyền mỗi phần tử trong danh sách vào tham số thứ 1, và vị trí của phần tử vào tham số thứ 2.

all([iterator])
instance
iterator: một đối tượng hàm có dạng Function(value, index)
Hàm này dùng để kiểm tra toàn bộ các giá trị bằng cách sử dụng hàm được truyền. all sẽ trả về false nếu hàm lặp trả về false hoặc null cho bất cử phần tử nào. Ngược lại, nó sẽ trả về true. Nếu không có iterator nào được truyền vào, thì sự kiểm tra này sẽ tốt nếu bản thân phần tử là khác false hoặc null. Bạn có thể hiểu đơn giản như sau "kiểm tra tất cả các phần tử mà không phải là false."

any(iterator)
instance
iterator: một đối tượng hàm có dạng Function(value, index)(tùy chọn).
Hàm này dùng để kiểm tra toàn bộ các giá trị bằng cách sử dụng hàm được truyền. any trả về true nếu hàm lặp không trả về false hoặc null cho bất cứ phần tử nào. Ngược lại, nó sẽ trả về false . Nếu không có iterator nào được truyền vào, thì sự kiểm tra này sẽ tốt nếu bản thân phần tử là khác false hoặc null.Bạn có thể hiểu đơn giản như sau "kiểm tra bất cứ phần tử mà không phải là false."

collect(iterator)
instance
iterator: một đối tượng hàm có dạng Function(value, index)
Gọi hàm lặp cho mỗi phần tử bên trong tập hợp và trả về mỗi kết quả trong một Array, một kết quả cho mỗi phần tử bên trong tập hợp theo cách tuần tự.

detect(iterator)
instance
iterator: một đối tượng hàm có dạng Function(value, index)
Gọi hàm lặp cho mỗi phần tử trong tập hợp và trả về phần tử đầu tiên khiến cho hàm lặp trả về giá trị true (hoặc không false). Nếu không có phần tử nào trả về giá trị true thì detect trả về null.

entries()
instance
(none)
Giống như toArray().

find(iterator)
instance
iterator:một đối tượng hàm có dạng Function(value, index)
Giống như detect().

findAll(iterator)
instance
iterator:một đối tượng hàm có dạng Function(value, index)
Gọi hàm lặp cho mỗi phần tử trong tập hợp và trả về một Array với tất cả các phần tử mà làm cho hàm lặp trả về giá trị true. Hàm này ngược lại với hàm reject().

grep(pattern [, iterator])
instance
pattern: một đối tượng RegExp dùng để so sánh các phần tử, iterator: một đối tượng hàm có dạng Function(value, index)
Kiểm tra giá trị chuỗi của mỗi phần tử trong tập hợp với pattern của biểu thức chính qui (regular expression). Hàm này sẽ trả về một Array chứa toàn bộ các phần tử phù hợp với biểu thức chính qui. Nếu hàm lặp được truyền thì Array sẽ chứa kết quả của lời gọi từ hàm lặp này tương ứng với mỗi phần tử.

include(obj)
instance
obj: bất cứ đối tượng nào
Cố gắng tìm đối tượng được cho trong tập hợp. Trả về true nếu đối tượng được tìm thấy, false nếu ngược lại.

inject(initialValue, iterator)
instance
initialValue: bất cứ đối tượng nào được dùng như giá trị khởi đầu, iterator: một đối tượng hàm có dạng Function(accumulator, value, index)
Kết hợp tất cả các phần tử trong tập hợp bằng cách sử dụng hàm lặp. Bộ lặp (iterator) sẽ được gọi để truyền kết quả của vòng lặp trước vào bộ đếm (accumulator). Vòng lặp đầu tiên lấy initialValue trong tham số bộ đếm . Kết quả cuối cùng là cái cuối cùng trả về giá trị.

invoke(methodName [, arg1 [, arg2 [...]]])
instance
methodName: tên của phương thức sẽ được gọi bởi mỗi phần tử, arg1..argN: các tham số sẽ được truyền vào phương thức.
Gọi các phương thức được xác định bởi Phương thứcName đối với mỗi phần tử của tập hợp , truyền các tham số đã cho (arg1 ... argN), và trả kết quả về trong đối tượng Array.

map(iterator)
instance
iterator: một đối tượng hàm có dạng Function(value, index)
Giống như collect().

max([iterator])
instance
iterator:một đối tượng hàm có dạng Function(value, index)(tùy chọn)
Trả về phần tử có có giá trị lớn nhất trong tập hợp hoặc kết quả lớn hoặc kết quả lớn nhất có được từ lời gọi các hàm lặp đối với mỗi phần tử nếu hàm lặp được chỉ định.

member(obj)
instance
obj: bất cứ đối tượng nào
Giống như include().

min([iterator])
instance
iterator: một đối tượng hàm có dạng Function(value, index)
Trả về phần tử có có giá trị nhỏ nhất trong tập hợp hoặc kết quả lớn hoặc kết quả nhỏ nhất có được từ lời gọi các hàm lặp đối với mỗi phần tử nếu hàm lặp được chỉ định.

partition([iterator])
instance
iterator:một đối tượng hàm có dạng Function(value, index)
Trả về Array chứa 2 mảng khác. Mảng đầu tiên chứa toàn bộ các phần tử mà làm cho hàm lặp trả về giá trị true và mảng thứ 2 chứ các phần tử còn lại. Nếu hàm lặp không được chỉ định, thì mảng đầu tiên sẽ chứa các phần tử có giá trị true và mảng thứ 2 chứa các phần tử còn lại.

pluck(propertyName)
instance
propertyName: tên thuộc tính sẽ được đọc bởi các phần tử. Và cũng có thể là vị trí của các phần tử
Trả về giá trị của thuộc tính xác định bởi propertyName ứng với mỗi phần tử trong tập hợp và trả về kết quả cho một đối tượng Array.

reject(iterator)
instance
iterator: một đối tượng hàm có dạng Function(value, index)
Gọi hàm lặp cho mỗi đối tượng trong tập hợp và trả về một Array với tất cả các phần tử làm cho hàm lặp trả về giá trị false. Hàm này ngược với hàm findAll().

select(iterator)
instance
iterator: một đối tượng hàm có dạng Function(value, index)
Giống như findAll().

sortBy(iterator)
instance
iterator:một đối tượng hàm có dạng Function(value, index)
Trả về một Array với tất cả các phần tử được sắp xếp dựa và kết quả của gọi của hàm lặp.

toArray()
instance
(none)
Trả về một Array với tất cả các phần tử của tập hợp.

zip(collection1[, collection2 [, ... collectionN [,transform]]])
instance
collection1 .. collectionN: những tập hợp cần được hợp lại, transform: một đối tượng hàm có dạng Function(value, index)
Kết hợp mỗi tập hợp được cho vào tập hợp hiện tại. Hành động kết hợp này trả về một mảng mới với cùng 1 số lượng phần tử với tập hợp hiện tại và mỗi phần tử là một mảng (hãy gọi nó là mảng con) của những phần tử có cùng vị trí từ những tập hợp được ghép lại. Nếu hàm chuyển đổi (transform function) được chỉ định, thì mỗi mảng con sẽ được chuyển đổi bởi hàm này trước khi được trả về. Ví dụ nhanh : [1,2,3].zip([4,5,6], [7,8,9]).inspect() returns "[ [1,4,7],[2,5,8],[3,6,9] ]"

toc

Đối tượng Hash

Đối tượng Hash khởi tạo một cấu trúc băm (hash structure), ví dụ: một tập hợp của các cặp Key:Value .

Mỗi phần trong đối tượng Hash làm một mảng với 2 phần tử: đầu tiên là key, sau đó là value. Mỗi phần có 2 thuộc tính key và value .

Phương thức
Loại
Các tham số
Mô tả

keys()
instance
(none)
Trả về một Array chứa các key của mọi thành phần.

values()
instance
(none)
Trả về một Array chứa các giá trị của mọi thành phần.

merge(otherHash)
instance
otherHash: đối tượng Hash
Kết hợp đối tượng băm này với đối tượng được truyền vào và trả về một kết quả băm mới.

toQueryString()
instance
(none)
Trả về toàn bộ các thành phần của đối tượng băm dưới dạng chuỗi, giống như chuỗi truy vấn. 'key1=value1&key2=value2&key3=value3'

inspect()
instance
(none)
Ghi đè để trả về một chuỗi có định dạng đẹp biểu diễn hash với các cặp key:value của nó.

toc

Lớp ObjectRange

Kế thừa từ Enumerable

Biểu diễn một vùng các giá trị, với giới hạn trên và dưới.

Thuộc tính
type
Loại
Mô tả

start
(any)
instance
Giới hạn dưới của vùng

end
(any)
instance
Giới hạn dưới của vùng

exclusive
Boolean
instance
Xác định các giới hạn được cho có phải thuộc vùng đó không.

Phương thức
Loại
Các tham số
Mô tả

[ctor](start, end, exclusive)
constructor
start: giới hạn dưới, end: giới hạn trên, exclusive: bao gồm cả giới hạn của vùng?
Tạo một đối tượng vùng, bắt đầu từ start đến end. Cần phải nhớ rằng start và end cần phải là đối tượng của cùng một type và chún phải có một phương thức succ() .

include(searchedValue)
instance
searchedValue: giá trị cần tìm
Kiểm tra xem giá trị được cho có nằm trong vùng hay không. Trả về true hoặc false.

toc

Đối tượng Class

Đối tượng Class được sử dụng khi khai báo các lớp khác trong thư viện Sử dụng đối tượng này khi khai báo một lớp mà được tạo để hỗ trợ phương thức initialize(). Phương thức này được sử dụng như phương thức khởi tạo.

Xem ví dụ phía dưới.

//khai báo lớp
var MySampleClass = Class.create();

//định nghĩ toàn bộ khởi tạo lớp
MySampleClass.prototype = {

   initialize: function(message) {
		this.message = message;
   },

   showMessage: function(ajaxResponse) {
      alert(this.message);
   }
};	

//khởi tạo một đối tượng mới
var myTalker = new MySampleClass('hi there.');
myTalker.showMessage(); //hiển thị thông báo

			

Phương thức
type
Các tham số
Mô tả

create(*)
instance
(any)
Định nghĩa một phương thức khởi tạo cho lớp mới

toc

Đối tượng Ajax

Đối tượng này cung cấp các chức năng AJAX cho nhiều lớp khác.

Phương thức
Loại
Các tham số
Mô tả

activeRequestCount
Number
instance
Số lượng các yêu cầu AJAX hiện đang thực thi.

Phương thức
type
Các tham số
Mô tả

getTransport()
instance
(none)
Trả về một đối tượng XMLHttpRequest

toc

Đối tượng Ajax.Responders

Kế thừa từ Enumerable

Đây là đối tượng duy trì một danh sách các đối tượng sẽ được gọi khi các sự kiện Ajax xảy ra. Bạn có thể sử dụng đối tượng này , ví dụ khi bạn muốn tạo một phương thức điều khiển ngoại lệ toàn cục (global exception handler) cho các thao tác AJAX.

Thuộc tính
type
Loại
Mô tả

responders
Array
instance
Danh sách các đối tượng được đăng kí cho các thông báo về sự kiện AJAX.

Phương thức
Loại
Các tham số
Mô tả

register(responderToAdd)
instance
responderToAdd: đối tượng mà có những phương thức được gọi
Đối tượng được truyền vào tham số responderToAdd phải có những phương thức liên quan đến sự kiện của AJAX (ví dụ onCreate, onComplete, onException, ...). Khi sự kiện tương ứng xảy ra, tất cả các đối tượng đã được đăng ký mà chứa một phương thức phù hợp sẽ được gọi.

unregister(responderToRemove)
instance
responderToRemove: đối tượng sẽ được xóa khỏi danh sách.
Đối tượng được truyền vào tham số responderToRemove sẽ được xóa khỏi danh sách những đối tượng đã được đăng ký.

dispatch(callback, request, transport, json)
instance
callback: tên sự kiện AJAX sẽ được thông báo, request: đối tượng Ajax.Request tương ứng với sự kiện, transport: đối tượng XMLHttpRequest mang lời gọi AJAX , json: X-JSON header để hồi đáp (nếu có)
Duyệt qua danh sách các đối tượng đã được đăng ký để tìm xem có phương thức nào được xác định trong tham sốcallback. Và sau đó những tham số được gọi sẽ được truyền vào 3 tham số còn lại. Nếu lời hồi đáp của AJAX có chứa X-JSON HTTP header với một số thành phần JSON, thi nó sẽ được định giá trị và truyền vào tham số json. Nếu sự kiện là onException, thì tham số transport sẽ có ngoại lệ, và tham sốjson sẽ không được truyền.

toc

Lớp Ajax.Base

Lớp này được sử dụng như lớp nền tảng cho hầu hết các lớp khác được định nghĩa trong đối tượng Ajax.

Phương thức
Loại
Các tham số
Mô tả

setOptions(options)
instance
options: AJAX options
Xác lập options mong muốn cho thao tác AJAX

responseIsSuccess()
instance
(none)
Trả về true nếu thao tác AJAX thành công, ngược lại thì false

responseIsFailure()
instance
(none)
Ngược lại với responseIsSuccess().

toc

Lớp Ajax.Request

Kế thừa từ Ajax.Base

Đóng gói các thao tác AJAX

Thuộc tính
type
Loại
Mô tả

Events
Array
static
Danh sách các sự kiện/tình trạng có khả năng được báo về trong quá trình diễn ra thao tác AJAX. Danh sách chứa: 'Uninitialized', 'Loading', 'Loaded', 'Interactive', và 'Complete'

transport
XMLHttpRequest
instance
Đối tượng XMLHttpRequest có mang thao tách AJAX.

url
String
instance
URL được yêu cầu(request) nhắm đến.

Phương thức
Loại
Các tham số
Mô tả

[ctor](url, options)
constructor
url: url sẽ được mở, options: lựa chọn AJAX
Tạo một khởi tạo của đối tượng sẽ gọi url được chỉ định và sử dụng options. Sự kiện onCreate sẽ được gọi khi phương thức khởi tạo được gọi. Quan trọng: Nó không đáng là gì nếu như url được cho dính dáng đến đến cài đặt bảo mật của trình duyệt. Trong nhiều trường hợp, trình duyệt sẽ không mở url nếu nó không phải từ một máy ( hay tên miền) so với trang hiện tại. Bạn chỉ nên sử dụng những url cục bộ để tránh phải chỉnh sửa hay hạn chế trình duyệt của người dùng.(Cám ơn Clay)

evalJSON()
instance
(none)
Phương thức này thường không được gọi từ bên ngoài. Nó được gọi từ bên trong để định giá trị nội dung của X-JSON HTTP header hiện diện trong hồi đáp của AJAX.

evalResponse()
instance
(none)
Phương thức này thường không được gọi từ bên ngoài. Nếu hồi đáp của AJAX có header Content-type là text/javascript thì phần thân của hồi đáp sẽ được định giá trị và hàm này sẽ được sử dụng.

header(name)
instance
name: HTTP header name
Lấy về nội dung của bất cứ HTTP header nào của hồi đáp AJAX. Chỉ gọi hàm này sau khi lời gọi AJAX đã kết thúc.

onStateChange()
instance
(none)
Phương thức này thường không được gọi từ bên ngoài. Nó sẽ tự gọi chính nó khi trạng thái của lời gọi AJAX thay đổi.

request(url)
instance
url: url cho lời gọi AJAX
Phương thức này thường không được gọi từ bên ngoài. Nó đã được gọi trong khi phương thức khởi tạo được gọi.

respondToReadyState(readyState)
instance
readyState: số biểu diễn trạng thái (1 to 4)
Phương thức này thường không được gọi từ bên ngoài. Nó sẽ tự gọi chính nó khi trạng thái của lời gọi AJAX thay đổi.

setRequestHeaders()
instance
(none)
Phương thức này thường không được gọi từ bên ngoài. Nó được gọi bởi chính đối tượng này để thu tập HTTP header mà sẽ được gởi trong quá trình yêu cầu HTTP (HTTP request).

toc

Đối tượng tham số options

Một phần quan trong trong các thao tác AJAX là tham số options. There's no options class per se. Tất cả các đối tượng sẽ được truyền cho đến khi nó vẫn còn những thuộc tính phù hợp. Việc tạo một đối tượng vô danh chỉ cho lời gọi AJAX là bình thường.

Thuộc tính
type
Mặc định
Mô tả

Phương thức
String
'post'
Phương thức của yêu cầu HTTP

parameters
String
''
danh sách các giá trị được truyền cho yêu cầu

asynchronous
Boolean
true
Xác định xem lời gọi AJAX sẽ được làm bất đồng bộ

postBody
String
undefined
Nội dung sẽ được truyền vào phần thân của yêu cầu trong trường hợp của HTTP POST

requestHeaders
Array
undefined
Danh sách các HTTP header được truyền cho yêu cầu. Danh sách này phải có một số chẵn các mục ,mục mang số lẻ nào cũng là tên của header tùy ý,và mục chẵn tiếp theo đó là giá trị chuỗi của header đó. Ví dụ:['my-header1', 'đây là giá trị', 'my-other-header', 'một giá trị khác']

onXXXXXXXX
Function(XMLHttpRequest, Object)
undefined
Hàm tùy ý sẽ được gọi khi đến sự kiện/trạng thái tương ứng trong quá trình gọi AJAX. Ví dụ var myOpts = {onComplete: showResponse, onLoaded: registerLoaded};. Hàm được dùng sẽ nhận 1 tham số, có chứa đối tượng XMLHttpRequest có mang thao tác AJAX và một tham số khác có chứa hồi đáp HTTP header X-JSON.

onSuccess
Function(XMLHttpRequest, Object)
undefined
Hàm tùy ý sẽ được gọi khi lời gọi AJAX kết thúc thành công. Hàm được dùng sẽ nhận 1 tham số, có chứa đối tượng XMLHttpRequest có mang thao tác AJAX và một tham số khác có chứa hồi đáp HTTP header X-JSON.

onFailure
Function(XMLHttpRequest, Object)
undefined
Hàm tùy ý sẽ được gọi khi lời gọi AJAX kết thúc có lỗi. Hàm được dùng sẽ nhận 1 tham số, có chứa đối tượng XMLHttpRequest có mang thao tác AJAX và một tham số khác có chứa hồi đáp HTTP header X-JSON.

onException
Function(Ajax.Request, exception)
undefined
Hàm tùy ý sẽ được gọi khi có ngoại lệ xảy ra trên máy khách khi gọi AJAX, như hồi đáp,tham số không hợp lệ. Hàm được dùng sẽ nhận 2 tham số, có chứa đối tượng Ajax.Request. Đối tượng này bao gồm các thao tác AJAX và các đối tượng ngoại lệ.

insertion
an Insertion class
undefined
Một lớp sẽ xác định xem nội dung mới sẽ được thêm vào như thế nào. Nó có thể là Insertion.Before, Insertion.Top, Insertion.Bottom, hoặc Insertion.After. Chỉ áp dụng cho các đối tượng Ajax.Updater.

evalScripts
Boolean
undefined, false
Xác định xem các khối mã sẽ được định giá trị khi hồi có hồi đáp hay không. Chỉ áp dụng cho các đối tượng Ajax.Updater.

decay
Number
undefined, 1
Xác định sự chậm trễ trong tần số làm tươi của đối tượng Ajax.PeriodicalUpdater khi hồi đáp nhận được là giống với cái trước đấy. Ví dụ, nếu bạn sử dụng 2, thì sau khi làm có kết quả làm tươi giống với cái trước đó thì đối tượng sẽ phải chờ nhiều gấp 2 lần thời gian cho lần làm tươi tới. Và nếu nó lặp lại, thì lần sau đối tượng phải chờ nhiều gấp 4 lần thời gian, và cứ như thế. Không ghi hoặc sử dụng 1 để tránh sự chậm trễ này.

frequency
Number
undefined, 2
Chu kỳ (không phải tần số) giữa các lần làm tươi . Chỉ áp dụng cho các đối tượng Ajax.PeriodicalUpdater.

toc

Lớp Ajax.Updater

Kế thừa từ Ajax.Request

Được sử dụng khi url được yêu cầu trả về mã HTML, và bạn muốn thêm mã này trực tiếp vào một phần tử xách định trong trang. Bạn có thể sử dụng đối tượng này khi url trả về các khối <mã> mà sẽ được định giá trị khi kết thúc. Sử dụng tùy chọn evalScripts để làm việc với mã lệnh.

Thuộc tính
type
Loại
Mô tả

containers
Object
instance
Đối tượng này có 2 thuộc tính: containers.success sẽ được dùng khi lời gọi AJAX thành công và ngược lại containers.failure sẽ được dùng.

Phương thức
Loại
Các tham số
Mô tả

[ctor](container, url, options)
constructor
container:có thể là id của một phần tử, hoặc chính phần tử đó, hay là một đối tượng có 2 thuộc tính - phần tử (hoặc id) của object.success element (or id) that sẽ được dùng khi lời gọi AJAX thành công, và ngược lại phần tử (id) của object.failure sẽ được dùng. url: url sẽ được mở, options: AJAX options
Tạo một khởi tạo của đối tượng sẽ gọi url sử dụng options được cho.

updateContent()
instance
(none)
Phương thức này thường không được gọi từ bên ngoài. Nó được gọi bởi chính đối tượng đó khi hồi đáp được nhận. Nó sẽ cập nhật phần tử tương ứng với HTML hoặc gọi hàm được truyền vào lựa chọn insertion. Hàm này được gọi với 2 tham số, phần tử sẽ được cập nhật và trả lời.

toc

Lớp Ajax.PeriodicalUpdater

Kế thừa từ Ajax.Base

Hàm này lặp lại việc khởi tạo và sử dụng đối tượng Ajax.Updater để làm tươi một phần tử của trang, hoặc để thực hiện một số nhiệm vụ khác mà lớp Ajax.Updater có thể thực hiện. Xem Ajax.Updater reference để có thêm thông tin.

Thuộc tính
type
Loại
Mô tả

container
Object
instance
Giá trị này sẽ được truyền thẳng vào phương thức khởi tạo của Ajax.Updater.

url
String
instance
Giá trị này sẽ được truyền thẳng vào phương thức khởi tạo của Ajax.Updater.

frequency
Number
instance
Chu kỳ (không phải tần số) giữa các lần làm tươi (giây). Mặc định là 2 giây. Số này sẽ được nhân với decay hiện tại sử dụng đối tượng Ajax.Updater.

decay
Number
instance
Giữ mức độ decay hiện tại khi xử lý lại tác vụ.

updater
Ajax.Updater
instance
Đối tượng Ajax.Updater được sử dụng gần đây nhất

timer
Object
instance
Timer của JavaScript được sử dụng để báo cáo đối tượng khi đã đến thời gian cho lần làm tươi kế tiếp.

Loại

Phương thức
Các tham số
Mô tả

[ctor](container, url, options)
constructor
container:có thể là id của một phần tử, hoặc chính phần tử đó, hay là một đối tượng có 2 thuộc tính - phần tử (hoặc id) của object.success element (or id) that sẽ được dùng khi lời gọi AJAX thành công, và ngược lại phần tử (id) của object.failure sẽ được dùng. url: url sẽ được mở, options: AJAX options
Tạo một khởi tạo của đối tượng sẽ gọi url sử dụng options được cho.

start()
instance
(none)
Phương thức này thường không được gọi từ bên ngoài. Nó được gọi bởi chính đối tượng đó khi bắt đầu thực hiện những tác vụ có tính chu kỳ.

stop()
instance
(none)
Làm đối tượng dừng thực hiện các tác vụ chu kỳ của nó. Sau khi dừng lại, đối tượng sẽ gọi callback được xác định trong lựa chọn onComplete (nếu có).

updateComplete()
instance
(none)
Phương thức này thường không được gọi từ bên ngoài. Nó được gọi bởi đối tượng Ajax.Updater được sử dụng gần đây, sau khi nó đã hoàn tất yêu cầu. Nó được dùng để sắp xếp cho lần làm tươi kế tiếp.

onTimerEvent()
instance
(none)
Phương thức này thường không được gọi từ bên ngoài. Nó được gọi từ bên trong khi đã đến thời gian cho lần cập nhật kết tiếp.

toc

Đối tượng Element

Đối tượng này cung cấp những hàm tiện ích để chỉnh sửa các phần tử trong DOM.

Phương thức
Loại
Các tham số
Mô tả

addClassName(element,className)
instance
element: đối tượng phần tử hoặc id, className: tên của lớp CSS
Thêm tên của lớp được cho vào tên của lớp phần tử.

classNames(element)
instance
element:đối tượng phần tử hoặc id
Trả về đối tượng Element.ClassNames biểu diễn tên của lớp CSS có liên quan đến phần tử được cho.

cleanWhitespace(element)
instance
element: đối tượng phần tử hoặc id
Xóa những khoảng trắng giữa 2 nút con của phần tử

empty(element)
instance
element: đối tượng phần tử hoặc id
Trả về giá trị Boolean xách định xem nếu thẻ của phần tử có rỗng hay không (hoặc chỉ có khoảng trắng)

getDimensions(element)
instance
element: đối tượng phần tử hoặc id
Trả về kích thước của phần tử.Giá trị trả về là một đối tượng với 2 thuộc tính: height và width.

getHeight(element)
instance
element: đối tượng phần tử hoặc id
Trả về giá trị offsetHeight của phần tử

getStyle(element, cssProperty)
instance
element: đối tượng phần tử hoặc id, tên cssProperty của một thuộc tính CSS (dạng 'prop-name' hay 'propName' đều hoạt động).
Trả về giá trị của thuộc tính CSS trong phần tử được cho hoặc null nếu không có.

hasClassName(element, className)
instance
element: đối tượng phần tử hoặc id, className: tên của lớp CSS
Trả về true nếu phần tử có tên lớp được cho là một trong những tên lớp của nó.

hide(elem1 [, elem2 [, elem3 [...]]])
instance
elemN: đối tượng phần tử hoặc id
Giấu các phần tử bằng cách đặt giá trị style.display là 'none'.

makeClipping(element)
instance
element: đối tượng phần tử hoặc id

makePositioned(element)
instance
element: đối tượng phần tử hoặc id
Thay đổi style.position của phần tử thành 'relative'

remove(element)
instance
element: đối tượng phần tử hoặc id
Xóa phần tử ra khỏi văn bản.

removeClassName(element, className)
instance
element: đối tượng phần tử hoặc id, className: tên của lớp CSS
Xóa tên lớp được cho trong các tên lớp của phần tử.

scrollTo(element)
instance
element: đối tượng phần tử hoặc id
Cuộn cửa sổ đến vị trí của phần tử.

setStyle(element, cssPropertyHash)
instance
element: đối tượng phần tử hoặc id, cssPropertyHash: đối tượng Hash với các type(style) được áp dụng.
Đặt giá trị của các thuộc tính CSS vào đối tượng được cho tùy thuộc vào các giá trị trong tham số cssPropertyHash.

show(elem1 [, elem2 [, elem3 [...]]])
instance
elemN: đối tượng phần tử hoặc id
Thể hiện mỗi phần tử bằng cách đặt lại style.display thành ''.

toggle(elem1 [, elem2 [, elem3 [...]]])
instance
elemN: đối tượng phần tử hoặc id
Bật khả năng khả hiện của mỗi phần tử.

undoClipping(element)
instance
element: đối tượng phần tử hoặc id

undoPositioned(element)
instance
element: đối tượng phần tử hoặc id
Đặt style.position của phần tử thành ''</SPANCLASS="CODE">

update(element,html)
instance
element: đối tượng phần tử hoặc id, html: nội dung html
Thay thế html bên trong (inner html) của phần tử với tham số html được cho. Nếu html được cho có chứa khối <script> nó sẽ không được thêm vào nhưng sẽ được định giá trị.

visible(element)
instance
element: đối tượng phần tử hoặc id
Trả về một giá trị Boolean xác định xem phần tử có hiện thị hay không.

toc

Lớp Element.ClassNames

Kết thừa từ Enumerable

Biểu diễn tập hợp tên các lớp CSS có liên quan đến một phần tử.

Phương thức
Loại
Các tham số
Mô tả

[ctor](element)
constructor
element:bất kỳ đối tượng phần tử hoặc id DOM nào
Tạo một đối tượng Element.ClassNames biểu diễn tên lớp CSS của phần tử được cho.

add(className)
instance
className: tên lớp CSS
Thêm tên lớp CSS được cho vào danh sách tên lớp liên quan đến phần tử.

remove(className)
instance
className: tên lớp CSS
Xóa tên lớp CSS được cho ra khỏi danh sách tên lớp liên quan đến phần tử.

set(className)
instance
className: tên lớp CSS
Gắn phần tử với tên lớp CSS được cho, xóa những tên lớp khác ra khỏ phần tử này.

toc

Đối tượng Abstract

Đối tượng này đóng vai trò gốc rễ cho các lớp khác trong thư viện. Nó không có các thuộc tính hay phương thức nào. Các lớp được định nghĩa trong đối tượng này cũng được xem như là các lớp trừu tượng (abstract class)truyền thống.

toc

Lớp Abstract.Insertion

Lớp này được sử dụng như một lớp nền tảng cho các lớp khác, mà các lớp này sẽ cung cấp tính năng thêm nội dung động. Lớp này được sử dụng như một lớp trừu tượng.

Phương thức
Loại
Các tham số
Mô tả

[ctor](element, content)
constructor
element: đối tượng phần tử hoặc id, content: HTML sẽ được thêm
Tạo một đối tượng giúp đỡ cho việc thêm nội dung động.

contentFromAnonymousTable()
instance
(none)

Thuộc tính
type
Loại
Mô tả

adjacency
String
static, parameter
Tham số mà sẽ xác định đâu sẽ là nơi nội dung được đặt có liên quan với phần tử được cho. Các giá trị có thể là: 'beforeBegin','afterBegin', 'beforeEnd', và 'afterEnd'.

element
Object
instance
Đối tượng phần tử liên quan với việc thêm vào.

content
String
instance
HTML sẽ được thêm vào.

toc

Đối tượng Insertion

Đối tượng này đóng vai trò gốc rễ cho các lớp khác trong thư viện. Nó không có các thuộc tính hay phương thức nào. Các lớp được định nghĩa trong đối tượng này cũng được xem như là các lớp trừu tượng (abstract class)truyền thống.

toc

Lớp Insertion.Before

Kế thừa từ Abstract.Insertion

Thêm HTML vào trước một phần tử.

Phương thức
Loại
Các tham số
Mô tả

[ctor](element, content)
constructor
element: đối tượng phần tử hoặc id, content: HTML sẽ được thêm vào
Kế thừa từ Abstract.Insertion. Tạo một đối tượng giúp đỡ cho việc thêm nội dung động.

Mã lệnh sau đây

<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span>

<script> new Insertion.Before('person', 'Chief '); </script>
			

Sẽ chuyển HTML thành

<br>Hello, Chief <span id="person" style="color:red;">Wiggum. How's it going?</span>	
			

toc

Lớp Insertion.Top

Kế thừa từ Abstract.Insertion

Thêm HTML như một phần con đầu tiên dưới phần tử. Nội dung sẽ được đặt ngay sau thẻ mở của phần tử.

Phương thức
Loại
Các tham số
Mô tả

[ctor](element, content)
constructor
element: đối tượng phần tử hoặc id, content: HTML sẽ được thêm vào
Kế thừa từ Abstract.Insertion. Tạo một đối tượng giúp đỡ cho việc thêm nội dung động.

Mã lệnh sau đây

<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span>

<script> new Insertion.Top('person', 'Mr. '); </script>
			

Sẽ chuyển HTML thành

<br>Hello, <span id="person" style="color:red;">Mr. Wiggum. How's it going?</span>	
			

toc

Lớp Insertion.Bottom

Kế thừa từ Abstract.Insertion

Thêm HTML như một phần con cuối cùng dưới phần tử. Nội dung sẽ được đặt ngay sau thẻ mở của phần tử.

Phương thức
Loại
Các tham số
Mô tả

[ctor](element, content)
constructor
element: đối tượng phần tử hoặc id, content: HTML sẽ được thêm vào
Kế thừa từ Abstract.Insertion. Tạo một đối tượng giúp đỡ cho việc thêm nội dung động.

Mã lệnh sau đây

<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span>

<script> new Insertion.Bottom('person', " What's up?"); </script>
			

Sẽ chuyển HTML thành

<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going? What's up?</span>	
			

toc

Lớp Insertion.After

Kế thừa từ Abstract.Insertion

Thêm HTML vào ngay sau thẻ đóng của phần tử.

Phương thức
Loại
Các tham số
Mô tả

[ctor](element, content)
constructor
element: đối tượng phần tử hoặc id, content: HTML sẽ được thêm vào
Kế thừa từ Abstract.Insertion. Tạo một đối tượng giúp đỡ cho việc thêm nội dung động.

Mã lệnh sau đây

<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span>

<script> new Insertion.After('person', ' Are you there?'); </script>
			

Sẽ chuyển HTML thành

<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span> Are you there?	
			

toc

Đối tượng Field

Đối tượng này cung cấp một số hàm tiện ích để làm việc với trường nhập liệu trong form.

Phương thức
Loại
Các tham số
Mô tả

clear(field1 [, field2[,field3[...]]])
instance
fieldN: phần tử đối tượng trường hoặc id
Xóa giá trị được truyền vào phần tử trường.

present(field1 [, field2 [, field3 [...]]])
instance
fieldN: phần tử đối tượng trường hoặc id
Trả về true chỉ khi tất cả các trường của form có chứa giá trị rỗng.

focus(field)
instance
field: phần tử đối tượng trường hoặc id
Chuyển tiêu điểm vào trường của form được cho.

select(field)
instance
field: phần tử đối tượng trường hoặc id
Chọn lựa giá trị trong các trường mà hỗ trợ chọn chữ.

activate(field)
instance
field: phần tử đối tượng trường hoặc id
Di chuyển tiêu điểm và chọn giá trị trong các trường mà hỗ trợ chọn chữ.

toc

Đối tượng Form

Đối tượng này hỗ trở một số hàm tiện ích để làm việc với các form dữ liệu và các trường nhập liệu của nó.

Phương thức
Loại
Các tham số
Mô tả

serialize(form)
instance
form: đối tượng phần tử form hoặc id
Trả về một danh sách có định dạng url, bao gồm các tên trường, và giá trị của nó. Như 'field1=value1&field2=value2&field3=value3'

findFirstElement(form)
instance
form: i tượng phần tử form hoặc id
Trả về phần tử trường đầu tiên có hiệu lực trong form.

getElements(form)
instance
form: i tượng phần tử form hoặc id
Trả về một Array có chứa toàn bộ các trường nhập liệu trong form.

getInputs(form [, typeName [, name]])
instance
form: fi tượng phần tử form hoặc id, typeName: kiểu của phần tử nhập (input element),name: tên của phần tử nhập.
Trả về một Array chứa tất cả các phần tử <nhập> trong form. Tùy chọn thì danh sách có thể được lọc bởi thuộc tính type hoặc name của các phần tử.

disable(form)
instance
form:đối tượng phần tử form hoặc id
Làm mất hiệu lực tất cả các trường nhập liệu trong form.

enable(form)
instance
form:đối tượng phần tử form hoặc id
Làm hiệu lực tất cả các trường nhập liệu trong form.

focusFirstElement(form)
instance
form:đối tượng phần tử form hoặc id
Lấy tiêu điểm vào trường nhập liệu có hiệu lực thứ nhất trong form.

reset(form)
instance
form: đối tượng phần tử form hoặc id
Xóa toàn bộ form. Giống với gọi phương thức reset() của đối tượng form.

toc

Đối tượng Form.Element

Đối tượng này cung cấp một số hàm tiện ích để làm việc với các phần tử của form (thấy được hay không thấy được).

Phương thức
Loại
Các tham số
Mô tả

serialize(element)
instance
element: đối tượng phần tử hoặc id
Trả về cặp name=value của phần tử, như 'elementName=elementValue'

getValue(element)
instance
element: đối tượng phần tử hoặc id
Trả về giá trị của phần tử.

toc

Đối tượng Form.Element.Serializers

Đối tượng này cung cấp một số hàm tiện ích được sử dụng phía bên trong thư viện để giúp đỡ việc lấy giá trị hiện tại của các phần tử form.

Phương thức
Loại
Các tham số
Mô tả

inputSelector(element)
instance
element: đối tượng hoặc id phần tử form thuộc tính checked, như nút radio hay checkbox.
Trả về một Array với tên và giá trị của phần tử, như ['elementName', 'elementValue']

textarea(element)
instance
element: đối tượng hoặc id của một phần tử form có thuộc tính value value, như textbox, button hoặc trường password.
Trả về một Array với với tên và giá trị của phần tử ['elementName', 'elementValue']

select(element)
instance
element: đối tượng của một phần tử <select>
Trả về một Array với tên phần tử và tất cả các giá trị lựa chọn hoặc text, ['elementName', 'selOpt1 selOpt4 selOpt9']

toc

Lớp Abstract.TimedObserver

Lớp này được dùng như lớp nền tảng cho các lớp khác, để theo dõi một phần tử cho đến khi giá trị (hoặc bất cứ thuộc tính trong lớp con định nghĩa) của nó thay đổi. Lớp này được sử dụng như một lớp trừu tượng.

Các lớp con sẽ được xem tạo ra để theo dõi các thứ như giá trị nhập của một phần tử, hoặc một trong các thuộc tính kiểu (style property), hoặc số lượng dòng trong một bảng, hoặc bất cứ gì bạn muốn theo dõi.

Các lớp con sẽ khởi tạo phương thức nào để xác định xem giá trị hiện tại của phần tử được theo dõi là gì.

Phương thức
Loại
Các tham số
Mô tả

[ctor](element, frequency, callback)
constructor
element: đối tượng phần tử hoặc id, frequency: chu kỳ (s), callback: hàm được gọi khi phần tử thay đổi.
Tạo một đối tượng để theo dõi phần tử.

registerCallback()
instance
(none)
Phương thức này thường không được gọi từ bên ngoài. Nó được gọi bởi chính đối tượng để bắt đầu theo dõi phần tử.

onTimerEvent()
instance
(none)
Phương thức này thường không được gọi từ bên ngoài. Nó được gọi bởi chính đối tượng một cách định kỳ để kiểm tra phần tử.

Thuộc tính
Kiểu
Mô tả

element
Object
Đối tượng phần tử được theo dõi.

frequency
Number
Đây là chu kỳ (s) giữa các lần kiểm tra.

callback
Function(Object, String)
Hàm được gọi khi phần tử thay đổi. Nó sẽ nhận đối tượng phần tử và giá trị mới.

lastValue
String
Giá trị cuối cùng được xác nhận trong phần tử.

toc

Lớp Form.Element.Observer

Kế thừa từ Abstract.TimedObserver

Khởi tạo của một lớp Abstract.TimedObserver để theo dõi các phần tử giá trị nhập form. Sử dụng lớp này khi bạn muốn theo dõi một phần tử mà không phơi bày ra sự kiện mà báo cáo giá trị thay đổi. Trong trường hợp đó bạ n có thể dùng lớp Form.Element.EventObserver.

Phương thức
Loại
Các tham số
Mô tả

[ctor](element, frequency, callback)
constructor
element: đối tượng phần tử hoặc id, frequency: chu kỳ (s), callback: hàm được gọi khi phần tử thay đổi
Kế thừa từ Abstract.TimedObserver. Tạo đối tượng để theo dõi thuộc tính value của phần tử.

getValue()
instance
(none)
Trả về giá trị của phần tử.

toc

Lớp Form.Observer

Kế thừa từ Abstract.TimedObserver

Khởi tạo của một lớp Abstract.TimedObserver để theo dõi bất cứ thay đổi dữ liệu này của phầt tử trong form. Sử dụng lớp này khi bạn muốn theo dõi một phần tử mà không phơi bày ra sự kiện mà báo cáo giá trị thay đổi. Trong trường hợp đó bạ n có thể dùng lớp Form.Element.EventObserver.

Phương thức
Loại
Các tham số
Mô tả

[ctor](form, frequency, callback)
constructor
form: form object or id, frequency: chu kỳ, callback: hàm được gọi khi dữ liệu của phần tử trong form bị thay đổi.
Kế thừa từ Abstract.TimedObserver. Tạo một đối tượng để theo dõi sự thay đổi của form.

getValue()
instance
(none)
Trả về sự tuần tự hóa (serialization) của toàn bộ dữ liệu form.

toc

Lớp Abstract.EventObserver

Lớp này được sử dụng như một lớp nền tảng cho các lớp khác, mà được dùng để kích hoạt hàm callback bất cứ khi nào sự kiện thay đổi giá trị xảy ra đối với một phần tử.

Nhiều đối tượng của kiểu Abstract.EventObserver có thể được gắn với cùng một phần tử, mà không phải xóa đối tượng kia. Hàm callback sẽ được thực thi theo thứ tự mà chúng được gán vào phần tử.

Sự kiện khởi tạo (triggering event) là onclick cho nút radio ,các checkbox, và onchange cho các textbox. Và tổng quá thì cho hộp danh sách(listbox) / hộp thả xuống (dropdown).

Lớp con sẽ khởi tạo phương thức này để xác định giá trị nào của phần tử sẽ được theo dõi.

Phương thức
Loại
Các tham số
Mô tả

[ctor](element, callback)
constructor
element: đối tượng phần tử hoặc id, callback: function to be called when the event happens
Tạo đối tượng sẽ theo dõi phần tử.

registerCallback()
instance
(none)
Phương thức này thường không được gọi từ bên ngoài. Nó được gọi bởi chính đối tượng để gắn chính nó với sự kiện của phần tử.

registerFormCallbacks()
instance
(none)
Phương thức này thường không được gọi từ bên ngoài. Nó được gọi bởi chính đối tượng để gắn nó với những sự kiện của các phần tử dữ liệu trong form.

onElementEvent()
instance
(none)
Phương thức này thường không được gọi từ bên ngoài. Nó sẽ gắn với sự kiện của phần tử.

Thuộc tính
Kiểu
Mô tả

element
Object
Đối tượng phần tử đang được theo dõi.

callback
Function(Object, String)
Hàm được gọi khi phần tử thay đổi. Nó sẽ nhận đối tượng phần tử và giá trị mới.

lastValue
String
Giá trị cuối cùng được xác nhận trong phần tử.

toc

Lớp Form.Element.EventObserver

Kế thừa từ Abstract.EventObserver

Khởi tạo của Abstract.EventObserver sẽ thực thi hàm callback với sự kiện tương tứng của phần tử dữ liệu của form, để phát hiện sự thay đổi giá trị trong phần tử. Nếu phần tử không có bất cứ sự kiện nào có thay đổi, bạn có thể dùng lớp Form.Element.Observer.

Phương thức
Loại
Các tham số
Mô tả

[ctor](element, callback)
constructor
element: đối tượng phần tử hoặc id, callback: hàm được gọi khi sự kiện xảy ra
Kế thừa từ Abstract.EventObserver. Tạo ra một đối tượng để theo dõi thuộc tính value của phần tử.

getValue()
instance
(none)
Trả về giá trị của phần tử

toc

Lớp Form.EventObserver

Kế thừa từ Abstract.EventObserver

Khởi tạo của một lớp Abstract.EventObserver để theo dõi bất cứ thay đổi dữ liệu này của phần tử trong form, sử dụng sự kiện của phần tử để phát hiện sự thay đổi. Nếu form có chứa những phần tử mà không phơi bày ra sự kiện mà báo cáo giá trị thay đổi. Trong trường hợp đó bạn có thể dùng lớp Form.Element.EventObserver.

Phương thức
Loại
Các tham số
Mô tả

[ctor](form, callback)
constructor
form: form object or id, callback: Hàm được gọi khi phần tử dữ liệu trong form thay đổi
Kế thừa từ Abstract.EventObserver. Tạo một đối tượng để theo dõi sự thay đổi của form.

getValue()
instance
(none)
Trả về sự tuần tự hóa (serialization) của toàn bộ dữ liệu của form.

toc

Đối tượng Position (tài liệu dự bị)

Đối tượng này cung cấp một loạt các hàm giúp bạn khi làm việc với vị trí của phần tử.

Phương thức
Loại
Các tham số
Mô tả

prepare()
instance
(none)
Điều chỉnh thuộc tính deltaX và deltaY để phù hợp với thay đổitrong vị trí cuộn. Nhớ gọi phương thức này trước khi gọi tới đối tượng withinIncludingScrolloffset sau khi trang đã cuộn.

realOffset(element)
instance
element:đối tượng
Trả về một Array với vị trí cuộn chính xác của phần tử,bao gồm bất cứ vị trí cuộn nào làm ảnh hưởng đến phần tử. Mảng kết quả tương tự như [total_scroll_left, total_scroll_top]

cumulativeOffset(element)
instance
element:đối tượng
Trả về một Array với vị trí chính xác của phần tử, bao gồm bất cứ vị trí nào bị ảnh hưởng bởi các phần tử mẹ. Mảng kết quả tương tự như [total_offset_left, total_offset_top]

within(element, x,y)
instance
element: đối tượng, x and y: tọa độ của điểm
Kiểm tra xem tọa độ được cho có nằm trong vùng chữ nhật của phần tử được cho không.

withinIncludingScrolloffsets(element, x, y)
instance
element: đối tượng, x and y: tọa độ của điểm

overlap(mode,element)
instance
mode:'vertical' hoặc 'horizontal', element: đối tượng
within() cần được gọi trước khi gọi phương thức này. Phương thức này sẽ trả về một số thập phân ở giữa 0.0 và 1.0 biểu diễn một phân số của tọa độ mà chồng lên phần tử. Như ví dụ, nếu phần tử là một hình vuông DIV với cạnh 100px và có vị trí ở (300,300), sau đó within(divSquare, 330, 330); overlap('vertical', divSquare); sẽ trả về 0.70, có nghĩ rằng điểm này đang ở vị trí 70% (100px - 30px = 70px) tính từ cạnh dưới của DIV. Các dễ nhất để hiểu rõ là hãy nghĩ cặp tọa độ được cho như là góc phía trên bên trái (top-left corner) của một hình chữa nhật khác, đè lên cái đầu tiên. Con số sẽ là phần trăm của chiều rộng hoặc chiều dài mà bị đè lên (giả sử rằng hình chữ nhật thứ 2 đủ rộng).

clone(source, target)
instance
source: đối tượng phần tử hoặc id, target: đối tượng phần tử hoặc id
Điều chỉnh lại kích thước, hoặc vị trí của phần tử target mà giống với phần tử source.

 

Nguồn:

http://cntt.tv/system/repos/prototype.js.vi/prototype.js.vi.html

Tác giả Sergio Pereira

Được dịch bởi Giang Trần

Đọc tiếp...