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

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

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

بدون جاوااسکریپت، تنها چیزی که در یک صفحه وب می‌بینید تنها HTML , CSS است. 90%(یا بیشتر) صفحه‌ی وب شما ایستا خواهد بود و فقط مقدار کمی پویایی وجود خواهد داشت که به وسیله CSS اجرا می‌شود.

جاوااسکریپت چگونه چیزها را پویا می‌کند؟

کد HTML ساختار کلی صفحه وب و محتویات آن را مشخص می‌کند. CSS نیز استایل‌های مختلفی را بر روی محتویات که در سند HTML تعریف شده اعمال می‌کند.

زبان‌های HTML و CSS معمولا به عنوان زبان نشانه‌گذاری معرفی می‌شوند و نه زبان برنامه‌نویسی، به دلیل اینکه آن‌ها، در حالت کلی، محتویات را نشانه‌گذاری می‌کنند و پویایی بسیار کمی دارند.

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

قبل از اینکه ببینیم جاوااسکریپت چگونه این کارها را انجام می‌دهد، بیاید به مثال زیر نگاه کنیم:

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

جاوااسکریپت چگونه با HTML کار می‌کند؟

روش‌های مختلفی برای استفاده از جاوااسکریپت در یک سند HTML وجود دارد:

‌● inline JavaScript

در این روش، کد جاوااسکریپت در داخل تگ‌های HTML با استفاده از یک سری خصوصیات (attributes) مخصوص جاوااسکریپت نوشته می‌شود:

<button =&quotalert('You just clicked a button')&quot>Click me!</button>

در این مثال، مقدار می‌تواند یک محاسبه ریاضی، اضافه کردن چیزی به DOM (Document object model) یا غیره باشد.

‌‌● internal JavaScript

مانند تگ style که برای نوشتن استایل‌های CSS در سند HTML به کار می‌رود، تگ script نیز برای نوشتن کد جاوااسکریپت به کار می‌رود:

<script >
	function(){
	    alert(&quotI am inside a script tag&quot)
	}
</script >

‌‌● external JavaScript

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

<!-- index.html -->
<script src=&quot./script.js&quot></script >

// script.js
alert(&quotI am inside an external file&quot);

خاصیت src در تگ script این اجازه را به ما می‌دهد تا سورس فایل جاوااسکریپت را مشخص کنیم. این ارجاع مهم است چون به مرورگر می‌گوید مه فایل script.js را نیز از سرور دریافت کند.

فایل script.js می‌تواند با index.html در یک دایرکتوری باشد یا از جای دیگری دریافت شود. در هر صورت باید url کامل قرار بگیرد.
تمامی فایل های جاوااسکریپت دارای پسوند js می‌باشند.

نوع داده‌ها در جاوااسکریپت

جاوااسکریپت نیاز دارد که نوع داده بداند تا بفهمد چگونه عملیات‌های مختلف را روی آن انجام دهد.

چند مورد از داده‌هایی که جاوااسکریپت پشتیبانب می‌کند:

‌● Number (عدد): می‌شود برروی آن‌ها عملیات‌های حسابی (مانند جمع و تفریق) را اعمال کرد. مانند 6، 7، 8.9

‌● String (رشته): هرچیزی که بین دو ' یا دو " یا دو ` باشد. فرقی بین ' و " وجود ندارد ولی ` (Backtick) ویژگی‌های بیشتری دارد :

● وارد کردن متغیر به داخل رشته مثلا در رشته‌ی My name is ${name} عبارت name یک متغیر است که به داخل رشته تزریق شده.

