یادگیری جاوا اسکریپت بصورت تئوری – قسمت اول

آموزش جاوا اسکریپت را از کجا شروع کنیم

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

 

 

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

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

 

 

کاربردهای جاوا اسکریپت چیست

همانطور که اشاره کردم، زبان جاوا اسکرپیت بسیار کاربردی و قدرتمند است. در اینجا قصد دارم بخشی از کاربردهای مهمتر این زبان را در دنیای برنامه نویسی مطرح کنم.

طراحی صفحات تعاملی و داینامیک وب

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

طراحی برنامه‌های وب

با حضور کتابخانه‌ها و فریمورک‌های جدیدی همچون react، angular و vue این امکان ایجاد شده است که با استفاده از زبان جاوا اسکریپت بتوانید، اپ موبایل بنویسید. البته که هنوز شاید این کتابخانه‌ها و فریمورک‌های مورد نظر به اندازه‌ی کدنویسی نیتیو (اندروید و سوئیفت) کاربردی نباشند، اما آینده‌ی خوبی در انتظارشان است.

توسعه برنامه‌های سمت سرور

این امکان نیز برای شما توسط جاوا اسکریپت فراهم شده است تا با استفاده از کتابخانه‌ها و فریمورک‌های سمت سرور آن از جمله nodejs به طراحی سمت سرور صفحات وب بپردازید.

 

 

طراحی و توسعه بازی های تحت وب

اگر بازی‌هایی را در سطح وب مشاهده کردید که از طریق مرورگر امکان بازی کردن آن را دارید، این بازی‌ها توسط زبان قدرتمند جاوا اسکریپت نوشته شده است.

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

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

اگر با HTML و صفحات وب آشنایی داشته باشید، حتما تگی به نام script را باید دیده باشید. این تگ به شما این امکان را می‌دهد تا بتوانید کد‌های جاوا اسکریپتی خود را برای صفحات مورد نظر بنویسید. در واقع هر کدی که در داخل این تگ تعریف می‌شود، به زبان جاوا اسکریپت می‌باشد. در نمونه کد زیر با استفاده از دستور console.log در قسمت کنسول مرورگر، عبارت My First Javascript را می‌توانید مشاهده کنید.

<script>
       console.log("My First JavaScript")
</script>

برای رفتن به قسمت console مرورگر، ابتدا کلید F12 را در داخل مروگر بزنید تا صفحه ای در قسمت پایین مرورگر برایتان باز شود، سپس بین تب‌های موجود، تب console را پیدا کنید و بر روی آن بزنید. در صورتی که یک فایل html داشته باشید که کد بالا در آن قرار داده شده باشد، عبارت مورد نظر را پس از لود دوباره‌ی صفحه می‌توانید در قسمت console مشاهده کنید.

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

” پسوند یک فایل جاوا اسکریپت، js می باشد.”

فایل جاوا اسکریپت:

 

function myFunction() {
    console.log("My First JavaScript")
}

 

در داخل فایل html:

 

<script src="myScript.js"></script>

 

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

علاوه بر این می‌توانید به همین شکل و با این تعریف، به فایل‌های جاوا اسکریپیتی مربوط به سایر پکیج‌ها و کتابخانه‌ها دسترسی داشته باشید.

انواع نمایش و خروجی جاوا اسکریپت:

همانند تمامی زبان‌های برنامه‌نویسی با استفاده از دستور خاصی شما می‌توانید در هر قسمتی از برنامه مقادیری از متغیرهای برنامه را چاپ کنید و یا خروجی را مشاهده کنید. در جاوا اسکریپت این دستور به صورت زیر می‌باشد:

 

console.log("My First JavaScript")

 

در داخل console.log شما می‌توانید متغیرهای مختلفی بنویسید و آن‌ها در کنسول مرورگر مشاهده کنید. دقت کنید که حتما باید ورودی‌های console.log به صورت رشته باشند.

علاوه بر دستور بالا که مخصوص زبان برنامه نویسی جاوا اسکریپت می‌باشد، در زمانی که شما از جاوا اسکریپت در html استفاده می‌کنید، نیز می‌توانید خروجی‌های مورد نظرتان را در داخل html نمایش دهید. برای اینکار نیاز است تا از دستور innerHTML استفاده کنید. با استفاده از این دستور می‌توانید مقدار خروجی جاوا اسکریپت خود را در داخل یک المان html ای نمایش دهید. به نمونه فایل html زیر توجه کنید.

 

 

در این مثال، در داخل تگ <p> مقدار ۵+۶ که عدد ۱۱ می‌شود، پس از باز شدن مروگر و صفحه html، قرار می‌گیرد. در قسمت اول دستور یعنی قبل از innerHTML، ابتدا المان مورد نظر با استفاده از آی دی آن انتخاب می‌شود و سپس در داخل html آن، مقدار مورد نظر قرار می‌گیرد.

 

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My First Paragraph</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>

همچنین روش دیگر، ایجاد alert می‌باشد. این گزینه که در هنگام اجرای آن یک پیام به صورت خطا در مرورگر به شما نمایش می‌دهد، روش مناسب دیگری جهت مشاهده خروجی جاوا اسکریپت می‌باشد.

این دستور به دو صورت زیر قابل استفاده می‌باشد:

alert('JS')
window.alert('JS')

در این قسمت انواع خروجی‌های ممکن در جاوا اسکریپت و قرار دادن مقدار از طریق جاوا اسکریپت در داخل یک المان html را مشاهده کردیم.

برای کامنت گذاری در جاوا اسکریپت نیز کافیست از // استفاده کنید.

var x = 5;      // Declare x, give it the value of 5

در صورتی که چندین خط را به صورت همزمان قصد دارید تا به صورت کامنت در آورید، بین /* */ قرار دهید.

/*
The code below will change
the heading with id = "myH"
and the paragraph with id = "myP"
in my web page:
*/
document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";

در قسمت بعد قصد دارم تا در مورد متغیرها و انواع آن در جاوا اسکریپت صحبت کنم.

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

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

• نوع اول، تعریف متغیرها با استفاده از کلیدواژه‌ی var می‌باشد.
• نوع دوم، تعریف متغیرها با استفاده از کلیدواژه‌ی let می‌باشد.
• نوع آخر نیز const می‌باشد.

