متغیر‌ها و انواع داده‌ها ( Variables & data type ) 

متغیر یک container هست که میایم و در داخل آن  یک سری انتصابات رو انجام می‌دهیم 

قوانین نام گزاری متغیر‌ها : 

1-   نمی‌تواند با عدد شروع شود

2-  نام‌های متغیر case sensitive هستش یعنی به حروف بزرگ و کوچیک حساس هستش 

3- از کلمات رزروی در نام متغیر نمی‌تونیم بیایم و استفاده بکنیم  

نکته : برای تعریف متغیر‌ها از کلمات کلیدی var و let استفاده میکنیم و می‌توانیم دو تا متغیر رو در یک statement تعریف کنیم

انواع داده‌ها  data type‌ها  

 boolean      number          string         array        object       null       undefined

object { key1 : value1 , key2 : value2}  ///  boolean = ture  & false
array [ value ...  ]  ///  undefined  نا مشخص نوع اون مشخص نشده است              

  نکته : جاوا اسکریپت یک زبان Types are Dynamic هستش که میاد و اجازه می‌دهد وقتی ی بار مقدار دهی شد دوباره هم بیاد و مقدار دهی بشود  

var x;    x=5;    x=" emad ";

به عملیات چسباندن دو تا رشته به هم دیگه concat  می گویند در جمع کردن دو تا متغیر اگر یکی از اون‌ها رشته و دیگری عددی باشد در این عملیات مقدار عددی هم تبدیل به رشته می‌شود

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

var number1 = 10 ;    var number2 = 5 ;   var family = "Dadkhah" ;
var sum1 = number1 + number2 + family ;   
console.log(sum1); ====> 15Dadkhah   که در اصل در این جا عمل کانتک انجام داد 
var sum2 = family + number1 + number2 ;  
console.log(sum1); ====> Dadkhah105 ترتیب نوشتن این عملکرد‌ها برای ما مهم هستش
console.log(typeof sum1); 
console.log(typeof number1);

معرفی تابع typeof : از این تابع برای مشخص کردن نوع مقادیر امون میایم و استفاده  میکنیم 

مقایسه و تفاوت سه تا مفهوم null   &   Empty   &   undefined  :

undefined   :   هنوز هیچ مقداری به آن داده نشده و هنوز مقدار و نوع آن تعریف نشده هستش 

Empty  :  نوع اش مشخص هستش ولی هیچ مقداری داخلش نیست 

null : هیچ مقداری رو ندارد یکی از کاربرداش موقعی هستش که یک تابع در عملکرد خودش خطا دارد و مقدار خالی یا null رو بر  می گردوند 

مقدار‌های null  و undefined از نظر مقداری باهم برابر هستند و مقدار هیچی رو دارند اما از لحاظ دیتا تایپ‌ها مقدار null دیتا تایپ آن object هستش 

var test10;  // undefined
test10 = []; // Empty
test10 = 10;  
test10 = null;  // null
نکته 
null === undefined   // false
null == undefined    // ture

عملکرد‌های جاوااسکریپت :

1 - انتسابی ( =+ و =  و  =-  و =/  و  =%  و=** )

var a = 4;  var b = 2;
a += b                    ///==> a = a + b;
a **= b                   ///==> a = a ** b;
a %= b                    ///==> a = a % b;
a -= b                    ///==> a = a - b;
a /= b                    ///==> a = a / b;

----------------------------------------------------------------------------------------------------------------------------------------

2 - ریاضی ( +  و -  و  - - و + +  و * و  % و ** و ^ و / )

نکته : تفاوت‌های  X++ و ++X    

++X   = در این جا میاد اول عمل انتساب یا Assignment رو برای X امون انجام می‌دهد و در انتها 1 دونه اضافه میکند 

X++ = در این جا در ابتدا میاد و 1 رو اضافه میکند و بعد عمل Assignment رو برای X امون انجام می‌دهد

این منطق پیرامون  X--  و  --X هم وجود دارد 

نکته : الویت عملگرهای مورد استفاده در سراسر ریاضیات و بسیاری از زبان‌های برنامه‌نویسی رایانه‌ای عبارت است از

1-   پرانتز   ( حاصل آن را از داخلی‌ترین پرانتز بدست می‌آوریم )

2-  توان و ریشه و توابع ( از چپ به راست عمل مربوطه را محاسبه کنید )

3 - ضرب و تقسیم ( از چپ به راست عمل مربوطه را محاسبه کنید )

