جاوا اسکریپت چیست؟

به دوره ی مبتدی جاوا اسکریپت کیهان وب خوش آمدید! در این مقاله به جاوا اسکریپت از سطح بالایی نگاه خواهیم کرد و به سوالاتی مانند ” جاوا اسکریپت چیست ؟ ” و ” چه میتوانید با آن انجام دهید ؟ ” جواب خواهیم داد. از یک سو اطمینان حاصل کنید که با با جاوا اسکریپت راحت هستید.

پیشنیاز های این دوره: سواد اولیه کامپیوتر، درک اولیه HTML و CSS

هدف این دوره: آشنایی با اینکه جاوا اسکریپت چیست، چه کاری می تواند انجام دهد و چگونه در یک وب سایت قرار می گیرد. 

یک تعریف سطح بالااز JavaScript

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

HTML :

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

CSS :

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

JavaScript:

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

حال سه لایه به خوبی روی هم قرار می گیرند. بیایید یک برچسب متنی ساده را به عنوان مثال در نظر بگیریم. می‌توانیم آن را با استفاده از 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” ذخیره کنیم
• عملیات روی قطعات متن (که در برنامه نویسی به عنوان “رشته Strings” شناخته می شود). در مثال بالا، رشته ” Player 1 ” را می گیریم و آن را به متغیر name وصل می کنیم تا برچسب متن کامل را ایجاد کنیم، به عنوان مثال : “Player 1:CHRIS”
• اجرای کد در پاسخ به رویدادهای خاصی که در یک صفحه وب رخ می دهد. ما از یک رویداد Click در مثال بالا استفاده کردیم تا تشخیص دهیم چه زمانی روی برچسب، Click می‌شود و سپس کدی را اجرا می‌کنیم که برچسب متن را به‌روزرسانی می‌کند.

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

API ها :

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

به طور کلی API ها به دو دسته تقسیم می شوند:

API های مرورگر در مرورگر وب شما تعبیه شده‌اند و می‌توانند داده‌های محیط رایانه اطراف را در معرض نمایش قرار دهند یا کارهای پیچیده مفیدی را انجام دهند. مثلا:

• DOM (Document Object Model) API این امکان را به شما میدهد HTML و CSS را دست کاری کنید
• Geolocation API اطلاعات جغرافیایی را بازیابی می کند. به این ترتیب گوگل مپ می تواند موقعیت مکانی شما را پیدا کند و آن را روی نقشه ترسیم کند.
• WebGL API  و نرم افزار کنوا به شما امکان می دهد گرافیک های متحرک دو بعدی و سه بعدی ایجاد کنید. مردم با استفاده از این فناوری‌های وب، کارهای شگفت‌انگیزی انجام می‌دهند.
• API صوتی و تصویری به شما این امکان را می‌دهند که کارهای بسیار جالبی را با مولتی مدیا انجام دهید. مانند پخش مستقیم صدا و تصویر در یک صفحه وب، یا گرفتن ویدیو از دوربین وب خود و نمایش آن در رایانه شخص دیگری.

توجه:

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

API های شخص ثالث به طور پیش فرض در مرورگر تعبیه نشده اند و معمولاً باید کد و اطلاعات آنها را از جایی در وب بگیرید.

Twitter API 

به شما امکان می دهد کارهایی مانند نمایش آخرین توییت های خود را در وب سایت خود انجام دهید.
Google Maps API و OpenStreetMap API به شما این امکان را می‌دهد که نقشه‌های سفارشی را در وب‌سایت خود و سایر قابلیت‌های مشابه جاسازی کنید.
چیزهای بیشتری نیز موجود است! با این حال، هنوز هیجان زده نشوید! پس از مطالعه ۲۴ ساعته جاوا اسکریپت، نمی‌توانید فیس‌بوک، نقشه‌های گوگل یا اینستاگرام بعدی را بسازید!! اصول اولیه زیادی وجود دارد که باید ابتدا آنها را یاد بگیرید. به همین دلیل است که شما اینجا هستید پس بیایید ادامه دهیم!

