جاوا اسکریپت در واقع یک زبان برنامه‌نویسی محسوب می‌شود که شما با استفاده از آن می‌توانید ویژگی‌هایی را که دارای ساختار پیچیده هستند، در صفحات اینترنت پیاده کنید. شما این امکان را دارید که این رویه را در هر مرتبه که یک صفحه وب غیر از نمایش اطلاعات ثابت، کارهای دیگری نیز برای شما انجام می‌دهد، تکرار کنید.
منظور از کارهای انجام شده توسط وب مواردی از جمله نمایش نحوه و میزان به روزرسانی محتوا، برنامه‌های مبتنی بر تعامل در وب، تهیه تصاویر گرافیکی دو یا سه بعدی، تهیه اسکرول‌های مربوط به جوک باکس‌های ویدئویی و دیگر موارد است. نقش جاوا اسکریپت در همه این اقدامات بسیار مهم و کلیدی است. به بیان دیگر جاوا اسکپریت سومین بخش از قسمت‌های فناوری موجود در صفحه وب استاندارد محسوب می‌شود، دو لایه دیگر نیز HTML و CSS هستند، که توضیحات اجمالی درباره آنها در ادامه این مقاله از سامانه طراحی سایت پایدار، ارائه می‌شود.
- HTML زبان نشانه گذاری است که از آن برای ساختاردهی و معنا بخشیدن به محتوای وب استفاده می‌شود، به عنوان مثال تعریف پاراگراف‌ها، عنوان‌ها و جداول داده یا جاسازی تصاویر و ویدیوها در صفحه.
- CSS زبانی از قوانین سبک است که از آن برای اعمال یک استایل به محتوای HTML استفاده می‌شود، به عنوان مثال تنظیم رنگ‌های پس زمینه و فونت‌ها و قرار دادن محتوا در چندین ستون.
- جاوا اسکریپت یک زبان برنامه نویسی است که به شما امکان می‌دهد محتوای به روزرسانی پویا ایجاد کنید، چند رسانه‌ای را کنترل کنید، و تصاویر را متحرک کنید.
این سه لایه به خوبی روی هم قرار می‌گیرند. بیایید یک برچسب متنی ساده را به عنوان مثال در نظر بگیریم. می‌توانیم آن را با استفاده از HTML علامت‌گذاری کنیم تا ساختار و هدفی به آن بدهیم:
برچسب های جاوا اسکریپت
<p>Player 1: Chris</p>
سپس می‌توانیم مقداری CSS به ترکیب اضافه کنیم تا زیبا به نظر برسد:
p {
font-family: 'helvetica neue', helvetica, sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
border: 2px solid rgba(0,0,200,0.6);
background: rgba(0,0,200,0.3);
color: rgba(0,0,200,0.6);
box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
border-radius: 10px;
padding: 3px 10px;
display: inline-block;
cursor: pointer;
}
و در نهایت، می‌توانیم مقداری جاوا اسکریپت برای پیاده سازی رفتار پویا اضافه کنیم.
پیاده سازی رفتار پویا با جاوا اسکریپت
const para = document.querySelector('p');
para.addEventListener('click', updateName);
function updateName() {
const name = prompt('Enter a new name');
para.textContent = `Player 1: ${name}`;
جاوا اسکریپت می‌تواند فعالیت‌های مفید بیشتری انجام دهد، بیایید این موارد را با جزئیات بیشتر بررسی کنیم.
زبان اصلی جاوا اسکریپت شامل برخی از ویژگی‌های برنامه نویسی رایج است که به شما امکان می‌دهد کارهایی مانند موارد زیر را انجام دهید:
- مقادیر مفید را درون متغیرها ذخیره کنید. به عنوان مثال، در مثال بالا، ما درخواست می‌کنیم که یک نام جدید وارد شود و سپس آن نام را در متغیری به نام name ذخیره کنیم.
- عملیات روی قطعات متن (که در برنامه نویسی به عنوان "رشته" شناخته می‌شود). در مثال بالا، رشته "Player 1:" را می‌گیریم و آن را به متغیر نام وصل می‌کنیم تا برچسب متن کامل را ایجاد کنیم.
- اجرای کد در پاسخ به رویدادهای خاصی که در یک صفحه وب رخ می‌دهد. ما از یک رویداد کلیک در مثال بالا استفاده کردیم تا تشخیص دهیم چه زمانی روی برچسب کلیک می‌شود و سپس کدی را اجرا می‌کنیم که برچسب متن را به‌روزرسانی می‌کند.
با این حال، چیزی که جالب‌تر است، عملکردی است که در زبان جاوا اسکریپت سمت کلاینت ساخته شده است. رابط‌های برنامه‌نویسی کاربردی (API) قدرت‌های فوق‌العاده ای را برای استفاده در کد جاوا اسکریپت در اختیار شما قرار می‌دهند.
APIها مجموعه‌های آماده‌ای از بلوک‌های سازنده کد هستند که به توسعه‌دهنده اجازه می‌دهند برنامه‌هایی را پیاده‌سازی کنند که در نبود این مجموعه، پیاده‌سازی آنها سخت یا غیرممکن است. آنها همان کاری را برای برنامه‌نویسی انجام می‌دهند که کیت‌های مبلمان آماده برای خانه‌سازی انجام می‌دهند. در واقع گرفتن پانل‌های آماده و تنظیم آنها برای ساختن یک قفسه کتاب بسیار آسان‌تر از این است که خودتان طراحی را انجام دهید، بروید و آن را پیدا کنید. چوب را درست کنید، تمام پانل‌ها را به اندازه و شکل مناسب ببرید، پیچ‌های با اندازه مناسب را پیدا کنید و سپس آنها را کنار هم قرار دهید تا یک قفسه کتاب بسازید.
APIها به طور کلی به دو دسته تقسیم می‌شوند:
APIهای مرورگر که در مرورگر وب شما تعبیه شده‌اند و می‌توانند داده‌های محیط رایانه اطراف را در معرض نمایش قرار دهند یا کارهای پیچیده مفیدی را انجام دهند. به طور مثال:
API DOM (Document Object Model) به شما این امکان را می‌دهد که HTML و CSS را دستکاری کنید، HTML را ایجاد یا حذف کنید و یا تغییر دهید، به صورت پویا سبک‌های جدید را در صفحه خود اعمال کنید و موارد دیگر.
Geolocation API اطلاعات جغرافیایی را بازیابی می‌کند. به این ترتیب Google Maps می‌تواند موقعیت مکانی شما را پیدا کند و آن را روی نقشه ترسیم کند.
Canvas و WebGL API به شما امکان می‌دهد گرافیک‌های متحرک دو بعدی و سه بعدی ایجاد کنید. مردم با استفاده از این فناوری‌های وب، کارهای شگفت‌انگیزی انجام می‌دهند.
APIهای صوتی و تصویری مانند HTMLMediaElement و WebRTC به شما این امکان را می‌دهند که کارهای بسیار جالبی را با چند رسانه‌ای انجام دهید، مانند پخش صدا و تصویر مستقیم در یک صفحه وب، یا گرفتن ویدیو از دوربین وب خود و نمایش آن در رایانه شخص دیگری.
توجه: بسیاری از دموهای بالا در مرورگرهای قدیمی کار نمی‌کنند، بنابراین هنگام آزمایش، ایده خوبی است که از یک مرورگر مدرن مانند فایرفاکس، کروم، اج یا اپرا برای اجرای کد خود استفاده کنید.
API های شخص ثالث به طور پیش فرض در مرورگر تعبیه نشده‌اند و معمولا باید کد و اطلاعات آنها را از جایی در وب بگیرید. به طور مثال:
Twitter API به شما این امکان را می‌دهد کارهایی مانند نمایش آخرین توییت‌های خود را در وب‌سایت خود انجام دهید.
Google Maps API و OpenStreetMap API به شما این امکان را می‌دهد که نقشه‌های سفارشی را در وب‌سایت خود و سایر قابلیت‌های مشابه جاسازی کنید.
جاوا اسکریپت در صفحه شما چه می‌کند؟
بیایید به طور خلاصه داستان اتفاقی که هنگام بارگذاری یک صفحه وب در یک مرورگر رخ می‌دهد را مرور کنیم. هنگامی که یک صفحه وب را در مرورگر خود بارگذاری می‌کنید، کد خود (HTML، CSS و جاوا اسکریپت) را در یک محیط اجرایی (برگه مرورگر) اجرا می کنید. این روند مانند کارخانه‌ای است که مواد خام (کد) را می گیرد و یک محصول (صفحه وب) را تولید می کند.
یک استفاده بسیار رایج از جاوا اسکریپت، تغییر پویای HTML و CSS برای به روز رسانی یک رابط کاربری، از طریق Document Object Model API است. توجه داشته باشید که کد موجود در اسناد وب شما معمولا به ترتیبی که در صفحه ظاهر می‌شود، بارگیری و اجرا می‌شود. اگر جاوا اسکریپت قبل از HTML و CSS که قرار است اصلاح شود، بارگیری و اجرا شود، ممکن است خطاهایی رخ دهد.
امنیت مرورگر
هر برگه مرورگر دارای صفحه جداگانه خود برای اجرای کد است (این صفحه‌ها در اصطلاح فنی محیط‌های اجرایی نامیده می‌شوند. این به این معنی است که در بیشتر موارد کد در هر برگه کاملا جداگانه اجرا می‌شود و کد موجود در یک تب نمی‌تواند مستقیما اجرا شود. کد را در یک برگه دیگر یا در وب سایت دیگری تحت تأثیر قرار دهید. این یک اقدام امنیتی خوب است، اگر اینطور نبود، افراد سودجو می توانستند شروع به نوشتن کد برای سرقت اطلاعات از وب‌سایت های دیگر کنند.
دستور اجرای جاوا اسکریپت
هنگامی که مرورگر با بلوکی از جاوا اسکریپت مواجه می‌شود، معمولا آن را به ترتیب از بالا به پایین اجرا می‌کند. این به این معنی است که شما باید مراقب باشید که برنامه‌ها و کدها را به چه ترتیبی قرار می‌دهید.
کلام آخر
جاوا اسکریپت یک زبان برنامه نویسی تفسیر شده سبک است. مرورگر وب کد جاوا اسکریپت را به شکل متن اصلی خود دریافت می‌کند و اسکریپت را از روی آن اجرا می‌کند. از نقطه نظر فنی، اکثر مفسران جاوا اسکریپت مدرن در واقع از تکنیکی به نام کامپایل بهنگام برای بهبود عملکرد استفاده می‌کنند. کد منبع جاوا اسکریپت در حین استفاده از اسکریپت به فرمت باینری سریع‌تر کامپایل می‌شود تا بتوان آن را در سریع‌ترین زمان ممکن اجرا کرد.
با این حال، جاوا اسکریپت هنوز به عنوان یک زبان تفسیر شده در نظر گرفته می‌شود، زیرا کامپایل در زمان اجرا انجام می‌شود، نه زودتر از آن. در این مقاله از سامانه طراحی سایت پایدار وب، به بررسی و معرفی زبان javascript بصورت کامل پراختیم و شما می توانید برای سفارش طراحی سایت، از طریق سامانه ما اقدام کنید.
مدیریت وب‌سایت
دیدگاه خود را بنویسید