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

صفحه 1:


صفحه 2:


صفحه 3:


صفحه 4:


صفحه 5:
Onw Gublicve ‏رخ رت اد(‎ ed 

صفحه 6:
لا ازی محیط برای کدنویسی : 324830 1) Otsu Gruchy Onde ‏لسن برنامه‎ 9 ‏و‎ 8 AAG) 1) Oped Polder 4458 Cie 65 5 رشن ‎the Ols 3 Stil | (Als ys 59 oa ASSL‏ 59 حال براى راحتى كار ‎GE Cxteusiva 2b‏ موجود در تصویر را در قسمت +!إ---ج5)... جستجو كرده و آن هارا نصب ميكنيم. 

صفحه 7:
۱ CD ابیت ‎ii‏ ‎ad‏ ‏سح ات[ مدنا / 8 1 

صفحه 8:
pee eee ee 000000 لمر re a 7 وهی جوا 1 ante ی ۵ eer لاس ماو ‎ae‏ سع ماو وه و۱ مب 

صفحه 9:
حال همه چیز مهیاست برای کدنویسی با اين زبان قدرتمند و دوست داشتنی جاوا اسکریپت آمیذوارم تا اینجای آموزش لذت برده باشید و خودتون رو واسه یه دنیای پر هیجان آماده کرده 5 . جوا اسکرییت درون تگ های ‎<sorip></smipi>‏ ‏انوشته ميشوند. ۴ 1 3و ووش ميتوانيم بوبح هاى خودمان را بنويسيم روش اوت: ا كه تبج ها رو در پایین همین صفحه اب و وسیم که این روش اصلا توصیه نمیشزد و حرفه ای نیست. کی ( خلمت -بری تریح نویسم, یا به اصطلاح ج200 3 بر محنی که کدهایی که در مقابل // نوشته میتوند اجرا نمیشوند 

صفحه 10:
روش دوم : به آینصورت هست که ما کدهایمان در یک فایل جداگانه مینویسیم و به صفحه ی امب»| خود وصل میکنیم. - گزیته 3 ری رو انتخاب کرده و یک پوشه جدرد با نام دلخواه ایجاد میکنیم. 8- داخل پوشه یک | برس ایجاد ميکنیم و نام با پسوند جز برایش انتخاب میکنیم. 

صفحه 11:
[ 

صفحه 12:
eee 5 ed es Hello Work! 

صفحه 13:


صفحه 14:
8 ‏سوق ما4 راب6۱ تقد یلقع 55 مساق‎ Acces dex ‏سسکا 8 مت و و‎ 

صفحه 15:


صفحه 16:


صفحه 17:


صفحه 18:


صفحه 19:
8 ی ؟! زر جاوا اسکریپت : 6 نآك این دستور پیداست برای شرط گذاری در برنامه مورد استعا ۳۳۲ ۳ ۶ ریش کرده و آن را مقدار دهی میکنیم. 2 حال با استفاده از ]| بررسی میکنیم میگم اگر مقدار ‎Number‏ ‏عدد 5 باشد تو ‎console‏ این متن و چاپ کن. در ۶یر آینصورت این یکی پیغام رو جاب كن ی یآ دیگری نیز وجود دارد مانند : :این عمگلر برای بررسی برابر بودن مقدار ها ‎JIS‏ ‏ميرود. 2 225 :هرانند << است با یک تفاوت که نوع آنها را نیز بررسی میکند. << :این عملگر برای بزرگتر با مساوی بکار میرود. 

صفحه 20:


صفحه 21:


صفحه 22:


صفحه 23:
5 - 100670۲ : برای اینکه بتوانیم اندیس مقداری رو بدست بیاوریم از اين متد استفاده 

صفحه 24:
ل ا 00 rons caer 3 mee سس و en 00000 eer) 

صفحه 25:
4 2 ‏يم‎ RAE 5-5 ed { amet ‏ای‎ Ceo car-carcal: 0 TR Dinspector FD console ۵ ‏و( موه‎ ۵ perorms 8 ۲ 

صفحه 26:
آستفاده از آرایه ها درون ‎Sip Sl Ile Object‏ 2 ما میتوانیم از آرایه ها درون بسران استفاده کنیم. شيا أبن سوال برآتون پیش بیاد که به چه دردی میخوره بخوایم از آرایه ها استفاده کنیم. برای همین باهمدیگه یک مثال رو بررسی میکنیم. ۶ کند برنامه لی رو داریم مینویسیم که قراره اطلاعات اشخاص رو بگیره و ذخیره کنه. ‎Objet 43 = 0‏ با نام «مجوم تعريف ميكنيم. © - أبن بان اطلاعاتی مانند نام ‎ae‏ آدگی ءآئرس ۰ سن شخمر 00 ارو بكيريم شخص مقابل جند درا دَاشْنَّه باشه در اين مواقع ميتوانيم از آرايه ها درون ابجرزرا() استفاده كنيم. مثال :مانند تصویر عمل کنید و خروجى رو مشاهده كنيد 

صفحه 27:
استفاده از توابع درون بیان ها در جاوا اسکریپت: فرض کنید برنامه لی رو مینویسیم كه قرار لست سن کاربران رو بر اساس تاریخ تولد آنها محسابه کرده و ریش دهد در اینگونه موارد تابع يا همان مهسی۳) به کمک ما میاید به مثال زیر توجه کنید. < متل روبرو مقدار سپ9) رو یک تابع در نظر گرفتیم که اين تابع یک ورودی میگیره (,«05۸0)) حل این ورودی گرفته شده رو از 0006 که سال جاری است کم میکنه و به ما برميكردونه. و به همین صورت میتونیم خروجی رو مشاهده كنيم. 

