Բովանդակություն
- 01. Հանգստի ժամանակն է
- 02. $ ('լույս'). FadeIn ();
- 03. Ձեր ձեռքերը պատրաստված են զննարկչի համար
- 04. 3D խաղեր, որոնք վերահսկվում են ձեր gamepad- ի միջոցով
- 05. Գործարկող Flash ձեր iPad- ի վրա
- 06. Ձեր սմարթֆոնի համար ծրագրեր գրելը
- 07. Ruby- ի և Python- ի գործարկումը ձեր զննարկչում
- 08. ՕՀ-ի անկախ աշխատասեղանի ծրագրեր գրելը
- 09. Վեբ սերվերի վարում
- 10. bsանցահյուսություն և սքրինշոթեր
- Սպասիր Կա ավելին ...
JavaScript- ը մեծ ճանապարհ է անցել իր ծննդյան օրվանից `1995 թվականից: Միանշանակ դժվար ճանապարհ` լի թյուրիմացություններով, չարաշահումներով և անտեղյակությամբ: Սակայն ժամանակները փոխվել են, քանի որ վերջին հինգ տարիների ընթացքում JavaScript- ը ավելի ու ավելի շատ ուշադրություն է գրավում: Ավելի շատ ուշադրություն դարձնելով, ավելի շատ մշակողներ իրականում օգտագործում են JavaScript- ը ՝ այն օգտագործելով տարբեր նպատակների համար և վայելելով դրա գեղեցկությունը: Դասական «Տգեղ բադի ձագ» պատմությունը, եթե ինձ հարցնեք:
Հաջորդ հոդվածում մենք կբացահայտենք JavaScript- ի օգտագործման 10 դեպք, որոնք տարբերվում են սովորական «զննարկիչում», որը դուք սովոր եք:
01. Հանգստի ժամանակն է
Հիշու՞մ եք Facetime- ի նման տեսահաղորդակցման 80-ականների տեսլականը:
Դա տևեց ընդամենը 20 տարի, մինչև այն մտավ ընդհանուր հոսք ՝ գրեթե ամենուր հասանելի լայնաշերտ ինտերնետի և Skype կոչվող փոքր ծրագրակազմի մեծ օգտագործման պատճառով:
Adobe- ի Flash- ի և սոցիալական ցանց ստեղծելու Google- ի փորձի հնարավորությունների շնորհիվ մեր զննարկիչում մենք արդեն ունենք տեսահաղորդակցման հնարավորություններ: Coolանկալի չէ՞ր ունենալ այդ ունակությունները, առանց երրորդ կողմի plug-in- ի օգտագործման, ինչպիսին է Flash- ը:
Բարեբախտաբար, զննարկիչների վաճառողները նույնն էին մտածում և իրենց ծրագրաշարում իրականացնում էին «getUserMedia» API- ն: Սա առաջին քայլն էր ՝ ձեր զննարկիչից անմիջապես սարքեր, ինչպիսիք են տեսախցիկները կամ խոսափողները, մուտք գործելու համար:
Օգտագործելով Node.js- ը `որպես սերվեր նման հավելվածի հետևում, զարմանալիորեն հեշտ է տեսանյութի ազդանշանը օդով մեկ կամ մի քանի հաճախորդ տեղափոխելը: Դժբախտաբար, սա գրելու պահին միայն Chrome- ն ու Opera- ն են աջակցում API- ին, բայց մյուսները արագ կհասնեն դրան:
Երկկողմանի հաղորդակցության համար ավելի մաքուր մոտեցումն այս պահին Chrome- ի միակ բանն է, որը կոչվում է WebRTC: WebRTC- ի պատճառով հաճախորդներին հնարավորություն է ընձեռվում բացել հասակակիցների հետ կապի ուղիները ՝ ուղղակիորեն կապելով հաճախորդին հաճախորդի հետ:
Հանուն զվարճանքի ՝ ստուգեք Sindre Sorhus- ի Photo Booth- ի իրականացումը, որն արվել է 121 բայթում:
var video = document.getElementByTagName (’տեսանյութ’) [0],
navigator.getUserMedia ('տեսանյութ', successCallback, errorCallback);
գործառույթի հաջողություն Հետադարձ կապ (հոսք) {
video.src = հոսք;
}
գործառույթի սխալ Հետադարձ կապ (սխալ) {
console.log (սխալ);
}
02. $ ('լույս'). FadeIn ();
Arduino միկրոկոնտրոլերների պլատֆորմը A աստիճանի օրինակ է JavaScript- ի օգտագործման գործի «տուփից դուրս» գործի համար: Ձեզանից այն մարդկանց համար, ովքեր ծանոթ չեն Arduino պլատֆորմի հետ, ահա մի հիանալի հայտնի մեջբերում դրա կայքից.
«Arduino- ն բաց աղբյուրի էլեկտրոնիկայի նախատիպավորման հարթակ է, որը հիմնված է ճկուն, դյուրին օգտագործման համար նախատեսված ապարատային և ծրագրային ապահովման վրա: Այն նախատեսված է արվեստագետների, դիզայներների, հոբբիստների և ցանկացած անձի համար, ով ցանկանում է ստեղծել ինտերակտիվ օբյեկտներ կամ միջավայրեր»:
Arduino- ն ինքնին աջակցում է միայն C- ով գրված կոդին, ինչը դեռ մեծ խնդիր չէ: Մի քանի տող C- ով (բացի նրանից, որ ուրիշներն այս աշխատանքը կատարել են ձեզ համար), Arduino- ն կարող է հրամաններ ստանալ իր USB պորտով `սերիական նավահանգստի պրոտոկոլի միջոցով:
Բայց ինչպե՞ս կարող եք մուտք գործել սերիական նավահանգիստ JavaScript- ի միջոցով: Պարզ է, որ զննարկիչից չէ:
Node.js ՝ փրկարարական:
Համայնքի փաստաբան Քրիս Ուիլյամսի ջանքերի շնորհիվ մենք ունենք Node սերիական նավահանգստի գրադարան, որտեղ կարող ենք տվյալներ ուղարկել հին SP արձանագրության միջոցով: Սա սկզբնական առաջխաղացումն էր, որը հիմնված էր գրադարանի վրա, այլ մարդիկ Arduino- ի հնարավորությունների վերաբերյալ ավելի վերացական մոտեցում էին ցուցաբերում: Օրինակ ՝ node-arduino և duino գրադարանները:
JS- ով պայմանավորված Arduino ծրագրավորման համար բլոկի շուրջ ամենաթեժ և ամենաթեժ գրադարանն այժմ jonny-five է: Այցելեք Bocoup- ի բլոգը ՝ մի քանի թեժ հնարքների համար, որոնք նրանք արել են Arduino պլատֆորմի և բազմաթիվ հավելումների միջոցով: Nicolai Onken- ի և Jörn Zaefferer- ի JSConf- ի տեսանյութը կարող է ձեզ մի փոքր պտտեցնել այն, ինչ հնարավոր է այսօր `փոքր կոդով:
03. Ձեր ձեռքերը պատրաստված են զննարկչի համար
Minority Report- ի ապագա տեսլականը (այն տեսքը, երբ նրանք համակարգիչներն իրենց ձեռքերով են վերահսկում, այլ ոչ թե տգեղ մեքենաները) ամեն օր մոտենում է: Այս ուղղությամբ հսկայական քայլ էր Microsoft- ի վերահսկիչի `ավելի քիչ խաղալ փորձը` Kinect- ը: Կարող եք մտածել, որ զարմանալի խաղ է, բայց սա ի՞նչ կապ ունի JavaScript- ի հետ ?!
Microsoft- ի Kinect SDK թողարկմամբ, մի խումբ մարդիկ անցան Kinect- ի զննարկչի օգտագործման կամուրջը: Առաջին հերթին ChildNodes- ի այն տղաները, ովքեր կառուցել են լիարժեք աշխատող kinect.js գրադարան, որը հնարավորություն է տալիս օգտագործել ձեր Microsoft- ի Kinect- ը ձեր զննարկչում:
Խստորեն խորհուրդ եմ տալիս ստուգել դրանց ցուցադրությունները և տեսանյութերը, դա պայթյուն է: Այնուամենայնիվ, kinect.js գրադարանի մեկ հիմնական թերությունն այն է, որ հաճախորդի հետևում պետք է լինի WebSocket սերվերային ծրագիր (դա իրականում Kinect -> C # -> JS սոսինձ է):
MIT փառքի մի քանի ուսանողներ աշխատում են այս պատը քանդելու լուծման վրա, որը կոչվում է DepthJS,
զննարկչի ներդիրում, որը հնարավորություն է տալիս Kinect- ին օգտագործել Chrome- ի և Safari- ի համար, նույնիսկ այն կայքերի համար, որոնք օպտիմիզացված չեն Kinect- ի վրա հիմնված որևէ օգտագործման համար: DepthJS- ը ներկայումս գտնվում է զարգացման վաղ փուլում, բայց հաստատ արժե հետևել:
04. 3D խաղեր, որոնք վերահսկվում են ձեր gamepad- ի միջոցով
Այս օրերին երբևէ փորձե՞լ եք խաղալ ոչ Flash զննարկչի խաղ: Գրաֆիկական հնարավորությունները զարմանալի են, հատկապես, երբ տեսնում եք Quake- ի նման խաղային կլոններ:
Բայց այս իրերը նվագելիս միշտ կապվում ես ստեղնաշարի և (հիմնականում) խճճված մկնիկի հետ: Սա լուրջ թերություն է, մասնավորապես գործողությունների խաղերի համար, դրանք իրոք հետ է պահում զննարկիչից:
Հիանալի չէ՞ր, եթե պարզապես կարողանաք միացնել ձեր Xbox կարգավորիչը ձեր համակարգչի մեջ և սկսել խաղալ ձեր նախընտրած զննարկչի խաղը: Սա այլևս ապագա տեսլական չէ, բարևեք Gamepad API- ին:
Եթե ձեր սեղանի շուրջ խաղասայլակ ունեք, միացրեք այն հենց հիմա և վայելեք որոշ խաղեր, որոնք արդեն օգտագործում են Gamepad API- ն: Մուտքային կառավարման ծրագրավորումը նաև տորթի կտոր է, ստուգեք այս կոդի հատվածը կամ նույնիսկ ավելի լավ, գործարկեք այն ինքներդ.
div id = "խաղախցիկներ"> / div>
սցենար>
ֆունկցիայի gamepadConnected (իրադարձություն) {
var gamepads = document.getElementById ("gamepads"),
gamepadId = event.gamepad.id;
gamepads.innerHTML + = "Խաղախցիկը միացված է (id =" + gamepadId + ")";
}
windows.addEventListener ("MozGamepadConnected", gamepadConnected, false);
/ սցենար>
Եթե ցանկանում եք ավելին իմանալ զննարկիչների 3D հնարավորությունների մասին, տեսեք Three.js- ի և Jens Arps- ի բաց աղբյուրի 3D սիմուլյատորի շարժիչի վերևում կառուցված վերելքը: Մարկ Համիլը զգույշ եղեք, հնարավոր է, որ ձեր կարիքը ունենաք թևի հրամանատարի հերթական շարունակության համար:
05. Գործարկող Flash ձեր iPad- ի վրա
Որպես բաց ստանդարտների սիրահար և Apple- ի երկրպագու, ես պետք է խոստովանեմ, որ ես իսկապես կցանկանայի շնորհակալություն հայտնել Apple- ին Flash- ը iPad- ի և iPod- ի վրա չդնելու համար, սա իսկապես սկսեց HTML5- ի, CSS3- ի և JavaScript- ի նման բաց տեխնոլոգիաների ընդունման շարժում:
Որպես գործակալության աշխատակից ՝ պետք է ասեմ, որ սա իսկապես վատ իրավիճակ է մեր հաճախորդների համար:
Նրանց մեծ մասը ստիպված է երկու անգամ վճարել պարզ գովազդի կամ արշավի համար, որը նախաձեռնում է ինտերակտիվ բովանդակություն ունենալու IE7 կամ IE8- ով Flash- ի և ժամանակակից զննարկիչների, ինչպես նաև iDevices- ի միջոցով HTML5- ով:
Հին զննարկիչների առանձնահատկությունները բազմալրացնելն ունի իր սահմանները, հիմնականում անվանում է կատարում: Այսպիսով, այդ Flashless iDevices- ում Flash գործելու հնարավորություն չկա՞:
Իհարկե, կա մեկը, և, իհարկե, այն կառուցված է JavaScript- ում:
Պատմության մի կտոր. 2010-ին Թոբիաս Շնայդերը թողարկեց Գորդոն անունով մի փոքրիկ գրադարան
ինչը թույլ տվեց SWF ֆայլերը գործարկել անմիջապես զննարկչում: Սա բավականին լավ աշխատեց Flash- ի փոքր ֆայլերի համար, ինչպիսիք են գովազդը, որոնք օգտագործում էին միայն գործառույթներ մինչև Flash տարբերակը 2, բայց բարձր մակարդակի ֆունկցիոնալությունն ընդհանրապես ներառված չէր:
Երբ Tobias- ը միացավ ueberJS UXEBU ընկերությանը, նրանք եկան նոր գաղափարի:
Եվ այսպես, ծնվեց Բիկեշդը: Bikeshed- ը ինքնին JavaScript անիմացիոն շրջանակ է, բայց նաև JavaScript է Flash- ի այն ամենի համար, ինչ ցանկանում եք, որ կազմող լինի (դրա վրա հիմնված է ադապտեր, այնպես որ կարող եք գրել ադապտեր այն ամենի համար, ինչ ցանկանում եք, չնայած ստանդարտ վարքը Flash- ն է JavaScript- ի կազմում): , Այն համատեղելի է Flash 10-ի և ActionScript 3-ի հետ: Հայացք գցեք նրա ինտերնետային էջին `բացի կազմողից ավելին իմանալու դրա բազմաթիվ հատկությունների մասին:
06. Ձեր սմարթֆոնի համար ծրագրեր գրելը
Բջջային հեռախոսի միջավայրի համար բնիկ ծրագրեր գրելը քարքարոտ ճանապարհ է: Դա սկսվում է այն որոշումից, թե որ հարթակն եք ցանկանում աջակցել: Եթե ձեր ծրագիրը գործարկվի iPhone- ի և iPad- ի, Android- ով աշխատող շարժական սարքի, Windows Mobile- ի, Blackberry- ի սարքերի, webOS- ի վրա հիմնված պլատա ... և այլն:
Այս հարթակներից յուրաքանչյուրն ունի իր սեփական API- ները և հիմնականում օգտագործում է տարբեր ծրագրավորման լեզուներ:
Եթե դուք վերապրել եք զննարկիչների պատերազմները, ասեմ, որ սա ավելի դժվար պայքարի միջոց է: Գրեթե անհնար է, որ մշակողը ժամանակին և բյուջեում ծրագրեր ստեղծի այս բոլոր պլատֆորմների համար:
Դե ինչ անել: Վարձե՞ր ավելի շատ մշակողների: Appsրագրերի համար ավելի շատ գանձվա՞ծ եք Թե՞ ավելի լավ մոտեցում գտնել ՝ համոզվելու համար, որ ձեր կոդերի բազան աշխատում է յուրաքանչյուր սարքի վրա: Որպես ձեզանից առավելագույնը ՝ ես կնախընտրեի վերջին մոտեցումը:
Բայց ինչի՞ մեջ պետք է կառուցվեն այս ծրագրերը: Ի՞նչ ընդհանուր են այս բոլոր պլատֆորմները: Գուցե դուք գիտեք պատասխանը, դա վեբ զննարկիչ է, ուստի ՝ JavaScript շարժիչ:
Դա Apache Cordova- ի գաղափարն է, որն ավելի հայտնի է իր նախկին PhoneGap անվան տակ:
Cordova- ն JavaScript շրջանակ է, որն ամփոփում է յուրաքանչյուր բջջային միջավայրի API- ները և բացահայտում է կոկիկ JavaScript API ՝ դրանց բոլորին վերահսկելու համար: Սա հնարավորություն է տալիս պահպանել մեկ կոդի բազա, որը այնուհետև կկառուցեք և կտեղադրեք տարբեր շարժական սարքերի վրա:
Ստուգեք այստեղ առկա ռեսուրսները ՝ պարզելու համար, թե ինչպես օգտագործել Cordova- ն ՝ kick ass ass բջջային հավելվածներ կառուցելու համար, որոնք դուք մեկ անգամ եք կառուցում և կգործեն ամենուր:
07. Ruby- ի և Python- ի գործարկումը ձեր զննարկչում
Mozilla- ն, որը հայտնի Firefox զննարկչի ետևում կանգնած ընկերությունն է, շատ գիքեր է աշխատում, դա հաստատ է: Նրանցից մեկը Ալոն Zakաքայն է `Mozilla Research Team- ի ինժեներ, որը կառուցեց մի կեղծ գործիք, որը կոչվում էր Emscripten:
Emscripten- ը թույլ է տալիս տեղափոխել LLVM բիթկոդ, որը կարող է գեներացվել C / C ++ գրադարաններից, JavaScript- ին: Դա արվում է ՝ գրադարանները կազմելով բիթ կոդի, ապա վերցնելով այդ բիտ ծածկագիրը և վերափոխելով այն JavaScript: Կոկիկ, բայց ի՞նչ կարող եմ իրականում անել սրա հետ, միգուցե ինքներդ ձեզ հարցնեք:
Ես ձեզ հակադարձ հարց ունեմ. Դուք երբևէ լսել եք «CoffeeScript- ի և նախատիպի օգտագործումը Ruby- ի զննարկչում գործարկելն ամենամոտիկն է» արտահայտությունը: Ոչ Մի անհանգստացեք, քանի որ դա այլևս ճիշտ չէ:
Emscripten- ի միջոցով դուք պարզապես կարող եք վերցնել Ruby- ի աղբյուրները, դրանք վերածել JavaScript- ի և voilà- ի, իսկական Ruby- ն ունենալ ձեր զննարկիչում: Բայց դա չի վերաբերում միայն Ruby- ին, օրինակ Python- ը նույնպես կազմագրվել է:
Կամ ստուգեք բրոդվեյի զննարկիչում h.264: Դա իրականում նկարագրված C ++ գրադարան է:
Գնացեք repl.it ՝ ձեր զննարկչում տեսնելու համար մի քանի ծրագրավորման լեզու (ներառյալ ՝ Ruby և Python):
08. ՕՀ-ի անկախ աշխատասեղանի ծրագրեր գրելը
Նախկինում մենք խոսեցինք Apache Cordova- ի միջոցով բազմաթիվ բջջային պլատֆորմներ թիրախավորելու մասին: Unարմանալի չէ, որ JavaScript- ը կարող է օգտագործվել ոչ միայն բջջային պլատֆորմները թիրախավորելու համար, այլ նաև մեր հին ընկերը `աշխատասեղանի համակարգիչը:
Առաջին լուծումները ստացան Appcelerator- ի տղաները Titanium Desktop Suite- ով և Adobe- ից `լայնորեն օգտագործվող Air պլատֆորմը:
Բայց որպես բաց աղբյուրի սիրահարներ, որոնք բոլորս էլ ունենք, ավելի շատ բաց և Node.js- ի վրա հիմնված տեխնոլոգիան է այն, ինչ մենք փնտրում ենք: Հանդիպեք app.js- ին: app.js- ը բաց վեբտեխնոլոգիա և Node.js վրա հիմնված աշխատասեղանի ծրագրերի ստեղծող է, որը թույլ է տալիս գրել իրական սեղանադիր ծրագրեր `ֆայլային համակարգի հասանելիությամբ, պատուհանի կառավարման սարքերով և այլն: Մենք կարող ենք ապավինել հանգույցի կայուն խաչաձև API- ներին և HTML և CSS համակարգերով կառուցել մեր ծրագրաշարերի UI: Likeիշտ այնպես, ինչպես այս ցուցակի ամենաթեժ նոր իրերն այստեղ:
app.js- ը բավականին երիտասարդ նախագիծ է, ուստի մինչ այժմ աջակցում է միայն Windows- ը և Linux- ը, բայց ըստ փոստային ցուցակի, Mac- ի աջակցությունն իր ճանապարհին է:
09. Վեբ սերվերի վարում
Այսօր դուք ոչ ոքի չեք ցնցում, երբ ասում եք, որ ձեր վեբ կայքը սպասարկում է JavaScript- ի վրա հիմնված վեբ-սերվեր: Եթե դուք մտածում եք երկու-երեք տարի առաջ, և վեբ մշակողներին ասում եք նույնը, նրանք, հավանաբար, կծիծաղեին ձեր վրա կամ նույնիսկ ավելի վատ:
Բայց Node.js- ի անհավանական հաջողությամբ, սա, բարեբախտաբար, հեռու է հիմա: Դա ոչ միայն այլևս չի զարմացնում մարդկանց, իր ասինխրոն բնույթի շնորհիվ, Node.js- ը կատարման մեջ մեծամասնություն է, հատկապես, երբ խոսքը վերաբերում է բազմաթիվ զուգահեռ կապերի խնդրին բախվելուն: Ոչ միայն դրա կատարումը պայթյուն է, այլ իսկապես պարզ API- ն գրավում է նաև բազմաթիվ մշակողների: Եկեք ստուգենք «Բարև աշխարհ» օրինակը հանգույցի աշխարհից, դա ոչ միայն էկրանի օրինակի վրա տպված «Ողջույն աշխարհ» է, այլ նաև http սերվեր:
var http = պահանջել ('http');
http.createServer (գործառույթ (req, res) {
res.writeHead (200, {'Content-Type': 'text / plain'});
res.end ('Hello World n');
}): ունկնդրեք (1337, '127.0.0.1');
Եթե այս պարզությունը ձեզ չի հյուծել, ես էլ չեմ կարող ձեզ օգնել:
Node- ի ժողովրդականության լավագույն մասերից մեկը (կամ գովազդը) այն է, որ Microsoft- ի նման մեծ ընկերություններ իրականում աջակցում են դրան, այսինքն `իրենց Azure Cloud Services- ում:
10. bsանցահյուսություն և սքրինշոթեր
Այսպիսով, վերջապես, բայց ոչ պակաս կարևոր, եկեք նայենք մի նախագծի, որը ես անձամբ սիրում եմ ՝ թույլ տալով ինձ թույլ տալ իմ QUnit թեստերը անգլուխ կերպով անցկացնել հրամանի տողում: PhantomJS- ը WebKit- ի վրա հիմնված անգլուխ զննարկիչ է `կոկիկ JavaScript (կամ CoffeScript) վրա հիմնված API- ով:
Բայց ձեր JavaScript- ի և DOM- ի փորձարկումը Phantom- ի օգտագործման միակ դեպքը չէ: Ինձ իսկապես հիացնում են կայքերը քերծելու և ձեզ սքրինշոթեր նկարելու հնարավորությունները:
Այո, ճիշտ եք կարդում. Phantom- ի միջոցով կարող եք թողարկել վեբ-էջեր տարբեր գրաֆիկական ձևաչափերով, և, իհարկե, դա նույնքան հեշտ է, որքան երեխայից քաղցրավենիք գողանալը:
Եկեք նայենք սցենարին, որը հենց դա է անում.
var էջ = նոր վեբ էջ ();
page.open ('http://google.com', գործառույթ (կարգավիճակ) {
page.render ('google.png');
phantom.exit ();
});
Այս ամենը ձեզ հարկավոր է սքրինշոթ նկարելու համար, և քանի որ այն հիմնված է JavaScript- ի վրա, դուք կարող եք նաև օգտագործել jQuery- ն ու շահարկել էջի պարունակությունը նախքան այն էկրանավորելը:
Սպասիր Կա ավելին ...
Այնպես որ, հուսով եմ ՝ դուք նույնքան զարմացած եք, որքան ես, երբ հայտնաբերեցի այս գործիքներից յուրաքանչյուրը: Այս հոդվածը պարզապես քերծեց այն հնարավորությունը, որն այսօր հնարավոր է JavaScript- ի միջոցով: Կա շատ ավելին IDE- ների, որոնք ամբողջությամբ գրված են JS Cloud9- ում կամ դրանով արված բարձր անվտանգության իրեր (ձեր վարկային քարտը պատրաստվել է JavaScript- ով):
Հուսով եմ, որ դուք ոգեշնչված եք զգում, որոշ ժամանակ կխփեք և կխաղաք այստեղ նշված որոշ նախագծերի հետ, կամ նույնիսկ ավելի լավ է վերցնեք այս գործիքներից մի քանիսը և դրանց շուրջ նոր իրեր կառուցեք: Այստեղ դրա մեծ մասը բաց կոդով է, և այնտեղ կան ծրագրավորողներ, ովքեր փնտրում են ձեզ ՝ օգնելու նրանց բարելավել իրենց աշխատանքը, նույնիսկ եթե դա միայն գործիքներն օգտագործելով, սխալներ հայտնաբերելով և զեկուցելով դրանց մասին:
