پیش نیازهای آموزش جاوا اسکریپت



visibility  
mode_comment   ۰

تا حالا نوشته بودم که من یه رفیق قدیمی دارم؟! دوست من با خوندن مقاله قبلم در مورد آموزش جاوا اسکریپت ترغیب شد که جاوا اسکریپت رو یاد بگیره. اما نمی دونست پیشنیاز های آموزش جاوا اسکریپت چیه. می خوام صادق باشم! آموزش جاوا اسکریپت تقریبا پیشنیاز خاصی نداره! تنها پیشنیاز هایی که برای این زبان برنامه نویسی جذاب وجود داره توی این مقاله نوشتم. پس اگر تو هم داری کم کم تصمیم به شروع یه ماجراجویی هیجان انگیز توی دنیای جاوا اسکریپت رو می گیری، با من توی این مقاله همراه باش!

پیشنیازهای آموزش جاوا اسکریپت

آموزش جاوا اسکریپت

به طور کلی قبل از اینکه دوستم برای آموزش جاوا اسکریپت دست به کار بشه، دو تا کار اساسی برای انجام دادن داره:

  1. یادگیری HTML
  2. یادگیری CSS

نگران نباش! توی این مقاله به هر دوی این مفاهیم می پردازم و اون ها رو تا جایی که می تونم توضیح میدم. باید بگم هیچ کدوم این زبان ها زبان برنامه نویسی نیستن. بنابراین کار تو و دوستم برای یادگیری اون ها خیلی راحته!

HTML چیست

HTML مخفف عبارت Hyber Text Markup Language به معنی زبان نشانه گذاری ابرمتنیه. (چه اسم ابر قهرمانی قلمبه ای!) باید تاکید کنم که HTML به هیچ وجه یک زبان برنامه نویسی محسوب نمیشه. چون با هیچ الگوریتم و حل مسئله خاصی در اون مواجه نیستیم. ساختار HTML چیزی شبیه به آجر هاییه که کنار هم چیده میشن. درسته! وقتی با HTML یک صفحه رو ایجاد می کنی درست مثل اینه که با آجر ذره ذره دیوار های یک خونه رو بسازی!

آجر های HTML المنت (Element) نامیده میشن. المنت ها انواع مختلف و زیادی دارن. مثلا المنت هایی برای ایجاد و شخصی سازی متن، انتشار تصویر، صدا و ویدیو، تقسیم صفحه به قسمت های مختلف و ... خواهران و برادران من! شما تقریبا آزادید در هر جا، هر آجری که خواستید به کار ببرید و خلق کنید هرآنچه را که در ذهن دارید! (الهه خلاقیت در یونان باستان).

گفتم تقریبا؟ چون به هر حال هر خلق کردنی قوانین خاص خودش رو داره. مثلا برای سئوی سایت بهتره که قوانین المنت های معنایی  (Semantic Elements) HTML5 رعایت بشه (در قسمت HTML5 چیست همین مقاله در مورد المنت های معنایی صحبت می کنم). یا اینکه توی تگ p نمی تونیم یه تگ div داشته باشیم و ... المنت ها از تگ های HTML (HTML tags) ساخته میشن. که در ادامه اون ها رو معرفی می کنم.

تگ های HTML

html چیست

گفتم که المنت های HTML از تگ های HTML تشکیل میشن. هر المنت تگ های خاص خودش رو داره. تگ ها لیست بلند بالایی دارن. اما نیاز نیست که همه اون ها رو حفظ باشی. گوگل همیشه پذیرای توست فرزندم! تگ های HTML دو نوع کلی دارن:

تگ های جفتی: تگ های جفتی از دو تگ باز و بسته تشکیل میشن. تگ هایی مثل تگ p یا paragraph، تگ div برای تقسیم بندی صفحه و تگ header برای مشخص کردن بخش هدر صفحه. تگ باز به شکل <tagname> و تگ بسته به شکل </tagname> نوشته میشه. به این صورت:

<tagname>محتوای المنت</tagname>

محتوای المنت هم بین تگ های باز و بسته نوشته میشه. به همین راحتی!

