Đang thực hiện
 
Tài khoản
Vui lòng nhập Tên truy cập
Mật khẩu
Vui lòng nhập Mật khẩu
  Quên mật khẩu?
Chủ nhật, 31/08/2014 09:15 GMT +7

Hỏi về Javascript? help me

01/05/2011 19:36#1

xter

Member

Tham gia ngày: 6 năm trước

Bài viết: 156

Cảm ơn: 0

Được cảm ơn: 0

Code:

01/05/2011 19:36Top#2

kunimatsu

Member

Tham gia ngày: 6 năm trước

Bài viết: 32

Cảm ơn: 0

Được cảm ơn: 0

Vậy bạn thử tìm hiểu xem "
01/05/2011 19:36Top#3

sacroyant

Member

Tham gia ngày: 5 năm trước

Bài viết: 658

Cảm ơn: 0

Được cảm ơn: 0

Cái đó gọi là "
01/05/2011 19:36Top#4

zmt264

Member

Tham gia ngày: 5 năm trước

Bài viết: 2,931

Cảm ơn: 0

Được cảm ơn: 0

Quote:

Được gửi bởi sacroyant [URL=showthread.php?s=3532ac6a395f9ea81bed97e47c5d3c1a&p=2432130#post2432130][/URL]

Cái đó gọi là "

Tất nhiên, người đọc cần phải biết tiếng Anh và đã làm việc với JS một thời gian rồi, ngươi mới học thì sẽ hơi khó hiểu

Quote:



Who is this book for?

JavaScript Developers - Developers who interact with JavaScript on a daily basis and have a strong background in programming. They have to deal with cross-browser compatibility issues continually and, thus, are forced to implement, or use, a JavaScript library in some form. This book will help them to either understand their existing libraries or write their own.
01/05/2011 19:36Top#5

sacroyant

Member

Tham gia ngày: 5 năm trước

Bài viết: 658

Cảm ơn: 0

Được cảm ơn: 0

Cái này có gì đâu bác

1 ví dụ nhỏ thế này, chẳng hạn chúng ta có 1 hàm addValue giữ chức năng chèn các giá trị vào 1 textinput, code như sau :

PHP Code:



<

input id

=

"txtValue"

type

=

"text"

value

=

""

br

      <

button onclick

=

"addValue(1);"

>

Add 1


button

>      <

button onclick

=

"addValue(2);"

>

Add 2


button

>      <

button onclick

=

"addValue(3);"

>

Add 3


button

>      <

button onclick

=

"addValue(4);"

>

Add 4


button

>      <

button onclick

=

"addValue(5);"

>

Add 5


button

>       

      <

script type

=

"text/javascript"

>        function

addValue

(

newValue

){

document

.

getElementById

(

"txtValue"

).

value

=

newValue

;

         }

 



Không có vấn đề gì cả, mỗi button khi được click sẽ cho ra 1 giá trị tương ứng. Tuy nhiên, nhiều người không thích nhúng hàm vào element theo kiểu cũ xưa như trên mà lại muốn thông qua một hàm khác để gán event cho mỗi element theo id của chúng, code lúc này nhìn có thể có dạng :

PHP Code:



<

input type

=

"text"

id

=

"val"

value

=

""

br

      <

button id

=

"btn1"

>

Add 1


button

>      <

button id

=

"btn2"

>

Add 2


button

>      <

button id

=

"btn3"

>

Add 3


button

>      <

button id

=

"btn4"

>

Add 4


button

>      <

button id

=

"btn5"

>

Add 5


button

>

      <

script type

=

"text/javascript"

>         for(var

i

=

1

;

i

<=

5

;

i

++){

document

.

getElementById

(

"btn"

+

i

).

onclick

=function(){

addValue

(

i

)};

         }

 



Mới nhìn qua rất đơn giản, vòng for ở lần lặp đầu tiên, i=1, chúng ta gán addValue(1) cho phần tử "btn"+1 tức là btn1. Tương tự cho đến i=5, tại mỗi vòng lặp 1 button sẽ được gán hàm addValue với tham số i tương ứng. Logic chương trình đúng ra phải tường minh như thế. Nhưng, khi chạy thử bạn sẽ thấy cả 5 button khi được click đều gán duy nhất 1 giá trị là 6 cho text input. Tại sao ? Có lẽ do thiết kế trong JavaScript Engine, tớ cũng chả biết rõ, nhưng gặp nhiều và tạm gắn cho nó cái nhãn : "

Giải quyết rắc rối này, nhiều lập trình viên sử dụng hình thức new Function(string), như sau :

PHP Code:



<

input type

=

"text"

id

=

"val"

value

=

""

br

      <

button id

=

"btn1"

>

Add 1


button

>      <

button id

=

"btn2"

>

Add 2


button

>      <

button id

=

"btn3"

>

Add 3


button

>      <

button id

=

"btn4"

>

Add 4


button

>      <

button id

=

"btn5"

>

Add 5


button

>

      <

script type

=

"text/javascript"

>         for(var

i

=

1

;

i

<=

5

;

i

++){

document

.

getElementById

(

"btn"

+

i

).

onclick

=new Function(

"addValue("

+

i

+

")"

);

         }

 



Không hay ho lắm, nhưng script chạy được và cho ra kết quả đúng như mong đợi. Như chúng ta biết, trong javascript, hàm là 1 đối tượng, và qua vòng lặp for ở trên, ứng với mỗi giá trị i, chúng ta khởi tạo 1 hiện thể của đối tượng Function và gắn nó với sự kiện onclick của button i. Tham số là 1 chuỗi tự generate theo sự biến đổi của giá trị i và kết quả là chúng ta có 5 hiện thể của Function cho 5 button.

Về mặt lý thuyết, cách làm trên không đem lại một sự "

PHP Code:













<



input type



=



"text"



id



=



"val"



value



=



""



br



      <



button id



=



"btn1"



>



Add 1






button



>      <



button id



=



"btn2"



>



Add 2






button



>      <



button id



=



"btn3"



>



Add 3






button



>      <



button id



=



"btn4"



>



Add 4






button



>      <



button id



=



"btn5"



>



Add 5






button



>      



      <



script type



=



"text/javascript"



>         for(var



i



=



1



;



i



<=



5



;



i



++){



            (function(



val



){







document



.



getElementById



(



"btn"



+



val



).



onclick



=function(){



addValue



(



val



)}



             })(



i



);



         }







 











Đâu là sự khác biệt giữa pro và amateur ?! Có lẽ chỉ là cách nhìn thôi
01/05/2011 19:36Top#6

zmt264

Member

Tham gia ngày: 5 năm trước

Bài viết: 2,931

Cảm ơn: 0

Được cảm ơn: 0

Quote:

Được gửi bởi sacroyant [URL=showthread.php?s=3532ac6a395f9ea81bed97e47c5d3c1a&p=2433495#post2433495][/URL]

Cái này có gì đâu bác

Mới nhìn qua rất đơn giản, vòng for ở lần lặp đầu tiên, i=1, chúng ta gán addValue(1) cho phần tử "btn"+1 tức là btn1. Tương tự cho đến i=5, tại mỗi vòng lặp 1 button sẽ được gán hàm addValue với tham số i tương ứng. Logic chương trình đúng ra phải tường minh như thế. Nhưng, khi chạy thử bạn sẽ thấy cả 5 button khi được click đều gán duy nhất 1 giá trị là 6 cho text input. Tại sao ? Có lẽ do thiết kế trong JavaScript Engine, tớ cũng chả biết rõ, nhưng gặp nhiều và tạm gắn cho nó cái nhãn : "

Đâu là sự khác biệt giữa pro và amateur ?! Có lẽ chỉ là cách nhìn thôi

Quote:

Được gửi bởi sacroyant [URL=showthread.php?s=3532ac6a395f9ea81bed97e47c5d3c1a&p=2432130#post2432130][/URL]

Cái đó gọi là "

Một cách diẽn đạt khác:

closure nghĩa là tạo ra 1 không gian riêng mà trong đó có những biến, function được giữ lại ngay cả khi nó đã chạy xong rồi

Do đó trường hợp đầu thì i là biến reference còn trường hợp sau (closure) thì là 5 biến i khác nhau.

( Thanks bạn @hoat.le đã góp ý)
01/05/2011 19:36Top#7

sacroyant

Member

Tham gia ngày: 5 năm trước

Bài viết: 658

Cảm ơn: 0

Được cảm ơn: 0

Thank bác zmt đã đưa code minh họa lên jsbin. Bạn hoat.le mà bác nhắc đến là ai thế hả bác ? Dùng từ reference tôi thấy cũng chưa rõ ràng lắm. Nếu chạy vòng lặp duyệt theo 1 mảng thì giá trị tại phần tử cuối cùng thường được gán. Nhưng trong cái ví dụ kia, 6 ở đâu ra thì tôi chịu! For đã exit tại i=5 cơ mà?!

Closure cũng hay được dùng trong trường hợp không muốn đưa ra một namespace riêng biệt, người ta có thể dùng kỹ thuật closure đóng gói tất cả chương trình của mình vào 1 khu vực và các object, function, variable... trong đó trở thành private. Chẳng hạn như cái rich text editor mà tôi mới viết lại cũng dùng chính kỹ thuật này để định nghĩa đối tượng RTE :

http://sacroyant.uni.cc/Examples/Editor/2010/rte.htm

Với cách viết này, nếu ai đó thử truy cập class Editor từ bên ngoài, sẽ gặp lỗi.
01/05/2011 19:36Top#8

zmt264

Member

Tham gia ngày: 5 năm trước

Bài viết: 2,931

Cảm ơn: 0

Được cảm ơn: 0

Quote:

Được gửi bởi sacroyant [URL=showthread.php?s=3532ac6a395f9ea81bed97e47c5d3c1a&p=2434380#post2434380][/URL]

Thank bác zmt đã đưa code minh họa lên jsbin. Bạn hoat.le mà bác nhắc đến là ai thế hả bác ? Dùng từ reference tôi thấy cũng chưa rõ ràng lắm. Nếu chạy vòng lặp duyệt theo 1 mảng thì giá trị tại phần tử cuối cùng thường được gán. Nhưng trong cái ví dụ kia, 6 ở đâu ra thì tôi chịu! For đã exit tại i=5 cơ mà?!

HoatLe là một người bạn của mình, đồng thời cũng là 1 diễn giả trẻ của PHP Day (toàn thuyết trình về JS ) và đã từng có 1 thời gian làm JS khá lâu trong eXoPlatform Team. Mình có trao đổi chút với bạn ấy trước khi post bài.

Về vòng for, cơ chế hoạt động là khi i=5, nó so sánh đk i<=5, nhưng không thoát ngay, mà còn thực hiện các lệnh trong vòng for và lệnh i++ trước khi thoát, cái này bác có thể thử alert(i) trong vào ngoài vòng for để kiểm nghiệm. Các ngôn ngữ C-like đều thế. Còn nếu sau này bác có lý giải khác về giá trị 6 thì bác cứ đưa ra ý kiến

01/05/2011 19:36Top#9

xter

Member

Tham gia ngày: 6 năm trước

Bài viết: 156

Cảm ơn: 0

Được cảm ơn: 0

Thanks các bác! Thất thằng google nó viết như vậy mà mình chả hiểu cái gì cả!!
01/05/2011 19:36Top#10

sacroyant

Member

Tham gia ngày: 5 năm trước

Bài viết: 658

Cảm ơn: 0

Được cảm ơn: 0

@zmt : tôi cũng đồng ý với bác là i sẽ tăng lên đến 6, nhưng theo logic thì vì 6 không <=5 nên js engin phải đẩy tiến trình xử lý tới phần kịch bản nằm sau ký hiệu } và hoàn toàn không làm gì trong vùng {} của for nữa mới đúng chứ

@xter : những điều nho nhỏ này có tác dụng không nhỏ chút nào, bạn cứ chịu khó xem code của các ứng dụng lớn sẽ học hỏi được nhiều cách viết lạ - độc đáo

Closure làm tớ nhớ đến Google Closure Library. Đây thực sự là một kho tàng quý giá, nó sẽ khiến các bạn có cảm giác những chuyên gia ở Google muốn định nghĩa lại cách thức làm việc của ngôn ngữ JavaScript :

http://code.google.com/closure/libra...ngstarted.html bác nào rảnh rỗi ghe thăm
Trả lời nhanh
Vui lòng nhập Nội dung trả lời! Nội dung trả lời phải lớn hơn 15 ký tự!
Bài cùng chuyên mục

xin source web php đơn giản

3 năm trước - Trả lời: 14 - Lượt xem: 4,050

UnZend Code

3 năm trước - Trả lời: 4 - Lượt xem: 6,547

Movable type

3 năm trước - Trả lời: 23 - Lượt xem: 5,699

Diễn đàn hỗ trợ Xenforo Việt Nam

3 năm trước - Trả lời: 3 - Lượt xem: 5,441

Giấu tin trong dữ liệu đa phương tiện

3 năm trước - Trả lời: 12 - Lượt xem: 1,325

tibetan costume tibetan hat

2 năm trước - Trả lời: 4 - Lượt xem: 5,036

uk karen millen online

3 năm trước - Trả lời: 1 - Lượt xem: 5,212

karen millen online uk

3 năm trước - Trả lời: 0 - Lượt xem: 7,239

[q]

3 năm trước - Trả lời: 1 - Lượt xem: 3,694

[Q] Cho em hoi cais

3 năm trước - Trả lời: 1 - Lượt xem: 1,713

Tin tức giải trí, tin giải trí, tin 24h, Công sở, Tình yêu giới tính, Phụ Nữ, Đàn Ông, Tâm sự, thời trang
Cách mix đồ thảm họa của các tín đồ thời trang

Cách mix đồ thảm họa của các tín đồ thời trang

Yêu thời trang nhưng nếu không có con mắt thẩm mỹ, bạn vẫn có thể trở thành thảm họa thời trang bất cứ lúc nào.

Thư Kỳ khoe ảnh xấu xí trên trang cá nhân

Thư Kỳ khoe ảnh xấu xí trên trang cá nhân

Là mỹ nhân của làng điện ảnh Hoa ngữ và từng được khen có đôi môi gợi cảm nhất thế giới nhưng Thư Kỳ không ngại khoe những tấm ảnh chẳng hề đẹp...

Kẻ ám sát John Lennon lại bị bác đơn ân xá

Kẻ ám sát John Lennon lại bị bác đơn ân xá

Mark David Chapman tự gọi mình là kẻ ngu ngốc trong lá đơn xin ân xá vừa mới bị bác bỏ.

Ca sĩ Uyên Linh: 'Tôi yêu Quốc Trung ấy à?'

Ca sĩ Uyên Linh: 'Tôi yêu Quốc Trung ấy à?'

Từ một người “vô danh”, sau Vietnam Idol, Uyên Linh “hiên ngang” bước chân vào làng nhạc và thành công trong cuộc lột xác từ “vịt xấu xí” thành “thiên...

Sao Việt bỏ về, làm ngơ tình cũ khi chạm mặt

Sao Việt bỏ về, làm ngơ tình cũ khi chạm mặt

Khi đã không còn yêu nhau nhưng bất ngờ chạm mặt người cũ, các sao Việt có nhiều cách ứng xử khác nhau.

Bánh Trung thu hình thú đắt hàng trước rằm

Bánh Trung thu hình thú đắt hàng trước rằm

Ngoài bánh Trung thu cổ truyền được người dân ưa chuộng, phải xếp hàng nhiều giờ đồng hồ, đội mưa đội nắng để mua thì trên thị...

Thống kê - Diễn đàn

Đề tài thảo luận: 866,594 Bài viết: 6,327,186 Thành viên: 833,080. Đang online 22.
Chào mừng thành viên mới nhất: laptopcali57699

Dịch vụ Thiet ke web, Thiết kế website Web123.vn | Thiết kế web giá rẻ Thiet ke web ban hang Thiet ke web chuan seo thiết kế web chuẩn seo giá rẻ Dịch vụ Quảng cáo Google | Đại lý Quang cao google giá rẻ, chuyên nghiệp