10 asiaa, joita et tiennyt, että JavaScript voisi tehdä

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 viimeisten viiden vuoden aikana JavaScript on saanut yhä enemmän huomiota. Kun enemmän huomiota kiinnitetään, useammat kehittäjät käyttävät JavaScriptiä, 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 pienestä Skype-ohjelmistosta.

Adoben Flash-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 vaihe 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, tarkista Sindre Sorhus ' Valokuva-automaatti toteutus tehty 121 tavua!



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

function successCallback (stream) {
video.src = virta;
}

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

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

Arduino mikrokontrollerialusta on luokka 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 rivillä C: tä (sen lisäksi, että muut ovat tehneet tämän työn puolestasi), Arduino voi vastaanottaa komentoja USB-portin kautta sarjaporttiprotokollan kautta.

Mutta miten pääset sarjaporttiin JavaScriptin kautta? Selvästi ei selaimesta.
Node.js pelastus!

Yhteisön puolestapuhujien ponnistelujen vuoksi Chris Williams , meillä on Solmun sarjaporttikirjasto , johon voimme lähettää tietoja vanhan SP-protokollan kautta. Tämä oli ensimmäinen läpimurto, joka kirjaston perusteella muut ihmiset keksivät abstraktimman lähestymistavan Arduinon kykyihin. Esimerkiksi solmu-arduino ja duino kirjastot.

Kuumin ja siistein kirjasto lohkon ympärillä JS-ohjattavalle Arduino-ohjelmoinnille on nyt jonny-viisi . Tarkista Bocoupin blogi joillekin kuumille pasoille, jotka he ovat tehneet Arduino-alustalla ja runsaalla laajennuksella. Myös JSConf-video alkaen Nicolai Onken ja Jörn Zaefferer saattaa antaa sinulle mahdollisuuden kehittää sitä, mikä on tänään mahdollista pienellä koodilla.

kuinka tehdä vinyylileluja kotona

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 ?!

Kanssa Microsoftin Kinect SDK joukko ihmisiä ylitti Kinectin selainkäytön sillan. Ensinnäkin ChildNodes jotka ovat rakentaneet täydellisen toimivan kinect.js-kirjaston, joka mahdollistaa Microsoftin Kinectin käytön selaimessasi.

Suosittelen tarkasti heidän demonsa ja videonsa, se on räjähdys. Yksi merkittävä haitta kinect.js-kirjastossa on kuitenkin se, että asiakkaan takaosassa on oltava käynnissä WebSocket-palvelinohjelma (se on itse asiassa Kinect -> C # -> JS-liima).

Muutama MIT-maineen opiskelija työskentelee ratkaisun puolesta, joka kutsuu tämän seinän SyvyysJS ,
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 pelikloonien kaltaisia Järistys .

hahmo suunnittelu edestä ja sivusta

Mutta kun pelaat tätä tavaraa, 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-sovellusliittymä !

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:



function gamepadConnected (tapahtuma) {
var peliohjaimet = document.getElementById ('peliohjaimet'),
gamepadId = tapahtuma.gamepad.id;

gamepads.innerHTML + = 'Peliohjain kytketty (id =' + gamepadId + ')';
}

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

Jos haluat tietää enemmän selainten 3D-ominaisuuksista, tarkista Three.js ja J meille Arps 'avoimen lähdekoodin 3D-simulaattorimoottori Nousu rakennettu sen päälle. 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 käynnistävät, 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 polyfill-täytöllä on rajat, enimmäkseen nimeltään suorituskyky. Joten ei ole kykyä suorittaa Flashia näissä Flashless iDevices -ohjelmassa?

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 vain toimintoja 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 on syntynyt. 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 haluamaasi, 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, haluan kertoa teille, että tämä on tavallaan vaikeampaa taistelu päästä sisään. 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ä näillä alustoilla on? Saatat tietää vastauksen, se on verkkoselain ja siksi JavaScript-moottori.

Se on idea Apache Cordova , tunnetaan paremmin entisellä nimellä PhoneGap.
Cordova on JavaScript-kehys, joka tiivistää kunkin mobiiliympäristön sovellusliittymät ja paljastaa siistin JavaScript-sovellusliittymän hallitsemaan kaikkia niitä. Tämän avulla voit ylläpitää yhtä koodipohjaa, jonka sitten rakennat ja otat käyttöön eri mobiililaitteissa.

Tarkista resurssit tässä saadaksesi selville, kuinka Cordovan avulla voidaan rakentaa kick ass -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 insinööri Mozilla-tutkimusryhmässä, joka rakensi kummajaisen työkalun nimeltä Ilmoittaudu .

Emscripten antaa sinun viedä LLVM-bittikoodin - joka voidaan luoda C / C ++ -pohjaisista kirjastoista - JavaScriptiin. Se tekee tämän kokoamalla kirjastot bittikoodiksi ja ottamalla sen jälkeen 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 Rubiini lähteistä, muunna ne JavaScriptiksi ja voilàksi, pidä oikea Ruby käynnissä selaimessasi! Mutta tämä ei koske vain Rubyä, Python esimerkiksi myös vapautettiin.

Tai tutustu selaimen h.264-dekooderiin Broadway . Se on itse asiassa tyhjennetty C ++ -kirjasto!

Mene repl.it nähdäksesi muutaman ohjelmointikielen (mukaan lukien Ruby ja Python) selaimessasi!

08. Käyttöjärjestelmästä riippumattomien työpöytäohjelmien kirjoittaminen

Keskustelimme 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 Appcelerator Titanium Desktop Suite -ohjelmiston ja laajasti käytetyn Adoben kanssa Ilmaa foorumi.

Mutta koska me kaikki olemme avoimen lähdekoodin ystäviä, etsimme avoimempaa ja Node.js-pohjaista tekniikkaa. Tavata 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 tavalla. 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 siksi se tukee nyt vain Windowsia ja Linuxia, mutta postitus lista , 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 olisivat todennäköisesti nauraneet sinusta tai jopa pahempaa.

Mutta uskomattomalla menestyksellä Node.js tämä on onneksi kaukana nyt. Ei vain se, että se ei enää yllätä ihmisiä asynkronisen luonteensa vuoksi, Node.js on suorituskykyinen aallot, varsinkin kun on kyse monien rinnakkaisten yhteyksien ongelmasta. Sen suorituskyky ei ole vain räjähdys, vaan todella yksinkertainen sovellusliittymä houkuttelee paljon kehittäjiä. Katsotaanpa Node-maailman 'Hello World' -esimerkki, se ei ole vain 'Hello World' -tulostus näytössä, se on myös http-palvelin!

var http = vaatia ('http');
http.createServer (funktio (kysy, res) {
res.writeHead (200, {'Content-Type': 'teksti / tavallinen'});
res.end ('Hello World n');
kuuntele (1337, '127.0.0.1');

Jos tämä yksinkertaisuus ei räjäytä sinua, niin en voi myöskään auttaa sinua.

Yksi Node-suosion (tai hype) parhaista osista on, että Microsoftin kaltaiset suuryritykset todella tukevat sitä, ts. Azure Cloud Services !

kuinka kytkeä perspektiiviruudukkotyökalu pois kuvittajasta

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, jossa 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 manipuloida 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 nykyään JavaScriptillä. JS: ssä on kirjoitettu niin paljon enemmän IDE: itä Pilvi9 tai sen kanssa tehtyjä korkean turvallisuuden asioita ( 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ä.