از هر دو var و let برای تعریف متغیرها استفاده می‌شود، اما یکی از تفاوت‌های اساسی‌ای که تعریف متغیر در این دو نوع وجود دارد، در نحوه‌ی دسترسی به متغیر می‌باشد. در تعریف متغیر از نوع var، شما در کل کد به آن دسترسی خواهید داشتید اما در صورت تعریف از نوع let تنها در بلوکی که آن را (در صورت {}، یعنی در داخل {} تنها قابل استفاده می‌باشد) تعریف کردید، امکان دسترسی به آن را خواهید داشت.

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

 

 

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

تعریف متغیر از نوع const نیز برای مقادیر ثابت مورد استفاده در برنامه، به کار گرفته می‌شود. وقتی متغیر با این نوع مقدار دهی می‌باشد، در داخل برنامه امکان تغییر مقدار آن وجود ندارد. معمولا متغیرهای از این نوع را با حروف بزرگ (Uppercase) نمایش می‌دهند.

let message;
var message;
const MESSAGE = 'Hi'

برای درک تفاوت بین let و var، مثال زیر را تست کنید:

var foo = "Foo";  // globally scoped
let bar = "Bar"; // globally scoped

console.log(window.foo); // Foo
console.log(window.bar); // undefined

نمونه‌ی دیگری از Var و let:

استفاده از let

function run() {
    var foo = "Foo";
    let bar = "Bar";
  
    console.log(foo, bar);
  
    {
      let baz = "Bazz";
      console.log(baz);
    }
  
    console.log(baz); // ReferenceError
  }
  
  run();

استفاده از var

var funcs = [];
// let's create 3 functions
for (var i = 0; i < 3; i++) {
  // and store them in funcs
  funcs[i] = function() {
    // each should log its value.
    console.log("My value: " + i);
  };
}
for (var j = 0; j < 3; j++) {
  // and now let's run each one to see
  funcs[j]();
}

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

انواع مدل تعریف متغیر را در پایین می‌توانید مشاهده کنید، این مورد کاملا سلیقه‌ای و بستگی به نحوه‌ی کدزنی شما دارد:

let user = 'John', age = 25, message = 'Hello';

let user = 'John';
let age = 25;
let message = 'Hello';

let user = 'John',
  age = 25,
  message = 'Hello';

مثالی از استفاده از const:

const COLOR_RED = "#F00";

COLOR_RED = '#000'; // error, can't reassign the constant!

نام متغیرها در جاوا اسکریپت به سه صورت قابل تعریف می‌باشند:

• با الفبای انگلیسی شروع شده باشند.
• با $ شروع شده باشند.
• با _ شروع شده باشند.

var x = 10
var $myMoney = 5;
var _lastName = "Johnson";

بعد از نحوه‌ی تعریف متغیرها در جاوا اسکریپت می‌رسیم به انواع داده‌ها در جاوا اسکریپت. در جاوا اسکریپت شما می‌توانید داده‌هایی از نوع زیر را تعریف کنید:

• عددی
• رشته‌
• بولین
• شی
• آرایه‌

داده‌های از نوع عددی، همانطور که اسمشان مشخص است، داده‌هایی می‌باشند که مقادیر عددی از نوع مثبت و منفی و اعشاری و صحیح دریافت می‌کنند.

داده‌های از نوع رشته هم داده‌هایی می‌گویند که بین “” تعریف می‌شوند و شامل عبارت‌هایی متشکل از حروف، نمادها، اعداد می‌باشند.

داده‌های از نوع بولین شامل دو مقدار true و false می‌باشند. این نوع از داده‌ها در دستورات شرطی بسیار کاربردی می‌باشند.

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

داده‌های از نوع آرایه‌ هم برای تعریف چندین متغیر در یک متغیر می‌باشد. شما می‌توانید انواع متغیرهای عددی، رشته، بولین، شی و حتی آرایه را در داخل یک آرایه تعریف کنید. این نوع از داده‌ها هم بسیار کاربردی می‌باشند.

نمونه‌ای از انواع داده‌ها را در مثال زیر می‌توانید مشاهده کنید:

var length = 16;                               // Number
var lastName = "Johnson";                      // String
var x = {firstName:"John", lastName:"Doe"};    // Object
var cars = ["Saab", "Volvo", "BMW"];           // Array
var bool = true                                // Boolean
var x1 = 34.00;     // Written with decimals
var x2 = 34;        // Written without decimals

اگر نوع متغیر تعریف شده را نمی‌دانستید با استفاده از دستور type of می‌توانید نوع آن را متوجه شوید.

typeof 0              // Returns "number"
typeof 314            // Returns "number"
typeof 3.14           // Returns "number"
typeof (3)            // Returns "number"
typeof (3 + 4)        // Returns "number"
typeof ""             // Returns "string"
typeof "John"         // Returns "string"
typeof "John Doe"     // Returns "string"

نکته‌ای که در رابطه با داده‌های رشته و عددی نیاز است رعایت کنید، این می‌باشد زمانی که از عملگرها ( جلوتر آن‌ها را توضیح خواهم داد) استفاده می‌کنید، نمی‌توانید دو داده از دو جنس عدد و رشته را با یکدیگر جمع و یا از هم کم کنید مگر آنکه هر دو از یک جنس باشند.

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

var car;    // Value is undefined, type is undefined

در صورتی هم که قصد دارید تا یک متغیر مقدار آن خالی شود ولی نوع آن تغییر نکند، می‌توانید مقدار آن را برابر با null قرار دهید. در این حالت متغیر تعریف شده است، اما مقدار آن تهی می‌باشد. ( با نداشتن مقدار این مورد فرق دارد)

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
person = null;    // Now value is null, but type is still an object

در واقع بدین صورت:

نوع داده‌های آن‌ها فرق دارد، اما مقدار هر دو تهی یعنی خالی می‌باشد. در رابطه با فرق == و === جلوتر خواهم گفت.

typeof undefined           // undefined
typeof null                // object

null === undefined         // false
null == undefined          // true

” در صورتی که از دستور type of برای یک متغیر از نوع آرایه استفاده کنید، به شما نوع object را باز می‌گرداند. این به این خاطر است که در جاوا اسکریپت، آرایه‌ها در واقع نوعی از شی‌ها می‌باشند. “

عملگرها در جاوا اسکریپت:

در زبان برنامه نویسی جاوا اسکریپت نیز همانند تمامی زبان‌های برنامه نویسی، عملگرهای مختلف ریاضی، منطقی، مقایسه‌ای و … وجود دارند.

