آموزش جاوا اسکریپت رایگان — صفر تا صد JavaScript
جاوا اسکریپت یکی از محبوب‌ترین زبان‌های برنامه نویسی جهان است. با استفاده از جاوا اسکریپت می‌توان صفحات وب تعاملی را ایجاد کرد. در واقع جاوا اسکریپت صفحات ایستای اچ تی ام ال را به صفحاتی پویا و تعاملی تبدیل می‌کند.
جاوا اسکریپت زبانی است که در مرورگر اجرا می‌شود. عناصری از صفحه وب که دائماً در حال تغییر و بروزرسانی هستند را می‌توان به وسیله جاوا اسکریپت پیاده سازی کرد. تصاویر متحرک، بخش کنترل کننده پخش ویدیو و موسیقی، فرم‌ها و تقریباً هر چیزی که در صفحات وب مشاهده می‌کنید را می‌توان به کمک جاوا اسکریپت پیاده سازی کرد.
در میان زبان‌های برنامه نویسی وب، جاوا اسکریپت پس از اچ تی ام ال و سی اس اس، سومین زبان مهم محسوب می‌شود. با استفاده از اچ تی ام ال و سی اس اس می‌توان صفحات وبی را ساخت که ظاهر مناسبی دارند اما کار چندانی در آن‌ها نمی‌توان انجام داد. در واقع این جاوا اسکریپ است که به ما کمک می‌کند تا وبسایت های زنده و تعاملی بسازیم. از جاوا اسکریپت می‌توان برای ساخت اپلیکیشن‌های موبایل و وب، وب سرور، بازی و غیره استفاده کرد.
امروزه جاوا اسکریپت نه تنها روی مرورگر، بلکه روی سرور نیز توانایی اجرا دارد. برای مثال، نود جی یک فریم ورک است که بر پایه جاوا اسکریپت نوشته شده و روی سرور اجرا می‌شود.
در مرورگرهای مختلف نظیر کروم و فایرفاکس، موتورهای مختلفی برای تفسیر، کامپایل و اجرای کد جاوا اسکریپت در نظر گرفته شده است.
در این مقاله قصد داریم به آموزش جاوا اسکریپت رایگان برای شما پرداخته و مهم‌ترین ویژگی‌های این زبان را برای شما شرح دهیم. بنابراین اگر می‌خواهید نحوه برنامه نویسی با این زبان را یاد بگیرید، مطالعه ادامه این مقاله را از دست ندهید.
اهمیت یادگیری جاوا اسکریپت
قبل از پرداختن به ویژگی‌های جاوا اسکریپت، بهتر است از اهمیت یادگیری آن آگاه شویم. مهم‌ترین دلیلی که می‌توانید برای یادگیری جاوا اسکریپت داشته باشید، این است که بخواهید تبدیل به یک برنامه نویس وب ماهر شوید. جاوا اسکریپت یک زبان به شدت تطبیق‌پذیر است. بنابراین توسعه دهنده وبی که بر جاوا اسکریپت مسلط باشد نیز توانایی انجام کارهای زیادی را خواهد داشت.
به عنوان یک برنامه نویس جاوا اسکریپت می‌توانید برای دو سمت کلاینت و سرور کد بنویسید. فریم ورک‌هایی وجود دارند که به شما در این زمینه کمک می‌کنند، مانند انگولار (برای کدنویسی سمت کلاینت) و نود جی اس (برای کدنویسی سمت سرور).
علاوه بر این‌ها می‌توان اپلیکیشن‌های دسکتاپ، وب و موبایل را به کمک فریم ورک ری اکت پیاده سازی کرد.
اگر بخواهید توسعه دهنده فرانت اند شوید، جاوا اسکریپت یک پیش نیاز ضروری در نظر گرفته می‌شود. البته برنامه نویسی وب تنها شغل موجود برای یک برنامه نویس جاوا اسکریپت نیست.
برنامه نویس جاوا اسکریپت می‌تواند در زمینه امنیت اطلاعات در مهندسی نرم افزار، یادگیری ماشین، هوش مصنوعی و توسعه بازی‌های کامپیوتری نیز فعالیت کند.
برنامه نویسان جاوا اسکریپت جزو کسانی هستند که نیاز زیادی به مهارت آن‌ها وجود دارد. همچنین حقوق مناسبی نیز به افراد مسلط بر جاوا اسکریپت پرداخت می‌شود.
جاوا اسکریپت یکی از زبان‌هایی است که آغاز کار با آن بسیار ساده است. جاوا اسکریپت را می‌توان در هر مرورگر مدرنی اجرا کرد و نیازی به تنظیم محیط توسعه برای شروع کار با آن نیست. این به آن معناست که می‌توانید کار با جاوا اسکریپت را فوراً آغاز کنید.
همچنین می‌توانید نتیجه اجرای کدهای خود را به سرعت در مرورگر مشاهده کنید. علاوه بر این، جاوا اسکریپت از شیوه‌های برنامه نویسی شی گرا و ساخت یافته پشتیبانی می‌کند. بنابراین با یادگیری این زبان می‌توانید مفاهیم مهم برنامه نویسی را آموخته و زبان‌هایی نظیر پایتون، جاوا یا سی پلاس پلاس را راحت‌تر یاد بگیرید.
فریم ورکها (Framework) و کتابخانه‌های قدرتمند زیادی نیز به زبان جاوا اسکریپت نوشته شده‌اند. بنابراین برای یادگیری این فریم ورکها و کتابخانه‌ها و درک نحوه کار آن‌ها بهتر است ابتدا به زبان جاوا اسکریپت مسلط شوید.
جاوا اسکریپت یکی از مهم‌ترین زبان‌های برنامه نویسی دنیا است
معرفی فریم ورک ها و کتابخانه های معروف جاوا اسکریپت
از آنجایی که جاوا اسکریپت یک زبان محبوب و قدرتمند است، فریم ورک‌های قدرتمندی نیز بر پایه این زبان توسعه داده شده‌اند. منظور از یک فریم ورک جاوا اسکریپت، یک مجموعه نرم افزاری است که دارای امکاناتی از پیش آماده شده برای توسعه آسان‌تر اپلیکیشن‌های جاوا اسکریپت باشد.
هر فریم ورک جاوا اسکریپت برای مقاصد خاصی طراحی شده است. ساخت یک اپلیکیشن جاوا اسکریپت از صفر می‌تواند کاری نسبتاً زمان بر باشد. در این جاست که فریم ورکها به کمک توسعه دهنده می‌آیند.
۶ فریم ورک و کتابخانه مهم جاوا اسکریپت عبارت‌اند از:
- فریم ورک Node.js: نود جی اس از نظر فنی یک فریم ورک نیست، بلکه یک محیط زمان اجرا محسوب می‌شود. با استفاده از نود جی اس می‌توانید از یک خط فرمان قدرتمند بهره مند شده و اسکریپت نویسی سمت سرور را انجام دهید.
- فریم ورک Vue.js: از این فریم ورک برای ساخت رابط کاربری و اپلیکیشن‌های تک صفحه‌ای استفاده می‌شود. یادگیری و تسلط به این فریم ورک زمان زیادی نمی‌برد و این از نقاط قوت آن محسوب می‌شود.
- فریم ورک AngularJS: این فریم ورک توسط گوگل توسعه داده شده و به شما در ساخت اپلیکشین‌های تک صفحه‌ای کمک می‌کند.
- فریم ورک Ember.js: این فریم ورک بر پایه یک الگوی مبتنی بر مؤلفه-سرویس کار می‌کند. مؤلفه‌ها موقتی بوده و برای دستکاری استایل رابط کاربری اپلیکیشن استفاده می‌شوند. سرویس‌ها نیز اشیایی هستند که در طول عمر اپلیکیشن فعال هستند.
- فریم ورک React: ری اکت یک فریم ورک جاوا اسکریپت است که توسط شرکت فیسبوک (البته در حال حاضر نام فیسبوک به متا تغییر کرده است) توسعه داده شده است. ری اکت، توسعه رابط کاربری تعاملی را بسیار آسان کرده است.
- کتابخانه جی کوئری (jQuery): جی کوئری کتابخانه‌ای است که برنامه نویسی با جاوا اسکریپت را بسیار آسان کرده است. انجام بسیاری از وظایف با جاوا اسکریپت نیازمند نوشتن چندین خط کد است. اما همان وظایف را می‌توان با استفاده از جی کوئری در یک خط خلاصه کرد.
برای یادگیری فریم ورکها و کتابخانه‌های معروف جاوا اسکریپت، می‌توانید به صفحات زیر در فرادرس مراجعه کنید.
- آموزش مقدماتی کتابخانه ReactJS در جاوا اسکریپت
- آموزش فریم ورک انگولار جی اس AngularJS برای ساخت اپلیکیشن
- آموزش ویو جی اس Vue.js
- آموزش فریم ورک Node.js
- آموزش کاربردی برنامه نویسی جی کوئری jQuery
ویژگی های جاوا اسکریپت
مهم‌ترین ویژگی‌های جاوا اسکریپت را در این قسمت مرور خواهیم کرد.
جاوا اسکریپت یک زبان سبک است:
جاوا اسکریپت یک زبان سبک است چرا که تنها برای مدیریت داده‌ها در مرورگر طراحی شده است. از آنجایی که جاوا اسکریپت یک زبان همه منظوره نیست، کتابخانه‌های محدودی برای آن وجود دارد. بنابراین این زبان یک زبان سبک محسوب می‌شود.
انواع داده پویا:
در جاوا اسکریپت، نوع داده با توجه به مقدار ذخیره شده در آن مشخص می‌شود. برای مثال اگر یک متغیر با نام x تعریف کنید، می‌توانید در آن هر مقداری از یک رشته گرفته تا یک عدد یا حتی یک آرایه را ذخیره کنید. اما در زبانی مانند جاوا، باید ابتدا صریحاً نوع متغیر را تعریف کنید.
پشتیبانی از شی گرایی:
در جاوا اسکریپت از مفاهیم کلاس و شی پشتیبانی می‌شود.
مستقل از پلتفرم بودن:
جاوا اسکریپت یک زبان قابل حمل است. به این معنا که می‌توانید به سادگی یکبار کد خود را نوشته و آن را همه جا اجرا کنید. اپلیکیشن‌های نوشته شده با جاوا اسکریپت را می‌توانید روی هر پلتفرم و مرورگری اجرا کنید، بدون این که تغییری در خروجی مشاهده کنید.
اعتبارسنجی آسان فرم‌ها:
در بسیاری از سایت‌ها فرم‌هایی وجود دارند که کاربران اطلاعات خود را در آن‌ها وارد می‌کنند. در هر بخش از این فرم‌ها باید مقادیر صحیحی قرار بگیرد. سنجش این موضوع با استفاده از جاوا اسکریپت به راحتی امکان پذیر است.
کنترل و مدیریت بهتر مرورگر:
جاوا اسکریپت یک زبان سمت کلاینت است که امکانات زیادی را برای کمک به توسعه دهنده در زمینه تعامل سرور و کلاینت فراهم می‌کند. در واقع توسعه دهنده می‌تواند با استفاده از جاوا اسکریپت از باری که سرور تحمل می‌کند بکاهد. اعتبارسنجی اولیه داده‌های وارد شده در فرم‌ها، ذخیره موقت داده‌ها با استفاده از کوکی و غیره مواردی هستند که با استفاده از جاوا اسکریپت قابل پیاده سازی است.
توسعه دهنده جاوا اسکرپیت
کاربرد های مهم جاوا اسکریپت
قبل از پرداختن به آموزش جاوا اسکریپت رایگان، بهتر است با کاربردهای مهم این زبان آشنا شوید. محبوبیت جاوا اسکریپت باعث شده است که این زبان کاربردهای وسیعی در برنامه نویسی سمت کاربر (Front End) و برنامه نویسی سمت سرور داشته (Back End) داشته باشد. تقریباً در هر زمینه‌ای از توسعه نرم افزار می‌توانید رد پایی از جاوا اسکریپت را پیدا کنید. مهم‌ترین کاربردهای جاوا اسکریپت عبارت‌اند از:
- اعتبارسنجی داده‌های وارد شده توسط کاربر:
بسیار مهم است که داده‌های ورودی کاربر را قبل از ارسال به سرور، اعتبارسنجی کرد. جاوا اسکریپت نقش مهمی در اعتبارسنجی داده‌ها در سمت کاربر بازی می‌کند.
- دستکاری صفحات اچ تی ام ال:
حذف و اضافه کردن انواع تگ اچ تی ام ال به کمک جاوا اسکریپت بسیار ساده است. ظاهر صفحات اچ تی ام ال را می‌توان به کمک جاوا اسکریپت برای دستگاه‌های مختلف شخصی سازی کرد.
- ارسال اعلان به کاربران:
می‌توانید از جاوا اسکریپت برای نشان دادن انواع اعلان پویا به کاربران در صفحات وب استفاده کرد.
- بارگذاری داده‌ها در سمت سرور:
با استفاده از کتابخانه Ajax که در جاوا اسکریپت فراهم شده است می‌توان داده‌های سمت سرور را در حالی که پردازش دیگری در حال انجام است، بارگذاری کرد. این مسئله بسیار بر تجربه کاربری بازدیدکنندگان وبسایت تأثیر مثبت خواهد گذاشت.
- کاربردهای سمت سرور:
ابزارهایی مانند نود جی اس که با استفاده از جاوا اسکریپت توسعه داده شده‌اند، ساخت اپلیکیشن‌های سمت سرور مانند وب سرورها را بسیار آسان کرده‌اند.
پیش نیاز های یادگیری جاوا اسکریپت
برای شروع برنامه نویسی به زبان جاوا اسکریپت، نیازی نیست که دانشی درباره جاوا اسکریپت از قبل داشته باشید. اما باید حداقل با سی اس اس (CSS) و اچ تی ام ال (HTML) آشنا باشید. در همین رابطه، به شما توصیه می‌کنیم آموزش‌های سی اس اس و اچ تی ام ال را از فرادرس تهیه و مشاهده کنید. با مشاهده این آموزش‌ها کاملاً می‌توانند شما را برای یادگیری جاوا اسکریپت آماده کنند.
آغاز به کار با جاوا اسکریپت
پس از آشنایی با جاوا اسکریپت، اهمیت یادگیری آن و اشاره به مهم‌ترین ویژگی‌های آن، می‌توانیم کار با جاوا اسکریپت را آغاز کنیم.
محیط توسعه جاوا اسکریپت
برای توسعه یک وب اپلیکیشن با جاوا اسکریپت، به حداقل دو چیز نیاز خواهید داشت:
· یک مرورگر
· یک ویرایشگر کد
اگرچه برای اجرای وب اپلیکیشن به یک وب سرور نیز نیاز خواهید داشت، اما در اینجا استفاده از یک صفحه وب اچ تی ام ال کافیست و نیازی به نصب وب سرور وجود ندارد.
معمولاً روی هر کامپیوتری یک مرورگر به صورت پیش‌فرض نصب شده است. بهتر است مرورگرهای کروم یا فایرفاکس را نصب داشته باشید. در آموزش جاوا اسکریپت رایگان، باید نحوه استفاده از محیط‌های توسعه این زبان نیز پوشش داده شود.
انتخاب IDE برای توسعه جاوا اسکریپت
می‌توانید کد جاوا اسکریپت را به وسیله یک ویرایشگر کد ساده مانند نوت پد بنویسید. اما نوت پد امکانات زیادی در اختیار شما قرار نمی‌دهد.
بهتر است برنامه خود را در محیطی بنویسید که امکانات مناسبی برای ویرایش کد و رفع خطا در اختیار شما قرار دهد. محیط توسعه یکپارچه یا IDE، نرم افزاری است که ابزارهای مخصوص توسعه در آن قرار دارد. بعضی از بهترین IDEها و ویرایشگرهای کدی که می‌توانید برای برنامه نویسی جاوا اسکریپت استفاده کنید عبارت‌اند از:
· ویژوال استودیو کد
· اکلیپس
· اتم
· نوت پد پلاس پلاس
همچنین ویرایشگرهای کد آنلاین نیز برای جاوا اسکریپت وجود دارند که برای مقاصد آموزشی می‌توانید از آن‌ها استفاده کنید، از جمله:
· سایت jsfiddle.net
· سایت jsbin.com
استفاده از کد جاوا اسکریپت در فایل اچ تی ام ال
می‌توان در میان کدهای اچ تی ام ال، کدهای جاوا اسکریپت را نیز تعبیه کرد. این کار را می‌توانید با استفاده از تگ اچ تی ام ال انجام دهید. زمانی که فایلی حاوی تگ اسکریپت را در مرورگر باز کنید، مرورگر کد نوشته شده در تگ اسکریپت را به عنوان کد جاوا اسکریپت تشخیص داده و آن را اجرا می‌کند.
کد اسکریپت یا می‌تواند حاوی دستورات جاوا اسکریپت باشد یا این که به یک فایل جاوا اسکریپت ارجاع داده شود. تگ اسکریپت می‌تواند شامل یک attribute به نام src باشد که با استفاده از آن می‌توان ارجاع به فایل خارجی جاوا اسکریپت را انجام داد.
در تکه کد زیر می‌توانید نحوه نوشتن تگ اسکریپت و ارجاع به فایل جاوا اسکریپت را مشاهده کنید:
<script data-src=”JS_FILE_URL” type=”…”>
استفاده از یک فایل جداگانه برای کدهای جاوا اسکریپت، می‌تواند به تمیز به نظر رسیدن کد و فهم بهتر آن بسیار کمک کند. همچنین می‌توانید فایل‌ها را در صفحات وب مختلف استفاده کنید. از طرفی فایل‌های جاوا اسکریپت در مرورگر cache شده و با یک بار اجرای آن، مرورگر نیازی به اجرای دوباره آن در دفعات بعد ندارد. بنابراین سرعت بارگذاری صفحه وب بسیار افزایش خواهد یافت.
در قطعه کد زیر، نمونه‌ای از ارجاع به فایل جاوا اسکریپت را مشاهده می‌کنید:
<html>
<head>
<title>my first JavaScript</title>
<script src=”jsfile.js”>
</head>
<body>
<p id=”script”>this is the old text</p>
<button type=”button” =”text()”>Click this button to use JavaScript</button>
</body>
</html>
به طور مشابه می‌توان از تگ اسکریپت برای نوشتن مستقیم دستورات جاوا اسکریپت نیز استفاده کرد:
<script type=”text/javascript”>
// JS code here
تگ اسکریپت، دارای attributeهای دیگری نیز است که در ادامه به آن‌ها اشاره می‌کنیم. منظور از attribute یا صفت، اطلاعات اضافه‌ای است که می‌توان درباره یک عنصر بیان کرد.
مهم‌ترین صفت‌های تگ اسکریپت
·صفت Async: مشخص کننده اجرای ناهمزمان اسکریپت است
· صفت type: مشخص کننده نوع محتوای زبان اسکریپت نویسی است. مقادیری مانند text، JavaScript application و JavaScript text را می‌تواند داشته باشد.
·صفت charset: مشخص کننده نوع انکدینگ (encoding) مورد استفاده در اسکریپت است
· صفت defer: مشخص کننده این است که اسکریپت، تولید کننده محتوای خاصی نخواهد بود.
نمونه‌ای از کد جاوا اسکریپت
سینتکس جاوا اسکریپت
در این قسمت از آموزش جاوا اسکریپت رایگان، با سینتکس این زبان آشنا خواهید شد. منظور از سینتکس، قوانین نوشتاری یک زبان برنامه نویسی است. در واقع سینتکس تعیین کننده چیزهایی که می‌توانید بنویسید و چیزهایی که نمی‌توانید بنویسید است.
جاوا اسکریپت دارای سینتکس مخصوص به خود است. اگر از قبل با زبان‌هایی مانند سی، سی پلاس پلاس یا جاوا کار کرده باشید، یادگیری سینتکس جاوا اسکریپت برای شما آسان خواهد بود.
مهم‌ترین قواعد نوشتاری جاوا اسکریپت را با هم مرور می‌کنیم.
· گذاشتن یک سمیکالن در انتهای هر دستور الزامی است
· از فواصل خالی صرف نظر می‌شود
· نسبت به حروف بزرگ و کوچک حساسیت وجود دارد
· امکان کامنت گذاری برای یک یا چند خط وجود دارد
در ادامه مثال‌هایی را برای آشنایی بهتر با سینتکس جاوا اسکریپت با هم مرور خواهیم کرد.
تعریف متغیر در جاوا اسکریپت
در زبان‌های برنامه نویسی، از متغیر برای نگهداری داده استفاده می‌شود. در جاوا اسکریپت از کلمات کلیدی let، var و const برای تعریف متغیر استفاده می‌شود. یک علامت مساوی برای اختصاص مقدار به متغیر استفاده می‌شود.
در مثال زیر، x به عنوان یک متغیر تعریف شده است. سپس مقدار 6 به آن اختصاص داده شده است:
let x;
x = 6;
استفاده از متغیرها در جاوا اسکریپت
در مثال زیر، دو متغیر تعریف شده و مقادیری به هر کدام داده شده است. متغیر سوم را بر اساس جمع دو متغیر قبلی تغریف کرده‌ایم:
// How to use variables:
x = 5;
y = 6;
let z = x + y;
تعریف رشته در جاوا اسکریپت
رشته‌ها، یا همان مقادیر متنی را می‌توان با استفاده از دابل کوتیشن یا تک کوتیشن در جاوا اسکریپت تعریف کرد:
"John Doe"
'John Doe'
استفاده از عملگرها در جاوا اسکریپت
عملگرهای معروفی که برای انجام محاسبات به کار می‌روند، در جاوا اسکریپت نیز کاربرد دارند:
- عملگر جمع (+)
- عملگر منها (-)
- عملگر ضرب (*)
- عملگر تقسیم (/)
مثالی از بکارگیری عملگرها در جاوا اسکریپت را مشاهده کنید:
(5 + 6) * 10
کلمات کلیدی در جاوا اسکریپت
جاوا اسکریپت نیز مانند بسیاری از زبان‌های برنامه نویسی دارای کلید واژ‌ه‌هایی است که کاربردهای مختلفی دارند، از جمله:
- کلید واژه let
- کلید واژه var
- کلید واژه class
- کلید واژه if
- کلید واژه new
- و چندین و چند کلید واژه دیگر
نحوه کامنت گذاری (Comment) در جاوا اسکریپت
شاید نخواهید که تمامی دستورات جاوا اسکریپتی که نوشته‌اید، در مرورگر اجرا شوند. می‌توان با استفاده از علائم کامنت‌گذاری، این کار را انجام داد. با گذاشتن دو علامت اسلش (/) در ابتدای یک دستور، می‌توان از اجرای آن جلوگیری کرد. به مثال زیر نگاه کنید:
// x = 6; I will NOT be executed
همچنین اگر دستوراتی را بین دو علامت */ و */ قرار دهیم، آن دستورات اجرا نخواهند شد.
جاوا اسکریپت را به صورت حرفه‌ای بیاموزید
در این مطلب سعی کردیم زبان جاوا اسکریپت و ویژگی‌های آن را به صورت پایه‌ای و ساده توضیح دهیم.
اگر علاقمند هستید تا چیزهای بیشتری را درباره این زبان کاربردی و مهم یاد بگیرید به فرادرس مراجعه کنید تا از آموزش‌های بی‌نظیر آن در زمینه برنامه نویسی و زبان جاوا اسکریپت بهره مند شوید.
این سایت، بهترین مرجع آموزش آنلاین در ایران است که دوره‌های آموزشی آن توسط بهترین اساتید تهیه شده است. برای تهیه و مشاهده دوره‌های آموزشی جاوا اسکریپت، می‌توانید به صفحه زیر مراجعه کنید.