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