تگ های تکی: تگ های تکی همونطور که از اسمشون مشخصه فقط از یک تگ تشکیل میشن. تگ هایی مثل تگ img یا image برای نمایش تصویر و تگ input برای دریافت ورودی از کاربر از این دسته هستن. برای استفاده از یک تگ تکی کافیه اون رو به این شکل بنویسیم:

البته این شکل از نوشتن تگ های تکی طبق استاندارد XHTML هست و تو می تونی برای راحتی اون ها رو حتی به این شکل به کار ببری:

المنت های تو در تو (nested elements)

حالا سوال اینجاست: اگر ما وضعیتی داشته باشیم که بخوایم توی تگ های div که برای بخش بندی صفحه استفاده کردیم، المنت های دیگه ای داشته باشیم چطور؟ فرزندم تا اونجا که من می دونم تمام صفحات وب به همین موهبت احتیاج دارن! باید بگم که HTML این موهبت رو به ما ارزانی داشته! ما توی HTML مفهومی به اسم تگ های تو در تو یا nested elements داریم. تگ های تو در تو تگ هایی هستن که داخل هم نوشته شدن. درست مثل عروسک های متروشکای روسی با اون هیکل های گرد خنده دار! کد خیلی خیلی ساده پایین، ساختار کلی یک صفحه با تگ های تو در تو رو نمایش میده:

خوب فرزندان من وحشت زده نشوید! قراره خط به خط اون قطعه کد ترسناک بهت توضیح داده بشه! توی خط اول تگ DOCTYPE رو می بینی. تگ DOCTYPE به مرورگر میگه که صفحه از چه نسخه ای از HTML استفاده می کنه. فرزندم نوشتن این تگ توی نسخه قبل HTML یک کابوس به تمام معنیِ یک خطی بود! یک خط کامل برای اینکه به یه مرورگر بگی اسمت چیه؟! از همین تریبون به خالق این روش درود می فرستم!

به هر حال توی نسخه HTML5 این مشکل وحشتناک حل شد. حالا کافیه برای اینکه به مرورگر بگی که HTML5 هستی از این کد استفاده کنی:

در خط دوم و هفتم تگ های باز و بسته html رو می بینی. تگ html نشون دهنده شروع و پایان کد های html هست. تمام عناصر دیگر صفحه داخل این تگ باز و بسته قرار می گیرن:

خط سوم و ششم مربوط به تگ های باز و بسته body هست. تگ بادی چیزی نیست جز در بر گیرنده تمام عناصری که قراره در صفحه نمایش داده بشن. خوب... فرزندم به دلایل خاصی ما تگ هایی برای معرفی پیج داریم که قرار نیست در صفحه نمایش داده بشن! تگ body درست همون کاری رو می کنه که اسمش فریاد می زنه! اون بدنه اصلی صفحه است!

تگ h1 نشان دهنده تیتر هست. تیتر ها در HTML5 از عناصر مهم صفحه هستن که باید به درستی استفاده بشن. ترتیب تیتر ها و سایز پیشفرضشون به تناسب اهمیتی که عناوین دارن و مکان اون ها در ساختار درختی محتوا تعیین میشه. تگ های تیتر یا عنوان، به ترتیب اهمیت عبارت اند از: تگ h1، h2، h3، h4، h5 و h6.

در پایان تگ p رو می بینی که همونطور که قبلا گفتم نشان دهنده یک پاراگراف هست.

HTML5 چیست

HTML5 آخرین ورژن ارائه شده HTML هست. علاوه بر تگ های جدید و جالبی که در این ورژن معرفی شد، تگ هایی هم منقضی (deprecate) شدن. البته تنها تفاوت این ورژن تگ های اون نبود! این بار HTML با یک منش جدید ظاهر شده بود: معنا گرایی! البته این اسم یک جور سبک هنری نیست! برای HTML5 حالا مهم بود که هر المنت دقیقا چه معنی میده و چه محتویاتی داخل خودش داره.

برای روشن کردن موضوع مجبورم یه مثال بزنم. تگ div رو در نظر بگیر. گفتم تگ div برای تقسیم بندی عناصر صفحه استفاده میشه. حالا حدس بزن وقتی یه تگ div می نویسم چی قراره توش باشه! نمیتونی؟ این دقیقا مشکل موتور های جستجویی مثل گوگل هم هست فرزندم! تو تنها موجود فانی و بی اطلاع روی زمین نیستی! مرورگر یا موتور های جستجو از کجا باید می فهمیدن که نیت تو از نوشتن div چیه؟

