سیده آمین ارمان
کاربر نگاه دانلود
به گفته ی یکی از بزرگترین نویسندگان آمریکایی به نام مارک تواین «راز سبقت گرفتن از دیگران، آن است که کار را شروع کنید» پس حالا که با جاوا اسکریپت و دلیل اهمیت این زبان برنامه نویسی آشنا شدیم، بهتر است بدون معطلی، شروع به یادگیری کرده و اولین برنامه ی خود در جاوا اسکریپت را بنویسیم.
برنامه نویسی ابتدایی جاوا اسکریپت، بسیار ساده و قابل فهم است. در این آموزش، ابتدا یاد خواهیم گرفت که چگونه محیط سیستم خود را برای برنامه نویسی جاوا اسکریپت آماده کرده سپس اولین برنامه ی خود با زبان برنامه نویسی جاوا اسکریپت را خواهیم نوشت و با مفاهیم اولیه ی Syntax (سینتکس یا ساختار) زبان جاوا اسکریپت آشنا می شویم.
آماده سازی محیط توسعه
زمانی که می خواهیم یادگیری یک زبان برنامه نویسی جدید را شروع کنیم، باید قبل از شروع، تمامی ابزارهایی که به آن نیاز داریم را آماده کرده سپس با تمرکز هرچه تمام تر، پروسه ی یادگیری را شروع کنیم. در اینجا، ابزار و نرم افزارهایی که در این دوره از آن ها استفاده شده و به شما کمک می کنند را معرفی خواهیم کرد. البته در نظر داشته باشید که خواهید توانست از هر نرم افزار جایگزین دیگری که تمایل داشته باشید استفاده کنید اما ابزار انتخابی در این سری از آموزش ها، جزو برترین ابزارهای موجود برای برنامه نویسی جاوا اسکریپت بوده و پیشنهاد می شود شما نیز از آن ها استفاده کنید.
نصب گوگل کروم
یکی از بهترین مرورگرهایی که می توانید برای اجرای کدهای جاوا اسکریپت از آن استفاده کنید، گوگل کروم (Google Chrome) است. اگر برای کارهای روزمره ی خود از مرورگر دیگری استفاده می کنید، هیچ مشکلی وجود ندارد؛ تمامی مرورگرهای مدرن می توانند کدهای جاوا اسکریپت را به درستی و با سرعت اجرا کنند. با این حال، برخی نکات و مطالب در این آموزش، مختص مرورگر کروم خواهند بود و به همین دلیل پیشنهاد می کنیم که حتی الامکان، کروم را به صورت نصب شده بر روی سیستم خود داشته باشید.
مرورگر کروم برای کامپایل و اجرای کدهای جاوا اسکریپت از موتور گوگل V8 استفاده می کند که یکی از قدرتمندترین و سریع ترین موتورها در این زمینه است. همچنین، کروم دارای ابزارها و قابلیت هایی است که کار برنامه نویسان و توسعه دهندگان جاوا اسکریپت را سرعت می بخشد و می تواند برای ما در این دوره بسیار مفید باشند.
نصب کد ادیتور
نرم افزارهای Source Code Editor (سورس کد ادیتور) که عموماً آن ها را کد ادیتور می نامند، در حقیقت یک ویرایشگر متن به همراه قابلیت ها و ویژگی های اضافی و مخصوص برنامه نویسی هستند که امکان نوشتن و ویرایش کدهای برنامه نویسی به اکثر زبان ها را برایمان فراهم می کنند. کد ادیتوری که در این دوره از آن استفاده خواهیم کرد، Sublime Text (سابلایم) نام دارد.
در حال حاضر، کد ادیتورهای متفاوت و بسیاری برای انتخاب وجود دارند اما اگر پیش از این، با کد ادیتورها کار کرده و یکی را به عنوان ادیتور منتخب خود انتخاب کرده اید، پس از همان استفاده کنید! کد ادیتور یک برنامه نویس، یک انتخاب کاملاً شخصی است و بسیاری از مردم پس از مدتی در می یابند که با یک کد ادیتور خاص راحت تر اند. اگر احساس می کنید که سابلایم به دل شما نمی نشیند و یا با آن راحت نیستید، پس نگاهی به جدول زیر انداخته و برخی دیگر از گزینه های موجود را امتحان کنید.
سازگار با سیستم عامل های آدرس سایت نام
ویندوز / مکینتاش / گنو لینوکس لینک سایت Sublime
مکینتاش لینک سایت Coda
ویندوز / مکینتاش / لینوکس لینک سایت Aptana
ویندوز / مکینتاش / لینوکس لینک سایت Komodo Edit
ویندوز / مکینتاش لینک سایت Dreamweaver
ویندوز / مکینتاش / لینوکس لینک سایت Eclipse
ویندوز لینک سایت Notepad++
مکینتاش لینک سایت TextMate
مکینتاش لینک سایت BBEdit
ویندوز / مکینتاش / لینوکس لینک سایت EMacs
ویندوز لینک سایت TextPad
ویندوز / مکینتاش / لینوکس لینک سایت Vim
ویندوز / مکینتاش لینک سایت Netbeans
ما از آن جهت سابلایم را برای این دوره ی آموزشی انتخاب کرده ایم که سابلایم از شهرت بالایی میان برنامه نویسان جاوا اسکریپت برخوردار است و رابط کاربری ساده ی آن به همراه پشتیبانی گسترده و پلاگین های گوناگون، آن را به یکی از قدرتمندترین انتخاب های فعلی تبدیل کرده است. برای شروع کار با سابلایم و ایجاد اولین پروژه در این ادیتور، مراحل زیر را دنبال خواهیم کرد:
1- از منوی Choose File، گزینه ی Save as را انتخاب کنید. با انتخاب این گزینه، پنجره ی ذخیره سازی باز خواهد شد و مکان پیش فرض ذخیره ی فایل نمایش داده می شود. اگر با ذخیره سازی فایل در این فولدر مشکلی ندارید، پس به سراغ مرحله ی بعد بروید. در غیر این صورت، مکان دیگری را برای ذخیره سازی انتخاب کنید.
2- یک فولدر جدید ساخته و آن را نامگذاری کنید.
3- داخل آن فولدر، فایل خود را با نامی دلخواه Save کنید. این فایل جدید درون سایدبار سابلایم نمایش داده می شود و نام سربرگ فعال در سابلایم نیز به نامی که برای فایل انتخاب کرده ایم، تغییر پیدا خواهد کرد.
4- از منوی Project، گزینه ی Save Project As را انتخاب کرده و پروژه را در درون فولدری که ساختید، ذخیره کنید. فایل های پروژه، مکانی برای ذخیره سازی اطلاعات مربوط به یک پروژه و فایل های مرتبط با آن هستند. ساخت یک فولدر مخصوص پروژه باعث می شود تا تمام فایل های متفاوت داخل برنامه ی ما، به طور منظم تری در یکجا ذخیره شوند.
5- از منوی Project، گزینه ی Add Folder to Project را انتخاب کرده و سپس فولدری که در مرحله ی اول ساختیم را انتخاب کرده و بر روی Open کلیک می کنیم. حال یک لیست به نام Folders در سایدبار مشاهده خواهیم کرد که شامل فولدر ساخته شده و محتویات آن (فایل پروژه و MyFirstProgram.html) است.
توجه داشته باشیم که اگر اقدام به ساخت پروژه داخل نرم افزار سابلایم نماییم، یکسری فایل های کانفیگ و ... که صرفا مرتبط با نرم افزار سابلایم هستند برای شما ایجاد شده که در سایر نرم افزارهای شناخته نمی شوند. اگر می خواهید پروژه های خود را به گونه ای ایجاد کنید که در هر نرم افزاری قابل باز کردن باشند، صرفا می توانید روی سیستم خود یک فولدر مثلا MyFirstJavaScriptProject ساخته و داخل آن یک فایل تحت عنوان MyFirstProgram.html ایجاد نمایید سپس از داخل نرم افزار سابلایم، به مسیر این فولدر رفته و فایل خود را باز نموده و شروع به ویرایش آن نمایید.
نکته
برای آن که بتوان تمامی فایل ها و فولدرهای خود را به طور منظم و سازمان دهی شده ذخیره کنیم، ما در این دوره برخی پیشنهادات در رابـ ـطه با نامگذاری فایل ها و فولدرها را به شما خواهیم داد. برای نمونه، شما می توانید فولدری که در مرحله ی دوم ساختید را "MyFirstJavaScriptProject" بنامید. فایل ایجاد شده در مرحله ی سوم نیز "MyFirstProgram" و پروژه ی مرحله ی چهارم را "myFirstProject" می نامیم.
انتخاب یک قالب رنگی برای Syntax (سینتَکس)
قالب های رنگی سابلایم برای سینتکس ها، بر پایه ی نوع کدی که می نویسیم و پسوند فایلمان، انتخاب می شوند. کد ترکیبی HTML و جاوا اسکریپتی که در ادامه مشاهده خواهید کرد را در درون فایلی که به تازگی در سابلایم ایجاد کرده اید، وارد کنید تا قالب رنگی پیش فرض سابلایم را مشاهده کنید!
هشدار
همانطور که به زودی خواهید فهمید، جاوا اسکریپت به نگارش صحیح دستورات، بسیار حساس است. حواستان را جمع کنید تا همه چیز را به همان شکل که هست، تایپ کنید و بزرگی و کوچکی حروف را رعایت کنید. در غیر این صورت، کد شما یا دچار مشکل خواهد شد و یا آن که به طور کلی کار نخواهد کرد.
در صورتی که از رنگ قالب کدهای پیش فرض خوشتان نمی آید، می توانید با مراجعه به بخش Preferences و سپس Color Scheme، قالب رنگی دیگری را برای نرم افزار سابلایم انتخاب کنید. رنگ های متفاوت را امتحان کرده و آن که برای سلیقه و چشمان شما مناسب تر است را انتخاب کنید. رنگ قالبی که ما در این دوره از آن استفاده خواهیم کرد، "Monokai Bright" نام دارد که رنگ بندی آن را در تصویر زیر مشاهده خواهید کرد:
برخی میانبرهای مفید در سابلایم
شاید سابلایم در نگاه اول همانند یک ادیتور کد ساده به نظر برسد اما فریب ظاهر آن را نخورید. قدرت یک برنامه نویس حرفه ای، به مهارت استفاده ی وی از کیبورد و میانبرهای آن برای حل مشکلات و ویرایش کد است. جدول زیر، برخی از میانبرهایی که در کد ادیتور سابلایم وجود دارند را نشان می دهد. استفاده از این میانبرها را تمرین کرده و در مدت زمانی کوتاه می توانید دوستان و همکاران خود را با مهارت فوق حرفه ای خود در کدنویسی شگفت زده کنید:
مکینتاش ویندوز و لینوکس کاربرد
Command + X Ctrl + X حذف یک خط
Command + Return Ctrl + Enter اضافه کردن یک خط در ادامه
Command + Shift + Return Ctrl + Shift + Enter اضافه کردن یک خط به قبل
Command + Ctrl + Up Ctrl + Shift + Up انتقال خط / انتخاب به بالا
Command + Ctrl + Down Ctrl + Shift + Down انتقال خط / انتخاب به پایین
Command + L Ctrl + L انتخاب خط تکرار برای انتخاب خط های بعدی
Command + D Ctrl + D انتخاب لغت
Command + M Ctrl + M پرش به پرانتزهای پایانی / تکرار برای پرانتزهای آغازین
Command + Shift + M Ctrl + Shift + M انتخاب تمام محتوای پرانتز انتخاب شده
Command + K + K Ctrl + K + K حذف از مکان نشانه گر تا پایان خط
Command + K + Delete Ctrl + K + Delete حذف از مکان نشانه گر تا ابتدای خط
Command + ] Ctrl + ] افزایش ایندِنت خط انتخاب شده
Command + [ Ctrl + [ کاهش ایندِنت خط انتخاب شده
Command + Shift + D Ctrl + Shift + D ایجاد کپی از خط
Command + J Ctrl + J اتصال خط بعدی به انتهای خط فعلی
Command + / Ctrl + / کامنت گذاری / حذف کامنت خط
Command + Option + / Ctrl + Shift + / کامنت کردن انتخاب فعلی
Command + Y Ctrl + Y تکرار مجدد آخرین دستور
Command + Shift + V Ctrl + Shift + V پِیست کردن و ایجاد ایندِنت مناسب
Control + Space Ctrl + Space انتخاب اولین پیشنهاد auto-complete
Control + U Ctrl + U بازگشت به یک مرحله قبل
Control + Shift + Up Ctrl + Alt + Up انتخاب گروهی به بالا
Control + Shift + Down Ctrl + Alt + Down انتخاب گروهی به پایین
ساخت یک فایل ساده ی HTML به همراه جاوا اسکریپت
حال که محیط برنامه نویسی خود را آماده کردیم، قصد داریم اولین کدهای خود را با استفاده از زبان محبوب جاوا اسکریپت بنویسیم. کاری که قرار است در اولین برنامه ی خود انجام دهیم این است که با استفاده از زبان JS، از عدد 1 تا 10 را پشت سر هم شروع به شمارش کنیم. برای این منظور، کدهای زیر را مد نظر قرار می دهیم:
<!DOCTYPE html>
<html>
<head>
<title>Hello, HTML!</title>
<script>
function countToTen() {
var count = 0;
while (count < 10) {
count++;
document.getElementById("theCount").innerHTML += count + "<br>";
}
}
</script>
</head>
<body onload="countToTen();">
<h1>Let’s Count to 10 with JavaScript!</h1>
<p id="theCount"></p>
</body>
</html>
پیش از این که به بررسی برنامه ی فوق بپردازیم، ابتدا خروجی کدها را مشاهده کنیم:
همان طور که مشاهده می کنید، ابتدا یک عنوان در نظر گرفته ایم، سپس عدد 1 را چاپ کرده و پس از آن یک تگ <br> قرار داده ایم، مجدد به سراغ عدد 2 رفته و این کار را آنقدر تکرار می کنیم تا به عدد 10 برسیم و به محض رسیدن به عدد 10، برنامه متوقف خواهد شد.
توجه داشته باشیم که پیش نیاز کدنویسی با زبان جاوا اسکریپت، آشنایی با زبان های اچ تی ام ال و سی اس اس است و در این دوره ی آموزشی نیز به منظور تمرکز بیشتر روی خود زبان جاوا اسکرپیت، از توضیحات مقدماتی کدهای اچ تی ام ال و سی اس اس خودداری خواهیم کرد و صرفا به توضیحات تکمیلی بخش هایی خواهیم پرداخت که منجر به درک بهتر نحوه ی عملکرد سینتکس جاوا اسکرپیت می شوند.
مجدد به برنامه ای که نوشتیم باز می گردیم. همان طور که در سورس کد فوق مشاهده می شود، برای این که مرورگرهای مختلف بتوانند کدهای جاوا اسکرپیتی که درون فایل های اچ تی ام ال قرار دارند را تفسیر کنند، نیاز است تا صرفا از تگ های <script></script> استفاده کنیم و هر کدی که نیاز داشتیم را داخل این تگ ها بنویسیم:
function countToTen() {
var count = 0;
while (count < 10) {
count++;
document.getElementById("theCount").innerHTML += count + "<br>";
}
}
اگر تازه قدم به دنیای برنامه نویسی گذاشته باشید، این احتمال وجود دارد که چیزهایی همچون function, var, while و یا getElementById کمی برایتان گیج کننده باشند اما خبر خوشحال کننده اینجا است که در آموزش های بعد، به طور مفصل در مورد تک تک این کلیدواژگان صحبت خواهیم کرد.
فقط در همین حد بدانیم که برنامه ی ما از یک فانکشن یا «تابع» تشکیل شده تحت عنوان countToTen به معنی «تا ده بشمار» و متغیر یا «ظرفی» هم داخل آن ایجاد کرده ایم تحت عنوان count که مقدار اولیه ی آن برابر با 0 است. سپس دستور داده ایم مادامیکه مقدار متغیر count از عدد 10 کوچکتر است، یک واحد به مقدار اولیه ی count اضافه گشته سپس مقدار آن به تگ های <p></p> که دارای id یا «شناسه» یی معادل با theCount است اختصاص داده شود. در نهایت هم یک بار تگ <br> استفاده شود تا برنامه به خط بعد انتقال یابد!
برنامه نویسی ابتدایی جاوا اسکریپت، بسیار ساده و قابل فهم است. در این آموزش، ابتدا یاد خواهیم گرفت که چگونه محیط سیستم خود را برای برنامه نویسی جاوا اسکریپت آماده کرده سپس اولین برنامه ی خود با زبان برنامه نویسی جاوا اسکریپت را خواهیم نوشت و با مفاهیم اولیه ی Syntax (سینتکس یا ساختار) زبان جاوا اسکریپت آشنا می شویم.
آماده سازی محیط توسعه
زمانی که می خواهیم یادگیری یک زبان برنامه نویسی جدید را شروع کنیم، باید قبل از شروع، تمامی ابزارهایی که به آن نیاز داریم را آماده کرده سپس با تمرکز هرچه تمام تر، پروسه ی یادگیری را شروع کنیم. در اینجا، ابزار و نرم افزارهایی که در این دوره از آن ها استفاده شده و به شما کمک می کنند را معرفی خواهیم کرد. البته در نظر داشته باشید که خواهید توانست از هر نرم افزار جایگزین دیگری که تمایل داشته باشید استفاده کنید اما ابزار انتخابی در این سری از آموزش ها، جزو برترین ابزارهای موجود برای برنامه نویسی جاوا اسکریپت بوده و پیشنهاد می شود شما نیز از آن ها استفاده کنید.
نصب گوگل کروم
یکی از بهترین مرورگرهایی که می توانید برای اجرای کدهای جاوا اسکریپت از آن استفاده کنید، گوگل کروم (Google Chrome) است. اگر برای کارهای روزمره ی خود از مرورگر دیگری استفاده می کنید، هیچ مشکلی وجود ندارد؛ تمامی مرورگرهای مدرن می توانند کدهای جاوا اسکریپت را به درستی و با سرعت اجرا کنند. با این حال، برخی نکات و مطالب در این آموزش، مختص مرورگر کروم خواهند بود و به همین دلیل پیشنهاد می کنیم که حتی الامکان، کروم را به صورت نصب شده بر روی سیستم خود داشته باشید.
مرورگر کروم برای کامپایل و اجرای کدهای جاوا اسکریپت از موتور گوگل V8 استفاده می کند که یکی از قدرتمندترین و سریع ترین موتورها در این زمینه است. همچنین، کروم دارای ابزارها و قابلیت هایی است که کار برنامه نویسان و توسعه دهندگان جاوا اسکریپت را سرعت می بخشد و می تواند برای ما در این دوره بسیار مفید باشند.
نصب کد ادیتور
نرم افزارهای Source Code Editor (سورس کد ادیتور) که عموماً آن ها را کد ادیتور می نامند، در حقیقت یک ویرایشگر متن به همراه قابلیت ها و ویژگی های اضافی و مخصوص برنامه نویسی هستند که امکان نوشتن و ویرایش کدهای برنامه نویسی به اکثر زبان ها را برایمان فراهم می کنند. کد ادیتوری که در این دوره از آن استفاده خواهیم کرد، Sublime Text (سابلایم) نام دارد.
در حال حاضر، کد ادیتورهای متفاوت و بسیاری برای انتخاب وجود دارند اما اگر پیش از این، با کد ادیتورها کار کرده و یکی را به عنوان ادیتور منتخب خود انتخاب کرده اید، پس از همان استفاده کنید! کد ادیتور یک برنامه نویس، یک انتخاب کاملاً شخصی است و بسیاری از مردم پس از مدتی در می یابند که با یک کد ادیتور خاص راحت تر اند. اگر احساس می کنید که سابلایم به دل شما نمی نشیند و یا با آن راحت نیستید، پس نگاهی به جدول زیر انداخته و برخی دیگر از گزینه های موجود را امتحان کنید.
سازگار با سیستم عامل های آدرس سایت نام
ویندوز / مکینتاش / گنو لینوکس لینک سایت Sublime
مکینتاش لینک سایت Coda
ویندوز / مکینتاش / لینوکس لینک سایت Aptana
ویندوز / مکینتاش / لینوکس لینک سایت Komodo Edit
ویندوز / مکینتاش لینک سایت Dreamweaver
ویندوز / مکینتاش / لینوکس لینک سایت Eclipse
ویندوز لینک سایت Notepad++
مکینتاش لینک سایت TextMate
مکینتاش لینک سایت BBEdit
ویندوز / مکینتاش / لینوکس لینک سایت EMacs
ویندوز لینک سایت TextPad
ویندوز / مکینتاش / لینوکس لینک سایت Vim
ویندوز / مکینتاش لینک سایت Netbeans
ما از آن جهت سابلایم را برای این دوره ی آموزشی انتخاب کرده ایم که سابلایم از شهرت بالایی میان برنامه نویسان جاوا اسکریپت برخوردار است و رابط کاربری ساده ی آن به همراه پشتیبانی گسترده و پلاگین های گوناگون، آن را به یکی از قدرتمندترین انتخاب های فعلی تبدیل کرده است. برای شروع کار با سابلایم و ایجاد اولین پروژه در این ادیتور، مراحل زیر را دنبال خواهیم کرد:
1- از منوی Choose File، گزینه ی Save as را انتخاب کنید. با انتخاب این گزینه، پنجره ی ذخیره سازی باز خواهد شد و مکان پیش فرض ذخیره ی فایل نمایش داده می شود. اگر با ذخیره سازی فایل در این فولدر مشکلی ندارید، پس به سراغ مرحله ی بعد بروید. در غیر این صورت، مکان دیگری را برای ذخیره سازی انتخاب کنید.
2- یک فولدر جدید ساخته و آن را نامگذاری کنید.
3- داخل آن فولدر، فایل خود را با نامی دلخواه Save کنید. این فایل جدید درون سایدبار سابلایم نمایش داده می شود و نام سربرگ فعال در سابلایم نیز به نامی که برای فایل انتخاب کرده ایم، تغییر پیدا خواهد کرد.
4- از منوی Project، گزینه ی Save Project As را انتخاب کرده و پروژه را در درون فولدری که ساختید، ذخیره کنید. فایل های پروژه، مکانی برای ذخیره سازی اطلاعات مربوط به یک پروژه و فایل های مرتبط با آن هستند. ساخت یک فولدر مخصوص پروژه باعث می شود تا تمام فایل های متفاوت داخل برنامه ی ما، به طور منظم تری در یکجا ذخیره شوند.
5- از منوی Project، گزینه ی Add Folder to Project را انتخاب کرده و سپس فولدری که در مرحله ی اول ساختیم را انتخاب کرده و بر روی Open کلیک می کنیم. حال یک لیست به نام Folders در سایدبار مشاهده خواهیم کرد که شامل فولدر ساخته شده و محتویات آن (فایل پروژه و MyFirstProgram.html) است.
توجه داشته باشیم که اگر اقدام به ساخت پروژه داخل نرم افزار سابلایم نماییم، یکسری فایل های کانفیگ و ... که صرفا مرتبط با نرم افزار سابلایم هستند برای شما ایجاد شده که در سایر نرم افزارهای شناخته نمی شوند. اگر می خواهید پروژه های خود را به گونه ای ایجاد کنید که در هر نرم افزاری قابل باز کردن باشند، صرفا می توانید روی سیستم خود یک فولدر مثلا MyFirstJavaScriptProject ساخته و داخل آن یک فایل تحت عنوان MyFirstProgram.html ایجاد نمایید سپس از داخل نرم افزار سابلایم، به مسیر این فولدر رفته و فایل خود را باز نموده و شروع به ویرایش آن نمایید.
نکته
برای آن که بتوان تمامی فایل ها و فولدرهای خود را به طور منظم و سازمان دهی شده ذخیره کنیم، ما در این دوره برخی پیشنهادات در رابـ ـطه با نامگذاری فایل ها و فولدرها را به شما خواهیم داد. برای نمونه، شما می توانید فولدری که در مرحله ی دوم ساختید را "MyFirstJavaScriptProject" بنامید. فایل ایجاد شده در مرحله ی سوم نیز "MyFirstProgram" و پروژه ی مرحله ی چهارم را "myFirstProject" می نامیم.
انتخاب یک قالب رنگی برای Syntax (سینتَکس)
قالب های رنگی سابلایم برای سینتکس ها، بر پایه ی نوع کدی که می نویسیم و پسوند فایلمان، انتخاب می شوند. کد ترکیبی HTML و جاوا اسکریپتی که در ادامه مشاهده خواهید کرد را در درون فایلی که به تازگی در سابلایم ایجاد کرده اید، وارد کنید تا قالب رنگی پیش فرض سابلایم را مشاهده کنید!
هشدار
همانطور که به زودی خواهید فهمید، جاوا اسکریپت به نگارش صحیح دستورات، بسیار حساس است. حواستان را جمع کنید تا همه چیز را به همان شکل که هست، تایپ کنید و بزرگی و کوچکی حروف را رعایت کنید. در غیر این صورت، کد شما یا دچار مشکل خواهد شد و یا آن که به طور کلی کار نخواهد کرد.
در صورتی که از رنگ قالب کدهای پیش فرض خوشتان نمی آید، می توانید با مراجعه به بخش Preferences و سپس Color Scheme، قالب رنگی دیگری را برای نرم افزار سابلایم انتخاب کنید. رنگ های متفاوت را امتحان کرده و آن که برای سلیقه و چشمان شما مناسب تر است را انتخاب کنید. رنگ قالبی که ما در این دوره از آن استفاده خواهیم کرد، "Monokai Bright" نام دارد که رنگ بندی آن را در تصویر زیر مشاهده خواهید کرد:
برخی میانبرهای مفید در سابلایم
شاید سابلایم در نگاه اول همانند یک ادیتور کد ساده به نظر برسد اما فریب ظاهر آن را نخورید. قدرت یک برنامه نویس حرفه ای، به مهارت استفاده ی وی از کیبورد و میانبرهای آن برای حل مشکلات و ویرایش کد است. جدول زیر، برخی از میانبرهایی که در کد ادیتور سابلایم وجود دارند را نشان می دهد. استفاده از این میانبرها را تمرین کرده و در مدت زمانی کوتاه می توانید دوستان و همکاران خود را با مهارت فوق حرفه ای خود در کدنویسی شگفت زده کنید:
مکینتاش ویندوز و لینوکس کاربرد
Command + X Ctrl + X حذف یک خط
Command + Return Ctrl + Enter اضافه کردن یک خط در ادامه
Command + Shift + Return Ctrl + Shift + Enter اضافه کردن یک خط به قبل
Command + Ctrl + Up Ctrl + Shift + Up انتقال خط / انتخاب به بالا
Command + Ctrl + Down Ctrl + Shift + Down انتقال خط / انتخاب به پایین
Command + L Ctrl + L انتخاب خط تکرار برای انتخاب خط های بعدی
Command + D Ctrl + D انتخاب لغت
Command + M Ctrl + M پرش به پرانتزهای پایانی / تکرار برای پرانتزهای آغازین
Command + Shift + M Ctrl + Shift + M انتخاب تمام محتوای پرانتز انتخاب شده
Command + K + K Ctrl + K + K حذف از مکان نشانه گر تا پایان خط
Command + K + Delete Ctrl + K + Delete حذف از مکان نشانه گر تا ابتدای خط
Command + ] Ctrl + ] افزایش ایندِنت خط انتخاب شده
Command + [ Ctrl + [ کاهش ایندِنت خط انتخاب شده
Command + Shift + D Ctrl + Shift + D ایجاد کپی از خط
Command + J Ctrl + J اتصال خط بعدی به انتهای خط فعلی
Command + / Ctrl + / کامنت گذاری / حذف کامنت خط
Command + Option + / Ctrl + Shift + / کامنت کردن انتخاب فعلی
Command + Y Ctrl + Y تکرار مجدد آخرین دستور
Command + Shift + V Ctrl + Shift + V پِیست کردن و ایجاد ایندِنت مناسب
Control + Space Ctrl + Space انتخاب اولین پیشنهاد auto-complete
Control + U Ctrl + U بازگشت به یک مرحله قبل
Control + Shift + Up Ctrl + Alt + Up انتخاب گروهی به بالا
Control + Shift + Down Ctrl + Alt + Down انتخاب گروهی به پایین
ساخت یک فایل ساده ی HTML به همراه جاوا اسکریپت
حال که محیط برنامه نویسی خود را آماده کردیم، قصد داریم اولین کدهای خود را با استفاده از زبان محبوب جاوا اسکریپت بنویسیم. کاری که قرار است در اولین برنامه ی خود انجام دهیم این است که با استفاده از زبان JS، از عدد 1 تا 10 را پشت سر هم شروع به شمارش کنیم. برای این منظور، کدهای زیر را مد نظر قرار می دهیم:
<!DOCTYPE html>
<html>
<head>
<title>Hello, HTML!</title>
<script>
function countToTen() {
var count = 0;
while (count < 10) {
count++;
document.getElementById("theCount").innerHTML += count + "<br>";
}
}
</script>
</head>
<body onload="countToTen();">
<h1>Let’s Count to 10 with JavaScript!</h1>
<p id="theCount"></p>
</body>
</html>
پیش از این که به بررسی برنامه ی فوق بپردازیم، ابتدا خروجی کدها را مشاهده کنیم:
همان طور که مشاهده می کنید، ابتدا یک عنوان در نظر گرفته ایم، سپس عدد 1 را چاپ کرده و پس از آن یک تگ <br> قرار داده ایم، مجدد به سراغ عدد 2 رفته و این کار را آنقدر تکرار می کنیم تا به عدد 10 برسیم و به محض رسیدن به عدد 10، برنامه متوقف خواهد شد.
توجه داشته باشیم که پیش نیاز کدنویسی با زبان جاوا اسکریپت، آشنایی با زبان های اچ تی ام ال و سی اس اس است و در این دوره ی آموزشی نیز به منظور تمرکز بیشتر روی خود زبان جاوا اسکرپیت، از توضیحات مقدماتی کدهای اچ تی ام ال و سی اس اس خودداری خواهیم کرد و صرفا به توضیحات تکمیلی بخش هایی خواهیم پرداخت که منجر به درک بهتر نحوه ی عملکرد سینتکس جاوا اسکرپیت می شوند.
مجدد به برنامه ای که نوشتیم باز می گردیم. همان طور که در سورس کد فوق مشاهده می شود، برای این که مرورگرهای مختلف بتوانند کدهای جاوا اسکرپیتی که درون فایل های اچ تی ام ال قرار دارند را تفسیر کنند، نیاز است تا صرفا از تگ های <script></script> استفاده کنیم و هر کدی که نیاز داشتیم را داخل این تگ ها بنویسیم:
function countToTen() {
var count = 0;
while (count < 10) {
count++;
document.getElementById("theCount").innerHTML += count + "<br>";
}
}
اگر تازه قدم به دنیای برنامه نویسی گذاشته باشید، این احتمال وجود دارد که چیزهایی همچون function, var, while و یا getElementById کمی برایتان گیج کننده باشند اما خبر خوشحال کننده اینجا است که در آموزش های بعد، به طور مفصل در مورد تک تک این کلیدواژگان صحبت خواهیم کرد.
فقط در همین حد بدانیم که برنامه ی ما از یک فانکشن یا «تابع» تشکیل شده تحت عنوان countToTen به معنی «تا ده بشمار» و متغیر یا «ظرفی» هم داخل آن ایجاد کرده ایم تحت عنوان count که مقدار اولیه ی آن برابر با 0 است. سپس دستور داده ایم مادامیکه مقدار متغیر count از عدد 10 کوچکتر است، یک واحد به مقدار اولیه ی count اضافه گشته سپس مقدار آن به تگ های <p></p> که دارای id یا «شناسه» یی معادل با theCount است اختصاص داده شود. در نهایت هم یک بار تگ <br> استفاده شود تا برنامه به خط بعد انتقال یابد!
