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

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

مقدمه:

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

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

زبان های کلاینت ساید:

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

در ادامه به برسی کامل این زبان ها خواهیم پرداخت.

یکی از اصلی ترین و یا به عبارت دیگر تنها زبان استاندارد نمایش وب، زبان HTML (Hyper Text Markup Language) می باشد که تمامی کد ها چه سمت کلاینت و چه سمت سرور در نهایت به تگ های این زبان تبدیل شده و در مرورگر نمایش داده می شوند. این زبان بهمانطور که گفته شد زبان نشانه گذاری می باشد. این تگ ها به مرورگر اعلام می کنند که هر بخش از صفحه چه نوع عنصری است و چگونه باید نمایش داده شود. در یک صفحه یا سند HTML می توان از عناصر والمان هایی همچون عکس، متن، تیتر، پاراگراف و عناصر دیگری را استفاده کرد که هر عنصر دارای تگ خاص خود می باشد. زبان دیگری که استفاده بسیار زیادی در برنامه نویسی کلاینت ساید دارد زبان CSS (Cascade Style Sheets) می باشد. این زبان که کنسرسیوم جهانی وب سا W3C برای غلبه بر مشکلاتی که با استفاده HTML به وجود آمده بود پیشنهاد داد یک زبان مکمل برای HTML است تا نقاط ضعف و خلاء های موجود در HTML را مرتفع سازد. این زبان نیز به صورت نشانه گذاری و با استفاده از تگ های آن مورد استفاده قرار می گیرد.

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

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

قبل از شروع آموزش ما نیاز به یک کد ادیتور داریم که من در طول این آموزش ازCode  Visual Studio استفاده میکنم که یک کد ادیتور رایگان هست و روی تمامی سیستم عامل ها قابل استفاده هست. شما می توانید این کد ادیتور را از آدرس : http://code.visualstudio.com دانلود کنید.سند HTML: یک سند HTML حاوی تگ ها ، اسکریپت ها، استایل ها و اطلاعاتی است که در نهایت قرار استد در مرورگر نمایش داده شوند.

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

مفهوم تگ در HTML:

تگ ها برای نشانه گذاری محتویات در یک سند HTML به کار می روند. مرورگر با توجه به این تگ ها تشخیص می دهد که هر عنصر چیست و چگونه باید نمایش داده شود.هر تگ دارای دو بخش اصلی ، یک بدنه و خواص مخصوص خود است. بخش های اصلی یک تگ شامل بخش ابتدایی و انتهایی است که به صورت :

بخش ابتدایی: <tag>  و بخش انتهایی: </tag> نمایش داده میشود. این بخش ها همانطور که نشان داده شد دارای اسم تگ هستند و فقط در بخش انتهایی در ابتدای اسم تگ یک “/” قرار می گیرد تا به مرورگر بفهماند که این تگ خاتمه یافته است.

بدنه تگ: بدنه تگ فضای میان ابتدا و انتهای تگ بوده که می توتاند خود شامل تگ هایی دیگر ویا متن باشد.

خواص تگ: خواص تگ به دو دسته خواص اصلی ، خواص زبان و خواص عمومی قابل تقسیم شدن هستند.

ساختار سند HTML :

هر سند HTML داری سه تگ اصلی و یک اعلان است.

• اعلان: اعلان یک شبه تگ است که در اولین خط از سند HTML نوشته و بیانگر نسخه HTML درحال استفاده است. در 5 HTML اعلان ها به یک اعلان خلاصه شده اند:

• تگ <html></html>

• تگ <head></head>

• تگ <body></body>

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

معرفی تگ ها( تگ های اصلی صفحه)

تگ html: این تگ بدنه اصلی سند HTML بوده و تگ های خارج آن اجرا نخواهند شد. یک سند HTML حد اکثر یک تگ html دارد.

تگ Head:  تمامی فایل هایی که قرار است به سند ما افزوده شوند مانند فایل های استایل و فیو آیکون ها و همچنین تگ های Meta و تیتر صفحه و … در این تگ قرار خواهند گرفت. این تگ اولین تگ بعد از باز شدن تگ html می باشد.

تگ body: این تگ بعد از بسته شدن تگ head نوشته شده و تمام المان ها و عناصر قابل نمایش در صفحه در این تگ قرار می گیرند.

نکته: اسکریپت ها به صورت استاندارد باید در انتهای این تگ و قبل از بسته شدن آن قرار بگیرند.

در قسمت بعدی به تگ ها و خواص آنها پرداخته و یک صفحه ابتدایی و ساده HTML  را باهم طراحی خواهیم کرد.

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

برای مطالعه ادامه این بحث اینجا کیلیک کنید.

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