Friday, October 21, 2011

Javascript in Armenian | Հայերեն լեզվով |


ԾԱՆՈԹՈՒԹՅՈՒՆ Նախ ուզում եմ առանձնացնել այն փաստը, որ մեր օրերում գնալով դառնում է օրվա հարմայական սեփական վեբ կայք ունենալը, այն հնարավորինս գեղեցիկ և գրագետ ձևավորելը` անկախ այն բանից դա անձնական է, թե ներկայացնելու է ձեր կազմակերպությունը: Մեր օրերում երիտասարդները հետաքրքրվում են HTML լեզվով, 
շատերը փորձում են նաև դոմենային տիրույթներում տեղադրել կայքեր և այլն և այլն: Բայց ակնհայտ է այն փաստը, որ առանց սերվերային ծրագրավորման լեզվի, Javascript սկրիպտային ծրագրավորման լեզվի մեր ձևավորած ամենալավ կայքը անկատար է: Այն կայքը կարող է դարձնել անասելի դինամիկ և ինտերակտիվ, նույնիսկ այն ունի հնարավորություն համատեղ գործելու սերվերային ծրագրային լեզուների (php), նաև  մեր օրերում լայն կիրառություն ստացած flash լեզվի հետ: Այս բլոգում նպատակ ունենք ձեզ ներկայացնել javascript ծրագրավորման լեզուն դասընթացի տեսքով և համապատասխան օրինակներով: Ակնկալում ենք ձեր ակտիվ մասնակցությունը:
1. Javascript լեզուն կիրառելու համար ձեզանից պահանջվում է html լեզվի հիմնարար իմացություն: JS-ով գրված սկրիպտները գործում են միայն html-ային փաստաթղթերում(xml, dhtml, htm), ինտերնետային բրաուզերի պատուհանին: Դա լավ է այնքանով, որ ձեզանից չի պահանջվում ծրագրային ապահովում (օրինակ C++-ի նման), պարզապես կազմած կոդերը պետք է տեղադրել html-ի կոդերի մեջ: Իսկ JS-ով կարելի է կազմել զանազան հետաքրքիր փաստաթղթեր: JS-ի առանձնահատկություններից մեկն էլ այն է, որ կազմած կոդերը հնարավոր չէ թաքցնել, ճիշտ է կարելի է կոդավորել, սակայն դրանց վերծանումը հանարավոր է, հետևաբար կարևորագույն տեղեկություններ չի կարելի վստահել JS-ին: Թերություններից մեկն էլ այն է, որ անհանար է հստակ կանխատեսել կատարվելիք իրադարձությւնների հաջորդականությունը և հնարավոր են ծրագրային սխալներ (հատկապես եթե թույլ են տրված որոշակի թերություններ կամ բացթողումներ ):
JS-ի տեղադրման ձևը բերված է ստորև.
<html>
<head>
<title></title>
<script language="javascript" type="text/javascript">
......... ......... .........  ..........
</script>
</head>
<body>
</body>
</html>

Մենք կարող ենք  Javascrip-ները տեղադրել <HEAD> </HEAD> կամ  <BODY> </BODY> բաժիններում: Այն կարող ենք տեղադրել նաև <HEAD> և <BODY> բաժինների միջև:Բայց որոշակի նկատառումներից ելնելով ցանկալի է այն տեղադրել  HEAD բաժնում:
2.Մենք կարող ենք նաև js-ի համար սահմանել արտաքին աղբյուր, ըստ որի էլ այն կաշխատի.

<html>
<head>
<title></title>
<script src="anun.js">
......... ......... .........  ..........
</script>
</head>
<body>
</body>
</html>
Այս դեպքում <script></script>-ների մեջ ներառված կոդերը կանտեսվեն, կգործի միայն
anun.js ֆայլով նախատեսվածը: js ֆայլ դուք կարող եք ստեղծել պարզագույն տեքստային
խմբագրիչի միջոցով` ստեղծած ֆայլը անվանելով anun (սա օրինակ է, դուք կարող եք այն
անվանել ինչպես ուզում եք), սակայն անվանումից անմիջապես հետո պետք է դնել կետ և 
ավելացնել js տառերը. anun.js: Կարող եք նաև ստեղծել մի js ֆայլ և տարբեր փաստա-
թղթերից անել հղումներ միևնույն ֆայլին: Միևնույն html փաստաթղթում կարելի է 
տեղադրել  բազմաթիվ js սկրիպտներ և հղումներ: Դրանց առատությունը պարզապես
կարող է դանդաղեցնել էջի բեռնման արագությունը:
3. Այժմ անցնենք կոնկրետ օրինակներին: Ստորև բերված և ընդհանրապես այսուհետ 
ներկայացվելիք կոդերը դուք կարող եք պատճենել սովորական տեքստային խմբագրիչում,
այն պահպանելով որպես .thml ֆայլ, կամ կարող եք դրանք ուսումնասիրել մեր բլոգում
եղած HTML generator-ի միջոցով, (այն դաշտում, ուր գրված են այս տողերը. I want to have 
your comments.Best regards from Norayr Hambardzumyan. Պարզապես օգտագործեք cut և 
paste ) կոդերը տեղադրելով և Preview-ն սեղմելով:
<html>
<head>
<title>օրինակ 1</title>
</head>
<body>
<script language="javascript" type="text/javascript">
document.write("Ես սովորում եմ javascript լեզու:");
</script>

