در این سری از آموزش‌ها قصد داریم درباره آموزش جاوا اسکریپت صحبت کنیم و آموزش کاملی را درباره این زبان به شما ارائه دهیم. احتمالا اولین سوالی که در خصوص این آموزش جاوا اسکریپت رایگان برای شما به وجود می‌آید این است که کدهای زبان برنامه‌نویسی جاوا اسکریپت را در چه محیطی می‌نویسیم و محیط استاندارد توسعه این زبان چه محیطی است؟ در پاسخ به این سوال باید گفت که ما کدهای جاوا اسکریپت را در این دوره آموزش جاوا اسکریپت به زبان ساده در ویژوال استودیو کد می‌نویسیم که یک IDE محبوب و سبک است. شما می‌توانید این IDE را از طریق آدرس اینترنتی code.visualStudio.com دانلود کرده و روی سیستم خود نصب کنید.
علاوه بر این گروهی از ویرایشگرهای آنلاین نیز وجود دارند که از جمله آنها می‌توان به playcode.io اشاره کرد. این سایت یک‌سری از فایل‌های پیش‌فرض را برای شما قرار می‌دهد که شما می‌توانید در داخل این فایل‌ها دستورات پیش‌فرضی را بنویسید. این ابزار به‌صورت خودکار نتایج را به شما نمایش داده و خروجی را نیز نشان می‌دهد. از این ابزار بیشتر می‌توان برای مسائل آموزشی استفاده کرد و از مزایایی که ارائه می‌دهد نهایت بهره را ببرید. البته باید دقت داشته باشید که IDEها نیز مسائل چندان پیچیده‌ای ندارند و شما متناسب با شرایط خود می‌توانید از هریک از این ابزارها استفاده کنید.
جاوا اسکریپت
نکاتی درباره زبان برنامه‌نویسی جاوا اسکریپت
در اولین بخش از آموزش جاوا اسکریپت اجازه دهید تا کمی بیشتر با این زبان و ویژگی‌های آن آشنا شویم. یکی از مهم‌ترین ویژگی‌های این زبان برنامه‌نویسی این است که کدهای آن به‌راحتی توسط مرورگر قابل‌فهم هستند و شما بدون استفاده از هیچ‌گونه IDE و تنها یک ویرایشگر متن ساده نیز می‌توانید کدهای جاوا اسکریپت را نوشته و اجرا کنید. به‌عنوان‌مثال در اولین مثال از آموزش javascript یک فایل متنی ساده ایجاد کرده و نام آن را javascript.txt قرار دهید. سپس کدهای زیر را داخل این فایل قرار دهید:
<script>
console.log(“ hello java script “);
</script>
دقت داشته باشید که نیازی نیست در حال حاضر هیچ نکته‌ای درباره این کدها بدانید، در این بخش صرفا قصد داریم نحوه اجرای کدها را به شما نمایش دهیم. حال فایل را ذخیره کرده و سپس آن را ببندید. در مرحله بعدی از آموزش javascript رایگان شما باید روی این فایل راست کلیک کرده و گزینه rename را انتخاب کنید و سپس پسوند این فایل را از txt به html تغییر دهید. حال با بازکردن این فایل شما وارد مرورگر می‌شوید. ازآنجایی‌که هیچ کد html وجود ندارد چیزی به شما نمایش داده نمی‌شود، در صفحه راست کلیک کرده و گزینه inspect را انتخاب کنید. با این کار وارد محیط کنسول می‌شوید. در این بخش مشاهده می‌کنید که دستوری که نوشته‌اید اجرا شده است و خروجی آن نیز برای شما نمایش داده می‌شود.
ساخت پوشه پروژه‌ها
ساخت پوشه پروژه‌ها در ویژوال استودیو کد
در ادامه آموزش جاوا اسکریپت قصد داریم کمی بیشتر درباره محیط ویژوال استودیو کد صحبت کنیم و اطلاعاتی را دراین‌خصوص در اختیار شما قرار دهیم. در ابتدا روی آیکون ویژوال استودیو کد کلیک کرده و وارد محیط آن شوید. با کلیک‌کردن روی گزینه File چندین گزینه برای شما نمایش داده می‌شود که شما باید گزینه open folder را انتخاب کرده و سپس اقدام به ساخت یک پوشه برای پروژه‌های خود در آموزش جاوا اسکریپت پروژه محور کنید. این پوشه در واقع به‌عنوان یک محیط کار در نظر گرفته می‌شود که شما می‌توانید فایل‌های مختلفی را در داخل آن ایجاد کنید.
کار با ویژوال استودیو کد
ادامه کار با ویژوال استودیو کد
دقیقا در کنار نام پوشه‌ای که در بخش قبلی ایجاد کردید می‌توانید یک گزینه new file را مشاهده کنید. در این بخش از آموزش جاوا اسکریپت شما باید روی این گزینه کلیک کنید تا یک فایل جدید برای شما ساخته شود. نام این فایل را main.html قرار دهید تا ویژوال استودیو کد شما متوجه شود که شما قصد دارید کدهای html خود را در داخل این فایل قرار دهید. حال در صفحه‌ای که برای شما باز می‌شود شما می‌توانید انواع دستورات html را وارد کرده و آنها را اجرا کنید.
حال با تایپ‌کردن عبارت doc و زدن اینتر کدهای پیش فرض html برای شما ظاهر می‌شود که به شکل زیر خواهند بود:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta http-equiv = “ X-UA-Compatible” content=”IE-edge”>
<meta name=”viewport” content= ” width = device-width, initial-scale = 1.0”>
<title>Document</title>
</head>
<body>
</body>
</html>
حال شما برای نوشتن کدهای جاوا اسکریپت باید کدهای خود را داخل یک تگ اسکریپت و در انتهایی‌ترین بخش تگ body قرار دهید. قطعه کد زیر را در نظر بگیرید:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta http-equiv = “ X-UA-Compatible” content=”IE-edge”>
<meta name=”viewport” content= ” width = device-width, initial-scale = 1.0”>
<title>Document</title>
</head>
<body>
<script>// در این قسمت می‌توان کدهای جاوا اسکریپت را قرارداد
</script>
</body>
</html>
با این حال در پروژه‌های بزرگ‌تر بهتر است که فایل‌های جاوا اسکریپت خود را به‌صورت کامل جدا کنید. به همین علت ما در دوره آموزش جاوا اسکریپت رایگان نیز همین کار را انجام خواهیم داد.
ساخت فایل جاوا اسکریپت
ساخت فایل‌های جاوا اسکریپت در ویژوال استودیو کد
برای ساخت یک فایل جدید جاوا اسکریپت در این آموزش جاوا اسکریپت شما باید روی گزینه new file کلیک کرده و نام آن را Scripts.js قرار دهید. ویژوال استودیو کد متوجه می‌شود که کدهای شما به زبان جاوا اسکریپت است و آیکون فایل شما را تغییر می‌دهد. حال برای این‌که کدهایی که در این فایل می‌نویسید در مرورگر نیز اجرا شوند شما باید منبع فایل خود را به فایل html که در بخش قبلی ساختید معرفی کنید که این کار نیز از طریق یک تگ اسکریپت قابل انجام خواهد بود. برای انجام این کار قطعه کد زیر را در نظر بگیرید:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta http-equiv = “ X-UA-Compatible” content=”IE-edge”>
<meta name=”viewport” content= ” width = device-width, initial-scale = 1.0”>
<title>Document</title>
</head>
<body>
<script src=”./Scripts.js”>
</script>
</body>
</html>
حال در فایل جاوا اسکریپت خود عبارت زیر را وارد کنید:
Console.log(“ connected… “);
با اجرا کردن این کد مرورگر شما باز می‌شود. ازآنجایی‌که در کدهای Html کد خاصی ننوشته‌ایم چیزی برای ما نمایش داده نمی‌شود. به همین علت نیز باید روی صفحه راست کلیک کرده و گزینه inspect را انتخاب کنیم. در ادامه وارد صفحه کنسول شده و مشاهده می‌کنید که عبارت connected… برای شما چاپ شده است.
این صفحه کنسول دارای کاربردهای زیادی در برنامه‌نویسی به زبان جاوا اسکریپت است و می‌تواند برای دیباگ کردن پروژه‌ها نیز بسیار مفید باشد.
قسمت بعدی آموزش رایگان جاوا اسکریپت:
یا جهت مشاهده ویدیوهای اموزشی آموزش رایگان جاوا اسکریپت وارد این صفحه شوید.