You are on page 1of 20

1

Ուղեցույց-գրքույկի մասին

Այս գրքույկը ներառում է իր մեջ


JavaScript ծրագրավորման լեզվի միայն
հիմունքները, այսինքն բազան,
մոտավորապես 30%-ը։ Սակայն գրեթե բոլոր
էջերում առկա են մի քանի QR կոդեր, որոնք
սկանավորելով հնարավոր է ստանալ ավելի
շատ ինֆորմացիա, փորձարկել և խմբագրել
կոդը հավաստի աղբյուրների միջոցով։
Վերջում կա նաև օգտագործված աղբյուրների
ցանկ, որոնք ևս վստահելի աղբյուրներ են,
որոնցից կարելի է օգտվել։
Այս ծրագրավորման լեզվի մասին
հայերեն նյութեր գրեթե ընդհանրապես չկան
կամ վճարովի են, այդ պատճառով օգտվեք
անգլալեզու կամ ռուսալեզու աղբյուրներից։

2
JavaScript-ի մասին
ընդհանուր տեղեկություն

• Ինչո՞ւ է կոչվել JavaScript


Լեզուն կոչվել է JavaScript, քանի որ այն
սկրիպտային լեզու է՝ ունի հստակ
կառուցվածք, հիմնականում չկան
բացառություններ։

• Ինչի՞ համար են օգտագործում


JavaScript-ը:
Այս լեզուն հիմնականում օգտագործվում է
կայքէջեր(website) ստեղծելու նպատակով։
Սակայն այն նաև ընձեռում է ավելի լայն
հնարավորություններ՝ շնորհիվ իր
պարզության։

3
Կոդի խմբագրիչներ(code
editors)
• Ի՞նչ է code editor-ը
Սա այն վայրն է, որտեղ ծրագրավորողներն
անցկացնում են իրենց ժամանակի մեծ մասը 😊։
Այն նախատեսված է կոդը գրելու համար։
Տարածված code editor-ներից է IDE-ը։ Այն
հնարավորություն է տալիս ֆայլեր ներբեռնել,
իրականցնել ավտոլրացում(autofill)։ Տարածված
տեսակներից են՝
• Visual Studio Code(անվճար)
• WebStorm(վճարովի)
Windows-ի համար նախատեսված է նաև
Visual Studion, որը պետք չէ շփոթել Visual Studio
Code-ի հետ, քանի որ այն վճարովի է։
Visual Studio Code-ը, լինելով անվճար
editor, մեզ ընձեռում է լայն
հնարավորություններ՝ հատկապես վեբ-էջերի
պատրաստման համար, որն էլ մենք
ուսումնասիրելու ենք։
Հետևաբար խորհուրդ է տրվում
համակարգչի վրա ներբեռնել հենց այս editor-ը՝
լեզուն սովորելու և օգտագործելու համար։
4
Պարզ կոդի փորձարկումը
JavaScript-ում(Hello, word)
• Շնորհիվ իր ֆունկցիոնալության՝
JavaScriptը կարող է «ներդերվել» տարբեր
ծրագրավորման լեզուների մեջ՝ օրինակ HTML-
ում՝ օգտագործելով <script> tag-ը։ Պարզագույն
կոդերից մեկն է հայտարարությունը(alert
հրամանով)։ Բուն կոդը կունենա հետևյալ
տեսքը՝
<script>
alert( 'Hello, world!' );
</script>

• Կոդը կարող եք փորձարկել ինչպես նաև


ստանալ հավելյալ ինֆորմացիա՝ QR
կոդի միջոցով։

•Եթե մեր կոդերը շատ են մենք դրանք


կարող ենք պահպանել հատուկ ֆայլով։
Դրանց կցվում են HTML-ին՝ src attribute-
ի միջոցով։
Օրինակ՝ <script src="/path/to/script.js"></script>