عملگرهای ریاضی:

این عملگرها همانطور که اسمشان پیداست، مربوط به اعمال اصلی ریاضی می‌باشند. این عملگرها را در جدول پایین می‌توانید مشاهده کنید.

عملگر	عملکرد
+	جمع
–	تفریق
*	ضرب
**	توان
/	تقسیم
%	باقی مانده
++	افزودن مقدار ( به اندازه یک واحد)
—	کاهش دادن مقدار ( به اندازه یک واحد)

مثال‌هایی از عملگرهای ریاضی:

var x = 5;
var y = 2;
var z = x + y;
var z = x - y;
var z = x * y;
var z = x / y;
var z = x % y;
x++;
var z = x;
x--;
var z = x;
var z = x ** 2;

در عملگرهای ریاضی، اولویت انجام عملیات‌ها، همانند اولویت آن‌ها در ریاضیات می‌باشد.

عملگرهای مقداردهی:

عملگر	مثال	عملکرد
=	x = y	تساوی
+=	x += y	مقدار اولیه را به مقدار دیگری جمع می‌کند و سپس به عنوان مقدار جدید، مقدار اولیه در نظر می‌گیرد. مشابه x=x+y
-=	x -= y	مقدار اولیه را از مقدار دیگری تفریق می‌کند و سپس به عنوان مقدار جدید، مقدار اولیه در نظر می‌گیرد. مشابه x=x-y
*=	x *= y	مقدار اولیه را در مقدار دیگری ضرب می‌کند و سپس به عنوان مقدار جدید، مقدار اولیه در نظر می‌گیرد. مشابه x=x*y
/=	x /= y	مقدار اولیه را بر مقدار دیگری تقسیم می‌کند و سپس به عنوان مقدار جدید، مقدار اولیه در نظر می‌گیرد. مشابه x=x/y
%=	x %= y	باقی‌مانده مقدار اولیه بر مقدار دیگری را به عنوان مقدار جدید، مقدار اولیه در نظر می‌گیرد. مشابه x=x%y
**=	x **= y	مقدار اولیه را به توان مقدار دیگری می رساند و سپس به عنوان مقدار جدید، مقدار اولیه در نظر می‌گیرد. مشابه x=x**y

نمونه‌ای از این عملگرها:

var x = 10;
x += 5;    // x=x+5
x -= 5;    // x=x-5
x *= 5;    // x=x*5
x /= 5;    // x=x/5
x %= 5;    // x=x%5

عملگرهای مقایسه‌ای:

عملگر	عملکرد
==	برابری دو مقدار (از لحاظ مقدار)
===	برابری دو مقدار ( هم از نظر مقدار و هم نوع)
!=	عدم برابری دو مقدار (از لحاظ مقدار)
!==	عدم برابری دو مقدار (هم از نظر مقدار و هم نوع)
>	بزرگتر
<	کوچکتر
>=	بزرگتر مساوی
<=	کوچکتر مساوی

عملگرهای منطقی:

عملگر	عملکرد	مثال
&&	همانند و	(x < 10 && y > 1) is true
||	همانند یا	(x == 5 || y == 5) is false
!	نقیض – خروجی یک شرط را بر عکس می‌کند	!(x == y) is true

عملگر سه گانه:

این عملگر که مشابه دستورات شرطی عمل می‌کند با نماد ? مورد استفاده قرار می‌گیرد. در این عملگر، در ابتدا یک شرط نوشته می‌شود، سپس نماد ؟ گذاشته می‌شود، در صورتی که شرط برقرار باشد، مقدار value1 قرار داده می‌شود و در غیر اینصورت مقدار value2.

variablename = (condition) ? value1:value2

مثال:

var voteable = (age < 18) ? "Too young":"Old enough";

در این مثال، در صورتی که سن کمتر از ۱۸ باشد، عبارت اول یعنی Too young را متغیر voteable دریافت می‌کند و در غیر این صورت عبارت Old enough را دریافت‌ می‌کند.

توابع در آموزش جاوا اسکریپت

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

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

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

یک کلید واژه به نام function که مشخص کند یک تابع در حال تعریف می‌باشد. سپس اسم تابع و داخل پرانتز در صورتی که تابع مورد نظر ورودی دریافت می‌کند، پارامترهای ورودی و در غیر این صورت می‌توانید آن را خالی بگذارید.

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

function name(parameter1, parameter2, parameter3) {
    // code to be executed
}
  
function myFunction(p1, p2) {
    return p1 * p2;   // The function returns the product of p1 and p2
}

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

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
  }
  document.getElementById("demo").innerHTML = toCelsius(77);

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

// code here can NOT use carName

function myFunction() {
    var carName = "Volvo";
    // code here CAN use carName
  }
  
  // code here can NOT use carName

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

var x = toCelsius(77);
var text = "The temperature is " + x + " Celsius";

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

پیش‌تر اگر به یاد داشته باشید، در مورد انواع داده‌ها صحبت کردم، اکنون قصد دارم تا هر یک از انواع داده‌ها را بیشتر توضیح بدهم. اولین نوع داده‌ای که به آن خواهم پرداخت، شی‌ها objects می‌باشد.

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

var person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
  };

برای دسترسی به هر یک از این ویژگی‌ها، از دو طریق می‌توانید انجام دهید:

objectName["propertyName"]

objectName.propertyName

تفاوتی بین دو روش فوق وجود ندارد.

شما می‌توانید در یک شی، یک تابع نیز داشته باشید:

var person = {
    firstName: "John",
    lastName : "Doe",
    id       : 5566,
    fullName : function() {
      return this.firstName + " " + this.lastName;
    }
  };

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

objectName.methodName()
name = person.fullName();

در این مثال عبارت this را مشاهده کردید، this در اینجا به مقادیر داخل شی مورد نظر اشاره دارد. this متناسب با اینکه در کجا استفاده می‌شود، به مقدار متفاوتی اشاره می‌کند. در صورتی که this به صورت خالی مورد استفاده قرار گیرد، یک object window در خروجی باز می‌گرداند. در صورتی که در یک تابع یا متد مورد استفاده قرار گیرد، به مقدار آن متغیر مورد نظر در فضای تعریفی آن برمی‌گردد. در واقع this اشاره به پارامتر، event و مقداری دارد که در داخل یک شی، متد و یا event برای آن تعریف شده است.

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

