JavaScript:ECMAScript 5 - JavaScript 5

از ویکی کد
پرش به ناوبری پرش به جستجو
دورهٔ آموزشی جاوااسکریپت
Javascript.jpg
Tutorial
۱آموزش جاوااسکریپت
۲مقدمه‌ای بر جاوااسکریپت
۳JavaScript:قوانین و اصول اولیه زبان جاوااسکریپت
۴JavaScript:خروجی جاوااسکریپت
۵JavaScript:عبارت‌ها در جاوااسکریپت
۶JavaScript:شیوهٔ نوشتن (Syntax) عبارات یا دستورات در جاوااسکریپت
۷JavaScript:نظرات یا کامنت‌ها (Comments) در جاوااسکریپت
۸JavaScript:متغیرها در جاوااسکریپت
۹JavaScript:عملگرهای جاوااسکریپت
۱۰JavaScript:عملگرهای ریاضی در جاوااسکریپت
۱۱JavaScript:عملگرهای مقداردهی در جاوااسکریپت
۱۲JavaScript:انواع داده‌ها در جاوااسکریپت
۱۳JavaScript:توابع در جاوااسکریپت
۱۴JavaScript:اشیاء (object) در جاوااسکریپت
۱۵JavaScript:رویدادها در جاوااسکریپت
۱۶JavaScript:رشته‌های متنی (string) در جاوااسکریپت
۱۷JavaScript:متدهای نوع داده متنی یا رشته‌ای در جاوااسکریپت
۱۸JavaScript:اعداد در جاوااسکریپت
۱۹JavaScript:متدهای داده‌های عددی در جاوااسکریپت
۲۰JavaScript:آرایه‌ها در جاوااسکریپت
۲۱JavaScript:متدهای آرایه در جاوااسکریپت
۲۲JavaScript:مرتب‌سازی آرایه‌ها در جاوااسکریپت
۲۳JavaScript:متدهای پیمایش آرایه در جاوااسکریپت
۲۴JavaScript:اشیاء تاریخ و زمان در جاوااسکریپت
۲۵JavaScript:فرمت‌های تاریخ و زمان در جاوااسکریپت
۲۶JavaScript:متدهای دریافت تاریخ و زمان در جاوااسکریپت
۲۷JavaScript:متدهای تنظیم زمان و تاریخ در جاوااسکریپت
۲۸JavaScript:شی ریاضی (Math) در جاوااسکریپت
۲۹JavaScript:ایجاد عدد تصادفی در جاوااسکریپت
۳۰JavaScript:مقادیر بولین (Booleans) در جاوااسکریپت
۳۱JavaScript:عملگرهای منطقی و مقایسه‌ای در جاوااسکریپت
۳۲JavaScript:ساختار if else و else if در جاوااسکریپت
۳۳JavaScript:تکه کد Switch در جاوا اسکریپت
۳۴JavaScript:حلقه For در جاوااسکریپت
۳۵JavaScript:حلقه While در جاوااسکریپت
۳۶JavaScript:کلمات کلیدی Break و Continue در جاوااسکریپت
۳۷JavaScript:تبدیل نوع داده‌ها در جاوااسکریپت
۳۸JavaScript:عملیات‌های بیتی در جاوااسکریپت
۳۹JavaScript:عبارات با قاعده در جاوااسکریپت
۴۰JavaScript:خطاها در جاوااسکریپت - رخ دادن خطا و رفع آن
۴۱JavaScript:Scope در جاوااسکریپت
۴۲JavaScript:Hoisting یا جا به جایی کدها در جاوااسکریپت
۴۳JavaScript:استفاده از مد یا حالت سخت‌گیرانه (use strict) در جاوااسکریپت
۴۴JavaScript:کلمه کلیدی This در جاوااسکریپت
۴۵JavaScript:کلمه کلیدی Let در جاوااسکریپت
۴۶JavaScript:ثابت‌ها در جاوااسکریپت
۴۷JavaScript:تعریف توابع به صورت پیکان
۴۸JavaScript:کلاس‌ها در جاوااسکریپت
۴۹JavaScript:اشکال‌زدایی در جاوااسکریپت
۵۰JavaScript:راهنمای استایل و استانداردهای کدنویسی در جاوااسکریپت
۵۱JavaScript:بهترین تمرینات جاوااسکریپت
۵۲JavaScript:اشتباهات رایج در برنامه‌نویسی جاوااسکریپت
۵۳JavaScript:کارایی در جاوااسکریپت
۵۴JavaScript:کلمات رزرو شده در جاوااسکریپت
۵۵JavaScript:ورژن‌های جاوااسکریپت
۵۶JavaScript:ECMAScript 5 - JavaScript 5
۵۷JavaScript:ECMAScript 6 - ECMAScript 2015
۵۸JavaScript:جیسون (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"تعریف می‌کند که کدهای جاوااسکریپت می‌بایست در حالت سخت گیرانه یا "use strict" اجرا شود. با حالت سخت گیرانه برای مثال شما نمی‌توانید از متغیرهای تعریف نشده استفاده کنید.


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

متد ()String.trim

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

مثال

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

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

متد ()Array.isArray

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

مثال

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

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

متد ()Array.forEach

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

مثال

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value) {
  txt = txt + value + "<br>";
}

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