4-  جمع و تفریق ( از چپ به راست عمل مربوطه را محاسبه کنید )

5-  از سمت چپ به راست 

----------------------------------------------------------------------------------------------------------------------------------------

3- منطقی ( && و || و ! ) 

عملگرد  and && مقادیر سمت چپ و راست اون یا به اصطلاح تمام مقادیر اون باید مقادیر صحیح باشند و همیشه آخرین مقدار اون رو میاد و برای ما بر میگرداند که چک اش میکند و اگر به یک مقدار ناصحیح برخورد کنه تا همون جا میره و دیگه ادامه نمی‌دهد  

مقادیر صحیح مثل اعداد بزرگ‌تر از 0 و مقادیر کوچک‌تر  و مساوی 0 مقادیر نا صحیح هستند 

مقادیر ناصحیح دیگر null  و  undefined  هستش 

true صحیح مطلق false ناصحیح مطلق

عمگرد || یا مقادیر سمت چپ یا راست  آن یا به اصطلاح یکی از اون‌ها باید مقدار صحیح بگیرد و همیشه اولین مقدار صحیح رو میاد و بر میگردوند

عملگرد ! که not هستش که میاد و مقدار هامون رو معکوس می‌کند

var x = 1;
console.log(!x); //====>  false

----------------------------------------------------------------------------------------------------------------------------------------

4 - مقایسه ای ( == و === و =! و ,==! و < و > و ؟ )

==    میاد و فقط مقادیر رو برای ما چک میکند 

===  میاد و نوع رو برای ما چک میکند 

=! نا مساوی  که مقدار‌های ture و false رو به ما میدهد و مقدار رو برای ما مقایسه میکند 

==! میاد  و نامساوی نوع و مقدار رو باهم   برای ما چک میکند 

< و >  و => و =< بزرگ‌تر و کوچک‌تر هستش 

? بهتر هستش در ساختار‌های تصمیم گیری استفاده کنیم 

5- متنی

----------------------------------------------------------------------------------------------------------------------------------------

ساختار‌های تصمیم گیری 

نکته : معرفی تابع Promot که دو تا مقدار به عنوان ورودی میگیرد که مقدار اولی اجباری هستش و یک رشته برای نمایش متن برای یک دیالوگ در صفحه ی وب ما هستش

var age = prompt (" How old are you " );

1-   if  ,  else  ,  else if 

if( exprestion ) { } else { }

در استفاده از شرط‌ها وقتی یک قسمت از شرط امون میاد و انجام می‌شود ( مثلا if ) وارد قسمت دومی شرط نمیشه ( مثلا else if ) و اون رو چک نمیکند و از اون تابع break می‌کند 

2-   exprestion )  ?  exprestion = true  : exprestion = false ) 

 این مدل هم جایگزین یکی بالایی هستش و میتونیم از اون به صورت تو در تو استفاده بکنیم  و بیایم دو بار در ساختارمون از ? :  استفاده بکنیم

3-  switch case که در این ساختار فقط می‌توانیم بیایم و مقادیر رو چک بکنیم که بیشتر برای چک کردن موردی استفاده میکنیم 

switch ( exprestion ){
    case value :
                 ...................
    break;
    case value :
                 .................... 
    break;
    default;
                 ....................
    break;
    }

نکته : اگر اومدیم و کدی رو نوشتیم که تعداد if else‌های اون زیاد شد به ساختار کدمون باید شک کنیم که اون ساختار ساختار بهینه ای نیستش که برای بهینه کردن باید بیایم و  از  توابع استفاده بکنیم 

function declaration

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

1- اتفاق افتاد یک رویداد Event مثل onclick

2- خودمون بیایم و در کدهامون تابع رو اجرا کنیم

3- وقتی که خود تابع میاد و خودشو صدا می‌زند که برای توابع exprsstion مورد استفاده قرار میگیرند

ورودی‌های تابع : 

1- value 

2- default value 

3- Alternative default value خودمون با استفاده از if بیایم و پیش فرض براش درست کنیم

نام گزاری توابع ( قراردادی )  : 

1- get : وقتی تابع امون قراره بیاد و یک مقداری رو برگرداند بهتر هستش که اولش از این کلمه استفاده بکنیم

2- calc : وقتی تابع ما قراره بیاد و یک محاسبه ای رو انجام بدهد بهتر هستش که اولش از این کلمه استفاده بکنیم

