Inhalt
- 01. Et gëtt Zäit fir en Hangout
- 02. $ ('Liicht'). FadeIn ();
- 03. Är Hänn si fir de Browser gemaach
- 04. 3D Spiller kontrolléiert mat Ärem Spillpad
- 05. Leeft Flash op Ärem iPad
- 06. Schreiwen Apps fir Äre Smartphone
- 07. Lafen Ruby a Python an Ärem Browser
- 08. Schreiwen OS onofhängeg Desktop Programmer
- 09. Leeft e Webserver
- 10. Webscraping a Screenshotting
- Waart! Et gëtt méi ...
JavaScript ass wäit gaang zënter senger Gebuert am Joer 1995. En haarde Wee sécher, voller Mëssverständnes, Mëssbrauch an Ignoranz. Awer d'Zäiten hu geännert, zënter de leschte fënnef Joer huet JavaScript ëmmer méi Opmierksamkeet kritt. Mat méi Opmierksamkeet benotze méi Entwéckler tatsächlech JavaScript, benotze se fir vill verschidden Zwecker a genéissen hir Schéinheet. Klassesch "Ugly Duckling" Geschicht, wann Dir mech frot.
Am folgenden Artikel entdecke mir 10 Benotzungsfäll fir JavaScript déi anescht si wéi déi allgemeng "am Browser", Dir sidd gewinnt.
01. Et gëtt Zäit fir en Hangout
Kënnt Dir Iech un d'80er Visioun vu Facetime-ähnlecher Videokommunikatioun erënneren?
Et huet nëmmen 20 Joer gedauert ier dëst Mainstream gaang ass wéinst bal iwwerall verfügbare Breetbandinternet an der schwéierer Benotzung vun enger klenger Software mam Numm Skype.
Mat de Fäegkeete vum Adobe's Flash an dem Google säi Versuch e sozialt Netzwierk opzebauen, hu mir schonn d'Fäegkeete vun der Videokommunikatioun an eisem Browser. Wier et net cool dës Fäegkeeten ze hunn ouni en Drëtt-Plug-In wéi Flash ze benotzen?
Glécklecherweis hunn d'Browserhändler dat selwecht geduecht an de "getUserMedia" API an hir Software implementéiert. Dëst war en éischte Schrëtt fir Zougang zu Apparater wéi Kameraen oder Mikrofonen direkt vun Ärem Browser ze kréien.
Node.js als Server am Réck vun esou enger Applikatioun benotzt, ass et erstaunlech einfach de Videosignal iwwer d'Loft zu engem oder méi Clienten ze transportéieren. Leider, zum Schreiwe vun dësem Zäit ënnerstëtzen nëmme Chrome an Opera d'API, awer anerer fänken séier un.
Déi méi propper Approche fir eng zwee Wee Kommunikatioun ass eng eenzeg eenzeg Saach fir de Moment am Chrome, genannt WebRTC. Wéinst WebRTC sinn d'Clienten aktivéiert fir Peer-to-Peer Kommunikatiounskanäl opzemaachen, direkt de Client mam Client ze verbannen.
Zum Wuel vum Spaass, kuckt op Sindre Sorhus 'Photo Booth Ëmsetzung gemaach an 121 Bytes!
var video = document.getElementsByTagName ('Video') [0],
navigator.getUserMedia ('Video', successCallback, errorCallback);
Funktioun Erfolleg Réckruff (Stream) {
video.src = Baach;
}
Funktioun Feeler Réckruff (Feeler) {
console.log (Feeler);
}
02. $ ('Liicht'). FadeIn ();
D'Arduino Mikrokontroller Plattform ass e Grad E Beispill fir en "out of the box" JavaScript Benotzungsfall. Fir déi vun Iech, déi net mat der Arduino Plattform vertraut sinn, hei e super berühmten Zitat vu senger Websäit:
"Arduino ass eng Open-Source Elektronik Prototyp Plattform baséiert op flexibel, einfach benotzbarer Hardware a Software. Et ass fir Kënschtler, Designer, Hobbyisten, an all Mënsch interesséiert fir interaktiv Objeten oder Ëmfeld ze schafen."
Den Arduino selwer ënnerstëtzt nëmme Code geschriwwen an C, wat nach ëmmer kee groussen Deal ass. Mat e puer Zeilen vun C (ausser datt anerer dës Aarbecht fir Iech gemaach hunn), kann den Arduino Kommandoen duerch säin USB Hafen iwwer de Serialport Protokoll kréien.
Awer wéi kënnt Dir op de seriellen Hafen iwwer JavaScript zougräifen? Kloer net vum Browser.
Node.js zur Rettung!
Wéinst den Efforte vum Gemeinschaftsadvokat Chris Williams hu mir eng Node Serienportbibliothéik, wou mir Daten iwwer den ale SP Protokoll kënne schécken. Dëst war den initialen Duerchbroch, baséiert op der Bibliothéik aner Leit hunn eng méi abstrakt Approche fir d'Fäegkeete vun Arduino. Zum Beispill d'Node-Arduino an Duino Bibliothéiken.
Déi hottsten a coolst Bibliothéik ronderëm de Block fir JS gedriwwe Arduino Programméierung bis elo ass jonny-five. Kuckt de Blog vum Bocoup fir e puer waarme Schäiss déi se mat der Arduino Plattform gemaach hunn a vill Plug-ins. Och de JSConf Video vum Nicolai Onken a Jörn Zaefferer kéint Iech e Spin ginn, wat haut mat wéineg Code méiglech ass.
03. Är Hänn si fir de Browser gemaach
Dem Minority Report seng Zukunftsvisioun (déi wou se Computer mat hiren Hänn kontrolléieren, net déi ellen Autoen) kënnt all Dag méi no. E grousse Schrëtt an dës Richtung war de Controller vu Microsoft manner Spillversuch, Kinect. Erstaunlechem Gameplay kënnt Dir mengen, awer wat huet dat mam JavaScript ze dinn ?!
Mat Microsoft Kinect SDK Verëffentlechung sinn e Koup Leit iwwer d'Bréck vun am Browser benotzt fir de Kinect. Als éischt d'Joffer vu ChildNodes déi eng komplett funktionéierend kinect.js Bibliothéik gebaut hunn, déi d'Benotzung vu Microsoft Kinect an Ärem Browser erméiglecht.
Ech recommandéieren drun hir Demos a Videoen ze kontrolléieren, et ass en Héichuewen. Ee groussen Nodeel vun der kinect.js Bibliothéik ass awer, datt et e WebSocket Serverprogramm muss sinn, deen am Réck vum Client leeft (dat ass tatsächlech de Kinect -> C # -> JS Klebstoff).
E puer Studente vu MIT Ruhm schaffen un enger Léisung fir dës Mauer ofzerappen, genannt DepthJS,
en am Browser Plugin deen de Kinect benotze fir Chrome a Safari aktivéiert, och fir Site déi net optimiséiert sinn fir e Kinect baséiert Gebrauch an iergendenger Form. DepthJS ass de Moment an enger fréicher Entwécklungsphase, awer definitiv derwäert ze verfollegen.
04. 3D Spiller kontrolléiert mat Ärem Spillpad
Hutt Dir scho probéiert haut en Net-Flash Browser Spill ze spillen? Déi grafesch Fäegkeete sinn erstaunlech, besonnesch wann Dir Spillklone wéi Quake gesinn.
Awer wann Dir dës Saachen spillt sidd Dir ëmmer op Är Tastatur an déi (meeschtens) knaschteg Maus gebonnen. Dëst ass e groussen Nodeel, besonnesch fir Actionspiller, et hält se wierklech vum Browser zréck.
Wär et net cool wann Dir just Ären Xbox Controller an Äre PC plécke kënnt an ufänken Äre Liiblingsbrowser ze spillen? Dëst ass keng Zukunftsvisioun méi, soen Hallo dem Gamepad API!
Wann Dir e Gamepad ronderëm Äre Schreif hutt, steck et elo direkt a genéisst e puer Spiller, déi schonn d'Gamepad API benotzen. Programméiere vun den Input Kontrollen ass och e Stéck Kuch, kuckt dëse Codestéck oder nach besser, lafe se selwer:
div id = "Spillpads"> / div>
Skript>
Funktioun gamepadConnected (Event) {
var gamepads = document.getElementById ("gamepads"),
gamepadId = event.gamepad.id;
gamepads.innerHTML + = "Gamepad Connected (id =" + gamepadId + ")";
}
window.addEventListener ("MozGamepadConnected", gamepadConnected, falsch);
/ Skript>
Wann Dir méi iwwer d'3D Fäegkeete vun de Browser wësse wëllt, kuckt op Three.js a Jens Arps 'Open Source 3D Simulatormotor Ascent erop gebaut. Mark Hammil passt op, mir brauchen Iech vläicht fir eng aner Wing Commander Fortsetzung!
05. Leeft Flash op Ärem iPad
Als oppene Standardsliebhaber an Apple Fanboy muss ech zouginn datt ech Apple wierklech Merci soe well se de Flash net um iPad an iPod gesat hunn, dëst huet wierklech eng Bewegung ugefaang fir oppe Technologien wéi HTML5, CSS3 a JavaScript unzehuelen.
Als Agentur vun der Agentur muss ech soen datt dëst eng wierklech schlecht Situatioun fir eis Clienten ass.
Déi meescht vun hinnen musse zweemol fir eng einfach Annonce oder Kampagne bezuelen déi se starten fir interaktiven Inhalt ze hunn deen an alen IE7 oder IE8 iwwer Flash leeft an op modernen Browser souwéi iDevices iwwer HTML5.
Polyfilling vun den alen Browserfeatures huet seng Grenzen, meeschtens benannt Performance. Also ass et keng Kapazitéit fir Flash op dësen Flashless iDevices ze laafen?
Natierlech gëtt et een, an natierlech ass en am JavaScript gebaut.
E Stéck Geschicht: Am Joer 2010 huet den Tobias Schneider eng kleng Bibliothéik mam Numm Gordon erausbruecht
wat erlaabt datt SWF Dateien direkt am Browser lafen. Dëst funktionnéiert zimlech gutt fir kleng Flash Dateien wéi Annoncen déi nëmme Funktionalitéiten bis zu Flash Versioun 2 benotzt hunn, awer méi héije Funktionalitéit war guer net mat abegraff.
Wéi den Tobias der ueberJS Firma UXEBU bäigetruede sinn, sinn se op eng nei Iddi komm.
An esou gouf de Bikeshed gebuer. Bikeshed selwer ass eng Art JavaScript Animatiounskader, awer ass och e JavaScript fir Flash fir alles wat Dir wëllt datt et Compiler ass (et ass Adapterbaséiert, sou datt Dir Adapter fir alles wat Dir wëllt schreift, obwuel de Standardverhalen de Flash op JavaScript kompiléiert) . Et ass kompatibel mat Flash 10 an ActionScript 3. Kuckt Iech op senger Websäit fir méi iwwer seng vill Features ausser dem Compiler ze léieren.
06. Schreiwen Apps fir Äre Smartphone
Naturvoll Uwendunge fir Handyëmfeld schreiwen ass eng Fielsstrooss. Et fänkt mat der Entscheedung un wéi eng Plattform Dir wëllt ënnerstëtzen. Sollt Är Uwendung op engem iPhone an iPad lafen, engem Android powered mobilen Apparat, Windows Mobile, Blackberry Geräter, webOS baséiert pla ... a sou weider.
Jidd vun dësen Plattformen huet seng eege APIen a benotzt meeschtens verschidde Programméierungssproochen.
Wann Dir de Browser Kricher iwwerlieft hutt, loosst mech Iech soen datt dëst e méi haart Kampf ass fir eranzekommen. Et ass bal onméiglech fir en Entwéckler eng Uwendung fir all dës Plattformen ze bauen an Zäit a Budget.
Also wat maachen? Méi Entwéckler astellen? Méi fir Apps bezuelen? Oder eng besser Approche fannen fir sécher ze sinn datt Är Code Base op all Apparat leeft? Als déi meescht vun Iech géif ech déi lescht Approche léiwer maachen.
Awer a wat sollten dës Apps gebaut ginn? Wat hunn all dës Plattformen gemeinsam? Dir wësst vläicht d'Äntwert, et ass e Webbrowser an dofir e JavaScript-Motor.
Dat ass d'Iddi hannert Apache Cordova, besser bekannt ënner sengem fréieren Numm PhoneGap.
Cordova ass e JavaScript Framework deen d'APIs vun all mobilen Ëmfeld abstraktéiert an e proppert JavaScript API exposéiert fir se all ze kontrolléieren. Dëst erlaabt Iech eng eenzeg Code Base z'erhalen, déi Dir dann op verschiddene mobilen Apparater baut an deplacéiert.
Kuckt d'Ressourcen hei fir erauszefannen wéi Dir Cordova benotzt fir Kick Ass Mobile Apps ze bauen déi Dir eemol baut an iwwerall lafe wäert.
07. Lafen Ruby a Python an Ärem Browser
Mozilla, d'Firma hannert dem berühmte Firefox Browser, beschäftegt vill Geeks, dat ass sécher. Ee vun hinnen ass den Alon Zakai en Ingenieur beim Mozilla Research Team, deen e freaky Tool mam Numm Emscripten gebaut huet.
Emscripten léisst Dir LLVM Bitcode huelen - deen aus C / C ++ baséiert Bibliothéiken generéiert ka ginn, op JavaScript. Et mécht dëst andeems d'Bibliothéiken a Bitcode kompiléiert ginn an dann, dee Bitcode huelen an a JavaScript transforméieren. Gefleegt, awer wat kann ech tatsächlech mat dësem maachen, kënnt Dir Iech froen?
Ech hunn eng Géignerfro fir Iech: Hutt Dir jeemools den Ausdrock héieren "Benotzt CoffeeScript a Prototyp ass am nootste wat Dir kënnt vum Ruby am Browser lafen"? Nee? Maacht Iech keng Suergen, well dëst ass net méi richteg.
Mat Emscripten kënnt Dir einfach d'Rubinquellen huelen, se a JavaScript transforméieren an voilà, hunn de richtege Ruby an Ärem Browser laafen! Awer dëst gëllt net nëmme fir Ruby, de Python zum Beispill gouf och emscriptenéiert.
Oder kuckt am Browser h.264 Decoder Broadway. Dat ass eigentlech eng emscriptenéiert C ++ Bibliothéik!
Gitt op repl.it fir e puer Programméierungssproochen (abegraff Ruby a Python) an Ärem Browser ze gesinn!
08. Schreiwen OS onofhängeg Desktop Programmer
Mir hu virdru geschwat fir méi mobil Plattformen mat der Hëllef vun Apache Cordova ze viséieren. Net iwwerraschend kann JavaScript net nëmme benotzt ginn fir mobil Plattformen ze viséieren, eisen ale Frënd den Desktop Computer kann och ugepaakt ginn.
Déi éischt Léisunge koume vun de Kärele vum Appcelerator mat der Titanium Desktop Suite a vun Adobe déi wäit benotzt Air Plattform.
Awer als Open Source Liebhaber déi mir all sinn, ass eng méi oppen an Node.js baséiert Technologie wat mir gesicht hunn. Trefft app.js! app.js ass eng oppe Webtechnologie an Node.js baséiert Desktop Programmbauer, dat erlaabt eis richteg Desktop Programmer mat Dateisystem Zougang, Fënster Kontrollen a méi ze schreiwen. Mir kënnen op déi stabil Cross Plattform APIs vum Node vertrauen an eis Software UI mat HTML an CSS bauen. Just wéi déi hei waarm nei Saachen op dëser Lëscht hei.
app.js ass en zimlech jonke Projet an ënnerstëtzt dofir just Windows a Linux bis elo, awer no der Mailing Lëscht ass Mac Support um Wee.
09. Leeft e Webserver
Hautdesdaags schockéiert Dir kee wann Dir se seet datt Är Websäit vun engem JavaScript baséiert Webserver servéiert gëtt. Wann Dir virun zwee oder dräi Joer zréck denkt, a Web-Entwéckler genau d'selwecht gesot hutt, hätten se Iech wahrscheinlech gelaacht oder nach méi schlëmm.
Awer mam onheemlechen Erfolleg vun Node.js ass dëst glécklech wäit ewech vun elo. Net nëmmen iwwerrascht et d'Leit net méi, wéinst senger asynchroner Natur Node.js ass eng Wonnerkind a Performance, besonnesch wann et drëm geet de Problem vu ville parallele Verbindungen ze konfrontéieren. Net nëmme seng Leeschtung ass en Héichuewen, déi wierklech einfach API zitt vill Entwéckler un, och. Loosst eis de "Hello World" Beispill aus der Node Welt kucken, et ass net nëmmen e Print "Hello World" um Bildschierm Beispill, et ass e http Webserver!
var http = erfuerderen ('http');
http.createServer (Funktioun (req, res) {
res.writeHead (200, {'Content-Type': 'text / plain'});
res.end ('Hallo Welt n');
}). lauschteren (1337, '127.0.0.1');
Wann Dir net vun dëser Einfachheet geplatzt sidd, gutt, ech kann Iech och net hëllefen.
Ee vun de beschten Deeler vun der Node Popularitéit (oder Hype) ass, datt grouss Firmen wéi Microsoft et wierklech ënnerstëtzen, also an hiren Azure Cloud Services!
10. Webscraping a Screenshotting
Also, lescht awer net zulescht, loosst eis e Projet kucken deen ech perséinlech gär hunn fir mech meng QUnit Tester ouni Kapp op der Kommandozeil auszeféieren. PhantomJS ass en Headless WebKit baséiert Browser mat engem ordentleche JavaScript (oder CoffeScript) baséiert API.
Awer Testen vun Ärem JavaScript an DOM ass net deen eenzege Fall fir Phantom. Wat mech wierklech faszinéiert si seng Fäegkeete fir Websäiten ze krazen an Iech Screenshots dovun ze maachen!
Jo, Dir liest richteg, mam Phantom kënnt Dir Websäiten a verschiddene grafesche Formater ausschécken an natierlech ass et sou einfach wéi Séissegkeete vun engem Puppelchen ze klauen.
Loosst eis e Skript kucken dat genau dat mécht:
var Säit = nei Websäit ();
page.open (‘http://google.com’, Funktioun (Status) {
page.render ('google.png');
phantom.exit ();
});
Dat ass alles wat Dir braucht fir e Screenshot ze maachen a well et JavaScript baséiert, kënnt Dir och jQuery benotzen an d'Säitinhalter manipuléieren ier Dir et Screenshotting mécht!
Waart! Et gëtt méi ...
Also, ech hoffen Dir sidd sou erstaunt wéi ech war, wéi ech all eent vun dësen Tools entdeckt hunn. Dësen Artikel huet just d'Uewerfläch gekraazt wat haut mat JavaScript méiglech ass. Et gi sou vill méi wéi IDEen ganz a JS Cloud9 geschriwwen oder héich Sécherheetssaachen domat gemaach (Är Kreditkaart gouf mat JavaScript gemaach).
Ech hoffen Dir fillt Iech inspiréiert, huelt Iech Zäit a spillt mat e puer vun de Projeten déi hei erwähnt ginn, oder nach besser e puer vun dësen Tools huelen a nei Saachen ronderëm bauen. Meeschtens hei ass Open Source an et sinn Entwéckler dobaussen, déi no Iech sichen fir hinnen ze hëllefen hir Aarbecht ze verbesseren, och wann et nëmme mat Hëllef vun den Tools ass, Bugs entdeckt a gemellt ginn.
