Phát triển Java 2.0: JavaScript dành cho các nhà phát triển Java

Phát triển Java 2.0: JavaScript dành cho các nhà phát triển Java Tại sao JavaScript lại trở nên quan trọng JavaScript được Netscape giới thiệu vào năm 1995 và nó nhanh chóng được công chúng yêu thích. Lý do có liên quan nhiều đến sự xuất hiện của các trang web như là một nền tảng môi trường truyền thông thương mại: Với JavaScript, bạn có thể tác động đến hành vi của trang web trong trình duyệt bằng lập trình. Chỉ điều đó thôi cũng đã thú vị rồi! Việc xác nhận hợp lệ của dạng HTML và mánh khóe hình ảnh hạn chế đã là vấn đề quan trọng hàng đầu. Kể từ đó, JavaScript đã trải qua một vài thay đổi. Vào lúc đó Netscape đã có một sản phẩm là Netscape Application Server (Máy chủ ứng dụng Netscape), dựa trên JavaScript phía máy chủ để xây dựng các ứng dụng web. Vài năm sau đó, sự ra đời của Ajax và các thư viện tiện ích như JQuery, Prototype và ExtJS đã tiếp tục châm ngòi cho các mối quan tâm về JavaScript. Gần đây hơn, JavaScript phía máy chủ đã trở lại với Node.js, một framework I/O dựa trên sự kiện dùng để xây dựng các ứng dụng web phía máy chủ bằng cách sử dụng công cụ V8 JavaScript của Google. Để chăm lo cho tương lai của sản phẩm của mình, Netscape đã gửi JavaScript lên tổ chức quốc tế về tiêu chuẩn hóa Ecma. Đó là lý do tại sao một số người gọi JavaScript là ECMAScript. Quan trọng hơn, đó là lý do tại sao hầu hết các trình duyệt web đều hỗ trợ ECMAScript. Kết quả là, các ứng dụng web gặp khó khăn đều không sử dụng JavaScript ở đâu đó và JavaScript dường như không thể thay đổi được điều đó. Hiện tại chưa có ngôn ngữ tạo kịch bản lệnh nào khác tương thích trình duyệt xuất hiện. Node.js Node.js (xem phần Tài nguyên) là một framework ở phía máy chủ, nó dựa trên sự kiện, tính đồng thời rất cao. Các chương trình Node.js mở rộng quy mô hiệu quả hơn nhiều so với các chương trình có các luồng, trong khi giải quyết rất nhiều về các vấn đề liên quan đến lập trình đồng thời. Trong khi Node.js còn tương đối mới, sự đổi mới xung quanh nó khá thú vị. Hiểu biết JavaScript là chìa khóa để truy cập vào họ các công cụ đang phát triển có liên quan đến Node.js. Ngày nay, mặc dù tiếng xấu của nó vẫn còn sót lại, nhưng JavaScript được cho là một trong những ngôn ngữ được sử dụng nhiều nhất (và có ích) trên hành tinh. Nếu bạn là một lập trình viên Java (hoặc một lập trình viên Ruby, Python hay PHP), có thể là bạn hoặc đã sử dụng JavaScript hoặc bạn sẽ sử dụng trong tương lai không xa. Việc hiểu biết một số tính năng của JavaScript có thể giúp bạn xây dựng các ứng dụng web phổ biến hơn tiếp theo. Hơn nữa, nó sẽ cho phép bạn sử dụng Node.js và thậm chí mở mang hiểu biết của bạn về những gì đang xảy ra trong lúc triển khai bên dưới một sản phẩm trong GWT. Trong các phần tiếp theo, tôi sẽ tập trung vào các phần tử chính của cú pháp JavaScript, nêu bật các chuyến đi và các chỗ rẽ nhỏ đặc biệt có thể gây ngạc nhiên hoặc thích thú cho các nhà phát triển Java. Tuy nhiên, đầu tiên, tôi muốn xua tan một trong những lầm tưởng phổ biến về JavaScript: đó là bạn cần một trang web để tương tác với JavaScript. Về đầu trang Sử dụng JavaScript trong Chrome Về mặt lịch sử, để chạy được JavaScript, nó đòi hỏi phải có một trình duyệt và một trang web gián tiếp. Đối với một số nhà phát triển điều đó đã gây ra phiền toái và thậm chí trở ngại. May mắn thay, các trình duyệt đã phát triển; ngày nay cả Firefox lẫn Chrome đều cung cấp các IDE để chạy JavaScript. Tôi thích giao diện điều khiển JavaScript tiện lợi của Chrome để theo đuổi ngôn ngữ này. Giống như trình shell của Python hoặc IRB của Ruby, Chrome cung cấp một môi trường tương tác để tìm hiểu JavaScript mà không cần dùng một trang web nào. CoffeeScript Nếu bạn thích những gì JavaScript có thể làm nhưng không thích cú pháp của nó, bạn nên xem xét CoffeeScript. CoffeeScript là "ngôn ngữ nhỏ bé dùng để biên dịch thành JavaScript" — có nghĩa là, CoffeeScript làm cho việc lập trình JavaScript trở nên dễ dàng hơn bằng cách nới lỏng một số cú pháp của nó. Về nhiều mặt, CoffeeScript có cảm giác giống nhiều hơn với Ruby hay Python nhưng lại tạo ra một sự tương đương một-một với JavaScript. Xem phần Tài nguyên để tìm hiểu thêm về CoffeeScript. Để bắt đầu với giao diện điều khiển JavaScript của Chrome, bạn cần tải về bản Chrome phù hợp với hệ điều hành bạn đang dùng. Tiếp theo, mở một tab mới và chọn View > Developer > JavaScript Console (giao diện lập trình JavaScript). Ở dưới cùng của cửa sổ Chrome của mình, bạn sẽ thấy giao diện lập trình của nhà phát triển JavaScript hiện ra. Bạn có thể làm cho cửa sổ này trở thành một hộp thoại độc lập bằng cách chọn biểu tượng Undock ở góc dưới cùng bên trái của giao diện bàn điều khiển. Sau đó, bạn có thể chọn biểu tượng Console ở góc trên bên phải của hộp thoại để nhận được một cửa sổ rỗng đơn giản dùng cho việc tương tác với JavaScript, như thể hiện trong Hình 1: Hình 1. Tương tác với JavaScript trong Google Chrome Bây giờ chúng ta hãy xem xét một số cú pháp. Về đầu trang Các biến JavaScript JavaScript là một ngôn ngữ khá dễ chịu, ở chỗ nó cho phép bạn tạo ra một vài lỗi lập trình và vẫn tải trang web. Các phần tử JavaScript thường hỏng thầm lặng, chủ yếu đó là các tin tức tốt lành. Trang Web ban đầu sẽ vẫn còn thô nếu việc lập trình JavaScript cẩu thả cấm các trang được load. Điều đó nói rằng, khi chúng ta dựa vào JavaScript để làm những điều khác thường hơn (như việc cập nhật trạng thái trang không đồng bộ), việc tạo mã JavaScrip không cẩn thận sẽ gây ra nhiều vấn đề. Vì lý do này mà các nhà phát triển Java nên dành thời gian để hiểu một số khía cạnh nhất định về cú pháp của JavaScript. Việc xử lý các biến của JavaScript đặc biệt quan trọng và cần hiểu rõ. Ví dụ, bạn có thể định nghĩa một biến có tên là foo chẳng hạn hoặc trực tiếp hoặc thông qua việc khai báo var, như trong Liệt kê 1: Liệt kê 1. Biến foo foo = 'foo' var bar = 'bar' Biến foo trong Liệt kê 1 là một biến hợp lệ trong JavaScript. Nhưng vì nó thiếu một khai báo var, nên nó là một biến toàn cục. Do đó cần xem xét cẩn thận các biến được định nghĩa với var (ví dụ, trong hàm có định nghĩa các biến trong đó). Nói chung, không nên dùng các biến toàn cục. Vì chúng có thể dễ dàng được truy cập và thay đổi ở bất cứ đâu trong ứng dụng JavaScript, nên việc sử dụng chúng có thể dẫn đến lỗi mà ta không hay biết. Vì vậy, khi bạn lập trình JavaScript, đừng quên var trong các biến của mình. Về đầu trang Các kiểu nguyên thủy và các đối tượng Trong khi JavaScript không đơn giản, thì nó lại khá đơn giản khi nói đến các kiểu. Trong thực tế, JavaScript thực sự chỉ có bốn kiểu cơ bản, ba trong số đó là các kiểu nguyên thủy. Các kiểu nguyên thủy của JavaScript là Number, String và Boolean. Bạn có thể xem thông tin các kiểu này thông qua toán tử typeof tiện dụng của JavaScript. Hãy cùng dùng thử toán tử này. Trong giao diện lập trình JavaScript của Chrome, hãy gõ đoạn mã trong Liệt kê 2: Liệt kê 2. Kích hoạt các kiểu var string = "test" typeof string Bạn sẽ thấy giao diện bàn điều khiển in ra giá trị "string." Bạn cũng lưu ý rằng các dấu chấm phẩy là tùy chọn trong JavaScript. Giống như hầu hết các ngôn ngữ phổ biến, một string được mô tả bằng các dấu nháy; cho nên, các số được mô tả bằng các số. Các kiểu Boolean được mô tả bằng các giá trị true (đúng) hay false (sai), không có các dấu nháy. Liệt kê 3. Các số và chân lý của JavaScript var aNumber = 10 var anotherNumber = 0.99 var aBool = true var notABoolean = "false" Bạn sẽ lưu ý rằng JavaScript không phân biệt giữa các kiểu số; các số chỉ là các số, theo các định dạng khác nhau. JavaScript cũng hỗ trợ các đối tượng tổng quát có các kiểu cá thể trong và chính bản thân các đối tượng này, chẳng hạn như Array, như trong Liệt kê 4: Liệt kê 4. Một cá thể Array > var myArray = ["Hello", 1, true] > typeof myArray "object" > myArray instanceof Array true Các Array (Mảng) trong JavaScript rất thích các danh sách theo các ngôn ngữ khác: người ta có thể tạo ra chúng với kích cỡ tùy ý và có thể chứa bất cứ thứ gì mà bạn muốn đưa vào các mảng đó. Giống như trong Ruby hoặc Groovy, có thể tạo ra các Array của JavaScript bằng một cú pháp bằng chữ: []. Hơn nữa, các Array của JavaScript hỗ trợ các phương thức (được hiển thị trong Liệt kê 5) được bạn dự kiến trong các ngôn ngữ khác có hỗ trợ các danh sách: Liệt kê 5. Các phương thức của Array > var myArray = ["Hello", 1, true] > myArray[0] "Hello" > myArray.length 3 > myArray.pop() true > myArray ["Hello", 1] > myArray.pop() 1 > myArray ["Hello"] > myArray.push("pushed") 2 > myArray ["Hello", "pushed"] Bạn có thể nhận được một giá trị của Array thông qua vị trí của nó, bắt đầu từ số không. Các Array đáp lại với push và pop, ở đây push thêm một mục (vào vị trí cuối cùng trong danh sách của nó) và pop loại bỏ một mục (giống như một ngăn xếp, ra khỏi vị trí cuối cùng). Các Array cũng hỗ trợ việc lặp lại, được hiển thị trong Liệt kê 6: Liệt kê 6. Lặp lại qua một Array > var myArray = [1,2] > for(var i = 0; i < myArray.length; i++) { console.log(myArray[i]) } 1 2 Về đầu trang Ép kiểu JavaScript không chỉ là một ngôn ngữ định kiểu yếu — nó thậm chí còn yếu hơn so với Ruby hoặc Groovy! JavaScript cố ép kiểu các đối tượng thành bất cứ kiểu nào có ý nghĩa tại một điểm đã cho trong đoạn mã. Điều đó có ý nghĩa trong bối cảnh ban đầu người ta đã phát minh ra JavaScript: tương tác trang web. Mã JavaScript viết cẩu thả không nên cấm một ai đó đọc một bài báo trực tuyến! Ép kiểu không phải là duy nhất với JavaScript, nhưng kiểu riêng của JavaScript là khá linh hoạt. Điều này có thể là một điều tốt hay điều xấu tùy thuộc vào quan điểm của bạn. Sự không chặt chẽ của JavaScript có thể ẩn giấu các lỗi, giống như các biến toàn cầu đã có. Ví dụ, tôi có thể định nghĩa một Array và sau đó vô tình cố làm một cái gì đó bằng số với nó hoặc thậm chí một số móc nối String, như trong Liệt kê 7: Liệt kê 7. Tính linh hoạt về kiểu của JavaScript > var myArray = [1,2] > console.log(2 * myArray) > console.log("A" + myArray) Trong trường hợp này, thông báo log đầu tiên sẽ in ra NaN, trong khi thông báo thứ hai sẽ in ra A1,2. Trong cả hai trường hợp, mã "đã làm việc" như không có lỗi gì cả — JavaScript chỉ cần tiếp tục truyền tải. Đây là việc định kiểu yếu tại điểm cực trị của nó. Mã tương tự trong Ruby sẽ không làm việc như vậy, như trong Liệt kê 8: Liệt kê 8. Ruby không làm theo cách đó > array = ["A", "B"] > ans = 2 * array Mã Ruby trong Liệt kê 8 sẽ báo lỗi là: TypeError: Array can't be coerced into Fixnum Và nếu tôi cố gắng thêm "A" vào array, nó sẽ tạo ra: TypeError: can't convert Array into String Nếu tôi đã dùng thử thủ thuật tương tự trong Groovy, tôi sẽ nhận được kết quả đại loại như: groovy.lang.MissingMethodException: No signature of method: java.lang.Integer.plus() is applicable for argument types: (java.util.ArrayList) values: [[A, B]] Vì vậy, bạn có thể thấy các mức định kiểu yếu khác nhau trong hành động. Rõ ràng, nếu có một thước đo về tình trạng yếu kém về kiểu, JavaScript sẽ là yếu nhất trong tất cả các ngôn ngữ đó! Về đầu trang Các hàm JavaScript Một hàm JavaScript, giống như một phương thức Java, là một cấu kiện để định nghĩa và đóng gói hành vi sử dụng lại. Các hàm trong JavaScript thoạt nhìn và cảm nhận rất giống như các bao đóng của Groovy. Các hàm trong JavaScript là các đối tượng. Trong thực tế, chúng là đối tượng hạng nhất, rất khác các phương thức trong mã Java. Vì các hàm JavaScript là các đối tượng, nên chúng có thể được chuyển sang các hàm khác và có thể được gọi tùy ý. Các hàm được định nghĩa bằng từ khóa function (hàm). Bạn có thể chỉ rõ các đối số như bạn muốn trong một khai báo phương thức theo ngôn ngữ Java, thêm nữa bạn có thể trả về một cái gì đó từ một hàm JavaScript. Không giống như các ngôn ngữ động, như Groovy hoặc Ruby, ở đây một cuộc gọi trả về là tùy chọn (và do đó dòng cuối cùng của bất kỳ phương thức nào đều được trả về), các hàm trong JavaScript phải sử dụng một câu lệnh return nếu chúng muốn trả về một cái gì đó; nếu không, chúng chẳng trả về cái gì cả. Bạn gọi các hàm trong JavaScript như bạn vẫn gọi các bao đóng trong Groovy. Trong Liệt kê 9, tôi định nghĩa một hàm đơn giản, không có tham số nào. Mục đích của hàm này là in "blah" ra giao diện bàn lập trình JavaScript trong Chrome. Liệt kê 9. Định nghĩa và gọi một hàm theo JavaScript > function blah() { console.log("blah"); } > blah() //prints blah > blah.call() //prints blah > blah.apply() //prints blah Bạn có thể gọi một hàm trực tiếp bằng các dấu ngoặc đơn (đó là, ()), qua phương thức call (gọi) hoặc qua phương thức apply (áp dụng). Trạng thái hạng nhất của các đối tượng hàm được trình bày rõ ở đây. Liệt kê 10 cho thấy điều gì sẽ xảy ra khi tôi cố gắng gọi một phương thức sai dựa vào hàm blah: Liệt kê 10. Các hàm như là các đối tượng trong JavaScript > blah.foo() Trong trường hợp này, bạn sẽ thấy một thông báo lỗi nói rằng rằng foo không phải là một phương thức đã định nghĩa, như sau: TypeError: Object function blah() { console.log("blah"); } has no method 'foo' Bây giờ hãy đọc lại thông báo lỗi đó. Nó nói rằng foo chưa được định nghĩa, điều đó ngụ ý rằng nếu nó đã được định nghĩa thì mọi thứ đã phải hoạt động được rồi. Về đầu trang Các lớp trong JavaScript JavaScript hỗ trợ các kiểu nguyên thủy, mà tôi đã thảo luận. Nó cũng hỗ trợ các đối tượng, như Array. JavaScript không hỗ trợ các lớp — ít nhất là không phải theo nghĩa của ngôn ngữ Java cổ điển. Vì JavaScript là một ngôn ngữ dựa trên nguyên mẫu, bạn không định nghĩa các lớp: thay vào đó, hành vi được sử dụng lại thông qua việc nhân bản các đối tượng hiện có. Như vậy, trong JavaScript, bạn không định nghĩa các đối tượng lớp, bạn định nghĩa chúng trong các hàm, sau đó sử dụng các hàm lồng nhau để định nghĩa hành vi — đại loại bạn đã thấy trong hành động. Để mô phỏng một lớp, bạn định nghĩa một hàm. Bạn có thể đặt cho nó một tên (đó là, một tên lớp), chỉ rõ các tham số (như trong một hàm tạo) và thậm chí sử dụng từ khóa .this, về cơ bản nó có nghĩa là tham khảo một biến trong phạm vi của hàm đó. Hơn nữa có thể đặt bí danh cho các hàm bên trong để trông giống như các cuộc gọi phương thức. Để chứng minh, trong Liệt kê 11, tôi sẽ tạo ra một nguyên mẫu Message (còn được gọi là một lớp) siêu đơn giản. Tôi sẽ cung cấp một vài tham số (thông báo từ ai và thông báo gửi tới ai và thông báo thực tế) và lớp sẽ đại diện cho thông báo của tôi là JSON. Liệt kê 11. Các hàm như là các lớp trong JavaScript function Message(to, from, msg){ this.to = to; this.from = from; this.msg = msg; this.asJSON = function(){ return "{'to':'" + this.to + "', 'from':'" + this.from + "', 'message':'" + this.msg + "'}"; } } Trong Liệt kê 11, tôi đã định nghĩa một hàm Message — một đối tượng có một tên và một vài thuộc tính; cụ thể là to, from và msg. Sau đó tôi đã định nghĩa một thuộc tính (asJSON) trỏ đến một hàm bên trong với công việc của hàm là chèn thủ công một đại diện chuỗi của thông báo JSON của tôi. Lưu ý rằng tôi cũng có thể định nghĩa "lớp" này trong một trang web, tải nó bằng Chrome, mở giao diện bàn điều khiển JavaScript và sử dụng nó theo tương tác. Đó là những gì đang xảy ra trong Liệt kê 12: Liệt kê 12. Sử dụng các lớp trong JavaScript > var message = new Message('Andy', 'Joe', 'Party tonight!'); > message.asJSON(); "{'to':'Andy', 'from':'Joe', 'message':'Party tonight!'}" Bạn có thấy hầu như mã này trông giống như mã Groovy hoặc thậm chí mã Java (nếu không có var) không? Thực tế là, hoàn toàn có thể sử dụng các kỹ thuật lập trình hướng đối tượng (OOP) để xây dựng các ứng dụng JavaScript (có nghĩa là, các chương trình chứa các đối tượng có dữ liệu và các phương thức tương tác với nhau).