متد ()Array.map

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

مثال

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value) {
  return value * 2;
}

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

متد ()Array.filer

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

مثال

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value) {
  return value > 18;
}

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

متد ()Array.reduce

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

مثال

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value) {
  return total + value;
}

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

متد ()Array.reduceRight

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

مثال

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);

function myFunction(total, value) {
  return total + value;
}

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

متد ()Array.every

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

مثال

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

function myFunction(value) {
  return value > 18;
}

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

متد ()Array.some

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

مثال

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.some(myFunction);

function myFunction(value) {
  return value > 18;
}

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

متد ()Array.indexOf

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

مثال

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

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

متد ()Array.lastIndexOf

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

مثال

var fruits = ["Banana", "Orange", "Apple", "Mango"];
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);


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

مثال

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

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

متد ()Date.now

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

مثال

var timInMSs = Date.now();

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

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

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

ورژن ES5 به شما این اجازه را می‌دهد که برای شی متدهایی با یک شیوه نوشتار که شبیه به ویژگی گرفتن یا Getter یا تنظیم کردن یا Setting یک ویژگی است، تعریف کنید.

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

مثال

// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.fullName;

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

مثال

var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO",
  get lang() {
    return this.language;
  },
  set lang(value) {
    this.language = value;
  }
};

// Set an object property using a setter:
person.lang = "en";

// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.lang;

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

var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO",
  set lang(value) {
    this.language = value.toUpperCase();
  }
};

// Set an object property using a setter:
person.lang = "en";

// Display data from the object:
document.getElementById("demo").innerHTML = person.language;

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

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

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

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

مثال

// Create an Object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO",
};

// Change a Property:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : true,
  configurable : true
});

// Enumerate Properties
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

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

مثال

// Create an Object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO",
};

// Change a Property:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : false,
  configurable : true
});

// Enumerate Properties
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

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

مثال

/// Create an Object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO"
};

// Change a Property:
Object.defineProperty(person, "language", {
  get : function() { return language },
  set : function(value) { language = value.toUpperCase()}
});

// Change Language
person.language = "en";

// Display Language
document.getElementById("demo").innerHTML = person.language;

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

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

// Adding or changing an object property
Object.defineProperty(object, property, descriptor)

// Adding or changing many object properties
Object.defineProperties(object, descriptors)

// Accessing Properties
Object.getOwnPropertyDescriptor(object, property)

// Returns all properties as an array
Object.getOwnPropertyNames(object)

// Returns enumerable properties as an array
Object.keys(object)

// Accessing the prototype
Object.getPrototypeOf(object)

// Prevents adding properties to an object
Object.preventExtensions(object)
// Returns true if properties can be added to an object
Object.isExtensible(object)

// Prevents changes of object properties (not values)
Object.seal(object)
// Returns true if object is sealed
Object.isSealed(object)

// Prevents any changes to an object
Object.freeze(object)
// Returns true if object is frozen
Object.isFrozen(object)

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

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

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

مثال

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

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

مثال

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


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

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

مثال شیء

person = {
  firstName: "John",
  lastName: " Doe",
  age: 46,
}

مثال آرایه

points = [
  1,
  5,
  10,
  25,
  40,
  100,
];


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

// Allowed:
var person = '{"firstName":"John", "lastName":"Doe", "age":46}'
JSON.parse(person)

// Not allowed:
var person = '{"firstName":"John", "lastName":"Doe", "age":46,}'
JSON.parse(person)

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

// Allowed:
points = [40, 100, 1, 5, 25, 10]

// Not allowed:
points = [40, 100, 1, 5, 25, 10,]

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

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

مثال

"Hello \
Dolly!";


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

مثال

"Hello " +
"Dolly!";

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

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

مثال شیء

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

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

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

منابع آموزشی