Javascript
Ջավասկրիպտը օբիեկտակողմնորոշված ծրագրավորման լեզու է։ Ջավասկրիպտում գոյություն ունեն օբյեկտներ որոնք կարող են ուենալ մեթոդներ և հատկություններ։
Ջավասկրիպտի գլխավոր օբյեկտը կոչվում է document:
Document օբյեկտի մեթոդներից է write որը էկրանին արտածում է փակագծերում կրված տողային արտահայտությունը կամ փոփոխականի արժեքը։
Write մեթոդում կարելի է գրել նաև html-ի թեգեր։
Մեկնաբանություները ջավասկրիպտում
Մեկնաբանությունները լինում են 2 տեսակի՝ մեկ տողանի և բազմատող։
// միտողանիմեկնաբանություն
/*բազմատող
մեկնաբանություն*/
Փոփոխակնների ստեծում
Փոփոխակաները լինում են հետևյալ տպիերի՝
- Տողային(գրվում են չակերտների մեջ)
- Թվեր
- Զանգվածներ
- Բուլյան տիպի( կարող են ընտունել ընդամենը 2 արժեք՝ true, false)
- Օբյեկտներ
Ջավասկրիպտում փոփոխականները ծտեղծվում են var, let, const բանալի բառերի օգնությամբ։
Փոփոխականների թույլատրելի անունները։
Ջավասկրիպտում փոփոխականների անունները կարող են սկսվել լատիներեն տառերով, $ նշանով կամ ստորին գծիկի նշանով, սակայն նպատակահարմար է որ փոփոխականների անունները սկսվեն լատիներեն տառերով։
Փոփոականի անվանման մեջ չի կարելի օգտագործել բացատ կամ մեջտեղի գծիկ։
Ջավասկրիպտում գոյություն ունեն զբաղված անուներ՝
Boolean, break, char, class, const, continue, double, else, float, for, funtion, long, new, null, private, public, number
Գործողություններ փոփոխականների հետ
Ջավասկրիպտում փոփոխականների հետ կարելի է կատարել պարզ մաթեմատիկական գործողություններ։
Տողային փոփոխականների դեպքում + նշանը կատարում է տողերի միացում կցում և կոչվում է կոնկատ։
Եթե ջավասկրիպտում տողին գումարու ենք թիվ ապա ջավասկրիպտը թիվը դարձնում է տող և տողին կոնկատ է անում տող։
++ գորղողությունը որը փոփոխականի արժեքն ավելացնում է մեկով կոչվում է ինկրիմենտ։
— գործողություը որը փոփոխականի արժեքը վոքրացնում է մեկով կոչվում է դեկրիմենտ։
Զնագվածներ
Զանգվածը փոոխականների հավաքածու է որի յուրաքանչյուր էլեմենտին ունենք հասանելիություն։
Զանգվածի յուր. Էլեմենտ ունի իր ինդեքսը։ Javascript-ում ինդեքսները սկսում են 0 ից։ Գոյություն ունի զանգվածի ստեղծման 2 եղանակ։
Զանգվածի ստեղծման առաջին եղանակ՝
let cities=[“Yrevan”,”Gyumi”, “Armavir”, “Spitak”, “Dilijan”,”Ashtarak”, “Sevan”, “Ararat”]
Զանգվածի ստեղծման 2 եղանակ՝
let cities2= new Array[“Moscow”, “Qeyptown”, “Pretoria”, “Melburn”, “Sidney”, “Kanbera”];
document.write(cities[0]+”<br>”);
Կրելի է ստեղծել զանգված դատարկ էլեմենտներից բաղկացած։
Length հատկությունը և զանգվածում էլեմեմտների ավելացումն ու հեռացումը։
Զանգվածի էլեմենտների քանակը կարելի է հաշվել lenght հատկության միջոցով։
Push զանկվածի վերջումմ ավելացնում է նոր էլեմենտ։
Unshift մեթոդը զանգվածի սկզբից ավելացնում է նոր էլեմենտ։
Pop մեթոդը հեռացնում է զանկվածի վերջին էլեմենտը
Shift մեթոդը վերացնում է զանվածի առաջին էլեմենտը։
Զանգվածից հեռացնել առաջին և վերջին էլեմենտները։
Էկրանին արտածել զանգվաը
Splice()
students[“Meri”, “Armen”, “Artur”, “Karen”,”Gevorg”];
document.splice(3,2);
Այս դեպքում splice() մեթոդը student զանգվածում 3րդ ինդեքսն ունեցող էլեմենտից սկսած կջնջի 2 էլեմենտ։
students.splice(2,0,”Vahe”, “Ani”);
Այս դեպքում splice մեթոդը 2 ինդեքս ունեցող էլեմենտից սկսած կջնջի 0 հատ էլեմենտ և նախքան 2 ինդեքս ունեցող էլեմենտը կտեղադրի Vahe և Ani:weew
students.splice(1,2, “Lilit”, “Liana”);
Այս դեպքում splice մեթոդը 1 ինդեքսից սկսած քջնջի 2 էլեմենտ և նախքան 1 ինդեքս ունեցող էլեմենտը կտեղադրի Լիլիթ և Լիանա։
Ունենք զանգված որւմ մեկից ավելի էլեմետ կա, բայց չգիտենք էլեմենտների քանակը։ Այդ զանգվածն է ՝let fruits=[“Apple”, “Orange”, “Pear”, “Ganate”];
Splice մեթոդի օգնությամբ փոխարինել զանգվածի նախավերջին էլեմենտը pinappleով և ամբողջ զանգվածն արտածել էկրանին։
Զանգվածի հետ աշխատելու համար նախատեսված այլ մեթոդներ։
Զանգվածներիկցումմիացում։
Concat ֆունկցիան կցում միացնում է զանգավածները։
total=students1.concat(students2);
Զանգվածիէլեմենտներիորոշմասիվերձնելը։
let happystudents=students.slice(1);
document.write(happystudents+”<br>”);
Այս դեպքում slice մեթոդը students զանգվածից կվերցնի 1 ինդեքս ունեցող էլեմենտից սկսած մինչև վերջին էլեմենտը և դրանք կտեղարդի happystudents զանգվածում։
let happystudents2=students.slice(1,3);
Այս դեպքում slice մեթոդը students զանգվածից կվերցնի 1,2 ինդեքս ունեցող էլեմենտները և դրանք կտեղադրի jappystudents2 նոր ստեղծված զանգածում։
Բազմաչափզանգվածներ
Բզամաչափ զանգված կոչվում է այն զանգվածը որի էլեմենտները իրենխ են հանդիսանում զանգվածներ։
Պայմանականօպերատորներ
If պայանական օպերատորն ունի հետևյալ տեսքը։
if(պայման){
գործողություն(օպերատորների բլոկ);
}
If – else պայմանական օպերատոր
If – else պայմանական օպերատորն ունիհետևյալ տեսքը։
if(պայման){
գործողություն1(օպերատորների բլոկ1);
}
else{
գործողություն2(օպերատորների բլոկ2);
}
Խնդիր3
Ունենք զանգված students
Գրել պայման, որը ստուգում է եթե զանգվաի էլեմենտերի քանակը մեծ է կամ հավասար 3ից ապա էկրանին արտածվում է հետևյալը՝ Սա մեծ զանգված է ոն ունի առնվազն է էլեմենտ։
Այլապես էկրանի արտածվում է հետևյալը՝ Սա փոքր զապգված է որի էթեմենտների քանակը 3ից փոքր է։
&&-տրամաբանակ “և”ի տեպքում ընդհանուր պայմանը կլինի ճշմարիտ, եթե ճշմարիտ լինեն բոլոր մասնակի պայանները
||- տրամաբանական “կամ”ի դեպքում ընդհանուր պայմանը կլինի ճշմարիտ, եթե ճշմարիտ լինի բոլոր մասնակի պայմաններից գոնե մեկը։
Խնդիր4
Գրել պայման եթե զանգվածի երկարությունը հավասար է 4 և վերջին էլեմենտն է Արթուրը ապա էկրանի արտածել՝ Այս զանցվածը մեզ բավարարում է։
Այլապես արտածել՝ այս զանգվածը մեզ չի բավարարիում։
Բոլոթվերըպացի 0 իցճշմարիտեն։
Խնդիր
Գրել բազմակի պայմաններ լուսաֆորի տարպեր ազդանշանների համար
Եթե կարմիր է ապա պետք է կանգնել
Եթե դեղին է ապա պետք է սպասել
Եթե կանաչ է ապա պետք է շարժվել այլապես լուսաֆորը չի աշխատում
Ցիկլիօպերտորներ
Բոլոր ցիկլի օպերատորներն ունենում են հաշվիչ և սահմանափակում։
While ցիկլի օպերատորն ունի հետևյալ տեսքը
Հաշվիչ սկզբնական արժեք
while(սահմանափաքում){
Գործողություն(օպերատորների բլոկ) ;
հաշվիչի քայլ;
}
While ցիկլի օնությամբ էկրանի աարտածել բոլոր ուսանողներին սկսած անիից մինչև Արմեն։
For ցիկլի օպերատոր
Այս օպերատորն ունի հետևյալ տեսքը
for(հաշվիչի սկզբնական արժեք, սահմանափակում, հաշվիչի քայլ){
գործողություն(օպերատորների բլոկ)
}
Գրել ցիկլ որը հաշվի 1-7 թվերի քառակուսիները, Արդյունքում պետք է արտածվի
Window օբյեկտի մեթոդները՝ alert, prompt, confirm
Window օբյեկտի մեթոդները ստեղծում են երկխոսական պատուհաններ
Alert մեթոդը ստեղծում է մոդալ պատուհան, որն ունի կոճակա ok
Window օբյեկտի promt մըթոդը ստեղծում է պատուհան, որն ունի ինֆորմացիայի մուտքի համար նախտեսված դաշտ և թույլ է տալիս օգտատիրոջից հարցում կատարել որևէ ինֆորմացաի։
Պրոմտ մեթոդը կարող է ընդունել 2 պարամետր`
1 հարց որն ուղղված է օգտատիրջը։
2 սկզբնական ինֆորմացիա որը կարող է գտնվել ինֆորմացիայի մուտքի համար նախատեսված դաշտում։
Երկրորդպարամետրըպարտադիրչէ
Window օբյեկտի confirm մեթոդը ստեղծում է երկխոսական պատուհան երկու կոճակով՝ ok, cancel
Եթե սեղմվի ok կոճակն ապա փոփոխականին կվերագրվի true իսկ եթե սեղմվի cancle կոճակը ապա փոփոխականին կվերագրվի false
Գրել կոդ որն օգտատիրոջից հարցնի նրա տարիքը և եթե նրա տարիքը մեծ է կամ հավասար 18ից ապա էկրանին գրվի դուք արդեն չափահաս եք։
Իսհ եթե փոքր է 18ից ավա էկրանին գրվի դուք դեռ անչափահաս եք։
Գրել կոդ որը օգտատիրողից հարցնի նրա տարիքը և տարեթիվն է այժմ։ Աձնուհետև ստեղծել ցիկլ որը էկրանին կարտածի թե մեկ տարի առաջ քանի տարեկան էր տվյալ մարդը,ւ երկու տարի աջռաջ քանի տարեկան էր տվյալ մարդը և այդ պես շարունակ մինչև մինչև նրա տարեթիվը։
Javascript ում ֆունկցիաները ունեն հետևյալ տեսքը։
Function ֆունկցիայի անունը (պարամետր1, պարամետր2, պարամետրn);
{
գործողություն(օպերատորների բլոկ);
}
Ֆունկցիան կանչում են հետևյալ կերպ ՝
Ֆունկցիային անունը(պարամետր1ի արժեք, պարամետր2ի արժեք,… պարամետրnի արժեք);
Գրել ֆունկցիա որը պետք է հաշվի նրան տրված թվի քառակուսին և այն արտածի էկրանին։
Գրել ֆունտցիա որը օգտատիրոջից հարցնի որևէ թիվ և յադ թիվը մուտքագրելուց հետո ֆունկցիան հաշվի նրա խորանարդը և այն արտածի էկրանին։
Փոփոխականներիտեսանելիությանտիրույթ
Javascriptում փոփոխականները լինում են լոկալ և գլոբալ։
Գլոալ փոփոխախկանները ստեղծվում են ֆունկցիայից դուրս և նրանց արժեքը պաահպանվում են ինչպես ֆունկցիայից դուրս այնպես էլ ներս։
Լոկալ փոփոխականները ստեղծվում են ֆունկցիայի ներսում և նրանց արժեքը ֆունկցիայիգ դուրս չի պահպանվում։
Խնդիր
Ստեղծել ֆունկցիա՝ ֆիո, որը օգտատիրողից հերթականորեն հարցնում է անուն ազգանունն ու հայրանունը, իսկ արդյունքում վերադարձնում է անուն ազգաուն հայրնուն մեկ տողով բառերի միջև բացատով։
Տողային օբյեկտների հատկություններն ու մեթոդները
Length հատկությունը վերադարձնում է տողի սինվոլների քանակը, կամ զանգվածի դեպքում զանկվածների երկարութրունը։
Խնդիր գրել ֆունկցիա որը որպես պարամետր ստանում է որևէ տող, իսկ որպես արդյունք վերադարձնում է այդ տողի սիմվոլների քանակը։ Օգտատիրոջից հարցում է անում որևէ տող և որը որպես պարամետր տվեք ֆունկցիային։
Գրել ֆունկցիա որը որպես պարամետր ստանում է տող և որպես արդյունք հաշվում տողում սիմվոլների քանակը մեծ է տասից թե փոքր։ Օտատորոջը տվեք հարց prompt որը որպես արժեք տվեք ֆունկցիայի պարամետին։
toLowerCase() և toUppercase() մեթոդները
toLowerCase() մեթոդը իրեն տված տողը ամբողջությամբ դարձնու է փոքրատառերով
toUppercase() մեթոդը իրեն տրված տողը ամբողջությամբ դարձում է մեծատառերով
Օգտատիրոջը տվեք հարց prompt մեթոդով։ Ճիղտ պատսխանը տեղադրեք answer փոփոխականում ճիշտ պատասխանը գրեք ամբողջությամբփ փոքրատառերով երբ օգտատիրոջից ստանաք պատասխանը այն դարձրեք փորատառերով և այն համեմատեք ճիշտ պատասքանի հետ, եթե պատասխանը ճիշտ է ապա էկրանի արտաեք հաղորդագրություն այն մասին,որ պատասխանը ճիշտ է, հակառակ տեպքում, որ պատասխանը սխալ է։
match()- մեթոդը
Այն վերադարձնում է ռեգուլյար արտահայտության հետ համընկնումը։
replace()մեթոդը գտնում է տողում ռեգուլյար արտահայտության հետ համընկնումը և այն փոխխարինում է տրված արտահայտությամբ։
Gն շաբլոնի մոդիֆիկատոր է կոչվում է գլոբալ, այն գրվում է, որպէսզի էկրանին արտածվեն բոլոր համընկնումները
Գրել ֆունկցիա որն ընդունում է երկու պարամետր առաջինը փոփոխական, որը պարունակում է հեռախոսի համար,
Երկրորդը սիմվոլ որով պետք է Փոխարինվի “/“
isNan()(not number) ֆունկցիա
isNaN ֆունկցիան վերադարձնում է true եփե տվյալ փոփոխականը թիվ չէ։ԵՎ վերադարձնում է false եթե տվյալ փոփոխականը թիվ է
Խնդիր գրել ֆունկցի որը որպես պարաշետր ստանում է զանգված այնուհետև ստուգում է զանգվածի բոլոր էլեմենտները և էկրանին արածում է թե ինչ ինֆորմացիա է պարունակում ամեն զանգվածում թիվ թե ոչ թիվ։
parseInt(), parseFloat(), Number() ֆունկցիաները
parseInt() ֆունկցիան իրեն տրվա պարամետրը դարձնում է ամբողջ թիվ։
parseFloat()ֆունկցիան իրեն տրված պարամետրը դարձնում է տասնորդական թիվ։
Number() ֆունկցիան իրեն տրված պարամետրը դարձնում է թիվ։ Այս ֆունկցիան կարող է թվի վերածել նաև բուլիան փոփոխականները
Խնդիր որը որպես պարամետր ընդունում է զանգված և այդ ֆունկցիայի աշխատանքի արդյունքում զանգվածը պետք է ձևափոխվի այնպես որ նրա էլեմէնտները դառնան միայն թվեր։
toFixed() մեթոդը
Այս մեթոդե ֆիքսում է թվում ստորակետից հետո թվանշանների քանակը։
Math օբյեկտը և round(), ceil(), floor(),
Math() օբյեկտի round() մեթոդը կատարում է տասնորդական թվերի կլորացում։
ceil() մեթոդը տասնորդական թիվը կլորացնում է դեպի մեծ ամբողջ թիվ
floor() մեթոդը թիվը կլորացում է դեպի փոքր աբողջ թիվ։
Գրել ֆունկցիա որն ընդունում է 2 պարամետր առաջինը զանգված որը կազմված է տասնորդական թվերից, երկրորդը կլորացման մեթորդները։ Արդյունքում ֆունկցիան պետք է կլիրացնի զանգվածի էլեմենտները ֆունկցիայի երկրորդ պարամետրով նշված մեթդով։
Math օբյեկտի random() մեթոդը գեներացնում է պատահական տասնորդական թիվ 0-1 միջակայքից։
Date օբյեկտ
Date օբյեկտի getFullYear() մեթոդըվրադարձնումէայդպահինեղածտարեթիվը։
getMonth() մեթոդը վերադարձնում է ընթացիկ ամիսը, Հունվարից հաշված։ Հունվարի ինդեքսը 0ն է։
GetDate() մեթոդը վերադարձնում է ամսվա նթացիկ օրը։
getDay()մեթոդը վերադարձնում է շաբայվա ընթացիկ օրը։
getHours() մեթոդը վերադարձնում է ընթացիկ ժամը։
getMinutes() մեթոդը վերադարձնում է ընթացիկ րոպեն։
getSeconds() մեթոդը վերադարձնում է ընթացիկ վայրկյանը։
Օգտվելով getDay() մեթոդից էկրանի արտածել շաբաթվա օրը սակայն ոչ թե թվով այլ բառերով՝ օրինակ այսօր հինգշաբթի է։ս
setTimeout(), setInterval() և clearInterval()
setTimeout() ֆունկցիան ունի 2 պարամետր
Առաջի պարամետրը կարող է լինել ֆունկցիա որը պետք է աշխատի, երկիորդ պարամետրը ցույց է տալիս այն ժամանակը միլիվայրկյաններով որից ետո պետք է աշխատի տվյալ ֆունկցիան։
setInterval() ֆունկցիան ունի 2 պարամետր
Առաջի պարամետրը կարող է լինել ֆունկցիա որը պետք է աշխատի, իսկ 2րդ պարամետրը ցույց է տալիս թե որքան ամանակը մեկ կաշխատի տվյալ ունկցիան։
clearInterval() ֆունկցիան չեզոքացնում է setInterval() ֆունկցիան:
typeof() ֆունկցիան վերադարձնում է իրեն տրված փոփոխականի տիպը։
Switch-case պայմանական օպերատոր
Switch(փոփոխական){
Case արժեք 1:
Գորժողություն 1;
Break;
Case արժեք 2:
Գորժողություն 2;
Break;
Default:
գործողություն;
}
Սեփական օբյեկտի ստեղծումը
Javascriptում կարելի է ստեղծել սեփական օբյեկտ։ Օբյեկտները կարող են ունենալ հատկություններ(փոփոխականներ) և մեթոդներ(ֆունկցիաներ)
։
Գոյություն ունի սեփական օբյեկտի ստեղծման 2 եղանակ։
Օբյետի հատկությունը կարելի է տալ նաև ոփոխականի միջոցով՝
Վեբէջերիձևափոխություններ(DOM- document object model)
JavaScriptն աշխատում է DOM ծառի և նրա հանգույցների հետ, որոնք իրենցից ներկայացնում են htmlի թեգերը։
Էլեմենտների ընտրություն
getElementsByTagname()
Այն վերցնում է տվյալ անունով բոոր թեգերը։
Էլեմենտների ընտրություն IDի օգնությամբ։
getElementById()
Document.getElementById() ընտրում է տվյալ IDն ունեցող էլեմենտը։
Բարեկանէլեմենտներիընտրություն
child.Nodes հատկությունը ընտրում է տվյալ էլեմենտի ժառանգ էլեմենտները
parent.Node հատկությունը ընտրում է տվյալ էլեմենտի ծնող էլեմենտին
Հարևանէլեմենտներիընտրություն
nextSibling հատկությունն ընտրում է տվյալ էլեմենտի հաջորդ հարևան էլեմենտը
previousSibling հատկությունն ընտրում է տվյալ էլեմենտի նախորդ հարևան էլեմենտը
innerText և innerHTML հատկությունները
innerText հատկությունը ընտրում է տվյալ էլեմետի տեքստը։ innerText հատկությաոն միջոցով կարելի է նաև փոփոխել տվյալ էլեմենտի տեքստը։
innerHTML հատկությունը ընտրում է տվյալ էլեմենտի html կոդը։ innerHTML հատկության միջոցով կարելի է նաև փոփոխել տվյալ էլեմենտի html կոդը։
JQuery
Էլեմենտներիընտրույուն jqueryիօգնությամբ։
Jqueryիֆունկցիաներըսկսվումեն jquery();
$();
Jqueryինաշխատումէcssi սելեկտորներիհետ։
$(‘p’);– կնտրվենindex.htmlումեղածբոլորպարբերությունները
$(‘.maindiv’);– կնտրվենբոլորայնէլեմենտներըորոնցտրվածէայսclassը
$(‘#main_h1’);– կնտրիայնէլեմենտը, որինտրվածէmain_h1 id
$(‘p strong’);– կընտրվենբոլորpթեգերիժառանգ strong թեգերը։
$(‘#div_for_img img’);–կընտրվենdiv_for_img էլեմենտիբոլորժառանգimgթեգերը։
#(‘#main_h1+p’);–կընտրվիmain_h1 idունեցողթեգինանմիջապեսհաջորդղ p թեգը։
$(‘#div_for_img>img’);–կընտրվենdiv_for_imgթեգիբոլորանմիջապեսժառանգimgթեգերը
Ընտրությունատրիբուտներիառկայութամբևարժեքով
$(‘img[width=“200”]’);-կնտրվենբոլորայնimgթեգերըորոնցwidthատրիբուտիարժեքըհավասարէ 200:
$(‘a[href^=“http”]’);– այսդեպքումկընտրվենբոլորայնaթեգերըորոնցhrefատրիբուտիարժեքըսկսվումէhttpատահայտությամբ։
$(‘img[src $=“.jpg”]’);– կընտրվենբոլորայնimgթեգերըորոնցsrc ատրիբուտիարժեքըվերջանումէ.jpg արտահայտությամբ
$(‘img[src *=“moto”]’);- կընտրվենբոլորայնimg թեգերը, որոնց src ատրիբուտումհանդիպումէ moto արտահայտությունը
Ընտրությանֆիլտրում
$(‘#moto_table tr:even’);- Կընտրվեն
#moto_table id ունեցողէլեմենտիբոլորզույգհամարի tr թեգերը 0իցհաշված։
$(‘#moto_table tr:odd’);– Կընտրվեն
#moto_table id ունեցողէլեմենտիբոլորկենտհամարի tr թեգերը 0իցհաշված։
$(‘img:not(#div_for_img img)’);– կընտրվենբոլոր img թեգերը, բացի#div_for_img id ունեցողթեգիժառանգimg թեգից
$(‘div:has(fieldset)’);– կընտրվենայնdiv թեգերը, որոնքիրենցմեջպարունակումեն fieldset թեգը
$(‘p:contains(мотоцикл)’);- կընտրվենայն p թեգերըորոնքիրենցմեջպարունակումեն мотоцикл արտահայտությունը։
$(‘#div_for_img img:first’);-կընտրվիdiv_for_img id ունեցողթեգիառաջինimgթեգը
$(‘#div_for_img img:last’);-կընտրվիdiv_for_img id ունեցողթեգիվերջինimgթեգը
$(‘div:hidden’);– կընտրվենբոլորթաքցվածdivթեգերը
$(‘div: visibility’);– կընտրվենբոլորերևացողdivթեգերը
DOMծառիձևավորմանսպասումը
Որպեսզի javascriptիֆայլըճիշտաշխատիանհրաժեշտէ javascriptիամբողջկոդըգրելհետևյալֆունկցիայիմեջ՝
$(document).ready(function(){
});
Կամկաելիէգրելկարճ
$(function(){
});
Text(), Hide() և show() ֆունկցիաները
Text() ֆունկցիանվերադարձնումէընտրվածէլեմենտիտեքստը
Hide()ֆունկցիանանհետացնումէընտրվածէլեմենտըիրենտրվածժամանակահատվածում՝արտահայտվածմիլիվայրկյաններով
show() ֆունկցիանկրկինցուցադրումէ Hide() արվածէլեմենտըիրենտրվածժամանակահատվածումարտահայտված՝միլիվայկյաններով
Jqueryիումօկտագործվումեննաևշղթայականֆունկցիաները, դրանքայնֆունկցիաներնեն, որոնք գրվումեն 1 տողով, իրարիցկետովանջատված
myObject.hide(4000).show(5000);
Խնդիր ընտրել index.htmlի բոլոր նկարները բացի առաջինից և hide() ֆունկցիայի օգնությամբ թաքցնել դրանք 5 վայրկյանի օգնությամբ։
Էլեմենտներիբարձրությանևլայնությանփոփոխումը
width() մեթոդը վերադարձնում է ընտրված էլեմենտի լայությունը։
width() մեթոդի օգնությամբ կարելի է նաև փոփոխել ընտրված էլեմենտի լայությունը։
heght() մեթոդը վերադրաձնում է ընտրված էլեմենտի բարձրությունը։ heght() ֆունկցիայի միջոցով կարելի է նաև փոփոխել ընտրված էլեմենտի բարձրությունը։
Կոդի ներսում կոդի փոփոխում html() ֆունկցիան։
html() ֆունկցիան վերադարձնում է ընտրված էլեմենտի html կոդը։
html() ֆունկցիայի օգնությամբ կարելի է նաև փոփոխել վյալ էլեմենտի html կոդը
fadeIn() & fadeout()
fadein() ֆունկցիան թափանցիկ դարձված էլեմենտը կրկին դարձնում է ոչ թափանցիկ իրեն տրված ժամանակահատվածի ընթացքում արտահայտված միլիվայկյաներով։
fadeout() ֆունկցիան ընտրված էլեմենտը դարձնում է թափանցիկ իրեն տրված ժամանակահատվածում միլիվայկյանների ընթացքում
Խնդիր
Գրելֆունկցիա, որըստանումէ 2 պարամետր։Էլեմենտի id որըպետքէանհետանաէջիցևանհետացմանժամանակը։Երկրորդպարամետըպետքէբավարարի 2 պայմանին
- Պարամետըպետքէլինիթիվ։
- Թիվըպետքէգտնվի 500-10.000 միջակայքում, եթեթիվըայդմիջակայքիցչէ, ապապետքէընդհատվիֆունկցիայիաժխատանքըևհաղորդվիսխալիմասին։
fadeTo()ֆունկցիան
fadeTo()ֆունկցիան կարողանում է ընտրված ընտրված էլեմենտը դրաձնում է որոշակի չափով թափանցիկ, իրեն տրված ժամանակամիջոցի ընթացքում, արտահայտված միլիվայրկյաններով։
slideDown() և slideUp() ֆունկցիաները
slideUp() ֆունկցիան ընտրված էլեմենտը սահուն կերպով սեղմում է դեպի վեր իրեն տրված ժամանակահատվածի ընթացքում, արտահայված միլիվրկ.
slideDown() ֆունկցիան սեղմված էլեմենտը սահուն կերպով ինջեցնում է ներքև իրեն տրված ժամանակահատվածում։ Արտահայտված մլվրկ.
attr() և removeAttr() ֆունկցաիները
attr() ֆունկցիան վերադրաձնում է իրեն տրված ատրիբուտի արժեքը։
attr() ֆունկցիայի օգնութամբ կարելի է նաև փոփոխել իրեն տրված ատրիբուտի արժեքը։
removeAttr() ֆունկցաին ջնջում հեռացնում է իրեն տրված ատրիբուտը։
Գրել ֆունկցիա, որը ստանում է երեք պարամետր
Առաջինը այն էլեմենտի id որի հետ պետք է աշխատել
Երկրորդը՝ ատրիբուտի անվանումը որը պետք է փոփոխել
Երրորդը այդ ատրիբուտի նոր արժեքը։
Ֆունկցիան իր աշխատանքի արդյունքում պետք է փոփոխի տվյալ էլեմենտի տվյալ ատրիբուտը։
addClass() և removeClass()
addClass() ֆունկցիան ընտրված էթեմենտին տալիս է նոր Class
removeClass() ֆունկցիան ջնջում, հեռացնում է ընտրված էլեմենտին տրված Classը
css() ֆունկցիան
css() ֆունկցիան կարողանում է փոխել ընտրված էլեմենտի css հատկությունները։
Մեր էջում կա span էլեմենտ որն ունի pq class: Հեջացնել այդ էլեմենտից pq classը և ավելացնել նրան 3 css հատկություններ։
Border:1px solid;
Padding:5px;
Background:#orange;
animate() ֆունկցիան
animate() ֆունկցիանկարողանումէփոփիխելընտրվածէլեմենտիընտրվածհատկությունըտրվածժամանակահատվածիընթացքումարտահայտվածմիլիվրկ։
Խնդիր css() մեթոդիօգնությամբ moto2.jpgինավելացնելեզրագիծ 1px solid #333333,
animate() մեծացնել paddingիչափը 5px, 5 վրկիընթացքում։Որիցհետոթաքցնել headerը fadeOut() ֆունկցիայիօգնությամբ 5 վրկիընթացքում։
append(),prepend(), after() և before()
before()- մեթոդը նախան ընտրված էլեմենտը տեղադրում է նոր էլեմենտ
after()- մեթոդը ընտրված էլեմենտից հետո տեղադրում է նոր էլեմենտ
prepend()-մեթոդը տեղադրում է նոր էլեմենտ ընտրած էլեմենտի ներսում ամենասկզբում։
append()- մեթոդտը տեղադրում է նոր էլեմենտ ընտրված էլեմենտի ներսում ամենավերջում։
Խնդիր body թեգի ամենավերջում ավելացնել p որևէ տեքստով և այդ պարբերությանը տալ id=newpararaph որից հետո այդ պարբերության ֆոնի գույնը սև իսկ տեքստի գույնը սպիտակ։
each() ֆունկցիան և $(this) հասկացությունը
Եթե javascriptում զանգվածի ընթացիկ էլեմենտը նշանակում ենք myArray[i], ապա jquaryում each() մեթոդի համար ընթացիկ էլեմենտը նշանակում ենք $(this)
each() մեթոդը կիսաավտոմատ ցիկլ է, որովհետև նրա համար հաշվիչ պետք չէ, պետք է միայն պայման
Ընտրելվեբչէջիբոլորնկարներըևավելացնելմեկպիքսելհաստությամբկարմիրեզրագիծայննկարներինորոնց title ատրիբբւտումկառուսերենտտառը, բարձրությունըմեծէ 50 պիքսելից, սակայնփոքրէ 100 պիքսելից։
clone() և remove() ֆունկցիաները։
clone() ֆունկցիան ստեղծում է ընտրված էլեմենտի պատճենը
remove() ֆունկցիան էջից հեռացնում է ընտրված էլեմենտը։
$(‘img[width=“200”],a[href*=“documents”]’);
Jqueryում կարելի է ընտրել մի քանի էլեմենտ
Կարելի է էլեմենտը ընտրել ատրիբուտի առայոււթյամբ
Օրինակ՝ $(‘img[alt]’);
Այս դեպքում կընտրվեն բոլոր այն էլեմենտները որնոնք ունեն alt ատրիբուտ:
Իրադարձություններ
Javascriptիաշխատանքիսկզբունքնէ
օբյեկտ ——> իրադարձություն———>գործողություն
Գրելկոդ որը կատարում է հետևյալը
id=“moto_models” ցանկացած մոտոցիկլետի վրա click անելիս id=“mototable” աղյուսակում պետք է հայտնվի նոր տող որում հայտնվի այն էլեմենտի տեքստը որի վրա click է արվել:
Գրել կոդ որը կփոխի id=“moto_table”, աղյուսակի այն տողի գույնը #1f233c որին մոտեցրել էնք մկնիկի սլաքը, իսկ տեքստի գույնը կդառնա սպիտակ։
Hover իրադարձության և css ֆունկցիայի օկնութանմբ անել այնպես,որ отправить заявку կոճակին մկնիկի սլաքը մոտեցնելիս նրա հատկոթյոււները փոխվեն՝ ֆոնի գույնը դառնա #32375d5 տեքստի գույնը դառնա սպիտակ, երբ մկնիկի սլաքը հեռացնենք էլեմենտից ֆոնի և տեքստի գույները վերադառնան նախկին արժեքներին
Իրադարացուցյանօբյեկտիհասկացուցյունը
Իրադարցուցյանօբյեկտի screenX հատկությունըվերադարձնումէ click-արվածտեղի x-կորդինատը, մոնիտորիէկրանիձախեզրիծհաշված:
Իրադարցուցյանօբյեկտի screenY հատկությունըվերադարձնումէ click-արվածտեղի y-կորդինատը, մոնիտորիէկրանիվերինեզրիծհաշված:
Իրադարցուցյանօբյեկտի pageX հատկությունըվերադարձնումէ click-արվածտեղի x-կորդինատը, բռաուզեռիձախեզրիծհաշված:
Իրադարցուցյանօբյեկտի pageY հատկությունըվերադարձնումէ click-արվածտեղի y-կորդինատը, բռաուզեռիվերինեզրիծհաշված:
Գրելկոդորըկատարումէհետևյալը
4 մոտոներիցցանկացածիվրակլիկանելիսնրաշուրջը պետքէստեղծվի 4 պիկսելհաստությամբեզրագիծընդորում, եթեկլիկանելիս shift կոճակըսեղմվածէեղել, ապաեզրագծիկույնըպետքէլինիկարմիր, իսկեթեսեղմվածչիեղելապաեզրագծիգույնըպետքէլիինիմոխրագույն։
Էլեմենտի պահվածքի փոփոխում
Որոշ դեպքերում անհրաժեշտ է լինում փոփովել էլեմենտի ստանդարտ պահվածքը։
Էլեմենտի պահվածքը փոփոխում են իրադարձուլյան օբյեկտի preventDefault() մեթոդի միջոցով։
preventDefault() նշանակում է փոխել ստանդարտ պահվածքը։
eventObject.preventDefault();- սրա փոխարեն կարելի է գրել – return false
Գրել կոդը, որը կատարի հետևյալը id=“my_button” կոճակը սեղմելիս, ոչ թե ուղարկի ֆորմայի տվյալները, այլ հայտնվի հարց, “Դուք հաստատում եք տվյալների ճշտությունը” Այդ պատուհանում պետք է լինեն ok & cancle կոճակներ։ Եթե սեղմենք ok ապա տվյալները ուղարկեն ինչպես հարկն է, իսկ եթե սեղմենք cancle ապա ֆորմայի տվյալները չուղարկվեն։ Ցուցում հարցը տալու համար ոգտագործել confirm մեթոդը։