ECMAScript 5 - JavaScript 5

Main Page Tutorial
موارد آموزشی
آموزش مقدمه اصول اولیه خروجی عبارات شیوهٔ نوشتن دستورات درج توضیحات متغیرها عملگرها عملگرهای ریاضی عملگرهای مقداردهی انواع داده‌ها توابع تعاریف شیء رویدادها رشته‌های متنی متدی برای داده‌های رشته‌ای اعداد متدی برای داده‌های عددی آرایه‌ها متدهای آرایه مرتب‌سازی آرایه‌ها متدهای پیمایش آرایه تاریخ و زمان فرمت‌های تاریخ متدهای دریافت تاریخ متدهای تنظیم تاریخ شیء ریاضی ایجاد عدد تصادفی مقادیر منطقی عملگرهای منطقی و مقایسه‌ای ساختار شرطی تکه کد Switch حلقهٔ For حلقهٔ While Break و Continue تبدیل نوع داده‌ها عملیات‌های بیتی عبارات با قاعده رخ دادن خطا Scope جا به جایی کدها استفاده از حالت سخت‌گیرانه کلمهٔ کلیدی This کلمهٔ کلیدی Let ثابت‌ها توابع به صورت پیکان کلاس‌ها اشکال‌زدایی راهنمای استایل بهترین تمرینات اشتباهات رایج کارایی کلمات رزرو شده نسخه‌ها نسخه ES5 نسخه ES6 JSON
فرم‌ها در جاوا اسکریپت
اشیاء در جاوا اسکریپت
تابع در جاوا اسکریپت
HTML DOM در جاوا اسکریپت
Browser BOM در جاوا اسکریپت
AJAX در جاوا اسکریپت
JSON در جاوا اسکریپت
جی‌کوئری در برابر جاوا اسکریپت
مثال های جاوا اسکریپت
مرجع جاوا اسکریپت

ECMAScript 5 چیست؟

ECMAScript5 با نام‌های ES5 و ECMAScript 2009 نیز شناخته می‌شود.

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

قابلیت های ECMAScript 5

موارد زیر قابلیت‌های جدیدی هستند که در سال ۲۰۰۹ منتشر شدند:

• استفاده از حالت سخت گیرانه یا "use strict"
• String.trim()
• Array.isArray()
• Array.forEach()
• Array.map()
• Array.filter()
• Array.reduce()
• Array.reduceRight()
• Array.every()
• Array.some()
• Array.indexOf()
• Array.lastIndexOf()
• JSON.parse()
• JSON.stringify()
• Date.now()
• ویژگی متدهای دریافت کننده (به انگلیسی: Getter) و تنظیم کننده (به انگلیسی: Setter)
• متدهای ویژگی شیء جدید

برخی از تغییرات شیوه نوشتار (به انگلیسی: Syntax) در نسخه ECMAScript 5

• دسترسی به ویژگی‌های رشته متنی به وسیلهٔ [ ]
• استفاده از ویرگول یا کاما , در تعریف‌های آرایه و شیء
• نوشتن رشته‌های متنی در چندین خط
• کلمات رزرو شده به عنوان نام ویژگی‌ها

استفاده از حالت سخت گیرانه

"use strict" تعریف می‌کند که کدهای جاوا اسکریپت می‌بایست در “حالت سخت گیرانه” (به انگلیسی: use strict) اجرا شود.

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

شما می‌توانید از حالت سخت گیرانه (به انگلیسی: Strict mode) در تمامی برنامه‌هایتان استفاده کنید. این امر کمک می‌کند که کد تمیزتری بنویسید برای مثال، در حالت سخت گیرانه شما نمی‌توانید از متغیرهای تعریف نشده استفاده کنید.

"use strict" یک عبارت رشته متنی است. مرورگرهای قدیمی در صورتی این عبارت را متوجه نشوند خطا ایجاد نمی‌کنند.

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

متد String.trim()

متد String.trim() فضاهای خالی را از دو طرف یک رشته متنی پاک می‌کند.

مثال

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

مشاهدهٔ نتیجه

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

متد Array.isArray()

متد isArray() بررسی می‌کند که یک شی یک آرایه است یا نه.

مثال

1 function myFunction() {
2   var fruits = ["Banana", "Orange", "Apple", "Mango"];
3   var x = document.getElementById("demo");
4   x.innerHTML = Array.isArray(fruits);
5 }

مشاهدهٔ نتیجه

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

متد Array.forEach()

متد forEach() یک متد را روی هر عنصر آرایه فراخوانی می‌کند.

مثال