فایل خود را ذخیره کرده و مرورگر را به‌روزرسانی کنید.اکنون باید ببینید که وقتی روی دکمه کلیک می‌کنید، یک پاراگراف جدید ایجاد می‌شود و در زیر قرار می‌گیرد.

جاوا اسکریپت خارجی

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

1. ابتدا یک فایل جدید در همان پوشه فایل HTML نمونه خود ایجاد کنید. آن را script.js بنامید – مطمئن شوید که پسوند نام فایل js. را داشته باشد تا به عنوان JavaScript شناخته می شود.
2. عنصر <script> فعلی خود را با موارد زیر جایگزین کنید:

<script src=”script.js” defer></script>

3. داخل ,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);

}

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

کنترل کننده های جاوا اسکریپت درون خطی

توجه داشته باشید که گاهی اوقات با بیت‌هایی از کد جاوا اسکریپت واقعی در داخل HTML مواجه می‌شوید. ممکن است چیزی شبیه این به نظر برسد:

این نسخه نمایشی دقیقاً همان عملکرد دو بخش قبلی را دارد، با این تفاوت که عنصر <button> شامل یک کنترل کننده Onclick درون خطی است تا عملکرد را با فشار دادن دکمه اجرا کند.

با این حال لطفا این کار را نکنید. آلوده کردن HTML خود با جاوا اسکریپت عمل بدی است، و ناکارآمد است – شما باید ویژگی “()onclick=”createParagraph را روی هر دکمه ای که می خواهید جاوا اسکریپت روی آن اعمال شود، اضافه کنید.

به جای آن از addEventListener استفاده کنید!

استراتژی های بارگذاری اسکریپت

عدادی از مسائل مربوط به بارگیری اسکریپت ها در زمان مناسب وجود دارد. هیچ چیز به این سادگی که به نظر می رسد نیست! یک مشکل رایج این است که تمام HTMLدر یک صفحه به ترتیبی که ظاهر می شود بارگذاری می شود. اگر از JavaScript برای دستکاری عناصر در صفحه (یا به طور دقیق تر، مدل شیء سند) استفاده می کنید، اگر JavaScript قبل از HTML بارگیری و تجزیه شود، کد شما کار نخواهد کرد.

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

در مثال داخلی، می توانید این ساختار را در اطراف کد مشاهده کنید:

document.addEventListener(‘DOMContentLoaded’, () => {
//…
});

این یک شنونده رویداد است که به رویداد DOMContentLoaded مرورگر گوش میدهد،که نشان می دهد بدنه HTML کاملاً بارگیری و تجزیه شده است. JavaScript داخل این بلوک تا زمانی که آن رویداد فعال نشده است اجرا نمی شود، بنابراین از خطا اجتناب می شود (شما در مورد رویدادها بعداً در دوره یاد خواهید گرفت).

در مثال خارجی، ما از ویژگی مدرن‌تر JavaScript برای حل مشکل استفاده می‌کنیم، ویژگی defer ، که به مرورگر می‌گوید پس از رسیدن به عنصر تگ <script> به دانلود محتوای HTML ادامه دهد.

<script src=”script.js” defer></script>

در این حالت هر دو اسکریپت و HTML به طور همزمان بارگذاری می شوند و کد کار می کند.

توجه:

در مورد خارجی، ما نیازی به استفاده از رویداد DOMContentLoaded نداشتیم زیرا ویژگی defer مشکل را برای ما حل کرد. ما از راه حل defer برای مثال JavaScript داخلی استفاده نکردیم زیرا defer فقط برای اسکریپت های خارجی کار می کند.

یک راه حل قدیمی برای این مشکل این بود که عنصر اسکریپت خود را درست در پایین بدنه قرار دهید (به عنوان مثال درست قبل از تگ )، به طوری که پس از تجزیه تمام HTML بارگیری شود. مشکل این راه حل این است که بارگیری/تجزیه اسکریپت تا زمانی که HTML DOM بارگیری نشده باشد کاملاً مسدود می شود. در سایت‌های بزرگ‌تر با جاوا اسکریپت زیاد، این می‌تواند باعث یک مشکل عملکرد بزرگ شود و سرعت سایت شما را کند کند.

