ورژن جدید OBS Studio 26 منتشر شده است و در دسترس است. در این ورژن نرم افزار تغییرات بسیار جالبی کرده است؛ مانند پشتیبانی از دوربین مجازی، افزودن نوار ابزار و … در این نوشتار می‌خواهیم به برخی از آنها بپردازیم. (بیشتر…)

1. مقدمه
   • تاریخچه
   • جاواسکریپت چه کارهایی می‌تواند انجام دهد؟
   • برنامه یا اسکریپت
   • شیءگرا
   • مدل آبجکت در بروزر
   • رویدادگرا
   • چگونه جاواسکریپت بنویسیم؟
2. سینتکس (Syntax)
   • قواعد دستور زبان – Syntax
   • آغاز کار در جاواسکریپت
   • آبجکت window
   • آبجکت console
   • آبجکت document
3. فرم (Forms)
   • form
   • button
   • input
   • label
4. دیتا (Data)
   • نگهداری دیتا
     • متغیر
     • ثابت
   • انواع دیتا – Data Types
     • ساده (Primitive)
       • عدد (Numbers)
       • رشته (Strings)
       • منطقی (Boolean)
     • مرکب (Composite)
       • شیء (Objects)
       • آرایه (Arrays)
       • تابع (Functions)
     • بی‌ارزش (Trivial)
       • تهی (null)
       • نامعین (undefined)
   • تبدیل دیتا
5. اکسپرشن (Expressions)
   • آپریتورهای استرینگ
   • آپریتورهای حساب
   • آپریتورهای بولین
   • آپریتورهای مقایسه‌ای
   • الویت آپریتورها
   • آبجکت Number
6. کاندیشن۱ (Conditions)
   • تِرنِری – Ternary (?)
   • شرط if
   • اسکوپ – Scope
   • آبجکت Math
7. کاندیشن۲ (Conditions)
   • سوئیچ – Switch
   • آبجکت String
8. فانکشن (Functions)
   • نوع ۱
   • نوع ۲
9. ایونت (Events)
   • روش ۱
   • روش ۲
   • روش ۳
   • ایونت‌های ماوس
10. لوپ (Loops)
    • حلقه do
    • حلقه while
    • حلقه for
    • break
    • continue
11. آرایه (Arrays)
    • تعریف
    • فانکشن
12. سلکت

برای کار بر روی بخشی از صفحه وب، باید ابتدا آن بخش را پیدا کرد. سپس با پراپرتی‌ها یا متدهای آن کار کرد.

برای سرچ در صفحه و سلکت بخشی از آن چندین متد وجود دارد.

• getElementById
• getElementsByName
• getElementsByTagName
• getElementsByClassName
• querySelector
• querySelectorAll

یافتن المنت با id

متد getElementById پرکاربردترین متد جاواسکریپت است. در فایل HTML هر المنت می‌تواند id داشته باشد. و همیشه id باید در هر فایل یکتا باشند. به زبان دیگر در یک فایل HTML دو المنت نمی‌توانند یک id مشترک داشته باشند. بنابر این هر getElementById تنها یک المنت را می‌گیرد.

<h1 id="hi">Hello World!</h1>

const hi = document.getElementById('hi');

یافتن المنت‌ها با اتریبیوت name

متد getElementsByName بر اساس اتریبیوت name در المنت‌های HTML عمل می‌کند. در فایل HTML هر المنت می‌تواند یک name داشته باشد. ولی name لازم نیست، یکتا باشند. یعنی در یک فایل HTML دو یا چند المنت می‌توانند یک name یکسان داشته باشند. و getElementsByName یک آرایه از المنت‌ها را می‌گیرد.

به حرف s در Elements توجه کنید. که همه المنت‌ها، با آن name را شامل می‌شود. این آرایه از اندیس صفر برای اولین المنت شروع می‌شود و به تعداد المنت‌های با آن name ادامه پیدا می‌کند.

<input type="text" name="firstname">

const fname = document.getElementsByName('firstname')[0];

یافتن المنت‌ها با تگ HTML

متد getElementsByTagName بر اساس Tag المنت‌های HTML جستجو می‌کند. در فایل HTML هر المنت یک Tag دارد. و getElementsByTagName یک آرایه از المنت‌ها را می‌گیرد.

به حرف s در Elements توجه کنید. که همه المنت‌ها، درون آن Tag را شامل می‌شود. این آرایه از اندیس صفر برای اولین المنت شروع می‌شود و به تعداد المنت‌های با آن Tag ادامه پیدا می‌کند.

<h1>Hello World!</h1>

const hi = document.getElementsByTagName('h3')[0];

یافتن المنت‌ها با کلاس

متد getElementsByClass بر اساس Class المنت‌های HTML جستجو می‌کند. در فایل HTML هر المنت می‌تواند یک Class داشته باشد. و getElementsByClass یک آرایه از المنت‌ها را می‌گیرد.

به حرف s در Elements توجه کنید. که همه المنت‌ها، که دارای آن Class هستند، را شامل می‌شود. این آرایه از اندیس صفر برای اولین المنت شروع می‌شود و به تعداد المنت‌های با آن class ادامه پیدا می‌کند.

<h1 class="title">Hello World!</h1>

const hi = document.getElementsByClass('title')[0];

یافتن المنت با سلکتور CSS

متد querySelector بر اساس سلکتور CSS المنت‌ها در HTML جستجو می‌کند. و querySelector اولین المنت که با شرایط سلکتور هماهنگ باشد را می‌گیرد.

<h1 class="title">Hello World!</h1>

const hi = document.querySelector('h1.title');

یافتن المنت‌ها با سلکتور CSS

متد querySelectorAll بر اساس سلکتور CSS المنت‌ها در HTML جستجو می‌کند. و querySelectorAll یک آرایه از المنت‌هایی که با شرایط سلکتور هماهنگ باشد را می‌گیرد.

این آرایه از اندیس صفر برای اولین المنت شروع می‌شود و به تعداد المنت‌های با آن شرایط هماهنگ باشد، ادامه پیدا می‌کند.

<h1 class="title">Hello World!</h1>

const hi = document.querySelectorAll('h1.title')[0];

آرایه (Array) چندین متغیر با یک نام است. هر یک از متغیرهای درون آرایه با یک شماره که به آن ایندکس (Index) می‌گوییم؛ از یکدیگر متمایز می‌شوند. هر یک از متغیرهای درون آرایه را اِلمنت‌، می‌نامند.

قواعد نام گذاری آرایه

• قواعد نامگذاری آرایه همانند متغیر است.
• ایندکس درون […] بِرَکِت Square Bracket نوشته می‌شود.
• ایندکس همیشه از عدد صفر آغاز می‌شود.

مراحل استفاده از آرایه

• Declare: تعیین نام آرایه و اختصاص فضا در حافظه
• Assignment: نوشتن مقدار در آن
• Access: خواندن مقدار از آن

روش‌های استفاده از آرایه

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Access
alert(color[0]);    // red
alert(color[1]);    // gold
alert(color[2]);    // olive
alert(color[3]);    // beige
alert(color[4]);    // khaki

// Declare
let color = [];

// Assignment
color[0] = "red";
color[1] = "gold";
color[2] = "olive";
color[3] = "beige";
color[4] = "khaki";

// Access
alert(color[0]);    // red
alert(color[1]);    // gold
alert(color[2]);    // olive
alert(color[3]);    // beige
alert(color[4]);    // khaki

---

تغییر مقدار یک المنت

شما همیشه می‌توانید مقدار درون هر یک از المنت‌های آرایه را تغییر دهید.

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Access
alert(color[2]);    // olive

// Change
color[2] = "lime";

// Access
alert(color[2]);    // lime

---

افزودن یک المنت

شما همیشه می‌توانید یک المنت، به انتهای آرایه بیفزایید.

// Declare & Assignment
let color = ["red", "gold", "olive", "beige"];

// Access
alert(color[4]);    // undefined 

// Add Element
color[4] = "khaki";

// Access
alert(color[4]);    // khaki

---

arr.length

تعداد المنت‌های آرایه را ارائه می‌کند.

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Count
alert(color.length);    // 5

// Add element
color[5] = "lime";

// Count
alert(color.length);    // 6

---

حفره تعریف نشده

افزودن المنت می‌تواند در بین آرایه حفره تعریف نشده (undefined holes) ایجاد کند.

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Count
alert(color.length);    // 5

// Add element
color[7] = "lime";

// Count
alert(color.length);    // 8

---

arr.push(elm1, elm2, …)

برای پرهیز از ایجاد حفره تعریف نشده، با این دستور یک یا چند المنت به انتهای آرایه بیفزایید.

این فانکشن تعداد جدید المنت‌های آرایه را برمی‌گرداند.

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Count
alert(color.length);    // 5

// Add element
let n = color.push("lime");

// Access
alert(n);    // 6
alert(color) // red, gold, olive, beige, khaki, lime

---

arr.pop( )

آخرین المنت آرایه را حذف می‌کند و مقدار آن را برمی‌گرداند.

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Count
alert(color.length);    // 5

// Add element
let c = color.pop();

// Access
alert(c);    // khaki
alert(color) // red, gold, olive, beige

---

arr.shift( )

اولین المنت آرایه را حذف می‌کند و مقدار آن را برمی‌گرداند.

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Count
alert(color.length);    // 5

// Add element
let c = color.shift();

// Access
alert(c);    // red
alert(color) // gold, olive, beige, khaki

---

arr.unshift(elm1, elm2, …)

یک یا چند المنت به ابتدای آرایه می‌افزاید. و تعداد جدید المنت‌های آرایه را برمی‌گرداند.

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Count
alert(color.length);    // 5

// Add element
let n = color.unshift("lime");

// Access
alert(n);    // 6
alert(color) // lime, red, gold, olive, beige, khaki

---

arr.splice(start, delCount, elm1, elm2, …)

یک یا چند المنت در میان آرایه حذف یا اضافه می‌کند. المنت‌های حذف شده را برمی‌گرداند.

// Declare & Assignment
let color1 = ["red", "gold", "olive", "beige", "khaki", "lime"];

// Splice
let color2 = color1.splice(3);

// Access
alert(color1);    // red, gold, olive
alert(color2);    // beige, khaki, lime

// Declare & Assignment
let color1 = ["red", "gold", "olive", "beige", "khaki", "lime"];

// Splice
let color2 = color1.splice(3,2);

// Access
alert(color1);    // red, gold, olive, lime
alert(color2);    // beige, khaki

// Declare & Assignment
let color1 = ["red", "gold", "olive", "beige", "khaki", "lime"];

// Splice
let color2 = color1.splice(3,2, "pink", "blue", "tan");

// Access
alert(color1);    // red, gold, olive, pink, blue, tan, lime
alert(color2);    // beige, khaki

// Declare & Assignment
let color1 = ["red", "gold", "olive", "beige", "khaki", "lime"];

// Splice
let color2 = color1.splice(3, 0, "pink", "tan");

// Access
alert(color1);  // red, gold, olive, pink, tan, beige, khaki, lime
alert(color2);  // []

---

arr.concat(arrX, arrY, …)

دو یا چند آرایه را به هم پیوند می‌دهد و یک آرایه برمی‌گرداند.

// Declare & Assignment
let color = [];
let color1 = ["red", "gold", "olive"];
let color2 = ["beige", "khaki", "lime"];

color = color1.concat(color2);

// Access
alert(color1);    // red, gold, olive
alert(color2);    // beige, khaki, lime
alert(color);    // red, gold, olive, beige, khaki, lime

---

arr.sort( )

المنت‌های یک آرایه را به ترتیب الفبا، مرتب می‌کند. و المنت‌های تعریف نشده را حذف می‌کند.

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki", "lime"];

color.sort();

// Report
alert(color);  // beige, gold, khaki, lime, olive, red

---

arr.sort(function(a, b) {…})

استفاده از متد sort بدون پارامتر، آرایه را به ترتیب الفبا مرتب می‌کند. بنابراین اگر به ترتیب عدد یا ترتیب دیگری بخواهید sort کنید؛ باید از یک فانکشن برای مقایسه استفاده کنید. این فانکشن دو پارامتر را می‌گیرد و پس از انجام عملیات روی آنها، یک عدد برمی‌گرداند. مثبت یا منفی بودن آن عدد نشان می‌دهد که کدامیک از دو پارامتر باید قبل از دیگری باشد.

• اگر function(a, b) < 0 بود؛ a قبل از b
• اگر function(a, b) = 0 بود؛ جای a و b تغییر نمی‌کند.
• اگر function(a, b) > 0 بود؛ a بعد از b

اگر بخواهید یک مجموعه از اعداد را از کوچک به بزرگ sort کنید می‌توانید از فانکشن زیر استفاده نمایید.

const compare = function(a, b) {

  if (a < b) { return -1; }

  if (a > b) { return 1;  }

  // a = b
  return 0;
}

// Short form
const compare = function(a, b) {
  return a - b;
}

// Arrow form
const compare = (a, b) => a - b;

این فانکشن را می توانید مستقیما در sort تعریف کنید.

// Declare & Assignment
let num = [4, 2, 5, 1, 3];

num.sort((a, b) => a - b);

// Report
alert(num);  // 1, 2, 3, 4, 5

---

arr.filter(function(value, index) {…})

با المنت‌هایی که تست را پاس کنند، یک آرایه جدید می سازد.

• متد filter یک فانکشن را به عنوان پارامتر می‌گیرد.
• این فانکشن دو پارامتر می‌تواند داشته باشد. اولی مقدار المنت و دومی ایندکس آن.
• باید این فانکشن مقدار true یا false را برگرداند.

مثال زیر المنت‌های فرد را حذف می‌کند.

// Declare & Assignment
let num = [4, 2, 5, 1, 3];

let result = num.filter(val => val % 2 == 0);

// Report
alert(result);  // 4, 2

---

arr.map(function(value, index) {…})

یک فانکشن را روی همه المنت‌های آرایه اجرا می‌کند و آرایهٔ جدید می‌سازد.

• متد map یک فانکشن را به عنوان پارامتر می‌گیرد.
• این فانکشن دو پارامتر می‌تواند داشته باشد. اولی مقدار المنت و دومی ایندکس آن.
• مقدار بازگشتی این فانکشن در آرایه جدید قرار می‌گیرد.

مثال زیر مقدار هر المنت‌ را دو برابر می‌کند.

// Declare & Assignment
let num = [4, 2, 5, 1, 3];

let result = num.map(val => val * 2);

// Report
alert(result);  // 8, 4, 10, 2, 6

تمرین ۱

• این فایل را دانلود کنید.
• آن را در فولدر js1 باز کنید.
• تنها فایل script.js را می‌توانید تغییر دهید.
• ابتدا تعدادی عدد را بگیرد سپس میانه آنها را محاسبه و گزارش کند. (تعداد اعداد از پیش معلوم نیست.)

حلقه تکرار – Iterative Loop

گاهی شما می‌خواهید قطعه‌ای از کد، چندین بار اجرا شود. در این صورت باید از حلقه تکرار استفاده کنید. (بیشتر…)