1 var txt = "";
2 var numbers = [45, 4, 9, 16, 25];
3 numbers.forEach(myFunction);
4 
5 function myFunction(value) {
6   txt = txt + value + "<br>";
7 }

مشاهدهٔ نتیجه

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

متد Array.map()

در این مثال، هرآرایه را در عدد ۲ ضرب می‌کند:

مثال

1 var numbers1 = [45, 4, 9, 16, 25];
2 var numbers2 = numbers1.map(myFunction);
3 
4 function myFunction(value) {
5   return value * 2;
6 }

مشاهدهٔ نتیجه

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

متد Array.filer()

این مثال یک آرایه جدید از عناصری که مقدار آنها از ۱۸ بیشتر است می‌سازد:

مثال

1 var numbers = [45, 4, 9, 16, 25];
2 var over18 = numbers.filter(myFunction);
3 
4 function myFunction(value) {
5   return value > 18;
6 }

مشاهدهٔ نتیجه

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

متد Array.reduce()

این مثال حاصل مجموع تمامی اعداد درون یک آرایه را بدست می‌آورد:

مثال

1 var numbers1 = [45, 4, 9, 16, 25];
2 var sum = numbers1.reduce(myFunction);
3 
4 function myFunction(total, value) {
5   return total + value;
6 }

مشاهدهٔ نتیجه

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

متد Array.reduceRight()

این مثال هم حاصل جمع تمامی اعداد درون آرایه را به دست می‌آورد:

مثال

1 var numbers1 = [45, 4, 9, 16, 25];
2 var sum = numbers1.reduceRight(myFunction);
3 
4 function myFunction(total, value) {
5   return total + value;
6 }

مشاهدهٔ نتیجه

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

متد Array.every()

این مثال بررسی می‌کند که آیا تمامی مقادیر بزرگتر از هیجده هستند:

مثال

1 var numbers = [45, 4, 9, 16, 25];
2 var allOver18 = numbers.every(myFunction);
3 
4 function myFunction(value) {
5   return value > 18;
6 }

مشاهدهٔ نتیجه

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

متد Array.some()

این مثال بررسی می‌کند که آیا برخی از عناصر آرایه بزرگتر از هیجده هستند:

مثال

1 var numbers = [45, 4, 9, 16, 25];
2 var allOver18 = numbers.some(myFunction);
3 
4 function myFunction(value) {
5   return value > 18;
6 }

مشاهدهٔ نتیجه

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

متد Array.indexOf()

در آرایه به دنبال یک عنصر می‌گردد و اندیس یا موقعیت نتیجه را برمی‌گرداند:

مثال

1 var fruits = ["Banana", "Orange", "Apple", "Mango"];
2 var a = fruits.indexOf("Apple");

مشاهدهٔ نتیجه

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

متد Array.lastIndexOf()

متد Array.lastIndexOf() همانند متد Array.indexOf() است اما با تفاوت که جستجو را از آخر آرایه شروع می‌کند.

مثال

1 var fruits = ["Banana", "Orange", "Apple", "Mango"];
2 var a = fruits.lastIndexOf("Apple");

مشاهدهٔ نتیجه

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

متد JSON.parse()

یک استفاده رایج از JSON برای دریافت اطلاعات از یک وب سرور است.

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

'{"name":"John", "age":30, "city":"New York"}'

از متد JSON.parse() برای تبدیل یک متن به شی جاوا اسکریپت استفاده می‌شود.

var obj = JSON.parse('{"name":"John", "age":30, "city":"New York"}');

مشاهدهٔ نتیجه

شما می‌توانید مطالب بیشتری را در فصل آموزش JSON بیابید.

JSON.stringify()

یکی دیگر از استفاده‌های رایج از JSON ارسال اطلاعات به سمت وب سرور است.

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

تصور کنید که ما این شی جاوا اسکریپت را داریم:

var obj = {"name":"John", "age":30, "city":"New York"};

از تابع JSON.stringify() برای تبدیل آن به یک رشته متنی استفاده کنید.

var myJSON = JSON.stringify(obj);

نتیجه یک رشته متنی است که در قالب جیسون یا JSON است.

myjson اکنون یک رشته متنی است و آماده است که به سمت یک سرور ارسال شود.

مثال

1 var obj = {"name":"John", "age":30, "city":"New York"};
2 var myJSON = JSON.stringify(obj);
3 document.getElementById("demo").innerHTML = myJSON;

مشاهدهٔ نتیجه

شما می‌توانید مطالب بیشتری را در فصل آموزش JSON بیابید.

متد Date.now()

