آموزش مقدماتی جاوااسکریپت

در این مطلب قصدا داریم جاوا اسکریپت را به زبان ساده آموزش دهیم.

محتوا
  1. 1 به چه چیزهایی نیاز خواهیم داشت؟
  2. 2 ساخت یک فایل جاوااسکریپت
  3. 3 داده ها و متغییر ها در جاوااسکریپت
  4. 4 فانکشن Function در جاوااسکریپت
  5. 5 Scope در جاوااسکریپت
  6. 6 کار با شی‌ء Object در جاوااسکریپت
  7. 7 چگونه شئ ایجاد کنیم
  8. 8 آرایه ها در جاوااسکریپت
  9. 9 شرط‌ها در جاوا اسکریپت
  10. 10 حلقه‌ها در جاوااسکریپت
    1. 10.1 حلقه while
    2. 10.2 حلقه do ,while
    3. 10.3 شئ window
  11. 11 IIFE چیست
  12. 12 Confirm dialog در جاوااسکریپت
  13. 13 شئ document در جاوااسکریپت
  14. 14 ساخت Element و Attributes در جاوااسکریپت
  15. 15 دادن استایل به المنت ها در جاوااسکریپت
  16. 16 تایمر و انیمیشن در جاوااسکریپت

به چه چیزهایی نیاز خواهیم داشت؟

ویرایش‌گر متن (Text Editor):

شما می‌توانید از هر نوع نرم‌افزار ویرایش‌گر متنی که دوست دارید استفاده کنید مانند: Notepad ویندوز و یا ویرایش‌گرهای حرفه‌ای‌‌تر، ما به شما Visual Studio Code و Atom را پیشنهاد می‌دهیم.

مرورگر:

اگر از آخرین ورژن مرورگر مورد نظر خود استفاده می‌کنید مشکلی نیست. اما ممکن است کدی که می‌نویسید برای ورژن‌های پایین‌تر به درستی کار نکند، پس مراقب باشید.

به یاد داشته باشید، که صفحه HTML از بالا به پایین خوانده می‌شود، مرورگر از بالای صفحه شروع به خواندن می‌کند، زمانی که به اسکریپت ما می‌رسد آن را اجرا می‌کند.

بنابر این می‌توانیم اسکریپت خود را در پایین body قرار دهیم تا سرعت لود شدن محتوای سایتمان افزایش یابد و بعد جاوا اسکریپتمان پردازش شود.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>

<script>alert('Salam man JavaScript hastam');</script>
</body>
</html>

ساخت یک فایل جاوااسکریپت

برای ساخت فایل شما کافیست فایلی با پسوند js بسازید، مانند salam.js سپس کد خود را وارد کنید:

alert("Salam,man java script hastam");

بعد از ساخت فایل، آدرس آن را در فایل html خود وارد کنید.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>

<script src="salam.js"></script>
</body>
</html>

داده ها و متغییر ها در جاوااسکریپت

به کدی که قبلا نوشتیم دقت کنید، چیزی که داخل alert قرار دادیم یک داده است که در برنامه نویسی به آن رشته یا String می‌گویند، برای ساخت رشته‌، ما آن را بین علامت دونقل قول قرار می‌دهیم مانند:

“salam man java script hastam“

همین الان یک رشته ساختیم.

با علامت نقل قول تکی هم می‌توانیم یک رشته ایجاد کنیم، مانند:

‘salam man java script hastam’

اما به یاد داشته باشید اول و آخر رشته باید با یکی از این علامت‌ها باشد، نمی‌توان شروع رشته با علامت نقل قول تکی و پایان آن نقل قول دوتایی باشد.

حال اگر بخواهیم داده خود را در حافظه ذخیره کنیم تا به جای هر بار نوشتن salam یک بار آن را بنویسم و در قسمت‌های دیگر برنامه نیز استفاده کنیم، راه حل چیست؟

باید از متغیر یا variable استفاده کنیم، متغیر شبیه یک جعبه در حافظه است.

برای ساخت متغیر در java script از کلمه کلیدی var استفاده می‌کنیم، به یاد داشته باشید که نمی‌توانید نام متغییر را با عدد شروع کنید، در آخر یک سیمی کالن ; می‌گذاریم و همیشه همیشه همیشه به یاد داشته باشید که سیمی کالن بگذارید.

var myVariable;

خب ما متغیر خود را معرفی کردیم یا به اصطلاح declared variable انجام شد. اما متغییر ما هنوز مقداری ندارد، به صورت پیش فرض جاوااسکریپت به آن مقدار undefined را می‌دهد، یعنی تعریف نشده. برای مقدار دهی اولیه، ابتدا نام متغییر را می‌نویسیم سپس علامت مساوی بعد از آن مقداری که می‌خواهیم درون متغییر قرار گیرد و در انتها علامت ;

myVariable = "salam , man js hastam" ;

به اولین کد variable declaration یا معرفی متغیر و به خط دوم variable initialization مقدار دهی اولیه متغیر می‌گویند.

درون متغییر مقداری را قرار دادیم، اکنون می‌توانیم آن را به یک فانکشن بدهیم، مانند:

alert(myVariable);

عمل تعریف و مقدار دهی اولیه را می‌توان در یک خط هم نوشت:

var myVaribale = “salam , man js hastam “ ;

اگر دقت کرده باشید من در نام گذاری متغیر از روش camelCase استفاده کردم، پیشنهاد می‌کنم شما نیز از این روش استفاده کنید، این روش پیشنهادی جاوااسکریپت نیز هست. به یاد داشته باشید که جاوا اسکریپت Case sensitivity است، یعنی به نحوه نوشتار ما حساس است.

مثال:

var helloWorld ="salam" ;

با

var heLLoWorld ="salam JS " ;

متفاوت است و در اینجا شما دو متغییر متفاوت با دو مقدار متفاوت در آنها دارید.

سه نوع داده دیگر نیز در جاوااسکریپت وجود دارد، عدد یا number، بولی یا بولین می‌باشد.

var dah = 10 ;
var pi = 3.14 ;
var isBoolean = false;

در این قسمت شما با 3 نوع داده اصلی (رشته ، عدد ، بولی) و نحوه‌ی تعریف آنها آشنا شدید.

var salamDonya = "Hello, World" ;
alert(salamDonya);

قبل از شروع بهتر است با دو علامت برای نوشتن توضیحات در جاوااسکریپت آشنا شوید. برای کامنت کردن یک خط از // استفاده میکنیم. و برای کامنت کردن چند خط از /**/ استفاده میکنیم.

مثال:

var email =" jj@gamil"; // salaaaam
/*
Alan
Chand
Khat
Commnet shod.
*/

از این علامت‌ها برای نوشتن توضیحات در مورد قطعه کدهای خود استفاده می‌کنیم، کامنت‌ها پردازش نمی‌شوند.

حالا نوبت عملگرهاست:

var majmu = 4 + 5; // 9

در کد بالا 4 با 5 جمع شده و جواب آن در متغییر majmu قرار داده می‌شود.

var menha = 4 - 5; // -1

دراینجا عمل تفریق انجام می‌شود و جواب در menha قرار می‌گیرد. ما می‌توانیم این دو استیتمنت را در یک استیتمنت بنویسم.

var majmu = 4 + 5,
menha = 4 - 5,
taghsim = 4 / 5,// 0.8
zarb = 4*5; //20

حالا به کد زیر دقت کنید:

var olaviat = 4 + 5 * 6 - 8; // 26

در کد بالا عملگرها بر اساس اولویتشان عمل می‌کنند، یعنی اول 6*5 بعد حاصل ضرب با 4 جمع می‌شود و در آخر حاصل جمع 8 تا ازش کم می‌شود، و جواب 26 خواهد بود.

می تونیم این اولویتها را دست کاری کنیم، با قرار دادن آنها در پرانتز:

var olaviat = 4 + 5 * (6 - 8); //-6

همان طور که می‌بینید حاصل کد بالا 6- می‌شود، چون ابتدا عمل 8-6 انجام می‌شود، حاصل تفریق ضرب در 5 و حاصل ضرب با 4 جمع می‌شود.
حالا نوبت رشته‌ها می‌رسد، برای اتصال دو رشته با هم چه کاری باید انجام داد؟