صفحه 28:


صفحه 29:
ليبا 322 تراهم اعاد 0 تا 20 رو با اسفتده از لقه سرد جاب - مقدار : رو برابر با 4 قرار میدهیم. 3 - میکیم تا وقتی | كوجكتر يا مساوى (0© باشد اين حلقه رو ادامه بده, - هر باری که حلقه میچرخه |) واحد به : اضافه میکنیم. ۱ انصورت است که ابا برابر 6 میباشد بجد میاد بررسی میکنه آیا : از 6900 کوچکتر يا مساوی ن است اگر شرط درس بود میاد پایین یکبار : رو که 4 هست رو جاب که یهد ۷۱+ اجرا ميشه 4 واحد به : اضافه ميشه. و ابن وود تا وقتی شرط بابرجاست ادامه بيدا ميكنه. 

صفحه 30:


صفحه 31:
هنال : ۲ یک ‎Chile‏ تعریف میکنیم و چندتا مقدار برایش ست میکنیم. میکیم تا وفتی که , کوچکتر از طول آرایه است مقادیر آرایه رو چاپ کن. ۳۰۱۳۱ یک عدد برمیگردونه به اندازه طول آرایه 

صفحه 32:


صفحه 33:


صفحه 34:


صفحه 35:


صفحه 36:
1 Seen eres ‏تسیر‎ 66 ‏-3ممها از وده‎ - Sa ae الم 0 0 سس وت تا زايا سوم cr نآ( ۱ eee Oct as Seer cre} 

صفحه 37:
indectim! x5 ‏عم‎ ‏وود نس‎ ee ra cre ee te eee Soot oe eae) a href="s” torget= Cats ese ‏و جما‎ eee eect eactc a tcc 

صفحه 38:


صفحه 39:


صفحه 40:


صفحه 41:
Pee eS ee eee ‏ب‎ کزهلا ود دم ۱۵۰ eer ‏ل‎ Cae ober ‏م‎ aes [0 rie) 3 000 00 os ose) 10 ۳ کمن هن م ‎ea)‏ مم ‎eae‏ كد »ا ‎LESSONG‏ 4 رت ‎Mainjs‏ كد 

