NộI Dung
- 01. Đã đến lúc đi hangout
- 02. $ (’light’). FadeIn ();
- 03. Bàn tay của bạn được tạo ra cho trình duyệt
- 04. Trò chơi 3D được điều khiển bằng gamepad của bạn
- 05. Chạy Flash trên iPad của bạn
- 06. Viết ứng dụng cho điện thoại thông minh của bạn
- 07. Chạy Ruby và Python trong trình duyệt của bạn
- 08. Viết chương trình máy tính để bàn độc lập với hệ điều hành
- 09. Chạy máy chủ web
- 10. Trang web và chụp ảnh màn hình
- Chờ đợi! Còn nữa...
JavaScript đã đi một chặng đường dài kể từ khi nó ra đời vào năm 1995. Chắc chắn là một chặng đường khó khăn, đầy sự hiểu lầm, lạm dụng và thiếu hiểu biết. Nhưng thời thế đã thay đổi, kể từ năm năm qua, JavaScript ngày càng được chú ý nhiều hơn. Với sự chú ý nhiều hơn, nhiều nhà phát triển thực sự đang sử dụng JavaScript, sử dụng nó cho nhiều mục đích khác nhau và tận hưởng vẻ đẹp của nó. Câu chuyện cổ điển "Vịt con xấu xí", nếu bạn hỏi tôi.
Trong bài viết sau, chúng ta sẽ khám phá 10 trường hợp sử dụng cho JavaScript khác với những trường hợp sử dụng "trong trình duyệt" phổ biến mà bạn đã từng làm.
01. Đã đến lúc đi hangout
Bạn có nhớ tầm nhìn của những năm 80 về giao tiếp video giống như Facetime không?
Chỉ mất 20 năm trước khi điều này trở nên phổ biến do internet băng thông rộng có sẵn ở hầu hết mọi nơi và việc sử dụng nhiều phần mềm nhỏ gọi là Skype.
Với khả năng của Adobe Flash và nỗ lực của Google trong việc xây dựng mạng xã hội, chúng tôi đã có khả năng giao tiếp video trong trình duyệt của mình. Sẽ thật tuyệt nếu có những khả năng đó mà không sử dụng plugin của bên thứ ba chẳng hạn như Flash phải không?
May mắn thay, các nhà cung cấp trình duyệt cũng nghĩ như vậy và triển khai API "getUserMedia" vào phần mềm của họ. Đây là bước đầu tiên để truy cập các thiết bị như máy ảnh hoặc micrô trực tiếp từ trình duyệt của bạn.
Sử dụng Node.js làm máy chủ ở phía sau của một ứng dụng như vậy, việc truyền tín hiệu video qua mạng đến một hoặc nhiều máy khách dễ dàng một cách đáng kinh ngạc. Thật không may, vào thời điểm viết bài này, chỉ có Chrome và Opera đang hỗ trợ API, nhưng những người khác sẽ bắt kịp nhanh chóng.
Cách tiếp cận rõ ràng hơn cho giao tiếp hai chiều là thứ duy nhất của Chrome tại thời điểm này, được gọi là WebRTC. Do WebRTC, các máy khách được phép mở các kênh giao tiếp ngang hàng, kết nối trực tiếp máy khách với máy khách.
Để giải trí, hãy xem triển khai Sindre Sorhus ’Photo Booth được thực hiện trong 121 byte!
var video = document.getElementsByTagName ('video') [0],
Navigator.getUserMedia ('video', successCallback, errorCallback);
function successCallback (stream) {
video.src = luồng;
}
function errorCallback (error) {
console.log (lỗi);
}
02. $ (’light’). FadeIn ();
Nền tảng vi điều khiển Arduino là một ví dụ loại A cho trường hợp sử dụng JavaScript "ngoài hộp". Đối với những người bạn, những người không quen thuộc với nền tảng Arduino, đây là một câu nói siêu nổi tiếng từ trang web của nó:
"Arduino là một nền tảng tạo mẫu điện tử mã nguồn mở dựa trên phần cứng và phần mềm linh hoạt, dễ sử dụng. Nó dành cho các nghệ sĩ, nhà thiết kế, người có sở thích và bất kỳ ai quan tâm đến việc tạo ra các đối tượng hoặc môi trường tương tác."
Bản thân Arduino chỉ hỗ trợ mã được viết bằng C, điều này vẫn không có gì to tát. Với một vài dòng C (bên cạnh đó những dòng khác đã thực hiện công việc này cho bạn), Arduino có thể nhận lệnh thông qua cổng USB của nó thông qua giao thức cổng nối tiếp.
Nhưng làm thế nào bạn có thể truy cập cổng nối tiếp thông qua JavaScript? Rõ ràng không phải từ trình duyệt.
Node.js để giải cứu!
Do nỗ lực của người ủng hộ cộng đồng Chris Williams, chúng tôi có một thư viện cổng nối tiếp Node, nơi chúng tôi có thể gửi dữ liệu qua giao thức SP cũ. Đây là bước đột phá ban đầu, dựa trên thư viện, những người khác đã đưa ra một cách tiếp cận trừu tượng hơn cho các khả năng của Arduino. Ví dụ, thư viện node-arduino và duino.
Thư viện nóng nhất và thú vị nhất xung quanh khối dành cho lập trình Arduino được điều khiển bởi JS hiện tại là jonny-five. Hãy xem blog của Bocoup để biết một số điều thú vị mà họ đã làm với nền tảng Arduino và nhiều plugin. Ngoài ra, video JSConf của Nicolai Onken và Jörn Zaefferer có thể cung cấp cho bạn những gì có thể xảy ra ngày hôm nay với ít mã.
03. Bàn tay của bạn được tạo ra cho trình duyệt
Tầm nhìn tương lai của Báo cáo dành cho người thiểu số (tầm nhìn mà họ điều khiển máy tính bằng tay chứ không phải những chiếc ô tô xấu xí) đến gần hơn mỗi ngày. Một bước tiến lớn theo hướng này là bộ điều khiển của Microsoft ít cố gắng hơn, Kinect. Gameplay tuyệt vời mà bạn có thể nghĩ, nhưng điều này có liên quan gì đến JavaScript ?!
Với bản phát hành SDK Kinect của Microsoft, nhiều người đã vượt qua cầu nối trong việc sử dụng trình duyệt cho Kinect. Trước hết, các thành viên của ChildNodes đã xây dựng một thư viện kinect.js hoạt động hoàn chỉnh, cho phép sử dụng Microsoft’s Kinect trong trình duyệt của bạn.
Tôi thực sự khuyên bạn nên xem các bản trình diễn và video của họ, đó là một thành công. Tuy nhiên, một nhược điểm lớn của thư viện kinect.js là phải có một chương trình máy chủ WebSocket chạy ở phía sau máy khách (đó thực sự là keo Kinect -> C # -> JS).
Một vài sinh viên nổi tiếng của MIT đang làm việc trên một giải pháp để phá bỏ bức tường này, được gọi là DepthJS,
một plugin trong trình duyệt cho phép sử dụng Kinect cho Chrome và Safari, ngay cả đối với các trang web không được tối ưu hóa cho việc sử dụng dựa trên Kinect dưới bất kỳ hình thức nào. DepthJS hiện đang trong giai đoạn phát triển ban đầu, nhưng chắc chắn đáng để theo dõi.
04. Trò chơi 3D được điều khiển bằng gamepad của bạn
Bạn đã bao giờ thử chơi một trò chơi không có trình duyệt Flash ngày nay chưa? Khả năng đồ họa thật tuyệt vời, đặc biệt là khi bạn nhìn thấy những trò chơi nhái như Quake.
Nhưng khi chơi nội dung này, bạn luôn bị ràng buộc vào bàn phím của mình và (hầu hết) con chuột nhỏ. Đây là một bất lợi lớn, đặc biệt là đối với các trò chơi hành động, nó thực sự giữ họ lại từ trình duyệt.
Sẽ không tuyệt nếu bạn chỉ có thể cắm bộ điều khiển Xbox vào PC và bắt đầu chơi trò chơi trình duyệt yêu thích của mình phải không? Đây không phải là một tầm nhìn trong tương lai nữa, hãy gửi lời chào đến API Gamepad!
Nếu bạn đang có một gamepad xung quanh bàn làm việc của mình, hãy cắm nó vào ngay bây giờ và thưởng thức một số trò chơi đã sử dụng Gamepad API. Lập trình các điều khiển đầu vào cũng là một phần của bánh, hãy xem đoạn mã này hoặc thậm chí tốt hơn, hãy tự chạy:
div id = "gamepads"> / div>
script>
function gamepadConnected (sự kiện) {
var gamepads = document.getElementById ("gamepads"),
gamepadId = event.gamepad.id;
gamepads.innerHTML + = "Đã kết nối Gamepad (id =" + gamepadId + ")";
}
window.addEventListener ("MozGamepadConnected", gamepadConnected, false);
/ script>
Nếu bạn muốn biết thêm về khả năng 3D của trình duyệt, hãy xem công cụ mô phỏng 3D mã nguồn mở của Three.js và Jens Arps, Ascent được xây dựng trên nó. Mark Hammil hãy coi chừng, chúng tôi có thể cần bạn cho một phần tiếp theo của Wing Commander!
05. Chạy Flash trên iPad của bạn
Là một người yêu thích tiêu chuẩn mở và là fanboy của Apple, tôi phải thừa nhận rằng tôi thực sự muốn cảm ơn Apple vì đã không đưa Flash lên iPad và iPod, điều này đã thực sự bắt đầu một phong trào đón nhận các công nghệ mở như HTML5, CSS3 và JavaScript.
Là một nhân viên đại lý, tôi phải nói rằng đây là một tình huống thực sự tồi tệ đối với khách hàng của chúng tôi.
Hầu hết họ phải trả gấp đôi cho một quảng cáo hoặc chiến dịch đơn giản mà họ đang khởi chạy để có nội dung tương tác chạy trong IE7 hoặc IE8 cũ qua Flash và trên các trình duyệt hiện đại cũng như iDevices qua HTML5.
Việc lấp đầy các tính năng của trình duyệt cũ có các đường viền của nó, chủ yếu là hiệu suất được đặt tên. Vì vậy, không có khả năng chạy Flash trên những iDevices không có Flash đó sao?
Tất nhiên là có một cái và tất nhiên nó được tích hợp sẵn trong JavaScript.
Một phần lịch sử: Năm 2010 Tobias Schneider phát hành một thư viện nhỏ có tên Gordon
cho phép các tệp SWF chạy trực tiếp trong trình duyệt. Điều này hoạt động khá tốt đối với các tệp Flash nhỏ như quảng cáo chỉ sử dụng các chức năng lên đến phiên bản Flash 2, nhưng chức năng cấp cao hơn hoàn toàn không được bao gồm.
Khi Tobias gia nhập UXEBU của công ty ueberJS, họ đã nảy ra một ý tưởng mới.
Và như vậy, Bikeshed ra đời. Bản thân Bikeshed là một loại khung hoạt hình JavaScript, nhưng cũng là một JavaScript để Flash cho mọi thứ bạn muốn nó trở thành trình biên dịch (nó dựa trên bộ điều hợp, vì vậy bạn có thể viết bộ điều hợp cho bất kỳ thứ gì bạn muốn, mặc dù hành vi tiêu chuẩn là biên dịch Flash thành JavaScript) . Nó tương thích với Flash 10 và ActionScript 3. Hãy xem trang web của nó để tìm hiểu thêm về nhiều tính năng của nó bên cạnh trình biên dịch.
06. Viết ứng dụng cho điện thoại thông minh của bạn
Viết các ứng dụng gốc cho môi trường điện thoại di động là một con đường đầy sỏi đá. Nó bắt đầu với quyết định bạn muốn hỗ trợ nền tảng nào. Nếu ứng dụng của bạn chạy trên iPhone và iPad, thiết bị di động chạy Android, Windows Mobile, thiết bị Blackberry, máy tính chạy hệ điều hành web ..., v.v.
Mỗi nền tảng này có các API riêng và hầu hết sử dụng các ngôn ngữ lập trình khác nhau.
Nếu bạn đã sống sót sau cuộc chiến trình duyệt, hãy để tôi nói với bạn rằng đây là một cuộc chiến khó khăn hơn để tham gia. Nhà phát triển gần như không thể xây dựng ứng dụng cho tất cả các nền tảng này trong thời gian và ngân sách.
Vậy lam gi? Thuê thêm nhà phát triển? Tính phí nhiều hơn cho các ứng dụng? Hoặc tìm một cách tiếp cận tốt hơn để đảm bảo cơ sở mã của bạn chạy trên mọi thiết bị? Như hầu hết các bạn, tôi thích cách tiếp cận cuối cùng hơn.
Nhưng những ứng dụng này nên được xây dựng bằng gì? Điểm chung của tất cả các nền tảng này là gì? Bạn có thể biết câu trả lời, đó là một trình duyệt web và do đó là một công cụ JavaScript.
Đó là ý tưởng đằng sau Apache Cordova, được biết đến nhiều hơn với tên cũ là PhoneGap.
Cordova là một khung công tác JavaScript tóm tắt các API của mỗi môi trường di động và đưa ra một API JavaScript gọn gàng để kiểm soát tất cả chúng. Điều này cho phép bạn duy trì một cơ sở mã duy nhất, sau đó bạn xây dựng và triển khai trên các thiết bị di động khác nhau.
Xem các tài nguyên tại đây để tìm hiểu cách sử dụng Cordova để xây dựng các ứng dụng di động tuyệt vời mà bạn đã xây dựng một lần và sẽ chạy ở mọi nơi.
07. Chạy Ruby và Python trong trình duyệt của bạn
Mozilla, công ty đứng sau trình duyệt Firefox nổi tiếng, sử dụng rất nhiều chuyên gia, đó là điều chắc chắn. Một trong số họ là Alon Zakai, một kỹ sư tại Nhóm nghiên cứu Mozilla, người đã chế tạo ra một công cụ kỳ lạ có tên là Emscripten.
Emscripten cho phép bạn chuyển mã bit LLVM - có thể được tạo từ các thư viện dựa trên C / C ++, sang JavaScript. Nó thực hiện điều này bằng cách biên dịch các thư viện thành mã bit và sau đó, lấy mã bit đó và chuyển nó thành JavaScript. Gọn gàng, nhưng tôi thực sự có thể làm gì với điều này, bạn có thể tự hỏi mình?
Tôi có một câu hỏi dành cho bạn: bạn đã bao giờ nghe cụm từ "Sử dụng CoffeeScript và Prototype là cách gần nhất bạn có thể chạy Ruby trong trình duyệt" chưa? Không? Đừng lo lắng, vì điều này không còn đúng nữa.
Với Emscripten, bạn có thể chỉ cần lấy các nguồn Ruby, chuyển đổi chúng thành JavaScript và voilà, để Ruby thực chạy trong trình duyệt của bạn! Nhưng điều này không chỉ áp dụng cho Ruby, chẳng hạn như Python cũng đã được mô tả.
Hoặc kiểm tra Broadway bộ giải mã h.264 trong trình duyệt. Đó thực sự là một thư viện C ++ được mô phỏng!
Truy cập repl.it để xem một vài ngôn ngữ lập trình (bao gồm cả Ruby và Python) đang chạy trong trình duyệt của bạn!
08. Viết chương trình máy tính để bàn độc lập với hệ điều hành
Chúng tôi đã nói về việc nhắm mục tiêu nhiều nền tảng di động với sự trợ giúp của Apache Cordova trước đây. Không có gì ngạc nhiên khi JavaScript không chỉ có thể được sử dụng để nhắm mục tiêu các nền tảng di động, người bạn cũ của chúng ta là máy tính để bàn cũng có thể được xử lý.
Các giải pháp đầu tiên đến từ những người của Appcelerator với Titanium Desktop Suite và từ nền tảng Air được sử dụng rộng rãi của Adobe.
Nhưng với tư cách là những người yêu thích mã nguồn mở, chúng ta đang tìm kiếm một công nghệ dựa trên Node.js và cởi mở hơn. Gặp gỡ app.js! app.js là công nghệ web mở và trình tạo chương trình máy tính để bàn dựa trên Node.js, cho phép chúng tôi viết các chương trình máy tính để bàn thực với quyền truy cập hệ thống tệp, điều khiển cửa sổ và hơn thế nữa. Chúng tôi có thể dựa vào các API nền tảng ổn định của Node và xây dựng giao diện người dùng phần mềm của chúng tôi với HTML và CSS. Cũng giống như những thứ mới hấp dẫn nhất trong danh sách này ở đây.
app.js là một dự án khá non trẻ và do đó hiện tại mới chỉ hỗ trợ Windows và Linux, nhưng theo danh sách gửi thư, hỗ trợ Mac đang trên đà phát triển.
09. Chạy máy chủ web
Ngày nay, bạn sẽ không gây sốc cho bất kỳ ai khi nói với họ rằng trang web của bạn đang được cung cấp bởi một máy chủ web dựa trên JavaScript. Nếu bạn nghĩ lại cách đây hai hoặc ba năm và nói với các nhà phát triển web y như vậy, có lẽ họ đã cười nhạo bạn hoặc thậm chí tệ hơn.
Nhưng với sự thành công đáng kinh ngạc của Node.js, điều này còn xa vời so với bây giờ. Nó không những không làm mọi người ngạc nhiên nữa, do bản chất không đồng bộ của nó, Node.js là một điểm yếu về hiệu suất, đặc biệt là khi phải đối mặt với vấn đề của rất nhiều kết nối song song. Không chỉ hiệu suất của nó là một vụ nổ, API thực sự đơn giản cũng thu hút rất nhiều nhà phát triển. Hãy xem ví dụ "Hello World" từ thế giới Node, đó không chỉ là ví dụ in "Hello World" trên màn hình, mà còn là một máy chủ web http!
var http = request (’http’);
http.createServer (function (req, res) {
res.writeHead (200, {'Content-Type': 'text / pure'});
res.end ('Xin chào Thế giới n');
}). nghe (1337, ’127.0.0.1’);
Nếu bạn không bị cuốn hút bởi sự đơn giản này, thì tôi cũng không thể giúp bạn.
Một trong những phần tốt nhất của sự phổ biến (hay cường điệu) của Node là các công ty lớn như Microsoft đang thực sự hỗ trợ nó, tức là trong Dịch vụ đám mây Azure của họ!
10. Trang web và chụp ảnh màn hình
Vì vậy, cuối cùng nhưng không kém phần quan trọng, chúng ta hãy xem xét một dự án mà cá nhân tôi yêu thích vì đã cho phép tôi chạy các bài kiểm tra QUnit của tôi không cần dùng đến dòng lệnh. PhantomJS là một trình duyệt dựa trên WebKit không đầu với API dựa trên JavaScript (hoặc CoffeScript) gọn gàng.
Nhưng kiểm tra JavaScript và DOM của bạn không phải là trường hợp sử dụng duy nhất cho Phantom. Điều thực sự thu hút tôi là khả năng quét các trang web và cho phép bạn chụp ảnh màn hình của nó!
Vâng, bạn đang đọc đúng, với Phantom, bạn có thể xuất ra các trang web ở các định dạng đồ họa khác nhau và tất nhiên, điều đó dễ dàng như ăn trộm đồ ngọt của một đứa trẻ.
Hãy xem một tập lệnh thực hiện chính xác điều này:
var page = new WebPage ();
page.open ('http://google.com', function (status) {
page.render ('google.png');
phantom.exit ();
});
Đó là tất cả những gì bạn cần để tạo ảnh chụp màn hình và vì nó dựa trên JavaScript, bạn cũng có thể sử dụng jQuery và thao tác nội dung trang trước khi chụp ảnh màn hình!
Chờ đợi! Còn nữa...
Vì vậy, tôi hy vọng bạn cũng ngạc nhiên như tôi, khi tôi khám phá ra mọi công cụ này. Bài viết này chỉ giới thiệu sơ lược về những gì có thể xảy ra với JavaScript ngày nay. Có rất nhiều IDE giống như được viết hoàn toàn bằng JS Cloud9 hoặc các công cụ bảo mật cao được thực hiện với nó (Thẻ tín dụng của bạn được tạo bằng JavaScript).
Tôi hy vọng bạn cảm thấy được truyền cảm hứng, dành chút thời gian và chơi với một số dự án được đề cập ở đây, hoặc thậm chí tốt hơn là sử dụng một số công cụ này và xây dựng những thứ mới xung quanh chúng. Hầu hết điều này ở đây là mã nguồn mở và có các nhà phát triển đang tìm kiếm bạn để giúp họ cải thiện công việc của mình, ngay cả khi chỉ bằng cách sử dụng các công cụ, phát hiện lỗi và báo cáo chúng.
