10 stvari, za katere niste vedeli, da zmore JavaScript

JavaScript je od svojega rojstva leta 1995 precej napredoval. Zagotovo trda pot, polna nerazumevanja, zlorabe in nevednosti. A časi so se spremenili, saj JavaScript v zadnjih petih letih dobiva vedno več pozornosti. Z več pozornosti več razvijalcev dejansko uporablja JavaScript, ga uporablja za različne namene in uživa v njegovi lepoti. Klasična zgodba 'Grda račka', če vprašate mene.

V naslednjem članku bomo odkrili 10 primerov uporabe za JavaScript, ki se razlikujejo od običajnih primerov 'v brskalniku', ki ste jih vajeni.

01. Čas je za klepetalnico »Hangout«

Se spomnite vizije 80-letne videokomunikacije, podobne Facetimeu?



Minilo je le 20 let, preden je to postalo splošno zaradi skoraj povsod razpoložljivega širokopasovnega interneta in velike uporabe malo programske opreme, imenovane Skype.

Z zmogljivostmi Adobeovega Flash-a in Googlovega poskusa izgradnje družabnega omrežja v brskalniku že imamo zmogljivosti video komunikacije. Ali ne bi bilo v redu, če bi imeli te sposobnosti, ne da bi uporabljali neodvisen vtičnik, kot je Flash?

Na srečo so prodajalci brskalnikov mislili enako in v svojo programsko opremo vključili API 'getUserMedia'. To je bil prvi korak za dostop do naprav, kot so kamere ali mikrofoni, neposredno iz brskalnika.

Če uporabljate Node.js kot strežnik na zadnji strani take aplikacije, je neverjetno enostavno prenos video signala po zraku do ene ali več strank. Na žalost, v času pisanja tega, samo Chrome in Opera podpirata API, drugi pa bodo hitro dohiteli.

Čistejši pristop za dvosmerno komunikacijo je trenutno samo Chrome, ki se imenuje WebRTC . Zaradi WebRTC je odjemalcem omogočeno odpiranje medsebojnih komunikacijskih kanalov, ki neposredno povezujejo odjemalca z odjemalcem.

Zaradi zabave si oglejte Sindre Sorhus ' Kabina za fotografiranje izvedba izvedena v 121 bajtih!

var video = document.getElementsByTagName ('video') [0],
navigator.getUserMedia ('video', successCallback, errorCallback);

function successCallback (tok) {
video.src = tok;
}

function errorCallback (napaka) {
console.log (napaka);
}

02. $ ('light'). FadeIn ();

The Arduino platforma mikrokrmilnika je primer za primer primera uporabe JavaScript, ki ni na voljo. Za tiste, ki ne poznate platforme Arduino, je tu super znamenit citat s spletne strani:

'Arduino je odprtokodna platforma za prototipiranje elektronike, ki temelji na prilagodljivi in ​​enostavni strojni in programski opremi. Namenjena je umetnikom, oblikovalcem, ljubiteljem in vsem, ki jih zanima ustvarjanje interaktivnih predmetov ali okolij. '

Arduino sam podpira le kodo, napisano v jeziku C, kar še vedno ni nič hudega. Z nekaj vrsticami C (poleg tega, da so to za vas opravili drugi) lahko Arduino prejema ukaze prek vrat USB prek protokola serijskih vrat.

Kako pa lahko dostopate do serijskih vrat prek JavaScripta? Očitno ne iz brskalnika.
Node.js na pomoč!

Zaradi prizadevanj zagovornika skupnosti Chris Williams , imamo Vozlišče knjižnica serijskih vrat , kjer lahko podatke pošiljamo po starem protokolu SP. To je bil začetni preboj na podlagi knjižnice, ki so jo imeli drugi ljudje z bolj abstraktnim pristopom do zmogljivosti Arduina. Na primer vozlišče-arduino in duino knjižnice.

Do zdaj je najbolj vroča in kul knjižnica v okolici bloka za programiranje Arduino, ki ga poganja JS Jonny-five . Preveri Bocoupov blog za nekaj vročega sranja, ki so ga storili s platformo Arduino in obilico vtičnikov. Tudi JSConf video iz Nicolai Onken in Jörn Zaefferer vam lahko omogoči, da z malo kode zavrnete, kaj je danes mogoče.

pisave, ki ustrezajo helvetica neue