به اتصال دورشته concatenation گفته می‌شود مانند:

var salam = "salam"+", "+"JavaScript"; // salam, JavaScript

برای اتصال رشته‌ها به هم از علامت + استفاده می‌‌شود و می‌توان چندین رشته را به هم متصل کنیم. اگر بخواهیم با عدد و رشته کار کنیم چه باید کرد؟

var test = 4 + 5 + "7";//97

جواب کد بالا چه خواهد بود؟ 97 .

در این حالت ابتدا 5+4 انجام می‌شود و حاصل جمع این دو یعنی 9 تبدیل به یک رشته شده و به رشته 7 متصل می‌شود و جواب پایانی ما 97 خواهد بود.

var test = "7" + 4 + 5; //745

در این حالت اعداد رو به روی رشته 7 به رشته تبدیل شده و به رشته 7 متصل می‌شوند و هیچ وقت 4 و 5 به صورت ریاضی باهم جمع نخواهند شد.

var test = 4 + 5 + "7" + 4 + 5; //9745

جواب کد بالا نیز 9745 است.

در این بین شما فهمیدید که چگونه عدد را به رشته تبدیل کنید، با اتصال آن به یک رشته.

var test = 7 + "";

جواب رشته 7 خواهد بود، حالا اگر بخواهیم رشته را به عدد تبدیل کنیم چه کاری باید انجام داد؟

از فانکشنی به نام parseInt استفاده می‌کنیم، مانند:

var test = parseInt("36",10);

در کد بالا رشته 36 را به فانکشن مورد نظر می‌دهیم و تبدیل به رشته می‌شود، اما 10 چیست؟

این فانکشن آرگومان دیگری را نیز می‌پذیرد، این آرگومان تعیین می‌کند عمل تبدیل بر چه اساس انجام شود، هگزادسیمال ، باینری و….

در اکثر موارد می‌خواهیم Base10 باشد، یعنی 1 و 2 و 3 و 4 و 5 و 6 و 7 و 8 و 9 و 10 به کد زیر دقت کنید:

var test = parseInt("36s45",10);

در این حالت فانکشن، اول به 3 نگاه می‌کند و می‌گوید درست است؛ بعد به کاراکتر بعدی یعنی 6 و این هم درست است. و اما کاراکتر سوم ینی s این درست نیست، در اینجا خارج می‌شود و فقط 36 چاپ می‌شود و اگر کد ما چنین چیزی باشد.

var test = parseInt("s",10);

در این حالت جواب ما NaN خواهد بود، یعنی Not a Number و اگر رشته ما اعشاری است مانند “3.14” باید از parseFloat استفاده کنیم.

فانکشن Function در جاوااسکریپت

فانکشن parseInt در قسمت اول را بیاد دارید؟ یک رشته را می‌گرفت و به عدد تبدیل می‌کرد، برای این کار ممکن است 50 خط کد نوشته شده باشد، اگر هر با که بخوایم رشته را به عدد تبدیل کنیم 50 خط کد بنویسم، کدی طولانی ایجاد خواهد شد همچنین ممکن است خطای نوشتاری در کد شما ایجاد شود، برای جلوگیری از این موارد از فانکشن استفاده می‌کنیم، یک بار فانکشن را می نویسیم و چندین بار به راحتی استفاده می‌کنیم .

مثال :

var hooman = 5 + 4;
hooman = hooman + 1;
hooman = hooman * 2;

var pouria = 3 + 4;
pouria = pouria + 1;
pouria = pouria * 2;

همان طور که می‌بینید در کدهای بالا کاری تکراری انجام می‌شود، یک عدد می‌گیریم با 4 جمع می‌کنیم بعد با 1 و در آخر آن را در 2 ضرب می‌کنیم.
بیاید برای این کارهای تکراری یک فانکشن بنویسیم، برای نوشتن فانکشن از کلمه کلیدی function استفاده می‌کنیم.

مثال :

var hooman = pouriaVaHooman(5);

var pouria = pouriaVaHooman(3);

function pouriaVaHooman(meghadareAval) {

meghadareAval = meghadareAval + 4;
 meghadareAval = meghadareAval + 1;
 meghadareAval = meghadareAval * 2;

}

alert(hooman);
alert(pouria);

همان طور که در بالا می‌بینید، ابتدا از کلمه کلیدی فانکشن استفاده کردیم، یک نام به دلخواه به فانکشن دادیم و در داخل پرانتز یک متغییر با نام دلخواه گذشتیم، چرا چون می خواهیم یک عدد به فانکشن بدهیم، متغییر هومن و پوریا را همان طور که می‌بینید تغییر دادیم و در آخر با alert مقدار را چاپ کدیم .
اگر کد بالا را استفاده کنید می‌بینید که برای شما undefined چاپ می‌شود ، اما چرا ؟
چون فانکشن جوابی به ما نمی‌دهد، یا به اصطلاح داده‌ای را به ما بر نمی‌گرداند، برای رفع این مشکل می‌توان چنین کاری کرد:

function pouriaVaHooman(meghadareAval) {

meghadareAval = meghadareAval + 4;
 meghadareAval = meghadareAval + 1;
 meghadareAval = meghadareAval * 2;
 return meghadareAval;

}

در کد بالا از کلمه کلیدی return استفاده کردیم، حال فانکشن داده درون متغییر “مقدار اول” را به ما بر می‌گرداند، حال می‌توانید خروجی را ببینید 20 و 16

این نکته را به خاطر داشته باشید، در جاوا اسکریپت فانکشن‌ها مانند داده‌ها هستند، می‌توان آنها را به متغییرها داد. شاید کمی عجیب باشد، اما می‌توان یک فانکشن ساخت و آن را به یک تغییر داد . پس نیاز داریم تا فانکشن بالا را یک بار دیگر بنویسیم، فانکشن بالا را به شکل یک anonymous function می‌نویسیم.

var pouriaVaHooman = function (meghadareAval) {

meghadareAval = meghadareAval + 4;
 meghadareAval = meghadareAval + 1;
 meghadareAval = meghadareAval * 2;
 return meghadareAval;

};

var hooman = pouriaVaHooman(5);

var pouria = pouriaVaHooman(3);

alert(hooman);
alert(pouria);

دقت کنید که متغییرهای پوریا و هومن بعد از انانیموس فانکشنمان باشند، علت را در مباحث بعد خواهیم گفت. ممکن است این سوال برای شما پیش بیاید، اکنون که می‌توانیم فانکشن را در متغییر قرار دهیم، آیا می‌توانیم فانکشن را در فانکشن قرار دهیم ؟ بله می‌توانیم .
فانکشن قبلی را تغییر می‌دهیم:

var pouriaVaHooman = function (meghadareAval, meghdareDo, fn) {

meghadareAval = meghadareAval + 4;
 meghadareAval = meghadareAval + 1;
 meghadareAval = meghadareAval * 2;
 
 return fn(meghadareAval, meghdareDo);

};

function sum(avali, dovomi) {

return avali + dovomi;
}

var hooman = pouriaVaHooman(5, 2, sum);

var pouria = pouriaVaHooman(3, 2, function (meghdareAval, meghdareDo) {
 return meghdareAval * meghdareDo;
});

alert(hooman);
alert(pouria);

Scope در جاوااسکریپت

اسکوپ یا حوزه یا قلمرو یکی از قسمت‌های بسیار مهم جاوا اسکریپت است، به این خاطر که به ما نشان می‌دهد کدام قسمت‌ از کد می‌تواند به قسمت‌های دیگر دست‌رسی داشته باشد.
Scope ها لول بندی می‌شند و بالاترین لول Global scope است، Global scope به صورت عمومی قابل دسترس است، اگر فانکشن یا متغییری در آن تعریف شود، می‌توان در هر قسمت از کد به آن فانکشن یا متغییرها دست‌رسی داشت.

به خاطر داشته باشید که Global scope اسکوپ پیش‌فرض است.

در کدهای قبل، تمام فانکشن‌ها و متغییرها در Global Scope بودند، حتی alert هم یک فانکشن گلوبال است.

برای درک بهتر این موضوع به کد زیر دقت کنید .

