کاربرد جاوا اسکریپت روی یک صحفه وب

با دوستان خود به اشتراک بگذارید

اشتراک گذاری در facebook
اشتراک گذاری در linkedin
اشتراک گذاری در twitter
اشتراک گذاری در email

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

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

کد جاوا اسکریپت پس از این که HTML و CSS مونتاژ شدند و کنار هم در صفحه وب قرار گرفتند، از سوی موتور جاوا اسکریپت مرورگر اجرا می‌شود. بدین ترتیب تضمین می‌شود که وقتی کد جاوا اسکریپت شروع به اجرا می‌کند، قبلاً ساختار و سبک صفحه بارگذاری شده است.

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

امنیت مرورگر:

هر برگه مرورگر یک محیط مجزا برای اجرا کد است. این محیط‌ها به نام «محیط‌های اجرا» (execution environments) نامیده می‌شوند. این بدان معنی است که در اغلب موارد کدی که در یک برگه اجرا می‌شود کاملاً مستقل است و این کد نمی‌تواند در کد برگه دیگر مرورگر یا وب‌سایت دیگر تغییری ایجاد کند. این یک معیار امنیتی خوب است و اگر چنین امکانی وجود نمی‌داشت، سارقان می‌توانستند کدی بنویسند که اطلاعات را از وب‌سایت‌های دیگر سرقت کند و یا کارهای خرابکارانه دیگر انجام دهد.

ترتیب اجرایی جاوا اسکریپت:

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

می‌بینیم که در این بخش یک پاراگراف متنی در خط 1 انتخاب شده و سپس تلاش می‌شود تا یک «شنونده رویداد» (event listener) در خط 3 به آن الحاق شود. بدین ترتیب وقتی روی پاراگراف کلیک کنیم، بلوک کد ()updateName یعنی خطوط 5 تا 8 اجرا می‌شود. به این نوع از بلوک‌های کد که قابلیت استفاده مجدد دارند تابع گفته می‌شود. بلوک کد ()updateName از کاربر می‌خواهد که نام جدیدی وارد کند و سپس آن را درون پاراگراف قرار داده و برای نمایش به‌روزرسانی می‌کند.

اگر ترتیب دو خط اول کد را با هم عوض کنیم، این کد دیگر کار نخواهد کرد و با خطایی مواجه می‌شویم که در کنسول توسعه‌دهنده مرورگر قابل مشاهده است:

این بدان معنی است که شیء para هنوز وجود ندارد و از این رو نمی‌توان آن را به شنونده رویداد اضافه کرد. این خطای کاملاً رایجی است و باید مواظب باشید که شیءهای ارجاع شده در کد پیش از این که تلاش کنید از آن‌ها استفاده کنید وجود داشته باشند.

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

ممکن است با واژه‌های تفسیر شونده (interpreted) یا کامپایل شونده (compiled) در چارچوب برنامه‌نویسی مواجه شده باشید. در زبان‌های تفسیری، کد از بالا به پایین اجرا می‌شود و سپس نتیجه اجرای کد بی‌درنگ بازگشت می‌یابد. لازم نیست که کد پیش از اجرا از سوی مرورگر به چیز دیگری تبدیل شود. از سوی دیگر زبان‌های کامپایل شونده پیش از آن که روی رایانه اجرا شوند، به شکل دیگری تبدیل (کامپایل) می‌شوند. برای نمونه ++C/C به زبان اسمبلی کامپایل می‌شوند که توسط رایانه اجرا می‌شود. جاوا اسکریپت یک زبان برنامه‌نویسی تفسیر شونده سبُک است. هر دو رویکرد فوق مزیت‌های مختلفی دارند و بحث در مورد آن‌ها موضوع این نوشته نیست.

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

احتمالاً با عبارت‌های سمت سرور (server-side) و سمت کلاینت (client-side) به خصوص در زمینه توسعه وب آشنا هستید. کد سمت کلاینت کدی است که روی رایانه کاربر و هنگام بازدید از یک صفحه وب اجرا می‌شود. کد سمت کلاینت در هنگام بازدید کاربر روی رایانه وی دانلود و سپس اجرا شده و توسط مرورگر نمایش می‌یابد. در این نوشته ما به طور خاص در مورد جاوا اسکریپت سمت کلاینت صحبت خواهیم کرد. در سوی دیگر کد سمت سرور چنان که از نامش بر می‌آید، روی سرور اجرا می‌شود و سپس نتایج آن در مرورگر دانلود شده و مورد اجرا قرار می‌گیرد. نمونه‌ای از زبان‌های وب سمت سرور شامل PHP، پایتون، روبی، ASP.NET و البته جاوا اسکریپت هستند. جاوا اسکریپت می‌تواند به عنوان یک زبان سمت سرور و برای نمونه در محیط محبوبی به نام Node.js اجرا شود.

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

کلمه دینامیک برای توصیف هر دو زبان سمت سرور و سمت کلاینت جاوا اسکریپت استفاده می‌شود و به توانایی آن برای به‌روزرسانی یک صفحه وب یا وب اپلیکیشن برای نمایش چیزهای مختلف در شرایط متفاوت و ایجاد محتوای مورد نظر بنا به ضرورت اشاره دارد. کد سمت سرور به طور دینامیک محتوای جدیدی را مثلا از طریق دریافت داده‌ها از پایگاه داده روی سرور ارائه می‌کند، در حالی که کد جاوا اسکریپت در سمت کلاینت، به طور دینامیک محتوای جدیدی را درون مرورگر برای کاربر نمایش می‌دهد. برای مثال یک جدول جدید HTML ایجاد کرده و آن را با داده‌های دریافتی از سوی سرور پر می‌کند و سپس آن را در یک صفحه وب برای کاربر نمایش می‌دهد. بنابراین معنای این عبارت در این دو زمینه مختلف تا حدودی متفاوت است؛ اما بی ارتباط با هم نیز نیستند و هر دو رویکرد (سمت سرور و سمت کلاینت) معمولاً با هم کار می‌کنند.

یک صفحه وب که محتوای خود را به طور دینامیک به‌روزرسانی نکند، به نام صفحه استاتیک نامیده می‌شود و در هر زمان تنها محتوای ثابتی را نمایش می‌دهد.

ایمیل خود را وارد کنید

نظر خود را با ما به اشتراک بگذارید

مطالب بیشتر

GoLang

زبان برنامه نویسی GOLange

گو (Go) یک زبان برنامه‌نویسی ترجمه‌شده و دارای زباله جمع‌کن و همروند است که در شرکت گوگل و توسط رابرت گریسیمر، راب پایک و کن

Flutter

ری اکت نیتیو یا فلاتر؟

ری‌اکت نیتیو و فلاتر دو فریمورک برتر موبایل هستند که برای ساخت اپلیکیشن‌های موبایل اندروید و iOS مورد استفاده قرار می‌گیرند این فریمورک‌ها توجه جامعه

Code dev

برنامه‌نویسی این امکان رو به شما می‌دهد تا در مورد خودِ «فکر کردن» فکر کنید و وقتی‌ هم که دیباگ می‌کنید، در مورد خودِ «یادگیری» یاد می‌گیرید.

Created by AmirHossein Torabi