نکات جاوااسکریپت 2
در تاریخ توسط
مواقع استفاده از : و =
وقتی داخل Object هستیم برای تخصیص مقدار از :  استفاده میکنیم و در غیر این صورت از =
تفاوت let و var

 let به صورت block scope است و var به صورت function scope است.

this

this به object فعلی اشاره میکند . object ای که روی آن قرار گرفته.

var yourObject = {
name : "hossein" ,
family : "Arbatan" ,
functionwithTHIS(){
       console.log(this.name + "  " + this.family)
  }
}

yourObject.functionwithTHIS();
در مثال بالا چون در بیرون از بلاک functionwithThis روی  yourObject فراخوانی شده this روی yourObject کار خواهد کرد و به آن شی اشاره خواهد کرد.

درحالتی مثل زیر this چون درون خود object فراخوانی شده نه بیرون از آن (روی object پس از . فراخوانی نشده) This در واقع windows که بالاترین شی است را برمیگرداند.

var yourObject = {
name : "hossein" ,
family : "Arbatan" ,
myFunc() {
function myFunction() {
       console.log(this)
  }
myFumction();
 }
}


yourObject.myFunc();
اگر بخواهیم به this ای که به object جاری اشاره میکند دسترسی داشته باشیم میتوانیم از Arrow function استفاده کنیم چون در اون this مانند سیستم function‌ها نیست.
var yourObject = {
name : "hossein" ,
family : "Arbatan" ,

myFunc() {
   let myFumction = ()=> console.log(this);
   myFumction();
 }
}

yourObject.myFunc();


ارسال یک object به یک function :  از این طریق this‌های درون یک function به آن object اشاره خواهند کرد .

function breate(){
  console.log(this.name + " " + this.family);
}
breate.call(yourObject );
addEventListener
این تابع یک رویداد رو به یک المنت متصل میکند .
function testEvent(){
    console.log("hi");
}
document.getElementById("myBtn").addEventListener("click" , testEvent())
و یا مثلا
document.addEventListener("click", function(){ alert("Hello World!"); }); 

Arrow Function
در هنگام استفاده از Arrow  function‌ها عبارت function به () تبدیل میشود اگر صفر یا بیشتر از یکی متغیر داشته باشیم درون آن مینویسم و اگر یک متغیر بود فقط اون رو مینویسیم . بعد از اون <= اضافه میکنیم ،اگر تابع در چند خط باشد  {}  (curly brackets) اضافه میکنیم . در مواردی که return داریم اگر در یک خط عبارت نوشته میشه return  رو هم میتونیم حذف کنیم .
معادل کد بالا
document.addEventListener("click" ,()=> console.log("hello"))
یک مثال دیگر
let myNumbers = [10 , 20 , 30];
myNumbers.map(function(x){
   return  x*10;
});
میتونه به صورت زیر نوشته بشه.
myNumbers.map( x => x*10 );
و خروجی هر دو
[100, 200, 300]

Template Literal
توی این فرمت نوشتن به جای استفاده از " و +  از بک تیک (`) که قابلیت دریافت چند خط تکست را دارد و {}$ که قابلیت دریافت داینامیک متغیر را دارد استفاده میشود .
var name = "arbatan"
console.log(`hello dear ${name}`)

مثال جامع
  <form id="myForm">
<input type="text" id="txt">
  <button type="button" onclick="subFrm()"> Add </button>
  </form>
  <ul id="myList"></ul>


let toDoText = document.getElementById("txt")
let list = document.getElementById("myList")

window.subFrm =  function() {
  list.insertAdjacentHTML("beforeend", ` value is ${toDoText.value} `);
  toDoText.value = "";
  toDoText.focus();
}

ترفند جاوا اسکریپت
ثبت لینک بدون آدرس و بدون #
<ahref="javascript: void(0)">I am a useless link</a>

گروه های پست :
تعداد مشاهده : 115
تعداد پسندها : 0
تعداد نظرات : 0
تعداد پیوست ها : 0

ارسال دیدگاه

ایمیل شما به کاربران نمایش داده نمی شود .

دیدگاه ها

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

loading...

لطفا منتظر بمانید...