var globalVar = "in yek moteghayer globa ast.";

var globalFuncton = function () {
 alert(globalVar);
 globalVar = "dade taghir karde ast";
};

globalFuncton(); // in yek moteghayer global ast.
alert(globalVar); // dade taghir karde ast

در کد بالا یک متغییر عمومی به نام globalVar داریم، برای تعریف متغییر عمومی کافی است آن را خارج از فانکشن بنویسید.

یک فانکشن به نام globalFunction نیز وجود دارد، چون داخل هیچ فانکشن دیگری نسیت، پس آن هم گلوبال یا عمومی است، داخل فانکشن، اول alert صدا زده می‌شود و چون alert یک فانکشن گلوبال است پس می‌توان آن را در داخل یک فانکشن دیگر صدا زد و alert مقدار متغییر globalVar را چاپ می‌کند globalVar همان طور که گفتیم یک متغییر عمومی است پس داخل فانکشن قابل دسترس است .

در خط بعد ما یک مقدار جدید به متغییر عمومی خود می‌دهیم، چون متغییر عمومی است می‌توان به آن مقدار داد یا از آن مقداری گرفت get یا set کرد.

سپس اول فانکشن را صدا می‌زنیم، در این جا مقدار اولیه چاپ می‌شود سپس مقدار تغییر می‌کند، و در خط بعد یعنی alert(globalVar) مقدار جدید چاپ می‌شود.

پس به متغییرها و فانکشن های عمومی می‌توان درهر کجا از برنامه دسترسی داشت، scope یا حوزه بعدی local ( or functional ) scope است.

متغییر محلی متغییر یا فانکشنی است که در داخل یک فانکشن دیگر تعریف می‌شود و به این متغییرها یا فانکشن‌ها نمی‌توان از خارج فانکشن دسترسی داشت، برای مثال به کد زیر دقت کنید :

var globalVar = "in yek moteghayer globa hast.";

var globalFuncton = function () {

var localVar = " in yek moteghayer mohali ast.";
 alert(localVar);
 globalVar = "dade taghir karde ast";

};

globalFuncton();
alert(localVar); // not defiend
alert(globalVar);

ما یک متغییر محلی به نام localVar در داخل فانکشن ایجاد کردیم سپس، سعی کردیم از خارج فانکشن به آن دسترسی داشته باشیم با دستور alert(localVar); ، اگر مرورگر را رفرش کنید می‌بینید که فقط عبارت in yek moteghayere mohalist چاپ می‌شود، و دیگر هیچ .

چرا ؟ چون در alert(localVar) ما ، localVar ، not defiend است، چون این یک متغییر محلی است که ما تلاش داشتیم از خارج به آن دسترسی داشته باشیم، اما می‌توانیم در داخل فانکشن مربوطه به آن دسترسی داشته باشیم و این موضوع در مورد پارامتر ها هم صادق است.
مثالی از فانکشن محلی :

var globalVar = "in yek moteghayer globa hast.";

var globalFuncton = function () {
var localFunction = function () {

var superLocalVar = "salam , JavaScript";
alert(superLocalVar); // salam , JavaSctipt

};

localFunction();
alert(superLocalVar);// not defiend
};

globalFuncton();
alert(superLocalVar);
alert(globalVar);

اگر این کد را اجرا کنیم پیغام salam , JavaScript نمایش داده می‌شود، اما بقیه نه، چرا؟

چون ما سعی کردیم به superLocalVar از خارج دسترسی داشته باشیم و این امکان پذیر نیست .

مثالی دیگر :

var globalVar = "in yek moteghayer globa ast.";

var globalFunction = function (paramOne) {

var localVar = "in yek moteghayer mohali ast.";

var localFunction = function () {

var superLocalVar = "salam , JavaScript";
alert(superLocalVar);
alert(localVar);
alert(paramOne);
alert(globalVar);

};

localFunction();
};

globalFunction(3);

در مثال بالا می‌بینید که localFunction می‌تواند به تمام متغییرها فانکشن‌های عمومی دسترسی داشته باشد و آنها را چاپ کند.

پس ما متوجه شدیم، داخلی‌ها می‌توانند خارجی‌ها را ببینند، اما خارجی‌ها نمی‌توانند داخلی‌ها را ببینند، یعنی داخل localFunction می‌توان به تمام متغییر ها و فانکشن‌های عمومی دسترسی داشت اما فانکشن‌ها و متغییر‌هایی که خارج از localFunction هستند نمی‌توانند مستقیما به متغییرها و فانکشن های داخل localFunction دسترسی داشته باشند.

کار با شی‌ء Object در جاوااسکریپت

آبجک‌ها دارای خواص و رفتار (Properties , Methods) هستند،اجازه دهید با یک مثال آن را بهتر درک کنیم، یک صندلی را تصور کنید، صندلی یک Object است، ممکن است دارای رنگ مشکی باشد یا دارای 4 چرخ باشد و … اینها پراپرتی‌ها یا خواص صندلی هستند، اما متدها،صندلی ما چرخ دار بود پس حرکت کردن به سمت جلو، حرکت کردن به سمت عقب و… این موارد رفتارها یا همان متدها هستند.

به کد زیر دقت کنید :

var obj = "In yek sheye az noe reshte ast",
lenght = obj.length; //30

var index = obj.indexOf("yek");//3
var index2 = obj.indexOf("ye", index + 1);//10
var index3 = obj.indexOf("in");//-1

همان طور که مشاهده می‌کنید، آبجکتی به نام obj داریم که یک رشته داخل آن قرار گرفته است، قبلا گفتیم که اشیا دارای متد و پراپرتی هستند. حال می‌خواهیم از آنها استفاده کنیم.

متدها و پراپرتی‌هایی که در این قسمت استفاده می‌کنیم، مربوط به کار با آبجک‌هایی از نوع رشته می‌باشند.

متغییری به نام length ساختیم سپس از پراپرتی length برای گرفتن طول رشته استفاده کردیم، طول رشته ما 30 کاراکتر است، به یاد داشته باشید که شمارش از 0 شروع می‌شود.
در کار با رشته‌ها ممکن است بخواهیم موقعیت یک کلمه یا یک حرف را پیدا کنیم، برای این کار مانند کد بالا ازمتد indexOf استفاده می‌کنیم، به یاد داشته باشید که بزرگ و کوچک بودن حروف مهم است، برای همین وقتی موقعیت in را خواستیم به ما 1- نشان می‌دهد، یعنی چنین چیزی وجود ندارد.

وقتی از indexOf استفاده می‌کنیم، شمارش و جستوجو از سمت چپ شروع می‌شود، وقتی به اولین کاراکتر مشابه برسد شماره خانه آن را بر می‌گرداند.

حال اگر بخواهیم جستوجو از سمت راست به چپ باشد چطور باید عمل کنیم؟

برای این کار از lastIndexOf استفاده می‌کنیم .

var index4 = obj.lastIndexOf("ye");//10

اگر بخواهیم قسمتی از رشته را ببریم، چه کاری باید انجام دهیم؟ برای این کار از متد substr استفاده می‌کنیم به شکل زیر:

var obj = "In yek sheye az noe reshte ast",
lenght = obj.length; //30

var boresh = obj.substr(0,2);

alert(boresh);

اگر کد بالا را در مرورگر خود اجرا کنید، می‌بینید که کلمه In نمایش داده خواهد شد.

در substr اولین عدد موقعیت شروع برش است و دومین عدد مشخص می‌کند چه تعداد کاراکتر باید از موقعیت شروع بریده شود، در مثال بالا من می‌خواستم از ایندکس 0 برش شروع شود و دو کاراکتر جدا کند.

من می‌توانم کدرا به این شکل نیز بنویسم، فرض کنید می‌خوام رشته noe را جدا کنم .

var index6 = obj.indexOf("noe");//16
var boresh2 = obj.substr(index6,3);//16,3

alert(index6);
alert(boresh2);

در مثال بالا موقعیت رشته noe را بدست آوردیم، 16 و در متد substr به جای عدد اول قرار دادیم، سپس عدد دوم باعث شد سه کاراکتر بعد از مبدا را جدا کند.

دومین متد substring نام دارد ، به مثال زیر دقت کنید:

