Мазмұны
- 01. Кездесу уақыты келді
- 02. $ (’жеңіл’). FadeIn ();
- 03. Сіздің қолыңыз браузерге арналған
- 04. Сіздің геймпадпен басқарылатын 3D ойындар
- 05. iPad-та Flash іске қосу
- 06. Смартфонға арналған бағдарламалар жазу
- 07. Ruby және Python браузерінде іске қосу
- 08. ОЖ-дан тәуелсіз жұмыс үстелдерін жазу
- 09. Веб-серверді іске қосу
- 10. Веб-суреттер мен скриншоттар
- Күте тұрыңыз! Тағы ...
JavaScript 1995 жылы туылғаннан бері ұзақ жолдан өтті. Түсінбеушілікке, дұрыс пайдаланбауға және надандыққа толы сенімді жол. Бірақ уақыт өзгерді, өйткені соңғы бес жылда JavaScript көп көңіл бөле бастады. Көбірек назар аудара отырып, көптеген әзірлеушілер JavaScript-ті қолданады, оны әртүрлі мақсаттарда пайдаланады және оның сұлулығымен рахат алады. Классикалық «Ұсқынсыз үйрек» әңгімесі, егер сұрасаңыз.
Келесі мақалада біз JavaScript үшін әдеттегі «шолғыштағы» жағдайдан өзгеше 10 жағдайды табамыз.
01. Кездесу уақыты келді
Facetime сияқты бейне байланысының 80-жылдардағы көрінісі есіңізде ме?
Барлығы қол жетімді кең жолақты интернеттің және Skype деп аталатын бағдарламалық жасақтаманың көптігінің арқасында 20 жыл өтті.
Adobe's Flash және Google-дің әлеуметтік желіні құруға тырысу мүмкіндіктерімен біз браузерімізде бейнебайланыс мүмкіндіктеріне ие болдық. Flash сияқты үшінші тарап қосылатын модулін пайдаланбай осындай қабілеттерге ие болу жақсы емес пе?
Бақытымызға орай, браузерді жеткізушілер де солай ойлады және «getUserMedia» API-ді өздерінің бағдарламалық жасақтамасына енгізді. Бұл сіздің браузеріңізден камералар немесе микрофондар сияқты құрылғыларға тікелей қол жеткізу үшін алғашқы қадам болды.
Node.js-ті осындай қосымшаның артқы жағындағы сервер ретінде пайдалану арқылы бейне сигналды бір немесе бірнеше клиентке ауамен тасымалдау оңай. Бақытсыздық, бұл жазылған кезде Chrome және Opera ғана API-ді қолдайды, бірақ басқалары тез жетеді.
Екі жақты байланыс үшін таза тәсіл - бұл қазіргі уақытта WebRTC деп аталатын Chrome ғана. WebRTC болғандықтан, клиенттерге тең дәрежелі байланыс арналарын ашуға, клиентті клиентпен тікелей байланыстыруға мүмкіндік беріледі.
Көңіл көтеру үшін 121 байтта орындалған Синдре Сорхустың Photo Booth бағдарламасын тексеріп көріңіз!
var video = document.getElementsByTagName (’video’) [0],
navigator.getUserMedia (’видео’, successCallback, errorCallback);
функцияның сәтті орындалуы
video.src = ағын;
}
Функция қатесіCallback (қате) {
console.log (қате);
}
02. $ (’жеңіл’). FadeIn ();
Arduino микроконтроллерінің платформасы - бұл JavaScript-ті қолдану үшін «қораптан тыс» жағдайға арналған мысал. Arduino платформасын білмейтіндер үшін, оның сайтындағы супер әйгілі дәйексөз:
«Arduino - бұл икемді, қолдануға ыңғайлы аппараттық және бағдарламалық жасақтамаға негізделген ашық көзі бар электрониканың прототиптік платформасы. Бұл суретшілерге, дизайнерлерге, әуесқойларға және интерактивті объектілерді немесе қоршаған ортаны құруға қызығушылық танытқандарға арналған.»
Arduino өзі C тілінде жазылған кодты ғана қолдайды, бұл әлі де болса маңызды емес. Бірнеше C жолдарымен (басқалар бұл жұмысты сіз үшін жасады), Arduino сериялы порт протоколы арқылы USB порт арқылы командаларды ала алады.
JavaScript арқылы сериялық портқа қалай кіруге болады? Браузерден емес екені анық.
Node.js құтқаруға!
Қоғамдық адвокат Крис Уильямстың күш-жігерінің арқасында бізде ескі SP хаттамасы бойынша деректерді жіберуге болатын Node сериялық порт кітапханасы бар. Бұл алғашқы жетістік, кітапханаға негізделген, басқа адамдар Ардуиноның мүмкіндіктері үшін абстрактілі тәсіл ойлап тапты. Мысалы, түйін-arduino және duino кітапханалары.
Arduino бағдарламалық қамтамасыздандыруға арналған JS блогының айналасындағы ең ыстық және керемет кітапхана - бұл jonny-five. Bocoup блогын Arduino платформасымен және көптеген қосылатын модульдермен жасаған қызықтарын біліп алыңыз. Сондай-ақ, Николай Онкен мен Йорн Зафферерден алынған АҚ бейнефильмі сізге аз кодпен мүмкін болатын нәрсені анықтауға мүмкіндік береді.
03. Сіздің қолыңыз браузерге арналған
Minority Report-тің болашақтағы көрінісі (олар ұнамсыз машиналармен емес, компьютерлерді қолдарымен басқаратын) күн сайын жақындайды. Бұл бағыттағы үлкен қадам Microsoft-тың контроллері Kinect-ті аз ойнады. Сіз ойлаған ғажайып геймплей, бірақ мұның JavaScript-ке қандай қатысы бар ?!
Microsoft-тың Kinect SDK шығарылымымен көптеген адамдар Kinect үшін браузерді пайдалану көпірінен өтті. Microsoft Kinect-ті сіздің браузеріңізде пайдалануға мүмкіндік беретін толық жұмыс жасайтын kinect.js кітапханасын құрған ChildNodes жігіттері.
Мен олардың демонстрациясы мен бейнелерін тексеруге кеңес беремін, бұл жарылыс. Kinect.js кітапханасының бір үлкен кемшілігі - бұл клиенттің артқы жағында WebSocket серверлік бағдарламасы болуы керек (бұл Kinect -> C # -> JS желімі).
MIT-тің бірнеше студенттері осы қабырғаны бұзу үшін, DepthJS деп аталатын шешіммен айналысуда,
Chrome және Safari үшін Kinect-ті, тіпті кез-келген нысанда Kinect негізінде қолдануға оңтайландырылмаған сайттарды пайдалануға мүмкіндік беретін шолғыш плагині. DepthJS қазіргі уақытта даму сатысында, бірақ оны қадағалап отыру керек.
04. Сіздің геймпадпен басқарылатын 3D ойындар
Сіз қазіргі уақытта Flash емес браузер ойынын ойнауға тырысып көрдіңіз бе? Графикалық мүмкіндіктері керемет, әсіресе Quake сияқты ойын клондарын көргенде.
Бірақ сіз бұл затты ойнаған кезде сіз әрдайым пернетақтаға және (негізінен) епті тышқанға байланасыз. Бұл үлкен кемшілік, әсіресе экшн ойындары үшін, оларды шынымен де шолғыштан аулақ ұстайды.
Егер сіз өзіңіздің компьютеріңізге Xbox контроллерін қосып, сүйікті браузер ойынын ойнай бастасаңыз, керемет болмай ма? Бұл енді болашақ көрінісі емес, Gamepad API-ге сәлем!
Егер сізде жұмыс үстелінің айналасында геймпад болса, оны дәл қазір қосып, Gamepad API-ді қолданып жүрген ойындардан ләззат алыңыз. Кіріс басқару элементтерін бағдарламалау - бұл торттың бір бөлігі, осы код үзіндісін тексеріп алыңыз немесе одан да жақсысын өзіңіз іске қосыңыз:
div id = «gamepads»> / div>
сценарий>
ойын геймпадіБайланысты (оқиға) {
var gamepads = document.getElementById («геймпадтар»),
gamepadId = event.gamepad.id;
gamepads.innerHTML + = «Геймпад қосылған (id =» + gamepadId + «)»;
}
window.addEventListener («MozGamepadConnected», gamepadConnected, жалған);
/ сценарий>
Егер сіз браузерлердің 3D мүмкіндіктері туралы көбірек білгіңіз келсе, Three.js және Jens Arps-тің жоғарыда келтірілген Ascent ашық симуляторлы 3D симулятор қозғалтқышын қарап шығыңыз. Марк Хаммил абай болыңыз, сізге басқа қанат командирінің жалғасы керек болуы мүмкін!
05. iPad-та Flash іске қосу
Мен ашық стандарттардың әуесқойы және Apple фанаты ретінде Apple-ге iPad пен iPod-қа Flash қоймағаны үшін алғыс білдіргім келетінін мойындауым керек, бұл HTML5, CSS3 және JavaScript сияқты ашық технологияларды қолдану қозғалысын бастады.
Агенттік қызметкері ретінде айтарым, бұл біздің клиенттеріміз үшін өте жағымсыз жағдай.
Ескі IE7 немесе IE8-де Flash және заманауи браузерлерде, сондай-ақ HTML5 арқылы iDevices-те жұмыс істейтін интерактивті мазмұнға ие болу үшін олардың көпшілігі қарапайым жарнама немесе науқан үшін екі рет төлеуі керек.
Ескі браузерлердің мүмкіндіктерін полифилляциялаудың шекаралары бар, көбіне аталған өнімділік. Сонымен, Flashless iDevices-те Flash іске қосу мүмкіндігі жоқ па?
Әрине, біреуі бар, әрине ол JavaScript-те жасалған.
Тарих парағы: 2010 жылы Тобиас Шнайдер Гордон атты кішкентай кітапханасын шығарды
бұл SWF файлдарын браузерде тікелей іске қосуға мүмкіндік берді. Бұл Flash-тің 2-нұсқасына дейінгі функционалдылықтарды пайдаланатын жарнамалар сияқты кішігірім Flash файлдары үшін өте жақсы жұмыс істеді, бірақ жоғары деңгейлік функциялар мүлдем қамтылмаған.
Тобиас Uber компаниясының UXEBU компаниясына қосылған кезде, олар жаңа идеяны ұсынды.
Сонымен, Бикешед дүниеге келді. Bikeshed өзі - бұл JavaScript анимациялық шеңберінің бір түрі, бірақ сонымен бірге компилятор болуын қалайтын барлық нәрсеге арналған JavaScript болып табылады (ол адаптерге негізделген, сондықтан сіз кез-келген нәрсеге адаптер жаза аласыз, бірақ стандартты тәртіп Flash-ті JavaScript-ке жинап жатыр) . Бұл Flash 10 және ActionScript 3 үйлесімді. Компилятордан басқа оның көптеген мүмкіндіктері туралы көбірек білу үшін оның веб-парағын қараңыз.
06. Смартфонға арналған бағдарламалар жазу
Ұялы телефон орталарына арналған жергілікті қосымшалар жазу - бұл тас жол. Бұл қай платформаны қолдағыңыз келетіндігіңізден басталады. Егер сіздің қосымшаңыз iPhone және iPad құрылғысында, Android жүйесінде жұмыс істейтін мобильді құрылғыда, Windows Mobile, Blackberry құрылғыларында, webOS негізделген pla ... және т.б.
Бұл платформалардың әрқайсысының жеке API-лері бар және көбінесе әртүрлі бағдарламалау тілдерін қолданады.
Егер сіз браузердегі соғыстардан аман қалсаңыз, сізге айтарым, бұл қиын күрестің жолы. Әзірлеуші уақытында және бюджетте осы платформалардың барлығына қосымша құра алмайды.
Сонымен не істеу керек? Көбірек әзірлеушілерді жалдау керек пе? Қолданбалар үшін көбірек ақы төлеу керек пе? Немесе сіздің кодтық базаңыздың кез-келген құрылғыда жұмыс істейтіндігіне сенімді тәсіл табыңыз ба? Сіздердің көпшілігіңіз болғандықтан мен соңғы тәсілді қалаймын.
Бірақ бұл қосымшаларды неде салу керек? Осы платформалардың барлығында не ұқсас? Сіз бұл сұрақтың жауабын біле аласыз, бұл веб-шолғыш, сондықтан JavaScript қозғалтқышы.
Бұл бұрынғы PhoneGap есімімен танымал Apache Cordova идеясы.
Cordova - бұл әр ұялы ортаның API интерфейстерін шығаратын және олардың барлығын басқару үшін ұқыпты JavaScript API шығаратын JavaScript негізі. Бұл сізге әр түрлі мобильді құрылғыларда құрастыратын және орналастыратын бірыңғай кодтық базаны ұстауға мүмкіндік береді.
Cordova көмегімен сіз бір рет жасайтын және барлық жерде жұмыс істейтін мобильді қосымшаларды қалай құруға болатынын білу үшін мына ресурстарды қараңыз.
07. Ruby және Python браузерінде іске қосу
Mozilla - әйгілі Firefox браузерінің негізін қалайтын компания көптеген гектерді пайдаланады, бұл сөзсіз. Олардың бірі - Алон Закай - Mozilla зерттеу тобының инженері, ол Emscripten деп аталатын керемет құрал жасады.
Emscripten сізге LLVM бит кодын алуға мүмкіндік береді, оны C / C ++ негізіндегі кітапханалардан JavaScript-ке жасауға болады. Мұны кітапханаларды биттік кодқа жинақтап, содан кейін биттік кодты алып, JavaScript-ке айналдыру арқылы жүзеге асырады. Мұқият, бірақ мен мұны не істей аламын, сіз өзіңізге сұрақ қоюыңыз мүмкін?
Менің сізге қоятын қарсы сұрағым бар: «CoffeeScript пен прототипті пайдалану - сіз Ruby-ді браузерде іске қосуға ең жақын» деген сөзді естідіңіз бе? Жоқ? Алаңдамаңыз, өйткені бұл енді дұрыс емес.
Emscripten көмегімен сіз тек Ruby көздерін ала аласыз, оларды JavaScript және voilà түріне өзгерте аласыз, нағыз Ruby шолғышында жұмыс жасай аласыз! Бірақ бұл тек Ruby-ге қатысты емес, мысалы, Python жазылды.
Немесе Broadway h.264 декодерін шолғыштан қараңыз. Бұл іс жүзінде жазылған C ++ кітапханасы!
Браузерде жұмыс істейтін бірнеше бағдарламалау тілдерін (соның ішінде Ruby және Python) көру үшін replace.it сайтына өтіңіз!
08. ОЖ-дан тәуелсіз жұмыс үстелдерін жазу
Біз бұрын Apache Cordova көмегімен бірнеше мобильді платформаларды бағыттау туралы айтқан болатынбыз. JavaScript-ті тек мобильді платформаларға бағыттауға ғана емес, біздің ескі досымыз - жұмыс үстелі компьютерімен де күресуге болатыны таңқаларлық емес.
Алғашқы шешімдер Appcelerator-дың Titanium Desktop Suite және Adobe кеңінен қолданылатын Air платформасынан шыққан.
Бірақ біз бәріміз ашық көзі бар әуесқойлар болғандықтан, Node.js-ке негізделген технология біз іздейтін нәрсе. App.js-пен танысыңыз! app.js - бұл ашық вебтехнология және Node.js негізіндегі жұмыс үстелі бағдарламасының құрастырушысы, бұл файлдық жүйеге қол жетімділігі, терезе басқару элементтері және тағы басқаларымен жұмыс үстелінің нақты бағдарламаларын жазуға мүмкіндік береді. Біз Node тұрақты кросс-платформалық платформасына сүйене аламыз және бағдарламалық жасақтама интерфейсін HTML және CSS көмегімен құра аламыз. Осы тізімдегі ең ыстық жаңа материалдар сияқты.
app.js - бұл өте жас жоба, сондықтан Windows және Linux-ті қолдайды, бірақ тарату тізіміне сәйкес Mac қолдауға дайын.
09. Веб-серверді іске қосу
Қазіргі уақытта сіз өзіңіздің веб-сайтыңызға JavaScript негізіндегі веб-сервер қызмет етеді деп айтсаңыз, сіз ешкімді таң қалдырмайсыз. Егер сіз екі-үш жыл бұрын еске түсіріп, веб-әзірлеушілерге дәл осылай айтсаңыз, олар сізге күлген болар еді немесе одан да жаманы.
Бірақ Node.js-тің керемет жетістігімен бұл сәттілік қазірден алыс. Node.js асинхронды сипатына байланысты, бұл адамдарды таңдандырып қана қоймайды, әсіресе параллель қосылыстардың проблемасына тап болғанда, вундеркинд болып табылады. Оның өнімділігі тек жарылыс емес, сонымен қатар қарапайым API көптеген әзірлеушілерді тартады. Түйіндер әлемінен «Hello World» мысалын қарастырайық, бұл экрандағы мысалда тек «Hello World» басылымы ғана емес, ол http веб-сервері!
var http = талап ету (’http’);
http.createServer (функция (req, res) {
res.writeHead (200, {'Мазмұн түрі': 'мәтін / қарапайым'});
res.end (’Hello World n’);
}). тыңдау (1337, ’127.0.0.1’);
Егер сізде бұл қарапайымдылық жоқ болса, мен сізге көмектесе алмаймын.
Түйін танымалдылығының (немесе хайптың) ең жақсы бөліктерінің бірі - Майкрософт сияқты ірі компаниялар оны қолдайды, яғни Azure Cloud қызметтерінде!
10. Веб-суреттер мен скриншоттар
Сонымен, соңғы, бірақ маңызды емес, командалық жолда QUnit тесттерін бассыз жүргізуге мүмкіндік бергені үшін өзім жақсы көретін жобаны қарастырайық. PhantomJS - таза JavaScript (немесе CoffeScript) негізделген API бар WebKit негізсіз шолғыш.
Бірақ JavaScript пен DOM-ды тексеру Phantom үшін жалғыз ғана емес. Мені қатты қызықтыратыны - оның веб-сайттарды қыру және оның скриншоттарын алуға мүмкіндік беруі!
Ия, сіз дұрыс оқып жатырсыз, Phantom көмегімен сіз әртүрлі графикалық форматтағы веб-парақтарды шығара аласыз, және, әрине, нәрестеден тәттілерді ұрлау сияқты оңай.
Мұны дәл орындайтын сценарийді қарастырайық:
var page = жаңа WebPage ();
page.open (’http://google.com’, функция (мәртебе) {
page.render (’google.png’);
phantom.exit ();
});
Скриншот жасау үшін сізге қажет нәрсе - бұл JavaScript негізді болғандықтан, сіз jQuery-ді қолданып, оны скриншот жасамас бұрын оның мазмұнын басқара аласыз!
Күте тұрыңыз! Тағы ...
Сонымен, мен осы құралдардың әрқайсысын ашқан кезде мен сияқты таңқаласыз деп үміттенемін. Бұл мақала қазіргі кезде JavaScript көмегімен мүмкін болатын нәрселердің бетіне сызат түсірді. Толығымен JS Cloud9-да жазылған IDE-ге ұқсас немесе онымен жасалған қауіпсіздік шаралары көп (Сіздің несиелік картаңыз JavaScript арқылы жасалған).
Мен сізді шабыттандырады деп үміттенемін, біраз уақыт бөліп, осы жерде айтылған кейбір жобалармен ойнаңыз немесе одан да жақсы осы құралдарды алып, олардың айналасында жаңа заттар жасаңыз. Мұндағылардың көпшілігі ашық қайнар көздерден тұрады және сол жақта әзірлеушілер бар, олар сізге құралдарды пайдалану, қателерді табу және оларды хабарлау арқылы ғана олардың жұмысын жақсартуға көмектесу үшін іздейді.