</body>
</html>

Դուք կտեսնեք, որ բացված նոր պատուհանի վրա գրված է Ես սովորում եմ javascript լեզու:
document.write-ը js-ի կարևորագույն տարրերից մեկն է: Այն նախատեսված է document օբյեկտը բրաուզերի պատուհանի վրա ներկայացնելու համար, այն կոչվում է մեթոդ (ծրագրային տերմինոլոգիայով method): Բացի write()-ից կա նաև writeln(): Փակագծերի մեջ ինչ տեքստ որ ներառենք, այն կլինի տեսանելի էկրանի վրա: Սակայն տեքստը պետք է գրել մեկ կամ կրկնակի չակերտների մեջ. ' և '  կամ " և": Տողի վերջում կետ-ստորակետի ավելացումը պարտադիր է ; Այս սինտաքսիսային կանոնի խախտումը կբերի սխալանքի. error: write()-ի միջոցով կարող ենք ներմուծել նաև HTML-ի ցանկացած տեգ:
alert, prompt , confirm 
js լեզվում բավականին տարածված էլեմենտներից են: Սրանք window օբյեկտի ինտերֆեյ-
սի այսպես ասած մեթոդներից են: Սրանց շնորհիվ բրաուզերի պատուհանին երևում է 
pop up պատուհան կամ ինչպես ընդունված է ասել մոդալական պատուհան և օգտվողը կամ այցելուն (user) պետք է կատարի ընտրություն, կամ հաստատի, որից հետո այդ պատուհանը
կփակվի:
<html>
<head>
<title>օրինակ 2</title>
</head>
<body>
<script language="javascript" type="text/javascript">
window.alert("Ես սովորում եմ javascript լեզու:");
</script>

</body>
</html>

Այս դեպքում եթե մենք սեղմենք OK-ը, ապա մոդալական պատուհանը կփակվի:

<html>
<head>
<title>օրինակ 3</title>
</head>
<body>
<script language="javascript" type="text/javascript">
window.confirm("Ես սովորում եմ javascript լեզու:");
</script>

</body>
</html>
Այս դեպքում ենթադրվում է այո կամ ոչ պատասխան:
<html>
<head>
<title>օրինակ 4</title>
</head>
<body>
<script language="javascript" type="text/javascript">
window.prompt("Ես սովորում եմ javascript լեզու:");
</script>

</body>
</html>
Այս դեպքում պատուհանի դատարկ տողում պետք է գրել տեքստ:

Javascript-ի  իրադարձություններ (events, собития)
js լեզուն մեզ տալիս է հնարավորություն ցանկացած օբյեկտի հետ կապված (ցանկացած ժամանակահատվածում) առաջ բերել նոր իրադարձություն, փոփոխություն վեբ էջում: Օրինակ
կուսորը պահել նկարի վրա, որից հետո կբացվի նոր պատուհամ, կամ կտտացնել բառի վրա, որից հետո կերևա մի նկար: Այսպիսով, Իրադարձությունը բրաուզերի պատուհանին երևացող մի գործողություն է,որը տեղի է ունենում որպես հետրևանք օգտվողի (այցելու, user) համապատասխան գործողության: Սրանք JS-ի events-ներնե են:


onabort,onactivate,onafterprint,onafterupdate,onbeforeactivate,onbeforecopy,onbeforecut,onbeforedeactivate,onbeforeeditfocus,onbeforepaste,onbeforeprint,onbeforeunload,onbeforeupdate,onblur,onbounce,oncellchange,onchange,onclick,onclose,oncontextmenu,oncontrolselect,oncopy,oncut,ondataavailable,ondatasetchanged,ondatasetcomplete,ondblclick,ondeactivate,ondrag,ondragdrop,ondragend,ondragenter,ondragleave,ondragover,ondragstart,ondrop,onerror,onerrorupdate,onfilterchange,onfinish,onfocus,onfocusin,onfocusout,onhelp,onkeydown,onkeypress,onkeyup,onlayoutcomplete,onload,onlosecapture,onmousedown,onmouseenter,onmouseleave,onmousemove,onmouseout,onmouseover,onmouseup,onmousewheel,onmove,onmoveend,onmovestart,onpaste,onpropertychange,onreadystatechange,onreset,onresize,onresizeend,onresizestart,onrowenter,onrowexit,onrowsdelete,onrowsinserted,onscroll,onselect,onselectionchange,onselectstart,onstart,onstop,onsubmit,onunload
Պետք է նաև events-ները ճիշտ օգտագործել, այսինքն համապատասխանեն օբյեկտին: Ստորև բերում ենք առավել գործածական events-ները:
onblur
onmouseover 
onchange 
onselect 
onclick 
onsubmit 
onfocus
onunload 
onload   
onblur
blur իրադարձությունը տեղի է ունենում, երբ ֆորմ-ի select-ը, text-ը կամ textarea-ն դադարում են ֆոկուս  ( focus) լինելուց: 
onchange
change իրադարձությունը տեղի է ունենում, երբ ֆորմ-ի select-ը, textը կամ textarea-ն դադարում են ֆոկուս լինելուց և դրանց արժեքները փոփոխվում են: 
onclick
click իրադարձությունը տեղի է ունենում, երբ կլիկ ենք անում որևէ օբյեկտի վրա:
onfocus
focus իրադարձությունը տեղի է ունենում, երբ դաշտը ներմուծման դառնում է ֆոկուս կլիկ անելով կամ ստեղնաշարով ինչ-որ բան գրելով:
onload
load իրադարձությունը տեղի է ունենում, երբ բրաուզերը արդեն բեռնել է էջը կամ էջում առկա ֆրեյմները: Onload-ը պետք է տեղադրել  <BODY> կամ <FRAMESET> տեգերում:
onmouseover
mouseover իրադարձությունը տեղի է ունենում, երբ կուրսորը պարզապես շարժվում է օբյեկտի վար (օրինակ երբ կուրսորը հպվում է նկարին, բառին, հիպերհղմանը (link) և այլն):
onselect
select իրադարձությունը տեղի է ունենում, երբ ընտրում ենք տեքստից հատված (text կամ textarea):
onsubmit
submit իրադարձությունը տեղի է ունենում, երբ սերվերին ենք ուղարկում ֆորմ-ում մուտքագրված տվյալներ:  
onunload
unload իրադարձությունը տեղի է ունենում, երբ  դուրս ենք գալիս օրինակ էջից: Սա ևս պետք է տեղադրել  <BODY> կամ <FRAMESET> տեգերում:
Օրինակ
   <INPUT TYPE="button" VALUE="Create" onclick="create_code(this.form)"> 
Այս օրինակի դեպքում մենք ունենք մի դաշտ( кнопка, button), որի անունն է Create: Եթե մենք կլիկ անենք դրա վրա, ապա տեղի կունենա click-ով նախատեսված իրադարձությունը, այսինքն կգործարկվի (կսկսի աշխատել) create_code անունը կրող ֆունկցիան: Մենք onclick -ի փոխարեն կարող ենք կիրառել onmouseover -ը, այդ դեպքում կուրսորի հպումը դաշտին կառաջացնի ֆունկցիայի գործարկում: Մենք միաժամանակ կարող ենք տեղադրել միքանի փոխակերպիչներ, դրանք պետք է անջատել իրարից ; -ով, այդ դեպքում դրանք կաշխատեն հաջորդաբար: 
(Ո ւ շ ա դ ր ո ւ թ յ ո ւ ն: Հայ իրականության մեջ ծրագրավորման լեզվի պատմությունը բավականին երիտասարդ է: Միևնույն հասկացությունը դուք գուցե տեսնեք տարբեր հեղինակների մոտ այլ եզրույթներով ներկայացված: Համենայն դեպս, հնարավորինս ջանում ենք օգտագործել հոմանիշ բառեր և բավականին մանրամասն նկարագրություններ:)