var substring = obj.substring(16,19);

alert(substring); // noe

این متد شبیه indexOf است، با این تفاوت که اولین عدد ایندکس موقعیت شروع برش و عدد دوم موقعیت ایندکس پایان برش است .

متد بعدی replace است

var newString = obj.replace("sheye","object");
alert(newString);

برای اینکه کلمات را بزرگ یا کوچک کنیم ، می‌توانیم مانند کد زیر عمل کنیم .

var upperCase = obj.toUpperCase(), lowerCase = obj.toLocaleLowerCase();
alert(upperCase);
alert(lowerCase);

کد های این بخش به صورت کلی :

var obj = "In yek sheye az noe reshte ast",
lenght = obj.length; //30
var index = obj.indexOf("yek");//3
var index2 = obj.indexOf("ye", index + 1);//10
var index3 = obj.indexOf("in");//-1

var index4 = obj.lastIndexOf("ye");//10
var index5 = obj.lastIndexOf("ye", index4 - 1);//3

alert(lenght);
alert(index);
alert(index2);
alert(index3);
alert(index4);
alert(index5);

var boresh = obj.substr(0, 2);
var index6 = obj.indexOf("noe");//16
var boresh2 = obj.substr(index6, 3);//16,3

var substring = obj.substring(16, 19);

alert(index6);
alert(boresh);
alert(boresh2);
alert(substring);

var newString = obj.replace("sheye", "object");
alert(newString);

var upperCase = obj.toUpperCase(), lowerCase = obj.toLocaleLowerCase();
alert(upperCase);
alert(lowerCase);

در قسمت بعدی در مورد ساخت آبجکت‌ها صحبت خواهیم کرد.

چگونه شئ ایجاد کنیم

در گذشته گفتیم که اشیا دارای پراپرتی و متد هستند، حال بیاد یک شئ بسازیم :

var shakhs = new Object();

shakhs.esm = "Hooman";
shakhs.famil = "Moein";

shakhs.namVaFamilRaBede = function () {

 return shakhs.esm+", "+ shakhs.famil;

};

alert(shakhs.namVaFamilRaBede());

ما شی به نام شخص ساختیم، سپس دو پراپرتی به وجود آوردیم nam و famil و همین طور یک فانکشن به نام namVaFamilRaBede، در داخل فانکشن می‌توانیم بجای استفاده از shakhs از کلمه کلیدی this استفاده کنیم .

خوب ساخت آبجکت به صورت بالا دیگه زیاد رواج نداره و به صورت زیر عمل می کنیم :

var shakhs = {
 esm: "Hooman",
 famil: "Moein",
 namVaFamilRaBede: function () {
 return this.esm + ", " + this.famil;
 }
};

alert(shakhs.namVaFamilRaBede());

به این کار object literal notation گفته می‌شود.

کدهای این بخش به صورت کلی :

/*var shakhs = new Object();

 shakhs.esm = "Hooman";
 shakhs.famil = "Moein";

 shakhs.namVaFamilRaBede = function () {

 return this.esm+", "+ this.famil;

 };*/

var shakhs = {
 esm: "Hooman",
 famil: "Moein",
 namVaFamilRaBede: function () {
 return this.esm + ", " + this.famil;
 }
};

alert(shakhs.namVaFamilRaBede());

در قسمت بعد در مورد آرایه ها صحبت خواهیم کرد.

آرایه ها در جاوااسکریپت

بیاد یک آریه بسازیم :

var jj = [11, "hellooo", true];

من یک آرایه ساختم و همان طور که می‌بینید می‌توانم در داخل آرایه مقادیر مختلفی را قرار دهم، رشته، عدد و …

برای بدست آوردن طول آرایه از دستور jj.lenght استفاده می‌کنیم.

برای تغییر داده‌ها می‌توانیم به این شکل عمل کنیم، jj[0]=12 با این دستور من بجای 11 مقدار 12 را جایگزین کردم .

فرض کنید می‌خواهم hellooo را درون متغییری بریزم، برای این کار به این شکل عمل می‌کنم.

var value = jj[1];

یا با روش‌های زیر می‌توانیم مقادیری را به ارایه اضافه کنیم :

jj[3] = 77;
jj[4] = "salaam";

jj[jj.length] = "darkoobweb";

jj.push("yek dade taze ba push");

در کد بالا می‌بینید که می‌توانیم خود ایندکس را وارد کنیم، بهتر است ایندکس به ترتیب باشد، مثلا اگر چهار مقدار در آرایه دارید مقدار بعدی را در اندکس 4 بگذارید نه 15، توجه کنید که شمارش از 0 شروع می‌شود .

فانکشن push مقدار مورد نظر ما را در آخرید ایندکس می‌گذارد و نیازی به وارد کردن ایندکس نیست.

چطور می‌توانیم دو آرایه را با هم ادقام کنیم ؟

var esm = ["Hooman", "Morteza"],
 esm2 = ["Shabbo", "Mohamad"];

var ashkhas = esm.concat(esm2);

alert(ashkhas);

همان طور که در بالا می‌بینید با استفاده از concat ما دو آرایه را باهم ادقام کردیم، می‌توان هر تعداد آرایه که بخواهیم در concat بیاوریم و آرایه بزگتری بسازیم .

اگر بخواهیم، بین اشخاص را با – از هم جدا کنیم، چه عملی باید انجام شود ؟

var joined = ashkhas.join("-");

برای این کار از join استفاده می‌کنیم و داخل پرانتز کاراکتر مورد نظر را قرار می‌دهیم، اگر داخل پرانتز “” قرار دهیم، بین اسامی هیچ چیزی قرار نمی‌گیرد.

متد بعدی reverse() است، از نامش مشخص است، این متد کل آرایه را برعکس می‌کند :

var barAks = ashkhas.reverse();

و برای سورت داده های داخل آرایه از sort() استفاده می‌کنیم :

var moratabSazi = ashkhas.sort();

متد های بسیار زیاد دیگری هم وجود دارد که بهتراست در باره آنها تحقیق کنید.

کد های این بخش :

var jj = [11, "hellooo", true];

var value = jj[0];

jj[3] = 77;
jj[4] = "salaam";

jj[jj.length] = "darkoobweb";

jj.push("yek dade taze ba push");

var esm = ["Hooman", "Morteza"],
 esm2 = ["Shabbo", "Mohamad"];

var ashkhas = esm.concat(esm2);
var joined = ashkhas.join("-");

var barAks = ashkhas.reverse();
var moratabSazi = ashkhas.sort();

alert(value);
alert(barAks);
alert(joined);
alert(ashkhas);
alert(moratabSazi);

در قسمت بعد در مورد شرط‌ها صحبت خواهیم کرد.

شرط‌ها در جاوا اسکریپت

قبل از شروع، با هم علایمی را مرور خواهیم کرد .

علامت کوچکتر > ، بزرگتر < ، کوچکتر مساوی => ، بزرگتر مساوی =< ، برابر == ، مخالف =!

حال جواب این مقایسه چه خواهد بود ، var mj = “6” == 6; ؟

جواب true، چرا ؟ چون جاوا اسکریپت در این شرایط به تایپ (نوع) آنها اهمیت نمی‌دهد فقط مقدار آنها را باهم مقایسه می‌کند، و می‌گوید 6 با 6 برابر است؟ بله برابر است، در واقع آنها را به یک نوع تبدیل کرده و بعد مقایسه می‌کند.

در بعضی موارد ما نیاز داریم تا تایپ داده‌ها هم برسی شود، یعنی 6 رشته‌ای با 6 عددی برابر نباشد پس از این علامت استفاده می‌کنیم ، var mj = “6” === 6; در این جا جواب false است، چون تایپ این دو متفاوت است.

در این شرایط جاوااسکریپت چک می‌کند که این دو از یک نوع باشند و هم چک می‌کند که مقدار آنها یکی باشد.

اما دستور شرطی if :

if (5 < 6) { //true

 alert("5 kuchektar az 6 ast.");

}

alert("kharej az if");

