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

سرفصل‌های مقاله

پیشنیازهای آموزش جاوا اسکریپت
HTML چیست
CSS3 چیست
نتیجه گیری

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

دانلود این فیلم آموزشی با کیفیت بالا و حجم ۱۴ مگ

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

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

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

یادگیری HTML
یادگیری 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 html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>

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

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

<!DOCTYPE html>

در خط دوم و هفتم تگ‌های باز و بسته 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> مشخص میشه. سلول‌های جدول می‌تونن حاوی هر نوع اطلاعاتی مثل متن، تصویر، جدول، لیست، ویدیو و... باشن. برای اینکه بیشتر متوجه موضوع بشی به مثال پایین توجه کن:

<table> <tr> <th>نام کالا</th> <th>قیمت</th> <th>تاریخ خرید</th> </tr> <tr> <td>چیپس خانواده</td> <td>10000</td> <td>5 اسفند 1397</td> </tr> <tr> <td>ماست موسیر</td> <td>4000</td> <td>5 اسفند 1397</td> </tr> </table>

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

لیست‌ها در HTML

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

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

<ul> <li>چیپس</li> <li>ماست موسیر</li> <li>پفک</li> </ul>

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

<ol> <li>ابتدا در پاکت چیپس را باز نمایید.</li> <li>سپس یک چیپس را از داخل آن انتخاب کنید.</li> <li>چیپس را در ماست موسیر فرو ببرید.</li> <li>آن را آرام آرام بجوید.</li> </ol>

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

<dl> <dt>قهوه</dt> <dd>-نوشیدنی مشکی داغ</dd> <dt>شیر</dt> <dd>-نوشیدنی سفید خنک</dd> </dl>

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

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

CSS3 چیست

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

P { Background-color: red; Color: white; }

همونطور که می‌بینی کدهای 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> صفحه انجام بدی. به این مثال توجه کن:

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

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

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

استایل هایinline
فایل‌ها و تگ‌های CSS
پیشفرض مرورگرها

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

نتیجه گیری

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