” این یک دستور در اعداد ‌می‌باشد که با استفاده از آن می‌توانید از یک عدد، یک شی بسازید. “

var x = new Number(500);             
var y = new Number(500);

// (x == y) is false because objects cannot be compared

در شی‌ها یک نوع شی خاص به نام date وجود دارد. این شی در رابطه با تاریخ و زمان مورد استفاده قرار می‌گیرد. برای ساخت یک شی از نوع date به صورت زیر می‌توانید عمل کنید.

 شما می‌توانید این تاریخ را به شکل‌های مختلفی تعریف کنید. مثلا یک تاریخ به صورت رشته به آن به عنوان ورودی بدهید و یا بر حسب میلی ثانیه ( همان unix)، تاریخ مورد نظر را بدست آورید.

new Date()
new Date(year, month, day, hours, minutes, seconds, milliseconds)
new Date(milliseconds)
new Date(date string)

var d = new Date();
var d = new Date(2018, 11, 24, 10, 33, 30, 0);
var d = new Date(2018, 11, 24, 10, 33, 30);
var d = new Date(2018, 11, 24, 10, 33);
var d = new Date(2018, 11, 24, 10);
var d = new Date(2018, 11, 24);
var d = new Date(2018, 11);
var d = new Date(2018);
var d = new Date(0);
var d = new Date("October 13, 2014 11:13:00");

در صورتی که تاریخ مورد نظرتان مربوط به قرن قبل ( قرن ۲۰ بود) تاریخ را به صورت دو رقم آخر هر سال باید بنوسید. مثلا سال ۱۹۹۹ به صورت زیر می‌باشد:

var d = new Date(99, 11, 24);

برای تبدیل یک شی از نوع تاریخ به رشته از دستور toDateString می‌توانید استفاده کنید. در صورتی که تاریخ مورد نظر را در واحد UTC قصد دارید به رشته تبدیل کنید از دستور toUTCString می‌توانید استفاده کنید:

var d = new Date();
document.getElementById("demo").innerHTML = d.toDateString();   
// Tue Aug 25 2020

var d = new Date();
document.getElementById("demo").innerHTML = d.toUTCString();   
// Tue, 25 Aug 2020 19:03:20 GMT

برای تبدیل یک تاریخ به میلی ثانیه (unix) از دستور parse می‌توانید استفاده کنید. عددی که بازگردانده می‌شود، میزان ثانیه گذشته شده از تاریخ ۱ ژانویه ۱۹۷۰ تا تاریخ مورد نظر می‌باشد.

var msec = Date.parse("March 21, 2012");
document.getElementById("demo").innerHTML = msec;

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

در واقع ما دو متد Get و set برای Date در شی Date در جاوا اسکریپت داریم. متد get برای گرفتن اطلاعات خاصی مثل سال خاصی، زمان خاص و یا ساعت و دقیقه می‌باشد و متد set آن برای تغییر به طور خاص در ساعت، سال و یا پارامترهای زمان و تاریخ می‌باشد.

متدهای get

getFullYear()	سال تاریخ مورد نظر به صورت ۴ رقم دریافت کنید
getMonth()	ماه تاریخ مورد نظر را به صورت عدد از ۰ (ماه ژانویه تا ۱۱ ماه دسامبر) را می‌توانید دریافت کنید
getDate()	روز تاریخ مورد نظر از ۱ تا ۳۱ می‌توانید دریافت کنید
getHours()	ساعت تاریخ مورد نظر از ۰ تا ۲۳ می‌توانید دریافت کنید.
getMinutes()	دقیقه تاریخ مورد نظر از ۰ تا ۵۹ می‌توانید دریافت کنید.
getSeconds()	ثانیه تاریخ مورد نظر از ۰ تا ۵۹ می‌توانید دریافت کنید.
getMilliseconds()	میلی ثانیه تاریخ مورد نظر از ۰ تا ۹۹۹ می‌توانید دریافت کنید.
getTime()	تاریخ به صورت میلی ثانیه از زمان ۱ ژانویه ۱۹۷۰ می‌توانید دریافت کنید. (فرمت unix)
getDay()	روزهای هفته مورد نظر به صورت عدد از ۰ (Sunday) تا ۶ (Saturday) می‌توانید دریافت کنید.
Date.now()	زمان حال حاضر را می‌توانید دریافت کنید.

در صورتی که قصد دارید تا در فرمت UTC مقادیر بالا را بدست آورید، تنها کافیست بعد از get، UTC را بنوسید. همانند getUTCYear().

var d = new Date();
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
document.getElementById("demo").innerHTML = d.getFullYear();
document.getElementById("demo").innerHTML = d.getMonth();
document.getElementById("demo").innerHTML = months[d.getMonth()];
document.getElementById("demo").innerHTML = d.getDate();
document.getElementById("demo").innerHTML = d.getHours();
document.getElementById("demo").innerHTML = d.getMinutes();
document.getElementById("demo").innerHTML = d.getSeconds();
document.getElementById("demo").innerHTML = d.getMilliseconds();
document.getElementById("demo").innerHTML = d.getDay();
document.getElementById("demo").innerHTML = days[d.getDay()]

متدهای set

setDate()	روز تاریخ مورد نظر را تغییر می‌دهد. از ۱ تا ۳۱ می‌تواند دریافت کند.
setFullYear()	سال  تاریخ مورد نظر را تغییر می‌دهد. می‌توانید ماه و یا روز را هم به صورت دلخواه به عنوان ورودی به آن بدهید.
setHours()	ساعت تاریخ مورد نظر را تغییر می‌دهد. از ۰ تا ۲۳ می‌تواند دریافت کند.
setMilliseconds()	میلی ثانیه تاریخ مورد نظر را تغییر می‌دهد. از ۰ تا ۹۹۹ می‌تواند دریافت کند.
setMinutes()	دقیقه تاریخ مورد نظر را تغییر می‌دهد. از ۰ تا ۵۹ می‌تواند دریافت کند.
setMonth()	ماه تاریخ مورد نظر را تغییر می‌دهد. از ۰ تا ۱۱ می‌تواند دریافت کند.
setSeconds()	ثانیه تاریخ مورد نظر را تغییر می‌دهد. از ۰ تا ۵۹ می‌تواند دریافت کند.
setTime()	میلی ثانیه تاریخ مورد نظر را تغییر می‌دهد. در فرمت unix مقدار دریافت می‌کند.