3- create : وقتی تابع ما قراره بیاد و یک چیزی بسازه بهتر هستش که اولش از این کلمه استفاده بکنیم

4- check : وقتی تابع ما قراره بیاد و یک چیزی چک کنه برامون بهتر هستش که اولش از این کلمه استفاده بکنیم

5- show : وقتی تابع ما قراره بیاد و یک چیزی نمایش بده بهمون بهتر هستش که اولش از این کلمه استفاده بکنیم

یک تابع باید بیاد و یک کار مشخص رو برای ما انجام بدهد و نباید توابع ما طوری باشند که بیاد و چندین کار رو انجام بدهد و بهتر اون رو تقسیم کنیم و هی کوچیکش کنیم 

function expression یعنی تابع می‌تونه یک مقدار هم خودش باشه و بیاد و Assignment بشه به یک متغیر

function expression حالتی از نوشتن توابع هستش که در آن می‌توانیم حالت سوم کاربرد توابع که خودشون بیان و خودشون رو صدا بزنن رو هم داشته باشیم در نوشتن توابع به این صورت چون تابع ما به عنوان یک مقدار هستش باید بیایم و آخرش از ; استفاده بکنیم همچنین در نوشتن توابع به صورت معمولی function declaration در انتهای توابع نیازی به ; نیستش 

نکته : در حالت function declaration موتور جاوااسکریپت به محض دیدن همچین کدی تابع رو در مرحله initialize کد میاد و تعریف اش میکند برای همین جایی که میایم و تابع رو صدا می‌زنیم مهم نیستش و می‌تونیم اول بیایم و تابع امون رو صدا بزنیم و بعد اون رو فراخوانی کنیم 

sum(5,6); 
function sum(a,b){
   alert(a+b) 
   }

نکته : چه موقعی باید بیایم و از function expression نمی‌خواهیم تابع امون در کل بلاک کدمون قابل استفاده باشه یا میخاهیم بر اساس یک شرایط خاصی بیایم و تابع امون رو تعریف بکنیم  و یا تعریف اش بر اساس شرایط مختلف بیاد و تغیر بکند یا از یک  جایی به بعد قابل استفاده باشد در غیر این صورت‌ها می‌تونیم بیایم و از function declaration  h استفاده میکنیم 

انواع حلقه ها 

//  while (){ } //
var i = 10;
while(i){
  document.getElementById('demo').innerHtml += '<div>hello</div>';
  i--;
  }

2- for

for(initializationStatement; testExpression; updateStatement) {
    // codes 
}
for( var i = 0; i<10;  i--){
  document.getElementById('demo').innerHtml += '<div>hello</div>';     
}

3- do while 

نکته : تفاوت‌های while با do while در این هستش که در while اول میاد و شرط رو چک میکند و بعد اون عملیات رو انجام میده و do while میاد و اول یک بار عملیات رو انجام میدهد و بعد شرط رو انجام میدهد و در این کار حداقل کد ما یک بار اجرا می‌شود

نکته : استفاده از حلقه‌های  بی نهایت  که کاربردش برای کار هایی که میخاهیم بی نهایت بار تکرار شود

while ( ture ) {}   //////////    for(;;){}

همچنین برای متوقف کردن حلقه باید بیایم و از break‌ها استفاده بکنیم همچنین continue میاد میگوید برو سراغ ادامه حلقه و این یکی رو بیخیال شو

نکته : ما از کلمه کلیدی break  و continue در ternary if‌ها نمی‌تونیم استفاده کنیم 

استفاده از strict mode برای انجام کد نویسی تمیز‌تر  هستش و بهتر هستش بیایم و اون رو فعالش بکنیم تا از انجام خطا‌های منطقی در کدهامون جلوگیری شود   

' use strict ';

در این حالت کارهای زیر را نمی‌توانیم بیایم و انجام بدهیم 

1 -  استفاده از متغیر بدون اینکه آن را تعریف کنیم در این حالت مجاز نیستش 

در حالت عادی 
X = 3.14; 
console.log(x)  برامون نمایش میدهد و مجاز هستش
اما اگر use strict 
رو فعال کنیم به ما خطا میدهد

2 - Delete کردن متغیر ها

3 - Delete کردن توابع 

نکته : در هنگام استفاده از  delete  متغیر هایی که با var تعریفشون کردیم رو ما اجازه حذف کردنشون رو نداریم 

