Đ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?
Thứ 4, 01/10/2014 12:59 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: 15,890

UnZend Code

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

Movable type

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

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

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

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,762

tibetan costume tibetan hat

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

uk karen millen online

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

karen millen online uk

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

[q]

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

[Q] Cho em hoi cais

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

Hotgirl Trâm Anh: Từ 9x chuyển giới đến 'người vận chuyển' thuốc lắc?

Hotgirl Trâm Anh: Từ 9x chuyển giới đến 'người vận chuyển' thuốc lắc?

Biết được hoàn cảnh của Trâm Anh, mọi người sẽ thấy 'cô gái' này đáng thương hơn đáng trách.

101 kiểu áo quây ngực nóng mắt của sao Việt

101 kiểu áo quây ngực nóng mắt của sao Việt

Bức tử vòng 1, lộ ngực chảy xệ, khoe vòng 1 quá đà... là một trong những lỗi thời trang phản cảm của nhiều sao Việt.

Gặp gỡ cô gái khiến bọn cướp phải bỏ của chạy lấy người

Gặp gỡ cô gái khiến bọn cướp phải bỏ của chạy lấy người

Diễm Châu đã chia sẻ về lần đối đầu với bọn cướp và tâm sự về cuộc sống hiện tại của mình.

Sau khi rời SNSD, Jessica thông báo kết hôn vào tháng tới

Sau khi rời SNSD, Jessica thông báo kết hôn vào tháng tới

(Văn hóa) - Lễ kết hôn sẽ được tổ chức tại Hồng Kông, mọi công tác chuẩn bị đã hoàn thành.

Hậu ly hôn, Trần Bảo Sơn 'trốn' sang châu Âu đóng phim

Hậu ly hôn, Trần Bảo Sơn 'trốn' sang châu Âu đóng phim

Trần Bảo Sơn tất bật làm việc sau ly hôn, anh xác nhận tham gia vai nam chính cho hai bộ phim nhựa "Quyên” của đạo diễn Nguyễn Phan Quang Bình và “Tìm mưa trong...

Kenny Sang khoe nội thất sang chảnh dập tin đồn gia cảnh tồi tàn

Kenny Sang khoe nội thất sang chảnh dập tin đồn gia cảnh tồi tàn

Lần đầu tiên, Kenny Sang tiết lộ một phần nhỏ trong tư gia. Kenny Sang khoe nội thất sang chảnh dập tin đồn gia cảnh èo uột, tồi tàn.

Nghe cha dạy con gái cách chọn chồng chuẩn nhất

Nghe cha dạy con gái cách chọn chồng chuẩn nhất

Lắng nghe những lời khuyên chân thành từ một người cha dành cho con gái yêu dấu đang ở độ tuổi đẹp nhất của đời người để biết cách chọn chồng lý...

Tin shock: Người đẹp chuyển giới Trâm Anh bị bắt vì bán thuốc lắc

Tin shock: Người đẹp chuyển giới Trâm Anh bị bắt vì bán thuốc lắc

Hot girl chuyển giới Trâm Anh đã khiến nhiều người bàng hoàng khi bị bắt vì Mua bán trái phép chất ma túy.

Những bí mật thú vị về 'Mỹ nam điển trai nhất Trung Quốc' Ngô Ngạn Tổ

Những bí mật thú vị về 'Mỹ nam điển trai nhất Trung Quốc' Ngô Ngạn Tổ

(Phim ảnh) - Nhân ngày sinh nhật Ngô Ngạn Tổ (30.9) hãy cùng tìm hiểu những bí mật thú vị về nam diễn viên điển trai nhất Trung Quốc này.

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 39.
Chào mừng thành viên mới nhất: laptopcali57699