مثال:

<script>
  var d = new Date();
  d.setFullYear(2020);
  document.getElementById("demo").innerHTML = d;
  d.setFullYear(2020, 11, 3);
  document.getElementById("demo").innerHTML = d;
  d.setMonth(11);
  document.getElementById("demo").innerHTML = d;
  d.setDate(15);
  document.getElementById("demo").innerHTML = d;
  d.setDate(d.getDate() + 50);
  document.getElementById("demo").innerHTML = d;
  d.setHours(22);
  document.getElementById("demo").innerHTML = d;
  d.setMinutes(30);
  document.getElementById("demo").innerHTML = d;
  d.setSeconds(30);
  document.getElementById("demo").innerHTML = d;
</script>

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

var today, someday, text;
today = new Date();
someday = new Date();
someday.setFullYear(2100, 0, 14);

if (someday > today) {
  text = "Today is before January 14, 2100.";
} else {
  text = "Today is after January 14, 2100.";
}
document.getElementById("demo").innerHTML = text;

نوع داده‌ی بعدی، رشته‌ها و متد‌های مربوط به آن می‌باشد.

خب همانطور که پیش‌تر مثال زدم، رشته‌ها در بین “” و یا ‘’ قرار دهید. دقت کنید حتما باید نقطه شروع و پایان یک رشته از یک نوع باشد. یا هر دو با ” شروع و تمام شوند و یا  هر دو با ‘.

برای اینکه در داخل یک رشته از ” و یا ‘ استفاده کنید. به دوطریق می‌توانید اینکار را انجام دهید:

• در صورتی که از ” برای نوشتن رشته‌ی مورد نظر استفاده می‌کنید، می‌توانید از ‘ در داخل آن استفاده کنید و به همین شکل برعکس.
• روش دیگر استفاده از \’ و یا “\ قبل و بعد از عبارت مورد نظر استفاده کنید.

در صورتی هم که قصد دارید تا از \ در داخل عبارت خود استفاده کنید، باید از \\ در داخل رشته‌ی مورد نظرتان استفاده کنید.

var x = "We are the so-called \"Vikings\" from the north.";
var x = "We are the so-called \'Vikings\' from the north.";

var x = "We are the so-called 'Vikings' from the north.";
var x = 'We are the so-called "Vikings" from the north.';

var x = "The character \\ is called backslash.";

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

\b	فاصله را پاک می‌کند.
\n	بردن به خط بعدی
\t	یک تب در سمت افقی و به سمت راست
\v	یک تب در سمت عمودی و به سمت پایین

شما با دستور خاصی می‌توانید یک رشته بسازید که از نوع شی باشد. برای اینکار از دستور زیر نیاز است استفاده کنید:

var y = new String("John");

در این صورت y یک رشته به صورت شی می‌باشد.

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

اولین متدی که در رشته‌ها به آن میپردازم، نحوه‌ی تبدیل یک رشته به یک عدد می‌باشد. فرض کنید شما یک رشته عددی دارید (مثلا “۲۰”) حال قصد دارید تا این رشته را به نوع عدد تبدیل کنید. برای اینکار در رشته‌ها متدهای خاصی وجود دارد که به راحتی می‌توانید اینکار را انجام دهید. برای اینکار دو متد مشخص وجود دارد:

• parseInt: تبدیل رشته به نوع عددی صحیح
• parseFloat: تبدیل رشته به نوع عددی اعشاری

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

Number("10");          // returns 10
Number("  10");        // returns 10
Number("10  ");        // returns 10
Number(" 10  ");       // returns 10
Number("10.33");       // returns 10.33
Number("10,33");       // returns NaN
Number("10 33");       // returns NaN
Number("John");        // returns NaN

var x = parseFloat('20')
var x = parseFloat('142.53')
var x = parseInt('20.15')
var x = parseInt('52')

علاوه بر متد‌های تبدیل رشته به عدد، شما می‌توانید یک بولین و یا یک تاریخ را از نوع بولین و یا تاریخ به نوع رشته تبدیل کنید. برای اینکار دو متد در رشته‌ها داریم یک متد String می‌باشد (حتما با حرف اول بزرگ) و دیگری toString می‌باشد.

false.toString()   // returns "false"
true.toString()    // returns "true"

String(false)      // returns "false"
String(true)       // returns "true"

String(Date())  // returns "Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)"

Date().toString()  // returns "Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)"

برای بدست آوردن طول یک رشته از دستور length استفاده می‌باشد. با استفاده از آن می‌توانید، طول یک رشته را بدست‎ آورید.

var txt = "ABC DEF GHIJ KLMNO PQRS T UVWX YZ";
var sln = txt.length;

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

var str = "Please locate where 'locate' occurs!";
var pos = str.indexOf("locate");

” مکان کاراکترها در داخل یک رشته از ۰ می باشد. “

اگر که قصد دارید تا مقداری که به شما بازگردانده می‌شود، محل آخرین کاراکتر از عبارت مورد نظر در رشته باشد، از دستور lastindexof نیاز است تا استفاده کنید:

var str = "Please locate where 'locate' occurs!";
var pos = str.lastIndexOf("locate");

در صورتی که در دستور فوق، عبارت مورد نظر در رشته وجود نداشته باشد، مقدار -۱ بازگردانده می‌شود.

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

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

var str = "Please locate where 'locate' occurs!";
var pos = str.indexOf("locate", 15);

var str = "Please locate where 'locate' occurs!";
var pos = str.lastIndexOf("locate", 15);


var str = "Please locate where 'locate' occurs!";
var pos = str.search("locate");

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

شما می‌توانید اعداد منفی نیز به slice بدهید، اعداد منفی بر عکس اعداد مثبت می‌باشند، بدین معنا که -۱ یعنی آخرین کاراکتر در رشته می‌باشد. در صورتی که این دستور تنها یک پارامتر بگیرد، این پارامتر نقطه شروع جدا کردن عبارت مورد نظر از رشته می‌باشد.

var str = "Apple, Banana, Kiwi";
var res = str.slice(7, 13);

var str = "Apple, Banana, Kiwi";
var res = str.slice(-12, -6);

var res = str.slice(7);

