Nilalaman
- 01. Oras na para sa isang hangout
- 02. $ ('ilaw'). FadeIn ();
- 03. Ang iyong mga kamay ay ginawa para sa browser
- 04. Mga larong 3D na kinokontrol sa iyong gamepad
- 05. Pagpapatakbo ng Flash sa iyong iPad
- 06. Pagsusulat ng mga app para sa iyong smartphone
- 07. Pagpapatakbo ng Ruby at Python sa iyong browser
- 08. Pagsusulat ng mga independyenteng programa ng desktop sa OS
- 09. Pagpapatakbo ng isang webserver
- 10. Webscraping at pag-screenshot
- Teka lang! Meron pa...
Malayo na ang napalayo ng JavaScript mula nang ipanganak ito noong 1995. Isang mahirap na paraan para sigurado, puno ng hindi pagkakaunawaan, maling paggamit at kamangmangan. Ngunit ang mga oras ay nagbago, mula noong huling limang taon na ang JavaScript ay nakakakuha ng higit na pansin. Sa higit na pansin, maraming mga tagabuo ang talagang gumagamit ng JavaScript, ginagamit ito para sa maraming iba't ibang mga layunin at tinatangkilik ang kagandahan nito. Klasikal na "Ugly Duckling" na kuwento, kung tatanungin mo ako.
Sa susunod na artikulo, matutuklasan namin ang 10 mga kaso ng paggamit para sa JavaScript na naiiba mula sa karaniwang "sa browser" na, nakasanayan mo na.
01. Oras na para sa isang hangout
Naaalala mo ba ang 80s na paningin ng tulad ng video sa pakikipag-usap sa video?
Tumagal lamang ng 20 taon bago ito naging mainstream dahil sa halos saanman magagamit ang broadband internet at ang mabigat na paggamit ng isang maliit na software na tinatawag na Skype.
Sa mga kakayahan ng Adobe's Flash at pagtatangka ng Google na bumuo ng isang social network, mayroon na kaming mga kakayahan ng komunikasyon sa video sa aming browser. Hindi ba magiging cool na magkaroon ng mga kakayahang iyon nang hindi gumagamit ng isang third-party na plug-in tulad ng Flash?
Sa kasamaang palad, pareho ang naisip ng mga vendor ng browser at ipinatupad ang "getUserMedia" API sa kanilang software. Ito ang unang hakbang upang ma-access ang mga aparato tulad ng mga camera o mikropono nang direkta mula sa iyong browser.
Ang paggamit ng Node.js bilang isang server sa likuran ng naturang application, napakaganda ng pagdala ng signal ng video sa hangin sa isa o higit pang mga kliyente. Sa kabutihang palad, sa oras ng pagsulat nito, ang Chrome at Opera lamang ang sumusuporta sa API, ngunit ang iba ay mabilis na makahabol.
Ang mas malinis na diskarte para sa isang dalawahang paraan ng komunikasyon ay isang bagay lamang sa Chrome sa ngayon, na tinatawag na WebRTC. Dahil sa WebRTC, pinagana ang mga kliyente upang buksan ang mga peer to peer na mga channel ng komunikasyon, direktang pagkonekta ng kliyente sa client.
Para sa kasiyahan, tingnan ang pagpapatupad ng Photo Booth ng Sindre Sorhus na nagawa sa 121 bytes!
var video = document.getE ElementByTagName (’video’) [0],
navigator.getUserMedia ('video', tagumpayCallback, errorCallback);
mag-andar ng tagumpayCallback (stream) {
video.src = stream;
}
error sa pag-andarCallback (error) {
console.log (error);
}
02. $ ('ilaw'). FadeIn ();
Ang platform ng Arduino microcontroller ay isang marka Isang halimbawa para sa isang "out of the box" na kaso ng paggamit ng JavaScript. Para sa iyo, na hindi pamilyar sa platform ng Arduino, narito ang isang sobrang tanyag na quote mula sa website nito:
"Ang Arduino ay isang open-source electronics prototyping platform batay sa kakayahang umangkop, madaling gamiting hardware at software. Ito ay inilaan para sa mga artista, taga-disenyo, libangan, at sinumang interesado sa paglikha ng mga interactive na bagay o kapaligiran."
Ang Arduino mismo ay sumusuporta lamang sa code na nakasulat sa C, na wala pa ring malaking pakikitungo. Sa ilang mga linya ng C (bukod sa nagawa ng iba ang gawaing ito para sa iyo), ang Arduino ay maaaring makatanggap ng mga utos sa pamamagitan ng USB port sa pamamagitan ng serial port protokol.
Ngunit paano mo maa-access ang serial port sa pamamagitan ng JavaScript? Malinaw na hindi mula sa browser.
Node.js upang iligtas!
Dahil sa mga pagsisikap ng tagapagtaguyod ng komunidad na si Chris Williams, mayroon kaming isang Node serial port library, kung saan maaari kaming magpadala ng data sa lumang SP protocol. Ito ang paunang tagumpay, batay sa silid-aklatan ang ibang mga tao ay nakagawa ng isang mas abstract na diskarte para sa mga kakayahan ng Arduino. Halimbawa ang node-arduino at duino library.
Ang pinakamainit at pinaka-cool na aklatan sa paligid ng bloke para sa JS na hinimok ang Arduino na programa sa ngayon ay jonny-five. Suriin ang blog ng Bocoup para sa ilang mainit na tae na nagawa nila sa platform ng Arduino at maraming mga plug-in. Gayundin ang video ng JSConf mula kay Nicolai Onken at Jörn Zaefferer ay maaaring bigyan ka ng isang pag-ikot ng kung ano ang posible ngayon na may maliit na code.
03. Ang iyong mga kamay ay ginawa para sa browser
Ang paningin sa hinaharap ng Minority Report (ang kung saan kinokontrol nila ang mga computer gamit ang kanilang mga kamay, hindi ang mga pangit na kotse) ay papalapit araw-araw. Ang isang malaking hakbang sa direksyon na ito ay ang kontrol ng kontrol ng Microsoft na hindi gaanong naglalaro, ang Kinect. Kamangha-manghang gameplay na maaari mong isipin, ngunit ano ang kaugnayan nito sa JavaScript ?!
Sa paglabas ng Kinect SDK ng Microsoft, isang pangkat ng mga tao ang tumawid sa tulay ng ginagamit ng browser para sa Kinect. Una sa lahat ng mga tao ng ChildNodes na nagtayo ng isang kumpletong gumaganang library ng kinect.js, na nagbibigay-daan sa paggamit ng Microsoft's Kinect sa iyong browser.
Masidhing inirerekumenda kong suriin ang kanilang mga demo at video, isang pasabog. Gayunpaman, ang isang pangunahing sagabal ng library ng kinect.js ay, na dapat mayroong isang programa ng WebSocket server na tumatakbo sa likuran ng kliyente (iyon talaga ang Kinect -> C # -> kola ng JS).
Ang ilang mga mag-aaral ng katanyagan ng MIT ay nagtatrabaho sa isang solusyon upang sirain ang pader na ito, na tinatawag na DepthJS,
isang sa browser plugin na nagbibigay-daan sa paggamit ng Kinect para sa Chrome at Safari, kahit na para sa mga site na hindi na-optimize para sa isang paggamit ng batay sa Kinect sa anumang form. Ang DepthJS ay kasalukuyang nasa maagang yugto ng pag-unlad, ngunit tiyak na sulit na subaybayan.
04. Mga larong 3D na kinokontrol sa iyong gamepad
Nasubukan mo na bang maglaro ng isang hindi Flash na laro ng browser ngayon? Kamangha-mangha ang mga kakayahan sa grapiko, lalo na kapag nakakita ka ng mga clone ng laro tulad ng Quake.
Ngunit kapag nilalaro ang bagay na ito palagi kang nakatali sa iyong keyboard at sa (karamihan) clunky mouse. Ito ay isang pangunahing kawalan, lalo na para sa mga laro ng aksyon, pinipigilan talaga nila ito mula sa browser.
Hindi ba magiging cool kung mai-plug mo lang ang iyong Xbox controller sa iyong PC at nagsimulang maglaro ng iyong paboritong browser game? Hindi na ito pangitain sa hinaharap, kumusta sa Gamepad API!
Kung nagkakaroon ka ng isang gamepad sa paligid ng iyong mesa, i-plug ito ngayon at magsaya sa ilang mga laro, gumagamit na ng Gamepad API. Ang pag-program ng mga kontrol sa pag-input din ay isang piraso ng cake, suriin ang code na ito na snippet o kahit na mas mahusay, patakbuhin ito mismo:
div id = "gamepads"> / div>
script>
pag-andar gamepadConnected (kaganapan) {
var gamepads = document.getElementById ("gamepads"),
gamepadId = event.gamepad.id;
gamepads.innerHTML + = "Gamepad Connected (id =" + gamepadId + ")";
}
window.addEventListener ("MozGamepadConnected", gamepadConnected, false);
/ script>
Kung nais mong malaman ang higit pa tungkol sa mga kakayahan ng 3D ng mga browser suriin ang Three.js at Jens Arps 'open source 3D simulator engine Ascent na itinayo sa tuktok nito. Mag-ingat si Mark Hammil, maaaring kailanganin ka namin para sa isa pang sumunod na Wing Commander!
05. Pagpapatakbo ng Flash sa iyong iPad
Bilang isang bukas na pamantayan ng kalaguyo at Apple fanboy kailangan kong aminin na talagang nais kong pasalamatan ang Apple sa hindi paglalagay ng Flash sa iPad at iPod, nagsimula talaga ito ng isang kilusan ng pagtanggap ng mga bukas na teknolohiya tulad ng HTML5, CSS3 at JavaScript.
Bilang empleyado ng ahensya, sasabihin ko na ito ay talagang isang masamang sitwasyon para sa aming mga customer.
Karamihan sa kanila ay kailangang magbayad ng dalawang beses para sa isang simpleng ad o kampanya na inilulunsad nila upang magkaroon ng interactive na nilalaman na tumatakbo sa lumang IE7 o IE8 sa pamamagitan ng Flash at sa mga modernong browser pati na rin ang mga iDevice sa pamamagitan ng HTML5.
Ang mga tampok ng polyfilling ng mga lumang browser ay may mga hangganan, na pinangalanang pagganap. Kaya't wala bang kakayahang magpatakbo ng Flash sa mga Flashless iDevices?
Siyempre mayroong isa, at syempre nakabuo ito sa JavaScript.
Isang piraso ng kasaysayan: Noong 2010 ay naglabas si Tobias Schneider ng isang maliit na silid-aklatan na tinatawag na Gordon
na pinapayagan ang mga SWF file na tumakbo nang direkta sa browser. Napakahusay na gumana nito para sa maliliit na mga file ng Flash tulad ng mga ad na gumagamit lamang ng mga pag-andar hanggang sa Flash na bersyon 2, ngunit ang pag-andar ng mas mataas na antas ay hindi talaga kasama.
Nang sumali si Tobias sa kumpanya ng ueberJS na UXEBU, nakagawa sila ng isang bagong ideya.
At sa gayon, ipinanganak ang Bikeshed. Ang Bikeshed mismo ay isang uri ng balangkas ng animasyon ng JavaScript, ngunit ito rin ay isang JavaScript sa Flash sa lahat ng nais mong maging tagatala (batay ito sa adapter, upang maaari kang magsulat ng mga adapter para sa anumang nais mo, kahit na ang pamantayan ng pag-uugali ay ang pag-iipon ng Flash sa JavaScript) . Tugma ito sa Flash 10 at ActionScript 3. Tumingin sa web page nito upang matuto nang higit pa tungkol sa maraming mga tampok bukod sa tagatala.
06. Pagsusulat ng mga app para sa iyong smartphone
Ang pagsusulat ng mga katutubong application para sa mga kapaligiran sa mobile phone ay isang mabatong kalsada. Nagsisimula ito sa desisyon kung aling platform ang nais mong suportahan. Dapat bang tumakbo ang iyong application sa isang iPhone at iPad, isang mobile device na pinapatakbo ng Android, Windows Mobile, mga Blackberry device, batay sa webOS ... at iba pa.
Ang bawat isa sa mga platform na ito ay may sariling mga API at karamihan ay gumagamit ng iba't ibang mga wika ng programa.
Kung nakaligtas ka sa mga digmaan sa browser, hayaan mong sabihin ko sa iyo na ito ay isang paraan na mas mahirap makipaglaban. Halos imposible para sa isang developer na bumuo ng isang application para sa lahat ng mga platform na ito sa oras at badyet.
Ano ang gagawin? Kumuha ng mas maraming mga developer? Sisingilin pa para sa mga app? O makahanap ng isang mas mahusay na diskarte upang matiyak na tumatakbo ang iyong code base sa bawat aparato? Tulad ng karamihan sa inyo, mas gugustuhin ko ang huling diskarte.
Ngunit sa ano dapat itayo ang mga app na ito? Ano ang pagkakatulad ng lahat ng mga platform na ito? Maaari mong malaman ang sagot, ito ay isang web browser at samakatuwid ay isang JavaScript engine.
Iyon ang ideya sa likod ng Apache Cordova, na mas kilala sa ilalim ng dating pangalang PhoneGap.
Ang Cordova ay isang balangkas ng JavaScript na hinuhugot ang mga API ng bawat kapaligiran sa mobile at inilalantad ang isang maayos na JavaScript API upang makontrol ang lahat sa kanila. Pinapayagan ka nitong mapanatili ang isang solong base ng code, na pagkatapos ay itatayo at i-deploy mo sa iba't ibang mga mobile device.
Suriin ang mga mapagkukunan dito upang malaman kung paano gamitin ang Cordova upang makabuo ng mga kick ass mobile app na binubuo mo nang isang beses at tatakbo saanman.
07. Pagpapatakbo ng Ruby at Python sa iyong browser
Ang Mozilla, ang kumpanya sa likod ng sikat na browser ng Firefox, ay gumagamit ng maraming mga geeks, sigurado iyon. Ang isa sa kanila ay si Alon Zakai isang inhinyero sa Mozilla Research Team, na nagtayo ng isang freaky tool na tinatawag na Emscripten.
Hinahayaan ka ng Emscripten na kumuha ng bitcode ng LLVM - na maaaring mabuo mula sa mga library na batay sa C / C ++, sa JavaScript. Ginagawa ito sa pamamagitan ng pag-iipon ng mga aklatan sa bit code at pagkatapos, pagkuha ng bit code na iyon at baguhin ito sa JavaScript. Mahusay, ngunit ano ang magagawa ko rito, maaari mong tanungin ang iyong sarili?
Mayroon akong kontra na tanong para sa iyo: narinig mo na ba ang pariralang "Ang paggamit ng CoffeeScript at Prototype ay ang pinakamalapit na makukuha mo sa pagpapatakbo ng Ruby sa browser"? Hindi? Huwag magalala, sapagkat hindi na ito totoo.
Sa Emscripten maaari mo lamang kunin ang mga mapagkukunan ng Ruby, ibahin ang mga ito sa JavaScript at voilà, magkaroon ng totoong Ruby na tumatakbo sa iyong browser! Ngunit hindi ito nalalapat lamang kay Ruby, halimbawa, ang Python ay din emscriptened.
O suriin ang sa browser h.264 decoder Broadway. Iyon ay talagang isang emscriptened C ++ library!
Pumunta sa repl.it upang makita ang ilang mga wika ng programa (kasama ang Ruby at Python) na tumatakbo sa iyong browser!
08. Pagsusulat ng mga independyenteng programa ng desktop sa OS
Pinag-usapan namin ang tungkol sa pag-target ng maraming mga mobile platform sa tulong ng Apache Cordova dati. Hindi nakakagulat, ang JavaScript ay hindi lamang magagamit upang mag-target ng mga mobile platform, ang aming dating kaibigan na ang computer ng desktop ay maaaring malutas din.
Ang mga unang solusyon ay nagmula sa mga tao ng Appcelerator na may Titanium Desktop Suite at mula sa Adobe na malawak na ginamit na Air platform.
Ngunit bilang mga mapagmahal na bukas na mapagkukunan na lahat tayo, isang mas bukas at teknolohiyang batay sa Node.js ang hinahanap natin. Kilalanin ang app.js! Ang app.js ay isang bukas na webtechnology at tagabuo ng programang nakabatay sa Node.js, na nagbibigay-daan sa amin upang magsulat ng mga totoong programa sa desktop na may pag-access ng file system, mga kontrol sa window at marami pa. Maaari kaming umasa sa matatag na mga platform ng cross platform ng Node at buuin ang aming mga softwares UI gamit ang HTML at CSS. Tulad ng pinaka-mainit na bagong mga bagay-bagay sa listahang ito dito.
Ang app.js ay isang medyo batang proyekto at samakatuwid ay sumusuporta lamang sa Windows at Linux sa ngayon, ngunit ayon sa mailing list, malapit na ang suporta ng Mac.
09. Pagpapatakbo ng isang webserver
Ngayong mga araw na ito, hindi ka nakakagulat sa sinuman kapag sinabi mo sa kanila na ang iyong website ay hinahatid ng isang batay sa webserver ng JavaScript. Kung iisipin mo dalawa o tatlong taon na ang nakakalipas, at sinabi sa mga developer ng web nang eksakto na pareho, malamang na pinagtawanan ka nila o mas masahol pa.
Ngunit sa hindi kapani-paniwala na tagumpay ng Node.js ito ay sa kabutihang-palad na malayo sa ngayon. Hindi lamang ito nakakagulat sa mga tao, dahil sa hindi asynchronous na kalikasan Node.js na ito ay isang wunderkind sa pagganap, lalo na pagdating sa pagharap sa problema ng maraming magkakatulad na koneksyon. Hindi lamang ang pagganap nito ay isang sabog, ang tunay na simpleng API ay umaakit ng maraming mga developer, din. Suriin natin ang halimbawang "Hello World" mula sa mundo ng Node, hindi lamang ito isang naka-print na "Hello World" sa halimbawa ng screen, ito ay isang http webserver!
var http = nangangailangan (’http’);
http.createServer (pagpapaandar (req, res) {
res.writeHead (200, {’Type-Content’: ’text / payak’});
res.end ('Hello World n');
}). makinig (1337, ’127.0.0.1’);
Kung hindi ka nabulabog ng pagiging simple na ito, aba, hindi rin kita matutulungan.
Ang isa sa mga pinakamahusay na bahagi ng katanyagan ng Node (o hype) ay, na ang malalaking kumpanya tulad ng Microsoft ay talagang sinusuportahan ito, ibig sabihin sa kanilang Azure Cloud Services!
10. Webscraping at pag-screenshot
Kaya, huli ngunit hindi pa huli, tingnan natin ang isang proyekto na personal kong mahal para sa pagpapaalam sa akin na patakbuhin ang aking mga pagsusulit sa QUnit na walang ulo sa linya ng utos. Ang PhantomJS ay isang browser na walang ulo sa WebKit na may maayos na JavaScript (o CoffeScript) batay sa API.
Ngunit ang pagsubok sa iyong JavaScript at DOM ay hindi lamang ang ginagamit na kaso para sa Phantom. Ang talagang nakakaakit sa akin ay ang mga kakayahan nitong mag-scrape ng mga website at hayaan kang kumuha ng mga screenshot nito!
Oo, nagbabasa ka ng tama, sa Phantom maaari kang mag-output ng mga webpage sa iba't ibang mga grapikong format at, syempre, kasing dali ng pagnanakaw ng matatamis mula sa isang sanggol.
Tingnan natin ang isang script na eksaktong ginagawa ito:
pahina ng var = bagong WebPage ();
page.open (’http://google.com’, pagpapaandar (katayuan) {
page.render (’google.png’);
phantom.exit ();
});
Iyon lang ang kailangan mo upang makagawa ng isang screenshot at dahil batay ito sa JavaScript, maaari mo ring gamitin ang jQuery at manipulahin ang mga nilalaman ng pahina bago i-screenshot ito!
Teka lang! Meron pa...
Kaya, inaasahan kong namangha ka rin sa akin, nang matuklasan ko ang bawat isa sa mga tool na ito. Ang artikulong ito ay gasgas lamang sa ibabaw ng kung ano ang posible sa JavaScript ngayon. Mayroong higit na katulad ng mga IDE na ganap na nakasulat sa JS Cloud9 o mataas na mga bagay sa seguridad na tapos dito (Ang iyong Credit Card ay ginawa gamit ang JavaScript).
Inaasahan kong napasigla ka, maglaan ng oras at maglaro kasama ang ilan sa mga proyekto na nabanggit dito, o mas mahusay na kumuha ng ilan sa mga tool na ito at bumuo ng mga bagong bagay sa paligid nila. Karamihan sa mga ito dito ay bukas na mapagkukunan at may mga developer doon, hinahanap ka upang matulungan silang mapabuti ang kanilang trabaho, kahit na sa pamamagitan lamang ng paggamit ng mga tool, pagtuklas ng mga bug at pag-uulat sa kanila.