5
Կոդի կառուցվածքը
JavaScript-ում(code structure)
Ինչպես արդեն գիտենք՝ JavaScript-ում կոդերն ունեն
հստակ կառուցվածք։ Ծանոթանանք դրանցից մի քանիսին։
• Հայտարարություններ(statements)
Մենք արդեն փորձարկել ենք հայտարարություններից
մեկը՝ “Hello, world!”։ Մենք կարող ենք նաև կոդը բաժանել
մի քանի մասի։ Օրինակ՝
alert('Hello'); alert('World');
Եթե 1ին դեպքում վեբ-էջում բացվում էր պատուհան որտեղ
գրված էր՝ Hello, world!, այս դեպքում մեզ կգան առաձին
հաղորդագրություններ՝ Hello և world:
• Ստորակետեր
Ստորակետները անբաժան մասն են այս ծրագրավորման
լեզվի։ Սակայն շատ հաճախ կարող ենք բաց թողնել
ստորակետները, երբ նոր տող ենք անցնում։ Սակայն այն
կարող է միշտ չաշխատել, հետևաբար ստորակետեր դնելը
միշտ էլ ցանկալի է։
• Մեկնաբանություններ
Ինչքան փորձառու է ծրագրավորողը, այնքան բարդ են իր
կոդերը։ Շատ հաճախ կարիք է լինում մեկնաբանել մեր
կոդերը՝ հասկանալու համար, թե որ կոդը ինչ է անում և
ինչի համար է նախատեսված։ Մեկնանաբանությունները
չեն խանգարում կոդի տեսքին, ֆունկցիաների, ուղղակի
պետք է այն օգտագործել ճիշտ կառուցվածքով։
Մեկնաբանությունները սկսվում են 2 կոտորակով՝ //
6
Փոփոխականները
JavaScript-ում(Variables)
• JavaScript-ում փոփոխականները այսպես կոչված
կոնտեյներներ են, որտեղ կարող ենք տեղեկատվություն
պահպանել։
• Փոփոխականների անունները պետք է սկսվեն տառով։
• Կարևոր է մեծատառը և փոքրատառը(X-ը և x-ը տարբեր
փոփոխականներ են)

Օրինակ՝
Եթե մեր փոփոխականների միջի տեղեկատվությունը
պետք է պարբերաբար փոխարինենք, սակայն դրանցով
գործողությունը մնա նույնը, ապա օգտագործում ենք
փոփոխականներ։ Փոփոխականները հարմար են հետևյալ
կոդի համար՝
<script> Այս դեպքում կստանանք z-ի
let x=5 արժեքը, այսինքն 6+5=11, սակայն
let y=6 կարող ենք x և y փոփոխականների
let z=x+y արժեքները փոխարինել և ստանալ
alert(z); նոր տվյալ
</script>

Եթե մի փոփոխականին 2 անգամ ենք վերագրում արժեք,


ապա այն պահպանում է միայն վերջինը:
Կան 3 փոփոխականներ՝ var, let և const: Var-ը հնացած
տարբերակ է, իսկ const-ը ենթակա չէ փոփոխման, այսինքն
առավել կիրառելի է let-ը։ 7
Տվյալների տեսակները
JavaScript-ում(Data types)
JavaScript-ում կան տվյալների 8 տեսակ՝ string,
number, bigInt, Boolean, null, undefined, object, symbol:
• String` ամենաշատ կիրառելիներից մեկը՝
թարգմանաբար նշանակում է տող, այսինքն տեքստ, որը
գրվում է չակերտների մեջ։
Օրինակ՝ let str = "Hello"; տարբերություն չկա “ և '
միջև
String-ում կիրառելի ֆունկցիաներից է նաև ${…}։
Այն հնարավորություն է տալիս ներդնել այլ փոփոխական։
Օրինակ՝
let name = "John";
alert( `Hello, ${name}!` ); // Hello, John!
• Number ` թվային տիպ
Օրինակ՝ let n = 123;
n = 12.345;
Այն կարող է ներառել թե՛ ամբողջ, թե՛
տասնորդական թվեր։ BigInt-ը կատարում է նույն
ֆունկցիաները, բայց նախատեսված է ավելի մեծ թվերի
համար։
• Boolean՝ վերադարձնում է մեզ true կամ false
հաղորդագրությունները։
Օրինակ՝ let isGreater = 4 > 1;
alert( isGreater );
Կստանանք true, քանի որ 4ը մեծ է 1ից։
8
Տվյալների տեսակները
JavaScript-ում(Data types)
• Null` իրենից ներկայացնում է ոչինչ,
զրոյական արժեք։ Օրինակ՝ let age=Null;
Այսինքն տարիքն անհայտ է, չի պարունակում
ոչինչ։

• Undefined` երբ փոփոխականին որևէ արժեք


չի տրվում, ապա ստանում ենք undefined
հաղորդագրությունը, այսինքն որոշված չէ։
Օրինակ՝ let age;
alert(age); // shows "undefined"

• Symbols and objects`Օբյեկտները և սիմվոլները


համարվում են ամենակարևորներից
տվյալների տիպերում։ Մյուս բոլոր տիպերը
համարվում են պրիմիտիվ, քանի որ
պարունակում են տող կամ թիվ, իսկ
օբյեկտներն ավելի ֆունկցիոնալ են, որոնց
մասին կարող եք ստանալ հավելյալ
ինֆորմացիա՝ սկանավորելով QR կոդը։

9
Մարդ-համակարգիչ շփման
ֆունկցիաները JavaScript-ում
(Interactions)
•Alert` այս ֆունկցիան արդեն փորձարկել ենք։ Այն ցույց
է տալիս հաղորդագրություն և ակնկալում է ok
պատասխանը։
Օրինակ՝ alert(“Hello”);

