İçerik
- 01. Hangout zamanı
- 02. $ (’light’). FadeIn ();
- 03. Elleriniz tarayıcı için yapıldı
- 04. Oyun kumandanızla kontrol edilen 3B oyunlar
- 05. iPad'inizde Flash Çalıştırma
- 06. Akıllı telefonunuz için uygulamalar yazma
- 07. Ruby ve Python'u tarayıcınızda çalıştırmak
- 08. İşletim sisteminden bağımsız masaüstü programları yazmak
- 09. Web sunucusu çalıştırma
- 10. Web taraması ve ekran görüntüsü alma
- Bekle! Fazlası var...
JavaScript, 1995'teki doğumundan bu yana uzun bir yol kat etti. Kesinlikle zor bir yol, yanlış anlama, yanlış kullanım ve cehaletle dolu. Ancak dönem değişti, son beş yıldan beri JavaScript giderek daha fazla ilgi görüyor. Daha fazla dikkatle, daha fazla geliştirici aslında JavaScript kullanıyor, onu birçok farklı amaç için kullanıyor ve güzelliğinin tadını çıkarıyor. Bana sorarsan klasik "Çirkin Ördek Yavrusu" hikayesi.
Aşağıdaki makalede, alışkın olduğunuz "tarayıcıda" yaygın olanlardan farklı 10 JavaScript kullanım durumunu keşfedeceğiz.
01. Hangout zamanı
Facetime benzeri görüntülü iletişimin 80'lerin vizyonunu hatırlıyor musunuz?
Neredeyse her yerde mevcut geniş bant internet ve Skype adlı küçük bir yazılımın yoğun kullanımı nedeniyle bunun yaygınlaşması yalnızca 20 yıl sürdü.
Adobe’nin Flash yetenekleri ve Google'ın bir sosyal ağ kurma girişimiyle, tarayıcımızda zaten görüntülü iletişim yeteneklerine sahibiz. Flash gibi üçüncü taraf bir eklenti kullanmadan bu yeteneklere sahip olmak harika olmaz mıydı?
Neyse ki, tarayıcı satıcıları da aynı şeyi düşündüler ve "getUserMedia" API'sini yazılımlarına uyguladılar. Bu, kameralar veya mikrofonlar gibi cihazlara doğrudan tarayıcınızdan erişmek için ilk adımdı.
Node.js'yi bu tür bir uygulamanın arkasında sunucu olarak kullanmak, video sinyalini havadan bir veya daha fazla istemciye taşımak inanılmaz derecede kolaydır. Ne yazık ki, bunu yazarken, yalnızca Chrome ve Opera API'yi destekliyor, ancak diğerleri hızlı bir şekilde yetişecek.
İki yönlü iletişim için daha temiz yaklaşım, şu anda Chrome'un WebRTC adı verilen tek şeydir. WebRTC sayesinde, istemciler, istemciyi istemciye doğrudan bağlayarak, uçtan uca iletişim kanallarını açabilirler.
Eğlence uğruna, Sindre Sorhus’un 121 baytta yapılan Photo Booth uygulamasına göz atın!
var video = document.getElementsByTagName (’video’) [0],
navigator.getUserMedia (’video’, successCallback, errorCallback);
function successCallback (stream) {
video.src = akış;
}
function errorCallback (error) {
console.log (hata);
}
02. $ (’light’). FadeIn ();
Arduino mikrodenetleyici platformu, "kutudan çıkar çıkmaz" JavaScript kullanım durumu için birinci sınıf bir örnektir. Arduino platformuna aşina olmayanlarınız için, işte web sitesinden süper ünlü bir alıntı:
"Arduino, esnek, kullanımı kolay donanım ve yazılıma dayalı açık kaynaklı bir elektronik prototip oluşturma platformudur. Sanatçılar, tasarımcılar, hobiler ve etkileşimli nesneler veya ortamlar oluşturmakla ilgilenen herkes için tasarlanmıştır."
Arduino'nun kendisi yalnızca C ile yazılmış kodu destekliyor ki bu hala önemli değil. Birkaç satır C ile (başkalarının bu işi sizin için yapmış olmasının yanı sıra), Arduino, seri port protokolü aracılığıyla USB portu üzerinden komutlar alabilir.
Ancak seri bağlantı noktasına JavaScript aracılığıyla nasıl erişebilirsiniz? Açıkça tarayıcıdan değil.
Node.js kurtarmaya!
Topluluk savunucusu Chris Williams'ın çabaları nedeniyle, eski SP protokolü üzerinden veri gönderebileceğimiz bir Node seri port kütüphanesine sahibiz. Bu, diğer insanların Arduino'nun yetenekleri için daha soyut bir yaklaşım geliştirdiği kütüphaneye dayanan ilk buluştu. Örneğin düğüm-arduino ve duino kitaplıkları.
JS tarafından yönlendirilen Arduino programlaması için bloğun etrafındaki en sıcak ve havalı kütüphane şimdiye kadar jonny-beş. Arduino platformu ve birçok eklenti ile yaptıkları bazı önemli şeyler için Bocoup’un bloguna göz atın. Ayrıca, Nicolai Onken ve Jörn Zaefferer'in JSConf videosu size küçük bir kodla bugün nelerin mümkün olduğuna dair bir fikir verebilir.
03. Elleriniz tarayıcı için yapıldı
Azınlık Raporu'nun gelecek vizyonu (bilgisayarları çirkin arabalarla değil, elleriyle kontrol ettikleri) her geçen gün daha da yaklaşıyor. Bu yöndeki büyük bir adım, Microsoft’un denetleyicisinden daha az oynama girişimi olan Kinect idi. Harika bir oyun olduğunu düşünebilirsiniz, ancak bunun JavaScript ile ne ilgisi var ?!
Microsoft’un Kinect SDK sürümü ile, bir grup insan Kinect için tarayıcı içi kullanım köprüsünü aştı. Öncelikle, tarayıcınızda Microsoft’un Kinect’ini kullanmanızı sağlayan eksiksiz bir çalışan kinect.js kitaplığı oluşturmuş olan ChildNodes adamları.
Demolarına ve videolarına göz atmanızı şiddetle tavsiye ederim, bu harika. Bununla birlikte kinect.js kitaplığının önemli bir dezavantajı, istemcinin arkasında çalışan bir WebSocket sunucu programı olması gerektiğidir (bu aslında Kinect -> C # -> JS yapıştırıcısıdır).
MIT'de ünlü birkaç öğrenci, DepthJS adı verilen bu duvarı yıkmak için bir çözüm üzerinde çalışıyor.
Herhangi bir biçimde Kinect tabanlı kullanım için optimize edilmemiş siteler için bile Kinect'in Chrome ve Safari için kullanılmasını sağlayan bir tarayıcı eklentisi. DepthJS şu anda erken bir geliştirme aşamasındadır, ancak kesinlikle izlenmeye değer.
04. Oyun kumandanızla kontrol edilen 3B oyunlar
Bugünlerde Flash olmayan bir tarayıcı oyununu oynamayı hiç denediniz mi? Grafik yetenekleri, özellikle Quake gibi oyun klonlarını gördüğünüzde harika.
Ancak bunları çalarken her zaman klavyenize ve (çoğunlukla) tıknaz fareye bağlı olursunuz. Bu, özellikle aksiyon oyunları için büyük bir dezavantajdır, onları gerçekten tarayıcıdan uzak tutar.
Xbox kumandanızı bilgisayarınıza takıp en sevdiğiniz tarayıcı oyununu oynamaya başlayabilseniz harika olmaz mıydı? Bu artık bir gelecek vizyonu değil, Gamepad API'ye merhaba deyin!
Masanızın etrafında bir oyun kumandası kullanıyorsanız, hemen takın ve Gamepad API kullanan bazı oyunların keyfini çıkarın. Giriş kontrollerini programlamak da çocuk oyuncağı, bu kod pasajına göz atın veya daha da iyisi, kendiniz çalıştırın:
div id = "gamepads"> / div>
komut dosyası>
function gamepadConnected (event) {
var gamepads = document.getElementById ("gamepads"),
gamepadId = event.gamepad.id;
gamepads.innerHTML + = "Oyun Kumandası Bağlı (id =" + gamepadId + ")";
}
window.addEventListener ("MozGamepadConnected", gamepadConnected, false);
/ script>
Tarayıcıların 3B yetenekleri hakkında daha fazla bilgi edinmek isterseniz, Three.js ve Jens Arps’ın üzerine inşa edilmiş açık kaynaklı 3B simülatör motoru Ascent'e bakın. Mark Hammil dikkat et, sana başka bir Wing Commander devamı için ihtiyacımız olabilir!
05. iPad'inizde Flash Çalıştırma
Açık standartları seven ve Apple hayranı olarak, Apple'a Flash'ı iPad ve iPod'a koymadığı için gerçekten teşekkür etmek istediğimi itiraf etmeliyim, bu gerçekten HTML5, CSS3 ve JavaScript gibi açık teknolojileri benimseme hareketini başlattı.
Bir ajans çalışanı olarak bunun müşterilerimiz için gerçekten kötü bir durum olduğunu söylemeliyim.
Çoğu, etkileşimli içeriğin Flash aracılığıyla eski IE7 veya IE8'de ve modern tarayıcılarda ve HTML5 üzerinden iDevices üzerinde yayınlanmasını sağlamak için başlattıkları basit bir reklam veya kampanya için iki kez ödeme yapmak zorunda.
Eski tarayıcıların özelliklerinin çoklu doldurulmasının, çoğunlukla performans olarak adlandırılan kendi sınırları vardır. O halde Flash'ı bu Flashless iDevices üzerinde çalıştırma yeteneği yok mu?
Elbette bir tane var ve elbette JavaScript'te yerleşik.
Bir parça tarih: 2010'da Tobias Schneider, Gordon adında küçük bir kitaplık çıkardı
SWF dosyalarının doğrudan tarayıcıda çalışmasına izin veren. Bu, yalnızca Flash sürüm 2'ye kadar işlevler kullanan reklamlar gibi küçük Flash dosyaları için oldukça iyi sonuç verdi, ancak daha yüksek düzey işlevler hiç dahil edilmedi.
Tobias, ueberJS şirketi UXEBU'ya katıldığında, yeni bir fikir buldular.
Ve böylece Bikeshed doğdu. Bikeshed'in kendisi bir tür JavaScript animasyon çerçevesidir, ancak aynı zamanda derleyici olmasını istediğiniz her şey için bir JavaScript'ten Flash'a (adaptör tabanlıdır, böylece istediğiniz her şey için bağdaştırıcılar yazabilirsiniz, ancak standart davranış Flash'ı JavaScript'e derlemektir) . Flash 10 ve ActionScript 3 ile uyumludur. Derleyicinin yanı sıra birçok özelliği hakkında daha fazla bilgi edinmek için web sayfasına bir göz atın.
06. Akıllı telefonunuz için uygulamalar yazma
Cep telefonu ortamları için yerel uygulamalar yazmak zorlu bir yoldur. Hangi platformu desteklemek istediğinize karar vermekle başlar. Uygulamanız bir iPhone ve iPad, Android destekli bir mobil cihaz, Windows Mobile, Blackberry cihazları, webOS tabanlı pla ... vb. Üzerinde çalışıyorsa.
Bu platformların her birinin kendi API'leri vardır ve çoğunlukla farklı programlama dilleri kullanır.
Tarayıcı savaşlarından sağ kurtulduysanız, size bunun içine girmenin çok daha zor bir mücadele olduğunu söyleyeyim. Bir geliştiricinin tüm bu platformlar için zamanında ve bütçede bir uygulama oluşturması neredeyse imkansızdır.
Peki ne yapmalı? Daha fazla geliştirici mi işe alacaksınız? Uygulamalar için daha fazla ücret alınsın mı? Veya kod tabanınızın her cihazda çalıştığından emin olmak için daha iyi bir yaklaşım mı buldunuz? Çoğunuz olarak son yaklaşımı tercih ederim.
Peki bu uygulamalar ne inşa edilmelidir? Tüm bu platformların ortak noktası nedir? Cevabı biliyor olabilirsiniz, bu bir web tarayıcısı ve dolayısıyla bir JavaScript motorudur.
Eski adı PhoneGap ile daha iyi bilinen Apache Cordova'nın arkasındaki fikir budur.
Cordova, her mobil ortamın API'lerini özetleyen ve hepsini kontrol etmek için düzgün bir JavaScript API'si ortaya çıkaran bir JavaScript çerçevesidir. Bu, daha sonra farklı mobil cihazlarda oluşturup dağıttığınız tek bir kod tabanını korumanıza olanak tanır.
Bir kez oluşturduğunuz ve her yerde çalışacak mükemmel mobil uygulamalar oluşturmak için Cordova'yı nasıl kullanacağınızı öğrenmek için buradaki kaynaklara göz atın.
07. Ruby ve Python'u tarayıcınızda çalıştırmak
Meşhur Firefox tarayıcısının arkasındaki şirket olan Mozilla'da pek çok uzman çalıştığı kesin. Bunlardan biri, Emscripten adlı garip bir araç geliştiren Mozilla Araştırma Ekibinde mühendis Alon Zakai.
Emscripten, C / C ++ tabanlı kitaplıklardan oluşturulabilen LLVM bit kodunu JavaScript'e almanıza izin verir. Bunu, kitaplıkları bit koduna derleyerek ve ardından bu bit kodunu alıp JavaScript'e dönüştürerek yapar. Güzel, ama bununla gerçekte ne yapabilirim, kendinize sorabilirsiniz?
Size karşı bir sorum var: "CoffeeScript ve Prototype kullanmak Ruby'yi tarayıcıda çalıştırmaya en yakın yöntemdir" ifadesini hiç duydunuz mu? Hayır? Merak etmeyin, çünkü bu artık doğru değil.
Emscripten ile Ruby kaynaklarını kolayca alabilir, onları JavaScript'e dönüştürebilir ve işte gerçek Ruby'yi tarayıcınızda çalıştırabilirsiniz! Ancak bu yalnızca Ruby için geçerli değildir, örneğin Python da emscript edilmiştir.
Veya tarayıcıdaki h.264 kod çözücü Broadway'e bakın. Bu aslında emscriptened bir C ++ kitaplığıdır!
Tarayıcınızda çalışan birkaç programlama dilini (Ruby ve Python dahil) görmek için repl.it'e gidin!
08. İşletim sisteminden bağımsız masaüstü programları yazmak
Daha önce Apache Cordova yardımıyla birden fazla mobil platformu hedeflemekten bahsetmiştik. Şaşırtıcı olmayan bir şekilde, JavaScript yalnızca mobil platformları hedeflemek için kullanılamaz, eski dostumuz masaüstü bilgisayarla da mücadele edilebilir.
İlk çözümler Titanium Desktop Suite ile Appcelerator'ın adamlarından ve yaygın olarak kullanılan Air platformu Adobe'den geldi.
Ancak hepimizin olduğu açık kaynak severler olarak, aradığımız şey daha açık ve Node.js tabanlı bir teknoloji. App.js ile tanışın! app.js dosya sistemi erişimi, pencere kontrolleri ve daha fazlasıyla gerçek masaüstü programları yazmamızı sağlayan açık bir web teknolojisi ve Node.js tabanlı masaüstü program oluşturucusudur. Node'un kararlı çapraz platform API'lerine güvenebilir ve yazılım kullanıcı arayüzümüzü HTML ve CSS ile oluşturabiliriz. Tıpkı bu listedeki en yeni şeyler gibi.
app.js oldukça genç bir proje ve bu nedenle şimdiye kadar yalnızca Windows ve Linux'u destekliyor, ancak posta listesine göre Mac desteği yolda.
09. Web sunucusu çalıştırma
Günümüzde, web sitenizin JavaScript tabanlı bir web sunucusu tarafından sunulduğunu söylediğinizde kimseyi şaşırtmıyorsunuz. İki veya üç yıl önce düşünürseniz ve web geliştiricilerine tam olarak aynı şeyi söylerseniz, muhtemelen size gülerlerdi, hatta daha da kötüsü.
Ancak Node.js'nin inanılmaz başarısıyla bu, şans eseri şu andan çok uzak. Asenkron doğası nedeniyle artık insanları şaşırtmamakla kalmıyor, Node.js, özellikle birçok paralel bağlantı sorunuyla yüzleşmek söz konusu olduğunda performansta bir harikadır. Sadece performansı bir patlama değil, aynı zamanda gerçekten basit olan API birçok geliştiricinin ilgisini çekiyor. Düğüm dünyasından "Merhaba Dünya" örneğine bakalım, bu sadece ekran örneğindeki bir baskı "Merhaba Dünya" değil, bir http web sunucusu!
var http = required (’http’);
http.createServer (function (req, res) {
res.writeHead (200, {’Content-Type’: ’text / plain’});
res.end ('Merhaba Dünya n ’);
}). listen (1337, ’127.0.0.1’);
Bu basitlik sizi şaşırtmadıysa, ben de size yardımcı olamam.
Düğüm popülaritesinin (veya hype'ın) en iyi kısımlarından biri, Microsoft gibi büyük şirketlerin onu gerçekten desteklemesidir, yani Azure Bulut Hizmetlerinde!
10. Web taraması ve ekran görüntüsü alma
Son olarak, en önemlisi, QUnit testlerimi komut satırında başsız çalıştırmama izin verdiği için kişisel olarak sevdiğim bir projeye bir göz atalım. PhantomJS, düzgün bir JavaScript (veya CoffeScript) tabanlı API'ye sahip, başsız WebKit tabanlı bir tarayıcıdır.
Ancak JavaScript'inizi ve DOM'nuzu test etmek, Phantom için tek kullanım durumu değildir. Beni gerçekten büyüleyen şey, web sitelerini kazıma ve ekran görüntülerini almanıza izin vermesidir!
Evet, doğru okuyorsunuz, Phantom ile web sayfalarını farklı grafik formatlarda yazdırabilirsiniz ve elbette bu, bir bebekten şeker çalmak kadar kolaydır.
Bunu tam olarak yapan bir komut dosyasına bakalım:
var page = new WebPage ();
page.open (’http://google.com’, function (durum) {
page.render (’google.png’);
phantom.exit ();
});
Bir ekran görüntüsü almak için ihtiyacınız olan tek şey bu ve JavaScript tabanlı olduğundan, jQuery'yi kullanabilir ve ekran görüntüsünü almadan önce sayfa içeriğini değiştirebilirsiniz!
Bekle! Fazlası var...
Bu yüzden, umarım bu araçların her birini keşfettiğimde benim kadar şaşırmışsınızdır. Bu makale, bugünlerde JavaScript ile nelerin mümkün olduğunu ortaya çıkardı. Tamamen JS Cloud9 ile yazılmış IDE'ler veya onunla yapılan yüksek güvenlikli şeyler gibi çok daha fazlası var (Kredi Kartınız JavaScript ile yapıldı).
Umarım ilham alırsınız, biraz zaman ayırır ve burada bahsedilen bazı projelerle oynarsınız, hatta daha iyisi bu araçlardan bazılarını alıp bunların etrafında yeni şeyler inşa edersiniz. Buradaki bilgilerin çoğu açık kaynaktır ve orada, yalnızca araçları kullanarak, hataları keşfederek ve bildirerek bile çalışmalarını geliştirmelerine yardımcı olmanızı isteyen geliştiriciler vardır.
