جستجو
برای جستجو متن مورد نظر وارد کنید و Enter بزنید برای بستن Esc بزنید.
به دوره مبتدی جاوا اسکریپت MDN خوش آمدید! در این مقاله به جاوا اسکریپت از سطح بالایی نگاه خواهیم کرد و به سوالاتی مانند “چیست؟” و “چه می توانید با آن انجام دهید؟”، و مطمئن شوید که با هدف جاوا اسکریپت راحت هستید.
پیش نیازها: سواد اولیه کامپیوتر، درک اولیه HTML و CSS. هدف: آشنایی با اینکه جاوا اسکریپت چیست، چه کاری می تواند انجام دهد و چگونه در یک وب سایت قرار می گیرد.
یک تعریف سطح بالا جاوا اسکریپت یک زبان برنامه نویسی یا برنامه نویسی است که به شما امکان می دهد ویژگی های پیچیده را در صفحات وب پیاده سازی کنید – هر بار که یک صفحه وب چیزی بیش از نشستن و نمایش اطلاعات ثابت برای شما انجام می دهد – نمایش به روز رسانی محتوا، نقشه های تعاملی، متحرک 2 بعدی / گرافیک های سه بعدی، اسکرول جوک باکس های ویدیویی، و غیره — می توانید شرط ببندید که جاوا اسکریپت احتمالاً دخیل است. این سومین لایه از کیک لایه فناوری‌های وب استاندارد است که دو مورد از آنها (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 rgb(0 0 200 / 0.6);
background: rgb(0 0 200 / 0.6);
color: rgb(255 255 255 / 1);
box-shadow: 1px 1px 2px rgb(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}`;
}
سعی کنید روی آخرین نسخه برچسب متن کلیک کنید تا ببینید چه اتفاقی می‌افتد (همچنین توجه داشته باشید که می‌توانید این نسخه آزمایشی را در GitHub پیدا کنید – کد منبع را ببینید یا آن را به صورت زنده اجرا کنید)! جاوا اسکریپت می تواند خیلی بیشتر از اینها انجام دهد – بیایید جزئیات بیشتری را بررسی کنیم
زبان اصلی جاوا اسکریپت سمت کلاینت شامل برخی از ویژگی های برنامه نویسی رایج است که به شما امکان می دهد کارهایی مانند: مقادیر مفید را درون متغیرها ذخیره کنید. به عنوان مثال، در مثال بالا، ما درخواست می کنیم که یک نام جدید وارد شود و سپس آن نام را در متغیری به نام name ذخیره کنیم. عملیات روی قطعات متن (که در برنامه نویسی به عنوان “رشته” شناخته می شود). در مثال بالا، رشته “Player 1:” را می گیریم و آن را بغیر ناه متم وصل می کنیم تا برچسب متن کامل را ایجاد کنیم، به عنوان مثال. “بازیکن 1: کریس”.
اجرای کد در پاسخ به رویدادهای خاصی که در یک صفحه وب رخ می دهد. ما از یک رویداد کلیک در مثال بالا استفاده کردیم تا تشخیص دهیم چه زمانی روی برچسب کلیک می‌شود و سپس کدی را اجرا می‌کنیم که برچسب متن را به‌روزرسانی می‌کند. و خیلی بیشتر! با این حال، چیزی که حتی هیجان انگیزتر است، عملکردی است که در بالای زبان جاوا اسکریپت سمت کلاینت ساخته شده است. به اصطلاح رابط های برنامه نویسی کاربردی (API) قدرت های فوق العاده ای را برای استفاده در کد جاوا اسکریپت در اختیار شما قرار می دهند.
APIها مجموعه‌های آماده‌ای از بلوک‌های سازنده کد هستند که به توسعه‌دهنده اجازه می‌دهند برنامه‌هایی را پیاده‌سازی کنند که در غیر این صورت پیاده‌سازی آنها سخت یا غیرممکن است. آنها همان کاری را برای برنامه‌نویسی انجام می‌دهند که کیت‌های مبلمان آماده برای خانه‌سازی انجام می‌دهند – گرفتن پانل‌های آماده و پیچاندن آنها برای ساختن یک قفسه کتاب بسیار آسان‌تر از این است که خودتان طراحی را انجام دهید، بروید و آن را پیدا کنید. چوب را درست کنید، تمام پانل ها را به اندازه و شکل مناسب ببرید، پیچ های با اندازه مناسب را پیدا کنید و سپس آنها را کنار هم قرار دهید تا یک قفسه کتاب درست کنید
APIهای مرورگر در مرورگر وب شما تعبیه شده‌اند و می‌توانند داده‌های محیط رایانه اطراف را در معرض نمایش قرار دهند یا کارهای پیچیده مفیدی را انجام دهند. مثلا:
API DOM (Document Object Model) به شما امکان می دهد HTML و CSS را دستکاری کنید، HTML ایجاد، حذف و تغییر دهید، به صورت پویا سبک های جدید را در صفحه خود اعمال کنید و غیره. (همانطور که در نسخه ی نمایشی ساده خود در بالا دیدیم) به عنوان مثال، DOM در عمل است. Geolocation API اطلاعات جغرافیایی را بازیابی می کند. به این ترتیب Google Maps می تواند موقعیت مکانی شما را پیدا کند و آن را روی نقشه ترسیم کند. Canvas و WebGL API به شما امکان می دهد گرافیک های متحرک دو بعدی و سه بعدی ایجاد کنید. مردم با استفاده از این فناوری‌های وب، کارهای شگفت‌انگیزی انجام می‌دهند – به آزمایش‌های Chrome و نمونه‌های وب مراجعه کنید. APIهای صوتی و تصویری مانند HTMLMediaElement و WebRTC به شما این امکان را می‌دهند که کارهای بسیار جالبی را با چند رسانه‌ای انجام دهید، مانند پخش صدا و تصویر مستقیماً در یک صفحه وب، یا گرفتن ویدیو از دوربین وب خود و نمایش آن در رایانه شخص دیگری (دمو ساده Snapshot ما را امتحان کنید. برای دریافت ایده).
API های شخص ثالث به طور پیش فرض در مرورگر تعبیه نشده اند و معمولاً باید کد و اطلاعات آنها را از جایی در وب بگیرید. مثلا:
Twitter API به شما امکان می دهد کارهایی مانند نمایش آخرین توییت های خود را در وب سایت خود انجام دهید. Google Maps API و OpenStreetMap API به شما این امکان را می دهد که نقشه های سفارشی را در وب سایت خود جاسازی کنید، و سایر عملکردهای مشابه
چیزهای بیشتری نیز موجود است! با این حال، هنوز هیجان زده نشوید. پس از مطالعه 24 ساعته جاوا اسکریپت، نمی‌توانید فیس‌بوک، نقشه‌های گوگل یا اینستاگرام بعدی را بسازید – اصول اولیه زیادی وجود دارد که باید ابتدا آنها را پوشش دهید. و به همین دلیل است که شما اینجا هستید – بیایید ادامه دهیم!
در اینجا ما در واقع شروع به بررسی برخی از کدها خواهیم کرد، و در حین انجام این کار، بررسی کنیم که وقتی جاوا اسکریپت را در صفحه خود اجرا می کنید واقعا چه اتفاقی می افتد. بیایید به طور خلاصه داستان اتفاقی که هنگام بارگذاری یک صفحه وب در یک مرورگر رخ می دهد را مرور کنیم (برای اولین بار در مقاله نحوه عملکرد CSS ما صحبت شد). هنگامی که یک صفحه وب را در مرورگر خود بارگذاری می کنید، کد خود (HTML، CSS و جاوا اسکریپت) را در یک محیط اجرایی (برگه مرورگر) اجرا می کنید. این مانند کارخانه ای است که مواد خام (کد) را می گیرد و یک محصول (صفحه وب) را تولید می کند.
یکی از کاربردهای بسیار رایج جاوا اسکریپت، تغییر پویا HTML و CSS برای به روز رسانی یک رابط کاربری، از طریق Document Object Model API است (همانطور که در بالا ذکر شد). توجه داشته باشید که کد موجود در اسناد وب شما معمولاً به ترتیبی که در صفحه ظاهر می شود بارگیری و اجرا می شود. اگر جاوا اسکریپت قبل از HTML و CSS که قرار است اصلاح شود، بارگیری و اجرا شود، ممکن است خطاهایی رخ دهد. در ادامه مقاله، در بخش استراتژی‌های بارگذاری اسکریپت، راه‌هایی برای رفع این مشکل خواهید آموخت.
هر برگه مرورگر دارای سطل جداگانه خود برای اجرای کد است (این سطل ها در اصطلاح فنی “محیط های اجرایی” نامیده می شوند) – این بدان معنی است که در بیشتر موارد کد در هر برگه کاملاً جداگانه اجرا می شود و کد موجود در یک تب نمی تواند مستقیماً اجرا شود. کد را در یک برگه دیگر یا در وب سایت دیگری تحت تأثیر قرار دهید. این یک اقدام امنیتی خوب است – اگر اینطور نبود، دزدان دریایی می توانستند شروع به نوشتن کد برای سرقت اطلاعات از وب سایت های دیگر و موارد بد دیگر کنند.
وقتی مرورگر با بلوکی از جاوا اسکریپت مواجه می شود، معمولاً آن را به ترتیب از بالا به پایین اجرا می کند. این بدان معنی است که شما باید مراقب باشید که چیزها را به چه ترتیبی قرار می دهید. به عنوان مثال، اجازه دهید به بلوک جاوا اسکریپت که در مثال اول خود دیدیم برگردیم:
const para = document.querySelector("p");
para.addEventListener("click", updateName);
function updateName() {
const name = prompt("Enter a new name");
para.textContent = `Player 1: ${name}`;
}در اینجا ما یک پاراگراف متنی (خط 1) را انتخاب می کنیم، سپس یک شنونده رویداد را به آن متصل می کنیم (خط 3) به طوری که وقتی روی پاراگراف کلیک می شود، بلوک کد updateName() (خطوط 5-8) اجرا می شود. بلوک کد updateName() (این نوع بلوک‌های کد قابل استفاده مجدد «توابع» نامیده می‌شوند) از کاربر یک نام جدید می‌خواهد و سپس آن نام را در پاراگراف وارد می‌کند تا نمایشگر به‌روزرسانی شود.
ممکن است اصطلاحاتی را بشنوید که در زمینه برنامه نویسی تفسیر و کامپایل شده اند. در زبان های تفسیر شده، کد از بالا به پایین اجرا می شود و نتیجه اجرای کد بلافاصله برمی گردد. قبل از اجرای مرورگر، لازم نیست کد را به شکل دیگری تبدیل کنید. کد به شکل متن مناسب برنامه نویس دریافت می شود و مستقیماً از آن پردازش می شود. از طرف دیگر زبان های کامپایل شده قبل از اجرا توسط کامپیوتر به شکل دیگری تبدیل می شوند (کامپایل می شوند). به عنوان مثال، C/C++ در کد ماشین کامپایل می شود که سپس توسط کامپیوتر اجرا می شود. این برنامه از یک فرمت باینری که از کد منبع اصلی برنامه تولید شده است اجرا می شود. جی
جاوا اسکریپت یک زبان برنامه نویسی تفسیر شده سبک وزن است. مرورگر وب کد جاوا اسکریپت را به شکل متن اصلی خود دریافت می کند و اسکریپت را از روی آن اجرا می کند. از نقطه نظر فنی، اکثر مفسران جاوا اسکریپت مدرن در واقع از تکنیکی به نام کامپایل بهنگام برای بهبود عملکرد استفاده می کنند. کد منبع جاوا اسکریپت در حین استفاده از اسکریپت به فرمت باینری سریعتر کامپایل می شود تا بتوان آن را در سریع ترین زمان ممکن اجرا کرد. با این حال، جاوا اسکریپت هنوز به عنوان یک زبان تفسیر شده در نظر گرفته می شود، زیرا کامپایل در زمان اجرا انجام می شود، نه زودتر از زمان.
هر دو نوع زبان مزایایی دارند، اما ما در حال حاضر در مورد آنها صحبت نمی کنیم. کد سمت سرور در مقابل کد سمت سرویس گیرنده ممکن است اصطلاحات کد سمت سرور و سمت سرویس گیرنده را نیز بشنوید، به خصوص در زمینه توسعه وب. کد سمت کلاینت کدی است که بر روی رایانه کاربر اجرا می شود – وقتی یک صفحه وب مشاهده می شود، کد سمت مشتری آن صفحه دانلود می شود، سپس اجرا می شود و توسط مرورگر نمایش داده می شود. در این ماژول به صراحت در مورد جاوا اسکریپت سمت کلاینت صحبت می کنیم. از طرف دیگر کد سمت سرور بر روی سرور اجرا می شود، سپس نتایج آن دانلود و در مرورگر نمایش داده می شود. نمونه هایی از زبان های محبوب وب سمت سرور عبارتند از PHP، Python، Ruby، ASP.NET و حتی جاوا اسکریپت! جاوا اسکریپت همچنین می تواند به عنوان یک زبان سمت سرور استفاده شود، به عنوان مثال در محیط محبوب Node.js – می توانید در مورد جاوا اسکریپت سمت سرور در وب سایت های پویا – مبحث برنامه نویسی سمت سرور اطلاعات بیشتری کسب کنید.