در کد بالا مشاهده می‌کنید که، ابتدا کلمه کلیدی if را نوشتیم سپس داخل پرانتز شرط خود را قرار دادیم، اگر شرط درست باشد (برقرار با شد) دستور یا دستورات داخل کروشه انجام می‌شود و سپس از if خارج می‌شویم، اگر شرط بر قرار نباشد دستورات داخل if هم انجام نشده و دستورات بعد از if اجرا می‌شود.به یاد داشته باشید که جواب مقایسه true یا false است.

if (6 < 5) { // false
 alert("dakhele if");
}

alert("kharej az if");

در کد بالا 5>6 نیست پس پیغام داخل if هرگز چاپ نمی‌شود. حالا اگر بخواهیم بگویید در غیر این صورت چه باید کرد ؟

برای مثال: اگر 5>6 بود فلان کار را انجام بده، اگر نبود، کار دگری انجام بده .

if (6 < 5) { // false

 alert("5 kuchektar az 6 ast.");

} else {
 alert("6 kuchek tar az 5 nist");
}

alert("kharej az if");

برای این کار مانند کد بالا عمل می‌کنیم، استفاده از دستور else در کد بالا، می‌گوید اگر 6<5 بود چاپ کن 5 کوچکتر از 6 است، در غیر این صورت چاپ کن 6 کو چکتر از 5 نیست.

اگر چند شرط داشته باشیم چطور ؟ مانند کد زیر از else if استفاده می‌کنیم .

var mj = "salam";

if (mj === "Salam") {

 alert("Salam");

} else if (mj === "salam") {

 alert("salam");

} else if (mj === "salaM") {

 alert("salaM");

} else {
 
 alert("chizi peyda nashod");
}
alert("kharej az if");

حتما به خاطر دارید که گفتیم جاوا اسکریپت به بزرگی و کوچکی حروف حساس است، برای همین فقط شرط دوم درست است و چاپ می‌شود.

فرض کنید بخواهیم این دستور را بنویسیم، اگر x<m و b === “salam” بود آن وقت …

چگونه باید این کار را انجام داد؟ برای این کار از عملگرهای منطقی استفاده می‌کنیم && و ، || یا

var bobo = "salam", coco = 5;

if (bobo === "salam" && coco < 7) {

 alert("true");

}

alert("kharej az if");

ما از علات && به معنای “و” استفاده کردیم، در این شرایط دو طرف شرط باید درست باشد یعنی هم شرط bobo === “salam” باید true باشد، هم coco < 7 باید true باشد، تا alert داخل if کلمه true را چاپ کند .

اگر یکی از این موارد false باشد، alert داخل if چاپ نشده و از if خارج می‌شویم.

حال اگر از علامت || به معنی “یا” استفاده کنیم، فقط کافیست، یک قسمت از شرط صحیح باشد، یعنی یا bobo === “salam” باید true باشد، یا coco < 7 باید، true باشد تا alert داخل if چاپ شود.

در واقع && به این شکل است :

True && True = True

True && False = False

False && True = False

False && False = False

و برای || به این شکل است :

var bobo = "salam", coco = 5;

if (bobo === "salam" || coco < 7) {

 alert("true");

}

True || True = True

True || False = True

False || True = True

False || False = False

شما با if آشنا شدید برای درک بهتر، کدهای نمونه را تغییر دهید و نتیجه را مشاهده کنید.

در قسمت بعد در مورد حلقه ها صحبت خواهیم کرد.

حلقه‌ها در جاوااسکریپت

حلقه‌ها به ما کمک می‌کنند یک کد را چندین بار اجرا کنیم، بجای آنکه کد را چندین بار بنویسیم.

بییاد با for شروع کنیم :

for (var i = 0; i < 10; i++) {

alert(i);

}

برای نوشتن for از کلمه کلیدی for استفاده می‌کنیم، سپس داخل پرانتز باید 3 قسمت را پر کنیم، قسمت اول: ایجاد یک متغییر، متغییر می‌تواند هر نامی داشته باشد، من اینجا از i استفاده کردم، قسمت دوم شرطی که باید هربار چک شود، و به ما می‌گوید چه موقع از حلقه خارج شویم و تا چه زمانی در حلقه بمانیم، قسمت سوم قسمتی است که مقدار i را افزایش می‌دهیم، می‌توانید یکی یکی یا چند تا چند تا افزایش دهید، در این مثال یکی یکی افزایش می دهیم .

اگر کد بالا را اجرا کنید اعداد از 0 تا 9 چاپ می‌شود

به کد زیر دقت کنید، من آرایه‌ای از اسامی دارم و می‌خواهم آنها را چاپ کنم.

var asami=["Hooman","Morteza","Pouria","Mohamad"];

for (var i = 0; i < asami.length; i++) {

var esm = asami[i];
alert(esm);

}

حلقه while

به مثال زیر توجه کنید :

var asami = ["Hooman", "Morteza", "Pouria", "Mohamad"];
while (asami.length > 0) {

alert(asami.pop()) ;

}

ساختار حلقه را می‌بینید، کلمه کلیدی while و در داخل پرانتز شرط مورد نظر خود را وارد می‌کنیم، و شرط می‌گوید، تا زمانی که طول آرایه بزرگتر از 0 است، یک داده از آرایه asami را چاپ کن، pop() یک داده از آرایه را بر می‌گرداند، کد بالا را به شکل زیر هم می‌توانیم بنویسیم .

var asami = ["Hooman", "Morteza", "Pouria", "Mohamad"];
var i = 0;
while (i < asami.length) {

alert(asami[i]);
i++;
}

کد بالا کمی شبیه حلقه for شده است.

یک متغییر بنام i، سپس شرط ما ” تا زمانی که i کوچکتر از طول رشته است”، داده‌ای که در مکان i قرار دارد را چاپ کن، و i یکی اضافه کن .

حلقه do ,while

این حلقه حتی اگر شرط هم درست نباشد یک بار دستورات درون خود را انجام می‌دهد :

var asami = [];
do {

var data = asami.pop();
alert(data);

} while (asami.length > 0);

در مثال بالا، آرایه ما خالی است، و اگر از for یا while استفاده می‌کردیم، به دلیل اینکه شرط غلط است وارد حلقه نمی‌شدی.

اما do while کارها را یک بار انجام می‌دهد و بعد شرط چک می‌شود، اگر شرط برقرار بود، دوباره تا زمانی که شرط بر قرار باشد دستورات را انجام می‌دهد، در مثال بالا یک بار جمله، undefined چاپ می‌شود .

در هنگام کار با حلقه‌ها دقت کنید تا شرط شما به شکلی باشد، که به پایان برسد در غیر این صورت درون یک حلقه بی انتها قرار خواهید گرفت که هرگز تمام نمی‌شود.

شئ window

در این قسمت می‌خوایم در مورد آبجک ویندو صحبت کنیم.

اگر بیاد داشته باشید در مورد اسکوپ‌ها صحبت کردیم، دو صطح اسکوپ داشتیم، لوکال یا فانکشنلال اسکوپ که درون یک فانکشن را شامل می‌شود و تمام چیزهایی که درون فانکشن وجود دارد می‌توانند با هم ارتباط بر قرار کنند، اما از خارج فانکشن قابل دسترسی نیستند.

صطح دیگر گلوبال اسکوپ است، اگر چیزی به صورت گلوبال تعریف شود، در همه جا قابل دسترس است .

وقتی ما یک متغییر یا فانکشن گلوبال را تعریف می‌کنیم، در واقع ما یک پراپرتی یا یک متد از شئ window می‌سازیم، یک مثال :

var salam = "salam Shaye window";

alert(window.salam);

در مثال بالا می‌بینید که متغییری به نام سلام ایجاد شده است، و برای چاپ window.salam در alert نوشته شده است.

چرا این اتفاق افتاد ؟ چون salam به صورت گلوبال تعریف شده، ما همچنین می‌توانیم بنویسیم window.alert(); یا window.parseInt(); ، اما درکل از window استفاده نمی‌کنیم چرا ؟ چون window به صورت اتوماتیک اضافه می‌شود، پس چه زمانی باید از window استفاده کنیم ؟

به مثال زیر دقت کنید :

var salam = "salam Shaye window";

var jj = function () {

 var salam = "man dakhele function hastam ";
 alert(salam);

};

jj();

