Obsah
- 01. Je čas na hangout
- 02. $ (‘light’). FadeIn ();
- 03. Vaše ruky sú stvorené pre prehliadač
- 04. 3D hry ovládané gamepadom
- 05. Spustenie programu Flash na vašom iPade
- 06. Písanie aplikácií pre váš smartphone
- 07. Vo vašom prehliadači je spustený program Ruby a Python
- 08. Písanie nezávislých desktopových programov pre OS
- 09. Spustenie webového servera
- 10. Tvorba webových stránok a snímanie obrazovky
- Počkaj! Je toho viac ...
JavaScript prešiel od svojho zrodu v roku 1995 dlhou cestou. Určite je to tvrdá cesta, plná nedorozumení, zneužitia a ignorácie. Časy sa však zmenili, od posledných piatich rokov si JavaScript získava čoraz viac pozornosti. S väčšou pozornosťou skutočne viac vývojárov používa JavaScript, ktorý ho používa na rôzne účely a teší sa z jeho krásy. Klasický príbeh „Škaredé káčatko“, ak sa ma pýtate.
V nasledujúcom článku objavíme 10 prípadov použitia jazyka JavaScript, ktoré sa líšia od bežných prípadov v prehliadači, na ktoré ste zvyknutí.
01. Je čas na hangout
Pamätáte si na víziu 80. rokov video komunikácie podobnej Facetime?
Trvalo iba 20 rokov, kým sa to stalo hlavným prúdom vďaka takmer všade dostupnému širokopásmovému internetu a veľkému využívaniu malého softvéru s názvom Skype.
Vďaka možnostiam programu Adobe Flash a pokusu spoločnosti Google vybudovať sociálnu sieť už máme v našom prehliadači možnosti video komunikácie. Nebolo by v pohode mať tieto schopnosti bez použitia doplnku tretej strany, ako je Flash?
Našťastie si to predajcovia prehliadačov mysleli rovnako a implementovali do svojho softvéru API „getUserMedia“. Toto bol prvý krok umožňujúci prístup k zariadeniam, ako sú fotoaparáty alebo mikrofóny, priamo z vášho prehliadača.
Pri použití servera Node.js ako servera v zadnej časti takejto aplikácie je neuveriteľne ľahké prenášať videosignál vzduchom k jednému alebo viacerým klientom. V čase písania tohto článku bohužiaľ API nepodporujú iba Chrome a Opera, ale ostatní ich dobehnú rýchlo.
Čistší prístup k obojsmernej komunikácii je v súčasnosti jedinou vecou prehliadača Chrome, ktorá sa nazýva WebRTC. Z dôvodu WebRTC môžu klienti otvárať komunikačné kanály peer to peer a priamo tak spájať klienta s klientom.
Kvôli zábave si pozrite implementáciu Photo Booth spoločnosti Sindre Sorhus v 121 bajtoch!
var video = document.getElementsByTagName („video“) [0],
navigator.getUserMedia (‘video’, successCallback, errorCallback);
funkcia successCallback (stream) {
video.src = stream;
}
function errorCallback (error) {
console.log (chyba);
}
02. $ (‘light’). FadeIn ();
Platforma mikrokontroléra Arduino je príkladom pre prípad použitia JavaScriptu „out of the box“. Pre tých z vás, ktorí nepoznajú platformu Arduino, je tu veľmi známy citát z ich webových stránok:
„Arduino je prototypová platforma pre elektroniku typu open-source založená na flexibilnom a ľahko použiteľnom hardvéri a softvéri. Je určená umelcom, dizajnérom, fandom a všetkým, ktorí majú záujem o vytváranie interaktívnych objektov alebo prostredí.“
Samotné Arduino podporuje iba kód napísaný v jazyku C, čo ešte stále nie je o čom. S niekoľkými riadkami C (okrem toho, že túto prácu za vás vykonali iní), môže Arduino prijímať príkazy cez svoj USB port cez protokol sériového portu.
Ako však môžete získať prístup k sériovému portu pomocou JavaScriptu? Zjavne nie z prehliadača.
Node.js na záchranu!
Vďaka úsiliu obhajcu komunity Chrisa Williamsa máme knižnicu sériových portov Node, kde môžeme odosielať údaje cez starý protokol SP. Toto bol počiatočný prielom, založený na knižnici, ktorú ostatní ľudia prišli s abstraktnejším prístupom k možnostiam Arduina. Napríklad knižnice node-arduino a duino.
Najteplejšou a najchladnejšou knižnicou v okolí bloku pre programovanie Arduina na základe JS je teraz jonny-five. Navštívte blog spoločnosti Bocoup, kde nájdete niekoľko zaujímavých sračiek, ktoré vykonali s platformou Arduino a množstvom doplnkov. Aj video JSConf od Nicolaia Onkena a Jörna Zaefferera vám môže dať točenie toho, čo je dnes možné, s malým kódom.
03. Vaše ruky sú stvorené pre prehliadač
Budúca vízia Menšej správy (tá, v ktorej ovládajú počítače rukami, nie škaredými autami) sa každým dňom približuje. Obrovským krokom v tomto smere bol pokus spoločnosti Microsoft o menej náročné hranie, Kinect. Úžasná hrateľnosť, ktorú by ste si mohli myslieť, ale čo to má spoločné s jazykom JavaScript ?!
S vydaním súpravy Kinect SDK od spoločnosti Microsoft prekonalo množstvo používateľov použitie prehliadača pre Kinect. Najskôr chlapci z ChildNodes, ktorí vytvorili úplnú funkčnú knižnicu kinect.js, ktorá umožňuje vo vašom prehliadači používať Kinect od spoločnosti Microsoft.
Vrelo odporúčam pozrieť si ich ukážky a videá, je to ohromný výbuch. Jednou z hlavných nevýhod knižnice kinect.js však je, že v zadnej časti klienta musí byť spustený program servera WebSocket (to je vlastne lepidlo Kinect -> C # -> JS).
Niekoľko študentov slávy MIT pracuje na riešení na zbúranie tohto múru s názvom DepthJS,
doplnok v prehliadači, ktorý umožňuje použitie Kinectu pre Chrome a Safari, a to aj pre weby, ktoré nie sú optimalizované na použitie založené na Kinecte v akejkoľvek podobe. DepthJS je momentálne v počiatočnom štádiu vývoja, ale určite stojí za to ho sledovať.
04. 3D hry ovládané gamepadom
Skúšali ste si v dnešnej dobe zahrať hru bez prehliadača Flash? Grafické možnosti sú úžasné, zvlášť keď vidíte herné klony ako Quake.
Ale pri hraní týchto vecí ste vždy viazaní na klávesnicu a (väčšinou) neohrabanú myš. To je hlavná nevýhoda, najmä pri akčných hrách, skutočne ich drží späť od prehľadávača.
Nebolo by v pohode, keby ste mohli zapojiť ovládač Xbox do počítača a začať hrať obľúbenú hru v prehliadači? Toto už nie je vízia do budúcnosti, pozdravte rozhranie Gamepad API!
Ak máte okolo stola gamepad, pripojte ho hneď teraz a užite si niektoré hry, ktoré už používajú rozhranie Gamepad API. Programovanie vstupných ovládacích prvkov je tiež hračkou, pozrite sa na tento útržok kódu alebo ešte lepšie, spustite ho sami:
div id = "gamepady"> / div>
skript>
funkcia gamepadConnected (udalosť) {
var gamepads = document.getElementById ("gamepady"),
gamepadId = event.gamepad.id;
gamepads.innerHTML + = "Gamepad pripojený (id =" + gamepadId + ")";
}
window.addEventListener ("MozGamepadConnected", gamepadConnected, false);
/ skript>
Ak by ste sa chceli dozvedieť viac informácií o 3D možnostiach prehľadávačov, vyskúšajte na ňom postavený open source 3D simulátor Three.js a Jens Arps. Mark Hammil pozor, možno vás budeme potrebovať na ďalšie pokračovanie Wing Commander!
05. Spustenie programu Flash na vašom iPade
Ako milovník otvorených štandardov a fanúšik spoločnosti Apple musím priznať, že by som sa chcel skutočne poďakovať spoločnosti Apple za to, že nepoužila Flash na iPad a iPod. Týmto sa skutočne začalo hýbať otvorenými technológiami ako HTML5, CSS3 a JavaScript.
Ako agentúrny zamestnanec musím povedať, že je to pre našich zákazníkov skutočne zlá situácia.
Väčšina z nich musí zaplatiť dvakrát za jednoduchú reklamu alebo kampaň, ktorú spúšťa, aby mohol interaktívny obsah bežať v starom IE7 alebo IE8 cez Flash a v moderných prehliadačoch, ako aj v iDevices cez HTML5.
Polyfilmovanie funkcií starých prehliadačov má svoje hranice, väčšinou pomenované ako výkon. Nie je teda na týchto zariadeniach Flashless iDevices možnosť spustiť Flash?
Samozrejme, existuje jedna a samozrejme je zabudovaná v JavaScripte.
Kúsok z histórie: V roku 2010 Tobias Schneider vydal malú knižnicu s názvom Gordon
čo umožňovalo spustenie súborov SWF priamo v prehliadači. Toto fungovalo celkom dobre pre malé súbory vo formáte Flash, ako sú reklamy, ktoré využívali iba funkcie do verzie Flash Flash 2, ale funkcie vyššej úrovne neboli vôbec zahrnuté.
Keď sa Tobias pripojil k spoločnosti ueberJS UXEBU, prišli s novým nápadom.
A tak sa narodil Bikeshed. Samotný Bikeshed je akýsi rámec animácie JavaScriptu, ale je to aj JavaScript do Flash pre všetko, čo chcete, aby bol kompilátor (je založený na adaptéri, takže môžete písať adaptéry na čokoľvek, čo chcete, hoci štandardné správanie je kompilácia Flash do JavaScriptu) . Je kompatibilný s programami Flash 10 a ActionScript 3. Pozrite sa na jeho webovú stránku a okrem kompilátora sa dozviete viac o jeho mnohých ďalších funkciách.
06. Písanie aplikácií pre váš smartphone
Písanie natívnych aplikácií pre prostredie mobilných telefónov je kamenistá cesta. Začína sa to rozhodnutím, ktorú platformu chcete podporovať. Ak by vaša aplikácia bežala na zariadeniach iPhone a iPad, mobilných zariadeniach s Androidom, Windows Mobile, zariadeniach Blackberry, platformách založených na webOS ... atď.
Každá z týchto platforiem má svoje vlastné API a väčšinou používa rôzne programovacie jazyky.
Ak ste prežili vojny s prehliadačmi, poviem vám, že je to oveľa ťažší boj. Je takmer nemožné, aby vývojár vytvoril aplikáciu pre všetky tieto platformy v čase a rozpočte.
Čo teda robiť? Najať ďalších vývojárov? Účtovať viac za aplikácie? Alebo nájdite lepší prístup, aby ste sa ubezpečili, že vaša kódová základňa funguje na každom zariadení? Ako väčšina z vás by som uprednostnila posledný prístup.
V čom by však tieto aplikácie mali byť postavené? Čo majú všetky tieto platformy spoločné? Odpoveď možno poznáte, jedná sa o webový prehliadač, a teda aj o nástroj JavaScript.
To je myšlienka spoločnosti Apache Cordova, známejšej pod jej predchádzajúcim názvom PhoneGap.
Cordova je framework JavaScriptu, ktorý abstrahuje API každého mobilného prostredia a vystavuje úhľadné API API, ktoré ich ovláda. To vám umožňuje udržiavať jednu kódovú základňu, ktorú potom zostavujete a nasadzujete na rôznych mobilných zariadeniach.
V tomto dokumente nájdete zdroje, pomocou ktorých nájdete informácie o tom, ako pomocou aplikácie Cordova vytvoriť mobilné aplikácie nakopané zadkom, ktoré vytvoríte raz a spustíte ich všade.
07. Vo vašom prehliadači je spustený program Ruby a Python
Spoločnosť Mozilla, spoločnosť, ktorá stojí za slávnym prehliadačom Firefox, zamestnáva veľa mágov, to je isté. Jedným z nich je Alon Zakai, inžinier z Mozilla Research Team, ktorý vytvoril podivný nástroj s názvom Emscripten.
Emscripten vám umožní prevziať bitový kód LLVM - ktorý je možné vygenerovať z knižníc založených na C / C ++, do JavaScriptu. Robí to tak, že kompiluje knižnice do bitového kódu a potom tento bitový kód vezme a transformuje do JavaScriptu. Úhľadne, ale čo s tým môžem vlastne urobiť, môžete si položiť otázku?
Mám pre vás protiotázku: už ste niekedy počuli frázu „Používanie CoffeeScript a prototypov je najbližšie k spusteniu Ruby v prehliadači“? Nie? Nebojte sa, pretože to už nie je pravda.
S Emscripten môžete jednoducho vziať zdroje Ruby, transformovať ich do JavaScriptu a voilà, mať vo svojom prehliadači spustenú skutočnú Ruby! To však neplatí iba pre Ruby, napríklad Python bol tiež vypísaný.
Alebo si pozrite v prehliadači dekódovač h.264 Broadway. To je v skutočnosti emscriptovaná knižnica C ++!
Prejdite na repl.it a pozrite si vo svojom prehliadači spustených niekoľko programovacích jazykov (vrátane Ruby a Python)!
08. Písanie nezávislých desktopových programov pre OS
Už predtým sme hovorili o zacielení na viac mobilných platforiem pomocou Apache Cordova. Nie je prekvapením, že JavaScript nie je možné použiť iba na zacielenie na mobilné platformy, ale aj starý priateľ so stolným počítačom.
Prvé riešenia priniesli chlapci od spoločnosti Appcelerator s balíkom Titanium Desktop Suite a od spoločnosti Adobe široko používanej platformy Air.
Ako milovníci otvorených zdrojov, ktorými sme všetci, však hľadáme otvorenejšiu a na Node.js založenú technológiu. Zoznámte sa s app.js! app.js je otvorená webová technológia a tvorca desktopových programov založený na Node.js, ktorý nám umožňuje písať skutočné desktopové programy s prístupom k súborovému systému, ovládacími prvkami okna a ďalšími. Môžeme sa spoľahnúť na stabilné multiplatformové rozhrania API spoločnosti Node a vytvoriť naše softvérové používateľské rozhranie pomocou HTML a CSS. Rovnako ako najobľúbenejšie novinky v tomto zozname tu.
app.js je veľmi mladý projekt, a preto už podporuje iba Windows a Linux, ale podľa zoznamu adries je podpora pre Mac na ceste.
09. Spustenie webového servera
V dnešnej dobe nikoho nešokujete, keď im poviete, že váš web obsluhuje webový server založený na JavaScripte. Ak si spomeniete na dva alebo tri roky dozadu a povedali ste vývojárom webu to isté, pravdepodobne by sa vám vysmiali alebo ešte horšie.
Ale s neuveriteľným úspechom Node.js je to našťastie ďaleko odteraz. Nielen, že ľudí už neprekvapuje, vďaka svojej asynchrónnej povahe je Node.js výkonným zázrakom, najmä pokiaľ ide o problém mnohých paralelných spojení. Nielen jeho výkon je blast, skutočne jednoduché API láka aj veľa vývojárov. Pozrime sa na príklad „Hello World“ zo sveta uzlov, nejde len o tlač „Hello World“ na príklade obrazovky, je to aj webový server http!
var http = require („http“);
http.createServer (funkcia (požiadavka, res) {
res.writeHead (200, {‘Content-Type’: ‘text / plain’});
res.end (‘Hello World n’);
}). počúvať (1337, „127.0.0.1“);
Ak vás táto jednoduchosť neurazí, nemôžem vám tiež pomôcť.
Jednou z najlepších častí popularity uzlov (alebo humbuk) je to, že ich veľké spoločnosti ako Microsoft skutočne podporujú, tj vo svojich cloudových službách Azure!
10. Tvorba webových stránok a snímanie obrazovky
V neposlednom rade sa teda pozrime na projekt, ktorý osobne milujem, pretože mi umožňuje bez problémov spustiť moje testy QUnit na príkazovom riadku. PhantomJS je bezhlavý prehliadač založený na WebKit s prehľadným API založeným na JavaScripte (alebo CoffeScript).
Testovanie vášho JavaScriptu a DOM však nie je jediným prípadom použitia pre Phantom. Čo ma skutočne fascinuje, sú jeho schopnosti škrabať webové stránky a umožniť vám robiť ich snímky obrazovky!
Áno, čítate správne, s Phantomom môžete vytvárať webové stránky v rôznych grafických formátoch a je to samozrejme také ľahké ako krádež sladkostí dieťaťu.
Pozrime sa na skript, ktorý presne toto robí:
var page = nová webová stránka ();
page.open (‘http://google.com’, funkcia (stav) {
page.render (‘google.png’);
phantom.exit ();
});
To je všetko, čo potrebujete na vytvorenie snímky obrazovky, a pretože je založená na JavaScripte, môžete tiež použiť jQuery a pred vytvorením snímky obrazovky manipulovať s obsahom stránky!
Počkaj! Je toho viac ...
Dúfam teda, že ste rovnako ohromení ako ja, keď som objavil všetky tieto nástroje. Tento článok iba poškriabal povrch toho, čo je v dnešnej dobe možné pomocou JavaScriptu. Je toho omnoho viac ako IDE úplne napísané v JS Cloud9 alebo s tým spojené veci vysokej bezpečnosti (vaša kreditná karta bola vyrobená pomocou JavaScriptu).
Dúfam, že sa budete cítiť inšpirovaní, venujete si čas a pohráte sa s niektorými z tu spomenutých projektov, alebo ešte lepšie, využite niektoré z týchto nástrojov a vytvorte okolo nich nové veci. Väčšina z nich je tu otvorený zdroj a sú tu vývojári, ktorí hľadajú, aby ste im pomohli vylepšiť prácu, aj keď je to len pomocou nástrojov, zisťovaním chýb a hlásením.