var x2 = { p1:10 , p2:20 };     delete x2;  console.log(x2);
در کد بالا در حالت عادی مقدار شی  رو به ما نشون میدهد ولی در حالت  خاص نه 

4 - استفاده از پارامتر هایی با نام تکراری در توابع 

function(p1,p1){     }  

5 - تغیر یک ویژگی فقط  خواندنی در آبجکت ها 

var obj1 ={}; 
Object.defineProperty(obj1,"x",{value:0,writeable:false});
console.log(obg1.x);
obj1.x=3.14;

6 - تغیر ویژگی‌های get-only در آبجکت‌ها که ما در این حالت  می توانیم بیایم و فقط اون رو بخونیم نمی‌توانیم بیایم و تغیری در آن ایجاد کنیم

var obj2 = { get x(){ return 0 }  }
console.log(obj2.x);
obj2.x = 355;

7 - استفاده از کلمه eval , arguments به عنوان متغیر 

8 - استفاده از کلمات رزرو شده به عنوان نام متغیر ممنوع هستش

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

مفهوم scope  :  محدوده ی  قابل دسترسی به یک تابع یا یک متغیر برای استفاده از کد و اگر ما بیایم و از یک متغیری استفاده بکنیم که در محدوده ی متغیر ما نیستش  متغیر جاوااسکریپت به ما خطای undefined بودن رو میدهد حال ما به طور کلی دو دسته اسکوپ داریم             1 - local scope داخلی    2 - global scope سراسری

نکته : در حالت گلوبال در داخل جاوااسکریپت ما بعضی موارد رو داریم که خود جاوااسکریپت میاد و گلوبالش میکند و ما از این متغیر‌ها می‌توانیم بیایم و در داخل html  هم بهشون دسترسی داشته باشیم 

نکته : وقتی مروگر میاد و یک صفحه وب رو باز میکند یک object بسیار سراسری به نام window رو برای ما درست میکند و در داخل آن object‌های DOM و BOM و جاوااسکریپت میان و شکل میگرند و متغیر‌های گلوبال جاوااسکریپت میان و زیر مجموعه  window قرار میگیرند همچنین ما توابعی که با نام function میایم و تعریفشون میکنیم مثل خط زیر این‌ها به صورت گلوبال هستند و می‌توانیم قبل از تعریف توابع هم بیایم و ازشون استفاده بکنیم 

Block scope ما می‌توانیم در جاوااسکریپت بیایم و خودمون یک بلاک درست کنیم و توابع و متغیر هامون رو جدا کنیم از یک بخش دیگه و متغیر‌ها و توابع خودمون رو داشته باشیم و فقط در داخل اون بلاک قابل استفاده هستند و بیرون اون‌ها قابل استفاده نیستند 

مفهوم Hoisted : ما وقتی میایم و یک تابع رو به صورت  تابع سازنده تعریف اش می‌کنیم این توابع در داخل جاوااسکریپت میان و منتقل می‌شن به ابتدای کد و initialize در اولین مرحله تعریف می‌شوند و هر جایی می‌توانیم از اون‌ها استفاده بکنیم حتی قبل از تعریف همچنین متغیر‌های سراسری که با var  تعریف می‌شوند  میان و به ابتدای کدهامون  منتقل می‌شوند و ما می‌توانیم هر جایی که خواستیم از اون‌ها استفاده بکنیم فقط مطلبی که هستش این متغیر‌ها تعریف یا declare اشون میاد و بالا میره اون مقدار دهی شون یا assignment در همون جا می‌مونه و اگر ما بیایم و قبل از مقدار دهی اون‌ها رو فراخوانی کنیم به ما مقدار undefined رو بر میگردوند

حال به این اتفاقات در جاوااسکریپت برای توابع و متغیر هامون میوفتد می‌گویند Hoisted

تفاوت‌های let و var 

1 - در حلقه‌ها با let متغیر به scope حلقه محدود می‌شود

2-  متغیر‌های تعریف شده با let در global scope در window در دسترس نیستند

3- اجازه تعریف مجدد متغیر تعریف شده با let را در همان scope نداریم

4- متغیر‌های تعریف شده با let امکان hoisted  شدن را ندارند

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

1- تابع  setTimeout که دو تا ورودی میاد و میگرد که مقدار اول یک callback function‌ها و  ورودی دوم یک delay یا میزان تاخیر هستش که بر حسب میلی ثانیه  و این تابع میاد و یک timerId رو هم به ما بر میگردوند 

var timerId = setTimeout(func,delay);

