چیزایی که توی دوره «سی درس جاوااسکریپت» قراره بنویسم، هم به درد تازه‌کارا می‌خوره، هم کسایی که چند وقتیه دارن با جاوااسکریپت کار می‌کنن و دوست دارن چیزای بیشتری ازش یاد بگیرن. جاوااسکریپت زبونیه که برای برنامه‌نویسی وب استفاده می‌شه، من چند سالیه که دارم ازش استفاده می‌کنم و برام خیلی جذابه؛ به نظرم رسید وقتشه یه چیزایی درباره‌ش بنویسم تا هم ذهن خودم منظم‌تر بشه، هم شاید به درد کسی بخوره. تصمیم دارم از چیزای خیلی اساسی و ساده شروع کنم و برم جلو. برای همراه شدن با دوره پیش‌نیازی وجود نداره و لازم نیست درباره برنامه‌نویسی چیزی بدونید. اگه یه پیش‌زمینه مختصر از HTML و CSS داشته باشید که خوبه، اما اگه نداشتید هم مشکلی براتون پیش نمیاد، کافیه انگیزه کافی داشته باشید و البته یه کامپیوتر که به اینترنت وصل باشه.
قبل از هر چیزی تبریک می‌گم که تصمیم گرفتید جاوااسکریپت یاد بگیرید (یا درباره‌ش چیزای بیشتری بدونید). جاوااسکریپت پرکاربردترین زبان برنامه‌نویسی در گیت‌هابه (این از انگیزه)؛ همون طوری که اشاره کردم، زبونیه که برای برنامه‌نویسی صفحات وب استفاده می‌شه و با این که کاربرد اصلیش برنامه‌نویسیِ فرانت‌انده، اما کارای دیگه‌ای هم هست که می‌شه باهاش انجام داد: می‌تونید باهاش برنامه‌نویسی سرور انجام بدید، اپلیکیشن موبایل و دسکتاپ بنویسید و حتی بازی بسازید و هوش مصنوعی کار کنید؛ تصور کنید همه این کارها رو می‌تونید با یاد گرفتن یه زبون برنامه‌نویسی انجام بدید و برای همینه که جاوااسکریپت این قدر جذابه.
برای شروع کار باید یه ویرایشگر کد نصب کنیم. من از VS Code استفاده می‌کنم که متن‌بازه و نرم‌افزار سبکیه. توی گوگل سرچ کنید VS Code، آخرین نسخه برنامه رو از سایت رسمی‌ش دانلود کنید و با تنظیمات پیش‌فرض نصب کنید؛ بعد از این که نصب شد، این مراحل رو انجام بدید:
- یه فولدر روی دسکتاپ (یا هر جای دیگه) بسازید و یه اسمی براش انتخاب کنید
- برنامه VS Code رو باز کنید
- از منوی File گزینه Open Folder رو انتخاب کنید
- فولدری که ساختید رو باز کنید
حالا یه جایی روی فضای خالی پنل سمت چپ کلیک راست کنید و New File رو بزنید تا یه فایل جدید ساخته بشه. اسم فایل جدید رو index.html بذارید.
تا این جای کار یه فولدر ساختیم که قراره فایلای پروژه رو توش بذاریم و داخل اون فولدر یه فایلِ HTML ساختیم که قراره فایل اصلی پروژه ما باشه. حالا کد پایین رو کپی کنید داخل فایلی که ساختید.
<!DOCTYPE html>
<html>
<head>
<title>Javascript in 30</title>
</head>
<body>
<button onclick="alert('Hello!')">Click Here</button>
</body>
</html>این کد در عمل چه کاری انجام می‌ده؟
برنامه VS Code خیلی برنامه محبوبیه، قابلیت‌های خیلی زیادی داره و هزاران افزونه براش نوشته شده. البته این دوره آموزشی درباره VS Code نیست، اما دوره‌های آموزشی VS Code به زبان فارسی توی اینترنت هست، اگه دوست داشته باشید، می‌تونید شرکت کنید و با قابلیت‌های این برنامه آشنا بشید. ما الان فقط افزونه Live Server رو نصب می‌کنیم تا بتونیم تغییراتی که روی فایلمون انجام می‌دیم رو به صورت هم‌زمان روی مرورگر ببینیم؛ این طوری دیگه لازم نیست هر دفعه که تغییری توی فایلمون انجام می‌دیم، صفحه مرورگرو رفرش کنیم. از منوی سمت چپ VS Code روی آیکون Extentions کلیک کنید (اون که چهار تا مربعه) تا بخش افزونه‌ها باز بشه و افزونه Live Server رو نصب کنید.
بعد که افزونه نصب شد، برگردید به فایل index.html و از نوار آبی‌رنگ پایین صفحه دکمه Go Live رو بزنید و ببینید کدی که توی صفحه کپی کردید چی‌کار می‌کنه.
مرورگرها می‌تونن فایل‌هایی رو باز کنن که پس‌وندشون HTML باشه؛ پس اگه ما بخوایم کد جاوااسکریپتی بنویسیم که مرورگر اجرا کنه، باید توی یه فایل HTML این کارو انجام بدیم. برای نوشتن جاوااسکریپت توی صفحه HTML، سه تا روش وجود داره که الان هر کدومو توضیح می‌دم:
- Inline
- Internal
- External
Inline
روشی که توی مثال قبلی استفاده کردیم، روش Inline بود. یعنی در میان خطوط HTML و با استفاده از اتریبیوت onclick از تابع alert استفاده کردیم تا یه پیام رو به کاربر نمایش بدیم. می‌تونید به جای پیامی که داخل پرانتز هست، هر پیام دیگه‌ای رو قرار بدید و ببینید که چطور پیام تغییر می‌کنه. یادتون باشه بعد از این که پیام رو تغییر دادید، کافیه فایل رو ذخیره کنید، افزونه Live Server تغییرات رو روی مرورگر اعمال می‌کنه و به شما نمایش م‌ده.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript in 30</title>
</head>
<body>
<button onclick="alert('I changed this!')">Click Here</button>
</body>
</html>Internal
روش بعدی قرار دادن کد جاوااسکریپت به صوت داخلی یا همون اینترناله؛ توی این روش معمولاً اسکریپت رو بین تگ body قرار می‌دن (معمولاً آخر تگ). البته می‌شه اسکریپت رو بین تگ head هم قرار داد، اما همون طور که گفتم معمولاً قبل از بسته شدن تگ body می‌‌ذارن، این طوری:
<!DOCTYPE html>
<html>
<head>
<title>avaScript in 30</title>
</head>
<body>
<!-- <button onclick="alert('I change this!')">Click Here</button> -->
<script>
console.log('JavaScript in 30')
</script>
</body>
</html>توی مثال بالا یه پیامی رو توی کنسول مرورگر نوشتیم. کنسول مرورگرو که باز کنید می‌تونید ببینید خروجی این دستور چیه. برای باز کردن کنسول مرورگر، وقتی روی صفحه مرورگر هستید، کلیدهای میانبر Ctrl + Shift + J رو فشار بدید. دقت کنید که توی این مثال، دکمه‌ای که توی مثال قبل داشتیم دیگه نمایش داده نمی‌شه؛ این به خاطر اینه که من دکمه رو اصطلاحاً کامنت کردم. توی VS Code می‌تونید با کلیدهای میانبر Ctrl + / یه خط رو کامنت کنید. وقتی یه خط کامنت بشه، با این که اون خط توی کد شما وجود داره، مرورگر اون خط رو نادیده می‌گیره؛ این طوری می‌تونید توی کدی که دارید می‌نویسید یادداشت بذارید یا یه بخشی رو غیرفعال کنید تا بعداً دوباره بتونید فعالش کنید. کامنت نوشتن عادت خوبیه و توی پروژه‌های مختلف باعث می‌شه کدنویسی شما خواناتر بشه.
پس توی روش اینترنال، جاوااسکریپت رو داخل تگ script می‌نویسیم.
External
توی روش اکسترنال، همون طوری که از اسمش پیداس، کد جاوااسکریپت توی یه فایل مجزا با پس‌وند js نوشته می‌شه و داخل فایل HTML به اون فایل ارجاع داده می‌شه. مثل روش اینترنال، این ارجاع می‌تونه بین تگ‌های head یا body انجام بشه. قبل از هر چیز باید داخل فولدر پروژه، یه فایل جاوااسکریپت با پس‌وند js بسازیم و یه اسمی براش انتخاب کنیم. بعد فایلی که ساختیم رو از طریق تگ script به فایل HTML متصل کنیم. بعد می‌تونیم داخل فایل js، کد جاوااسکریپتمونو بنویسیم.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript in 30</title>
</head>
<body>
<!-- it could be in the header or in the body -->
<!-- Here is the recommended place to put the external script -->
<script src="introduction.js"></script>
</body>
</html>alert('Hey!');توی پروژه‌های واقعی معمولاً از این روش برای نوشتن جاوااسکریپت استفاده می‌شه؛ چون با این روش می‌شه بخش‌های مختلف پروژه رو توی فایل‌های مختلف کدنویسی کرد و بعد، از چندین تگ script برای فراخونی فایل‌های جاوااسکریپتی استفاده کرد.
فکر می‌کنم تا همین جا برای درس اول کافی باشه. اگه سؤالی دارید می‌تونید از بخش پایین همین صفحه استفاده کنید و سؤالتونو بپرسید.
دیدگاهتان را بنویسید