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

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

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

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

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

مرورگر:

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

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

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

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

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

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

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

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

“salam man java script hastam“

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

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

‘salam man java script hastam’

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

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

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

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

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

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

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

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

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

مثال:

با

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

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

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

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

مثال:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

مثال :

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

مثال :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

مثالی دیگر :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

متد بعدی replace است

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ما از علات && به معنای “و” استفاده کردیم، در این شرایط دو طرف شرط باید درست باشد یعنی هم شرط 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

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

True || True = True

True || False = True

False || True = True

False || False = False

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

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

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

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

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

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

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

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

حلقه while

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

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

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

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

حلقه do ,while

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

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

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

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

شئ window

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

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

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

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

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

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

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

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

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

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

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

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

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

IIFE چیست

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

مثال:

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

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

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

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

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

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

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

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

pic1s2JavaScript

pic2s2JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

pic3s2JavaScript

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

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

pic4s2JavaScript

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

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

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

pic5s2JavaScript

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

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

pic6s2JavaScript

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

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

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

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

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

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

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

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

pic7s2JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

پیشنهاد می‌کنم این مقالات هم بخوانید

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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

۱ ستاره۲ ستاره۳ ستاره۴ ستاره۵ ستاره
(ستاره دهید)
Loading...
Share on twitter
Share on linkedin
Share on telegram
Share on whatsapp
Share on facebook