اگر تابع کال بک ما اومد و یک سری ارگومنت به عنوان ورودی داشت می‌توانیم بیایم و بعد از مقدار delay این پارامتر هارو بهش بدهیم 

کاربرد timer Id :  یک موقع هستش ما می‌خاهیم به هر دلیلی شده  تابع امون رو قبل از اون delay بیایم و کنسل اش بکنیم برای این کار باید از timerId استفاده کنیم و اون رو به تابع clearTimeout بدهیم که باعث کنسلی تابع تایمر ما بشود

اجرای پشت سر هم کدها :

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

1 - Nested setTimeout به دو مزیت  

Flexible که بر اساس اتفاق هایی که در توابع ما میوفته زمان اجرا شدن Timeout تابع بعدی رو تغیر بدهیم

Exact

2 - setInterval به یک حالت simple این تابع مقادیر ورودیش شبیه به تابع بالایی هستش و بر اساس مقادیری که میگیرد یک بار اجرا نمی‌شود بلکه میاد و با تایین اون فاصله زمانی هی اجرا می‌شود

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

var  timerId = setInterval(test,2000,"salam");
setTimeout(function(){clearInterval(timerId)},6000);

نمونه  کد بعدی اجرا کردن یک تابع هستش با setTimeout که میاد و به صورت بی نهایت اجرا می‌شود

setTimeout(function run(){
  conole.log('sss');
  setTimeout(run,1000)
},1000)

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

var cnt = 0;
setTimeout(function run(){
  conole.log('sss');
  cnt++;
  if(cnt < 10){
  setTimeout(run,1000);
  }
},1000);

تفاوت مدیریت زمان اجرا بین setInterval و setTimeout

تابع setInterval در تایم هایی که اومدیم و بهش دادیم میاد و دستورات مارو اجرا میکند و طول مدت زمانی که اون تابع کدش اجرا می‌شود رو در نظر نمیگیرد

اما setTimeout دقیقا بعد از اینکه اجرای تابع تموم میشه timeout بعدی رو اجرا میکنه و فاصله زمانی دو تا اجرا دقیقا بر اساس اون مدلی هستش که ما بهش دادیم و به لحاظ زمانی دقیق‌تر از یکی بالایی هستش و منعطف‌تر هستش

برای توقف هم در setTimeout  می‌توانستیم با استفاده از شرط‌ها و clearSetTimeout  اون‌ها رو متوقف کنیم و در دومی هم که توضیح اش داده شد  

تکنیک تاخیر صفر که یادت در مرورگر واقعا صفر نیست همچنین به این تایمر‌ها یا setTimeout و setInterval در مرورگر  اسکجول می‌گویند

تفاوت innerText با textContent در این هستش که innerText  میاد و فقط متونی رو به ما نشان می‌دهد که دیده می‌شوند برای مثال اگر داخل المنت امون یکسری کدی باشه که hide باشه رو به ما نشون نمی‌دهد space‌های اضافه به ما نشون نمیدهد ولی textContent  تمام چیز‌های داخل المنت رو به ما نشون میدهد

function clockRunner() {
  var d = new Date();
  var hour = d.getHours();
  var minute = d.getMinutes();
  var secound = d.getSeconds();
  var p = "AM";
  if (hour > 12) {
    hour -= 12;
    p = "PM";
  }

  if (hour < 10) {
    hour = "0" + hour;
  }
  if (minute < 10) {
    minute = "0" + minute;
  }
  if (secound < 10) {
    secound = "0" + secound;
  }
  var clock = hour + ":" + minute + ":" + secound + " " + p;
  document.getElementById("MyClockDisplay").textContent = clock;
  setTimeout(clockRunner, 1000);
}
clockRunner();

توابع کاربردی ریاضی Math  :

1- round برای رند کردن عدد‌های اعشاری میایم و ازش استفاده میکنیم

2- pow برای به توان رساندن میایم و استفاده میکنیم

3- sqrt رادیکال میگیرد از اعداد که این رادیکال بر مبنای 2 هست

4- abs قدرمطلق میگیرد از اعداد

5- ceil عدد رو همیشه به سمت بالا گرد میکند

6- floor  عدد را همیشه به سمت کف یا پایین میاد و گرد میکند 

برای درست کردن اعداد تصادفی در داخل جاوااسکریپت ما از تابع  random استفاده میکنیم که یک عدد تصادفی بین 1 و 0 درست میکند