Learn X in Y minutes

جاوااسکریپت توسط برندن ایش از شرکت NetScape در سال 1995 ساخته شد. در ابتدا به عنوان یک زبان اسکریپت‌نویسی در کنار جاوا (که برای موارد پیچیده تر در طراحی وب در نظر گرفته میشد) مورد استفاده بود، ولی در پی نفوذ بسیار گسترده آن در وب و همچنین پشتیبانی پیش-ساخته آن در مرورگر ها، امروزه به مراتب بیشتر از جاوا در برنامه نویسی سمت-کاربر در وب به کار برده میشود. با این حال جاوااسکریپت فقط محدود به مرورگر های وب نمیشود. Node.js پروژه ایست که یک نسخه ی مستقل از اجراکننده ی موتور جاوااسکریپت V8 از گوگل کروم را در اختیار قرار میده که هر روزه درحال محبوب تر شدن نیز هست.

قدر دان نظرات سازنده شما هستم! شما میتوانید از طریق زیر با من تماس بگیرید:

@ExcitedLeigh, or [email protected].

// توضیحات همانند C هستند. توضیحات یک خطی با دو خط مورب شروع میشوند.,

/* و توضیحات چند خطی با خط مورب-ستاره شروع، و با ستاره-خط مورب ختم میشوند */

// Comments are like C. Single-line comments start with two slashes,
/* and multiline comments start with slash-star
   and end with star-slash */

گزاره ها را میتوانید با نقطه ویرگول پایان دهید ;

doStuff();

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

وقتی که خط جدیدی شروع میشود. مگر در موارد خاص.

doStuff()

برای اینگه درگیر آن موارد خاص نشویم، در اینجا از اون ها

صرف نظر میکنیم.

1. اعداد، رشته ها و عملگرها

جاوااسکریپت فقط یک نوع عدد دارد و آن عدد اعشاری 64 بیتی IEEE 754 است.

نترسید! و نگران اعداد صحیح نباشید! این اعداد اعشاری دارای 54 بیت مانتیس هستند که قابلیت ذخیره ی

دقیق اعداد صحیح تا مقدار تقریبی 9x10¹⁵ را دارند.

3; // = 3
1.5; // = 1.5

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

1 + 1; // = 2
8 - 1; // = 7
10 * 2; // = 20
35 / 5; // = 7

و این حتی شامل تقسیم هم میشود.

5 / 2; // = 2.5

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

به عدد صحیح علامت دار *تا 32 بیت* تبدیل میشود.

1 << 2; // = 4

عملیات داخل پرانتز تقدم بالاتری دارند.

(1 + 3) * 2; // = 8

سه مقدار خاص وجود دارند که در واقع مقادیر عددی نیستند:

Infinity; // result of e.g. 1/0
-Infinity; // result of e.g. -1/0
NaN; // result of e.g. 0/0

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

true;
false;

رشته ها با آپستروف و یا گیومه تعریف میشوند.

'abc';
"Hello, world";

و منفی کردن شرط با علامت تعجب

!true; // = false
!false; // = true

تساوی دو مقدار با ==

1 == 1; // = true
2 == 1; // = false

و عدم تساوی با !=

1 != 1; // = false
2 != 1; // = true

و سایر عمیلات های مقایسه

1 < 10; // = true
1 > 10; // = false
2 <= 2; // = true
2 >= 2; // = true

رشته ها با علامت جمع به یکدیگر متصل میشوند

"Hello " + "world!"; // = "Hello world!"

و با علامت برگتر و یا کوچکتر با یکدیگر مقایسه میشوند.

"a" < "b"; // = true

نوع متغیر برای عملیات مقایسه تطبیق داده میشود

"5" == 5; // = true

مگر اینکه از سه مساوی استفاده شود!

"5" === 5; // = false

با استفاده از charAt میتوانید به کارکتر های یک رشته دسترسی پیدا کنید.

"This is a string".charAt(0);

از null برای نشان دادن عمدی مقدار هیج استفاده میشود.

