# مفاهیم JavaScript

تا این‌جا با HTML و CSS و کاربرد JavaScript در کار با DOM آشنا شدی. در اینجا با مفاهیم مهم زبان JavaScript آشنا می‌شی. هدف این داکیومنت درک مفاهیم ECMAScript 5 هست، بنابراین انتظار میره تمام تمرین‌ها رو با این نسخه از زبان انجام بدی.

# Data types and structures

• Data structures
• Types
• primitives methods
• Array
• Date

1. خروجی کد زیر چیست؟

typeof [];
typeof Array;
typeof {};

# Value vs reference

• Explaining Value vs. Reference in Javascript
• Javascript Passing by Value vs. Reference

1. خروجی کد زیر چیست؟

function test(o) {
  o.k1 = 2;
  return o;
}
var x = {k1: 1};
test(x); // ?
console.log(x); // ?

2. خروجی کد زیر چیست؟

function test(o) {
  o.k1 = 2;
  o = {k2: 3};
  return o;
}
var x = {k1: 1};
test(x); // ?
console.log(x); // ?

# Loose equality (==) vs strict equality (===)

• Comparison operators
• Equality comparison and sameness

# Coercion (Type Conversion)

• JavaScript type coercion explained

1. خروجی کدهای زیر چیست؟

• false' == true == !'false'
• 'foo' + + 'bar'
• ["alex", "sam"] + ["jon", "mary"]
• تفاوت {} + [] و [] + {} چیست؟
• !+[]
• [1] && []

# Scope and Context

• Understanding Scope in JavaScript

1. خروجی کد زیر چیست؟

var phrase = "Hello";
if (true) {
  var user = "John";

  function sayHi() {
    alert(phrase + "," + user);
  }
}
sayHi();

# Hoisting

• Hoisting

1. خروجی کد زیر چیست؟

var foo = 1;

(function() {
  console.log(foo); 
  var foo = 2;
  var baz = 3;
  bar = 4;
})();

console.log(foo);
console.log(bar); 
console.log(baz);

# Callbacks

• Callbacks

# Event loop

• MDN
• JavaScript Event Loop Explained

1. خروجی کد زیر چیست؟

function printing() {
  console.log(1); 
  setTimeout(function() { console.log(2); }, 1000); 
  setTimeout(function() { console.log(3); }, 0); 
  console.log(4);
}
printing();

# Closure

• MDN
• I never understood JavaScript closures
• Closure

1. تابع keep رو جوری بنویس که برای هر بار اجرای keepPow با مقدار یکسان، تابع pow تنها یک‌بار فراخوانی شود. به این صورت که اگر مقداری که تابع keepPow قبلاً با آن صدا زده شده بود، با مقدار ورودی جدید یکسان باشد، تابع keepPow مقدار خروجی قبلی را بدون صدا زدن تابع pow برگردان

function pow(x) {
  return x * x;
}
var keepPow = keep(pow);
keepPow(10);
keepPow(10);
keepPow(10);

2. تابع argsLimiter رو بنویس. تابع callback فقط n ورودی اول رو خواهد داشت.

var argsLimited = argsLimiter(callback, n);

# this keyword

• MDN
• Understanding the “this” keyword in JavaScript

# new keyword and prototypal inheritance

• Prototypal inheritance
• Constructor, operator "new"
• F.prototype
• Inheritance & the prototype chain
• Prototypal Inheritance in JavaScript
• Details of the Object Model

1. فرض کن توی یه برنامه سه نوع کاربر داریم: user، admin و manager.ا manager از نوع user و admin از نوع managerه. user نام، نام‌خانوادگی، شماره ملی و تاریخ عضویت داره.

# IIFE

• IIFE

# تمرین

1. تابعی بنویس که یه آرایه ۱۰۰ خونه‌ای از توابعی باشه که وقتی خونه iام رو صدا می‌زنی، عدد i رو لاگ کنه:

var loggerArr = createLoggerArr();
loggerArr[0]()   //LOG: 0
loggerArr[74]()  //LOG: 74
loggerArr[120]() //TypeError: a[120] is not a function.

2. تابع calculate رو طوری بنویس که کد زیر کار کنه:

function calculate() {
  /* code here */
}
calculate('+')(1)(2); // 3
calculate('*')(2)(3); // 6

3. ۳. تابع callOnceAfter رو طوری بنویس که یه callback و یه t به میلی‌ثانیه می‌گیره. تابعی برمی‌گردونه که t میلی‌ثانیه بعد از آخرین صدا زده‌شدن، callback رو صدا می‌کنه:

var logger = callOnceAfter(function(arg) { console.log(arg) }, 200);
logger('first');
logger('second');
logger('last');   //LOG: last

4.در کد زیر موارد خواسته شده را پیاده‌سازی کن:

var john = new Person('John');

الف) Person رو طوری بنویس که یه ورودی بگیره و آبجکتی ایجاد کنه که پراپرتی name‌اش برابر اون وررودی باشه. john.name === 'John'; // true

ب) به Person یه متد dumbSayHi اضافه کن که مقدار name هر آبجکتی که ازش ساخته میشه رو در کنسول چاپ کنه. john.dumbSayHi(); //LOG: John

ج) یه متد دیگه به اسم sayHi اضافه کن که اگر بارها پشت سر هم فراخوانی شود، تنها بارِ آخر پس از ۲۰۰ میلی‌ثانیه مقدار name رو چاپ کنه. (با استفاده از تمرین شماره ۲ و قسمت «ب» این تمرین، پیاد‌ه‌سازی کن. اگر نیاز هست تابع callOnceAfter رو تغییر بده)

5. فرض کن کد HTML زیر رو داریم:

<form>
  <input type="text" name="name">
  <input type="text" name="surname">
  <input type="text" name="national_no">
</form>

می‌خوایم روی هر فیلد یه validation بذاریم که در صورت خالی بودن بعد از جابه‌جایی از اون فیلد، نام فیلد و یه خطا توی console چاپ کنه و border فیلد قرمز بشه.

for(var i = 0; i < inputs.length; i += 1) {
  var input = inputs[i];
  input.addEventListener(?, ?);
}

6. فرض کن یه سیستم notification می‌خوایم بنویسیم. ما یه notification center داریم که همه‌ی notificationها اون‌جا مدیریت می‌شوند.

   • notification باید type ،text و id داشته باشه (اگر چیز دیگه‌ای هم نیازه اضافه کن).
   • وقتی یک notification به notification center می‌آد باید ذخیره بشه.
   • هم‌چنین notification یه تابع route داره که با اون می‌شه اون رو به جای مناسب فرستاد (یه پیام توی console چاپ می‌کنه).
   • notification center یه تابع receive داره که یک یا چند تا notification به عنوان ورودی می‌گیره و یه تابع manage داره که هر وقت فراخوانی بشه notificationهای ۱۰ ثانیه پیش رو می‌فرسته.

7. تابع bind رو بنویس.

var bound = bind(fn, context);

8. کد Stack رو بنویس که دو تا تابع داشته باشه با یکی بشه به بالای صف عضو اضافه کرده، اون یکی از بالا یکی برداره و برگردونه. همچنین Queue رو بنویس که enqueue و dequeue داشته باشه با اولی به انتهای صف عنصر اضافه بشه و دومی از جلوی صف یک عنصر برگردونه.