صفحه 42:
آین مند خیلی شبیه به متد جرمم(۷ سب( هست. ور نامه مون 1000 تا تگ م داریم قتی میخوایم از اين متد اسفاده کنیم آرایه ای از م ها ۶۱ ایجاد میکنه. به عکس روبرو توجه کنید. یگ متغير ذاريم كه آرايه هاى از م هارو به واسطه ی متد 100000 ليج کرد لیم و با لستفادم از حلقه م۳ رنگ متن و رنگ پس زمینه رو تعیین کردیم. 

صفحه 43:


صفحه 44:


صفحه 45:
CM MC ey Mainjs - Lessor 0 را ‎jumber (number) ;‏ if(num%2===0) { document .write(*Z oer )عتما معسدء هل ۰ ‏ا ا‎ ood o ۱ لاط سا ‎yo)‏ ‏00 ‎Pate)‏ ‏۰ ‏کزه‌ند/۱ کر ها 

صفحه 46:


صفحه 47:


صفحه 48:


صفحه 49:


صفحه 50:


صفحه 51:


صفحه 52:


صفحه 53:
ا ل ۱۱۱ (| ‏نت‎ 1 co 4 OPEN EDITORS. Tes Eo ‏را‎ 1500083-6 زور۳ عز يان coe sea) له ی ( 7 تست ۱5| 

صفحه 54:
8 :اموز دنا از نطو ‎ag‏ ‎gy 1 USsONS‏ و ۱ cena ear) 1 

صفحه 55:


صفحه 56:


صفحه 57:


صفحه 58:
‎Main, - Lesson 9 - Visual Studio Code [Admini‏ 0 2 00 لا ا لا ‎EXPLORER 0 Pony ‎Cron ‎Index htm caer oe Ree ree eer ciea yy ‏ز (90۷ع) وم ع01ووم ‎ey eae 0 ‏عزو ووز له‎ eo esti) Seis teres 00000 nen iers ys console.1og(Show2); ‎ 

صفحه 59:


صفحه 60:


1 بنام خداوند بخشنده ی مهربان آموزش جاوا اسکریپت 2 جاوا اسکریپت یک زبان قدرتمند و رو به رشدی است. اگر به اکثر سایت های بزرگ سر بزنید خواهید دید که برای فرانت اند از جاوا اسکریپت استفاده کرده اند. شما با یادگیری جاوا اسکریپت میتوانید انواع کتابخانه یا frameworkهای آن نظیر react , vue , electronو ...را نیز یاد بگیرید که امروزه بازار کار عالی و خوبی دارند. در این آموزش سعی شده مفاهیم به صورت ساده و مفهومی ارائه شده باشد تا مشکلی در یادگیری پیش نیاید. 3 جاوا اسکریپت چیست ؟ جاوا اسکریپت زبان برنامه نویسی می باشد که درون کدهای( )HTMLقرار می گیرد و بر روی مرورگر بازدید کننده اجرا می شود .جاوا اسکریپت توانایی تغییر در محتویات المانهای نمایش داده شده را بر روی مرورگر فرد بازدید کننده دارد بطوریکه امکان پویا سازی یا دینامیک شدن صفحات بوجود می آید. توانایی های جاوا اسکریپت: توانایی ها و قابلیت های جاوا اسکریپت بسیار متنوع بوده و تنها به موارد که در زیر می آید خالصه نمی شود .در زیر لیستی از قابلیت های این اسکریپت آورده شده است : امکان تغییر در متون نمایش داده شده در مرورگر امکان تغییر رنگها ،رنگ پس زمینه و موقعیت قرار گیری المانهای استفاده شده در طراحی صفحات وب تغییر در مشخصه های المانها و CSSآنها متحرک سازی ،انیمیشن و پویا نمایی تعامل با کاربر و از طریق المانهای ورودی نظیر Textboxها RadioButton ،ها TextArea ،و غیره عکس العمل نشان دادن به واکنش های کاربران نظیر تغییر عکسها با حرکت موس روی آنها و ... 4 مزایای جاوا اسکریپت : دادن پویایی به صفحات استاتیک وب سایت ها برخی از عملیات را نمی توان بدون استفاده از این زبان برنامه نویسی انجام داد .نظیر تعامل با کاربر ،یافتن اطالعات کاربری بازدید کنندگان نظیر IPهای آنها و موارد دیگر نزدیک بودن این زبان برنامه نویسی به زبانها برنامه نویسی دیگر نظیر ++C, Cو یا #C امکان استفاده از کتابخانه های آماده این زبان برنامه نویسی نظیر کتابخانه های استاندارد ریاضی سادگی در برنامه نویسی و پیاده سازی بدون درگیر شدن با کامپایلرهای پیچیده. معایب اسکریپت : جاوا کند بودن در زمان اجرا بدلیل عدم کامپایل شدن کدها. دیباگ کردن آن بسیار مشکل است. بر روی مرورگر اجرا می شود در نتیجه هیچگونه امکانی برای مبادله با سرور سایت را ندارد. 5 برای اینکه بتوانیم برنامه های خود را بنویسیم به یک Code Editorنیاز داریم .که چند مورد از آن ها را معرفی میکنم. ‏Atom – 1 ‏Sublime – 2 ‏Visual Studio Code – 3 برای دانلود هر یک میتوانید بروی آن کلیک کنید. نکته :آموزش ما با Visual Studio Codeخواهد .لذا برای جلوگیری از بروز مشکل ترجیحا از این Editorاستفاده نمایید. 6 آماده سازی محیط برای کدنویسی : – 1ابتدا یک پوشه ( )Folderدر یک مسیر دلخواه ایجاد میکنید. – 2سپس برنامه Visual Studio Codeرا بازکرده و از تب Fileگزینه Open Folderرا انتخاب کرده و پوشه ساخته شده در مرحله 1 را انتخاب و Okمیکنیم. – 3حال برای راحتی کار نام Extensionهای موجود در تصویر را در قسمت …Serach جستجو کرده و آن ها را نصب میکنیم. 7 شروع کد نویسی اولین برنامه : – 1از سمت راست Explorerرا انتخاب میکنیم. – 2پوشه خود را انتخاب کرده و گزینه New Fileرو میزنیم. – 3یک نام دلخواه برای برنامه انتخاب کنید با پسوند ‏html حال برنامه برای کدنویسی آمده است. 8 با نوشتن htmlو با کمک Extensionهایی که نصب کرده ایم چند گزینه میاره واسمون که ما html:5رو انتخاب میکنیم که ورژن html 5 هست. با انتخاب html:5کدهای آمده و پیشفرض htmlرو به این صورت میاره واسمون. 9 حال همه چیز مهیاست برای کدنویسی با این زبان قدرتمند و دوست داشتنی جاوا اسکریپت امیدوارم تا اینجای آموزش لذت برده باشید و خودتون رو واسه یه دنیای پر هیجان آماده کرده ب تگ های کد های جاوا اسکریپت درون < >script></scriptنوشته میشوند. ما به دو روش میتوانیم scriptهای خودمان را بنویسیم. روش اول: به اینصورت هست که scriptها رو در پایین همین صفحه htmlبنویسیم که این روش اصال توصیه نمیشود و حرفه ای نیست. نکته :از عالمت //برای توضیح نویسی یا به اصطالح Commentاستفاده میشود .بدین معنی که کدهایی که در مقابل //نوشته میشوند اجرا نمیشوند 10 روش دوم : به اینصورت هست که ما کدهایمان در یک فایل جداگانه مینویسیم و به صفحه ی htmlخود وصل میکنیم. – 1گزینه new folderرو انتخاب کرده و یک پوشه جدید با نام دلخواه ایجاد میکنیم. -2داخل پوشه یک new fileایجاد میکنیم و یک نام با پسوند jsبرایش انتخاب میکنیم. 11 حال باید این فایل jsرو به فایل htmlخود وصل کنیم. اکنون ما کدهای خودمان را درون فایل Main.jsنوشته و اجرا خواهیم کرد. 12 این کد را درون فایل jsخودتون بنویسید و سپس فایل htmlرا با یک مرورگر باز کنید. نتیجه به این شکل خواهد بود. Documentاشاره به سند html داره وبا استفاده از این کد میگیم که تو صفحه ی htmlاین متن رو بنویس یا چاپ کن. نکته :درون فایل Main.jsدیگر نیاز نیست کدها را درون تگ های <>script></script بنویسیم. 13 روش های خروجی گرفتن از برنامه : 3روش اساسی برای خروجی گرفتن وجود دارد. ;)(document.write – 1 ;)(alert - 2 ;)(console.log - 3 این سه روش کارکردشون یکسان هست با کمی تفاوت با یکدیگر. طرز استفاده ;)(document.writeرو یاد گرفتید. روش دوم alert: تکه کد را در فایل jsخودتون بنویسید و خروجی رو ببینید. )"!;alert("Hello World نکته :برای چاپ مقادیر رشته میتوانید از "( double quoteرشته") و یا از ‘( single qouteرشته’) استفاده کنید هیچ تفاوتی با یکدیگر ندارند. ;alert("Hello World!"); .خروجی هر دو یکسان هست. مثال alert('Hello World!') : 14 روش سوم ;)(console.log : )'!;console.log('Hello World این تکه کد رو در فایل jsخود بنویسید. برای مشاهده ی خروجی درون مرورگر کلید F12رو بزنید .و از تب های باز شده تب consoleرو باز کنید.حال میتوانید خروجی برنامه خود را ببینید. 15 متغیر ها در جاوا اسکریپت : متغیر ها همانند ظرفی هستند که اطالعاتی در خود نگهداری میکنند تا در برنامه مورد استفاده قرار بگیرند. همانطور که از نام متغیر پیداست ،متغیرها میتوانند در طول اجرای برنامه تغییر کنند. شکل تعریف متغیرها به اینصورت است. مقدار متغیر = نام متغیرVar نوع متغییر با توجه به مقدار متغییر تعیین میشود. ;”Var Name=“Ali است. ;Var Age=25 عدد است. نوع این متغییر stringاست .چون مقدارش از نوع رشته و نوع این متغییر Numberاست .چون مقدارش از نوع 16 مثال : کد های زیر را بنویسید و خروجی آن راببینید. ;"var Fname="Ali ;"var Lname="Rezaei ;var Age=25 ;)console.log(Fname,Lname,Age برای اینکه بتوانید نوع متغیر هارو ببینید از typeofاستفاده میکنیم. مثال : ;))console.log(typeof(Fname ;))console.log(typeof(Lname ;))console.log(typeof(Age نکته :جاوا اسکریپت Case Sensetiveهست .بدین معنی که نسبت به حروف بزرگ و کوچک حساس است. مثال :این Nameبا این nameتفاوت دارد. 17 عملگرها در جاوا اسکریپت : : )+( – 1عملگر جمع : )-( – 2عملگر تفریق : )*( – 3عملگر ضرب : )/( – 4عملگر تقسیم : )%( – 5عملگر باقیمانده : )++( – 6عملگر افزایشی 1واحد : )--( – 7عملگر کاهشی 1واحد نکته :چند مورد دیگر از عملگر ها نیز وجود دارد که در ادامه با آن ها آشنا میشویم. : مثال .کد های زیر رو بنویسید و خروجی آن ها رو مشاهده کنید var Num1=15; var Num2=5; var Sum=Num1+Num2; var Minus=Num1-Num2; var Multiple=Num1*Num2; var Divide=Num1/Num2; var Mod=Num1%Num2; 18 var Number1=10; var Number2=15; Number1++; Number2--; console.log(Number1+'\n'+Number2); console.log('Sum Is :'+'15 And 5 = ' + Sum+'\n'+'Minus Is :'+'15 And 5 = '+Minus+'\n'+'Multiple Is :'+'15 And 5 = '+Multiple+'\n'+'Divide Is :'+'15 And 5 = '+Divide+'\n'+'Mod '+Num1+' % '+Num2+' Is :'+Mod+'\ n'); . نیز میتوانید برای چسباندن رشته ها باهم یا یک رشته با یک عدد نیز استفاده کنید+ از عملگر: نکته . عمل میکند و میتوانید از آن برای شروع یک خط جدید استفاده کنیدEnter ” نیز مانندn\“ و 19 دستور شرطی ifدر جاوا اسکریپت : همانطور که از نام این دستور پیداست برای شرط گذاری در برنامه مورد استفاده قرار میگیرد. – 1یک متغیر تعریف کرده و آن را مقدار دهی میکنیم. -2حال با استفاده از ifبررسی میکنیم میگم اگر مقدار Numberبزرگتر از عدد 5باشد تو consoleاین متن و چاپ کن. در غیر اینصورت این یکی پیغام رو چاپ کن. عملگر های مقایسه ای دیگری نیز وجود دارد مانند : == :این عمگلر برای بررسی برابر بودن مقدار ها بکار میرود. === :همانند == است با یک تفاوت که نوع آنها را نیز بررسی میکند. =< :این عملگر برای بزرگتر یا مساوی بکار میرود. => :و این عملگر برای کوچک یا مساوی بکار میرود. 20 توابع در جاوا اسکریپت : توابع در جاوا اسکریپت با کلمه کلیدی Functionتعریف میشوند. هدف اصلی استفاده از توابع تمیزی کد و جلوگیری از تکرار کد است. به اینصورت که ممکن است در بخشی هایی از برنامه کدهای یکسانی داشته باشیم و هر بار باید آن کدهارا تکرار کنیم که اصال درست و بهینه نیست. در این گونه موارد میایم از تابع ها استفاده میکنیم و در هر جایی از برنامه که الزم شد فقط اسم تابع رو صدا میزنیم. 21 مثال :تابعی رو مینویسیم که 2عدد را گرفته و آنهارا جمع کرده و برگرداند. این تابع دو تا ورودی میگیره و ما هر وقت که اسم تابع رو صدا میزنیم باید ورودی هارو بدیم بهش تا عمل جمع را انجام داده و برگرداند )function Sum(num1,num2 { ;return num1+num2 } ;))console.log(Sum(2,3 22 آرایه ها در جاوا اسکریپت : آرایه ها برای نگهداری چندین داده مورد استفاده قرار میگیرند. و نوع این داده ها مهم نیست میتوان رشته یا عدد و ...در آرایه ها ذخیره کرد. شکل تعرف آرایه ها به این صورت میباشد. ;نام آرایه=[داده ,1داده ,2داده var ]…,3 برای مثال کد زیر رو بنویسید و خروجی آن را مشاهده کنید. ;]var ProfileInfo=['Ali','Rezaei',30 ;)console.log(ProfileInfo نکته :آرایه ها از صفر شروع میشوند یعنی اندیس اولین خانه آرایه 0است. برای اینکه بتوانید مقدار خانه اول رو تو خروجی ببینید به این شکل عمل کنید. ;)]console.log(ProfileInfo[0 23 متد های آرایه : برای اینکه بتوانیم کارهای زیادی بر روی آرایه ها انجام بدیم از متد ها استفاده میکنیم. ‏var فرض کنید آرایه ای به این شکل درست کرده ایم. ];ProfileInfo=['Ali','Rezaei',30 : Push – 1از متد Pushوقتی استفاده میکنیم که بخواهیم مقدار جدیدی رو به آرایمون اضافه کنیم. ;)'ProfileInfo.push('Programmer : Unshift – 2این متد همانند متد باالیی عمل میکند با این تفاوت که مقدار جدید رو به اول آرایه اضافه میکند. ;)'ProfileInfo.unshift('programmer : Pop – 3این متد برای حذف کردن مقداری از آرایه بکار میرود. ;)(ProfileInfo.pop : Shift – 4این متد همانند متد Popعمل میکند با این تفاوت که عملیات حذف رو از خانه اول شروع میکند. ;)(ProfileInfo.shift : indexof – 5برای اینکه بتوانیم اندیس مقداری رو بدست بیاوریم از این متد استفاده میکنیم. 24 Objectها در جاوا اسکریپت : Objectها نیز شبیه آرایه ها با کمی تفاوت مقادیری را در خود نگهداری میکنند.با هم به بررسی آنها میپردازیم. Objectی به شکل زیر تعریف کرده ایم. برای اینکه بتونیم خروجی این objectرو مشاهده کنیم چنین عمل میکنیم. ;)console.log(Person و یا اگر میخواهید فقط مقدار Ageرو ببینید کافیست به این شکل پیاده سازی کنید .خروجی هر دو یکسان است. ;)console.log(Person.Age ;)]"console.log(Person["Age همچنین شما میتوانید مقادیر Keyها رو عوض بکنید. ;Person.Age=30 ;"Person["Family"]="Ahmadi , Value ‏Key 25 مثال – 1ابتدا Objectرو تعریف میکنیم و مقادیر آن رو Set میکنیم. – 2سپس پایین تر میخوایم مقادیر Objectرو تغییر بدیم. – 3و در نهایت خروجی میگیریم. نتیجه به این صورت خواهد بود. 26 استفاده از آرایه ها درون اسکریپت : ‏Objectدر جاوا ما میتوانیم از آرایه ها درون Objectاستفاده کنیم. شاید این سوال براتون پیش بیاد که به چه دردی میخوره بخوایم از آرایه ها استفاده کنیم. برای همین باهمدیگه یک مثال رو بررسی میکنیم. فرض کنید برنامه ای رو داریم مینویسیم که قراره اطالعات اشخاص رو بگیره و ذخیره کنه. – 1یک Objectبا نام personتعریف میکنیم. – 2این objectاطالعاتی مانند نام ،نام خانوادگی ،آدرس ،سن شخص رو میگیره. ممکن است شاید یک شخصی چند تا آدرس داشته باشه یا اگه قرار بود شماره تماس رو بگیریم شخص مقابل چند شماره داشته باشه در این مواقع میتوانیم از آرایه ها درون Objectاستفاده کنیم. مثال :مانند تصویر عمل کنید و خروجی رو مشاهده کنید. 27 استفاده از توابع درون Objectها در جاوا اسکریپت: فرض کنید برنامه ای رو مینویسیم که قرار است سن کاربران رو بر اساس تاریخ تولد آنها محسابه کرده و نمایش دهد در اینگونه موارد تابع یا همان Functionبه کمک ما میاید. به مثال زیر توجه کنید. در مثال روبرو مقدار Ageرو یک تابع در نظر گرفتیم که این تابع یک ورودی میگیره (.)Birthday حال این ورودی گرفته شده رو از 2019که سال جاری است کم میکنه و به ما برمیگردونه. و به همین صورت میتونیم خروجی رو مشاهده کنیم. 28 حلقه Forدر جاو اسکریپت : حلقه ها برای تکرار یک مقدار یا مقادیر مورد استفاده قرار میگیرند. فرض کنید میخواهیم مقادیر 1تا 100رو چاپ کنیم .با چیز هایی که تا االن یاد گرفتیم چیزی که به ذهنمون میرسه اینه که 100بار از )(console.logاستفاده کنیم. ولی با استفاده از حلقه ی Forپیاده سازی اینکارو خیلی آسانتر میکنه. طرز نوشتن forبه این صورت میباشد. )شمارنده;شرط حلقه;گام(For } ;//Code { 29 مثال :میخواهیم اعداد 1تا 20رو با اسفتده از حلقه forچاپ کنیم. – 1مقدار iرو برابر با 1قرار میدهیم. – 2میگیم تا وقتی iکوچکتر یا مساوی 20باشد این حلقه رو ادامه بده. – 3هر باری که حلقه میچرخه 1واحد به iاضافه میکنیم. روش کار برنامه به اینصورت است که ابتدا iبرابر 1 میباشد. بعد میاد بررسی میکنه آیا iاز 20کوچکتر یا مساوی آن است اگر شرط درس بود میاد پایین یکبار iرو که 1هست رو چاپ میکنه بعد ++iاجرا میشه 1واحد به iاضافه میشه. و این روند تا وقتی شرط پابرجاست ادامه پیدا میکنه. 30 حلقه Whileدر جاوا اسکریپت : حلقه whileخیلی شبیه به forهستش فقط شکل نگارشی آنها با یکدیگر فرق میکند. طرز نوشتن whileبه اینصورت میباشد. )شرط(While { ;Code } منطق دستور whileبه اینصورت است که تا زمانی شرط پا برجاست کد اجرا بشه. در ادامه یک مثال را باهم بررسی میکنیم. 31 مثال : – 1یک آرایه بنام Skillsتعریف میکنیم و چندتا مقدار برایش ست میکنیم. – 2میگیم تا وقتی که iکوچکتر از طول آرایه است مقادیر آرایه رو چاپ کن. نکته Skills.lenght :یک عدد برمیگردونه به اندازه طول آرایه 32 )Dom (Document Object Model تا اینجای کار ما با دستوراتی کار کردیم که تو همه زبان های برنامه نویسی وجود داره شاید تنها فرقشون این باشه که syntaxمتفاوتی داشته باشن. خب قرار است ما با Domآشنا بشیم که طرز کارش چیه و چگونه کار میکنه. ما با استفاده از Domمیتونیم مقادیر داخل تگ های Htmlو یا Cssهارو تغییر بدیم. 33 متد های : Dom در این بخش از متد ها میخواهیم متد هایی که برای پیدا کردن المنت ها مورد استفاده قرار میگیرد رو بررسی کنیم. – 1متد : getelementByIdاز این متد موقعی استفاده میکنیم که بخواهیم المنتی رو بر اساس idپیدا بکنیم. مثال: فرض کنید یه تگ pداریم با ”id=“demoمیخوایم این تگ رو پیدا کنیم و عملیاتی روش انجام بدیم. ;'document.getElementById('demo').innerHTML='Paragraph Is Changed با innerhtmlمحتوای تگ رو با مقدار ست شده تغییر میدهیم. 34 – 2متد getElementsByClassName :از این متد موقعی استفاده میکنیم که بخواهیم المنت هایی رو بر اساس Classپیدا بکنیم. مثال :تگی با ”Class=“boxداریم برای پیدا کردن این تگ بدین صورت عمل میکنیم. ;)"document.getElementsByClassName("box نکته id :ها منحصر بفرد هستن و یک idفقط برای یک تگ میتواند باشد. ولی یک classرو میتوان به چندین تگ داد. 35 – 3متد getElementsByTagName :از این متد موقعی استفاده میکنیم که بخواهیم المنت ها رو بر اساس نام تگ پیدا بکنیم. مثال :فرض کنید سه تا تگ pداریم برای پیدا کردن این تگها بدین صورت عمل میکنیم. ;)"document.getElementsByTagName("p 36 تمرین :کد های زیر رو بنویسید. 37 تمرین :کد های زیر رو بنویسید. 38 ایجاد تگ های Htmlبا جاوا اسکریپت : در جاوا اسکریپت ما میتوانیم به کمک دستورات Domتگ های htmlایجاد کنیم. با یکدیگر به بررسی این موضوع میپردازیم. فرض کنید یک Divداریم با ”id=“showکه هیچی توش نیس خالیه خالی. برای اینکه بتوانیم تگ ها رو ایجاد کرده و نگهداری کنیم باید آنهارا در متغیرها ذخیره کنیم. اولین قدم این است که دو تا متغیر ایجاد میکنیم. ;var pTag,text از pTagبرای ساخت یک pجدید و از textبرای ساخت محتوای تگ به شکل زیر استفاده کنیم. ;)'pTag=document.createElement('p ;)'text=document.createTextNode('This Is a Paragraph 39 سپس ما باید textرو به تگ pالحاق کنیم. حال باید تگ ساخته شده رو درون تگ divبتونیم نمایش دهیم برای اینکار باید divرو پیدا کرده و داخل یک متغیر ذخیره بکنیم. اکنون میتوانیم pرو درون divنمایش دهیم. ;)pTag.appendChild(text ;Var divTag ;)'divTag=document.getElementById('show ;)divTag.appendChild(pTag با استفاده از دستورات زیر نیز میتوانیم pرو حذف یا محتوای درونش رو با یه textدیگه جایگزین کنیم. ;)divTag.removeChild(pTag ;)"newText=document.createTextNode("new p ;)divTag.replaceChild(newText,pTag 40 استفاده از addEventListenerدر جاوا اسکریپت : ما وقتی addEventListenerرو صدا میزنیم از ما دو تا ورودی میخواد. اولی میگه که چه eventی رو میخوای استفاده کنی بر فرض مثال میخوایم وقتی clickشد. دومی از ما یک تابع میخواد. بدین صورت که وقتی کلیک میکنیم تابع اجرا میشه. با یکدیگر یک مثال رو حل میکنیم. 41 مثال :فرض کنید یک تگ pداریم با ”id=“p1میخوایم وقتی رو تگ کلیک شد تاریخ جاری رو نشون بده. 42 : querySelectorAll این متد خیلی شبیه به متد getElementByTagNameهست. مثال تو برنامه مون 10تا تگ pداریم قتی میخوایم از این متد اسفاده کنیم آرایه ای از pها رو ایجاد میکنه. به عکس روبرو توجه کنید. یک متغیر داریم که آرایه های از pهارو به واسطه ی متد querySelectorAllایجاد کرده ایم و با استفاده از حلقه for رنگ متن و رنگ پس زمینه رو تعیین کردیم. نتیجه 43 ): BOM (Browser Object Model Bomاز لحاظ منطقی خیلی شبیه به Domاست. Bomیه سری متد هایی دارد که سمت مروگر میتوان از آن ها استفاده کرد. برخی از این متد ها را باهم بررسی میکنیم. – 1برای اینکه آدرس صفحه ای رو که در آن هستیم نمایش بدیم به شکل زیر عمل میکنیم. ;window.location.href – 2از دستور زیر برای به دست آوردن نام هاست استفاده میکنیم. ;window.location.hostname – 3از این دستور نیز برای بدست آوردن پورت استفاده میکنیم. ;window.location.port - 4برای بدست آوردن پروتکل به شکل زیر عمل میکنیم. ;window.location.protocol – 5برای اینکه بتوانیم بفهمیم محل فایل در کجا قرار دارد از دستور زیر عمل میکنیم. 44 .() نداردalert این متد هیچ فرقی با: )(window.alert – متد6 window.alert("Hello world!"); Cancel وOk است با دو دکمهalert این متد نیز همانند: Confirm – متد7 confirm('Message'); if(confirm('Message')) { console.log('User Clicked On Ok'); } else{ console.log('User Canceled...'); } : مثال دارد وInput هستش با این تفاوت که یکConfirm شبیه: Prompt – متد8 .مقداری رو از کاربر در یافت میکند prompt('Enter Your Name'); 45 تمرین :برنامه ای بنویسید که یک عدد را از طریق Prompt گرفته و زوج یا فرد بودن عدد را در صفحه چاپ کند. 46 – 9متد : Screen.widthاز این متد موقعی استفاده میکنیم که بخواهیم عرض مرورگر رو بفهمیم. – 10متد : Screen.heightاز این متد موقعی استفاده میکنیم که بخواهیم ارتفاع مرورگر رو بفهمیم. – 11متد : Screen.availWidthاین متد عرض مرورگر در دسترس رو نشون میده. – 12متد : Screen.availHeightاین متد ارتفاع مرورگر در دسترس رو نشون میده. 47 مثال : 48 ‏JSON : JavaScript Object Notation JSONسرنام واژگان JavaScript Object Notationیک استاندارد سبک ،باز ، متنی و خوانا برای انسان جهت انتقال داده و جایگزینی برای xmlاست. JSONبرای تمامی برنامه نویسان از جمله قراردادهای مورد استفاده ی برنامه نویس C، C++، Java، Python، Perlشناخته شده است که به شرح زیر می باشد: JSONمخفف JavaScript Object Notationاست. فرمت آن برای اولین بار توسط Douglas Crockfordمعرفی شد. برای انسان خوانا بوده و ویژه ی انتقال داده طراحی شده است. از زبان اسکریپت نویسی JavaScriptمشتق شده است. پسوند فایل های با فرمت جی سن jsonمی باشد. Media typeاین فرمت انتقال داده application/jsonاست. شناسه ی متحدالشکل نوع ) )UTIآن public.jsonاست. 49 موارد استفاده ی : JSON به هنگام نوشتن برنامه های تحت وب مبتنی بر جاوا اسکریپت که افزونه هایی برای مرورگر و وب سایت ها را شامل می شوند بکار می رود. برای serializeکردن و انتقال داده های ساخت یافته از طریق اتصال شبکه بکار می رود. عمدتا برای انتقال داده بین سرور و برنامه های تحت وب بکار می رود. Web serviceها و APIها از فرمت JSONبرای ارائه ی داده هایpublic بهره می گیرند. تمامی زبان های برنامه نویسی روز از آن پشتیبانی می کنند. 50 ویژگی های : JSON خواندن و نوشتن در آن آسان است. یک فرمت متنی تبادل داده سبک و کم حجم است. با اینکه از زبان JavaScriptمشتق شده ،ازاین زبان کامال مستقل است و مفسر ))parserآن برای تمامی زبان ها موجود می باشد. 51 نحوه ساخت : JSON ساخت Jsonخیلی شبیه به Objectها است با کمی تفاوت. با یکدیگر به بررسی این موضوع میپردازیم. بعد اینکه Jsonرا ساختیم طبیعتا باید داخل یک متغیر نگهداری کنیم تا بتوانیم از آن استفاده کنیم. – 1یک متغیر میسازیم با نام . jsonData – 2گام دوم ساخت Jsonاست. ;var jsonData {=jsonData "name":"alireza", "age":29, ;} 52 – 3قدم بعدی نمایش Jsonاست .ما میتوانیم به چندین روش این کار رو انجام بدیم. ;)console.log(jsonData ;)console.log(jsonData.age ;)]"console.log(jsonData["age – 4ما میتوانیم درون jsonاز یک jsonدیگه نیز استفاده کنیم. {"Person": "Address":"Tehran", "Mobile":9140000000, ""Email":"Alireza@Gmail.com } – 5اکنون برای اینکه بتوانیم مقادیر این jsonرو نمایش بدیم به این صورت عمل میکنیم .فرض کنید میخواهیم مقدار Emailرو نمایش بدیم. ;)console.log(jsonData.Person.Email 53 مثال : 54 آرایه ها در : Json آرایه ها به این شکل تعریف میشوند. برای اینکه بتوانیم مقادیر آرایه رو نمایش بدیم بدین صورت عمل میکنیم. دستور for inنیز به این صورت پیاده سازی میشود. 55 ارسال و دریافت داده در : Json Jsonزبان مشترک بین زبان های برنامه نویسی است. فرض کنید برنامه ای نوشتیم که هم نسخه موبایل هم نسخه وب داریم و زبان برنامه نویسی این اپ ها کامال متفاوت است. برای اینکه بتوانیم هر دوی این برنامه ها مشترک کار بکنند باید چه کار کنیم. از Web Apiها استفاده میکنیم که با استفاده از زبان jsonاطالعات رو به این web apiارسال میکنیم که زبان مشترک بین زبان هاست. 56 متد : JSON.stringify برای ارسال داده از متد JSON.Stringifyاستفاده میکنیم. کارکرد این متد به چه شکل است؟ این متد یک Jsonرو میگیرد و اون رو تبدیل به یک رشته میکند تا بتوانیم ارسال بکنیم. ;}"var jsonData={"name":"alireza","family":"Rezaei ;)var Show=JSON.stringify(jsonData 57 متد : JSON.Parse برای دریافت داده از متد JSON.Parseاستفاده میکنیم. کارکرد این متد به چه شکل است؟ این متد یک Jsonرو میگیرد و اون رو تبدیل به یک Object میکند تا بتوانیم دریافت بکنیم. ;'}"var jsonData='{"lang":"Javascript","lib":"react.js ;)var show=JSON.parse(jsonData 58 مثال : 59 خب دوستان آموزش جاوا اسکریپت به پایان رسید. در کل هدف از این آموزش استارت جاوا اسکریپت بود تا با این زبان قدرتمند آشنا بشید. درخواست من از شما دوستان عزیز این است که یادگیری این زبان قدرتمند رو ادامه بدید هرگز از تالش دست نکشید. طبیعتا هیچ آموزشی از شما یک حرفه ای نمیسازد مهم تالش و پشت کار شما است که از خودتون یه حرفه ای میسازد. 60 برای تهیه این آموزش نهایت تالشم رو کردم اگر ایرادی اشکالی بود به بزرگواری خودتون ببخشید. خوشحال میشم نظرات و پیشنهادات خودتون رو با من در میون بزارید. ‏Dann.alireza@gmail.com