و از undefined برای نشان دادن اینکه در حال حاظر مقدار موجود نمی باشد، هرچند خود undefined یک مقدار محسوب میشود.

null; // used to indicate a deliberate non-value
undefined; // used to indicate a value is not currently present (although undefined
           // is actually a value itself)

false, null, undefined, NaN, 0 و “” مقدار نادرست و هر چیز دیگر مقدار درست طلقی میشوند.

توجه داشته باشید که 0 نادرست و “0” درست طلقی میشوند حتی در عبارت 0==“0”.

2. متغیر ها، آرایه ها و شئ ها

متغیر ها با کلید واژه var تعریف میشوند. اشیا در جاوااسکریپت دارای نوع پویا هستند،

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

برای مقدار دهی از علامت مساوی استفاده میشود.

var someVar = 5;

اگر کلید واژه var را قرار ندهید، هیچ خطایی دریافت نخواهید کرد…

someOtherVar = 10;

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

متغیر هایی که تعریف شده ولی مقدار دهی نشوند، دارای مقدار undefined خواهند بود.

var someThirdVar; // = undefined

برای اعمال عملگر های محاسباتی، میانبر هایی وجود دارند:

someVar += 5; // equivalent to someVar = someVar + 5; someVar is 10 now
someVar *= 10; // now someVar is 100

حتی از این هم کوتاهتر برای اضافه یا کم کردن یک عدد با مقدار یک.

someVar++; // now someVar is 101
someVar--; // back to 100

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

var myArray = ["Hello", 45, true];

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

نمایه ی آرایه از صفر شروع میشود.

myArray[1]; // = 45

آرایه ها ناپایدار و دارای طول قابل تغییر هستند

myArray.push("World");
myArray.length; // = 4

در جاوااسکریپت، اشیاء چیزی شبیه دیکشنری و یا نقشه در زبان های دیگر هستند:

یک مجموعه ی نامرتب از جفت های کلید-مقدار.

var myObj = {key1: "Hello", key2: "World"};

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

var myObj = {myKey: "myValue", "my other key": 4};

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

myObj["my other key"]; // = 4

…و یا از طریق نقطه در صورتی که اسم عضو مورد نظر اسم معتبری برای اسم گزاری باشد.

myObj.myKey; // = "myValue"

اشیاء ناپایدار و قابل اضافه کردن عضو جدید هستند.

myObj.myThirdKey = true;

اگر سعی کنید عضوی را که وجود ندارد استخراج کنید، مقدار undefined را دریافت خواهید کرد.

myObj.myFourthKey; // = undefined

3. منطق و ساختار کنترل

ساختار if به شکلی که انتظارش را دارید کار میکند.

var count = 1;
if (count == 3){
    // evaluated if count is 3
} else if (count == 4) {
    // evaluated if count is 4
} else {
    // evaluated if it's not either 3 or 4
}

و همینطور حلقه while

while (true) {
    // An infinite loop!
}

حلقه do-while شبیه while است با این تفاوت که حداقل یکبار اجرا میشود.

var input
do {
    input = getInput();
} while (!isValid(input))

حلقه for همانند زبان C و جاوا کار می کند.

مقدار دهی اولیه; شرط ادامه; چرخش حلقه

for (var i = 0; i < 5; i++){
    // will run 5 times
}

عملگر && و || به ترتیب “و” و “یا” ی منطقی هستند.

if (house.size == "big" && house.colour == "blue"){
    house.contains = "bear";
}
if (colour == "red" || colour == "blue"){
    // colour is either red or blue
}

از || همچنین میتوان برای تعیین مقدار پیشفرض استفاده کرد.

var name = otherName || "default";

4. توابع و مفاهیم گستره و بستار

توابع در جاوااسکریپت با استفاده از کلیدواژه ی function تعریف میشوند.

function myFunction(thing){
    return thing.toUpperCase();
}
myFunction("foo"); // = "FOO"

توابع در جاوااسکریپت نوعی شئ پایه محسوب میشوند، بنابر این می توانید آنها را به اشیاء مختلف