دستور بعدی در رشته‌ها substring می‌باشد. این دستور مشابه slice می‌باشد، با این تفاوت که مقادیر منفی نمی‌تواند دریافت کند.

دستور بعدی substr می‌باشد. این دستور مشابه slice می‌باشد. با این تفاوت که پارامتر دوم به جای نقطه‌ی پایانی بخش جدا کردن عبارت مورد نظر از رشته باشد، طول بخش جدا شده می‌باشد. مثلا در مثال زیر از مکان ۷ در رشته با طول ۶ از این نقطه، بخش مورد نظر را جدا می‌کند. در صورتی هم که تنها یک مقدار به آن داده شود، همانند slice عمل خواهد کرد.

var str = "Apple, Banana, Kiwi";
var res = str.substr(7, 6);

var str = "Apple, Banana, Kiwi";
var res = str.substr(7);

دستور بعدی replace می‌باشد. این دستور جهت این استفاده می‌شود که شما قصد داشته باشید تا بخشی از یک رشته را با مقدار دیگری عوض کنید. این دستور دو پارامتر دریافت می‌کند که پارامتر اول مقدار مورد نظر در رشته و مقدار دوم، مقدار جایگزین برای مقدار مورد نظر در رشته می‌باشد. در صورتی که چندین مقدار از عبارت مورد در رشته وجود داشته باشد، تنها اولین مقدار با مقدار جدید جایگزین می‌شود. در صورتی که قصد دارید تا تمامی موارد را جایگزین کنید، از \g نیاز است تا استفاده کنید.

توجه کنید که این دستور به بزرگ و کوچک بودن حروف حساس است. در صورتی که قصد دارید تا حساسیت به بزرگی و کوچکی حروف را در این دستور حذف کنید، نیاز است تا از \i استفاده کنید.

str = "Please visit Microsoft!";
var n = str.replace("Microsoft", "Maktabkhooneh");

str = "Please visit Microsoft and Microsoft!";
var n = str.replace("Microsoft", "Maktabkhooneh");

str = "Please visit Microsoft!";
var n = str.replace("MICROSOFT", "Maktabkhooneh");

str = "Please visit Microsoft!";
var n = str.replace(/MICROSOFT/i, "Maktabkhooneh");

str = "Please visit Microsoft and Microsoft!";
var n = str.replace(/Microsoft/g, "Maktabkhooneh");

دستور بعدی برای تبدیل حروف کوچک یک رشته به حروف بزرگ و بر عکس می‌باشد. برای تبدیل حروف کوچک به حروف بزرگ از دستور toUpperCase() و برای تبدیل حروف بزرگ به حروف کوچک از دستور toLowerCase() می‌توان استفاده کرد.

var text1 = "Hello World!";       // String
var text2 = text1.toUpperCase();  // text2 is text1 converted to upper

var text1 = "Hello World!";       // String
var text2 = text1.toLowerCase();  // text2 is text1 converted to lower

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

var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ", "World!");

دستور بعدی trim می‌باشد. از این دستور زمانی استفاده می‌شود که شما قصد دارید تا در صورتی که فواصل خالی در ابتدا و انتهای رشته‌ای وجود داشت، حذف کنید.

var str = "       Hello World!        ";
alert(str.trim());

مورد بعدی در رشته‌ها، نحوه‌ی دسترسی به هر یک از کاراکترها در رشته‌ها می‌باشد.

برای اینکار می‌توانید از دستور charAt استفاده کنید و یا با استفاده از [] به مقدار مورد نظر دسترسی پیدا کنید.

var str = "HELLO WORLD";
str.charAt(0);            // returns H

var str = "HELLO WORLD";
str[0];                   // returns H

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

str[0] = "A";

در آخرین مورد از رشته‌ها، ایجاد آرایه از رشته‌ها می‌باشد. برای اینکار از دستوری به نام split استفاده می‌شود. این دستور یک پارامتر ورودی دریافت می‌کند. این پارامتر در واقع مکان‌هایی که عبارت‌ها در داخل رشته از یکدیگر جدا می‌شوند را مشخص می‌کند. هر یک از قسمت‌های جدا شده به عنوان یک عضو جداگانه در یک آرایه قرار می‌گیرند. در صورتی که از پارامتر مورد نظر در داخل رشته‌ی مورد نظر وجود نداشته باشد، کل رشته به عنوان یک عضو در داخل یک آرایه قرار می‌گیرد. در صورتی که پارامتر ورودی به صورت “” باشد، کاراکترهای رشته‌ی مورد نظر را از یکدیگر جدا می‌کند و در داخل یک آرایه ذخیره می‌شوند.

var txt = "a,b,c,d,e";   // String
txt.split(",");          // Split on commas
txt.split(" ");          // Split on spaces
txt.split("|");          // Split on pipe

var txt = "Hello";       // String
txt.split("");           // Split in characters

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

var x = 10;
var y = 20;
var z = x + y;           // z will be 30 (a number)

var x = "10";
var y = "20";
var z = x + y;           // z will be 1020 (a string)

var x = 10;
var y = "20";
var z = x + y;           // z will be 1020 (a string)

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

var x = "100";
var y = "10";
var z = x / y;       // z will be 10

var x = "100";
var y = "10";
var z = x * y;       // z will be 1000

var x = "100";
var y = "10";
var z = x - y;       // z will be 90

var x = "100";
var y = "10";
var z = x + y;       // z will not be 110 (It will be 10010)

در صورتی که شما مقداری از نوع عدد را بر یک رشته تقسیم کنید، به شما مقدار NaN برگردانده می‌شود (رشته‌ی غیر عددی). NaN بدین معنا می‌باشد که خروجی مورد نظر از نوع عدد حقیقی نمی‌باشد.

var x = 100 / "Apple";  // x will be NaN (Not a Number)

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

var x = 100 / "Apple";
isNaN(x);               // returns true because x is Not a Number

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

var x =  2 / 0;       // x will be Infinity
var y = -2 / 0;       // y will be –Infinity

typeof Infinity;     // returns "number"

همانند رشته‌ها، شما می‌توانید از نوع عدد نیز یک نوع شی بسازید. برای اینکار نیاز است تا عدد مورد نظرتان یک شی بسازید. برای اینکار از دستور زیر استفاده می‌شود. در مثال زیر متغیر y از نوع شی خواهد بود. در حالت مقایسه‌ای نیز، در حالت استفاده از === با اینکه مقدار هر دو یکی است، اما چون نوع آن‌ها فرق دارد، مقدار خروجی false خواهد بود.

