خلاصه مطالب فصل جاوااسکریپت متوسط ( مرتب شده )

Best practices‌ها : بهترین روش هایی که در طول کد نویسی در یک زبان تجربه شده و به اشتراک گزاشته شده است و معمولا با چند هدف کلی میان و به اشتراک گزاشته می‌شوند که در ابتدا برای کاهش باگ‌ها و خطر ایجاد یک باگ در کد و دوم افزایش پرفورمنس و کاربری یک کد و سوم خوانایی یک کد

1 - اگر قرار هست که ما بیایم و یک مقدار ثابتی رو در داخل جایی بیایم و بریزیم و یک متغیر بریزیم و ازش استفاده بکنیم بهتر هستش که بیایم و از const‌ها استفاده کنیم چون مواردی هستند که از اون استفاده میکنیم و تغیری نمیکنن و نیازی به تغیر ندارند

2 - اگر مطمئن نیستین که متغیری که میخاهیم تعریف بکنیم نیازی که به صورت گلوبال تعریف بشود یا بحث هویستت در آن استفاده شود از کلمه var استفاده نکنیم و به جاش از let استفاده بکنیم و از var موقعی بیایم و استفاده بکنیم که می‌خاهیم یک متغیربه صورت گلوبال به وجود بیاریم

3 - هر موقعی خواستیم بیایم و از یک object استفاده بکنیم بهتر هستش به جای استفاده از new object با استفاده از { } بیایم و اون رو تولید بکنیم این نکته پیرامون آرایه‌ها هم هستش

4 - اگر قرار هست که بیایم و یک پراپرتی به یک object اضافه بکنیم و نام اون پراپرتی داخل یک متغیر دیگه هست یا توسط یک فانکشن دیگه بازگشت داده می‌شود نیایم واون رو در خارج شی امون تعریف کنیم و بعد اون رو attach کنیم به شی امون بلکه از computed property‌ها استفاده بکنیم

// به شیوه یزر استفاده نکنیم 
const obj = {   id : 5,   name: 'sdfdsfds' }
obj[getKey('enable')] = true;
// به این شیوه استفاده بکنیم 
const obj = {   id : 5,   name: 'sdfdsfds'
[getKey('enable')] = true
}

5 - اگر قرار شد که ما بیایم و از یک تابع در داخل object استفاده بکنیم به جای اینکه بیایم و نام فانکشت رو بنویسیم و بعد یک تابع رو به اون assign بکنیم به شیوه زیر .. ema d: functio بیایم و تابع رو به همراه نامش در داخل object امون تعریف اش بکنیم ( ) emadn

6 - اگر نیاز نیست اطراف نام پراپرتی‌های یک object از دابل کوشن یا سینگل کوتشن استفاده بکنیم استفاده نکنید دابل یا سینگل کوتشن‌ها برای کلمه هایی هست که از دو قسمت تشکیل شده اند

7 - وقتی ما در داخل object مقادیر shorthan property داریم همون مقادیر رو بیایم و در داخل آبجکت امون بزاریم ولی در اول پراپرتی هامون بیایم و قرارشون بدیم ( استفاده از متغیر‌های const )

8 - وقتی که میخایم بیایم و یک آرایه رو در داخل یک متغیر دیگه کپی بکنیم از spreads ها استفاده بکنیم که مقادیر داخل یک آرایه رو میشکوند به مقادیر داخلش

const itemCopy = [... items];

9 - هر موقع خواستیم بیایم و از یک iterable object یک آرایه رو بسازیم خوب است که یا از تابع ()Array.from استفاده بکنیم یا هم از spread‌ها استفاده بکنیم بهترین اش همون راه حل دومی هستش

iterable object ‌ها object هستند که فانکشن‌های و iterable و next در داخل آن‌ها تعریف شده است و ما می‌توانیم مقادیر اون object رو روشون یک حلقه یا iterable داشته باشیم و بتوانیم آن هارو بخونیم

10 - در هنگام کار با رشته هایی که در داخل اشون یک متغیر رو دارند بهتر هستش که بیایم و از template string‌ها استفاده بکنیم

gunction sayHi(name) { 
  return ` How are you , ${name}? ` ;
  }