•Prompt` այս ֆունկցիայի միջոցով բացվում է


պատուհան ինչ-որ հարցով, որը ունենում է նաև
հուշում։
Օրինակ՝ let age = prompt('How old are you?', 100);
alert(`You are ${age} years old!`); // You are 100 years old!
Այս դեպքում կբացվի պատուհան, որտեղ կլինի հարց՝
How old are you? և կլինի հուշում-պատասխան՝ գրված 100։
Եթե թողնենք այդպես, ապա կլինի՝ You are 100 years old:
Սակայն մենք կարող ենք նաև փոփոխել, օրինակ՝ նշել 15։
Քանի որ մեր alert հրամանում ունենք փոփոխականով՝ ${age},
ապա 15 նշելու դեպքում, կստանանք՝ You are 15 years old

• Confirm` Այս ֆունկցիայի միջոցով բացվում է


պատուհան ինչ-որ հարցով և ok/cancel
պատասխաններով։ Ok սեղմելու դեպքում կստանանք
true հաղորդագրությունը, cancel-ի դեպքում՝ false:
Օրինակ՝ let isBoss = confirm("Are you the boss?");
alert( isBoss ); // true if OK is pressed
10
Հիմնական օպերատորները
JavaScript-ում (basic operators)
Դպրոցից մենք գիտենք մի քանի օպերատորներ, օրինակ՝ +-
*/ և այլն։ JavaScrpt-ում օպերատորները լինում են թ տեսակի՝
միատարր և երկտարր/բազմատարր։
• Միատարր են բոլոր այն օպերատորները, որոնք
պարունակում են 1 թիվ կամ տառ։
Օրինակ՝ let x = 1;
x = -x;
alert( x ); // -1
• Երկտարր են բոլոր այն օպերատորները, որոնք
պարունակում են 2 կամ ավելի տառ/թիվ։
Օրինակ՝ let x = 1, y = 3;
alert( y - x ); // 2

Մաթեմատիկական օպերատորներից գումարումը, հանումը,