متد Date.now() زمان سپری شده از تاریخ صفر (یعنی یک ژانویه سال ۱۹۷۰ ساعت ۰۰:۰۰:۰۰ براساس UTC) را به صورت میلی ثانیه برمی‌گرداند.

مثال

var timInMSs = Date.now();

مشاهدهٔ نتیجه

متد Date.now() شبیه به متد Date است که برای شی فراهم شده‌است.

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

ویژگی متدهای دریافت کننده (به انگلیسی: Getters) و متدهای تنظیم کننده (به انگلیسی: Setters)

نسخه ES5 به شما این اجازه را می‌دهد که برای شی متدهایی با یک شیوه نوشتار که شبیه به ویژگی گرفتن (به انگلیسی: getter) یا تنظیم کردن (به انگلیسی: setting) یک ویژگی است، تعریف کنید.

این مثال یک دریافت کننده (به انگلیسی: getter) برای یک ویژگی با نام fullName تعریف کرده‌است:

مثال

 1 // Create an object:
 2 var person = {
 3   firstName: "John",
 4   lastName : "Doe",
 5   get fullName() {
 6     return this.firstName + " " + this.lastName;
 7   }
 8 };
 9 
10 // Display data from the object using a getter:
11 document.getElementById("demo").innerHTML = person.fullName;

مشاهدهٔ نتیجه

این مثال یک متد دریافت کننده (به انگلیسی: getter) و یک متد تنظیم کننده (به انگلیسی: setter) برای ویژگی زبان ایجاد می‌کند:

مثال

 1 var person = {
 2   firstName: "John",
 3   lastName : "Doe",
 4   language : "NO",
 5   get lang() {
 6     return this.language;
 7   },
 8   set lang(value) {
 9     this.language = value;
10   }
11 };
12 
13 // Set an object property using a setter:
14 person.lang = "en";
15 
16 // Display data from the object using a getter:
17 document.getElementById("demo").innerHTML = person.lang;

مشاهدهٔ نتیجه

این مثال از یک متد تنظیم کننده برای امن‌سازی به روز رسانی ویژگی زبان (به انگلیسی: language) با حروف بزرگ استفاده می‌کند.

 1 var person = {
 2   firstName: "John",
 3   lastName : "Doe",
 4   language : "NO",
 5   set lang(value) {
 6     this.language = value.toUpperCase();
 7   }
 8 };
 9 
10 // Set an object property using a setter:
11 person.lang = "en";
12 
13 // Display data from the object:
14 document.getElementById("demo").innerHTML = person.language;

مشاهدهٔ نتیجه

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

متدهای ویژگی های جدید شیء

متد Object.defineProperty() یک شیء متد جدید در ES5 است.

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

مثال

 1 // Create an Object:
 2 var person = {
 3   firstName: "John",
 4   lastName : "Doe",
 5   language : "NO",
 6 };
 7 
 8 // Change a Property:
 9 Object.defineProperty(person, "language", {
10   value: "EN",
11   writable : true,
12   enumerable : true,
13   configurable : true
14 });
15 
16 // Enumerate Properties
17 var txt = "";
18 for (var x in person) {
19   txt += person[x] + "<br>";
20 }
21 document.getElementById("demo").innerHTML = txt;

مشاهدهٔ نتیجه

مثال بعدی کدی مشابه دارد، با این تفاوت که این مثال ویژگی language را از enum گذاری محفوظ می‌دارد:

مثال

 1 // Create an Object:
 2 var person = {
 3   firstName: "John",
 4   lastName : "Doe",
 5   language : "NO",
 6 };
 7 
 8 // Change a Property:
 9 Object.defineProperty(person, "language", {
10   value: "EN",
11   writable : true,
12   enumerable : false,
13   configurable : true
14 });
15 
16 // Enumerate Properties
17 var txt = "";
18 for (var x in person) {
19   txt += person[x] + "<br>";
20 }
21 document.getElementById("demo").innerHTML = txt;

مشاهدهٔ نتیجه

این مثال برای تبدیل امن مقادیر بروز ویژگی language به مقادیری با حروف بزرگ یک متد تنظیم کننده (به انگلیسی: setter) و یک متد گرفتن داده (به انگلیسی: getter) تعریف کرده‌است:

مثال

 1 /// Create an Object:
 2 var person = {
 3   firstName: "John",
 4   lastName : "Doe",
 5   language : "NO"
 6 };
 7 
 8 // Change a Property:
 9 Object.defineProperty(person, "language", {
10   get : function() { return language },
11   set : function(value) { language = value.toUpperCase()}
12 });
13 
14 // Change Language
15 person.language = "en";
16 
17 // Display Language
18 document.getElementById("demo").innerHTML = person.language;