// good function handlethings(ops = {}){ } // bad function handlethings(ops){ ops = ops || {} } // ایراد function testFunc(a){ a = a || 1 ; console.log(a); } testFunc(0); که به جای یک مقدار 1 رو برامون بر می‌گردوند

const foo = a ? a : b ; const foo = a || b ; جایگزین بالا //////////////////////////////////////////// const bar = c ? true : false ; const bar = !!c ; جایگزین بالا //////////////////////////////////////////// const baz = c ? false : true ; const baz = !c; جایگزین بالا

let testObject = { name : 'mehrdad' , list : [1,2,3,4,5] , testFunc : function(){ console.log(this.name); this.list.forEach(function(elem){ console.log(this) }) } } که برای حل این مشکل که در کال بک به گلوبال اشاره میکنددو تا ره حل هست یکی کافی است که بیایم و در خط بالای اون به این شکل استفاده بکنیم //let myObjThis = this; یک راه دسترسی به این کشل هست

alert(document.body instanceof HTMLBodyElement); // true alert(document.body instanceof HTMLElement); // true alert(document.body instanceof Element); // true alert(document.body instanceof Node); // true alert(document.body instanceof EventTarget); // true

elem.hasAttribute( name ) ===> check for existence elem.getAttribute( name ) ===> gets the value elem.setAttribute( name,value ) ===> set the value elem.removeAtribute( name ) ===> removes the attribute

mydiv.classList ==> return Array Class mydiv.classList.add mydiv.classList.remove mydiv.classList.toggle mydiv.classList.contains mydiv.style mydiv.computedStyle تمامی استایل هارو نشون میدهد و بهتر هستش

let centerX = document.documentElement.clientwidth / 2; let centerY = document.documentElement.clientHeight / 2; ket elem = document.elemntFromPoint(centerX,centerY); elem.style.background = "red"; alert(elem.tagName);

document.onmousemove = function(event){ event = event || window.event; if(event.pageX == null && event.clientX !== null){ event.pageX = event.clientX + document.body.scrollLeft; event.pageY = event.clientY+ document.body.scrollTop; } let hoveredElem = document.elementFromPoint(event.pageX,event.pageY) if(hoveredElem.tagName != 'BODY'){ hoveredElem.style.backgroundColor = 'gray'; } }

function leaved (event){ event = event || window.event; event.target.style.background = ''; } for(let elem of document.body.childNodes){ if(elem instanceof Elemnt){ elem.onmouseleave = leaved } }

JSON.stringify() میاد و یک شی یا یک آرایه رو میگیره و تبدیل به جی سون میکنه JSON.parse(text) یک جی سون رو میگیره واون رو تبدیل به یک آرایه یا آبجکت میکنه

برای به دست آوردن عرض var w = window.innerWidth; document.documentElement.clientWidth; document.body.clientWidth; برای به دست آوردن طول var w = window.innerHeight; document.documentElement.clientHeight; document.body.clienHeight;

const fg =document.querySelector('.foreground'); const mg =document.querySelector('.middlegroup'); const bg =document.querySelector('.background'); const title =document.querySelector('.firstpage h1'); const FIRST_PAGE_MAX_SCROLL = 500; const FIRST_TRANS_MIN = 400; const FIRST_TRANS_MAX = 600; const SECONDPAGE_BR = 1100;

if (scrollOffset > FIRST_TRANS_MIN && scrollOffset <= FIRST_TRANS_MAX) { let op = scrollOffset / FIRST_TRANS_MAX; firstPage.style.opacity = 1 - op; secondPage.style.opacity = op; } else if (scrollOffset > FIRST_TRANS_MAX && scrollOffset <= SECONDPAGE_BR) { let yChanger = scrollOffset - FIRST_TRANS_MAX; spans[0].style.transform = `translate3d(0, ${yChanger}px,0)`; spans[2].style.transform = `translate3d(0, -${yChanger}px,0)`; } else { let thirdScroll = scrollOffset - SECONDPAGE_BR; thirdPage.style.opacity = 1; app.style.transform = `translate3d(0, -${thirdScroll}px,0)`; } });