var x = 123;
var y = new Number(123);

// typeof x returns number
// typeof y returns object

var x = 500;             
var y = new Number(500);

// (x === y) is false because x and y have different types

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

var x = 123;
x.toString();            // returns 123 from variable x
(۱۲۳).toString();        // returns 123 from literal 123
(۱۰۰ + ۲۳).toString();   // returns 123 from expression 100 + 23

همچنین شما می‌توانید یک عدد را به صورت نمایی نیز نمایش دهید. برای اینکار از دستور toExponential استفاده باید کنید.

var x = 9.656;
x.toExponential(2);     // returns 9.66e+0
x.toExponential(4);     // returns 9.6560e+0
x.toExponential(6);     // returns 9.656000e+0

دستور بعدی tofixed می‌باشد. این دستور برای این می‌باشد تا تعداد رقم‌های قابل نمایش بعد از اعشار را مشخص کرد. ممکن است یک عدد تا ۲۰ رقم بعد اعشار نیز داشته باشد، اما شما تنها بخواهید دو رقم اول بعد اعشار را نمایش دهید، برای اینکار از این دستور باید استفاده کنید. در صورتی که تعداد ارقام بعد اعشار کمتر تعدادی باشد که شما برای نمایش مشخص کردید، در این صورت به جای ارقامی که در عدد وجود ندارد، ۰ قرار داده می‌شود.

var x = 9.656;
x.toFixed(0);           // returns 10
x.toFixed(2);           // returns 9.66
x.toFixed(4);           // returns 9.6560
x.toFixed(6);           // returns 9.656000

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

var x = 9.656;
x.toPrecision();        // returns 9.656
x.toPrecision(2);       // returns 9.7
x.toPrecision(4);       // returns 9.656
x.toPrecision(6);       // returns 9.65600

دستور بعدی valueOf می‌باشد. این دستور یک عدد را به صورت عدد به شما می‌دهد. در واقع کاربرد این دستور در زمانی می‌باشد که شما یک شی از عدد دارید و با این دستور می‌توانید آن را به نوع عدد تبدیل کنید.

var x = new Number(123);
x.valueOf();            // returns 123 from variable x
(۱۲۳).valueOf();        // returns 123 from literal 123
(۱۰۰ + ۲۳).valueOf();   // returns 123 from expression 100 + 23

شما می‌توانید یک تاریخ را نیز به عدد تبدیل کنید. خروجی این دستور تاریخ بر حسب unix می‌باشد. unix یک عدد بر حسب ثانیه می‌باشد که از تاریخ مرجع ۱ ژانویه ۱۹۷۰ تا زمان مورد نظر شما حساب می‌شود.

Number(new Date("2017-09-30"));    // returns 1506729600000

در جاوا اسکریپت برای اعداد دستوری وجود دارد که با استفاده از آن می‌توانید بررسی کنید که آیا عدد مورد نظر به صورت عدد صحیح می‌باشد یا خیر. این دستور isInteger می‌باشد.

Number.isInteger(123) //true
Number.isInteger(-123) //true
Number.isInteger(5-2) //true
Number.isInteger(0) //true
Number.isInteger(0.5) //false
Number.isInteger('123') //false
Number.isInteger(false) //false
Number.isInteger(Infinity) //false
Number.isInteger(-Infinity) //false
Number.isInteger(0 / 0) //false

دستور دیگری نیز وجود دارد که برای شما چک می‌کند که آیا عدد مورد نظر نا محدود است یا محدود. این دستور infinite می‌باشد. این دستور در صورتی که بر روی رشته یا Infinity اعمال شود، مقدار false به شما بر می‌گرداند.

Number.isFinite(123) //true
Number.isFinite(-1.23) //true
Number.isFinite(5-2) //true
Number.isFinite(0) //true
Number.isFinite('123') //false
Number.isFinite('Hello') //false
Number.isFinite('2005/12/12') //false
Number.isFinite(Infinity) //false
Number.isFinite(-Infinity) //false
Number.isFinite(0 / 0) //false

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

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];

برای مقدار دهی به یک آرایه هم تنها کافیست تا المان مورد نظر را انتخاب کنید و سپس مقدار جدید را برای آن تعریف کنید:

var cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars[0];

همانطور که گفته شد، آرایه‌ها نوعی از شی‌ها می‌باشند و زمانی که با دستور typeof نوع آن را بخواهید ببینید، به شما نوع object باز می‌گرداند. برای اینکه متوجه شوید واقع یک آرایه هست یا شی. از دو روش زیر می‌توانید استفاده کنید:

دستور isArray و دستور instanceof

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits instanceof Array;   // returns true
Array.isArray(fruits);   // returns true

همانند سایر نوع داده‌ها در جاوا اسکریپت، آرایه‌ها نیز متدها و ویژگی‌های خاص خود را دارند که در اینجا قصد دارم، به آن‌ها بپردازم.

از جمله متد‌های کاربردی در آرایه‌ها، بدست آوردن طول یک آرایه و به ترتیب قرار دادن اعضای آرایه می‌باشد.

برای اینکه طول یک آرایه را بدست آورید، از دستور length می‌توانید استفاده کنید و برای به ترتیب قرار دادن اعضای آرایه از دستور sort().

var x = cars.length;   // The length property returns the number of elements
var y = cars.sort();   // The sort() method sorts arrays

از همین متد length می‌توان استفاده کرد و به آخرین عضو از یک آرایه دسترسی پیدا کرد.

fruits = ["Banana", "Orange", "Apple", "Mango"];
var last = fruits[fruits.length - 1];

دستور sort اعضا را به صورت نزولی به ترتیب می‌کند. در صورتی که قصد داشته باشید تا به صورت صعودی اعضا را به ترتیب در آرایه بکنید، از دستور reverse باید استفاده کنید.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();        
fruits.reverse();     

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

در صورتی قصد داشته باشید تا اعدادی که به صورت رشته یا عددی هستند را با استفاده از این دستور در یک آرایه به ترتیب کنید، به شما مقدار اشتباهی در ترتیب می‌دهد، برای رفع این مشکل برای به ترتیب کردن می‌توانید از شیوه‌ی زیر استفاده کنید:

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});