همان طور که در کد بالا می‌بینید، نتیجه alert من داخل فانکشن هستم خواهد بود، خوب اگر من سلام شئ ویندو را بخواهم چه کاری باید انجام شود ؟ کافیست از ویندو استفاده کنم مانند کد زیر.

var salam = "salam Shaye window";

var jj = function () {

 var salam = "man dakhele function hastam ";
 alert(window.salam);

};

jj();

می‌بینید که ویندو به متغییر گلوبال ما اشاره می‌کند یعنی salam که بیرون از فانکشن است .

ما نمی‌خوایم از متغییرها و فانکشن های گلوبال استفاده کنیم، چرا ؟ چون این متغییر ها و فانکشن ها نه تنها در همه جای برنامه ما بلکه در برنامه دیگران هم قابل دسترس هستند، چرا؟ چون این خاصیت متغییرها و فانکشن‌های گلوبال است.

حالا سوال این است، مگر چه ایرادی دارد؟؟؟

فرض کنید ما یک قطعه کد جی کویری داریم، که توسط فرد دیگری نوشته شده و می‌خواهیم از این قطعه کد در برنامه خود استفاده کنیم به کد زیر دقت کنید .

var salam = "salam Shaye window";

var jj = function () {

 var salam = "man dakhele function hastam ";
 alert(window.salam);

};

jj();

//code ye nafare dige
var salam = 10;

فرض کنید آخرین خط کد فرد دیگری باشد، او یک متغییر به نام salam دارد که عدد صحیح گرفته، اما ما متغییر salam داریم و متغییر ما رشته می گیرد !!! خوب در این شرایط کد ما یا کد آن فرد درچاره مشکل می‌شود ، حالا مشکل از جانب چه کسی بوده ما یا آن فرد ؟ در واقع هردو اشتباه کردیم چون از متغییر های گلوبال استفاده کردیم و متغییرهای هر دو ما هم نام هستند.

IIFE چیست

برای رفع مشکلی که دیدیم، از چیزی به نام immediately-invoked function expression استفاده می‌خواهیم کرد. که به آن IIFE نیز گفته می‌شود، تمام کد خود را داخل این فانکشن قرار می‌دهیم و در واقع فانکشن‌ها و متدهای ما حالت لوکال یا محلی به خودشان می‌گیرند و به این صورت از کد در برابر اورراید شدن توسط کد دیگران جلوگیری می‌کنیم .

مثال:

(function () {

})();

حال کدی که در جلسه قبل نوشتیم داخل آن قرار می‌دهیم.

(function () {

var salam = "salam Shaye window";

var jj = function () {

var salam = "man dakhele function hastam ";
alert(window.salam);

};

jj();

})();

اگر کد بالا را اجرا کنید می‌بینید که کلمه undediend نمایش داده می‌شود، چرا؟

چون اینجا دیگر متغییر گلوبال نداریم، همه چیز محلی است. پس کد من باید به این شکل نوشته شود :

(function () {

var salam = "salam Shaye window";

var jj = function () {

var salam = "man dakhele function hastam ";
alert(salam);

};

jj();

})();

در این شرایط salam همیشه مقدارش man dakhele function hastam خواهد بود.

Confirm dialog در جاوااسکریپت

حتما در بعضی از وب سایت‌ها با پیام‌هایی روبه رو شده‌اید که باید به سوالی پاسخ بله یا خیر می‌دادید .

برای ساخت چنین چیزی از confirm دیالوگ باکس استفاده کنیم به شکل زیر:

(function () {

if(confirm("آیا می خواهید به صفحه دارکوب وب بروید؟")){

alert("shoma montaghel shodid hoora");

}else{

alert("shoma haminja hastin ey baba");

}
})();

چیزی که confirm به ما بر می‌گرداند یک مقدار بولی است، برای همین من به راحتی می‌توانم آن را داخل یک if قرار دهم اگر کاربر دکمه yes را بزند true و اگر no را فشار دهد false برمی‌گرداند، پس واضح است، که اگر من دکمه yes را بزنم چه چیزی چاپ خواهد شد :

pic1s2JavaScript

pic2s2JavaScript

چطوره واقعا کاربر را به صفحه مورد نظر هدایت کنیم ؟

(function () {

if (confirm("آیا می خواهید به صفحه دارکوب وب بروید؟")) {

location = "http://www.darkoobweb.com";

} else {

alert("shoma haminja hastin ey baba");

}
})();

با استفاده از location کاربر را به صفحه مورد نظر راهنمایی می‌کنیم، به همین راحتی.

در قسمت بعد در مورد document صحبت خواهیم کرد.

شئ document در جاوااسکریپت

در این قسمت می‌خوایم در مورد شئ document صحبت کنیم، اگر با DOM آشنا هستید که خیلی خوب است، اما اگر چیزی نمی‌دانید به لینک http://www.w3schools.com/js/js_htmldom.asp برید و در مورد DOM مطالعه کنید .

من فایل index.html را به شکل زیر تغییر می‌دهم :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Darkoobweb</title>
</head>
<body>

<p>Salam man hooman hastam.</p>
<p>Chetori hooman man pouria hastam.</p>
<p>Man injaaaaam.</p>
<p>Barname nevisi khailiii bahaleee.</p>

<div>
<p>Darkoob web taghdim mikonad.</p>
</div>

<script src="index.js"></script>
</body>
</html>

در کد بالا مشاهده می‌کنید که تگ اسکریپت را در پایین صفحه قرار دادیم، یکی از دلایل که این کار را انجام دادیم این است که مرورگر صفحه html را از بالا به پایین می‌خواند پس اگر تگ اسکریپت‌مان را بالا قرار دهیم مرورگر زمانی را نیاز دارد تا کدهای جاوا اسکریپت ما را لود کند قبل از اینکه کدهای body را بخواند پس باعث می‌شود لود صفحه html ما زمان برشود و صفحه کند لود شود.

دلیل دیگر این است که اگر درکدهای جاوا اسکریپت با المنت‌های صفحه html کار داشته باشم، باید آن المنت‌ها لود شوند تا کد من به آنها دست‌رسی پیدا کند، پس اگر من تگ اسکریپتم را بالا قرار دهم هنوز تگ های p لود نشده‌اند تا کدهای js من با آنها ارتباط برقرار کنند، پس در این شرایط بهترین جا برای تگ اسکریپت همان پایین است.

در کدهای js من میخواهم محتوای تگ‌های p را یکی یکی نمایش دهم، به کد زیر دقت کنید:

(function () {

var elementHayeP = document.getElementsByTagName("p");

for (var i = 0; i < elementHayeP.length; i++) {

alert(elementHayeP[i].innerHTML);

}

})();

یک متغییر به نام elementHayeP ایجاد کردم و تمام تگ‌های p که در صفحه html وجود دارد را با دستور document.getElementByTagName داخل این متغییر ریختم، چیزی که متد getElementByTagName به من بر می‌گرداند شبیه یک آرایه است، در واقع آبجکتی به نام NodeList را به من بر می‌گرداند.

سپس یک حلقه for ساختم و با innerHTML محتوای هر p را نمایش دادم .

حالا اگر من فقط محتوای یک تگ p خاص را نیاز داشته باشم چطور ؟ خوب اول یک id به آن تگ اختصاص می‌دهم .

<p id="darkoob">Darkoob web taghdim mikonad.</p>

سپس درindex.js این کد را می‌نویسم.

(function () {

var elementHayeP = document.getElementById("darkoob").innerHTML;
alert(elementHayeP);

})();

برای پیدا کردن تگ p خاصی که می‌خواستم از متد getElementById استفاده کردم و برای گرفتن محتوای آن تگ از innerHTML استفاده شده.

متد دیگری هم وجود دارد که می‌توانیم ازآن استفاده کنیم و آن querySelector و querySelectorAllاست، getElementTagNameوgetElementById سریع تر از querySelector وquerySelectorAll است. به همین دلیل من از این متدها استفاده نمی‌کنم، می‌توانید در مورد querySelector کمی تحقیق کنید.

در قسمت بعدی شما را با ساخت Element و Attributes آشنا می‌کنم.

ساخت Element و Attributes در جاوااسکریپت