بنابراین گرایش به معنا به کمک HTML اومد. به این صورت که اگر می خواستی یک هدر یا فوتر یا منویی از لینک ها برای سایتت تعریف کنی دیگه نباید از یک div خالی استفاده می کردی. حالا هر کدوم از این المنت ها تگ خاص خودشون رو داشتن. این عکس یه تصویر خیلی کلی از بعضی المنت های اصلیه:

HTML5 چیست

Attribute ها در HTML

فرض کن قراره مشخص کنیم که هر المنت چه مشخصات یا ویژگی های اضافه ای با خودش داره. به طور مثال برای المنت تصویر یا img این تصویر قراره چی باشه؟ از کجا بیاد؟ این اطلاعات اضافی با attribute ها مشخص میشن. اتریبیوت های زیادی در HTML وجود دارن. بعضی از اون ها فقط مخصوص تگ یا تگ های خاص و بعضی از اون ها تقریبا عمومی هستن. یادت باشه Attribute های HTML همیشه در تگ شروع نوشته میشن. در ادامه مقاله بعضی از attribute های مهم HTML رو بهت معرفی می کنم:

اتریبیوت های width و height

تصاویر در HTML می تونن اتریبیوت های مربوط به سایز بگیرن. طول تصاویر با اتریبیوت width و عرض اون ها با اتریبیوت height مشخص میشه. البته برای دادن سایز به تصاویر می تونیم از CSS هم استفاده کنیم.

اتریبیوت alt

موقعیتی رو فرض کن که در اون المنت تصویر نتونه بارگزاری بشه. مثلا لینک شکسته (broken) باشه و یا اینکه تصویر اصلا در اون آدرس موجود نباشه. به نظرت بهتر نیست به جای یک جای خالی، چیزی به جای تصویر نمایش داده بشه؟ چیزی که حداقل نشون دهنده موضوع اون تصویر باشه؟ اون نوشته با اتریبیوت alt تعیین میشه. به طور واضح، اتریبیوت alt متنیه که در صورت نمایش داده نشدن تصویر در صفحه به جای اون نمایش داده میشه.

اتریبیوت src

گفتم که تصاویر نیاز دارن برای نمایش، آدرسی که به محل فایلشون اشاره کنه داشته باشن. در واقع این داستان چه در مورد تصاویر چه صدا ها و چه ویدیو ها صادقه. آدرس محل قرار گیری فایل این المنت ها رو با اتریبیوت src مشخص می کنیم.

اتریبیوت href

لینک ها در HTML با تگ <a></a> مشخص میشن. اما از کجای این تگ باید معلوم باشه بعد از کلیک روی لینک کاربر باید به کجا هدایت بشه؟ اتریبیوت href! در واقع اتریبیوت href یک جورایی src لینک هاست!

اتریبیوت style

با اتریبیوت style می تونیم property ها یا ویژگی های CSS رو به اتریبیوت های المنت اختصصاص بدیم. البته برای این کار راه های بهتری هم وجود داره. اما خوب! گاهی به این حقه هم احتیاج پیدا می کنی!

مروری کلی بر تگ های HTML

گفتم که HTML تگ های خیلی زیادی داره اما من برای آشنایی و دست گرمی بعضی از اون ها رو بهت معرفی می کنم. کاش می تونستم همه اون ها رو بهت معرفی کنم اما فرزندم! تو در حال حاضر توی یک سریال فلسفی در مورد آموزش جاوا اسکریپت هستی نه HTML!

تگ div

تگ div نشان دهنده یه قسمت یا بخش توی صفحه است. معمولا تگ div در بر گیرنده تگ های دیگه ای هست. و باز هم معمولا، برای دادن یک style خاص به اون دسته از المنت هایی که داخل div هستن یا خود اون div استفاده میشه. تگ div به این صورت نوشته میشه:

تگ a

تگ a یا anchor برای ایجاد لینک استفاده و به این شکل نوشته میشه:

تگ nav

