به دوره مبتدی جاوا اسکریپت خوش آمدید! در این مقاله از زوایه دید بالایی به جاوا اسکریپت نگاه خواهیم کرد و به سؤالاتی مانند «جاوا اسکریپت چیست؟» و «چه کاری می‌توانید با آن انجام دهید؟» پاسخ خواهیم داد. همچنین با خواندن این مطلب مطمئن خواهید شد که جاوا اسکریپت زبان برنامه نویسی هدف شماست یا خیر.
پیش نیازها: سواد اولیه کامپیوتر، درک اولیه HTML و CSS.
هدف: آشنایی با این که جاوا اسکریپت چیست، چه کاری می‌تواند انجام دهد و چگونه در یک وب سایت قرار می‌گیرد.
یک تعریف سطح بالا از جاوا اسکریپت
جاوا اسکریپت یک زبان برنامه نویسی یا اسکریپت‌نویسی است که به شما امکان می‌دهد قابلیت‌ها و ویژگی‌های پیچیده را در صفحات وب پیاده سازی کنید. (کارهایی بیش از نمایش اطلاعات ثابت در یک صفحه وب). از جمله این کارها می‌توان به نمایش به‌روزرسانی محتوا، نقشه‌های اینتراکتیو، گرافیک‌های انیمیشنی دو بعدی و سه بعدی، اسکرول jukebox های ویدئویی و غیره اشاره کرد. این سومین لایه از کیک لایه‌های فناوری‌های وب استاندارد است، که دو مورد از آنها (HTML و CSS) لایه‌های دیگر آن هستند.
HTML زبان markup یا نشانه‌گذاری است که ما از آن برای ساختاردهی و معنا بخشیدن به محتوای وب خود استفاده می‌کنیم. کارهایی که می‌توان با آن انجام داد به طور مثال شامل تعریف پاراگراف‌ها، heading ها، جداول داده و جاسازی تصاویر و ویدئوها در صفحه است.
CSS زبانی از قوانین استایل‌بندی است که ما از آن برای اعمال یک استایل به محتوای HTML خود استفاده می‌کنیم. به عنوان مثال رنگ‌های پس‌زمینه و فونت‌ها را تنظیم می‌کنیم و محتوای خود را در چندین ستون قرار می‌دهیم.
ویژگی‌های جاوا اسکریپت
جاوا اسکریپت (JavaScript) یک زبان برنامه نویسی است که به شما امکان می‌دهد محتوایی ایجاد کنید که به طور پویا به‌روزرسانی می‌شود، فایل‌های مولتی‌مدیا را کنترل کنید، تصاویر را متحرک‌سازی کنید، و تقریباً هر کار دیگری را با آن انجام دهید. (خب، نه همه چیز. اما با چند خط کد جاوا اسکریپت می‌توانید به چیزهای شگفت‌انگیزی برسید).
این سه لایه به خوبی روی هم قرار می‌گیرند. بیایید یک لیبل متنی ساده را به عنوان مثال در نظر بگیریم. می‌توانیم آن را با استفاده از HTML علامت‌گذاری کنیم تا به آن ساختار و هدف بدهیم.
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;
}
سپس می‌توانیم مقداری CSS به ترکیبمان اضافه کنیم تا زیبا به نظر برسد:
const para = document.querySelector('p');
para.addEventListener('click', updateName);
function updateName() {
const name = prompt('Enter a new name');
para.textContent = `Player 1: ${name}`;
}
و در نهایت، می‌توانیم مقداری جاوا اسکریپت برای پیاده‌سازی رفتار پویا اضافه کنیم:
جاوا اسکریپت می‌تواند کارهای بسیار بیشتری هم انجام دهد. بیایید با جزئیات بیشتر این زبان را بررسی کنیم.
جاوا اسکریپت دقیقاً چه کاری می‌تواند انجام دهد؟
زبان اصلی و client-side جاوا اسکریپت شامل برخی از ویژگی‌های رایج برنامه نویسی است که به شما امکان می‌دهد کارهای زیر را انجام دهید:
- مقادیر مفید را درون متغیرها ذخیره کنید. به عنوان مثال، در مثال بالا ما درخواست می‌کنیم که یک نام جدید وارد شود و سپس آن را در متغیری به نام name ذخیره می‌کنیم.
- عملیات روی قطعات متن (که در برنامه نویسی به عنوان strings شناخته می‌شود). در مثال بالا، string به نام Player 1: را می‌گیریم و آن را به متغیر وصل می‌کنیم تا لیبل متن را به طور کامل ایجاد کنیم. به عنوان مثال: Player 1: Chris.
- اجرای کد در پاسخ به رویدادهای خاصی که در یک صفحه وب رخ می‌دهد. برای مثال در مثال بالا از رویداد کلیک استفاده کردیم تا تشخیص دهیم چه زمانی روی لیبل کلیک می‌شود و سپس کدی را اجرا می‌کنیم که لیبل متن را به روز رسانی می‌کند. (در مثال بالا بر روی لیبل متن کلیک شد و سپس WORDS THAT YOU TYPING تایپ شد).
- و کارهای بسیار بیشتری می‌توانید با این زبان انجام دهید!
با این حال، چیزی که حتی هیجان‌انگیزتر است، عملکردی است که در بالای client-side زبان جاوا اسکریپت ساخته شده است. رابط‌های برنامه نویسی کاربردی (به اصطلاح APIs) قدرت‌های فوق‌العاده‌ای را برای استفاده در کد جاوا اسکریپت در اختیار شما قرار می‌دهند.
APIs
API ها مجموعه‌های آماده‌ای از بلوک‌های سازنده کد هستند که به توسعه‌دهنده اجازه می‌دهند برنامه‌هایی را پیاده سازی کنند که بدون آنها، اجرایشان سخت یا غیرممکن است. آنها همان کاری را برای برنامه نویس انجام می‌دهند که کیت‌های مبلمان آماده برای خانه‌سازی انجام می‌دهند. گرفتن پانل‌های آماده و نصب آنها به عنوان قفسه کتاب، بسیار آسان‌تر از این است که خودتان طرح کتابخانه را روی کاغذ بکشید، چوب بخرید، تمام پنل‌ها را به اندازه و شکل مناسب ببرید، پیچ‌هایی با اندازه مناسب پیدا کنید و سپس آنها را در کنار هم قرار دهید تا یک قفسه کتاب بسازید.
API ها به طور کلی به دو دسته تقسیم می‌شوند.
API های مرورگر در مرورگر وب شما تعبیه شده‌اند و می‌توانند داده‌های محیط کامپیوتر را در معرض نمایش قرار دهند یا کارهای پیچیده مفیدی انجام دهند. مثلاً:
- DOM API (Document Object Model) به شما امکان می‌دهد HTML و CSS را دستکاری کنید، بسازید، حذف کنید و تغییر دهید. یا به صورت پویا استایل‌های جدیدی در صفحه خود اعمال کنید و غیره. (همانطور که در نسخه نمایشی ساده خود در بالا دیدیم).
- Geolocation API اطلاعات جغرافیایی را بازیابی می‌کند. به این ترتیب Google Maps می‌تواند موقعیت مکانی شما را پیدا کند و آن را روی نقشه نشان دهد.
- API های Canvas و WebGL به شما امکان می‌دهند المان‌های گرافیکی متحرک دو بعدی و سه بعدی ایجاد کنید. مردم با استفاده از این فناوری‌های وب، کارهای شگفت‌انگیزی انجام می‌دهند. Chrome Experiments و webglsamples را مشاهده کنید تا متوجه شوید.
- همچنین API های صوتی و تصویری مانند HTMLMediaElement و WebRTC هم وجود دارند که به شما این امکان را می‌دهند که با مولتی‌مدیا، کارهای بسیار جالبی انجام دهید. مانند پخش مستقیم صدا و تصویر در یک صفحه وب، یا گرفتن
API های شخص ثالث
API های شخص ثالث جاوا اسکریپت به طور پیش‌فرض در مرورگر تعبیه نشده‌اند و معمولاً باید کد و اطلاعات آنها را از جایی در وب بگیرید. مثلاً:
- Twitter API به شما این امکان را می‌دهد تا کارهایی مانند نمایش آخرین توییت‌های خود را در وب‌سایت‌تان انجام دهید.
- Google Maps API و OpenStreetMap API به شما این امکان را می‌دهند که نقشه‌های سفارشی را در وب سایت خود و سایر مکان‌های مشابه جاسازی کنید.
چیزهای بیشتری هم هست! با این حال، هنوز هیجان‌زده نشوید. بعد از 24 ساعت کار با جاوا اسکریپت، نمی‌توانید فیس‌بوک، Google Maps یا اینستاگرام بعدی را بسازید. ابتدا باید اصول زیادی را یاد بگیرید. و به همین دلیل است که شما اینجا هستید. پس بیایید ادامه دهیم!
جاوا اسکریپت چه کاری بر روی صفحه شما انجام می‌دهد؟
در اینجا، ما شروع به بررسی برخی از کدها خواهیم کرد، و در حین انجام این کار، بررسی می‌کنیم که وقتی جاوا اسکریپت را در صفحه وب خود اجرا می‌کنید، واقعاً چه اتفاقی می‌افتد.
بیایید به طور خلاصه اتفاقی که هنگام بارگذاری یک صفحه وب در یک مرورگر رخ می‌دهد را مرور کنیم. هنگامی که یک صفحه وب را در مرورگر خود بارگذاری می‌کنید، کد خود (HTML ، CSS و JavaScript) را در یک محیط اجرایی (tab مرورگر) اجرا می‌کنید. این مانند کارخانه‌ای است که مواد خام (کد) را می‌گیرد و یک محصول (صفحه وب) تولید می‌کند.
یکی از کاربردهای رایج جاوا اسکریپت، تغییر داینامیک HTML و CSS برای به‌روزرسانی یک رابط کاربری، از طریق Document Object Model API است. توجه داشته باشید که کد موجود در اسناد وب شما معمولاً به ترتیبی که در صفحه ظاهر می‌شود، بارگیری و اجرا می‌شود. اگر جاوا اسکریپت قبل از HTML و CSS که قرار است modify شود، بارگیری و اجرا شود، ممکن است خطاهایی رخ دهد. در ادامه مقاله، در بخش استراتژی‌های بارگذاری اسکریپت، راه‌هایی برای رفع این مشکل خواهید آموخت.
امنیت مرورگر
هر tab مرورگر دارای bucket جداگانه خود برای اجرای کد است. (این bucket ها در اصطلاح فنی «محیط‌های اجرایی» نامیده می‌شوند). این بدان معنی است که در اکثر موارد، کد در هر tab به صورت کاملاً جداگانه اجرا می‌شود و کد موجود در یک tab نمی‌تواند مستقیماً کد را در یک tab یا وب سایت دیگر تحت تأثیر قرار دهد. این یک اقدام امنیتی خوب است. اگر اینطور نبود، مجرمان سایبری می‌توانستند برای سرقت اطلاعات از وب سایت‌ها و کارهای بد دیگر، شروع به کدنویسی با جاوا اسکریپت کنند.
توجه: راه‌هایی برای ارسال کد و داده بین وب سایت‌ها و tab های مختلف به روشی ایمن وجود دارد، اما شامل تکنیک‌های پیشرفته‌ای است که در این مطلب به آنها نمی‌پردازیم.
ترتیب اجرا در جاوا اسکریپت
هنگامی که مرورگر با بلوکی از جاوا اسکریپت مواجه می‌شود، معمولاً آن را به ترتیب و از بالا به پایین اجرا می‌کند. این بدان معنی است که شما باید مراقب باشید که کدها را در چه ترتیبی قرار می‌دهید. به عنوان مثال، اجازه دهید به بلوک جاوا اسکریپت که در اولین مثال خود دیدیم برگردیم:
const para = document.querySelector('p');
para.addEventListener('click', updateName);
function updateName() {
const name = prompt('Enter a new name');
para.textContent = `Player 1: ${name}`;
}
در اینجا ما یک پاراگراف متنی (خط 1) را انتخاب می‌کنیم، سپس یک شنونده رویداد (event listener) را به آن متصل می‌کنیم. (خط 3) به طوری که وقتی بر روی پاراگراف کلیک می‌شود، بلوک کد updateName() (خطوط 5-8) اجرا می‌شود. بلوک کد updateName() (این نوع بلوک‌های کد که قابل استفاده مجدد هستند، «توابع» یا “functions” نامیده می‌شوند) از کاربر یک نام جدید می‌خواهد و سپس آن را در یک پاراگراف وارد می‌کند تا نمایشگر به‌روزرسانی شود.
اگر ترتیب دو خط اول کد را عوض کنید، دیگر کار نمی‌کند. –در عوض یک error در کنسول توسعه دهنده مرورگر برگردانده می‌شود – این ارور به این شکل است: TypeError: para is undefined . این بدان معنی است که para object هنوز وجود ندارد، بنابراین نمی‌توانیم event listener را به آن اضافه کنیم.
توجه: این یک error بسیار رایج است. قبل از اینکه بخواهید کاری با object ها انجام دهید، باید حواستان باشد که object های ارجاع‌شده در کد شما وجود داشته باشند.
کد تفسیر شده (Interpreted) در مقابل کد کامپایل شده (compiled)
ممکن است اصطلاحاتی در زمینه برنامه نویسی بشنوید تحت عنوان این که فلان چیز تفسیر یا کامپایل شده است. در زبان‌های تفسیر شده، کد از بالا به پایین اجرا می‌شود و نتیجه اجرای کد بلافاصله برگردانده می‌شود. قبل از اجرای مرورگر، لازم نیست کد را به شکل دیگری تبدیل کنید. کد به شکل متن مناسب برنامه نویس دریافت می‌شود و مستقیماً از آن پردازش می‌شود.
در سمت دیگر، زبان‌های کامپایل شده قبل از اجرا توسط کامپیوتر، به شکل دیگری تبدیل می‌شوند (کامپایل می‌شوند). به عنوان مثال C و C++ در کد machine code کامپایل می‌شوند و سپس توسط کامپیوتر اجرا می‌شوند. این برنامه‌ها از یک فرمت باینری که از کد منبع اصلی برنامه تولید شده است، اجرا می‌شوند.
جاوا اسکریپت یک زبان برنامه نویسی تفسیر شده و سبک است. مرورگر وب کد جاوا اسکریپت را به شکل متن اصلی خود دریافت می‌کند و اسکریپت را از روی آن اجرا می‌کند. از نظر فنی، اکثر مفسران مدرن جاوا اسکریپت از تکنیکی به نام just-in-time compiling برای بهبود عملکرد استفاده می‌کنند. در حین استفاده از اسکریپت، source code جاوا اسکریپت به فرمت باینری سریع‌تر کامپایل می‌شود تا بتوان آن را در سریع‌ترین زمان ممکن اجرا کرد. با این حال، جاوا اسکریپت هنوز به عنوان یک زبان تفسیر شده در نظر گرفته می‌شود، زیرا کامپایل در آن در زمان اجرا انجام می‌شود، نه زودتر.
هر دو نوع زبان مزایای خود را دارند، اما در حال حاضر در مورد آنها صحبت نمی‌کنیم.
کد Server-side در مقابل کد client-side
ممکن است اصطلاحات کد Server-side و client-side را هم بشنوید. به خصوص در زمینه توسعه وب. کد client-side کدی است که بر روی کامپیوتر کاربر اجرا می‌شود. وقتی یک صفحه وب مشاهده می‌شود، کد client-side آن صفحه دانلود شده، سپس اجرا و توسط مرورگر نمایش داده می‌شود. در این ماژول به صراحت در مورد جاوا اسکریپت client-side صحبت می‌کنیم.
در سمت دیگر، کد Server-side بر روی سرور اجرا می‌شود، سپس نتایج آن دانلود و در مرورگر نمایش داده می‌شوند. نمونه‌های از زبان‌های محبوب در وب Server-side عبارتند از: PHP ، Python ، Ruby ، ASP.NET و حتی جاوا اسکریپت! جاوا اسکریپت می‌تواند به عنوان یک زبان Server-side هم اجرا شود. به عنوان مثال در محیط محبوب Node.js می‌توانید اطلاعات بیشتری در مورد جاوا اسکریپت Server-side در وب سایت‌های داینامیک کسب کنید.
کد پویا (Dynamic) در مقابل کد ثابت (Static)
کلمه پویا یا داینامیک هم برای توصیف زبان جاوا اسکریپت client-side و هم زبان جاوا اسکریپت server-side استفاده می‌شود. این اصطلاح به توانایی به‌روزرسانی صفحه وب / اپلیکیشن برای نشان دادن چیزهای مختلف در شرایط مختلف، و تولید محتوای جدید در صورت لزوم اشاره دارد. کد server-side به صورت داینامیک محتوای جدیدی را در سرور تولید می‌کند. به عنوان مثال می‌توان به ایجاد یک جدول HTML جدید و پر کردن آن با داده‌های درخواست شده از سرور، و سپس نمایش جدول در یک صفحه وب به کاربر اشاره کرد. معنی این کار در دو زمینه کمی متفاوت است، اما مرتبط است و هر دو رویکرد (server-side و client-side) معمولاً با هم کار می‌کنند.
یک صفحه وب بدون محتوای به‌روزرسانی‌‌شونده و داینامیک، به عنوان static شناخته می‌شود و همیشه یک محتوا را نشان می‌دهد.
چگونه جاوا اسکریپت را به صفحه خود اضافه کنید؟
جاوا اسکریپت در صفحه HTML شما به روشی مشابه CSS اعمال می‌شود. در حالی که CSS از عناصر <link> برای اعمال stylesheets های خارجی و عناصر <style> برای اعمال stylesheets های داخلی در HTML استفاده می‌کند، جاوا اسکریپت فقط به یک دوست در دنیای HTML نیاز دارد، و آن عنصر <script> است. بیایید یاد بگیریم که چگونه این اتفاق می‌افتد.
جاوا اسکریپت داخلی
- اول از همه، یک local copy از فایل sample به نام application-javascript.html ایجاد کنید. آن را در یک دایرکتوری در جایی قابل دید ذخیره کنید.
- فایل را در مرورگر وب و در ویرایشگر متن خود باز کنید. خواهید دید که HTML یک صفحه وب ساده حاوی یک دکمه قابل کلیک ایجاد می‌کند.
- سپس، به ویرایشگر متن خود بروید و درست قبل از بستن تگ </head>: ، موارد زیر را در head خود اضافه کنید.
<script>
// JavaScript goes here
</script>
اکنون مقداری جاوا اسکریپت را در عنصر <script> خود اضافه می‌کنیم تا صفحه ما، کاری جالب تر انجام دهد. کد زیر را درست در زیر خط “// JavaScript Here Here” اضافه کنید:
document.addEventListener('DOMContentLoaded', () => {
function createParagraph() {
const para = document.createElement('p');
para.textContent = 'You clicked the button!';
document.body.appendChild(para);
}
const buttons = document.querySelectorAll('button');
for (const button of buttons) {
button.addEventListener('click', createParagraph);
}
});
- فایل خود را ذخیره کرده و مرورگر را به‌روزرسانی کنید. اکنون باید ببینید که وقتی روی دکمه کلیک می‌کنید، یک پاراگراف جدید ایجاد می‌شود و در زیر قرار می‌گیرد.
توجه: اگر به نظر می رسد مثال شما کار نمی‌کند، دوباره مراحل را طی کنید و بررسی کنید که آیا همه چیز را درست انجام داده‌اید یا نه. آیا local copyخود از کد اولیه را به عنوان یک فایل html ذخیره کرده‌اید؟ آیا عنصر <script> خود را درست قبل از تگ </head> اضافه کرده‌اید؟ آیا جاوا اسکریپت را دقیقاً مطابق شکل وارد کرده‌اید؟ جاوا اسکریپت به حروف کوچک و بزرگ حساس است و بسیار شلوغ است، بنابراین شما باید syntax را دقیقاً همانطور که نشان داده شده است وارد کنید، در غیر این صورت ممکن است کار نکند.
توجه: می‌توانید این نسخه را در GitHub به‌عنوان application-javascript-internal.html ببینید (آن را به صورت live هم ببینید).
جاوا اسکریپت خارجی
این عالی کار می‌کند، اما اگر بخواهیم جاوا اسکریپت خود را در یک فایل خارجی قرار دهیم چه؟ بیایید این را هم بررسی کنیم.
- ابتدا یک فایل جدید در همان پوشه فایل HTML sample خود ایجاد کنید. آن را js بنامید. مطمئن شوید که پسوند نام فایل .js را داشته باشد، زیرا به این ترتیب به عنوان جاوا اسکریپت شناخته می شود.
- عنصر <script> فعلی خود را با موارد زیر جایگزین کنید:
<script src="script.js" defer></script>
- داخل js، اسکریپت زیر را اضافه کنید:
function createParagraph() {
const para = document.createElement('p');
para.textContent = 'You clicked the button!';
document.body.appendChild(para);
}
const buttons = document.querySelectorAll('button');
for (const button of buttons) {
button.addEventListener('click', createParagraph);
}
مرورگر خود را Save و refresh کنید، و شما باید همان چیز را ببینید! دقیقاً به همان صورت کار می‌کند، اما اکنون ما جاوا اسکریپت خود را در یک فایل خارجی داریم. این به طور کلی از نظر سازماندهی کد و قابلیت استفاده مجدد از آن در چندین فایل HTML، چیز خوبی است. بعلاوه، خواندن HTML بدون ریختن تکه‌های بزرگ اسکریپت در آن آسان‌تر است.
توجه: می‌توانید این نسخه را در GitHub به‌عنوان application-javascript-external.html و script.js ببینید (آن را به صورت live هم ببینید).
handler های جاوا اسکریپت درون خطی (Inline)
توجه داشته باشید که گاهی اوقات با بیت‌هایی از کد جاوا اسکریپت واقعی در داخل HTML مواجه می‌شوید که ممکن است چیزی شبیه این به نظر برسد:
function createParagraph() {
const para = document.createElement('p');
para.textContent = 'You clicked the button!';
document.body.appendChild(para);
}
<button onclick="createParagraph()">Click me!</button>
می توانید این نسخه از demo ما را ببینید:
این demo دقیقاً همان عملکرد دو بخش قبلی را دارد، با این تفاوت که عنصر <button> شامل یک کنترل کننده onclick درون خطی است تا تابع را با فشار دادن دکمه اجرا کند.
با این حال لطفا این کار را نکنید. آلوده کردن HTML خود با جاوا اسکریپت کار بد و ناکارآمدی است. چرا که شما باید ویژگی onclick=”createParagraph()” را روی هر دکمه‌ای که می خواهید جاوا اسکریپت روی آن اعمال شود، اضافه کنید.
به جای آن از addEventListener استفاده کنید
به جای گنجاندن جاوا اسکریپت در HTML خود، از ساختار جاوا اسکریپت خالص استفاده کنید. تابع querySelectorAll () به شما امکان می‌دهد تمام دکمه‌های یک صفحه را انتخاب کنید. سپس می‌توانید از میان دکمه‌ها loop بزنید و با استفاده از ()adEventListener برای هر کدام یک handler اختصاص دهید. کد این کار در زیر نشان داده شده است:
const buttons = document.querySelectorAll('button');
for (const button of buttons) {
button.addEventListener('click', createParagraph);
}
این ممکن است کمی طولانی‌تر از ویژگی onclick باشد، اما برای همه دکمه‌ها کار می‌کند. مهم نیست که چند دکمه در صفحه وجود دارد، و یا اینکه چه تعداد از آنها اضافه یا حذف شده‌اند. جاوا اسکریپت نیازی به تغییر ندارد.
توجه: نسخه application-javascript.html خود را edit کنید و چند دکمه دیگر به فایل اضافه کنید. وقتی دوباره آن را بارگذاری می‌کنید، باید متوجه شوید که همه دکمه‌ها با کلیک کردن، یک پاراگراف ایجاد می‌کنند. مرتبشان کردید، نه؟
استراتژی‌های بارگذاری اسکریپت
در بارگیری اسکریپت‌ها در زمان مناسب، ممکن است مشکلاتی پیش بیاید. هیچ چیز به این سادگی که به نظر می‌رسد نیست! یک مشکل رایج این است که تمام HTML در یک صفحه و به ترتیبی که ظاهر می‌شود، بارگذاری می‌شود. در صورتی که از جاوا اسکریپت برای دستکاری عناصر روی صفحه (یا به طور دقیق تر، Document Object Model) استفاده می‌کنید، اگر جاوا اسکریپت قبل از HTML بارگیری و تجزیه شود، کد شما کار نخواهد کرد.
در مثال‌های داخلی و خارجی بالا، جاوا اسکریپت بارگذاری می‌شود و قبل از تجزیه HTML body در head سند اجرا می‌شود. این می تواند باعث error شود، بنابراین ما از برخی ساختارها برای دور زدن آن استفاده کرده‌ایم.
در مثال داخلی، می توانید این ساختار را در اطراف کد مشاهده کنید:
document.addEventListener('DOMContentLoaded', () => {
// …
});
این یک event listener است که به رویداد DOMContentLoaded مرورگر گوش می‌دهد. و نشان می‌دهد که بدنه HTML کاملاً بارگیری و تجزیه شده است. جاوا اسکریپت تا زمانی که آن رویداد فعال نشده است، داخل این بلوک اجرا نمی‌شود. بنابراین error هم نمی‌دهد. (بعدتر در این مقاله، در مورد رویدادها هم صحبت می‌کنیم).
در مثال خارجی، ما از ویژگی مدرن‌تر جاوا اسکریپت برای حل مشکل استفاده می‌کنیم، ویژگی defer، که به مرورگر می‌گوید پس از رسیدن به عنصر تگ <script> به دانلود محتوای HTML ادامه دهد.
<script src="script.js" defer></script>
در این حالت هم اسکریپت و هم HTML به طور همزمان بارگذاری می‌شوند و کد کار می‌کند.
توجه: در مثال خارجی، ما نیازی به استفاده از رویداد DOMContentLoaded نداشتیم. زیرا ویژگی defer مشکل را برای ما حل کرد. ما از راه حل defer برای مثال جاوا اسکریپت داخلی استفاده نکردیم، زیرا defer فقط برای اسکریپت‌های خارجی کار می‌کند.
یک راه حل قدیمی
یک راه حل قدیمی برای این مشکل این بود که عنصر اسکریپت خود را درست در پایین body قرار دهید (به عنوان مثال درست قبل از تگ )، به طوری که پس از تجزیه، تمام HTML بارگیری شود. مشکل این راه حل این است که بارگیری/تجزیه اسکریپت تا زمانی که HTML DOM بارگیری نشده باشد، کاملاً مسدود می شود. در سایت‌های بزرگتر با کدهای جاوا اسکریپت زیاد، این می‌تواند باعث یک مشکل بزرگ در عملکرد شود و سرعت سایت شما را کند کند.
async و defer
در واقع دو ویژگی مدرن وجود دارد که می توانیم از آنها برای دور زدن مشکل blocking اسکریپت استفاده کنیم. async و defer (که در بالا دیدیم). بیایید تفاوت‌های این دو را بررسی کنیم.
اسکریپت‌هایی که با استفاده از ویژگی async بارگیری می‌شوند، اسکریپت را بدون مسدود کردن صفحه و در هنگام fetch کردن اسکریپت دانلود می‌کنند. با این حال، هنگامی که دانلود کامل شد، اسکریپت اجرا می شود. که صفحه را از rendering مسدود می‌کند. شما هیچ تضمینی دریافت نمی‌کنید که اسکریپت‌ها به ترتیب خاصی اجرا شوند. زمانی که اسکریپت‌های صفحه به طور مستقل از یکدیگر اجرا می‌شوند و به هیچ اسکریپت دیگری در صفحه وابسته نیستند، بهتر است از async استفاده کنید.
اسکریپت‌های بارگذاری شده با ویژگی defer به ترتیب ظاهر شدن در صفحه بارگیری می‌شوند. و تا زمانی که تمام محتوای صفحه بارگیری نشود، اجرا نمی‌شوند. که اگر اسکریپت‌های شما به وجود DOM بستگی داشته باشد (به عنوان مثال یک یا چند عنصر را در صفحه تغییر می‌دهند) مفید است.
در اینجا یک نمایش بصری از روش‌های مختلف بارگذاری اسکریپت و معنای آن برای صفحه شما آورده شده است:
این تصویری از مشخصات HTML است، که کپی شده و تحت شرایط مجوز CC BY 4.0 به نسخه کاهش‌یافته، برش داده شده است.
به عنوان مثال، اگر عناصر اسکریپت زیر را دارید:
<script async src="js/vendor/jquery.js"></script>
<script async src="js/script2.js"></script>
<script async src="js/script3.js"></script>
شما نمی‌توانید به ترتیبی که اسکریپت‌ها در آن بارگذاری می‌شوند، تکیه کنید. jquery.js ممکن است قبل یا بعد از script2.js و script3.js بارگیری شود و اگر اینطور باشد، هر تابعی در آن اسکریپت‌ها بسته به jquery یک خطا ایجاد می‌کند. زیرا jquery در زمان اجرای اسکریپت تعریف نخواهد شد.
چه زمانی باید از async و defer استفاده شود؟
از async باید زمانی استفاده شود که شما یک دسته از اسکریپت‌های background برای بارگیری دارید و فقط می‌خواهید آنها را در اسرع وقت در جای خود قرار دهید. به عنوان مثال، ممکن است شما چند فایل game data برای بارگیری داشته باشید، که در هنگام شروع بازی به آنها نیاز خواهید داشت. اما در حال حاضر فقط می‌خواهید به نمایش intro، titles و lobby بازی ادامه دهید، بدون اینکه آنها توسط بارگذاری اسکریپت مسدود شوند.
اسکریپت‌های بارگیری شده با استفاده از ویژگی defer ، (کد پایینی را ببینید) به ترتیبی که در صفحه ظاهر می‌شوند، اجرا شده و به محض دانلود اسکریپت و محتوا، اجرا می‌شوند:
<script defer src="js/vendor/jquery.js"></script>
<script defer src="js/script2.js"></script>
<script defer src="js/script3.js"></script>
در مثال دوم، می‌توانیم مطمئن باشیم که jquery.js قبل از script2.js و script3.js ، و script2.js قبل از script3.js بارگیری می‌شود. آنها تا زمانی که تمام محتوای صفحه بارگیری نشود، اجرا نمی‌شوند. که اگر اسکریپت‌های شما به وجود DOM بستگی داشته باشند، (به عنوان مثال یکی از عناصر دیگر را در صفحه تغییر دهند) این مفید است.
به طور خلاصه:
async و defer در جاوا اسکریپت، هر دو به مرورگر دستور می‌دهند تا اسکریپت(ها) را در یک رشته جداگانه دانلود کند. در حالی که بقیه صفحه (DOM و غیره) در حال دانلود است. بنابراین بارگیری صفحه در طول فرآیند fetch کردن مسدود نمی‌شود.
اسکریپت‌هایی با ویژگی async به محض اتمام دانلود اجرا می شوند. این اتفاق صفحه را مسدود می کند و هیچ دستور ترتیب خاصی را تضمین نمی کند.
اسکریپت‌های دارای ویژگی defer به ترتیبی که هستند، بارگیری می‌شوند و تنها زمانی اجرا می‌شوند که همه چیز بارگذاری شود.
اگر اسکریپت‌های شما باید فورا اجرا شوند و هیچ وابستگی ندارند، از async استفاده کنید.
اگر اسکریپت‌های شما باید منتظر تجزیه بمانند و به سایر اسکریپت‌ها و/یا DOM در جای خود وابسته باشند، آنها را با استفاده از defer بارگیری کنید و عناصر <script> متناظر آنها را به ترتیبی که می‌خواهید مرورگر آنها را اجرا کند، قرار دهید.
کامنت‌های جاوا اسکریپت
مانند HTML و CSS، این امکان وجود دارد که کامنت‌هایی را در کد جاوا اسکریپت خود بنویسید که توسط مرورگر نادیده گرفته می‌شوند. کامنت‌ها برای ارائه دستورالعمل‌هایی به توسعه‌دهندگان همکار در مورد نحوه کار کد (و برای خودتان، چون ممکن است شش ماه بعد به کدتان برگردید و یادتان نباشد که چه کاری انجام می‌دادید) بسیار مفید هستند. و شما باید اغلب از آنها استفاده کنید، به خصوص برای اپلیکیشن‌های بزرگتر. دو نوع کامنت وجود دارد:
یک کامنت تک خطی وجود دارد که بعد از یک دابل اسلش رو به جلو (//) نوشته می‌شود، به عنوان مثال:
// I am a comment
یک کامنت چند خطی وجود دارد که بین string های /* و */ نوشته می‌شود، به عنوان مثال:
/*
I am also
a comment
*/
برای مثال، می‌توانیم آخرین demo جاوا اسکریپت خود را با کامنت‌هایی مانند این حاشیه‌نویسی کنیم:
// Function: creates a new paragraph and appends it to the bottom of the HTML body.
function createParagraph() {
const para = document.createElement('p');
para.textContent = 'You clicked the button!';
document.body.appendChild(para);
}
/*
1. Get references to all the buttons on the page in an array format.
2. Loop through all the buttons and add a click event listener to each one.
When any button is pressed, the createParagraph() function will be run.
*/
const buttons = document.querySelectorAll('button');
for (const button of buttons) {
button.addEventListener('click', createParagraph);
}
توجه: به طور کلی بهتر است بیشتر از کامنت‌ها استفاده کنید. اما اگر متوجه شدید که کامنت‌های زیادی اضافه می‌کنید تا توضیح دهید که دارید از چه متغیرهایی استفاده می‌کنید (شاید نام متغیر شما بهتر باشد)، یا برای توضیح عملیات بسیار ساده کامنت می‌گذارید، باید مراقب باشید. (چرا که ممکن است کد بیشتر و بیشتر پیچیده شود).
نتیجه‌گیری
این اولین قدم‌های شما در ورود به دنیای جاوا اسکریپت بود. ما فقط با تئوری شروع کردیم، تا به شما بگوییم که چرا باید از جاوا اسکریپت استفاده کنید و چه کارهایی می‌توانید با آن انجام دهید. در مسیر، چند نمونه کد را دیدید و یاد گرفتید که چگونه جاوا اسکریپت با بقیه کدهای وب سایت شما، مطابقت پیدا می‌کند.
جاوا اسکریپت ممکن است در حال حاضر کمی دلهره‌آور به نظر برسد، اما نگران نباشید. در این دوره ما شما را با مراحل ساده این زبان برنامه نویسی آشنا کردیم.
ممنون که تا اینجا با ما بودید!
Leave feedback about this