در این قسمت می‌خوایم با هم یک المنت، برای مثال یک p بسازیم و به آن مقدار دهیم و بعد آن را داخل صفحه html خود قرار دهیم، من از همان صفحه html مثال قبل استفاده می‌کنم و می‌خواهم تگ p را به آخر صفحه منتقل کنم.

(function () {

var elementP = document.createElement("p"),
mant = document.createTextNode("Salam man hamin alan Omadam.");

elementP.appendChild(mant);
document.body.appendChild(elementP);

})();

همان طور که در کد بالا می‌بینید با createElement من می‌توانم المنت مورد نظرم را بسازم p,div و… در اینجا من یک p ساختم بعد آن را در متغییر element قرار دادم، چرا ؟ تا بعد بتوانم به آن متن بدهم یا برای آن کلاس یا ای دی تعریف کنم .

یکی از روش‌هایی که می‌توان متنی به المنت دل‌خواه داد این است که با استفاده از createTextNode یک تکست نود ایجاد کنید، من هم همین کار انجام دادم، برای اضافه کردن متن از appendChild استفاده کردم تا به تگ p خود متنی اختصاص دهم، حالا که متن هم داره بیاید آن را به انتهای body اضافه کنیم. می‌بینید که با document.body.appendChild این کار انجام شد، صفحه را رفرش می‌کنم و این نتیجه خواهد بود .

pic3s2JavaScript

حالا آن را به وسط صفحه منتقل می‌کنیم و آدی دی anar هم به آن اختصاص می‌دهیم .

(function () {

var elementP = document.createElement("p"),
mant = document.createTextNode("Salam man hamin alan Omadam.");

elementP.appendChild(mant);
elementP.setAttribute("align", "center");
elementP.id = "anar";
document.body.appendChild(elementP);

})();

برای اینکه به وسط صفحه منتقلش کنیم از setAtrribute استفاده کردیم این متد دو ورودی می‌گیرد، نام اتریبوت و مقدارش، برای آیدی هم می‌توان از setAtrribute استفاده کرد اما بجای آن از id به عنوان یک پراپرتی استفاده کردم.

pic4s2JavaScript

همان طور که در تصویر بالا می‌بینید p به وسط صفحه منتقل شده و آی دی anar نیز گرفته است.

حال می‌خواهم p را در داخل تگ div که وجود دارد قرار دهم.

(function () {

var elementP = document.createElement("p"),
mant = document.createTextNode("Salam man hamin alan Omadam."),
darkoobP = document.getElementById("darkoob");
elementP.appendChild(mant);
elementP.setAttribute("align", "center");
elementP.id = "anar";

darkoobP.parentNode.appendChild(elementP);

})();

برای اینکه تگ p خود را داخل dive قرار دهم اول تگ p که آی دی darkoob داشته را پیدا کرده و در داخل darkoobP می‌ریزم بعد به نود پدر داکوب پی یک فرزند اضافه می‌کنم، نود پدر دارکوب پی چی چیزی است ؟؟؟ نود پدر دارکوب پی همان div است. چون p با آی دی darkoob در داخل تگ div قرار دارد پس div پدر p دارای آی دی darkoob است.

pic5s2JavaScript

می‌بینید که تگ p ما با آی دی anar داخل div قرار گرفت، حال اگر بخواهیم قبل از تگ p با آی دی دارکوب قرار بگیرد باید چی کاری انجام دهیم؟ کافی است این تغییر را اعمال کنیم :

(function () {

var elementP = document.createElement("p"),
mant = document.createTextNode("Salam man hamin alan Omadam."),
darkoobP = document.getElementById("darkoob");
elementP.appendChild(mant);
elementP.setAttribute("align", "center");
elementP.id = "anar";

darkoobP.parentNode.insertBefore(elementP, darkoobP);

})();

insertBefor دو پارامتر می‌گیرد اولی المنتی که می‌خواهیم اضافه کنیم و دومی المنتی که می‌خواهیم المنت اضافه شده قبل از آن قرار بگیرد :

pic6s2JavaScript

اما یک مشکل کوچک وجود دارد و آن این است که من 3 بار از document استفاده کردم بهتر است کاری کنیم که این عمل فقط یک بار انجام شود، به این شکل سرعت صفحه ما هم کمی بالاتر می‌رود، کد را به صورت زیر اصلاح می‌کنم.

(function () {

var doc = document,
elementP = doc.createElement("p"),
mant = doc.createTextNode("Salam man hamin alan Omadam."),
darkoobP = doc.getElementById("darkoob");
elementP.appendChild(mant);
elementP.setAttribute("align", "center");
elementP.id = "anar";

darkoobP.parentNode.insertBefore(elementP, darkoobP);

})();

حالا می‌خوام به جای p با آی دی darkoob p با آی دی anar قرار بگیرد :

(function () {

var doc = document,
elementP = doc.createElement("p"),
mant = doc.createTextNode("Salam man hamin alan Omadam."),
darkoobP = doc.getElementById("darkoob");
elementP.appendChild(mant);
elementP.setAttribute("align", "center");
elementP.id = "anar";

darkoobP.parentNode.replaceChild(elementP, darkoobP);

})();

می‌بینید که از replaceChild استفاده کردم این متد هم مانند، insertBefor دو پارامتر می‌گیرد اولی المنت جدید و دومی المنتی که می‌خواهیم با المنت جدید تعویض شود.

تا اینجا شما با یک روش برای قرار دادن محتوا آشنا شدید اما این روش زیاد روش جالبی نیست، چرا؟

چون در این روش ما خیلی با DOM درگیر هستیم. هر چقدر که بیشتر با DOM درگیر باشید سرعت صفحه کند ترمی‌شود.

پس برای مقدار دهی من از innerHTML استفاده می‌کنم و کد به شکل زیر درمی‌آید:

(function () {

var doc = document,
elementP = doc.createElement("p"),
darkoobP = doc.getElementById("darkoob");

elementP.innerHTML = "salam man ba innerHTML omadam ";
elementP.id = "anar";

darkoobP.parentNode.appendChild(elementP);

})();

در innerHTML شما می‌توانید مانند من از تگ‌های HTML استفاده کنید، از innerHTML نه تنها می‌توانیم برای قرار دادن محتوا استفاده کنیم، بلکه می‌توان برای گرفتن محتوا نیز از آن استفاده کرد.

(function () {

var doc = document,
elementP = doc.createElement("p"),
darkoobP = doc.getElementById("darkoob");

elementP.innerHTML = "salam man ba innerHTML omadam ";
elementP.id = "anar";

darkoobP.parentNode.appendChild(elementP);

alert(elementP.innerHTML);

})();

ونتیجه این خواهد بود :

pic7s2JavaScript

اتصال دو رشته را در قسمت‌های گذشته به یاد دارید ؟؟؟ حال با innerHTML انجام می‌دهیم .

(function () {

var doc = document,
elementP = doc.createElement("p"),
darkoobP = doc.getElementById("darkoob");

elementP.innerHTML = "salam man ba innerHTML omadam ";
elementP.id = "anar";

darkoobP.parentNode.appendChild(elementP);

elementP.innerHTML = elementP.innerHTML + "
 man omadam.";
elementP.innerHTML = elementP.innerHTML + "
 man man raftam.";
elementP.innerHTML = elementP.innerHTML + "
 man man miayam .";
elementP.innerHTML = elementP.innerHTML + "
 man man miravam.";

})();

می‌بینید که اتصال رشته‌ها هم بسیار راحت است، اما! یک مشکل داریم در چند خط بالاتر گفتیم که تا آنجا که می‌توانیم باید کم‌تر با DOM درگیر شویم، پس من کد خود را به این شکل اصلاح می‌کنم .

(function () {

var doc = document,
elementP = doc.createElement("p"),
darkoobP = doc.getElementById("darkoob"),
html;

elementP.innerHTML = "salam man ba innerHTML omadam ";
elementP.id = "anar";

darkoobP.parentNode.appendChild(elementP);

html = elementP.innerHTML;

html = html + "
 man omadam.";
html = html + "
 man man raftam.";
html = html + "
 man man miayam .";
html = html + "
 man man miravam.";

elementP.innerHTML = html;

})();