async and defer

در واقع دو ویژگی مدرن وجود دارد که می توانیم از آنها برای دور زدن مشکل مسدود نشدن اسکریپت استفاده کنیم ! async و defer (که در بالا دیدیم). بیایید به تفاوت این دو نگاه کنیم:

اسکریپت‌هایی که با استفاده از ویژگی async بارگیری می‌شوند، اسکریپت را بدون مسدود کردن صفحه در هنگام واکشی اسکریپت دانلود می‌کنند. با این حال، هنگامی که دانلود کامل شد، اسکریپت اجرا می شود، که صفحه را از رندر مسدود می کند. شما هیچ تضمینی دریافت نمی کنید که اسکریپت ها به ترتیب خاصی اجرا شوند. زمانی که اسکریپت های صفحه به طور مستقل از یکدیگر اجرا می شوند و به هیچ اسکریپت دیگری در صفحه وابسته نیستند، بهتر است از 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

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

اسکریپت های بارگیری شده با استفاده از ویژگی 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 and defer

هر دو به مرورگر دستور می‌دهند تا اسکریپت(های) را در یک رشته جداگانه دانلود کند، در حالی که بقیه صفحه (DOM و غیره) در حال دانلود است، بنابراین بارگیری صفحه در طول فرآیند واکشی مسدود نمی‌شود.

اسکریپت هایی با ویژگی async به محض اتمام دانلود اجرا می شوند. این صفحه را مسدود می کند و هیچ دستور اجرای خاصی را تضمین نمی کند.

اسکریپت‌های دارای ویژگی defer به ترتیبی که هستند بارگیری می‌شوند و تنها زمانی اجرا می‌شوند که همه چیز بارگذاری تمام شود.

اگر اسکریپت های شما باید فورا اجرا شوند و هیچ وابستگی ندارند، از async استفاده کنید.

اگر اسکریپت‌های شما باید منتظر تجزیه بمانند و به سایر اسکریپت‌ها DOM and/or در جای خود وابسته باشند، آن‌ها را با استفاده از defer بارگیری کنید و عناصر متناظر آنها را به ترتیبی که می‌خواهید مرورگر آنها را اجرا کند قرار دهید.

یک نظر تک خطی بعد از یک اسلش دوبل رو به جلو (//) نوشته می شود،

به عنوان مثال:

// I am a comment

یک نظر چند خطی بین رشته های /* و */ نوشته می شود، به عنوان مثال:

/*

  I am also

  a comment

*/

برای مثال می‌توانیم جاوا اسکریپت آخرین نسخه نمایشی خود را با نظراتی مانند نمونه زیر حاشیه‌نویسی کنیم:

//Function: creates a new paragraph and appends it to the bottom of the HTML body.

function createParagraph() {

 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);

}

توجه: به طور کلی نظرات بیشتر معمولاً بهتر از کمتر است، اما اگر متوجه شدید که نظرات زیادی اضافه می‌کنید تا توضیح دهید که چه متغیرهایی هستند (نام متغیر شما شاید بهتر باشد)، یا برای توضیح عملیات بسیار ساده (شاید شما) باید مراقب باشید. کد بیش از حد پیچیده است.)

پایان

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

جاوا اسکریپت ممکن است در حال حاضر کمی دلهره آور به نظر برسد، اما نگران نباشید! در این دوره، ما شما را با مراحل ساده ای که در آینده منطقی به نظر می رسد، از طریق آن راهنمایی می کنیم. در مقاله بعدی، ما مستقیماً وارد موارد عملی می‌شویم و شما را وادار می‌کنیم که مستقیماً وارد شوید و نمونه‌های جاوا اسکریپت خود را بسازید.

این مقاله را مدیون سایت https://developer.mozilla.org/ هستیم!با تشکر از این وبسایت! برای اشتراک گذاشتن نظرات خود با ما