Kandungan
- 01. Sudah tiba masanya untuk melepak
- 02. $ ('cahaya'). FadeIn ();
- 03. Tangan anda dibuat untuk penyemak imbas
- 04. Permainan 3D yang dikawal dengan gamepad anda
- 05. Menjalankan Flash pada iPad anda
- 06. Menulis aplikasi untuk telefon pintar anda
- 07. Menjalankan Ruby dan Python di penyemak imbas anda
- 08. Menulis program desktop bebas OS
- 09. Menjalankan pelayan web
- 10. Skrip laman web dan tangkapan skrin
- Tunggu! Ada lagi...
JavaScript telah berjalan jauh sejak dilahirkan pada tahun 1995. Cara yang pasti, penuh dengan salah faham, penyalahgunaan dan kebodohan. Tetapi masa telah berubah, sejak lima tahun kebelakangan ini JavaScript semakin mendapat perhatian. Dengan lebih banyak perhatian, lebih banyak pembangun sebenarnya menggunakan JavaScript, menggunakannya untuk pelbagai tujuan dan menikmati keindahannya. Kisah "Duckling Ugly" klasik, jika anda bertanya kepada saya.
Dalam artikel berikut, kami akan menemui 10 kes penggunaan untuk JavaScript yang berbeza dari yang biasa "dalam penyemak imbas", yang biasa Anda lakukan.
01. Sudah tiba masanya untuk melepak
Adakah anda ingat visi 80-an komunikasi video seperti Facetime?
Hanya memerlukan 20 tahun sebelum ini menjadi arus perdana kerana terdapat hampir semua kemudahan internet jalur lebar dan penggunaan perisian kecil yang disebut Skype.
Dengan kemampuan Adobe Flash dan percubaan Google untuk membina rangkaian sosial, kami sudah mempunyai kemampuan komunikasi video dalam penyemak imbas kami. Bukankah kerenah memiliki kebolehan tersebut tanpa menggunakan pemalam pihak ketiga seperti Flash?
Nasib baik, vendor penyemak imbas berfikir sama dan menerapkan API "getUserMedia" ke dalam perisian mereka. Ini adalah langkah pertama untuk mengakses peranti seperti kamera atau mikrofon terus dari penyemak imbas anda.
Menggunakan Node.js sebagai pelayan di belakang aplikasi seperti itu, sangat mudah untuk menghantar isyarat video melalui udara kepada satu atau lebih pelanggan. Nasib baik, pada masa penulisan ini, hanya Chrome dan Opera yang menyokong API, tetapi yang lain akan mengejar cepat.
Pendekatan yang lebih bersih untuk komunikasi dua hala adalah satu-satunya Chrome pada masa ini, yang disebut WebRTC. Kerana WebRTC, klien diaktifkan untuk membuka saluran komunikasi peer to peer, menghubungkan pelanggan dengan klien secara langsung.
Untuk keseronokan, lihat pelaksanaan Photo Booth Sindre Sorhus yang dilakukan dalam 121 bait!
var video = document.getElementsByTagName ('video') [0],
navigator.getUserMedia ('video', successCallback, errorCallback);
fungsi berjayaCallback (aliran) {
video.src = aliran;
}
error functionCallback (ralat) {
console.log (ralat);
}
02. $ ('cahaya'). FadeIn ();
Platform mikrokontroler Arduino adalah contoh kelas A untuk kes penggunaan JavaScript "di luar kotak". Bagi anda, yang tidak biasa dengan platform Arduino, berikut adalah petikan yang sangat terkenal dari laman webnya:
"Arduino adalah platform prototaip elektronik sumber terbuka berdasarkan perkakasan dan perisian yang fleksibel dan mudah digunakan. Ini ditujukan untuk seniman, pereka, penggemar, dan sesiapa sahaja yang berminat untuk membuat objek atau persekitaran interaktif."
Arduino itu sendiri hanya menyokong kod yang ditulis dalam C, yang masih bukan masalah besar. Dengan beberapa baris C (selain yang lain telah melakukan ini untuk anda), Arduino dapat menerima perintah melalui port USB melalui protokol port bersiri.
Tetapi bagaimana anda boleh mengakses port bersiri melalui JavaScript? Jelas bukan dari penyemak imbas.
Node.js untuk menyelamatkan!
Kerana usaha penyokong masyarakat Chris Williams, kami mempunyai perpustakaan port bersiri Node, di mana kami dapat mengirim data melalui protokol SP lama. Ini adalah kejayaan awal, berdasarkan perpustakaan orang lain membuat pendekatan yang lebih abstrak untuk kemampuan Arduino. Contohnya perpustakaan node-arduino dan duino.
Perpustakaan terpanas dan paling keren di sekitar blok untuk pengaturcaraan Arduino yang didorong oleh JS sekarang adalah jonny-Five. Lihat blog Bocoup untuk mengetahui apa yang mereka lakukan dengan platform Arduino dan banyak pemalam. Juga video JSConf dari Nicolai Onken dan Jörn Zaefferer mungkin memberi anda sedikit yang mungkin hari ini dengan sedikit kod.
03. Tangan anda dibuat untuk penyemak imbas
Visi masa depan Laporan Minoriti (yang di mana mereka mengendalikan komputer dengan tangan mereka, bukan kereta yang jelek) semakin hampir setiap hari. Langkah besar ke arah ini adalah pengawal Microsoft kurang berusaha, Kinect. Permainan luar biasa yang mungkin anda fikirkan, tetapi apa kaitannya dengan JavaScript ?!
Dengan keluaran SDK Kinect Microsoft, sekumpulan orang melintasi jambatan penggunaan penyemak imbas untuk Kinect. Pertama-tama lelaki ChildNodes yang telah membina perpustakaan kinect.js yang berfungsi sepenuhnya, yang membolehkan penggunaan Kinect Microsoft dalam penyemak imbas anda.
Saya sangat mengesyorkan untuk melihat demo dan videonya, ini sungguh hebat. Satu kelemahan utama perpustakaan kinect.js adalah, bahawa mesti ada program pelayan WebSocket yang berjalan di bahagian belakang klien (itu sebenarnya adalah gam Kinect -> C # -> JS).
Beberapa pelajar kemasyhuran MIT sedang berusaha mencari jalan untuk meruntuhkan tembok ini, yang disebut DepthJS,
plugin dalam penyemak imbas yang membolehkan penggunaan Kinect untuk Chrome dan Safari, walaupun untuk laman web yang tidak dioptimumkan untuk penggunaan berasaskan Kinect dalam bentuk apa pun. DepthJS kini berada di tahap pengembangan awal, tetapi semestinya patut diperhatikan.
04. Permainan 3D yang dikawal dengan gamepad anda
Adakah anda pernah mencuba bermain permainan penyemak imbas bukan Flash pada masa ini? Keupayaan grafik sangat mengagumkan, terutamanya apabila anda melihat klon permainan seperti Quake.
Tetapi semasa memainkan perkara ini, anda selalu terikat pada papan kekunci anda dan tetikus (kebanyakannya) yang kikuk. Ini adalah kelemahan besar, terutamanya untuk permainan aksi, ia benar-benar menahannya dari penyemak imbas.
Bukankah lebih keren jika anda hanya boleh memasang pengawal Xbox ke PC anda dan mula bermain permainan penyemak imbas kegemaran anda? Ini bukan lagi visi masa depan, bertanya khabar API Gamepad!
Sekiranya anda menggunakan gamepad di meja anda, pasangkan sekarang dan nikmati beberapa permainan, yang sudah menggunakan Gamepad API. Pengaturcaraan kawalan input juga adalah sepotong kek, lihat coretan kod ini atau lebih baik lagi, jalankan sendiri:
div id = "gamepads"> / div>
skrip>
fungsi gamepadConnected (acara) {
var gamepads = document.getElementById ("gamepads"),
gamepadId = event.gamepad.id;
gamepads.innerHTML + = "Gamepad Connected (id =" + gamepadId + ")";
}
window.addEventListener ("MozGamepadConnected", gamepadConnected, false);
/ skrip>
Sekiranya anda ingin mengetahui lebih lanjut mengenai keupayaan 3D penyemak imbas, lihat mesin pendakian 3D sumber terbuka Three.js dan Jens Arps yang dibina di atasnya. Mark Hammil awas, kami mungkin memerlukan anda untuk sekuel Wing Commander yang lain!
05. Menjalankan Flash pada iPad anda
Sebagai peminat standard terbuka dan peminat Apple, saya harus mengakui bahawa saya ingin mengucapkan terima kasih kepada Apple kerana tidak meletakkan Flash pada iPad dan iPod, ini benar-benar memulakan gerakan merangkul teknologi terbuka seperti HTML5, CSS3 dan JavaScript.
Sebagai pekerja agensi, saya harus mengatakan bahawa ini adalah keadaan yang sangat buruk bagi pelanggan kami.
Sebilangan besar dari mereka harus membayar dua kali untuk iklan atau kempen sederhana yang mereka lancarkan agar kandungan interaktif berjalan di IE7 atau IE8 lama melalui Flash dan pada penyemak imbas moden serta iDevices melalui HTML5.
Memfailkan ciri penyemak imbas lama mempunyai sempadannya, kebanyakannya dinamakan prestasi. Oleh itu, tidakkah ada kemampuan untuk menjalankan Flash pada iDevices tanpa Flash tersebut?
Sudah tentu ada, dan tentu saja ia dibina dalam JavaScript.
Sekeping sejarah: Pada tahun 2010 Tobias Schneider melancarkan sebuah perpustakaan kecil bernama Gordon
yang membolehkan fail SWF berjalan terus di penyemak imbas. Ini berfungsi dengan baik untuk fail Flash kecil seperti iklan yang hanya menggunakan fungsi hingga Flash versi 2, tetapi fungsi tahap yang lebih tinggi sama sekali tidak disertakan.
Ketika Tobias bergabung dengan syarikat ueberJS UXEBU, mereka mengemukakan idea baru.
Oleh itu, Bikeshed dilahirkan. Bikeshed sendiri adalah sejenis kerangka animasi JavaScript, tetapi juga merupakan JavaScript ke Flash ke semua yang anda mahukan menjadi penyusun (berdasarkan penyesuai, jadi anda boleh menulis penyesuai untuk apa sahaja yang anda mahukan, walaupun tingkah laku standard adalah menyusun Flash ke JavaScript) . Ia serasi dengan Flash 10 dan ActionScript 3. Lihat halaman webnya untuk mengetahui lebih banyak mengenai banyak ciri selain penyusunnya.
06. Menulis aplikasi untuk telefon pintar anda
Menulis aplikasi asli untuk persekitaran telefon bimbit adalah jalan berbatu. Ia bermula dengan keputusan platform mana yang ingin anda sokong. Sekiranya aplikasi anda berjalan pada iPhone dan iPad, peranti mudah alih bertenaga Android, Windows Mobile, peranti Blackberry, plak berasaskan webOS ... dan sebagainya.
Setiap platform ini mempunyai API sendiri dan kebanyakan menggunakan bahasa pengaturcaraan yang berbeza.
Sekiranya anda terselamat dari perang penyemak imbas, izinkan saya memberitahu anda bahawa ini adalah cara yang lebih sukar untuk dilancarkan. Hampir mustahil bagi pembangun untuk membuat aplikasi untuk semua platform ini mengikut masa dan anggaran.
Jadi apa yang perlu dibuat? Ambil lebih banyak pembangun? Bayaran lebih banyak untuk aplikasi? Atau cari pendekatan yang lebih baik untuk memastikan pangkalan kod anda berjalan di setiap peranti? Sebagai sebahagian besar daripada anda, saya lebih suka pendekatan terakhir.
Tetapi dalam apa aplikasi ini harus dibina? Apa kesamaan semua platform ini? Anda mungkin tahu jawapannya, ini adalah penyemak imbas web dan oleh itu mesin JavaScript.
Itulah idea di sebalik Apache Cordova, yang lebih dikenali dengan nama sebelumnya PhoneGap.
Cordova adalah kerangka JavaScript yang mengabstrak API dari setiap persekitaran mudah alih dan memperlihatkan API JavaScript yang rapi untuk mengendalikan semuanya. Ini membolehkan anda mengekalkan satu asas kod, yang kemudian anda bina dan gunakan pada peranti mudah alih yang berbeza.
Lihat sumber di sini untuk mengetahui cara menggunakan Cordova untuk membina aplikasi mudah alih yang anda bina sekali dan akan berjalan di mana sahaja.
07. Menjalankan Ruby dan Python di penyemak imbas anda
Mozilla, syarikat di sebalik penyemak imbas Firefox yang terkenal, menggunakan banyak geeks, itu pasti. Salah satunya ialah Alon Zakai seorang jurutera di Pasukan Penyelidikan Mozilla, yang membina alat aneh bernama Emscripten.
Emscripten membolehkan anda mengambil kod bit LLVM - yang dapat dihasilkan dari perpustakaan berasaskan C / C ++, ke JavaScript. Ia melakukan ini dengan menyusun perpustakaan menjadi bit code dan kemudian, mengambil bit code tersebut dan mengubahnya menjadi JavaScript. Rapi, tetapi apa yang sebenarnya dapat saya lakukan dengan ini, anda mungkin bertanya pada diri sendiri?
Saya mempunyai soalan balas untuk anda: pernahkah anda mendengar ungkapan "Menggunakan CoffeeScript dan Prototype adalah yang paling dekat dengan menjalankan Ruby di penyemak imbas"? Tidak? Jangan risau, kerana ini tidak benar lagi.
Dengan Emscripten anda hanya dapat menggunakan sumber Ruby, mengubahnya menjadi JavaScript dan voilà, menjalankan Ruby yang sebenar di penyemak imbas anda! Tetapi ini tidak berlaku untuk Ruby saja, Python misalnya juga dituliskan.
Atau lihat penyemak imbas penyemak imbas h.264 Broadway. Itu sebenarnya perpustakaan C ++ yang tersurat!
Pergi ke repl.it untuk melihat beberapa bahasa pengaturcaraan (termasuk Ruby dan Python) berjalan di penyemak imbas anda!
08. Menulis program desktop bebas OS
Kami bercakap mengenai menyasarkan beberapa platform mudah alih dengan bantuan Apache Cordova sebelumnya. Tidak mengejutkan, JavaScript tidak hanya dapat digunakan untuk menargetkan platform mudah alih, teman lama kami komputer desktop juga dapat ditangani.
Penyelesaian pertama datang dari orang Appcelerator dengan Titanium Desktop Suite dan dari platform Air yang digunakan oleh Adobe.
Tetapi sebagai pencinta sumber terbuka yang kita semua, teknologi yang lebih terbuka dan berasaskan Node.js adalah apa yang kita cari. Jumpa app.js! app.js adalah pembangun program desktop berasaskan webtechnology dan Node.js terbuka, yang membolehkan kami menulis program desktop sebenar dengan akses sistem fail, kawalan tetingkap dan banyak lagi. Kita boleh bergantung pada API platform silang Node yang stabil dan membina UI perisian dengan HTML dan CSS. Sama seperti barang baru yang paling panas dalam senarai ini di sini.
app.js adalah projek yang cukup muda dan oleh itu sekarang hanya menyokong Windows dan Linux, tetapi menurut senarai surat, sokongan Mac sedang berjalan.
09. Menjalankan pelayan web
Pada masa ini, anda tidak mengejutkan sesiapa apabila anda memberitahu bahawa laman web anda dilayan oleh pelayan web berasaskan JavaScript. Sekiranya anda berfikir dua atau tiga tahun yang lalu, dan memberitahu pembangun web yang sama, mereka mungkin akan menertawakan anda atau lebih buruk lagi.
Tetapi dengan kejayaan Node.js yang luar biasa, ini jauh dari sekarang. Bukan sahaja tidak mengejutkan orang lain, kerana sifatnya yang tidak segerak, Node.js adalah prestasi buruk, terutamanya ketika menghadapi masalah banyak hubungan selari. Bukan hanya prestasinya yang hebat, API yang benar-benar sederhana menarik banyak pembangun juga. Mari lihat contoh "Hello World" dari dunia Node, bukan hanya cetakan "Hello World" pada contoh layar, tetapi juga pelayan web http!
var http = memerlukan ('http');
http.createServer (fungsi (req, res) {
res.writeHead (200, {'Content-Type': 'text / plain'});
res.end ('Hello World n');
}). dengar (1337, '127.0.0.1');
Sekiranya anda tidak terpesona dengan kesederhanaan ini, saya juga tidak dapat menolong anda.
Salah satu bahagian terbaik dari populariti Node (atau gembar-gembur) adalah, syarikat besar seperti Microsoft sebenarnya menyokongnya, iaitu dalam Perkhidmatan Cloud Azure mereka!
10. Skrip laman web dan tangkapan skrin
Oleh itu, mari kita lihat projek yang saya suka secara peribadi kerana membiarkan saya menjalankan ujian QUnit tanpa kepala pada baris arahan. PhantomJS adalah penyemak imbas berasaskan WebKit tanpa kepala dengan API berasaskan JavaScript (atau CoffeScript) yang kemas.
Tetapi menguji JavaScript dan DOM anda bukan satu-satunya kes penggunaan untuk Phantom. Apa yang benar-benar menarik perhatian saya adalah kemampuannya untuk mengikis laman web dan membiarkan anda mengambil tangkapan skrin!
Ya, anda membaca dengan betul, dengan Phantom anda dapat mengeluarkan halaman web dalam format grafik yang berbeza dan, tentu saja, semudah mencuri gula-gula dari bayi.
Mari kita lihat skrip yang betul-betul melakukan ini:
laman var = Halaman Web baru ();
page.open ('http://google.com', fungsi (status) {
page.render ('google.png');
phantom.exit ();
});
Itu sahaja yang anda perlukan untuk membuat tangkapan skrin dan kerana berdasarkan JavaScript, anda juga boleh menggunakan jQuery dan memanipulasi kandungan halaman sebelum menyaringnya!
Tunggu! Ada lagi...
Jadi, saya harap anda kagum seperti saya, ketika saya menemui setiap alat ini. Artikel ini baru saja menggaris permukaan apa yang mungkin dilakukan dengan JavaScript pada masa kini. Terdapat banyak lagi seperti IDE yang ditulis sepenuhnya di JS Cloud9 atau perkara keselamatan tinggi yang dilakukan dengannya (Kad Kredit anda dibuat dengan JavaScript).
Saya harap anda merasa terinspirasi, luangkan masa dan bermain-main dengan beberapa projek yang dinyatakan di sini, atau lebih baik menggunakan beberapa alat ini dan membina barang baru di sekitarnya. Sebilangan besar ini di sini adalah sumber terbuka dan ada pembangun di luar sana, mencari anda untuk membantu mereka meningkatkan pekerjaan mereka, walaupun hanya dengan menggunakan alat, menemui pepijat dan melaporkannya.