Ինչպես կիրառել որևէ event 
Նախ պետք է որոշել, թե որ օբյեկտի հետ պետք է կապել ցանկալի event-ը: Դրա համար պետք է գտնել համապատասխան event-ներից մեկը: Որպես օբյեկտ կարող է ընտրվել նկարը, գծապատկերը, տեքստը, տվյալների մուտքագրման ֆորմը և այլն և այլն: Ստորև բերվում է
տվյալ ընտրված օբյեկտի համար event-ի սահմանման լավագույն տարբերակը:
document.getElementById('').onClick=imfunction(){}
Այս գրության մեջ document արտահայտությունը մատնացույց է անում մեր ողջ փաստաթուղթը, սա իր մեջ ներառում է բոլոր օբյեկտները առանց բացառության: getElementById արտահայտությունը բառացիորեն նշանակում է գտնել տարրը ըստ իր Id անվանման: Իսկ () փակագծերի մեջ պետք է ներկայացնել ընտրված էլեմենտի Id անունը: 
onClick արտահայտությունը ցույց է տալիս, որ այդ էլեմենտի համար մենք սահմանել ենք onClick event-ը: Ի միջիայլոց, կարող ենք գրել onclick կամ onClick կամ էլ oncLick, սակայն շփոթություններից խուսափելու համար ունեցեք Ձեր սեփական անփոփոխ ոճը: Իսկ
onClick=function(){} գրությունը ցույց է տալիս, որ մկնիկով այդ էլեմենտի վրա կլիկ անելիս (այստեղից էլ onClick անվանումը) կաշխատի նախապես մեր կողմից կազմած մի ֆունկցիա, որի անունն է imfunction :(Այս թեմային նորից կանդրադառնանք փոփոխական և 
ֆունկցիա թեմաներից հետո):


Փոփոխականներ
Ցանկացած ծրագրավորման լեզվում կիրառվում են փոփոխականներ: Javascript լեզվի առանձնահատկություններից մեկն էլ հենց այն է, որ փոփոխականների տեսակի հայտարարման անհարժեշտություն չկա: Փոփոխականները ենթակա են հայտարարման նախապես:
var aa=15;
var bb='Es ev du!';
var cc=3.14;
var dd=true;
Բերված չորս օրինակներում մենք ունենք aa, bb, cc և dd փոփխականները: Ինչպես երևում է, ցանկացած փոփոխականից առաջ պետք է գրել var բառը, որը variable (փոփոխական) բառի կրճատ ձևն է: aa, bb, cc և dd սրանք մեր կողմից ներմուծված փոփոխականների անուններն են: Չի կարելի որպես փոփոխական օգտագործել պահեստային (ռեզերվային) 
բառեր `break, false, in, this, void, continue, for, new, true, while, delete, function, null, typeof, with, else, if, return, var,   case, debugger, export, super ,catch, default, extends, switch, 
class, do, finally, throw, const, enum, import, try: 
Փոփոխականից հետո դրվում է հավասարի նշան, եթե ուզում ենք տվյալ փոփոխականին տալ ինչ-որ արժեք: Բերված օրինակներում փոփոխականները ստացել են թվային, տեքստային, կոտորակային և բուլյան արժեքներ: Փոփոխականը կարող է սկսվել մեծատառով կամ փոքրատառով (Aa փոփոխականը նույն aa փոփոխականը չէ), փոփոխականը կարող է սկսվել
$ կամ _ նշաններով, սակայն  չի կարելի փոփոխականը սկսել թվով կամ փոփոխականի մեջ ներառել & նշանը: Տեքստային արժեքները պարտադիր պետք է գրել ' ' կամ " " նշանների միջև:









 

4 comments:

  1. JavaScript - ի վիդեո դասեր սկսնակների համար: http://www.youtube.com/watch?v=wRkLoOgLnH4&list=PLgC8m-BNxTlzDy4H1M1FSfZDvjKQmv2Op

    ReplyDelete
    Replies
    1. barev dzes mi hat vor xndrem javascripti hayeren grqi kam vidyoi tex kaseq

      Delete
    2. https://www.youtube.com/watch?v=5CR0QCx2ddQ&list=PLzn7zhYhdQE3wUMayJ0zWvijBLY54z4hB

      Delete
  2. Barev dzez, isk sharunakutyun@ vortex karox em kardal?

    ReplyDelete

Note: Only a member of this blog may post a comment.