به همین طریق و پس از به ترتیب کردم مقادیر، می‌توانید کوچکترین مقدار که ایندکس ۰ و بزرگترین مقدار که آخرین ایندکس آرایه می‌باشد، را بدست آورید.

در صورتی که قصد داشته باشید تا یک آرایه‌ای که دارای یک عضو از نوع شی می‌باشد را به ترتیب کنید، به صورت زیر می‌توانید عمل کنید.

cars.sort(function(a, b){return a.year - b.year});

برای افزودن یک عضو به یک آرایه نیز از دستور push می‌توانید استفاده کنید. در صورتی هم که خروجی دستور مورد نظر را در داخل متغیری بریزید، مقداری که متغیر مورد نظر دریافت می‌کند، برابر با طول جدید آرایه می‌باشد.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");    // adds a new element (Lemon) to fruits

روش دیگری نیز وجود دارد و آن استفاده از دستور length می‌باشد.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";    // adds a new element (Lemon) to fruits

دقت کنید که مقدار خروجی length یک آرایه، از آخرین ایندکس عضو آرایه بیشتر است (چون از ۰ شروع می‌شود) به همین جهت وقتی به مقدار ایندکس معادل با طول آرایه، مقداری نسبت دهید، یک عضو جدید به آرایه در این حالت اضافه می‌شود.

در صورتی که به ایندکسی از آرایه مقداری نسبت دهید که این ایندکس بیشتر از طول آرایه باشد، به ازای اختلافی که بین ایندکس آخرین عضو و جدیدترین عضوی که مقدار به آن نسبت داده شده است، وجود دارد، مقدار undefined تعریف می‌شود. در این مثال به دلیل اینکه به ایندکس ۶ مقدار نسبت داده شده است و طول آرایه ۴ است و آخرین ایندکس آن ۳، در نتیجه برای ایندکس ۴ و ۵ چون مقداری وجود ندارد، مقدار undefined تعریف می‌شود.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon";    // adds a new element (Lemon) to fruits

در صورتی که قصد داشته باشید تا مقدار عضوی از آرایه‌ای را بگیرید که در آن ایندکس آرایه‌ی مورد نظر مقداری نداشته باشد، مقدار undefined باز گردانده می‌شود.

var y = person[0];         // person[0] will return undefined

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

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

نتیجه

Banana,Orange,Apple,Mango

در روش دیگری شما می‌توانید از دستور join استفاده کنید. این دستور تمامی اعضای لیست را در کنار یکدیگر قرار می‌دهد، شما می‎توانید با عبارت یا کاراکتر خاصی اعضای آرایه‌ مورد نظر را از یکدیگر جدا کنید:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");

نتیجه:

Banana * Orange * Apple * Mango

در صورتی که قصد دارید تا عضوی از آرایه را حذف کنید، از دستور pop می‌توانید استفاده کنید. این دستور آخرین عضو از آرایه‌ی مورد نظر را حذف می‌کند. در صورتی هم که قصد دارید تا عضو حذف شده‌ی مورد نظر را در متغیری بریزید، تنها کافیست زمان استفاده از این دستور، آن را برابر با متغیری قرار دهید.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();              // Removes the last element ("Mango") from fruits

var x = fruits.pop();      // the value of x is "Mango"

برخلاف دستور pop، دستور دیگری وجود دارد که اولین عضو از آرایه رو حذف می‌کند. برای اینکار از دستور shift استفاده می‌شود. در صورتی هم که قصد دارید تا عضو حذف شده‌ی مورد نظر را در متغیری بریزید، تنها کافیست زمان استفاده از این دستور، آن را برابر با متغیری قرار دهید.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();            // Removes the first element "Banana" from fruits

var x = fruits.shift();    // the value of x is "Banana"

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

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // Adds a new element "Lemon" to fruits

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

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");

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

اکر هم که هیج عضوی قصد نداشته باشید اضافه کنید، می‌توانید صرفا اعضای خاص را حذف کنید و همانند shift و pop عمل کنید با این تفاوت که می‌توانید ایندکس عضو یا اعضایی که قصد دارید حذف کنید را مشخص کنید.

تا به اینجا در رابطه با چگونگی اضافه کردن عضوی به یک آرایه صحبت کردم. اکنون دستور دیگری که به شما این امکان را می‌دهد تا اعضای یک آرایه را به آرایه دیگری اضافه کنید. این دستور concat می‌باشد. در مثال زیر، اعضای لیست myBoys به اعضای لیست myGirls اضافه می‌شود.

var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);   // Concatenates (joins) myGirls and myBoys

حتی شما می‌توانید چندین آرایه را به اعضای یک آرایه اضافه کنید.

var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   // Concatenates arr1 with arr2 and arr3

با این دستور می‌توانید عضو نیز اضافه کنید (همچون push).

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

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);

اگر قصد دارید تا یک نقطه شروع و یک نقطه پایان برای دستور slice تعریف کنید. نیاز است تا دو پارامتر به این دستور بدهید که پارامتر اولین ایندکس شروع و پارامتر دوم ایندکس پایان می‌باشد.

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);

آخرین موردی که در این مقاله از آن باقی‌مانده هست، تبدیل اعداد و یا رشته‌ها به بولین می‌باشد. شما با استفاده از دستور Boolean می‌توانید اعداد و یا رشته‌ها را به بولین تبدیل کنید.

در تبدیل به بولین‌ها نکته‌ای که وجود دارد این می‌باشد که در صورتی که عددی مقدار آن ۰ باشد، موقع تبدیل به بولین مقدار آن false خواهد بود اما اگر عدد ۰ به صورت یک رشته باشد، مقدار تبدیل بولین آن true خواهد بود (بر خلاف انتظار). همچنین چندین ۰ نیز بازم مقدار true باز گردانده می‌شود.

برای در حالتی که NaN داشته باشیم، در تبدیل بولین آن، مقدار false بر گردانده می‌شود. برای Infinity و –Infinity خروجی بولین به صورت true خواهد بود. در حالتی که رشته به صورت “” باشد، خروجی بولین آن اما false خواهد بود. در حالتیم که عبارت null و undefined باشد، خروجی بولین به صورت false خواهد بود. در سایر حالت‌ها به جز زمانی که خود رشته‌ی false و یا خود false را تبدیل می‌کنیم که خروجی مشخصا false خواهد بود، تبدیل بولین، مقدار true را باز می‌گرداند.

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