Sisältö
- 01. On aika hangoutille
- 02. $ (’valo’). FadeIn ();
- 03. Kädet on tehty selainta varten
- 04. 3D-pelit, joita ohjataan peliohjaimellasi
- 05. Flashin käyttäminen iPadilla
- 06. Sovellusten kirjoittaminen älypuhelimeesi
- 07. Rubyn ja Pythonin käyttäminen selaimessasi
- 08. Käyttöjärjestelmästä riippumattomien työpöytäohjelmien kirjoittaminen
- 09. Verkkopalvelimen suorittaminen
- 10. Verkkosivujen kaappaaminen ja näyttäminen
- Odota! Siellä on enemmän...
JavaScript on mennyt pitkälle sen syntymästä 1995 lähtien. Varmasti vaikea tapa, täynnä väärinkäsityksiä, väärinkäyttöä ja tietämättömyyttä. Mutta ajat ovat muuttuneet, koska JavaScript on saanut viimeisen viiden vuoden aikana yhä enemmän huomiota. Kun enemmän huomiota kiinnitetään, useammat kehittäjät käyttävät JavaScriptia, käyttävät sitä moniin eri tarkoituksiin ja nauttivat sen kauneudesta. Klassinen "Ruma ankanpoikanen" -tarina, jos kysyt minulta.
Seuraavassa artikkelissa löydetään 10 JavaScript-käyttötapausta, jotka poikkeavat tavallisista "selaimessa" tapauksista, joihin olet tottunut.
01. On aika hangoutille
Muistatko 80-luvun vision Facetime-tyyppisestä videoviestinnästä?
Kesti vain 20 vuotta, ennen kuin tämä on mennyt valtavirtaan johtuen melkein kaikkialla saatavilla olevasta laajakaistayhteydestä ja pienen Skype-ohjelmiston runsaasta käytöstä.
Adoben Flashin ominaisuuksien ja Googlen sosiaalisen verkoston rakentamisen avulla meillä on jo selain selaimessamme videoviestinnän ominaisuudet. Eikö olisi hienoa saada nämä kyvyt käyttämättä kolmannen osapuolen laajennusta, kuten Flashia?
Onneksi selaimen toimittajat ajattelivat samaa ja ottivat käyttöön getUserMedia-sovellusliittymän ohjelmistoihinsa. Tämä oli ensimmäinen askel päästäksesi laitteisiin, kuten kameroihin tai mikrofoneihin, suoraan selaimeltasi.
Node.js: n käyttäminen palvelimena tällaisen sovelluksen takana on hämmästyttävän helppoa siirtää videosignaali ilman kautta yhdelle tai useammalle asiakkaalle. Onneksi tämän kirjoittaessasi vain Chrome ja Opera tukevat sovellusliittymää, mutta toiset saavat nopeasti kiinni.
Kaksisuuntaisen viestinnän puhtaampi lähestymistapa on tällä hetkellä ainoa Chrome-asia, nimeltään WebRTC. WebRTC: n takia asiakkaat voivat avata vertaisviestintäkanavia yhdistämällä asiakkaan suoraan asiakkaaseen.
Hauskan vuoksi tutustu Sindre Sorhusin Photo Booth -toteutukseen, joka on tehty 121 tavulla!
var video = document.getElementsByTagName (’video’) [0],
navigator.getUserMedia (’video’, successCallback, errorCallback);
function successCallback (stream) {
video.src = virta;
}
function errorCallback (virhe) {
console.log (virhe);
}
02. $ (’valo’). FadeIn ();
Arduino-mikrokontrollerialusta on luokan A esimerkki "out of the box" JavaScript-käyttötapauksesta. Niille teistä, jotka eivät tunne Arduino-alustaa, tässä on erittäin kuuluisa lainaus sen verkkosivustolta:
"Arduino on avoimen lähdekoodin elektroniikan prototyyppialusta, joka perustuu joustavaan, helppokäyttöiseen laitteistoon ja ohjelmistoon. Se on tarkoitettu taiteilijoille, suunnittelijoille, harrastajille ja kaikille, jotka ovat kiinnostuneita interaktiivisten esineiden tai ympäristöjen luomisesta."
Arduino itsessään tukee vain C: llä kirjoitettua koodia, mikä ei vieläkään ole iso juttu. Muutamalla C-rivillä (sen lisäksi, että muut ovat tehneet tämän työn puolestasi), Arduino voi vastaanottaa komentoja USB-portin kautta sarjaporttiprotokollan kautta.
Mutta kuinka pääset sarjaporttiin JavaScriptin kautta? Selvästi ei selaimesta.
Node.js pelastus!
Yhteisön puolustajan Chris Williamsin ponnistelujen ansiosta meillä on Node-sarjaporttikirjasto, johon voimme lähettää tietoja vanhan SP-protokollan kautta. Tämä oli ensimmäinen läpimurto, jonka perusteella muut ihmiset keksivät abstraktimman lähestymistavan Arduinon kykyihin. Esimerkiksi solmu-arduino- ja duino-kirjastot.
Kuumin ja siistein kirjasto korttelin ympärillä JS-ohjattavalle Arduino-ohjelmoinnille on nyt jonny-five. Katso Bocoupin blogista Arduino-alustan kanssa tekemiä kuumia paskuja ja paljon laajennuksia. Myös Nicolai Onkenin ja Jörn Zaeffererin JSConf-video saattaa antaa sinulle mahdollisuuden kehittää sitä, mikä on tänään mahdollista pienellä koodilla.
03. Kädet on tehty selainta varten
Minority Reportin tulevaisuuden visio (se, jossa he hallitsevat tietokoneita käsillä, ei rumailla autoilla), tulee lähemmäksi joka päivä. Valtava askel tähän suuntaan oli Microsoftin ohjaimen vähemmän pelaamisyritys, Kinect. Hämmästyttävä pelattavuus, jota saatat ajatella, mutta mitä tekemistä tällä on JavaScriptin kanssa ?!
Microsoftin Kinect SDK -julkaisun avulla joukko ihmisiä ylitti Kinectin selainkäytön sillan. Ensinnäkin ChildNodes-kaverit, jotka ovat rakentaneet täydellisen toimivan kinect.js-kirjaston, mahdollistaa Microsoftin Kinectin käytön selaimessasi.
Suosittelen tarkasti heidän demonsa ja videonsa, se on räjähdys. Yksi merkittävä kinect.js-kirjaston haittapuoli on kuitenkin se, että asiakkaan takaosassa on oltava käynnissä WebSocket-palvelinohjelma (se on itse asiassa Kinect -> C # -> JS-liima).
Muutama MIT-maineista opiskelijaa työskentelee ratkaisun selvittämiseksi tämän seinän, nimeltään DepthJS,
in-selaimen laajennus, joka mahdollistaa Kinectin käytön Chromelle ja Safarille, jopa sivustoille, joita ei ole optimoitu Kinect-pohjaiseen käyttöön missään muodossa. DepthJS on tällä hetkellä varhaisessa kehitysvaiheessa, mutta ehdottomasti kannattaa seurata.
04. 3D-pelit, joita ohjataan peliohjaimellasi
Oletko koskaan yrittänyt pelata muuta kuin Flash-selainpeliä nykyään? Graafiset ominaisuudet ovat hämmästyttäviä, varsinkin kun näet peliklooneja, kuten Quake.
Mutta kun pelaat näitä juttuja, olet aina sidottu näppäimistöön ja (enimmäkseen) kömpelöön hiireen. Tämä on suuri haitta, etenkin toimintapeleissä, se todella estää heitä selaimelta.
Eikö olisi hienoa, jos voisit vain liittää Xbox-ohjaimesi tietokoneeseen ja aloittaa suosikkiselaimesi pelin? Tämä ei ole enää tulevaisuuden visio, tervehdi Gamepad API: ta!
Jos sinulla on peliohjain työpöydän ympärillä, liitä se heti ja nauti peleistä, jotka jo käyttävät Gamepad-sovellusliittymää. Tulosäätimien ohjelmointi on myös kakku, tarkista tämä koodinpätkä tai vielä parempi, suorita se itse:
div id = "peliohjaimet"> / div>
käsikirjoitus>
function gamepadConnected (tapahtuma) {
var peliohjaimet = document.getElementById ("peliohjaimet"),
gamepadId = tapahtuma.gamepad.id;
gamepads.innerHTML + = "Peliohjain kytketty (id =" + gamepadId + ")";
}
window.addEventListener ("MozGamepadConnected", gamepadConnected, false);
/ script>
Jos haluat lisätietoja selainten 3D-ominaisuuksista, tutustu Three.js: n ja Jens Arpsin avoimeen lähdekoodiin perustuvaan 3D-simulaattorimoottoriin, Ascentiin. Mark Hammil varo, tarvitsemme sinua toiseen Wing Commander-jatko-osaan!
05. Flashin käyttäminen iPadilla
Avoimien standardien rakastajana ja Applen fanipoikana minun on myönnettävä, että haluaisin todella kiittää Appleä siitä, että se ei laittanut Flashia iPadiin ja iPodiin, tämä todella aloitti avoimen tekniikan, kuten HTML5, CSS3 ja JavaScript, omaksumisen.
Toimistotyöntekijänä minun on sanottava, että tämä on todella huono tilanne asiakkaillemme.
Suurimman osan heistä joutuu maksamaan kahdesti yksinkertaisesta mainoksesta tai kampanjasta, jonka he ovat käynnistämässä, jotta interaktiivista sisältöä voidaan käyttää vanhassa IE7: ssä tai IE8: ssa Flashin kautta ja moderneissa selaimissa sekä iDevices HTML5: n kautta.
Vanhojen selainten ominaisuuksien täyttämisellä on rajat, enimmäkseen nimeltään suorituskyky. Joten eikö Flashin käyttäminen näissä Flashless iDevices -palveluissa ole mahdollista?
Tietysti on yksi, ja tietysti se on rakennettu JavaScriptiin.
Pala historiaa: Vuonna 2010 Tobias Schneider julkaisi pienen kirjaston nimeltä Gordon
mikä mahdollisti SWF-tiedostojen suorittamisen suoraan selaimessa. Tämä toimi melko hyvin pienille Flash-tiedostoille, kuten mainoksille, jotka käyttivät toimintoja vain Flash-versioon 2 asti, mutta korkeamman tason toiminnot eivät sisältyneet lainkaan.
Kun Tobias liittyi ueberJS-yhtiöön UXEBU, he keksivät uuden idean.
Ja niin, Bikeshed syntyi. Bikeshed itsessään on eräänlainen JavaScript-animaatiokehys, mutta on myös JavaScripti Flashille kaikelle, mitä haluat sen kääntäjän (se on sovitinpohjainen, joten voit kirjoittaa sovittimia mihin tahansa, vaikka vakiokäyttäytyminen on Flashin kääntäminen JavaScriptiin) . Se on yhteensopiva Flash 10: n ja ActionScript 3: n kanssa. Tutustu sen verkkosivuun saadaksesi lisätietoja sen monista ominaisuuksista kääntäjän lisäksi.
06. Sovellusten kirjoittaminen älypuhelimeesi
Natiivisovellusten kirjoittaminen matkapuhelinympäristöihin on kivinen tie. Se alkaa päätöksellä, mitä alustaa haluat tukea. Pitäisikö sovelluksesi toimia iPhonella ja iPadilla, Android-käyttöisellä mobiililaitteella, Windows Mobile-, Blackberry-laitteilla, webOS-pohjaisella ... ja niin edelleen.
Jokaisella alustalla on omat sovellusliittymät ja ne käyttävät enimmäkseen erilaisia ohjelmointikieliä.
Jos olet selviytynyt selainsodista, anna minun sanoa teille, että taistelu on tavallaan vaikeampaa. Kehittäjän on melkein mahdotonta rakentaa sovellusta kaikille näille alustoille ajallaan ja budjetillaan.
Eli mikä neuvoksi? Palkkaa lisää kehittäjiä? Veloitetaanko enemmän sovelluksista? Tai etsi parempi tapa varmistaa, että koodipohjasi toimii kaikilla laitteilla? Koska suurin osa teistä, haluaisin viimeisen lähestymistavan.
Mutta mihin nämä sovellukset tulisi rakentaa? Mitä yhteistä kaikilla näillä alustoilla on? Saatat tietää vastauksen, se on verkkoselain ja siksi JavaScript-moottori.
Tämä on Apache Cordovan idea, joka tunnetaan paremmin entisellä nimellä PhoneGap.
Cordova on JavaScript-kehys, joka tiivistää kunkin mobiiliympäristön API: t ja paljastaa siistin JavaScript-sovellusliittymän hallitsemaan kaikkia niitä. Tämän avulla voit ylläpitää yhtä koodipohjaa, jonka rakennat ja otat käyttöön eri mobiililaitteissa.
Täältä löydät resursseja saadaksesi selville, kuinka voit käyttää Cordovaa rakentamaan potkut mobiilisovelluksia, jotka rakennat kerran ja toimivat kaikkialla.
07. Rubyn ja Pythonin käyttäminen selaimessasi
Kuuluisan Firefox-selaimen takana oleva Mozilla työllistää paljon nörttejä, se on varmaa. Yksi heistä on Alon Zakai, Mozilla Research Teamin insinööri, joka rakensi kummajaisen työkalun nimeltä Emscripten.
Emscripten antaa sinun viedä LLVM-bittikoodin - joka voidaan luoda C / C ++ -pohjaisista kirjastoista - JavaScriptiin. Se tekee tämän kokoamalla kirjastot bittikoodiksi ja ottamalla sitten bittikoodin ja muuttamalla sen JavaScriptiksi. Siisti, mutta mitä voin todella tehdä tällä, voit kysyä itseltäsi?
Minulla on vastakysymys sinulle: oletko koskaan kuullut lauseen "CoffeeScriptin ja prototyypin käyttäminen on lähinnä mitä Rubyn käyttämisestä selaimessa voi saada"? Ei? Älä huoli, koska tämä ei ole enää totta.
Emscriptenillä voit yksinkertaisesti ottaa Ruby-lähteet, muuntaa ne JavaScriptiksi ja voilàksi, saada todellisen Ruby: n toimimaan selaimessasi! Mutta tämä ei koske vain Rubyä, esimerkiksi Python myös vapautettiin.
Tai tutustu selaimen h.264-dekooderiin Broadway. Se on itse asiassa tyhjennetty C ++ -kirjasto!
Siirry osoitteeseen repl.it nähdäksesi muutaman ohjelmointikielen (mukaan lukien Ruby ja Python), jotka ovat käynnissä selaimessasi!
08. Käyttöjärjestelmästä riippumattomien työpöytäohjelmien kirjoittaminen
Puhuimme useiden mobiilialustojen kohdistamisesta Apache Cordovan avulla aiemmin. Ei ole yllättävää, että JavaScriptiä ei voida käyttää vain mobiilialustojen kohdistamiseen, myös vanhaan ystäväämme, pöytätietokoneeseen, voidaan puuttua.
Ensimmäiset ratkaisut tulivat Appceleratorin kavereilta, joilla oli Titanium Desktop Suite, ja Adobelta, laajalti käytetyltä Air-alustalta.
Mutta avoimen lähdekoodin ystävinä, joita me kaikki olemme, etsimme avoimempi ja Node.js-pohjainen tekniikka. Tapaa app.js! app.js on avoin verkkotekniikka- ja Node.js-pohjainen työpöytäohjelmien rakennustyökalu, jonka avulla voimme kirjoittaa todellisia työpöytäohjelmia tiedostojärjestelmällä, ikkunaohjaimilla ja muulla. Voimme luottaa Noden vakaisiin alustojen välisiin sovellusliittymiin ja rakentaa ohjelmistokäyttöliittymämme HTML: llä ja CSS: llä. Aivan kuten tämän listan kuumimmat uudet jutut täällä.
app.js on melko nuori projekti ja tukee siksi nyt vain Windowsia ja Linuxia, mutta postituslistan mukaan Mac-tuki on tulossa.
09. Verkkopalvelimen suorittaminen
Nykyään et järkytä ketään, kun kerrot heille, että verkkosivustoasi palvelee JavaScript-pohjainen verkkopalvelin. Jos ajattelet kaksi tai kolme vuotta sitten ja kerroit web-kehittäjille täsmälleen saman, he todennäköisesti olisivat nauraneet sinusta tai jopa pahempaa.
Mutta Node.js: n uskomattoman menestyksen myötä tämä on onneksi kaukana nyt. Ei vain se, että se ei enää yllätä ihmisiä asynkronisen luonteensa vuoksi, Node.js on suorituskykyinen aalto, varsinkin kun on kyse monien rinnakkaisten yhteyksien ongelmasta. Sen suorituskyky ei ole pelkästään räjähdys, vaan myös todella yksinkertainen sovellusliittymä houkuttelee paljon kehittäjiä. Katsotaanpa "Hello World" -esimerkki solmumaailmasta, se ei ole vain "Hello World" -tulostus näytöllä, se on myös http-palvelin!
var http = vaatia (’http’);
http.createServer (funktio (kysy, res) {
res.writeHead (200, {’Content-Type’: ’text / plain’});
res.end (’Hello World n’);
}). kuuntele (1337, ’127.0.0.1’);
Jos tämä yksinkertaisuus ei räjäytä sinua, en voi myöskään auttaa sinua.
Yksi Solmun suosion (tai hype) parhaista osista on, että Microsoftin kaltaiset suuryritykset todella tukevat sitä, ts. Azure Cloud Services -palvelussaan!
10. Verkkosivujen kaappaaminen ja näyttäminen
Joten viimeisenä mutta ei vähäisimpänä, katsotaanpa projekti, jota rakastan henkilökohtaisesti siitä, että annoin minun suorittaa QUnit-testini päähän komentorivillä. PhantomJS on päätön WebKit-pohjainen selain, jolla on siisti JavaScript (tai CoffeScript) -pohjainen sovellusliittymä.
Mutta JavaScriptin ja DOM: n testaaminen ei ole ainoa Phantomin käyttötapa. Minua todella kiehtoo sen kyky kaapata verkkosivustoja ja antaa sinun ottaa siitä kuvakaappauksia!
Joo, luet oikein, Phantomilla voit tulostaa verkkosivuja eri graafisissa muodoissa, ja tietysti se on yhtä helppoa kuin makeisten varastaminen vauvalta.
Katsotaanpa komentosarja, joka tekee tämän tarkalleen:
var sivu = uusi verkkosivu ();
page.open (’http://google.com’, function (status) {
page.render (’google.png’);
phantom.exit ();
});
Se on kaikki mitä tarvitset kuvakaappauksen tekemiseen, ja koska se on JavaScript-pohjainen, voit käyttää myös jQueryä ja muokata sivun sisältöä ennen sen näyttämistä!
Odota! Siellä on enemmän...
Joten toivon, että olet yhtä hämmästynyt kuin minä, kun löysin kaikki nämä työkalut. Tämä artikkeli vain naarmuuntui pintaan siitä, mikä on mahdollista JavaScriptillä nykyään. Siellä on niin paljon muuta kuin täysin JS Cloud9: ään kirjoitetut IDE: t tai sen kanssa tehtyjä korkean tietoturvan juttuja (Luottokorttisi on tehty JavaScriptillä).
Toivon, että tunnet inspiraation, otat jonkin aikaa ja leikkiä joidenkin tässä mainittujen projektien kanssa, tai jopa parempi ottaa joitain näistä työkaluista ja rakentaa uusia asioita niiden ympärille. Suurin osa tästä on avointa lähdekoodia, ja siellä on kehittäjiä, jotka etsivät sinua auttamaan heitä parantamaan työtään, vaikka se tapahtuisi vain työkalujen avulla, löytämällä virheitä ja ilmoittamalla niistä.