اضافه کنید و یا به عنوان پارامتر به توابع دیگر ارسال کنید.

- برای مثال وقتی که با یک رویداد کار میکنید.

function myFunction(){
    // this code will be called in 5 seconds' time
}
setTimeout(myFunction, 5000);

توجه کنید که setTimeout تابعی تعریف شده در جاوااسکریپت نیست، ولی مرورگر ها و node.js از آن پشتیبانی میکنند.

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

میتوانید آنرا به صورت بینام تعریف کنید.

setTimeout(function(){
    // this code will be called in 5 seconds' time
}, 5000);

توابع دارای محدوده ی متغیر های خود هستند.

بر خلاف دیگر ساختار ها - مانند if

if (true){
    var i = 5;
}
i; // = 5 - not undefined as you'd expect in a block-scoped language

به همین دلیل الگوی خاصی به نام “تابعی که بلافاصله صدا زده میشود” پدید آمده

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

(function(){
    var temporary = 5;
    // We can access the global scope by assiging to the 'global object', which
    // in a web browser is always 'window'. The global object may have a
    // different name in non-browser environments such as Node.js.
    window.permanent = 10;
})();
temporary; // raises ReferenceError
permanent; // = 10

یکی از برترین ویژگی های جاوااسکریپت مفهومی با نام بستار است

بدین شکل که اگر تابعی درون تابع دیگری تعریف شود، تابع درونی به تمام متغیر های تابع خارجی دسترسی

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

function sayHelloInFiveSeconds(name){
    var prompt = "Hello, " + name + "!";
    function inner(){
        alert(prompt);
    }
    setTimeout(inner, 5000);
    // setTimeout is asynchronous, so the sayHelloInFiveSeconds function will
    // exit immediately, and setTimeout will call inner afterwards. However,
    // because inner is "closed over" sayHelloInFiveSeconds, inner still has
    // access to the 'prompt' variable when it is finally called.
}
sayHelloInFiveSeconds("Adam"); // will open a popup with "Hello, Adam!" in 5s

5. دیگر اشیاء، سازنده ها و پیش‌نمونه ها

اشیاء میتوانند تابع داشته باشند.

var myObj = {
    myFunc: function(){
        return "Hello world!";
    }
};
myObj.myFunc(); // = "Hello world!"

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

از طریق کلید واژه ی this دسترسی داشته باشد.

myObj = {
    myString: "Hello world!",
    myFunc: function(){
        return this.myString;
    }
};
myObj.myFunc(); // = "Hello world!"

اینکه مقدار this چه باشد بستگی به این دارد که تابع چگونه صدا زده شود

نه اینکه تابع کجا تعریف شده است.

بنابر این تابع بالا اگر بدین شکل صدا زده شود کار نخواهد کرد

var myFunc = myObj.myFunc;
myFunc(); // = undefined

به همین شکل، تابعی که در جای دیگر تعریف شده را میتوانید به یک شی الحاق کنید

و بدین ترتیب تابع میتواند به مقادیر درون شی از طریق this دسترسی پیدا کند.

var myOtherFunc = function(){
    return this.myString.toUpperCase();
}
myObj.myOtherFunc = myOtherFunc;
myObj.myOtherFunc(); // = "HELLO WORLD!"

اگر تابعی با کلید new صدا زده شوند، شی جدیدی ایجاد شده و تابع در گستره ی آن صدا زده میشود.

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

var MyConstructor = function(){
    this.myNumber = 5;
}
myNewObj = new MyConstructor(); // = {myNumber: 5}
myNewObj.myNumber; // = 5

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

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

اجرا کننده ی برنامه در لیست پیش نمونه به دنبال آن تابع خواهد گشت

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

طریق عضو جادویی __proto__ میدهند.

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

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

var myObj = {
    myString: "Hello world!",
};
var myPrototype = {
    meaningOfLife: 42,
    myFunc: function(){
        return this.myString.toLowerCase()
    }
};
myObj.__proto__ = myPrototype;
myObj.meaningOfLife; // = 42

این موضوع در مورد توابع نیز صدق میکند.