● رشته‌های چند خطی. در فرم معمولی با استفاده از کوت‌ها (" و ') برای رفتن به خط بعد نیازمند عبارت n\هستیم ولی با استفاده از Backtick می‌شود اینگونه عمل کرد:

let str = `I am a
    multiline string`;

‌● Boolean: تنها می‌تواند دو مقدار true یا false را داشته باشد.

‌● Array (آرایه): گروهی از داده‌ها، که می‌تواند از هر نوعی باشند حتی آرایه، تفکیک شده توسط کاما. شماره گذاری این نوع از 0 آغاز می‌شود. دسترسی به محتوای این گروه می‌تواند اینگونه باشد: array[0]. مثال: [1, 2, "hello", false]

‌● Object (شیء): گروهی از داده‌ها در فرم دوتایی key:value. عبارت key باید یک رشته باشد و عبارت value می‌تواند هر نوع داده‌ای باشد. دسترسی به محتوای این گروه می‌تواند به این دو صورت باشد: obj.age یا obj["age"]. مثال: {name: 'javascript', age: 5}

‌● Undefined (مشخص نشده): این نوع داده می‌تواند به صراحت یا به طور ضمنی (توسط جاوااسکریپت) به یک متغیر نسبت داده شود.

‌● Null: ‌داده‌یnull به این معناست که مقداری وجود ندارد.

‌● Function: تابع نوعی داده است که، زمانی که فراخوانده می‌شود، یک بلوک کد را اجرا می‌کند.

یادگیری نوع داده‌ها در جاوااسکریپت می‌تواند مقداری پیچیده باشد. آرایه‌ها و تابع‌ها نیز در جاوااسکریپت نوعی شیء (Object) هستند.

فهمیدن این موضوع شامل فهمیدن پروتوتایپ‌ها (prototypes) در جاوااسکریپت است. ولی در قدم اول، فهمیدن نوع داده‌هایی که در بالا اشاره شد کافی است.

متغیرها در جاوااسکریپت

متغیرها نوعی ظرف و نگه‌دارنده برای مقادیر با هر نوع داده، هستند. آن‌ها مقادیری را در خود نگه می‌دارند که، زمانی که متغیر استفاده می‌شود، جاوااسکریپت داده‌ای که آن‌ها در خود دارند را استفاده می‌کند.

متغیرها می‌توانند تعریف (declared) و مقداری به آن‌ها اختصاص یابد(assigned). تعریف یک متغیر به اینگونه است:

let name;

متغیرname در بالا تعریف شده است ولی مقداری به آن اختصاص نیافته.

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

اختصاص دادن مقدار به یک متغیر اینگونه است:

let name;
name = &quotJavaScript"

حال اگر این متغیر در جایی استفاده شود، مقدار JavaScript را نمایندگی می‌کند.

تعریف متغیر و اختصاص دادن مقدار آن می‌تواند در یک خط انجام پذیرد:

let name = &quotJavaScript"

جاوااسکریپت سه نوع متد برای تعریف متغیر دارد:

● اپراتور (operator، عملگر) var: این اپراتور، از زمان ساخته شدن جاوااسکریپت وجود داشته است. با استفاده از این اپراتور شما می‌توانید یک متغیر تعریف و مقداری را به آن اختصاص دهید و بعدا آن مقدار را تغییر دهید:

var name = &quotJavaScript"
name = &quotLanguage"

● اپراتور let: این اپراتور بسیار شبیه به اپراتور var است با این تفاوت که اپراتور var، می‌تواند Hoist شود ولی اپراتور let نمی‌تواند. مفهوم Hoist را می‌توان به طور خلاصه به این شکل بیان کرد:

function print() {
	console.log(name);
	console.log(age);
	var name = &quotJavaScript"
	let age = 5;
}

print();

زمانی که تابع print فراخوانده می‌شود، اولین console.log مقدار undefined را چاپ می‌کند در صورتی که دومین console.log اروری با پیام "Cannot access age before initialization" را نمایش می‌دهد.

این موضوع به این دلیل است که، تعریف متغیر name به اصطلاح hoist شده‌است ولی اختصاص مقدار به آن در همان خط باقی مانده، در صورتی که تعریف و اختصاص دادن مقدار به متغیر age، هر دو در یک خط انجام می‌شود. تفسیر (compile) کد بالا به این صورت است:

function print() {
	var name;
	console.log(name);
	console.log(age);
	name = &quotJavaScript"
	let age = 5;
}

print();

مشکلات مربوط به Hoist می‌تواند به صورت غیر منتظره‌ای اتفاق بیافتد، به همین دلیل توصیه می‌شود که همیشه به جای var از let استفاده شود.

● اپراتور const: این اپراتور متغیر‌ها را hoist نمی‌کند ولی مطمئن می‌شود که، متغیری که یکبار به آن مقداری اختصاص یافته، در ادامه نتوان مقدار دیگری را به آن اختصاص داد:

let name = &quotJavaScript&quot
name = &quotLanguage&quot // no errors

const age = 5
age = 6 // error, cannot reassign variable

کامنت در جاوااسکریپت

مانند HTML و CSS، شاید بخواهیم توضیح یا نوشته‌ای در کنار خود داشته باشیم که نمی‌خواهیم اجرا شود. این کار را با استفاده از کامن به دو صورت می‌توان انجام داد:

● کامنت تک خطی:

// a single line comment

● کامنت چند خطی:

/*
a multi
line comment
*/

توابع در جاوااسکریپت

با استفاده از توابع، شما می‌توانید یک بلوک کد ، که می‌تواند در مکان‌ها دیگر نیز اجرا شود، را در داخل خود فایل کد ذخیره کنید. تصور کنید شما می‌خواهید کلمه j و l را در مکان‌هی مختلفی در کد خود چاپ کنید. به جای انجام دادن این کار:

d

این کار را می‌توانید انجام دهید:

d

در این صورت، ما یک بلوک کد، که در مکان‌های مختلفی مورد استفاده قرار می‌گیرد، را به نوعی ذخیره کردیم.

به عنوان مثالی دیگر، تصور کنید می‌خواهیم مقدار میانگین سه عدد را محاسبه کنیم :

d

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

d

همانطور که متوجه شدید در تعریف تابع f، ما عبارات n را در داخل پرانتز داریم. این عبارات پارامترهایی هستند که نقش نگه‌دارنده مکان (placeholders) برای مقادیر واقعی، زمانی که تابع فراخوانده می‌شود، را ایفا می‌کنند.

بلوک کد داخل تابع از این مقادیر استفاده می‌کند تا مقدار میانگین آن‌ها را محاسبه کند. کلمه‌ی r نیز مقداز محاسبه شده را به عنوان خروجی تابع برمی‌گرداند.

این placeholder ها باعث می‌شود که تابع قابل استفاده مجدد باشد به طوری که مقادیر متفاوتی در زمان‌های متفاوتی وارد تابع شوند و از یک منطق استفاده کنند.

نتیجه‌گیری

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

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

ترجمه‌ای از مقاله What is JavaScript? A Definition of the JS Programming Language