undefined
021 33328750 © THE ART OF PROGRAMMING -
بخش چهارم: ایجاد صفحات وب محاوره ای تر با جاوا اسکریپت

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

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

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

کد جاوا اسکریپت در فایل های جداگانه ای نوشته شده و در کنار اسناد HTML سایت دانلود می شوند. هر دو نوع فایل قادر به ارجاع به محتوای یکدیگر هستند.

ایجاد یک کلید

برای درک برخی از چیزهایی که جاوا اسکریپت قادر است انجام دهد، بیایید نگاهی به دکمه ای که رنگ آن هر زمانی که روی آن کلیک می شود تغییر می کند، بیندازیم. فرض کنید ما این دکمه بنفش با استفاده از HTML ایجاد کردیم. با استفاده از کد جاوا اسکریپت، ما قادر به رصد کردن کلیک یک کاربر بر روی دکمه، خواهیم بود و می توانیم از جاوا اسکریپت برای تغییر رنگ دکمه به مثلاًسبز استفاده کنیم.

بدون جاوا اسکریپت و قابلیت پاسخ به ورودی کاربر در زمان واقعی، دکمه ما قادر به تغییر رنگ در هنگام کلیک نیست. قبل از جاوا اسکریپت، مجبور بودیم یک سند HTML کاملاً جدیدی که حاوی یک دکمه سبز به جای یک دکمه بنفش است را مجدداً دانلود کنیم

 تعاملی تر کردن جهان واقعی

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

 

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

 در این مثال، کد جاوا اسکریپت می بیند که مکان نما ما به کجا حرکت می کند و به صورت پویا پاسخ می دهد و نیازی به بارگزاری صفحه با یک تصویر جدید نیست.

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

اعتبار سنجی فرم: نوع دیگری از تعامل

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

 

این فرم دارای سه مورد اعتبار سنجی منحصر به فرد است:

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

     دوم، آدرس ایمیل کاربر باید واقعی باشد. اگر ایمیل واقعی نیست، با آنها ارتباط برقرار نمی شود.

     سرانجام، کاربران باید یک گذرواژه ایمن با حداقل شش کاراکتر ایجاد کنند.

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

 

یادگیری جاوا اسکریپت واقعاً باید سخت باشد، آیا واقعاً اینگونه است؟

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

برای این منظور مشاهده JavaScript.com سودمند خواهد بود. در آنجا شما می توانید اولین خطوط کد جاوا اسکریپت خود را بنویسید و منابع بیشتری را در مورد نحوه دریافت آموزش بیشتری از این زبان پیدا کنید.

جاوا اسکریپت خارج از مرورگر

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