logo

بهترین ها همه در یک جا

مطالب آموزشی

نکات مفید در جاوا اسکریپت

اشتراک گذاری :

مواقع استفاده از  : و =
وقتی داخل 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 اشاره خواهند کرد . فرض کنید myObject هم Object ای است که دارای name و family است.

function myFunc(){
  console.log(this.name + " " + this.family);
}
myFunc.call(myObject );
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}`)
ریدایرکت به لینک

برای redirect کردن در  JS از کد زیر استفاده میشود . برای اینکه بعد از یک زمان معینی این عمل انجام شود آن را درون setTimeout می‌گذاریم.

 setTimeout(function () {   window.location.href = "http://khoobchi.com";   }, 5000)
ثبت لینک بدون لینک شدن و بدون آدرس
ثبت لینک بدون آدرس و بدون #
<a href="javascript: void(0)">I am a useless link</a>

جاوا اسکریپت javascript
avatar

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