myObj.myFunc(); // = "hello world!"

اگر عضو مورد نظر در پیش نمونه ی شی یافت نشود، پیش نمونه ی پیش نمونه جستجو شده و الی آخر

myPrototype.__proto__ = {
    myBoolean: true
};
myObj.myBoolean; // = true

توجه داشته باشید که پیش نمونه ها کپی نمی شوند و هر شی جدید به پیش نمونه موجود اشاره میکند

بدین ترتیب اگر تابعی به پیش نمونه اضافه شود تمامی اشیاء میتوانند به آن دسترسی پیدا کنند.

myPrototype.meaningOfLife = 43;
myObj.meaningOfLife; // = 43

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

ولی دو راه برای ارائه پیش نمونه برای اشیاء جدید وجود دارد.

اولی وقتیست که از تابع Object.create استفاده میشود - که اخیرا به زبان اضافه شده است و بنابراین بر روی همه ی پیاده سازی های آن وجود ندارد.

var myObj = Object.create(myPrototype);
myObj.meaningOfLife; // = 43

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

سازنده ها دارای عضوی با نام prototype هستند. این پیش نمونه ی خود سازنده نیست

بلکه پیش نمونه ایست که به تمامی اشیاء ساخته شده توسط این سازنده الحاق میشود.

MyConstructor.prototype = {
    myNumber: 5,
    getMyNumber: function(){
        return this.myNumber;
    }
};
var myNewObj2 = new MyConstructor();
myNewObj2.getMyNumber(); // = 5
myNewObj2.myNumber = 6
myNewObj2.getMyNumber(); // = 6

رشته ها و سایر سازنده های پیش ساخته ی زبان نیز دارای این ویژگی هستند.

var myNumber = 12;
var myNumberObj = new Number(12);
myNumber == myNumberObj; // = true

به جز این که این سازنده ها دقیقا مانند سازنده های دیگر نیستند.

typeof myNumber; // = 'number'
typeof myNumberObj; // = 'object'
myNumber === myNumberObj; // = false
if (0){
    // This code won't execute, because 0 is falsy.
}

ولی به هر حال هم اشیاء عادی و هم اشیاء پیش ساخته هر دو در داشتن پیش نمونه مشترک هستند

بنابر این شما میتوانید ویژگی و تابع جدیدی به رشته ها - به عنوان مثال - اضافه کنید.

گاها به از این خاصیت با عنوان پلی فیل و برای اضافه کردن ویژگی های جدید به مجموعه ای از اشیاء فعلی زبان استفاده میشود

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

String.prototype.firstCharacter = function(){
    return this.charAt(0);
}
"abc".firstCharacter(); // = "a"

برای مثال، پیشتر اشاره کردیم که Object.create در نسخه های جدید پشتیبانی نشده است

ولی میتوان آن را به صورت پلی فیل استفاده کرد.

if (Object.create === undefined){ // don't overwrite it if it exists
    Object.create = function(proto){
        // make a temporary constructor with the right prototype
        var Constructor = function(){};
        Constructor.prototype = proto;
        // then use it to create a new, appropriately-prototyped object
        return new Constructor();
    }
}

منابع دیگر

The Mozilla Developer Network

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

از آنجایی که این منبع یک ویکی میباشد همانطور که مطالب بیشتری یاد میگیرید میتوانید به دیگران نیز در یادگیری آن کمک کنید.

MDN’s A re-introduction to JavaScript

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

در حالی که در این منبع میتوانید بیشتر از کاربرد آن در صفحات وب آشنایی پیدا کنید.

Javascript Garden

راهنمای دقیقی از قسمت های غیر ملموس زبان.

اضافه بر این در ویرایش این مقاله، قسمت هایی از سایت زیر مورد استفاده قرار گرفته است.

Louie Dinh’s Python tutorial on this site, and the JS Tutorial on the Mozilla Developer Network.

Got a suggestion? A correction, perhaps? Open an Issue on the Github Repo, or make a pull request yourself!

Originally contributed by Leigh Brenecki, and updated by 1 contributor.