برای اینکه یک navbar یا منوی ناوبری داخل صفحه مون داشته باشیم از تگ nav استفاده می کنیم. البته تگ nav فقط مخصوص لینک های بالای صفحه داخل هدر نیست. هر مجموعه ای از لینک در صفحه که کاربر رو به قسمت های مختلف صفحه یا سایت هدایت می کنه می تونه نامزد تگ nav باشه. تگ nav به این شکل نوشته میشه:

جداول در HTML

جداول در HTML با تگ باز و بسته <table></table> ایجاد میشن. هر سطر جدول با تگ <tr></tr>، سر تیتر ها با <th></th> و هر سلول جدول با تگ <td></td> مشخص میشه. سلول های جدول می تونن حاوی هر نوع اطلاعاتی مثل متن، تصویر، جدول، لیست، ویدیو و... باشن. برای اینکه بیشتر متوجه موضوع بشی به مثال پایین توجه کن:

 

صد در صد مقوله جداول در HTML گسترده تر از این چند خطه ولی ما صرفا در حال دریافت یک آشنایی خیلی کلی از HTML برای شروع javascript هستیم.

لیست ها در HTML

یکی از المنت های خیلی مهم و پرکاربرد در HTML لیست ها هستن. لیست ها در مکان های مختلفی به اشکال متفاوت استفاده میشن. مثلا می تونیم با اونا منو های navbar و یا مجموعه لینک های فوتر صفحه بسازیم. لیست ها در HTML سه نوع اصلی دارن:

Unordered Lists: لیست های مرتب نشده یا Unordered List ها در جاهایی استفاده میشن که مثل دو مثال منوی nav و فوتر ترتیب آیتم ها مهم نیست. این نوع لیست ها با تگ <ul></ul> و آیتم های اون ها با تگ <li></li> مشخص میشن. به طور پیشفرض، در کنار هر آیتم لیست های مرتب نشده، یک دکمه تو پر مشکی قرار می گیره. به مثال پایین توجه کن:

 

Ordered Lists: لیست های مرتب شده در جاهایی استفاده میشن که ترتیب آیتم ها مهم باشه. این نوع از لیست با تگ های <ol></ol> و آیتم های اون با تگ های <li></li> ساخته میشه. به طور پیشفرض، آیتم های لیست های مرتب شده یا ol شماره گذاری میشن. به مثال پایین توجه کن:

 

Description Lists: آخرین نوع لیستی از HTML که قصد دارم بهش بپردازم لیست های تعریفی یا توصیفی یا description list ها هستن. لیست های تعریفی درست مثل یک دیکشنری، ترکیبی از واژه ها و تعاریف اون ها هستن. برای تعریف یک لیست تعریفی کافیه از تگ های <dl></dl>، برای نمایش واژه ها تگ های <dt></dt> و برای نمایش تعریف واژه ها از تگ های <dd></dd> استفاده می کنیم. اگر ماجرا کمی برات گیج کننده است به مثال پایین توجه کن:

 

یادت باشه که می تونی از لیست ها به صورت تو در تو یا nested هم استفاده کنی. به این صورت که به جای محتوای هر آیتم، یک لیست دیگه- از هر نوعی- بنویسی.

من اینجا به بعضی از المنت های اصلی و تگ هاشون اشاره کردم. اما برای شناختن بقیه المنت های HTML5 و روش استفاده از اون ها می تونی به مستندات W3schools مراجعه کنی. البته اگر فهمیدن یا خوندن اون مستندات برات مشکله ما یک دوره آموزش طراحی سایت برات داریم که هم HTML و هم CSS و هم طریقه ترکیب و استفاده از اون ها رو بهت آموزش میده.

 CSS3 چیست

CSS3 چیست

حالا که با HTML آشنا شدی باید بدونی که CSS پسر عموی HTML هست! با CSS می تونی المنت های مختلف HTML رو انتخاب و ظاهر اون ها رو شخصی سازی کنی. برای مثال فرض کن می خوای یه پاراگراف داشته باشی که از پاراگراف های دیگه متمایز باشه. مثلا پس زمینه قرمز و رنگ فونت سفید داشته باشه. کد CSS پایین این تنظیمات رو روی پاراگراف پیاده می کنه:

 