خوب کمی کد سریع‌تر شد، و برای پاک کردن محتوا هم کافی است محتوای innerHTML را خالی بدهیم، به این شکل :

elementP.innerHTML = "";

در قسمت بعدی در مورد دادن استایل به المنت‌ها صحبت خواهیم کرد.

دادن استایل به المنت ها در جاوااسکریپت

در این قسمت می خوایم با استفاده از جاوا اسکریپت به المنت‎های خود css دهیم، من کد html که داشتیم را به این شکل تغییر دادم :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Darkoobweb</title>
<style></style>
</head>
<body>

<div style="font-size:xx-large" id="darkoob">

www.darkoobweb.com

</div>

<script src="index.js"></script>
</body>
</html>

اولین قدم برای اینکه به کد خود از طریق جاوااسکریپت استایل دهیم این است که، المنتی را که می‌خواهیم مشخص کنیم سپس یا استفاه از style هر نوع استایلی که خواستیم به آن بدهیم به این شکل :

(function () {

var divDarkoob = document.getElementById("darkoob");

divDarkoob.style.color = "red";
divDarkoob.style.border = "1px solid blue";
divDarkoob.style.backgroundColor = "green";
divDarkoob.style.padding = "2px";

})();

در کد بالامی‌بینید که من بردر، رنگ، رنگ پس زمینه و پدینگ رامشخص کردام، تنها نکته در مورد رنگ پس زمینه است.

در css می‌نویسیم background-color اما در جاوا اسکریپت نمی‌توانیم این کار انجام دهیم چرا ؟ چون این “-” علامت منها کردن در جاوا اسکریپت است پس تمام موارد مشابه background-color را در جاوااسکریپت به صورت کمل کیس و پشت سرهم می‌نویسیم.

مثل دفعات قبل، داریم با DOM زیاد درگیر می‌شویم پس کد به این شکل در می‌آید :

function () {

var divDarkoob = document.getElementById("darkoob"),
style = divDarkoob.style;

style.color = "red";
style.border = "1px solid blue";
style.backgroundColor = "green";
style.padding = "2px";

})();

این یک روش برای دادن استایل است، یک مشکل وجود دارد. مرورگر باید 4 بار المنت مورد نظر را آپدیت کند و این خوب نیست، پس بهتر است از یک کلاس css استفاده کنیم :

<head>
<meta charset="UTF-8">
<title>Darkoobweb</title>
<style>
#darkoob {
}

.css-class {
color: red;
border: 1px solid blue;
background-color: green;
padding: 2px;
}

</style>
</head>
<body>

<div style="font-size:xx-large" id="darkoob">

www.darkoobweb.com

</div>

<script src="index.js"></script>
</body>
</html>

کد html را یه این شکل تغییر می‌دهیم و سپس در جاوا اسکریپت به این شکل در می‌آید :

(function () {

var divDarkoob = document.getElementById("darkoob"),
style = divDarkoob.style;

divDarkoob.className = "css-class";

})();

با استفاده از className در جاوا اسکریپت من می‌توانم چندین cssClass مختلف در یک خط کد را اجرا کنم به این شکل :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Darkoobweb</title>
<style>
#darkoob {
}

.css-class {
color: red;
border: 1px solid blue;
background-color: green;
padding: 2px;
}

.css-class2 {
font-weight: bold;
}

</style>
</head>
<body>

<div style="font-size:xx-large" id="darkoob">

www.darkoobweb.com

</div>

<script src="index.js"></script>
</body>
</html>

و در کد جاوا اسکریپتم:

(<strong>function </strong>() {

<strong>var </strong>divDarkoob = document.getElementById("darkoob"),
style = divDarkoob.style;

divDarkoob.className = "css-class css-class2";

})();

اگر رشته خالی را به className بدهم، تمام style هایی که داده بودم از بین می‌رود. می‌توانیم از class.list هم استفاده کنیم .

(function () {

var divDarkoob = document.getElementById("darkoob"),
style = divDarkoob.style;

divDarkoob.classList.add("css-class");
divDarkoob.classList.add("css-class2");

})();

درقسمت بعد در مورد تایمر و انیمیشن صحبت خواهیم کرد.

تایمر و انیمیشن در جاوااسکریپت

برای شروع میخواهیم از فانکشن setTimeOut استفاده کنیم، قصد داریم پیامی برای کاربر چاپ کنیم آن هم بعد از دوثانیه بعد از ورود به صفحه‌ما .

(function () {

var anjamDadam = function () {
alert("anjam adam chapo dar 2 sanie");
};

setTimeout(anjamDadam,2000);

})();

همان طور که می‌بینید فانکشنی ساخت‌ام که پیامی چاپ می‌کند و در setTimeout اول نام فانکشن و بعد متد تاخیر را ذکر می‌کنم، در اینجا می‌خواهم فانکشن بعد از دوثانیه تاخیر شروع به کار کند .

به یاد داشته باشید که فقط اجرای فانکشن دوثانیه تاخیر خواهد داشت نه اجرای تمام برنامه .

می‌توانیم از setTimeout داخل فانکشن هم استفاده کنیم :

(function () {

var vaghfe = 500;

var anjamDadam = function () {
alert("anjam adam chapo dar 2 sanie");

setTimeout(anjamDadam,vaghfe);
};

setTimeout(anjamDadam,vaghfe);

})();

این کد یک مشکل بزرگ دارد و آن این است که شما داخل یک حلقه بینهایت گرفتار می‌شوید، برای رفع این مشکل می‌توانیم یک شرط بنویسیم :

(function () {

var vaghfe = 500,
i = 0;

var anjamDadam = function () {
alert("shomarande " + (i + 1) + " ast");

i += 1;
if (i < 10) {

setTimeout(anjamDadam, vaghfe);

}
};

setTimeout(anjamDadam, vaghfe);

})();

فانکشن دیگری داریم به نام setInterval مثال بالا را با setInterval می‌نویسم :

(function () {

 var vaghfe = 500,
 i = 0;

 var anjamDadam = function () {
 alert("shomarande " + (i + 1) + " ast");

 i += 1;
 if (i > 9) {

 clearInterval(intervalId)

 }
 };

 var intervalId = setInterval(anjamDadam, vaghfe);

})();

setInterval فانکشنی را که می‌خواهیم در زمان مشخص شده برای تاخیر تکرار می‌کند و نیازی نیست مثل مثال قبل من دوبار setTimeout را بنویسم .

خوب من کد html قبلی خود را تغییر می‌دهم به شکل زیر :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Darkoobweb</title>
<style>
#jabe {
background-color: aqua;
height: 100px;
left: 58px;;
position: absolute;
top: 50px;
width: 100px;;
}
</style>
</head>
<body>

<div id="jabe"></div>

<script src="index.js"></script>
</body>
</html>

حالا می‌خواهیم این جعبه که ایجاد کردیم به سمت راست حرکت کند :

(function () {

var sorat = 10,
jabe = function () {

var element = document.getElementById("jabe"),
left = element.offsetLeft,
harKatKon = 3;
element.style.left = left + harKatKon + "px";

if (left > 399) {
clearTimeout(timer);
}

};

var timer = setInterval(jabe, sorat);

})();

تنها چیزی که برای شما در کد بالا جدید خواهد بود offsetLeft است، offsetLeft به ما شماره خانه سمت چپ المنت را بر می‌گرداند، این ساده بود.

حالا کاری کنیم که به چپ و راست حرکت کند :

(function () {

var sorat = 10,
jabe = function (harKatKon) {

var element = document.getElementById("jabe"),
left = element.offsetLeft;

if ((harKatKon > 0 && left > 399) || (harKatKon < 0 && left < 51)) {
clearTimeout(timer);
timer = setInterval(function () {
jabe(harKatKon * -1);
}, sorat);
}
element.style.left = left + harKatKon + "px";
};

var timer = setInterval(function () {
jabe(3);
}, sorat);

})();

اگر کد بالا را اجرا کنید جعبه‌ای که ساخته‌ایم به چپ و راست حرکت خواهد کرد، شما با تمام دستورات بالا آشنا هستید پس من توضیحی نمی‌دهم، تحلیل کد بالا به عهده خود شما .

برچسب خورده

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.