مشاهدهٔ نتیجه

ECMAScript 5 متدهای جدیدی به شیء در جاوا اسکریپت اضافه کرده‌است:

متدهای جدید شیء در ES5

 1 // Adding or changing an object property
 2 Object.defineProperty(object, property, descriptor)
 3 
 4 // Adding or changing many object properties
 5 Object.defineProperties(object, descriptors)
 6 
 7 // Accessing Properties
 8 Object.getOwnPropertyDescriptor(object, property)
 9 
10 // Returns all properties as an array
11 Object.getOwnPropertyNames(object)
12 
13 // Returns enumerable properties as an array
14 Object.keys(object)
15 
16 // Accessing the prototype
17 Object.getPrototypeOf(object)
18 
19 // Prevents adding properties to an object
20 Object.preventExtensions(object)
21 // Returns true if properties can be added to an object
22 Object.isExtensible(object)
23 
24 // Prevents changes of object properties (not values)
25 Object.seal(object)
26 // Returns true if object is sealed
27 Object.isSealed(object)
28 
29 // Prevents any changes to an object
30 Object.freeze(object)
31 // Returns true if object is frozen
32 Object.isFrozen(object)

می‌توانید مطالب بیشتری را در فصل شیء در ECMAScript5 می‌توانید بیابید.

دسترسی به ویژگی ها در رشته های متنی

متد charAt() یک کاراکتر را در موقعیت یا اندیس به خصوصی در یک رشته متنی برمی‌گرداند:

مثال

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

مشاهدهٔ نتیجه

نسخه ECMAScript 5 به شما ۵ حالت از دسترسی روی رشته‌های متنی را ارائه می‌دهد:

مثال

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

مشاهدهٔ نتیجه

نتیجه دسترسی به ویژگی‌ها روی یک رشته متنی می‌تواند کمی غیرقابل پیش‌بینی باشد.

<translate> نکته</translate>  نکته: در این‌باره می توانید در فصل متدهای داده‌های متنی و رشته‌ای مطالب بیشتری را بخوانید.

استفاده از ویرگول ها

ECMAScript 5 به شما این اجازه را می‌دهد که در تعریف‌های شی‌ها و آرایه‌ها از ویرگول , در آخرین عنصر استفاده کنید:

مثال شیء

1 person = {
2   firstName: "John",
3   lastName: " Doe",
4   age: 46,
5 }

مثال آرایه

1 points = [
2   1,
3   5,
4   10,
5   25,
6   40,
7   100,
8 ];

هشدار !!!

اینترنت اکسپلورر نسخه ۸ از هم فرو می‌پاشد یا اصطلاحاً Crash می‌کند.

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

اشیاء در جیسون

1 // Allowed:
2 var person = '{"firstName":"John", "lastName":"Doe", "age":46}'
3 JSON.parse(person)
4 
5 // Not allowed:
6 var person = '{"firstName":"John", "lastName":"Doe", "age":46,}'
7 JSON.parse(person)

آرایه ها در جیسون

1 // Allowed:
2 points = [40, 100, 1, 5, 25, 10]
3 
4 // Not allowed:
5 points = [40, 100, 1, 5, 25, 10,]

نوشتن رشته های متنی در چندین خط

ECMAScript 5 به شما اجازه می‌دهد که در صورتی که از \ در انتهای عبارات متنی خود استفاده کنید، آنها را در چندین خط بنویسید.

مثال

1 "Hello \
2 Dolly!";

مشاهدهٔ نتیجه

روش استفاده از \ به طور کامل پشتیبانی نمی‌شود.

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

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

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

مثال

1 "Hello " +
2 "Dolly!";

مشاهدهٔ نتیجه

استفاده از کلمات رزرو شده به عنوان نام ویژگی ها

ECMAScript 5 به شما اجازه می‌دهد که از کلمات رزرو شده برای نام ویژگی‌های شی استفاده کنید:

مثال شیء

var obj = {name: "John", new: "yes"}

مشاهدهٔ نتیجه

سازگاری مروگرها با ES5 (ECMAScript 5)

Chrome 23	IE10/Edge	Firefox 21	Safari 6	Opera 15
سپتامبر ۲۰۱۲	سپتامبر ۲۰۱۲	آوریل ۲۰۱۳	ژوئیه ۲۰۱۲	ژوئیه ۲۰۱۳

صفحهٔ بعد»

«صفحهٔ قبل