برنامه نویسی کلاینت ساید (بخش اول قسمت دوم)

برنامه نویسی کلاینت ساید

برای مطالعه بخش اول برنامه نویسی کلاینت سایاینجا کیلیک کنید.

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

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

بهترین روشی که تمام اساتید این حوضه توصیه می کنند یادگیری از روی سورس های آماده توام با تمرین و خواندن رفرنس ها می باشد.

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

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

1. یادگیری مفاهیم زبان
2. یادگیری دستور زبان یا سینتکس آن زبان
3. یادگیری و درک الگوریتم ها
4. عیین هدف و طراحی مسیر برای نوشتن یک برنامه.

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

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

یادگیری صرفا سرکلاس درس نشستن نیست، جه کلاسی مجازی مانند اینترنت، یا کلاسی عملی نزد اساتید حرفه ای باشد. یاد گیری مجموعه ای از انجام فردی و یا گروهی موارد ذکر شده و مطالعه ی سورس های در دسترس و طرح مسئله با توجه به نکات استخراج شده از کتب، رفرنس ها و سورس ها است که در نهایت تحت بازخوانی و ایجاد ارتباط ذهنی بین مطالب، مباحث و کد های خوانده شده، منجر به حل مسئله و درنتیجه یادگیری الگوریتم ، سینتکس و یک راه حل برای مسائل مشابه می شود.

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

در ادامه به بررسی چند تگ پر کاربرد و خواص آنها خواهیم پرداخت و روش فوق را بکار خواهیم بست.

تگ های پر کاربرد دربرنامه نویسی کلاینت ساید:

تگ <div>:  این تگ یکی از مهم ترین تگ های زبان html میباشد که می توان به وسیله آن صفحات html را لایه بندی کرد.

تا قبل از ورود این تگ به زبان HTML از تگ Table  برای قسمت بندی و مدیریت بخش های صفحه استفاده می شد. این تگ خواصی همچون (class , id , style, hidden,…) را دارا می باشد. این خواص از دسته خواص عمومی هستند که کاربرد آنها را هم بررسی می کنیم.

اما قبل از طرح مثال باید گریزی به زبان CSS بزنیم زیرا بیشتر مثال هایی که می توانیم برای تگ ها و خواص class   و style  و id بزنیم با CSS  سرو کار دارند.

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

ما در این مجموعه به صورت مستقیم از CSS استفاده نمی کنیم بلکه از فریمورک های آماده و حرفه ای مانند bootstrap استفاده می کنیم که به مراتب فرایند طراحی صفحه را راحت تر می سازند.

و اما ساختار تگ های CSS:

در CSS می توان برای تمام المان های html استایل نوشت . این استایل ها می توانند بر اساس class ها ، id  ها و یا خود تگ ها باشد.

یک کلاس در CSS به صورت زیر تعریف می شود:

درصورتی که بخواهید از id  استفاده کنید می توانید به جای “.” از “#” قبل از اسم کلاس و در تگ html به جای خاصیت class از id استفاده استفاده بکنید.

دستورات درون آکولاد تگ های زبان CSS هستند. این تگ ها را می توانید بصورت اختصاصی درون خاصیت style در بدنه تگ html بنویسید و یا در کلاس مورد نظر در یک فایل استایل شیت و یا تگ <style> در داخل تگ head بنویسید. به مثال زیر توجه کنید:

همانطور که مشاهده می کنید برای دسترسی به کلاس های CSS باید از خاصیت class استفاده کرد.

نحوه استفاده از فایل های استایل شیت:

این فایل ها با پسوند .css با استفاده از تگ link  در داخل تگ head  به صفحه اضافه می شوند و خود فایل استایل شیت فایلی است که تمام کد های css  ما درون آن قرار می گیرید. به مثال زیر توجه کنید:

تگ لینک با صفت rel  و ارزش stylesheet مربوط به خواندن فایل استایل شماست و href هم معرف مسیر فایل است.

اما خاصیت style درون خود تگ:

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

همانطور که در مثال بالا مشاهده می کنید تگ border در کلاس Test جا افتاده است و با استفاده از  خاصیت  style  آن را به تگ اعمال کرده ایم.

واما معرفی bootstrap  :

Bootstrap یک کتابخانه و یا فریمورک CSS بوده که توسط توییتر تولید و منتشر شده است. این کتابخانه رایگان می باشد و امکانات زیادی را در اختیار طراحان قرار می دهد. شما می توانید با مراجعه به سایت https://getbootstrap.com  این فریمورک را دانلود کرده و کامپوننت های آن را مشاهده کنید.

در صورتی که از Visual Studio Code استفاده می کنید می توانید با نصب Snippet این فریمورک به راحتی هرچه تمام تر قطعات کدی که لازم دارید را در صفحه ایجاد کنید. برای کسب اطلاعات بیشتر می توانید به آدرس زیر مراجعه نمایید:

https://marketplace.visualstudio.com/items?itemName=wcwhitehead.bootstrap-3-snippets

اما در ادامه معرفی تگ های html، لیستی از این تگ ها را به همراه توضیح مختصر آن ها قرار می دهم تا بتوانید به راحتی از آنها استفاده کنید:

تعریف تگ ها در حد جدول بالا کفایت می کند چرا که بسیاری از این تگ ها خیلی کم استفاده می شوند و شاید اصلا استفاده نشوند. تگ های مهم را هم درمثال ها همراه با استفاده از سورس و bootstrap خواهیم دید.

پیدا کردن سورس برای تمرین:

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

شما می توانید سورس هر سایتی را که می خواهید ببنید! فقط کافی است روی صفحه سایت موردنظر درمرورگر خود راست کلیک کرده و گزینه inspect  یا در کروم علاوه بر آن View Page Source را بزنید. سورس صفحه مورد نظر برای شما نمایش داده می شود.

توجه داشته با شید که در حالت inspect شما می توانید المان به المان صفحه را بررسی نمایید و استایل های اعمال شده به آن المان را هم بررسی کنید ولی اگر از View Page Sourceاستفاده می کنید استایل های صفحه را باید از داخل تگ های link  پیدا کنید.

درصورتی که به دنبال سورس های حرفه ای هستید می توانید از demo  های سایتhttps://wrapbootstrap.com   استفاده کنید

شما می توانید با توجه به توضیحات ابتدای این قسمت و منابع معرفی شده برای خود طرح مسئله نموده و با استفاده از رفرنس های موجود مباحث و مفاهیم زبان HTML را فرابگیرید.

با ما همراه باشید!

برای مطالعه ادامه  این بخش اینجا کیلیک کنید.

نویسنده : مهندس علیرضا دادرس