03. Vaše roke so narejene za brskalnik

Prihodnja vizija Minority Report (tista, pri kateri računalnike nadzorujejo z rokami, ne pa grdih avtomobilov) se vsak dan bolj približuje. Velik korak v tej smeri je bil Microsoftov kontrolor, ki ni poskušal igrati, Kinect. Morda si mislite neverjetno igranje, toda kaj ima to skupnega z JavaScriptom ?!

S Microsoftov Kinect SDK sprostitev, kup ljudi je prečkalo most pri uporabi brskalnika za Kinect. Najprej fantje iz ChildNodes ki so zgradili celotno delujočo knjižnico kinect.js, ki omogoča uporabo Microsoftovega Kinecta v vašem brskalniku.

Toplo priporočam, da si ogledate njihove predstavitvene posnetke in video posnetke. Ena glavnih pomanjkljivosti knjižnice kinect.js pa je, da mora biti na zadnji strani odjemalca nameščen strežniški program WebSocket (to je pravzaprav lepilo Kinect -> C # -> JS).

Nekaj ​​študentov z MIT-a se ukvarja z rešitvijo za rušenje tega zidu, imenovano Globina JS ,
vtičnik v brskalniku, ki omogoča uporabo Kinect za Chrome in Safari, tudi za spletna mesta, ki v nobeni obliki niso optimizirana za uporabo na osnovi Kinect. DepthJS je trenutno v zgodnji razvojni fazi, vendar jo je vsekakor vredno spremljati.

04. 3D igre, ki jih nadzorujete s svojo igralno ploščico

Ste že kdaj poskusili igrati igro z brskalnikom, ki ni Flash? Grafične zmogljivosti so neverjetne, še posebej, če vidite takšne klonove iger Potres .

kako zgladiti obraz v

Toda pri igranju teh stvari ste vedno vezani na tipkovnico in (večinoma) okorno miško. To je velika pomanjkljivost, zlasti pri akcijskih igrah, saj jih resnično zadržuje pred brskalnikom.

Ali ne bi bilo v redu, če bi lahko samo priključili krmilnik Xbox v računalnik in začeli igrati svojo najljubšo igro brskalnika? To ni več prihodnja vizija, pozdravite se API za Gamepad !

Če imate okrog mize igralno ploščico, jo priključite zdaj in uživajte v nekaterih igrah, ki že uporabljajo Gamepad API. Programiranje kontrolnikov za vnos je tudi piškot, oglejte si ta delček kode ali še bolje, zaženite ga sami:



funkcija gamepadConnected (dogodek) {
var gamepads = document.getElementById ('gamepads'),
gamepadId = event.gamepad.id;

gamepads.innerHTML + = 'Gamepad je povezan (id =' + gamepadId + ')';
}

window.addEventListener ('MozGamepadConnected', gamepadConnected, false);

Če želite izvedeti več o 3D-zmožnostih brskalnikov, si oglejte Three.js in J nas Arps 'odprtokodni 3D simulator Vzpon zgrajena na vrhu. Mark Hammil pazi, morda te bomo potrebovali za še eno nadaljevanje poveljnika kril!

05. Zagon Flash-a na iPadu

Kot ljubitelj odprtih standardov in oboževalec Apple-a moram priznati, da bi se resnično rad zahvalil Appleu, ker ni nameščal Flash-a na iPad in iPod, to je zares začelo gibanje za sprejemanje odprtih tehnologij, kot so HTML5, CSS3 in JavaScript.

Kot uslužbenec agencije moram reči, da je to za naše stranke resnično slabo.
Večina jih mora plačati dvakrat za preprost oglas ali akcijo, ki jo uvajajo, da se interaktivna vsebina izvaja v starih IE7 ali IE8 prek Flash in v sodobnih brskalnikih ter iDevices prek HTML5.

Polifiliranje funkcij starih brskalnikov ima svoje meje, večinoma imenovane zmogljivosti. Torej, ali ni mogoče zagnati Flash na teh brezbarvnih iDevices?

Seveda obstaja ena in seveda je vgrajena v JavaScript.

Košček zgodovine: Leta 2010 Tobias Schneider izdal malo knjižnico z imenom Gordon
ki je SWF datotekam omogočal zagon neposredno v brskalniku. To je delovalo precej dobro za majhne datoteke Flash, kot so oglasi, ki so uporabljali samo funkcije do različice Flash 2, vendar funkcionalnost višje ravni sploh ni bila vključena.

Ko se je Tobias pridružil podjetju ueberJS UXEBU , so prišli na novo idejo.
In tako, Bikeshed je bil rojen. Sam Bikeshed je nekakšen okvir animacije JavaScript, hkrati pa je tudi JavaScript za Flash za vse, za kar želite, da je prevajalnik (temelji na vmesniku, tako da lahko napišete vmesnike za vse, kar želite, čeprav je standardno vedenje sestavljanje Flash v JavaScript) . Združljiv je s sistemoma Flash 10 in ActionScript 3. Oglejte si njegovo spletno stran, če želite izvedeti več o njegovih številnih funkcijah poleg prevajalnika.

06. Pisanje aplikacij za vaš pametni telefon

Pisanje izvornih aplikacij za okolja mobilnih telefonov je trda pot. Začne se z odločitvijo, katero platformo želite podpirati. Če bi se vaša aplikacija izvajala v iPhonu in iPadu, mobilni napravi s sistemom Android, Windows Mobile, napravah Blackberry, platformi, ki temelji na webOS ... itd.

Vsaka od teh platform ima svoje API-je in večinoma uporablja različne programske jezike.
Če ste preživeli brskalniške vojne, naj vam povem, da je to težji način za vstop. Razvijalec skoraj ne more zgraditi aplikacije za vse te platforme v času in proračunu.

Kaj torej storiti? Najeti več razvijalcev? Želite več zaračunavati za aplikacije? Ali pa poiščite boljši pristop, s katerim zagotovite, da se vaša koda izvaja v vsaki napravi? Kot večina izmed vas bi raje uporabila zadnji pristop.

Toda v čem naj bodo vgrajene te aplikacije? Kaj je skupnega vsem tem platformam? Odgovor morda poznate, gre za spletni brskalnik in s tem za JavaScript.

To je ideja v ozadju Apache Cordova , bolj znan pod svojim nekdanjim imenom PhoneGap.
Cordova je ogrodje JavaScript, ki abstrahira API-je vsakega mobilnega okolja in izpostavi čist JavaScript API za nadzor nad njimi. To vam omogoča, da vzdržujete eno samo kodno osnovo, ki jo nato sestavite in namestite na različne mobilne naprave.

Oglejte si vire tukaj če želite izvedeti, kako uporabljati Cordovo za izdelavo mobilnih aplikacij, ki jih zgradite enkrat in se bodo izvajale povsod.

07. Zagon Rubyja in Pythona v brskalniku

Mozilla, podjetje, ki stoji za slavnim brskalnikom Firefox, zaposluje veliko geekov, to je gotovo. Eden od njih je Alon Zakai inženir v raziskovalni skupini Mozilla, ki je izdelal čudno orodje, imenovano Vpišite se .

Emscripten vam omogoča, da v JavaScript prenesete bitno kodo LLVM, ki jo lahko ustvarite iz knjižnic, ki temeljijo na C / C ++. To stori tako, da knjižnice sestavi v bitno kodo, nato pa jo prevzame in pretvori v JavaScript. Lepo, ampak kaj lahko s tem dejansko naredim, se lahko vprašate?

Imam nasprotno vprašanje za vas: ali ste že slišali stavek 'Uporaba CoffeeScript in prototipa je najbližje zagonu Rubyja v brskalniku'? Ne? Ne skrbite, ker to ni več res.

Z Emscripten lahko preprosto vzamete Ruby viri, jih pretvorite v JavaScript in voilà, v vašem brskalniku zaženite pravi Ruby! Toda to ne velja samo za Ruby, Python na primer je bil tudi napisan.

Ali pa si oglejte dekodirnik h.264 v brskalniku Broadway . To je pravzaprav zapisana knjižnica C ++!

Pojdi do repl.it za ogled nekaj programskih jezikov (vključno z Ruby in Pythonom), ki se izvajajo v vašem brskalniku!

08. Pisanje namiznih programov, neodvisnih od OS

Prej smo govorili o ciljanju na več mobilnih platform s pomočjo Apache Cordova. Ni presenetljivo, da se JavaScript ne more uporabljati samo za ciljanje mobilnih platform, temveč se lahko loti tudi našega starega prijatelja, namiznega računalnika.

Prve rešitve so prišli od fantov iz Appcelerator s Titanium Desktop Suite in Adobe, ki se pogosto uporablja Zrak platformo.

Toda kot ljubitelji odprtokodne kode, kakršni smo vsi, iščemo bolj odprto tehnologijo, ki temelji na Node.js. Srečati app.js ! app.js je odprta spletna tehnologija in graditelj namiznih programov na osnovi Node.js, ki nam omogoča pisanje pravih namiznih programov z dostopom do datotečnega sistema, nadzornimi elementi oken in še več. Zanašamo se na stabilne API-je Node za več platform in gradimo svoj programski uporabniški vmesnik z HTML in CSS. Tako kot najbolj vroče novosti na tem seznamu tukaj.

app.js je precej mlad projekt in zato do zdaj podpira le Windows in Linux, vendar po besedah poštni seznam , Podpora za Mac je na poti.

09. Zagon spletnega strežnika

Dandanes nikogar ne šokirate, ko jim poveste, da vaše spletno mesto streže spletni strežnik, ki temelji na JavaScript. Če bi se pred dvema ali tremi leti spomnili nazaj in spletnim razvijalcem rekli povsem enako, bi se vam verjetno smejali ali še huje.

Ampak z neverjetnim uspehom Node.js to je na srečo daleč od zdaj. Ne samo, da ljudi ne preseneča več, saj je Node.js zaradi svoje asinhrone narave po svoji zmogljivosti wunderkind, še posebej, ko gre za soočanje s težavo številnih vzporednih povezav. Ne samo, da je njegova zmogljivost hitra, resnično preprost API privabi tudi veliko razvijalcev. Oglejmo si primer 'Hello World' iz sveta Node, to ni samo tisk 'Hello World' na primeru zaslona, ​​to je spletni spletni strežnik!

var http = require ('http');
http.createServer (funkcija (req, res) {
res.writeHead (200, {'Content-Type': 'text / plain'});
res.end ('Pozdravljeni, svet n');
}). poslušaj (1337, '127.0.0.1');

Če vas ta preprostost ne odnese, no, tudi jaz vam ne morem pomagati.

Eden najboljših delov priljubljenosti Node (ali hype) je, da ga velika podjetja, kot je Microsoft, dejansko podpirajo, tj. Azure Cloud Services !

kako objaviti sliko na facebooku

10. Spletanje in snemanje zaslona

Torej, nenazadnje si oglejmo projekt, ki mi je osebno všeč, ker mi je omogočil, da brez ujemanja izvajam teste QUnit brez ukaza. PhantomJS je brezglaven brskalnik, ki temelji na WebKit-u, z urejenim API-jem na osnovi JavaScript (ali CoffeScript).

Toda preizkušanje JavaScript in DOM ni edini primer uporabe Phantoma. Kar me resnično očara, so njegove zmožnosti strganja spletnih strani in omogočanje posnetkov zaslona!
Ja, prav ste prebrali, s Phantom lahko objavite spletne strani v različnih grafičnih oblikah in seveda je tako enostavno kot ukrasti sladkarije dojenčku.

Oglejmo si skript, ki točno to počne:

var stran = nova spletna stran ();
page.open ('http://google.com', funkcija (stanje) {
page.render ('google.png');
phantom.exit ();
});

To je vse, kar potrebujete za posnetek zaslona in ker temelji na JavaScript, lahko uporabite tudi jQuery in pred vsebino strani manipulirate z vsebino strani!

Počakaj! Obstaja več ...

Upam, da ste tako presenečeni kot jaz, ko sem odkril vsako od teh orodij. Ta članek je samo opraskal površino tega, kar je danes mogoče z JavaScriptom. Obstaja toliko več podobnih IDE-jev, v celoti napisanih v JS Cloud9 ali stvari z visoko varnostjo ( Vaša kreditna kartica je bila narejena z JavaScriptom) .

Upam, da se počutite navdihnjeno, si vzamete nekaj časa in se poigrate z nekaterimi tukaj omenjenimi projekti ali še bolje, da vzamete nekaj teh orodij in okoli njih ustvarite nove stvari. Tu je večina odprtokodnih programov, zunaj pa so razvijalci, ki vas iščejo, da jim pomagate izboljšati delo, četudi le z uporabo orodij, odkrivanjem napak in poročanjem o njih.