Đ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ứ 6, 31/10/2014 21:05 GMT +7
Vé máy bay giá rẻ Dichvubay.com

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: 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: 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: 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

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

UnZend Code

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

Movable type

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

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

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

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

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

tibetan costume tibetan hat

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

uk karen millen online

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

karen millen online uk

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

[q]

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

[Q] Cho em hoi cais

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

Vì sao nên yêu bản thân hơn để tiết kiệm tiền?

Vì sao nên yêu bản thân hơn để tiết kiệm tiền?

(Đời sống) - Chủ nghĩa vật chất và sự thanh thản trong tâm hồn không đi kèm với nhau. Tuy nhiên nó có sự tương tác qua lại, hỗ trợ nhau.

Diễm My hóa thân thành Jennifer Lawrence dịp lễ Halloween

Diễm My hóa thân thành Jennifer Lawrence dịp lễ Halloween

Lấy cảm hứng từ bộ phim The Hunger Games, nữ diễn viên trẻ Diễm My đã lựa chọn hóa trang thành nhân vật cô vô cùng yêu mến: nữ chiến binh Katniss Everdeen.

Nữ sinh mặc váy cưới đứng dưới ký túc xá cầu hôn bạn trai

Nữ sinh mặc váy cưới đứng dưới ký túc xá cầu hôn bạn trai

Màn cầu hôn lãng mạn của cô gái đã khiến vô số nam sinh khác trong ký túc vừa hâm mộ vừa ghen tị với người bạn trai may mắn của cô.

Bộ sưu tập áo blazer đáng mơ của Hoàng Thùy

Bộ sưu tập áo blazer đáng mơ của Hoàng Thùy

Quán quân Vietnam's Next Top Model Hoàng Thùy luôn nổi bật với phong cách thời trang cá tính, trẻ trung và năng động.

Hà Hồ đẹp tựa nữ thần trong bộ ảnh mới

Hà Hồ đẹp tựa nữ thần trong bộ ảnh mới

Trong bộ ảnh mới trước thềm Live Concert 2014, Hà Hồ được ví đẹp kiêu sa và tinh khôi tựa nữ thần.

Ảnh ông bố xăm trổ chăm con khiến dân mạng xúc động

Ảnh ông bố xăm trổ chăm con khiến dân mạng xúc động

Những hình ảnh ông bố 9x mình đầy hình xăm, chăm sóc cậu con trai kháu khỉnh nhận được sự quan tâm và nhiều bình luận tích cực của dân mạng.

Nam sinh quyết không đi học vì nhà quá giàu

Nam sinh quyết không đi học vì nhà quá giàu

“Tôi đã có 14 căn nhà. Vậy tại sao tôi phải đi học?”, một học sinh ở Bắc Kinh, Trung Quốc đã khiến nhiều người phải choáng váng khi đưa ra câu hỏi.

'Bà trùm' Venus tiết lộ hot girl 12 tuổi thay thế Andrea

'Bà trùm' Venus tiết lộ hot girl 12 tuổi thay thế Andrea

Theo Hạ Vy - “bà trùm” Venus miền Bắc đã tìm được một hot girl mới thay thế Andrea và cô bé sẽ là “vũ khí” lợi hại của công ty.

Cận cảnh nhan sắc 'vịt hóa thiên nga' của Trang Venus

Cận cảnh nhan sắc 'vịt hóa thiên nga' của Trang Venus

Hiện đang là tâm điểm của dư luận khi dính vào chuyện tình tay 3 với Tiến Dũng The Men, hot girl Trang Venus được cộng đồng mạng dành rất nhiều sự quan tâm.

Vé máy bay giá rẻ Dichvubay.com
28
Thống kê - Diễn đàn

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