همونطور که می بینی کدهای CSS خیلی نزدیک به زبان انسان هستن. بنابراین یادگیری اون به شدت آسونه! توی کد بالا، در خط اول خاصیت های CSS رو به المنت p اختصصاص دادیم. به این قسمت selector گفته میشه. تمام بخش های داخل براکت ها بلوک declaration نامیده میشن. هر کدوم از خط های داخل بلوک declaration یک declaration هست که از دو بخش تشکیل میشه.

بخش قبل از علامت : که property نامیده میشه نشون دهنده خاصیتی هست که قصد داریم بهش مقدار بدیم. مثل رنگ فونت، پس زمینه، نوع یا سایز فونت و ... بخش بعد از علامت : که value نامیده میشه نشون دهنده مقدار اون خاصیته! هر خط declaration با یک علامت سمی کالم (;) به آخر می رسه.

CSS3 چیست

CSS مخفف عبارت Cascading Style Sheet هست. اما چرا؟ برای پی بردن به این چرایی کافیه نگاهی به ترتیب اولویت تعیین مشخصات سی اس اس نگاهی بندازیم. هر المنت HTML قبل از اینکه خواص CSS رو بگیره توسط مرورگر ها دارای یک جور ظاهر پیشفرضه. ضمنا ما می تونیم CSS رو به سه روش به فایل HTML ضمیمه کنیم:

روش inline: توی همین مقاله در مورد اتریبیوت style در تگ های HTML توضیح دادم. به روش اضافه کردن کدهای CSS با استفاده از اتریبیوت style روش inline گفته میشه. به این مثال توجه کن:

روش تگ <style></style>: همونطور که از اسم این روش مشخصه کافیه تمام کد های CSS رو بین تگ های باز و بسته <style></style> قرار بدی:

روش فایل CSS: توی این روش کافیه یک فایل با فرمت .css رو با استفاده از تگ link به فایل HTML اضافه کنی. البته فراموش نکن که این کار رو حتما داخل تگ <head></head> صفحه انجام بدی. به این مثال توجه کن:

<link rel=”text/stylesheet” href=”example.css” />

همونطور که قابل حدسه آدرس فایل .css رو در اتریبیوت href تگ link می نویسیم. در ضمن اتریبیوت rel نشون دهنده نوع فایلیه که با استفاده از تگ link به صفحه متصل میشه.

حالا موقعیتی رو فرض کن که در اون هم از طریق روش inline و هم از روش فایل .css ظاهر یک المنت خاص رو تعیین کردیم. مثلا در اتریبیوت style سایز فونت رو برابر با 12px و در فایل .css مقدار اون رو برابر با 16px تعیین کردیم. سوال اینه: حالا سایز فونت قراره کدوم یک از این دو مقدار باشه؟

واقعیت اینه که CSS خواص سی اس اس رو به صورت Cascade یا آبشار تعیین می کنه. این یعنی که انتخاب خواص نهایی به صورت اولویت دار اتفاق می افته. اولویت انتخاب خواص نهایی به این صورته:

  1. استایل هایinline
  2. فایل ها و تگ های CSS
  3. پیشفرض مرورگرها

و در نهایت اگر همه استایل ها دارای اولویت یکسان باشن، در نهایت خواصی انتخاب میشi که آخر از همه نوشته شده باشه.

نتیجه گیری

تا اینجای کار با زبان های پیشنیاز برای آموزش جاوا اسکریپت آشنا شدی. دیدی که با HTML می تونی به هر المنت دستور ایجاد شدن بدی و با CSS ظاهر و محل قرارگیری اون المنت رو تعیین کنی. شاید برات جای سوال باشه که همه این کد ها رو کجا باید بنویسم؟ ساده است! هر ویرایشگر متنی که دم دستته می تونه کاندید باشه! حالا تو تمام پیشنیاز های لازم برای آموزش جاوا اسکریپت رو داری. برای ادامه مسیر حتما مقالات بعدی رو دنبال کن. یادت نره که نظرت رو توی قسمت نظرات با من در میون بذاری. در ضمن اگر سوالی داشتی من خوشحال میشم اولین نفری باشم که بهت پاسخ میده!

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back
comment دیدگاه کاربران

add_circle ارسال دیدگاه

خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :