خلاصه مطالب قسمت 1 تا 5
-----------------------------------------
نکته : در یک صفحه ی وب در ابتدا یک سری درخواست از طریق مروگر میاد و به سمت سرور امون ارسال می شود و سرور بعد از پردازش هایی که انجام میدهد یک بسته از کد های html و css و js به سمت مرورگر ما ارسال میکند و اجرای اون ها در سمت کلاینت بر عهده مرورگر هستش
* جاوااسکریپت در ابتدا با سه هدف انیمشن ها و تطبیق / تغیر محتوا و اعتبار سنجی فرم ها ایجاد شده است *
ما به طور کلی دو نوع زبان داریم ۱- زبان های برنامه نویسی ۲- زبان های نشانه گزاری
۱- زبان های برنامه نویسی : زبان هایی هستند که قابلیت تصمیم گیری و تصمیم سازی و محاصبات ریاضی دارند و به طور کلی به دو دسته تقسیم می شوند
هر زبان برنامه نویسی که میخواد اجرا بشود در ابتدا باید بیاد و به زبان کامپیوتر تبدیل شود که این زبان کامپیوتر زبان های صفر و یک اسمبلی و سی هستند و اکثر زبان های برنامه نویسی در ابتدا باید بیان و تبدیل بشوند به یکی از این زبان ها
زبان های کامپایلی : به تبدیل شدن زبان برنامه نویسی مورد نظر ما به زبان سی یا زبان سطح پایین می گویند که در این زبان ها ابتدا کد نوشته می شود و بعد به طور کامل کامپایل می شود و نتیجه این کامپایل در یک فایل ذخیره می شود و ما از اون استفاده میکنیم و خطا ها در زبان کامپایل پیدا می شوند و ما قبل از این که این خطا به کاربرمون برسه متوجه می شویم و میتونیم اون رو اجرا کنیم
زبان های تفسیری / اسکریپتی : در این نوع زبان ها هربار که برنامه ما اجرا می شود کد های ما تفسیر می شوند هر بار کدی که می نویسیم میاد و تفسیر می شود و چون این تفسیر در خود برنامه اجرا می شود در اجرا نسبت به قبلی ها کند تر هستند
و مقدار رم بیشتری رو هم استفاده میکنند و جاوااسکریپت جزو این زبان هستش در این نوع زبان ها خطا های ما موقعی معلوم می شوند که اون قسمت از کدمون میاد و اجرا می شود
برای توسعه وب سایت معمولا زبان های تفسیری ترجیح داده می شوند مثل php java script
۲- زبان های نشانه گزاری : زبان هایی هستند که کار های عملیاتی و محاسبات خاص رو نمی تونن بیان و انجام بدهند و فقط میان و داده هارو نشان گزاری میکنن مثل HTML XML
دو سبک مختلف برنامه نویسی یا ۲ پارادایم برنامه نویسی : ۱ - برنامه نویسی شی گرا ۲ - برنامه نویسی تابعی
platform : بستری که نرم افزار های دیگر می توانند بر روی آن ها اجرا شوند در زبان جاوااسکریپت هم ما برای اجرای کد هامون نیاز به این داریم که از این سکو ها بیایم و استفاده بکنیم که این پلتفرم های جاوااسکریپتی برای اجرای برنامه های ما مرورگر ها و موتور های جاوااسکریپتی هستند
موتور های جاوااسکریپتی : در واقع ماشین های مجازی هستند که استاندار های اکما اسکریپت رو میان و اجرا و پردازش میکنند مثل موتور V۸
چهارچوپ های کلی جاوااسکریپت :
۱- statements : به هر خط کد در جاوا اسکریپت که قابلیت اجرا شدن رو داشته باشه می گویند
۲- Expressions : هنگامی که ما میخایم بیایم و یک عبارت شرطی رو بررسی بکنیم به اون عبارت شرطی ما می گویند
۳- Assignments : وقتی ما میخایم بیایم و یک چیزی رو در جاوااسکریپت انتصاب بدهیم از این نوع ها استفاده میکنیم
۴- code blocks : به بلاک های کدهامون می گویند مثل توابع امون که یک بلاک مشخص می شوند { }
۵- Comments : کد هایی که وجود دارند ولی اجرا نمی شوند که معمولا توضیحاتی هستند برای بالا بردن خوانایی
۶- values : مقادیر مختلف که در یک زبان برنامه نویسی قابلیت تعریف دارند
۷- operators : عملگرد هایی هستند که در هر زبان برنامه نویسی استفاده می شوند مثل مقایسه کردن ها و ..’’
۸- keywords : یک سری کلمات کلیدی که با استفاده از اون ها کدهامون رو تعریف می کنیم برای مثال function let var
syntax : به نحوه نگارش کد ها در هر زبان برنامه نویسی می گویند که کد چطوری شروع و پایان می پزیرد و اگر ما بیایم و اون هارو رعایت نکنیم اصطلاحا دچار سینتکس ارور می شویم
نکته Vs : استفاده از copy path برای اجرا با کلیک راست نرم افزار vscode یک کد ادیتور هستش که با استفاده از افزونه هاش که با جی اس نوشته می شوند به شدت قدرت مند هستش
نکته : در یک صفحه ی وب در ابتدا یک سری درخواست از طریق مروگر میاد و به سمت سرور امون ارسال می شود و سرور بعد از پردازش هایی که انجام میدهد یک بسته از کد های html و css و js به سمت مرورگر ما ارسال میکند و اجرای اون ها در سمت کلاینت بر عهده مرورگر هستش
* جاوااسکریپت در ابتدا با سه هدف انیمشن ها و تطبیق / تغیر محتوا و اعتبار سنجی فرم ها ایجاد شده است *
استاندارد های دیگه اکما اسکریپت
1 - java script 2 - js cript 3 - action script
ما به طور کلی دو نوع زبان داریم ۱- زبان های برنامه نویسی ۲- زبان های نشانه گزاری
۱- زبان های برنامه نویسی : زبان هایی هستند که قابلیت تصمیم گیری و تصمیم سازی و محاصبات ریاضی دارند و به طور کلی به دو دسته تقسیم می شوند
هر زبان برنامه نویسی که میخواد اجرا بشود در ابتدا باید بیاد و به زبان کامپیوتر تبدیل شود که این زبان کامپیوتر زبان های صفر و یک اسمبلی و سی هستند و اکثر زبان های برنامه نویسی در ابتدا باید بیان و تبدیل بشوند به یکی از این زبان ها
زبان های کامپایلی : به تبدیل شدن زبان برنامه نویسی مورد نظر ما به زبان سی یا زبان سطح پایین می گویند که در این زبان ها ابتدا کد نوشته می شود و بعد به طور کامل کامپایل می شود و نتیجه این کامپایل در یک فایل ذخیره می شود و ما از اون استفاده میکنیم و خطا ها در زبان کامپایل پیدا می شوند و ما قبل از این که این خطا به کاربرمون برسه متوجه می شویم و میتونیم اون رو اجرا کنیم
زبان های تفسیری / اسکریپتی : در این نوع زبان ها هربار که برنامه ما اجرا می شود کد های ما تفسیر می شوند هر بار کدی که می نویسیم میاد و تفسیر می شود و چون این تفسیر در خود برنامه اجرا می شود در اجرا نسبت به قبلی ها کند تر هستند
و مقدار رم بیشتری رو هم استفاده میکنند و جاوااسکریپت جزو این زبان هستش در این نوع زبان ها خطا های ما موقعی معلوم می شوند که اون قسمت از کدمون میاد و اجرا می شود
برای توسعه وب سایت معمولا زبان های تفسیری ترجیح داده می شوند مثل php java script
۲- زبان های نشانه گزاری : زبان هایی هستند که کار های عملیاتی و محاسبات خاص رو نمی تونن بیان و انجام بدهند و فقط میان و داده هارو نشان گزاری میکنن مثل HTML XML
دو سبک مختلف برنامه نویسی یا ۲ پارادایم برنامه نویسی : ۱ - برنامه نویسی شی گرا ۲ - برنامه نویسی تابعی
برنامه نویسی شی گرا : هر چیزی که در دنیای واقعی وجود دارد در دنیای مجازی هم از اون شی استفاده کرد برای ایجاد یک شی در زبان های برنامه نویسی از ساختار کلاس استفاده میکنیم تا بتونیم اشیا امون رو به وجود بیاریم هر کلاس از دو بخش اصلی
1 - property or state : مثل اسم سن رنگ و جنسیت که میان و در این دسته قرار میگیرند
2 - behaviors : مثل راه رفتن نوشیدن مطالعه کردن و غذا خوردن
برنامه نویسی تابعی : یک سری ورودی ها دارد که روی اون ورودی ها یکسری پردازش انجام می دهد و یک خروجی رو به ما می دهد و کلن ما از توابع برای کد نویسی امون میایم و استفاده میکنیم
حال ما بر اساس اون کلاسی که داریم میایم و یک نمونه از اون شی رو ایجاد میکنیم
platform : بستری که نرم افزار های دیگر می توانند بر روی آن ها اجرا شوند در زبان جاوااسکریپت هم ما برای اجرای کد هامون نیاز به این داریم که از این سکو ها بیایم و استفاده بکنیم که این پلتفرم های جاوااسکریپتی برای اجرای برنامه های ما مرورگر ها و موتور های جاوااسکریپتی هستند
موتور های جاوااسکریپتی : در واقع ماشین های مجازی هستند که استاندار های اکما اسکریپت رو میان و اجرا و پردازش میکنند مثل موتور V۸
چهارچوپ های کلی جاوااسکریپت :
۱- statements : به هر خط کد در جاوا اسکریپت که قابلیت اجرا شدن رو داشته باشه می گویند
۲- Expressions : هنگامی که ما میخایم بیایم و یک عبارت شرطی رو بررسی بکنیم به اون عبارت شرطی ما می گویند
۳- Assignments : وقتی ما میخایم بیایم و یک چیزی رو در جاوااسکریپت انتصاب بدهیم از این نوع ها استفاده میکنیم
۴- code blocks : به بلاک های کدهامون می گویند مثل توابع امون که یک بلاک مشخص می شوند { }
۵- Comments : کد هایی که وجود دارند ولی اجرا نمی شوند که معمولا توضیحاتی هستند برای بالا بردن خوانایی
۶- values : مقادیر مختلف که در یک زبان برنامه نویسی قابلیت تعریف دارند
۷- operators : عملگرد هایی هستند که در هر زبان برنامه نویسی استفاده می شوند مثل مقایسه کردن ها و ..’’
۸- keywords : یک سری کلمات کلیدی که با استفاده از اون ها کدهامون رو تعریف می کنیم برای مثال function let var
syntax : به نحوه نگارش کد ها در هر زبان برنامه نویسی می گویند که کد چطوری شروع و پایان می پزیرد و اگر ما بیایم و اون هارو رعایت نکنیم اصطلاحا دچار سینتکس ارور می شویم
نکته Vs : استفاده از copy path برای اجرا با کلیک راست
اجرا جاوااسکریپت در مرورگر و نمایش خروجی
۱- استفاده از تابع innerHTML
document.getElementById("nameId|).innerHTML = " نوشته ما "
۲- استفاده از تابع write
document.write( " نوشته " )
در هنگام استفاده از این تابع باید حواسمون باشد که اگر ما اومده باشیم و فایل جاوااسکریپتی مون رو به صورت ماژولار به پروژه امون اضافه کرده باشیم و این تابع رو در آن به کار ببریم بعد از رندر کامل صفحه و اجرای کد های html این تابع باعث پاک شدن کل فایل های html جایگزین کردن آن می شود
۳- استفاده از تابع alert
window.alert(" ")
alert(" ")
قبل از این که اون رندر صفحه امون بیاد و انجام بشه و کد های html امون اجرا بشه میاد و نمایش داده میشود
۴- consloe
به ما دسترسی به کنسول مرورگرمون می دهد
console.log(" ")
۵- onclick
متغیر ها و انواع داده ها ( Variables & data type )
متغیر یک container هست که میایم و در داخل آن یک سری انتصابات رو انجام می دهیم
قوانین نام گزاری متغیر ها :
۱- نمی تواند با عدد شروع شود
۲- نام های متغیر case sensitive هستش یعنی به حروف بزرگ و کوچیک حساس هستش
۳- از کلمات رزروی در نام متغیر نمی تونیم بیایم و استفاده بکنیم
نکته : برای تعریف متغیر ها از کلمات کلیدی 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
خلاصه قسمت های 6 تا 10
----------------------------------------
عملکرد های جاوااسکریپت :
۱ - انتسابی ( =+ و = و =- و =/ و =% و=** )
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;
۲ - ریاضی ( + و - و - - و + + و * و % و ** و ^ و / )
نکته : تفاوت های X++ و ++X
++X = در این جا میاد اول عمل انتساب یا Assignment رو برای X امون انجام می دهد و در انتها ۱ دونه اضافه میکند
X++ = در این جا در ابتدا میاد و ۱ رو اضافه میکند و بعد عمل Assignment رو برای X امون انجام می دهد
این منطق پیرامون X-- و --X هم وجود دارد
منطق بالا بریا x-- و --x هم برقرار است
var x = 0;
var test1 = x--;
console.log("x = " + x , "test1 = " + test1);
var test2 = --x;
console.log(" x = " + x , " test2 = " + test2 );
نکته : الویت عملگرهای مورد استفاده در سراسر ریاضیات و بسیاری از زبانهای برنامهنویسی رایانهای عبارت است از
۱- پرانتز ( حاصل آن را از داخلیترین پرانتز بدست میآوریم )
۲- توان و ریشه و توابع ( از چپ به راست عمل مربوطه را محاسبه کنید )
۳ - ضرب و تقسیم ( از چپ به راست عمل مربوطه را محاسبه کنید )
۴- جمع و تفریق ( از چپ به راست عمل مربوطه را محاسبه کنید )
۵- از سمت چپ به راست
۳- منطقی ( && و || و ! )
عملگرد and && مقادیر سمت چپ و راست اون یا به اصطلاح تمام مقادیر اون باید مقادیر صحیح باشند و همیشه آخرین مقدار اون رو میاد و برای ما بر میگرداند که چک اش میکند و اگر به یک مقدار ناصحیح برخورد کنه تا همون جا میره و دیگه ادامه نمی دهد
مقادیر صحیح مثل اعداد بزرگ تر از ۰ و مقادیر کوچک تر و مساوی ۰ مقادیر نا صحیح هستند
مقادیر ناصحیح دیگر null و undefined هستش
true صحیح مطلق false ناصحیح مطلق
عمگرد || یا مقادیر سمت چپ یا راست آن یا به اصطلاح یکی از اون ها باید مقدار صحیح بگیرد و همیشه اولین مقدار صحیح رو میاد و بر میگردوند
عملگرد ! که not هستش که میاد و مقدار هامون رو معکوس می کند
var x = 1;
console.log(!x); //====> false
۴ - مقایسه ای ( == و === و =! و ,==! و < و > و ؟ )
== میاد و فقط مقادیر رو برای ما چک میکند
=== میاد و نوع رو برای ما چک میکند
=! نا مساوی که مقدار های true و false رو به ما میدهد و مقدار رو برای ما مقایسه میکند
==! میاد و نامساوی نوع و مقدار رو باهم برای ما چک میکند
< و > و => و =< بزرگ تر و کوچک تر هستش
? بهتر هستش در ساختار های تصمیم گیری استفاده کنیم
ساختار های تصمیم گیری
نکته : معرفی تابع Prompt که دو تا مقدار به عنوان ورودی میگیرد که مقدار اولی اجباری هستش و یک رشته برای نمایش متن برای یک دیالوگ در صفحه ی وب ما هستش
var age = prompt (" How old are you " );
۱- if , else , else if
if( exprestion ) { } else { }
در استفاده از شرط ها وقتی یک قسمت از شرط امون میاد و انجام می شود ( مثلا if ) وارد قسمت دومی شرط نمیشه ( مثلا else if ) و اون رو چک نمیکند و از اون تابع break می کند
۲- Condition) ? Condition = true : Condition = false )
این مدل هم جایگزین یکی بالایی هستش و میتونیم از اون به صورت تو در تو استفاده بکنیم و بیایم دو بار در ساختارمون از ? : استفاده بکنیم
۳- switch / case که در این ساختار فقط می توانیم بیایم و مقادیر رو چک بکنیم که بیشتر برای چک کردن موردی استفاده میکنیم
switch ( exprestion ) {
case value :
...................
break;
case value :
....................
break;
default;
....................
break;
}
نکته : اگر اومدیم و کدی رو نوشتیم که تعداد if else های اون زیاد شد به ساختار کدمون باید شک کنیم که اون ساختار ساختار بهینه ای نیستش که برای بهینه کردن باید بیایم و از توابع استفاده بکنیم
نکته : مفهوم Invoke شدن تابع یا اجرا شدن اون در سه حالت اتفاق میوفتد
۱- اتفاق افتاد یک رویداد Event مثل on click
۲- خودمون بیایم و در کدهامون تابع رو اجرا کنیم
۳- وقتی که خود تابع میاد و خودشو صدا می زند که برای توابع expression مورد استفاده قرار میگیرند که اصطلاحا به این کار self invoke می گویند
ورودی های تابع :
۱- value
۲- default value
۳- Alternative default value خودمون با استفاده از if بیایم و پیش فرض براش درست کنیم
نام گزاری توابع ( قراردادی ) :
۱- get : وقتی تابع امون قراره بیاد و یک مقداری رو برگرداند بهتر هستش که اولش از این کلمه استفاده بکنیم
۲- calc : وقتی تابع ما قراره بیاد و یک محاسبه ای رو انجام بدهد بهتر هستش که اولش از این کلمه استفاده بکنیم
۳- create : وقتی تابع ما قراره بیاد و یک چیزی بسازه بهتر هستش که اولش از این کلمه استفاده بکنیم
۴- check : وقتی تابع ما قراره بیاد و یک چیزی چک کنه برامون بهتر هستش که اولش از این کلمه استفاده بکنیم
۵- show : وقتی تابع ما قراره بیاد و یک چیزی نمایش بده بهمون بهتر هستش که اولش از این کلمه استفاده بکنیم
یک تابع باید بیاد و یک کار مشخص رو برای ما انجام بدهد و نباید توابع ما طوری باشند که بیاد و چندین کار رو انجام بدهد و بهتر اون رو تقسیم کنیم و هی کوچیکش کنیم
ما برای تعریف کردن توابع در جاوااسکریپت دو نوع تعریف کلی داریم
1 - function declaration
function emad( ) { }
2 - function expression
let emad ( ) { }
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--;
}
۲- for
for(initializationStatement; testExpression; updateStatement) {
// codes
}
for( var i = 0; i<10; i--){
document.getElementById('demo').innerHtml += '<div>hello</div>';
}
۳- do while
نکته : تفاوت های while با do while در این هستش که در while اول میاد و شرط رو چک میکند و بعد اون عملیات رو انجام میده و do while میاد و اول یک بار عملیات رو انجام میدهد و بعد شرط رو انجام میدهد و در این کار حداقل کد ما یک بار اجرا می شود
نکته : استفاده از حلقه های بی نهایت که کاربردش برای کار هایی که میخاهیم بی نهایت بار تکرار شود
while ( ture ) {} ////////// for(;;){}
همچنین برای متوقف کردن حلقه باید بیایم و از break ها استفاده بکنیم همچنین continue میاد میگوید برو سراغ ادامه حلقه و این یکی رو بیخیال شو یعنی مثلا اگه الان نوبت پارامتر 1 حلقه هست ولش کن و برو سراغ پارامتر 2
نکته : ما از کلمه کلیدی break و continue در ternary if ها نمی تونیم استفاده کنیم
خلاصه قسمت 11 تا 15
-------------------------------
اشیاء یا object ها : معمولا به دو شکل قابل تعریف هستند اولی Literal Object ها و دومی Object Constructor که دومی بیشتر برای بحث شی گرایی و کلاس ها هستش
object = { key : value }
اشیا هم می تونن بیان و property داشته باشند و هم behavior که یک تابع به اون assign می شود
اگر ما خواستیم بیایم و از یک پراپرتی استفاده بکنیم که از دو کلمه تشکیل شده بود برای این کار باید اون پراپرتی رو در داخل یک کوتیشن قرار بدهیم و برای دسترسی به اون هم نمی توانیم بیایم و از . استفاده بکنیم و باید از حالت [ ‘ ’ ] استفاده بکنیم
Object = { 'class name' : dfsdf }
console.log(student['class name']
computed properties در object ها : یعنی ما می توانیم بیایم و کلید ها رو به صورت داینامیک تعریف اون کنیم
و باید اون ها رو در داخل یک کروشه قرار دهیم
var key = "className"
var student = { [key] : "c1" }
console.log(student.className)
console.log(student.[key])
برای چک کردن این که یک کلید یا پراپرتی در داخل یک شی وجود دارد یا خیر دو روش وجود دارد
1 - undefined 2 - "in" operator
عملکرد یا operator مثل in برای چک کردن یا دسترسی به پراپرتی های داخل یک شی استفاده می شود
حلقه زدن روی پراپرتی های یک ابجکت با استفاده از for in
for ( propertyName in student ) {
if(typeof student[properyName] == "function"){
student[propertyName]();
} else {
console.log(student[propertyName])
}
}
ترتیب قرارگیری پراپرتی ها در اشیا : در ابتدا فقط پراپرتی هایی که از نوع integer یا عدد هستند میان . یا پراپرتی هایی که خاصیت تبدیل شدن به اعداد رو دارند و بعد بقیه پراپرتی ها متناسب به ترتیب اشون میان و قرار میگیرند
var list = { family : "test" , 43: "number 43" , name : "salam" , 1:15 }
for(pName in list) { console.log(pName) }
// 1
// 43
// family
// name
type casting or type Conversion : یعنی یک متغیر با یک دیتا تایپ رو بیایم و به یک متغیر با یک دیتا تایپ دیگه تبدیل اش بکنیم فایده این کار در این هستش که گاهی وقت ها لازم هست که ما برای چک کردن صحیح یا ناصحیح بودن یک دیتا بیایم و اون رو تبدیل اش بکنیم و از ورودی یک دیتایی از کاربر بگیریم و مجبور باشیم اون رو تبدیل کنیم و یا اعشار ها رو تغیر بدهیم
string to number :
1 - تابع number که اگه نشه و تبدیل کرد به ما مقدار NaN رو بر میگردونه
var testString = "salam";
//var testString = "12";
console.log(testString , typeof testString);
testString = Number(testString);
console.log(testString , typeof testString);
2- تابع parseFloat هنگام تبدیل اون رقم اعشار رو هم در نظر میگیرد
3- تابع parseInt هنگام تبدیل اون رقم اعشار رو در نظر نمیگیرد
var grade = "12.36";
grade = parseFloat(grade)
console.log(grade,typeof grade)
grade = parseInt(grade)
console.log(grade, typeof grade)
4- تابع Unary + Operator
var y = "15";
y = + y;
console.log(y , typeof y )
برای تبدیل مقادیر بولین به عدد هم باید بدونیم که مقدار true برابر 1 هست و مقدار false هم برابر 0 هستش
برای تبدیل مقادیر عددی هم به رشته ما باید از دو تابع زیر استفاده بکنیم
1- string(); 2- x.toString();
var sum = 235
// sum = string(sum);
var sumString = sum.toString();
console.log(sum , typeof sum);
console.log(sumStrimg , typeof sumString);
ما برای تبدیل کردن بولین ها هم به رشته از خود تابع string استفاده میکنیم که خود مقادیر false و true رو هم به صورت رشته به ما تحویل می دهند
اعداد منفی و مثبت رو به صورت true بر میگرداند و فقط 0 و NaN رو false بر میگردوند
برای تبدیل اعداد و رشته ها به بولین از تابع boolean استفاده میکنیم
Automatic Type Conversion : در چه مواقعی خود جاوااسکریپت به صورت خودکار برای ما تبدیل ها رو انجام میدهد
نکته : هر رشته ای در هنگام تبدیل به بولین مقدار true می شود همچنین مقدار رشته خالی هم در هنگام تبدیل به بولین مقدار false می شود
نکته : وقتی یک صفحه در مرورگر باز می شود شی window توسط مرورگر ساخته می شود و این object سه دسته object دیگه رو در داخل خودش دارد
دسته 1 : DOM هستش که به ازای تمام المنت ها و داده های که داخل یک صفحه وب وجود دارد یک سری object وجود دارند و ما می توانیم با استفاده از شی DOM یا داکیومنت به اون المنت ها دسترسی داشته باشیم
دسته 2 : object هایی هستش که مرتبط با رفتار هایی که یک صفحه وب می تواند داشته باشد مثل screen و location و frames و history و .. رو داشته باشد
دسته 3 : همون اشیاء جاوااسکریپت مثل توابع و بقیه هستش
HTML Events : رویداد ها یا اتفاقاها که منتظر یک رویداد یا یک رخدادی هستند که وقتی اون اتفاق افتاد میان و یک کد جاوااسکریپتی رو اجرا میکنند و این اتفاقات روی المنت های html اتفاق می افتند
در داخل این توابع پایینی یکسری اطلاعات رو هم در غالب یک object به ما بر می گرداند که خیلی میتونه به دردمون بخورد
1 - on Change : وقتی محتوای داخل امنت امون تغیر کرد میاد و فراخاون می شود
input name="test" onchange="inputChange(event)"
function inputChange(event) {
alert ( " Hi " , event.taget.value)
console.log('changes ... ')
}
2 - on click
3 - on mouse over
4 - on mouse out
5 - on key down
var persianChars = { 83: 'س' }
function keyDown(event){
console.log(event)
event.target.value = persianChars[event.keyCode]
}
6 - on load از این رخداد می توانیم موقعی که مثلا تگ body امون اومد و load شد بیایم و استفاده بکنیم
کار با متن ها یا Data type String :
نکته : ما در داخل دابل کوتشن این اجازه رو داریم که بیایم و در داخل متن هامون از تک کوتشن استفاده بکنیم
ما با استفاده از length. می توانیم بیایم و طول اون رشته امون رو به دست بیاریم همچنین ما برا استفاده از رشته های که به صورت چن خطی هستند از ` ` استفاده میکنیم
برای دسترسی به رشته ها ما می توانیم با آن ها مثل کارکتر های یک آرایه بیایم و رفتار بکنیم
\n | خط جدید |
/r/n | line break |
/u00A9 | Tab |
\u{1F60D} | C |
:) |
مفهوم Mutable و Immutable در برنامه نویسی : به اون چیز هایی که قابلیت ویرایش کردن رو دارند بهشون میگیم Mutable و به اون چیز هایی که قابلیت ویراش کردن رو ندارند بهشون میگوییم Immutable کارکتر های در متن های جاوااسکریپت به صورت Immutable هستش
Escape Character ها
\' | ' |
\" | " |
\\ | \ |
توابع کاربردی در رشته ها
1 - toUpperCase و toLowerCase از این دو تابع برای بزرگ چین و کوچیک کردن تمام حروف در رشته کاربرد دارد
2 - splite برای برش یا جداسازی در رشته ها هستش که یک آرایه خروجی میدهد و دو تا ارگومنت دارد اولی جداکننده و دومی هم تعداد یا بخض هایی برای جدا شدن
// let str = "emad/ta/em";
// console.log(str.split("/",2));
// console.log(str.split("/",3));
// console.log(str.split("/",1));
3 - replace برای تغیر دادن مقدار یک رشته صورت میگیرد و دو تا آرگومنت دارد یک رشته که باید تغیر کند و دومی رشته که باید جایگزین شود
// let Name = "Emad Ta";
// console.log(Name.replace("Emad", "Ali"));
4 - trim حذف فضای خالی از ابتدا و انتها
// let Name = " Em ad ta hi gh ";
// console.log(Name.trim());
5 - indexOf متد indexOf اندیس اولین تطابق یک مقدار مشخص در یک رشته را برمی گرداند اگر که هیچ تطابقی وجود نداشته باشد، این متد عدد 1- را برمی گرداند.
نکته : برای مقایسه کردن دو تا متن از لحاظ انداز ه و بزرگی از تابع localeCompare میایم و استفاده میکنیم که اگر بزرگ تر باشد مقدار 1 رو برای ما بر میگرداند و مقدار برابر باشند 0 و اگر کوچک تر باشند -1 رو بر میگرداند
var input = " 3 , 5, 6, 4 , 7 ";
var array = input.splite(",") ;
console.log(array);
if(text.localeCompare(input)){};
6 - substr و includes و slice
نکته : یکی از مشکلاتی که جاوااسکریپت دارد این هستش که تابع type Of وقتی برای یک تابع میاد و استفاده می شود اون رو به صورت object بر می گردوند که برای حل این مشکل دو تا مشکل وجود دارد یکی استفاده از تابع is Array هستش که از توابع Array هستش و دومی هم استفاده از تابع instance of هستش که بیایم و از آن به شیوه پایین استفاده بکنیم
var fruits = [ "Apple","Banan","Lemon" ];
console.log(typeof fruits );
console.log(Array.isArray(fruits ));
console.log(fruits instanceof Array);
برای حلقه زدن در توابع هم می توانیم از دو روش زیر استفاده کنیم یکی استفاده از for و دومی استفاده از for Each
for( var i=0; i<fruits.length; i++){
console.log(fruits[i]);
}
///////////////////
fruits.forEach(function(value,index){
console.log(value);
console.log(index);
})
برای اضافه کردن آیتم به ارایه هامون از دو راه استفاده میکنیم
1 -
fruits[fruits.length] = " dfsdfds "
2- استفاده از تابع push هستش
توابع پر کاربرد در آرایه ها :
1 - toString() 2- join() ==> میتونیم بیایم و جدا کننده مشخص کنیم
3 - pop() // push ==> برای حذف و اضافه کردن یک آیتم به آخر آرایه امون
4 - concat() ==> برای ادغام کردن دو تا آرایه میاد و مورد استفاده قرار میگیرد
5 - filter() ==> برای شرط گزاشتن و فیلتر کردن آرایه هامون مورد استفاده قرار میگرد
و یک آرایه رو برای ما بر میگرداند
var numbers = [1,100,45,3,45];
var list2 = numbers.filter(function(value){
return value>40
});
console.log(numbers);
console.log(list2);
6 - map() ==> میاد و کل آرایه رو برای ما حرکت میکند و می توانیم برای هر یک
از عناصر آرایه امون یک عمل رو بیاد و انجام بدهد
7- every() که برای چک کرن یا ولید کردن یک آرایه میاد و استفاده می شود
و مقدار های بولین رو به ما بر میگردوند
var check = numbers.every(function(value){
return value > 40
});
console.log("result of every :" , check);
8 - some() مثل یا عمل میکند که میاد و میگه اگر یکی از اعضای ارایه درست عمل کرد
به ما مقدار بولین بر میگرداند
یکی از اعضای آرایه اون شرط ما براش بر قرار بود رو اجرا میکند
9 - indexOf() مقدار ایندکس اون عضو آرایه امون رو به ما بر میگرداند
خلاصه قسمت 16 تا 20 :
--------------------------------
برای استفاده از تاریخ از آبجکت new Date استفاده میکنیم که میاد و تاریخ رو از مروگر ما میگیرد و به ما نشون میدهد
و اگر مروگر تاریخ اشتباه داده باشد عملکرد ان دچار مشکل می شود و این مشکل صرفا در قسمت فرانت اتفاق می افتد
مفهوم time stamp که مشخص کنند ساعت 0 UTC هستش که از سال 1970 شروع می شود که تعداد گزران زمان نسبت به اون زمان رو می گویند
new Date()
new Date(year,mounth,day,hours,minutes,seconds,miliseconds)
new Date(date string)
توابع پر کاربرد در کار با زمان
getFullYear() getMonth() getDate() getHours() getMountes() getSeconds()
Date.now() ==> میاد و تاریخ همین الان رو به ما میدهد
و یک سری توابع برای ست کردن تاریخ و زمان هم متناسب با مقادیر بالا داریم که می توانیم
متناسب با کاربرد امون سرچ و استفاده کنیم
مدیریت زمان اجرای کدها
۱- تابع set Timeout که دو تا ورودی میاد و میگرد که مقدار اول یک callback function ها و ورودی دوم یک delay یا میزان تاخیر هستش که بر حسب میلی ثانیه و این تابع میاد و یک timer Id رو هم به ما بر میگردوند
var timerId = setTimeout(func,delay,variable);
اگر تابع کال بک ما اومد و یک سری ارگومنت به عنوان ورودی داشت می توانیم بیایم و بعد از مقدار delay این پارامتر هارو بهش بدهیم
function test(a){
console.log(a);
cossole.log(new Date());
}
var timerId = setTimeout(test,2000,"salam")
کاربرد timer Id : یک موقع هستش ما می خاهیم به هر دلیلی شده تابع امون رو قبل از اون delay بیایم و کنسل اش بکنیم برای این کار باید از timer Id استفاده کنیم و اون رو به تابع clear Timeout بدهیم که باعث کنسلی تابع تایمر ما بشود
اجرای پشت سر هم کدها :
ما اگر خواستیم بیایم و یک کدی رو بنویسیم که پشت سر هم با ی وقفه ی مثلا دو ثانیه ای بیاد و اجرا بشه
۱ - Nested set Timeout که کلمه nested یعنی تو در تو بودن به دو مزیت
Flexible که بر اساس اتفاق هایی که در توابع ما میوفته زمان اجرا شدن Timeout تابع بعدی رو تغیر بدهیم همچنین برای متوقف کردن اون هم میتوانیم بیایم و از عملکرد های شرطی هم استفاده بکنیم تفاوت بعدی دقت اجرایی هستش
۲ - set Interval به یک حالت simple این تابع مقادیر ورودیش شبیه به تابع بالایی هستش و بر اساس مقادیری که میگیرد یک بار اجرا نمی شود بلکه میاد و با تایین اون فاصله زمانی هی اجرا می شود
برای متوقف کردن این تابع ما باید حتما از تابع clear Interval بیایم و استفاده بکنیم
var timerId = setInterval(test,2000,"salam");
setTimeout(function(){clearInterval(timerId)},6000);
نمونه کد بعدی اجرا کردن یک تابع هستش با set Timeout که میاد و به صورت بی نهایت اجرا می شود
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);
تفاوت مدیریت زمان اجرا بین set Interval و set Timeout
تابع set Interval در تایم هایی که اومدیم و بهش دادیم میاد و دستورات مارو اجرا میکند و طول مدت زمانی که اون تابع کدش اجرا می شود رو در نظر نمیگیرد
اما set Timeout دقیقا بعد از اینکه اجرای تابع تموم میشه timeout بعدی رو اجرا میکنه و فاصله زمانی دو تا اجرا دقیقا بر اساس اون مدلی هستش که ما بهش دادیم و به لحاظ زمانی دقیق تر از یکی بالایی هستش و منعطف تر هستش
برای توقف هم در set Timeout می توانستیم با استفاده از شرط ها و clear Set Timeout اون ها رو متوقف کنیم و در دومی هم که توضیح اش داده شد
تکنیک تاخیر صفر که یادت در مرورگر واقعا صفر نیست و یک چیزی اندازه 400 میلی سکند هستش همچنین به این تایمر ها یا set Timeout و set Interval در مرورگر اسکجول می گویند
setTimeout(()=> alert("world"));
alert("Hello")
انجام پروژه ساعت در این جلسه انجام شد
تفاوت inner Text با text Content در این هستش که inner Text میاد و فقط متونی رو به ما نشان می دهد که دیده می شوند برای مثال اگر داخل المنت امون یکسری کدی باشه که hide باشه رو به ما نشون نمی دهد space های اضافه به ما نشون نمیدهد ولی text Content تمام چیز های داخل المنت رو به ما نشون میدهد
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 :
۱- round برای رند کردن عدد های اعشاری میایم و ازش استفاده میکنیم و مقادیر بالای 0.5 رو به بالا گرد میکند و در غیر این صورت به سمت پایین گرد میکند
۲- pow برای به توان رساندن میایم و استفاده میکنیم
۳- sqrt رادیکال میگیرد از اعداد که این رادیکال بر مبنای ۲ هست
۴- abs قدرمطلق میگیرد از اعداد
۵- ceil عدد رو همیشه به سمت بالا گرد میکند
۶- floor عدد را همیشه به سمت کف یا پایین میاد و گرد میکند
برای درست کردن اعداد تصادفی در داخل جاوااسکریپت ما از تابع random استفاده میکنیم که یک عدد تصادفی بین ۱ و ۰ درست میکند
توسعه ی پروژه ی ماشین حساب :
اولین نکته برای توسعه یک ماشین حساب ساده درج دکمه هاست که به صورت زیر استفاده میکنیم
input name="b1" value="1" onclick="addCalculator(b1.value)
نکته : eval یکی از توابع جاوااسریکپت هستش که ما می توانیم بیایم و کد رو به صورت رشته بهش بدیم و اون کد رو برای ما اجرا کند
نکته : معرفی سایت utf8icons که آیکون هایی که به صورت UTF هستند رو به ما میدهد
var powerFlag = false;
function addToCalulator(value){
document.getElementById('displayResult').value += value;
if(powerFlag){
var number = document.getElementById('displayResult').value.splite('^');
document.getElementById('displayResult').value = Math.pow(numbers[0],numbers[1])
console.log(numbers)
}
}
function finilize(){
document.getElementById('displayResult').value = eval(document.getElementById('displayResult').value);
}
function reset(){
eval(document.getElementById('displayResult').value = "";
}
function mathCalculator(mathFunc){
if(mathFunc == 'pow'){
powerFlag = true;
var number = document.getElementById('displayResult').value +='^';
} else {
var val = document.getElementById('displayResult').value;
var val = document.getElementById('displayResult').value = math[mathFunc](val);
}}
مفهوم scope : محدوده ی قابل دسترسی به یک تابع یا یک متغیر برای استفاده از کد و اگر ما بیایم و از یک متغیری استفاده بکنیم که در محدوده ی متغیر ما نیستش متغیر جاوااسکریپت به ما خطای undefined بودن رو میدهد حال ما به طور کلی دو دسته اسکوپ داریم
۱ - local scope داخلی
button onclick ="alert(window.x)"
var x = 10;
۲ - global scope سراسری
نکته : در حالت گلوبال در داخل جاوااسکریپت ما بعضی موارد رو داریم که خود جاوااسکریپت میاد و گلوبالش میکند و ما از این متغیر ها می توانیم بیایم و در داخل html هم بهشون دسترسی داشته باشیم
نکته : وقتی مروگر میاد و یک صفحه وب رو باز میکند یک object بسیار سراسری به نام window رو برای ما درست میکند و در داخل آن object های DOM و BOM و جاوااسکریپت میان و شکل میگرند و متغیر های گلوبال جاوااسکریپت میان و زیر مجموعه window قرار میگیرند همچنین ما توابعی که با نام function میایم و تعریفشون میکنیم مثل خط زیر این ها به صورت گلوبال هستند و می توانیم قبل از تعریف توابع هم بیایم و ازشون استفاده بکنیم
Block scope ما می توانیم در جاوااسکریپت بیایم و خودمون یک بلاک درست کنیم و توابع و متغیر هامون رو جدا کنیم از یک بخش دیگه و متغیر ها و توابع خودمون رو داشته باشیم و فقط در داخل اون بلاک قابل استفاده هستند و بیرون اون ها قابل استفاده نیستند
مفهوم Hoisted : ما وقتی میایم و یک تابع رو به صورت تابع سازنده تعریف اش می کنیم این توابع در داخل جاوااسکریپت میان و منتقل می شن به ابتدای کد و initialize در اولین مرحله تعریف می شوند و هر جایی می توانیم از اون ها استفاده بکنیم حتی قبل از تعریف همچنین متغیر های سراسری که با var تعریف می شوند میان و به ابتدای کدهامون منتقل می شوند و ما می توانیم هر جایی که خواستیم از اون ها استفاده بکنیم فقط مطلبی که هستش این متغیر ها تعریف یا declare اشون میاد و بالا میره اون مقدار دهی شون یا assignment در همون جا می مونه و اگر ما بیایم و قبل از مقدار دهی اون ها رو فراخوانی کنیم به ما مقدار undefined رو بر میگردوند
حال به این اتفاقات در جاوااسکریپت برای توابع و متغیر هامون میوفتد می گویند Hoisted
تفاوت های let و var
۱ - در حلقه ها با let متغیر به scope حلقه محدود می شود
۲- متغیر های تعریف شده با let در global scope در window در دسترس نیستند
۳- اجازه تعریف مجدد متغیر تعریف شده با let را در همان scope نداریم
۴- متغیر های تعریف شده با let امکان hoisted شدن را ندارند
استفاده از strict mode برای انجام کد نویسی تمیز تر هستش و بهتر هستش بیایم و اون رو فعالش بکنیم تا از انجام خطا های منطقی در کدهامون جلوگیری شود
' use strict ';
در این حالت کارهای زیر را نمی توانیم بیایم و انجام بدهیم
۱ - استفاده از متغیر بدون اینکه آن را تعریف کنیم در این حالت مجاز نیستش
در حالت عادی
X = 3.14;
console.log(x) برامون نمایش میدهد و مجاز هستش
اما اگر use strict
رو فعال کنیم به ما خطا میدهد
۲ - Delete کردن متغیر ها
۳ - Delete کردن توابع
نکته : در هنگام استفاده از delete متغیر هایی که با var تعریفشون کردیم رو ما اجازه حذف کردنشون رو نداریم
var x2 = { p1:10 , p2:20 }; delete x2; console.log(x2);
در کد بالا در حالت عادی مقدار شی رو به ما نشون میدهد ولی در حالت خاص نه
۴ - استفاده از پارامتر هایی با نام تکراری در توابع
function(p1,p1){ }
۵ - تغیر یک ویژگی فقط خواندنی در آبجکت ها
var obj1 ={};
Object.defineProperty(obj1,"x",{value:0,writeable:false});
console.log(obg1.x);
obj1.x=3.14;
۶ - تغیر ویژگی های get-only در آبجکت ها که ما در این حالت می توانیم بیایم و فقط اون رو بخونیم نمی توانیم بیایم و تغیری در آن ایجاد کنیم
var obj2 = { get x(){ return 0 } }
console.log(obj2.x);
obj2.x = 355;
۷ - استفاده از کلمه eval , arguments به عنوان متغیر
۸ - استفاده از کلمات رزرو شده به عنوان نام متغیر ممنوع هستش