Sadržaj
- 01. Vrijeme je za hangout
- 02. $ ('svjetlo'). FadeIn ();
- 03. Vaše su ruke stvorene za preglednik
- 04. 3D igre kontrolirane vašim gamepadom
- 05. Pokretanje Bljeska na vašem iPadu
- 06. Pisanje aplikacija za vaš pametni telefon
- 07. Pokretanje Ruby i Pythona u vašem pregledniku
- 08. Pisanje OS neovisnih programa za radnu površinu
- 09. Pokretanje web poslužitelja
- 10. Izrada weba i snimanje zaslona
- Čekati! Ima još...
JavaScript je jako napredovao od svog rođenja 1995. godine. Sigurno težak put, pun nerazumijevanja, zlouporabe i neznanja. Ali vremena su se promijenila, jer JavaScript u posljednjih pet godina dobiva sve više i više pažnje. S više pozornosti, više programera zapravo koristi JavaScript, upotrebljavajući ga u razne svrhe i uživajući u njegovoj ljepoti. Klasična priča "Ružno pače", ako mene pitate.
U sljedećem ćemo članku otkriti 10 slučajeva upotrebe JavaScript-a koji se razlikuju od uobičajenih "u pregledniku" na koje ste navikli.
01. Vrijeme je za hangout
Sjećate li se vizije 80-ih godina videokomunikacije nalik Facetimeu?
Trebalo je proći samo 20 godina prije nego što je to postalo uobičajeno zbog gotovo svugdje dostupnog širokopojasnog interneta i velike upotrebe maloga softvera nazvanog Skype.
Uz mogućnosti Adobeovog Flash-a i Googleov pokušaj izgradnje društvene mreže, u našem pregledniku već imamo mogućnosti video komunikacije. Ne bi li bilo cool imati te sposobnosti bez upotrebe dodatka treće strane kao što je Flash?
Srećom, dobavljači preglednika mislili su isto i u svoj softver implementirali API "getUserMedia". Ovo je bio prvi korak za pristup uređajima poput kamera ili mikrofona izravno iz vašeg preglednika.
Koristeći Node.js kao poslužitelj u pozadini takve aplikacije, nevjerojatno je lako prenijeti video signal bežičnim putem do jednog ili više klijenata. Nesretnim slučajem, do trenutka kada sam ovo napisao, samo Chrome i Opera podržavaju API, ali drugi će ih brzo sustići.
Čistiji pristup za dvosmjernu komunikaciju trenutno je samo Chrome, nazvan WebRTC. Zbog WebRTC-a, klijentima je omogućeno otvaranje ravnopravnih komunikacijskih kanala, izravno povezujući klijenta s klijentom.
Radi zabave pogledajte implementaciju Photo Bootha Sindre Sorhus izvedenu u 121 bajtu!
var video = document.getElementsByTagName (’video’) [0],
navigator.getUserMedia (’video’, successCallback, errorCallback);
funkcija successCallback (stream) {
video.src = stream;
}
function errorCallback (pogreška) {
console.log (pogreška);
}
02. $ ('svjetlo'). FadeIn ();
Platforma mikrokontrolera Arduino primjer je primjera za JavaScript slučaj "iz kutije". Za one od vas koji nisu upoznati s Arduino platformom, evo super poznatog citata s njene web stranice:
"Arduino je platforma za prototipiranje elektroničke opreme otvorenog koda koja se temelji na fleksibilnom i jednostavnom hardveru i softveru. Namijenjena je umjetnicima, dizajnerima, hobistima i svima zainteresiranima za stvaranje interaktivnih objekata ili okruženja."
Sam Arduino podržava samo kod napisan na C jeziku, što još uvijek nije velika stvar. S nekoliko redaka C (osim što su to drugi radili umjesto vas), Arduino može primati naredbe putem svog USB porta putem protokola serijskog porta.
Ali kako serijskom priključku možete pristupiti putem JavaScripta? Jasno nije iz preglednika.
Node.js u pomoć!
Zahvaljujući naporima zagovornika zajednice Chrisa Williamsa, imamo biblioteku serijskih priključaka Node u koju možemo slati podatke preko starog SP protokola. Ovo je bio početni proboj, na temelju knjižnice koji su drugi ljudi smislili apstraktniji pristup Arduinovim mogućnostima. Na primjer, node-arduino i duino knjižnice.
Do sada je najzanimljivija i najslađa biblioteka za blok za JS pokretanje Arduino programiranja jonny-five. Na Bocoupovom blogu potražite neka sranja koja su napravili s Arduino platformom i obiljem dodataka. Također JSConf video od Nicolaija Onkena i Jörna Zaefferera mogao bi vam zavrtjeti ono što je danas moguće s malo koda.
03. Vaše su ruke stvorene za preglednik
Buduća vizija Izvještaja manjina (ona u kojoj kontroliraju računala rukama, a ne ružnim automobilima) svakodnevno se približava. Ogroman korak u ovom smjeru bio je Microsoftov pokušaj manje igranja kontrolera, Kinect. Nevjerojatno igranje možda mislite, ali kakve to veze ima s JavaScriptom ?!
Uz Microsoftovo izdanje Kinect SDK, gomila ljudi prešla je most u upotrebi preglednika za Kinect. Prije svega dečki iz ChildNodes-a koji su izgradili kompletnu radnu knjižnicu kinect.js, koja omogućuje upotrebu Microsoftovog Kinect-a u vašem pregledniku.
Toplo preporučam da pogledate njihove demonstracije i videozapise, to je eksplozija. Međutim, jedan od glavnih nedostataka knjižnice kinect.js je taj što na stražnjoj strani klijenta mora biti pokrenut program poslužitelja WebSocket (to je zapravo ljepilo Kinect -> C # -> JS).
Nekoliko učenika s MIT-a radi na rješenju za rušenje ovog zida, nazvanom DepthJS,
dodatak za preglednik koji omogućuje upotrebu Kinect-a za Chrome i Safari, čak i za web-lokacije koje nisu optimizirane za uporabu zasnovanu na Kinect-u u bilo kojem obliku. DepthJS je trenutno u ranoj fazi razvoja, ali svakako vrijedi pratiti.
04. 3D igre kontrolirane vašim gamepadom
Jeste li ikad pokušali igrati ne-Flash igricu u pregledniku danas? Grafičke mogućnosti su nevjerojatne, pogotovo kad vidite klonove igara poput Quakea.
Ali kad igrate ove stvari, uvijek ste vezani uz tipkovnicu i (uglavnom) nezgrapan miš. To je glavni nedostatak, posebno za akcijske igre, uistinu ih zadržava u pregledniku.
Ne bi li bilo cool kad biste samo mogli priključiti Xbox kontroler na svoje računalo i početi igrati svoju omiljenu igru preglednika? Ovo više nije buduća vizija, pozdravite Gamepad API!
Ako oko stola imate gamepad, priključite ga odmah i uživajte u nekim igrama koje već koriste API Gamepad. Programiranje ulaznih kontrola također je kolač, pogledajte ovaj isječak koda ili još bolje, pokrenite ga sami:
div id = "gamepads"> / div>
skripta>
funkcija gamepadConnected (događaj) {
var gamepads = document.getElementById ("gamepads"),
gamepadId = event.gamepad.id;
gamepads.innerHTML + = "Gamepad povezan (id =" + gamepadId + ")";
}
window.addEventListener ("MozGamepadConnected", gamepadConnected, false);
/ skripta>
Ako želite saznati više o 3D mogućnostima preglednika, provjerite otvoreni izvor 3D-simulatora Ascent tvrtke Three.js i Jens Arps izgrađen na vrhu. Mark Hammil, pripazite, možda ćete nam trebati za još jedan nastavak zapovjednika krila!
05. Pokretanje Bljeska na vašem iPadu
Kao ljubitelj otvorenih standarda i obožavatelj Applea, moram priznati da bih zaista htio zahvaliti Appleu što nije stavio Flash na iPad i iPod, ovo je doista pokrenulo pokret prihvaćanja otvorenih tehnologija poput HTML5, CSS3 i JavaScript.
Kao zaposlenik agencije moram reći da je ovo zaista loša situacija za naše kupce.
Većina ih mora platiti dva puta za jednostavan oglas ili kampanju koju pokreću da bi se interaktivni sadržaj prikazivao u starim IE7 ili IE8 putem Flash-a i na modernim preglednicima kao i iDevices putem HTML5.
Polifiliranje značajki starih preglednika ima svoje granice, uglavnom imenovane performanse. Pa zar ne postoji mogućnost pokretanja Flasha na tim uređajima bez bljeskalica?
Naravno da postoji, i naravno da je ugrađen u JavaScript.
Dio povijesti: 2010. Tobias Schneider objavio je malu knjižnicu pod nazivom Gordon
što je omogućilo SWF datotekama da se izravno pokreću u pregledniku. To je prilično dobro funkcioniralo za male Flash datoteke poput oglasa koji su koristili samo funkcije do Flash verzije 2, ali funkcionalnost više razine uopće nije bila uključena.
Kad se Tobias pridružio tvrtki ueberJS UXEBU, smislili su novu ideju.
I tako, rođen je Bikeshed. Sam Bikeshed je vrsta JavaScript animacijskog okvira, ali je i JavaScript za Flash za sve što želite da bude kompajler (zasnovan je na adapteru, tako da možete pisati adaptere za sve što želite, iako je standardno ponašanje kompajliranje Flash-a u JavaScript) . Kompatibilan je s Flash 10 i ActionScript 3. Pogledajte njegovu web stranicu kako biste saznali više o njegovom mnoštvu značajki osim kompajlera.
06. Pisanje aplikacija za vaš pametni telefon
Pisanje izvornih aplikacija za okruženja mobilnih telefona težak je put. Sve započinje odlukom koju platformu želite podržati. Ako se vaša aplikacija izvodi na iPhoneu i iPadu, mobilnom uređaju s Androidom, Windows Mobileu, Blackberry uređajima, webOS baziranoj platformi ... i tako dalje.
Svaka od ovih platformi ima svoje API-je i uglavnom koristi različite programske jezike.
Ako ste preživjeli ratove preglednika, dopustite mi da vam kažem da je ovo način na koji se teže boriti. Programer je gotovo nemoguće izraditi aplikaciju za sve ove platforme u vremenu i proračunu.
Pa što učiniti? Unajmiti više programera? Naplatiti više za aplikacije? Ili pronađite bolji pristup kako biste osigurali da vaša baza koda radi na svim uređajima? Kao većina vas, više bih volio posljednji pristup.
Ali u što bi trebale biti ugrađene ove aplikacije? Što je zajedničko svim ovim platformama? Možda znate odgovor, to je web preglednik i stoga JavaScript mehanizam.
To je ideja koja stoji iza Apachea Cordove, poznatijeg pod svojim bivšim imenom PhoneGap.
Cordova je JavaScript okvir koji apstrahira API-je svakog mobilnog okruženja i izlaže uredan JavaScript API za kontrolu svih njih. To vam omogućuje održavanje jedinstvene baze koda koju zatim gradite i primjenjujete na različitim mobilnim uređajima.
Pogledajte ovdje resurse da biste saznali kako koristiti Cordovu za izradu mobilnih aplikacija koje se jednom naprave i koje će se pokretati svugdje.
07. Pokretanje Ruby i Pythona u vašem pregledniku
Mozilla, tvrtka koja stoji iza poznatog preglednika Firefox, zapošljava puno geekova, to je sigurno. Jedan od njih je Alon Zakai, inženjer u istraživačkom timu Mozilla, koji je izgradio otkačen alat zvan Emscripten.
Emscripten vam omogućuje da na JavaScript preuzmete LLVM bitni kod - koji se može generirati iz knjižnica temeljenih na C / C ++. To čini kompajliranjem knjižnica u bitni kod, a zatim, uzimanjem tog bitnog koda i pretvaranjem u JavaScript. Uredno, ali što zapravo mogu učiniti s ovim, mogli biste se zapitati?
Imam kontra pitanje za vas: jeste li ikada čuli frazu "Korištenje CoffeeScripta i prototipa najbliže je pokretanju Rubyja u pregledniku"? Ne? Ne brinite, jer to više nije istina.
Uz Emscripten možete jednostavno uzeti Ruby izvore, transformirati ih u JavaScript i voilà, a pravi Ruby pokrenuti u vašem pregledniku! Ali to se ne odnosi samo na Ruby, na primjer, Python je također napisan.
Ili provjerite dekoder h.264 u pregledniku Broadway. To je zapravo skriptirana C ++ biblioteka!
Idite na repl.it da biste vidjeli nekoliko programskih jezika (uključujući Ruby i Python) koji se izvode u vašem pregledniku!
08. Pisanje OS neovisnih programa za radnu površinu
Prije smo razgovarali o ciljanju više mobilnih platformi uz pomoć Apachea Cordove. Nije iznenađujuće što se JavaScript ne može koristiti samo za ciljanje mobilnih platformi, već se može riješiti i naš stari prijatelj, stolno računalo.
Prva rješenja došla su od momaka Appceleratora s Titanium Desktop Suiteom i od Adobe, široko korištene platforme Air.
No, kao ljubitelji otvorenog koda kakvi smo svi mi, tražimo otvoreniju tehnologiju zasnovanu na Node.js-u. Upoznajte app.js! app.js je otvorena webtehnologija i graditelj desktop programa zasnovan na Node.js-u, koji nam omogućuje pisanje stvarnih programa za radne površine s pristupom datotečnom sustavu, kontrolama prozora i još mnogo toga. Možemo se osloniti na stabilne API-je višenamjenskih platformi Node-a i izgraditi softversko korisničko sučelje s HTML-om i CSS-om. Baš poput najzanimljivijih novosti na ovom popisu ovdje.
app.js prilično je mlad projekt i stoga do sada podržava samo Windows i Linux, no prema popisu za slanje maikova podrška za Mac je na putu.
09. Pokretanje web poslužitelja
U današnje vrijeme nikoga ne šokirate kad im kažete da vašu web stranicu poslužuje web poslužitelj zasnovan na JavaScriptu. Ako se prisjetite prije dvije ili tri godine i web-programerima kažete potpuno isto, vjerojatno bi vam se nasmijali ili još gore.
No, s nevjerojatnim uspjehom Node.js-a ovo je srećom daleko od sada. Ne samo da ljude više ne iznenađuje, zbog svoje asinkrone prirode Node.js je wunderkind u izvedbi, pogotovo kada se svodi na problem mnogih paralelnih veza. Ne samo da njegove performanse pucaju, uistinu jednostavan API privlači i puno programera. Provjerimo primjer "Hello World" iz svijeta Node, to nije samo ispis "Hello World" na primjeru zaslona, to je http web poslužitelj!
var http = require (’http’);
http.createServer (funkcija (req, res) {
res.writeHead (200, {‘Content-Type’: ’text / plain’});
res.end ('Pozdrav svijetu n');
}). Listen (1337, '127.0.0.1');
Ako vas ta jednostavnost ne oduševi, pa, ni ja vam ne mogu pomoći.
Jedan od najboljih dijelova popularnosti Nodea (ili hypea) je da ga velike tvrtke poput Microsofta zapravo podržavaju, tj. U svojim Azure Cloud Services!
10. Izrada weba i snimanje zaslona
Pa, na kraju, ali ne najmanje važno, pogledajmo projekt koji osobno volim jer mi je pustio da bez naredbi pokrećem svoje QUnit testove. PhantomJS je bezglavi preglednik zasnovan na WebKit-u s urednim API-jem temeljenim na JavaScript-u (ili CoffeScript-u).
Ali testiranje vašeg JavaScript-a i DOM-a nije jedini slučaj upotrebe Phantoma. Ono što me zaista fascinira su njegove mogućnosti struganja web stranica i omogućavanja snimanja njihovih snimaka zaslona!
Da, dobro čitate, s Phantomom možete izlaziti web stranice u različitim grafičkim formatima i, naravno, lako je poput krađe slatkiša od bebe.
Pogledajmo skriptu koja točno to čini:
var stranica = nova WebPage ();
page.open (’http://google.com’, funkcija (status) {
page.render (’google.png’);
phantom.exit ();
});
To je sve što vam treba za izradu snimke zaslona, a budući da se temelji na JavaScriptu, također možete koristiti jQuery i manipulirati sadržajem stranice prije nego što je snimite zaslon!
Čekati! Ima još...
Nadam se da ćete se zapanjiti kao i ja kad sam otkrio svaki od ovih alata. Ovaj je članak upravo ogrebao površinu onoga što je danas moguće s JavaScriptom. Postoji još mnogo toga poput IDE-a u potpunosti napisanih u JS Cloud9 ili visokozaštitnih radnji s njima (Vaša kreditna kartica izrađena je s JavaScriptom).
Nadam se da ćete se nadahnuti, odvojiti malo vremena i poigrati se s nekim ovdje spomenutim projektima, ili još bolje uzeti neke od ovih alata i oko njih graditi nove stvari. Većina ovoga ovdje je otvorenog koda, a vani postoje programeri koji traže da im pomognete da poboljšaju svoj rad, čak i ako je to samo upotreba alata, otkrivanje grešaka i prijavljivanje.