բազմապատկումն ու բաժանումը հեշտ է պատկերացնելը։ Մի
փոքր ավելի բարդ են աստիճանի բարձրացումը և մնացորդը։
• Աստիճանի բարձրացում (a**b=ab)
Օրինակ՝ alert( 2 ** 2 ); // 2² = 4
alert( 2 ** 3 ); // 2³ = 8
alert( 2 ** 4 ); // 2⁴ = 16
• Մնացորդ` չնայած նշանը % է, այն կապ չունի
ընդհանրապես տոկոսի հետ։ a%b ցույց է տալիս a թիվը b-ին
բաժանելիս մնացորդի քանակը։
Օրինակ՝alert( 5 % 2 ); // 1
alert( 8 % 3 ); // 2
alert( 8 % 4 ); // 0
11
Number-ի փոխարինումը
string-ով JavaScript-ում

Դիտարկենք մի քանի օրինակ՝


• alert(1+2)//3
• alert(“1”+2)//12
• alert(“1”+”2”)//12
• alert(2+2+”1”)//41
• alert(“1”+2+2)//122

• Մաթեմատիկական գործողություններ
փոփոխականներով՝
let n = 2;
n += 5; // n = 7
n *= 2; // n = 14
alert( n ); // 14

12
Համեմատումները
JavaScript-ում(Comparisons)
Դրանք JavaScript-ում լինում են հետևյալ կերպ՝
• a>b, a<b, մեծ/փոքր
• a>=b, a<=b, մեծ կամ հավասար/փոքր կամ հավասար
• a==b հավասար, քանի որ = վերագրումն է
• a!=b, հավասար չէ
Այս ամենի արդյունքը Boolean-ն է լինում՝ true/false
Օրինակ՝ alert( 2 > 1 ); // true
alert( 2 == 1 ); // false
alert( 2 != 1 ); // true

2 string-ների համեմատում
• Եթե համեմատում ենք բառեր, ապա JavaScript-ն այն
համեմատում է տառ առ տառ՝ ըստ այբբենական
հաջորդականության։
Օրինակ՝ alert( 'Z' > 'A' ); // true
alert( 'Glow' > 'Glee' ); // true
alert( 'Bee' > 'Be' ); // true

Կարող ենք համեմատել նաև տվյալների տարբեր


տիպեր։ Օրինակ՝ string և number

13
Պայմանի ստուգումը
JavaScript-ում(If…)
Պայմանի ստուգումը մեզ հնարավորություն է տալիս
երկխոսական պատուհանի միջոցով տալ հարցը և
համապատասխան պատասխանի դեպքում կատարել
համապատասխան գործողություն։ Օրինակ տալիս ենք հարցը In
which year was the ECMAScript-2015 specification published?։ Ճիշտ
պատասխանն է 2015։ Եթե մուտքագրվում է 2015, ապա ցանկանում
ենք ստանալ You guessed it right!: Ուրիշ այլ արժեքների դեպքում՝
'How can you be so wrong?' հաղորդագրությունը։
Կոդը կունենա հետևյալ տեսքը՝
let year = prompt('In which year was the ECMAScript-2015 specification
published?', '');
if (year == 2015) {
alert( 'You guessed it right!' );
} else {
alert( 'How can you be so wrong?' )

Այս կոդը միայն ՝ պայմանի համար էր, սակայն կարող ենք


ունենալ 1ից ավելի պայմաններ օգտագործելով else if հրամանը։
Օրինակ՝ let year = prompt('In which year was the ECMAScript-2015
specification published?', '');
if (year < 2015) {
alert( 'Too early...' );
} else if (year > 2015) {
alert( 'Too late' );
} else { 14
alert( 'Exactly!' );
}
Տրամաբանական
օպերատորները JavaScript-
ում(logical operators)
Հիմնական օպերատորները 2ն են՝ ||` կամ, &&՝ և։
• ||(կամ)
Եթե 2 արտահայտություններից անգամ մեկն էլ ճիշտ է,
ապա ստանում ենք true հաղորդագրությունը։ Այսինքն կա 4
դեպք՝
alert( true || true ); // true
alert( false || true ); // true
alert( true || false ); // true
alert( false || false ); // false
• Օրինակ ժամը 9ն է, և խանութն աշխատում է 10․00-18․00,
այսինքն ժամը 9ին խանութը փակ է։ Կոդը կունենա հետևյալ
տեսքը՝
let hour = 9;
if (hour < 10 || hour > 18) {
alert( 'The office is closed.' );
• &&(և)
Այս դեպքում պետք է 2 արտահայտություններն էլ ճիշտ
լինեն, որպեսզի ստանանք true հաղորդագրությունը։ Կրկին
ունենք 4 դեպք՝
alert( true || true ); // true
alert( false || true ); // false
alert( true || false ); // false
alert( false || false ); // false 15
While և for loop-երը
JavaScript-ում
• Շատ հաճախ մենք ստպված ենք լինում կրկնել մի քանի
անգամ նույն գործողությունը։ Որպեսզի մի կոդը մի
քանի անգամ չգրենք, ստեղծվել են while և for loop-երը։

• While loop-ը՝ while loop-ի համար կարող ենք ասել, որ


այն աշխատում է այնքան ժամանակ, մինչև կոդը ճիշտ է։

Օրինակ՝ let i = 0;
while (i < 3) { // ցույց կտա 0, հետո 1, հետո 2
alert( i );
i++;
}

• For loop-ը նման է while-ին, ուղղակի այն ունի ավելի


հստակ կառուցվածք։ Տեսնենք օրինակով․

Օրինակ՝for(let i = 0; i < 3; i++){ //ցույց կտա 0,հետո1,հետո 2


alert(i);
}

Աղյուսակի միջոցով տեսնենք կոդի կառուցվածքը՝


Begin let i=0
Condition i<3
Body alert(i)
step i++
16
Ի՞նչ կարող ենք ստեղծել
այսքանից հետո
Form registration

Ժամացույց

Քուիզ
Հաշվիչ

17
Վստահելի աղբյուրներ և
առաջադրանքներ

• JavaScript.info

• Developer.mozilla,org

• W3schools

18
Բովանդակություն
Ուղեցույց-գրքույկի մասին------------------------------2

Ընդհանուր տեղեկություն-------------------------------3

Code editors------------------------------------------------4

Hello, word!------------------------------------------------5

Code structure---------------------------------------------6

Variables---------------------------------------------------7

Data types--------------------------------------------------8

Interactions-----------------------------------------------10

Basic operators--------------------------------------------11

Number---String-----------------------------------------12

Comparisons----------------------------------------------13

If----------------------------------------------------------14

Logical operators-----------------------------------------15

While and For--------------------------------------------16

Ծրագրեր-------------------------------------------------17

Վստահելի աղբյուրներ---------------------------------18
19
Լիլիա Գրիգորյան

JavaScript ծրագրավորման
լեզու սովորելու ուղեցույց-
գրքույկ
/հիմունքներ/

Տպաքանակը՝ 5
2023

20

You might also like