با سلام در خدمت شما هستیم با آموزش طراحی صفحات وب صفرتاده قسمت پنجم،در قسمت های قبل ما مختصری از HTML.CSS رو آموزش دادیم و حالا برای طراحی وب نیاز به جاوا اسکریپت داریم،پس باما همراه باشید.
مقاله‌های مرتبط:
جاوا اسکریپت یکی از مهم‌ترین زبان‌های برنامه‌نویسی حوزه‌ی وب محسوب میشه. جاوا اسکریپت اولین بار با اسم LiveScript و توسط شرکت نت اسکیپ معرفی شد و بعدها به جاوا اسکریپت تغییر نام پیدا کرد. البته جالبه بدونید جاوا اسکریپت نه از نظر ساختار و نه از نظر مفاهیم، شباهتی به زبان جاوا نداره و این فقط تشابه اسمی است.
به‌طور طبیعی بعد از یادگیری HTML و CSS نوبت یادگیری جاوا اسکریپته.
یادگیری جاوا اسکریپت کار سختی نیست، ولی نکته مهم در رابطه با یادگیری این زبان، اینه که بر خلاف HTML یا CSS که زبان‌های نشانه‌گذاری محسوب می‌شن، جاوا اسکریپت یک زبان «برنامه نویسی» محسوب میشه. پس انتظار یادگیری سریع و بدون دردسر نداشته باشید و خودتون رو برای چالش‌های جدید و درگیری‌های ذهنی بیشتر آماده کنید.
چرا باید جاوا اسکریپت یاد بگیریم؟
یکی از ارکان اولیه برای ورود به دنیای برنامه نویسی و خصوصا برنامه نویسی وب، یادگیری جاوا اسکریپته. اگر بخوام به‌طور کلی صحبت کنم، جاوا اسکریپت کارش افزودن منطق به فضای html اهستش. در واقع با کمک html و css به‌تنهایی، نمیشه یک صفحه‌ی وب کامل داشت. مثلا فرض کنید که می‌خواهید با کلیک روی یک دکمه، محتویات جدیدی در صفحه html نمایش داده بشه یا یک سری از المنت‌های صفحه رو حذف یا اضافه کنید.
این کارها به کمک HTML, CSS قابل پیاده‌سازی نیستند. اینجا است که جاوا اسکریپت پا به میدان میزاره و بار منطقی و اجرایی بسیاری از کارهای وب را به دوش میکشه.
جاوا اسکریپت جزو زبان‌های فرانت اند وب محسوب میشه
اگر نمی‌دونید فرانت‌اند و بَکِند چیه در ادامه دربارش توضیح میدم. به‌طور کلی برنامه نویسی وب به دو بخش کلی تقسیم میشه. فرانت اند (FrontEnd) و بکند (Backend). فرانت‌اند به چیزی گفته میشه که توسط کاربر دیده و در مرورگر رندر میشه.
بکند هم به چیزی که در سمت سرور (که بار پردازش منطق و هسته هر سایت را بر عهده داره) وجود داره گفته میشه. جاوا اسکریپت اصولا یک زبان سمت کاربر یا فرانت‌اند محسوب میشه که بار منطقی فرآیندهای سمت وب رو به عهده داره. البته با به وجود اومدن زبان NodeJS امکان نوشتن سرویس‌های وب سمت سرور با جاوا اسکریپت هم وجود داره.
ابزارها و کتابخانه‌های معروف جاوا اسکریپت
یکی از مزایای جاوا اسکریپت، فریم‌ورک‌ها و کتابخانه هایی است که بر پایه این زبان شکل گرفته. کتابخانه هر زبان برنامه نویسی، در واقع مجموعه‌ای از دستورات آن زبانه که در قالب خلاصه و آماده برای استفاده قرار می‌گیره. یکی از مشهورترین و نام‌آشناترین کتابخانه‌های جاوا اسکریپت، Jquery است.
جی‌کوئِری (Jquery) در واقع مجموعه‌ای از دستورات پیچیده‌ی جاوا اسکریپته که به‌صورت بسیار ساده و آسان در اختیار همه قرار داره. از مزیت‌های جی‌کوئِری برای مثال اینه که برای یک کار اگر باید ده خط کد جاوا اسکریپت بنویسید، با استفاده از یک متد یک خطی جی‌کوئِری میتونید همون کار رو با کیفیت و دقت بالا انجام بدید.
برای اینکه بیشتر به یادگیری جاوا اسکریپت علاقمند بشید، می‌خوام به شما بگم که این روزها جاوا اسکریپت، تنها یک زبان برنامه نویسی برای طراحی سایت و افزودن مقداری انیمیشن و حرکت و منطق به وب‌سایت‌ها نیست. فریم‌ورک‌ها و ابزارهای بسیار زیادی با کمک این زبان توسعه داده شدن که با کمک اون ها میشه از اپلیکیشن‌های موبایل تا سیستم‌های پیچیده را پیاده‌سازی کرد.
ابزارهایی مثل ReactJS شرکت فیس‌بوک یا Angular JS شرکت گوگل از جمله‌ی این ابزارها هستن. همچنین با روی کار آمدن NodeJS، امکان اجرای کدهای جاوا اسکریپت به‌عنوان زبان سمت سرور هم فراهم شده .
به‌طور کلی با زبان جاوا اسکریپت میشه سرورها،اپلیکیشن‌های موبایل،حتی سیستم‌های وب را پیاده‌سازی کرد. ابزارهای زبان مورد بحث، این روزها به‌قدری گسترده شدن که نمیتونیم بدون اون ها به دنیای وب فکر کنیم. از بین مشهورترین ابزارها و فریم‌ورک(چارچوب)های توسعه داده شده از زبان جاوا اسکریپت میشه به موارد زیر اشاره کرد:
- کتابخانه‌ی ReactJS که خیلی از سایت‌ها و سرویس‌های بزرگ بر پایهی این فریم‌ورک توسعه داده شدن.
- React Native محصول دیگری از شرکت فیس‌بوکه که امکان تولید اپلیکیشن‌های موبایل بر پایه زبان جاوا اسکریپت رو فراهم میکنه. نمونه بارزشم اپلیکیشن موبایل اینستاگرامه.
- فریم ورک AngularJs گوگل که آخرین نسخه اون angular ۵ است و خیلی از ابزارها و سرویس‌های بزرگ بر پایهی اون توسعه داده شدن.
- زبان اپن سورس NodeJS که امکان برنامه‌نویسی با زبان جاوا اسکریپت رو در سمت سرور فراهم میکنه.
در قسمت ششم صفر تا ده چه چیزهایی یاد میگیریم؟
۱. آشنایی با مفاهیم اولیه‌ی ساخت فایل جاوا اسکریپت و استفاده از آن در صفحه‌ی html
برای اجرای کدهای جاوا اسکریپت به چه چیزی نیاز داریم؟
به‌طور کلی برای اجرای کدهای جاوا اسکریپت، هیچ ابزار خاصی نیاز نیست. در واقع بر خلاف زبان‌های دیگه که نیاز به یک کامپایلر برای اجرای کدها دارن، جاوا اسکریپت روی مرورگرهای اینترنت اجرا میشه. برای نوشتن کدها هم یک ادیتور متن ساده مثل نوت پد(note pad) پیش‌فرض ویندوز کار شما رو راه می‌اندازه.
اما برای راحتی کار و بهتر یاد گرفتن توصیه می‌کنم از IDE (محیط‌ها و نرم‌افزارهای کدنویسی و توسعه) مناسب استفاده کنید. پیشنهاد من به شما، Visual Studio Code مایکروسافت یا نرم افزار ++NotePad است.
لینک دانلود Visual Studio Code – نسخه سبک محیط توسعه مایکروسافت (این نسخه با آن ابزار مشهور چند گیگابایتی مایکروسافت Visual Studio تفاوت داره.)
چه پیش‌زمینه‌هایی برای یادگیری جاوا اسکریپت نیاز است؟
برای یادگیری جاوا اسکریپت نیاز نیست حتما برنامه‌نویس باشید. اما باید با زبان‌های طراحی وب پایه مثل HTML و CSS آشنایی داشته باشید. همچنین اگر html یا css بلد نیستید یا از یادتون رفته ، توصیه میکنیم آموزش HTML و CSS رو از طریق همین لینک دنبال کنید
و خودتون رو برای شروع دوره جاوا اسکریپت آماده کنید.یادتون باشه که که جاوا اسکریپت زبان برنامه نویسیه و بر خلاف html و css که زبان نشانه‌گذاری هستن، کمی بیشتر شما رو درگیر «برنامه نویسی» میکنه، به همین خاطر ممکنه برای یادگیری اون کمی به صبر و حوصله و تمرین بیشتری نیاز داشته باشید.
اگر آماده هستید، بیاید اولین خط از کدهای جاوا اسکریپت رو امتحان کنیم. برای شروع اول یک صفحه html ساده ایجاد میکنیم.
|
|
<!DOCTYPE html> <html> <body> <h2>اولین جلسه جاوا اسکریپت مهستان</h2> <p id="mahestan"></p> </body> </html> |
قبل از بسته شدن تگ body، یک تگ مخصوص باز میکنیم که امکان اجرای کدهای جاوا اسکریپت رو برای ما فراهم میکنه. این تگ جدید <script>
</script> هستش.
کار این تگ چیه؟
این تگ به شما اجازه میده کدهای جاوا اسکریپت رو در صفحه HTML بنویسید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <body> <h2>اولین جلسه جاوا اسکریپت با مهستان</h2> <p id="mahestan"></p> <script> /* کد جاوا اسکریپت رو اینجا مینویسیم. */ </script> </body> </html> |
حالا می‌خواهیم به‌محض اینکه این صفحه‌ی خالی باز شد، یک پیغام هشدار ()alert برای کاربر باز شه و جمله‌ی «خوش‌آمدید» رو اعلام کنه. برای این کار بین تگ script که قبلا باز کردیم، عبارت("سلام به اولین جلسه از آموزش جاوا اسکریپت خوش آمدید")alert را مینویسیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <body> <h2>اولین جلسه جاوا اسکریپت بامهستان</h2> <p id="mahestan"></p> <script> /* کد جاوا اسکریپت رو اینجا مینویسیم */ alert("سلام به اولین جلسه از آموزش جاوا اسکریپت خوش آمدید") </script> </body> </html> |
حالا صفحه‌ی HTML خودمون رو ذخیره و اون رو رفرش(تازه سازی) میکنیم. حالا میبینید که به محض بارگذاری صفحه، پیغام نوشته‌شده ی ما در قالب یک پنجره‌ی «alert» نمایش داده میشه.
خب به پایان این بخش از آموزش صفر تا ده رسیدیم،امیدوارم تمرین رو فراموش نکنید.
تادرودی دیگر بدرود
