Đ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ứ 2, 22/12/2014 01:36 GMT +7

Hỏi về Javascript? help me

01/05/2011 19:36#1

xter

Member

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

Bài viết: 156

Cảm ơn: 0

Được cảm ơn: 0

Đại lý Vé máy bay jetstar, Đang có vé máy bay giá rẻ thỏa sức bay đi khắp nơi
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: 6 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: 6 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: 6 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: 7 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: 6 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

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

UnZend Code

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

Movable type

4 năm trước - Trả lời: 23 - Lượt xem: 26,403

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

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

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

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

tibetan costume tibetan hat

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

uk karen millen online

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

karen millen online uk

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

[q]

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

[Q] Cho em hoi cais

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

MV 'Singel lady' của Bảo Thy làm dậy lên cuộc chiến với FC Đông Nhi

MV 'Singel lady' của Bảo Thy làm dậy lên cuộc chiến với FC Đông Nhi

(Âm nhạc) - Ngay khi MV “Singel lady” vừa ra mắt, cuộc khẩu chiến của 2 FC Bảo Thy và Đông Nhi lại bắt đầu bùng nổ.

Hoa khôi 9x có thu nhập 'khủng' khiến nhiều người ngưỡng mộ

Hoa khôi 9x có thu nhập 'khủng' khiến nhiều người ngưỡng mộ

Dù mới đang là sinh viên nhưng cô gái trẻ này đã tự mở 2 cửa hàng thời trang ở Hà Nội và có mức thu nhập đáng ngưỡng mộ, 100 triệu đồng/ tháng.

Nhật kí ngày cuối tuần của một 'gái già'

Nhật kí ngày cuối tuần của một 'gái già'

Sạc điện thoại, điện thoại, wifi, điều khiển tivi, 60 kênh truyền hình cáp, đệm, chăn, gối là quá đủ cho ngày cuối tuần của 1 gái già như mình.

Sao Việt lên tiếng ủng hộ MC Thảo Vân 'dạy dỗ' Hoa hậu Kỳ Duyên

Sao Việt lên tiếng ủng hộ MC Thảo Vân 'dạy dỗ' Hoa hậu Kỳ Duyên

(Văn hóa) - Rất nhiều ý kiến của các sao Việt cũng như người hâm mộ đồng tình với MC Thảo Vân.

Thanh Thảo và người yêu hạnh phúc trong sinh nhật bé Jacky tròn 3 tuổi

Thanh Thảo và người yêu hạnh phúc trong sinh nhật bé Jacky tròn 3 tuổi

Thanh Thảo cùng người yêu hạnh phúc trong tiệc sinh nhật bé Jacky 3 tuổi. Cô bỏ bớt show diễn bên Mỹ để về Việt Nam kịp trong ngày sinh nhật 3 tuổi của con...

Mẹ con Trương Ngọc Ánh vui Giáng Sinh cùng trẻ em mồ côi

Mẹ con Trương Ngọc Ánh vui Giáng Sinh cùng trẻ em mồ côi

Trương Ngọc Ánh cùng con gái Bảo Tiên đã thực hiện chương trình trao quà từ thiện cho 200 em nhỏ mồ côi, có hoàn cảnh khó khăn nhân dịp Giáng Sinh 2014.

VNTM 2014: Dân mạng bức xúc vì màn loại kép khó hiểu

VNTM 2014: Dân mạng bức xúc vì màn loại kép khó hiểu

Trong tập 7 vừa phát sóng, hai thí sinh tiềm năng Quỳnh Châu và Đăng Khánh đã nói lời chia tay với chương trình trong sự tiếc nuối của ngôi nhà chung và phần...

Trang Trần 'hoá' Nô-bi-ta, quay về tuổi thơ cùng nhóm bạn Đô-rê-mon

Trang Trần 'hoá' Nô-bi-ta, quay về tuổi thơ cùng nhóm bạn Đô-rê-mon

Trang Trần 'hoá' Nô-bi-ta, quay về tuổi thơ cùng nhóm bạn Đô-rê-mon. Trong tạo hình của nhân vật Nô-bi-ta, Trang Trần khiến khán giả cực kỳ thích thú.

Siu Black tái ngộ 2 học trò trình diễn cực kỳ máu lửa

Siu Black tái ngộ 2 học trò trình diễn cực kỳ máu lửa

Siu Black tái ngộ 2 học trò Quốc Thiên và Thảo Trang, trình diễn cực kỳ máu lửa . Nữ ca sĩ đã có dịp gặp lại và cùng biểu diễn với 2 học trò của 2 mùa...

Vé máy bay giá rẻ Dichvubay.com
3