شرح مفصل آرایه ها / Arrays در جاوا اسکریپت

آرایه ها یکی از جنبه های اساسی جاوا اسکریپت هستند که به توسعه دهندگان اجازه می دهند چندین مقدار را در یک ساختار داده سازمان یافته ذخیره کنند. آنها می توانند هر نوع مقداری، از رشته ها و اعداد گرفته تا ساختارهای پیچیده تر مانند اشیاء یا حتی آرایه های دیگر را در خود نگه دارند. بیایید عمیق‌تر در آرایه‌ها غوطه‌ور شویم، پیچیدگی‌های آن‌ها را درک کنیم، و یاد بگیریم چگونه آنها را به طور مؤثر دستکاری کنیم.

ایجاد و راه اندازی آرایه ها

آرایه ها با قرار دادن لیستی از عناصر جدا شده با کاما در داخل پرانتز ایجاد می شوند. این عناصر می توانند از هر نوع باشند، از جمله اعداد، رشته ها و یا حتی آرایه های دیگر (منجر به آرایه های چند بعدی):

const myArray = [‘apple’, ‘banana’, ‘cherry’];

console.log(myArray); // Outputs: [‘apple’, ‘banana’, ‘cherry’]

دسترسی به آیتم های آرایه

به هر عنصر در یک آرایه یک شاخص متوالی اختصاص داده می شود که با 0 شروع می شود. این دستور اولین آیتم آرایه را که ‘apple’ است فچ  می کند:

const myArray = [‘apple’, ‘banana’, ‘cherry’];
console.log(myArray[0]); // Outputs: apple

اصلاح آیتم های آرایه

شما می توانید یک آیتم موجود در یک آرایه را با استفاده از فهرست آن تغییر دهید. برای به روز رسانی آرایه، مقدار جدیدی به آیتم در شاخص مشخص شده اختصاص دهید. در اینجا، مورد دوم را از “موز” به “blueberry” تغییر دادیم:

const myArray = [‘apple’, ‘banana’, ‘cherry’];
myArray[1] = ‘blueberry’;

console.log(myArray); // Outputs: [‘apple’, ‘blueberry’, ‘cherry’]

دسترسی و اصلاح آیتم های آرایه

به هر عنصر در یک آرایه یک شاخص متوالی اختصاص داده می شود که با 0 شروع می شود. این دستور اولین آیتم آرایه را که ‘apple’ است فچ  می کند:

const myArray = [‘apple’, ‘banana’, ‘cherry’];
console.log(myArray[0]); // Outputs: apple

آرایه های چند بعدی – Multidimensional Arrays

آرایه‌ای که شامل آرایه‌های دیگری به عنوان عناصر خود است، به عنوان آرایه چند بعدی شناخته می‌شود. می‌توانید با زنجیره‌ای کردن شاخص‌ها با استفاده از علامت‌گذاری براکت، به موارد موجود در یک آرایه چند بعدی دسترسی داشته باشید. این به آیتم دوم (شاخص 1) در آیتم سوم (شاخص 2) MultiArray که عدد 1 است دسترسی پیدا می کند:

const multiArray = [‘tree’, 795, [0, 1, 2]];

console.log(multiArray[2][1]); // Outputs: 1

ویژگی ها و روش های آرایه / Array Properties and Methods

ویژگی length

ویژگی length یک آرایه تعداد عناصر موجود در آن را برمی گرداند.

const myArray = [‘apple’, ‘banana’, ‘cherry’];
console.log(myArray.length); // Outputs: 3

افزودن و حذف موارد

Push and Pop: موارد را با push() به انتهای آرایه اضافه کنید و آخرین مورد را با pop(() حذف کنید.

const myArray = [‘apple’, ‘banana’, ‘cherry’];
myArray.push(‘dates’); // Adds ‘dates’ to the end

myArray.pop(); // Removes the last item, ‘dates’

Unshift و Shift: به طور مشابه، unshift () موارد را به ابتدا اضافه می کند و shift() اولین مورد را حذف می کند.

myArray.unshift(‘kiwi’); // Adds ‘kiwi’ at the beginning

myArray.shift(); // Removes the first item, ‘kiwi’

یافتن آیتم ها و شاخص ها

indexOf(): شاخص اولین رخداد یک عنصر مشخص را پیدا می کند.

console.log(myArray.indexOf(‘cherry’)); // Outputs: 2

include(): بررسی می کند که آیا یک آرایه حاوی مقدار خاصی است یا خیر.

console.log(myArray.includes(‘banana’)); // Outputs: false

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

حلقه روی آرایه ها – Looping over Arrays

حلقه زدن روی آرایه ها جنبه اساسی کار با لیست های داده در جاوا اسکریپت است. حلقه ها به شما امکان می دهند یک بلوک کد را به طور مکرر اجرا کنید و آنها را برای انجام عملیات روی هر آیتم در یک آرایه بسیار مفید می کند. بیایید روش های مختلف برای حلقه زدن آرایه ها را با جزئیات بررسی کنیم.

حلقه for

حلقه for سنتی روشی همه کاره برای تکرار روی یک آرایه است. به تنظیم یک شمارنده اولیه، شرطی که باید برای ادامه حلقه درست باشد، و یک عبارت افزایشی نیاز دارد.

مثال:

const fruits = [‘Apple’, ‘Banana’, ‘Cherry’];

for (let i = 0; i < fruits.length; i++) {

   console.log(fruits[i]);

}

در این مثال، i از 0 شروع می شود و تا زمانی که i کمتر از طول آرایه میوه ها باشد، حلقه ادامه می یابد. پس از هر تکرار، i 1 افزایش می یابد.

حلقه برای… از – For…of

حلقه for…of که در ES6 معرفی شد، نحو ساده‌تری را برای تکرار روی اشیاء تکرارپذیر مانند آرایه‌ها فراهم می‌کند. این نیاز به دسترسی مستقیم به طول آرایه یا استفاده از یک شاخص برای دسترسی به آیتم های آرایه را از بین می برد.

مثال:

for (const fruit of fruits) {

   console.log(fruit);

}

این حلقه روی هر میوه در آرایه میوه‌ها تکرار می‌شود و مستقیماً مقدار هر آیتم را به متغیر میوه در هر تکرار اختصاص می‌دهد.

متد forEach()

متد forEach() یک روش آرایه ای است که یک تابع ارائه شده را یک بار برای هر عنصر آرایه اجرا می کند. این بخشی از نمونه اولیه Array است و رویکرد برنامه نویسی کاربردی تری را ارائه می دهد.

مثال:

fruits.forEach(function(fruit, index) {

   console.log(index, fruit);

});

()forEach آیتم فعلی، شاخص آن و کل آرایه را در طول هر تکرار به تابع callback ارسال می کند. اگر به ایندکس یا آرایه نیاز ندارید، می توانید این پارامترها را حذف کنید:

fruits.forEach(fruit => console.log(fruit));

روش نقشه () – The map() Method

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

مثال:

const upperCasedFruits = fruits.map(fruit => fruit.toUpperCase());

console.log(upperCasedFruits);

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

نکاتی برای حلقه زدن آرایه ها

• انتخاب حلقه مناسب: برای تکرار ساده، for…of و forEach () جایگزین‌های مدرن‌تر و خواناتری برای حلقه for سنتی هستند. زمانی که نیاز به تبدیل عناصر و ایجاد یک آرایه جدید دارید، از map() استفاده کنید.

• ملاحظات عملکرد: در حالی که forEach()، for…of، و map() نحو تمیزتری را ارائه می دهند، حلقه for سنتی ممکن است در برخی سناریوها، به ویژه برای آرایه های بزرگ، مزایای عملکرد جزئی را ارائه دهد. با این حال، برای بیشتر موارد استفاده، تفاوت ناچیز است.

• تکرار به عقب: اگر نیاز دارید از طریق یک آرایه به ترتیب معکوس حلقه بزنید، یک حلقه for سنتی که در آن شمارنده را کاهش می دهید می تواند ساده تر باشد.

حلقه زدن روی آرایه ها یک تکنیک اصلی در برنامه نویسی جاوا اسکریپت است که به شما امکان می دهد داده های لیست را به طور موثر پردازش و دستکاری کنید. چه در حال جمع‌آوری امتیازات، ایجاد نشانه‌گذاری HTML از داده‌ها، یا انجام محاسبات بر روی اقلام مجموعه‌ای هستید، تسلط بر تکرار آرایه به طور قابل توجهی توانایی شما را برای کار با داده‌های پویا در برنامه‌هایتان افزایش می‌دهد. برای یافتن بهترین مناسب برای سناریوها و ترجیحات خاص خود، این روش های مختلف حلقه را آزمایش کنید.

تصمیم گیری: تسلط بر شرایط در جاوا اسکریپت

تصمیم گیری در کد شما: تسلط بر شرایط در جاوا اسکریپت

در برنامه نویسی، درست مانند زندگی واقعی، اغلب نیاز به تصمیم گیری داریم. این تصمیمات بر اساس شرایط مختلف، با تقلید از فرآیند تصمیم گیری منطقی، جریان اجرا را تعیین می کنند. جاوا اسکریپت راه های مختلفی برای انجام بررسی های شرطی و اجرای کد بر اساس آن ارائه می دهد و برنامه های شما را قادر می سازد به صورت پویا به ورودی ها یا موقعیت های مختلف پاسخ دهند. در این فصل، ما عمیقاً به عبارات شرطی در جاوا اسکریپت می پردازیم، نحو، استفاده و بهترین شیوه ها را از طریق مثال های دنیای واقعی بررسی می کنیم.

درک عبارات مشروط

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

بیانیه if

ساده ترین شکل شرطی عبارت if است. اگر شرط مشخص شده درست باشد، یک بلوک کد را اجرا می کند.

مثال: فرض کنید می‌خواهیم بررسی کنیم که آیا سن یک کاربر به اندازه کافی برای دسترسی به بخش خاصی از وب‌سایت کافی است یا خیر.

let age = 20;

if (age >= 18) {

   console.log(“Access granted.”);

}

بیانیه دیگر- else

اغلب، اگر شرط درست نباشد، می خواهید یک عمل جایگزین انجام دهید. اینجاست که عبارت else وارد می شود.

مثال: درپی مثال قبلی برای رسیدگی به کاربران زیر سن قانونی:

if (age >= 18) {

   console.log(“Access granted.”);

} else {

   console.log(“Access denied. You must be at least 18 years old.”);

}

بیانیه else if 

برای چند شرط، اگر شرط اول نادرست است، از else if استفاده کنید تا یک شرط جدید را مشخص کنید.

مثال: اضافه کردن یک شرط تخفیف بر اساس سن:

if (age < 18) {

   console.log(“Access denied. You must be at least 18 years old.”);

} else if (age >= 65) {

   console.log(“Access granted. You’re eligible for a senior citizen discount.”);

} else {

   console.log(“Access granted.”);

}

Nested if Statements

می‌توانید برای بررسی چند شرط، دستورهای if را درون یکدیگر قرار دهید.

مثال: بررسی شرایط چندگانه برای دسترسی یک رویداد خاص:

let age = 25;

let specialPass = true;

if (age >= 18) {

   if (specialPass) {

       console.log(“Access to special event granted.”);

   } else {

       console.log(“Standard access granted.”);

   }

} else {

   console.log(“Access denied.”);

}

اپراتورهای مقایسه – Comparison Operators

عملگرهای مقایسه (==، !=، ===، !==، >، <، >=، <=) در شرایط شرطی برای مقایسه مقادیر استفاده می شوند.

== برابری را بررسی می کند.

=== برابری دقیق (مقدار و نوع) را بررسی می کند.

!= و !== به ترتیب نابرابری و نابرابری شدید را بررسی کنید.

>، <، >=، <= مقادیر عددی را مقایسه کنید.

عملگرهای منطقی – Logical Operators

عملگرهای منطقی (&&، ||، !) اجازه ترکیب چند شرط را می دهند.

&& (AND) درست بودن هر دو شرط را بررسی می کند.

|| (OR) بررسی می کند که آیا حداقل یک شرط درست است یا خیر.

! (NOT) یک شرط را نفی می کند.

مثال: بررسی شرایط متعدد برای ارتقاء:

let hasCoupon = true;

let purchaseAmount = 50;

if (hasCoupon && purchaseAmount > 40) {

   console.log(“You get a 10% discount!”);

}

اپراتور سه گانه – The Ternary Operator

عملگر سه گانه مخفف عبارات if-else است که برای شرطی های ساده استفاده می شود.

مثال: اعطای تخفیف بر اساس سن:

let discount = (age >= 65) ? “10% discount” : “No discount”;

console.log(discount);

بیانیه سوئیچ – The switch Statement

دستور switch برای بررسی های چندگانه در برابر یک مقدار واحد استفاده می شود. این جایگزینی برای چندین شرط if-else است.

مثال: تخصیص نقش ها بر اساس نوع کاربر:

let userType = “admin”;

switch (userType) {

   case “admin”:

       console.log(“Full access”);

       break;

   case “editor”:

       console.log(“Access to editing”);

       break;

   default:

       console.log(“Basic access”);

}

عبارات شرطی برای ایجاد برنامه های کاربردی وب پویا و تعاملی ضروری هستند. با درک نحوه استفاده از if، else if، else، شرط های تودرتو، عملگر سه تایی و دستور switch، می توانید جریان برنامه های جاوا اسکریپت خود را به طور موثر کنترل کنید. این ابزارها به شما امکان می‌دهند در کد خود تصمیم بگیرید و به برنامه‌های منطقی‌تر، کارآمدتر و پاسخگوتر کاربر منجر شود. استفاده از این شرطی ها را با سناریوهای مختلف تمرین کنید تا قدرت و انعطاف پذیری آنها را به طور کامل درک کنید.

بیایید مثال‌های ارائه‌شده در بحث در مورد عبارات شرطی در جاوا اسکریپت را با ترکیب HTML و CSS برای ایجاد یک سناریوی کامل‌تر گسترش دهیم. این به نشان دادن نحوه کار جاوا اسکریپت، HTML و CSS برای ساخت صفحات وب تعاملی کمک می کند.

سناریو: تأیید سن برای دسترسی به وب سایت

وب سایتی را تصور کنید که برای دسترسی به محتوای خاصی نیاز به تأیید سن دارد. ما از یک فرم ساده HTML برای بدست آوردن سن کاربر استفاده می کنیم و سپس برای تعیین سطح دسترسی از شرطی های جاوا اسکریپت استفاده می کنیم. علاوه بر این، ما از CSS برای یک ظاهر طراحی اولیه استفاده خواهیم کرد.

HTML

ابتدا، اجازه دهید یک فرم HTML ایجاد کنیم که در آن کاربران می توانند سن خود را وارد کنند، و یک مکان نگهدار که در آن پیام نمایش داده می شود.

<!DOCTYPE html>

<html lang=”en”>

<head>

   <meta charset=”UTF-8″>

   <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

   <title>Age Verification</title>

   <link rel=”stylesheet” href=”style.css”>

</head>

<body>

   <h1>Age Verification</h1>

   <form id=”ageForm”>

       <input type=”number” id=”ageInput” placeholder=”Enter your age”>

       <button type=”button” onclick=”verifyAge()”>Submit</button>

   </form>

   <div id=”message”></div>

   <script src=”script.js”></script>

</body>

</html>

CSS (style.css)

حالا، بیایید یک استایل اولیه اضافه کنیم تا فرم کمی زیباتر به نظر برسد.

body {

   font-family: Arial, sans-serif;

   margin: 0;

   padding: 20px;

   background-color: #f4f4f4;

}

h1 {

   color: #333;

}

#ageForm {

   margin-top: 20px;

}

#ageInput {

   padding: 10px;

   margin-right: 10px;

   border-radius: 5px;

   border: 1px solid #ddd;

}

button {

   padding: 10px;

   border: none;

   border-radius: 5px;

   background-color: #007bff;

   color: white;

   cursor: pointer;

}

button:hover {

   opacity: 0.9;

}

#message {

   margin-top: 20px;

}

جاوا اسکریپت (script.js)

در نهایت، بیایید منطق را با جاوا اسکریپت پیاده سازی کنیم. ما از عبارت if-else برای تعیین سطح دسترسی بر اساس سن وارد شده توسط کاربر استفاده خواهیم کرد.

// تابع ‘verifyAge’ را برای بررسی سن کاربر و ارائه پیام مناسب بر اساس آن تعریف کنید

function verifyAge() {

  // بازیابی مقدار سن وارد شده توسط کاربر در فیلد ورودی با شناسه ‘ageInput’

   let age = document.getElementById(‘ageInput’).value;

// یک متغیر «پیام» را برای نگه داشتن پیام دسترسی که به کاربر نمایش داده می شود، راه اندازی کنید

   let message = ”;

// از عبارت if-else if-else برای تنظیم پیام های مختلف بر اساس ورودی سن استفاده کنید

   if (age < 18) {

// اگر سن شما کمتر از 18 سال است، پیامی مبنی بر انکار دسترسی به دلیل محدودیت سنی تنظیم کنید

       message = ‘Access denied. You must be at least 18 years old.’;

   } else if (age >= 65) {

// اگر سن 65 سال یا بیشتر است، پیامی را تنظیم کنید که اجازه دسترسی و ذکر تخفیف برای شهروند سالمند را می دهد.

       message = “Access granted. You’re eligible for a senior citizen discount.”;

   } else {

// برای سنین بین 18 تا 64 سال (شامل)، پیامی تنظیم کنید که به سادگی اجازه دسترسی را می دهد

       message = ‘Access granted.’;

   }

// عنصر HTML را با شناسه «پیام» پیدا کنید و محتوای متنی آن را روی متغیر «پیام» تنظیم کنید.

     // این پیام دسترسی کاربر را بر اساس ورودی سن آنها نمایش می دهد

   document.getElementById(‘message’).innerText = message;

}

توضیح

• HTML: ساختار شامل یک فرم برای ورودی سن و یک div برای نمایش پیام ها است. با کلیک روی دکمه، تابع verifyAge تعریف شده در فایل جاوا اسکریپت را فراخوانی می کند.

• CSS: سبک‌هایی اضافه می‌شوند تا ظاهر فرم و صفحه به طور کلی بهبود یابد. این شامل یک ظاهر طراحی شده برای بدنه، فرم، جعبه ورودی، دکمه و div پیام است.

• جاوا اسکریپت: این اسکریپت سن وارد شده توسط کاربر را می گیرد و از منطق شرطی برای تعیین پیام برای نمایش استفاده می کند. سپس پیام در div با پیام شناسه نمایش داده می شود.

با ادغام HTML، CSS و جاوا اسکریپت، ما یک سیستم تأیید سن ساده و در عین حال تعاملی ایجاد کرده ایم. کاربران می توانند سن خود را وارد کنند و بسته به مقدار، پیام مربوطه در مورد سطح دسترسی آنها نمایش داده می شود. این مثال قدرت جاوا اسکریپت را برای افزودن تعامل به صفحات وب، نشان دادن اصول دستکاری DOM و منطق شرطی نشان می دهد.

قدرت حلقه ها / Loops در جاوا اسکریپت

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

چرا حلقه ها اهمیت دارند

حلقه ها در برنامه نویسی برای خودکارسازی کارهای تکراری ضروری هستند. چه در حال پردازش مجموعه‌ای از داده‌ها، تولید عناصر UI پویا یا پیاده‌سازی منطق بازی باشید، حلقه‌ها یک رویکرد ساده برای اجرای چندین بار یک بلوک کد ارائه می‌دهند. این نه تنها در زمان صرفه جویی می کند، بلکه افزونگی کد را نیز به حداقل می رساند و اسکریپت های شما را خواناتر و قابل نگهداری تر می کند. بدون حلقه‌ها، انجام چندین بار یک عمل یکسان مستلزم نوشتن کد آن عمل در هر بار اجرای آن است که باعث طولانی‌تر شدن کد، نگهداری سخت‌تر و مستعد خطا می‌شود.

مثال: نمایش فهرستی از نام ها

تصور کنید لیستی از اسامی دارید که می خواهید در یک صفحه وب نمایش دهید. با یک حلقه، می توانید به راحتی در لیست تکرار کنید و هر نام را تنها با چند خط کد نمایش دهید. بیایید ببینیم این سناریو با و بدون استفاده از یک حلقه چگونه به نظر می رسد.

با یک حلقه

const names = [“Alice”, “Bob”, “Charlie”, “Diana”];

for (let i = 0; i < names.length; i++) {

   console.log(names[i]);

}

در این مثال، صرف نظر از تعداد نام‌ها در آرایه، حلقه for به طور موثر نمایش همه آنها را با یک بلوک مختصر از کد کنترل می‌کند.

بدون حلقه

بدون استفاده از حلقه، باید به صورت دستی یک عبارت برای نمایش هر نام بنویسید. برای همان لیست اسامی، کد چیزی شبیه به این خواهد بود:

const names = [“Alice”, “Bob”, “Charlie”, “Diana”];

console.log(names[0]); // Alice

console.log(names[1]); // Bob

console.log(names[2]); // Charlie

console.log(names[3]); // Diana

این رویکرد نه تنها ناکارآمد است بلکه مقیاس پذیر نیز نیست. اگر لیست به صدها یا هزاران نام افزایش یابد، نوشتن دستی یک عبارت console.log برای هر یک غیر عملی است. علاوه بر این، افزودن یا حذف نام‌ها از لیست نیاز به تغییر کد برای تنظیم تعداد عبارات دارد و خطر خطا را افزایش می‌دهد.

تاثیر حلقه ها

مقایسه به وضوح نشان می دهد که چرا حلقه ها در برنامه نویسی بسیار مهم هستند:

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

• قابلیت نگهداری: با حلقه ها، افزودن یا حذف موارد از یک لیست نیازی به تغییر در خود حلقه ندارد و حفظ کد را آسان تر می کند.

• مقیاس پذیری: حلقه ها می توانند هر تعداد آیتم را مدیریت کنند، و کد شما را مقیاس پذیرتر و سازگارتر با اندازه های مختلف داده می کند.

به طور خلاصه، حلقه ها یک ابزار اساسی در جعبه ابزار برنامه نویس هستند که کدهای کارآمدتر، خوانا و قابل نگهداری را امکان پذیر می کنند. بدون حلقه، مدیریت وظایف تکراری دشوار و مستعد خطا خواهد بود، به ویژه با افزایش پیچیدگی و اندازه داده ها. جاوا اسکریپت انواع مختلفی از حلقه ها را ارائه می دهد که هر کدام برای سناریوهای مختلف مناسب هستند. بیایید این ساختارهای حلقه‌ای را با مثال‌های واقعی بررسی کنیم:

حلقه for

حلقه for همه کاره ترین ساختار حلقه در جاوا اسکریپت است. این برای موقعیت هایی ایده آل است که از قبل می دانید چند بار باید یک بلوک کد را اجرا کنید.

مثال: ایجاد لیستی از اعداد زوج تا حد معین.

for (let i = 0; i <= 10; i += 2) {

   console.log(i); // Outputs even numbers from 0 to 10

}

حلقه while

حلقه while زمانی مناسب است که تعداد تکرارها قبل از شروع حلقه مشخص نباشد. تا زمانی که شرایط آن به درستی ارزیابی شود، ادامه می یابد.

مثال: یافتن فاکتوریل یک عدد.

let num = 5;

let factorial = 1;

while (num > 1) {

   factorial *= num;

   num–;

}

console.log(factorial); // Outputs: 120

حلقه do…while

حلقه do…while مشابه حلقه while است، اما تضمین می کند که بلوک کد حداقل یک بار اجرا شود.

مثال: اعتبار سنجی ورودی کاربر.

let input;

do {

   input = prompt(“Enter a number greater than 5”, “”);

} while (input <= 5);

حلقه for…of

حلقه for…of یک نحو ساده برای تکرار بر روی اشیاء تکرارپذیر مانند آرایه ها و رشته ها فراهم می کند.

مثال: تکرار روی آرایه ای از نام ها.

const names = [“Alice”, “Bob”, “Charlie”];

for (const name of names) {

   console.log(name);

}

حلقه for…in 

اگرچه منحصراً برای آرایه ها نیست، حلقه for…in برای تکرار روی کلیدهای یک شی استفاده می شود.

مثال: چاپ خواص شی.

const person = {name: “Alice”, age: 25};

for (const key in person) {

   console.log(`${key}: ${person[key]}`);

}

استفاده بهینه از حلقه ها

ترکیب حلقه ها با دستورات شرطی

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

مثال: فیلتر کردن اعداد زوج از یک آرایه.

const numbers = [1, 2, 3, 4, 5, 6];

const evenNumbers = [];

for (const number of numbers) {

   if (number % 2 === 0) {

       evenNumbers.push(number);

   }

}

console.log(evenNumbers); // Outputs: [2, 4, 6]

بیانیه های کنترل حلقه Loop Control Statements

break: حلقه را خاتمه می دهد.

continue: بقیه تکرار حلقه را رد می کند و با مورد بعدی ادامه می دهد.

مثال: بیرون آمدن از یک حلقه زمانی که یک شرط برآورده شود.

for (let i = 0; i < numbers.length; i++) {

   if (numbers[i] === 4) {

       console.log(“Number 4 found, stopping loop.”);

       break;

   }

}

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

مثال حلقه‌ها

بیایید مثال نمایش لیستی از نام‌ها با حلقه‌ها را با ادغام HTML و CSS تقویت کنیم تا نه تنها نشان دهیم که حلقه‌ها چگونه در جاوا اسکریپت کار می‌کنند، بلکه چگونه در یک صفحه وب کامل ادغام می‌شوند. این نشان می دهد که چگونه HTML، CSS و جاوا اسکریپت می توانند برای نمایش پویا محتوا با هم کار کنند.

HTML

ابتدا یک ساختار ساده HTML راه اندازی می کنیم. ما یک لیست نامرتب (<ul>) خواهیم داشت که در آن آیتم های لیست (<li>) را به صورت برنامه نویسی برای هر نام درج می کنیم.

<!DOCTYPE html>

<html lang=”en”>

<head>

   <meta charset=”UTF-8″>

   <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

   <title>Name Display</title>

   <link rel=”stylesheet” href=”style.css”>

</head>

<body>

   <h1>Names List</h1>

   <ul id=”namesList”></ul>

   <script src=”script.js”></script>

</body>

</html>

CSS (styles.css)

در مرحله بعد، چند سبک اساسی را اضافه کنید تا لیست از نظر بصری جذاب شود.

body {

   font-family: Arial, sans-serif;

   padding: 20px;

   background-color: #f0f0f0;

}

h1 {

   color: #333;

}

ul {

   list-style-type: none;

   padding: 0;

}

li {

   background-color: #fff;

   border: 1px solid #ddd;

   padding: 8px;

   margin-bottom: 5px;

   border-radius: 4px;

   box-shadow: 0 2px 4px rgba(0,0,0,0.1);

}

جاوا اسکریپت (script.js)

در نهایت، اجازه دهید از جاوا اسکریپت برای درج پویا هر نام در لیست با استفاده از یک حلقه استفاده کنیم. آرایه نام‌ها را از قبل و برای هر نام می‌گیریم، یک عنصر <li> جدید ایجاد می‌کنیم، محتوای متن آن را روی نام فعلی تنظیم می‌کنیم و آن را به <ul> اضافه می‌کنیم.

document.addEventListener(‘DOMContentLoaded’, () => {

   const names = [“Alice”, “Bob”, “Charlie”, “Diana”];

   const list = document.getElementById(‘namesList’);

   for (let i = 0; i < names.length; i++) {

       const item = document.createElement(‘li’);

       item.textContent = names[i];

       list.appendChild(item);

   }

});

توضیح

• HTML: ساختار صفحه را تنظیم می کند، از جمله یک عنوان و یک لیست خالی نامرتب که در آن نام ها به صورت پویا درج می شوند.

•  <h1>Names List</h1>

•  <ul id=”namesList”></ul>

• CSS: یک ظاهر طراحی برای صفحه و موارد فهرست، از جمله چیدمان اولیه و زیبایی‌شناسی مانند رنگ پس‌زمینه، بالشتک‌ها، حاشیه‌ها و سایه جعبه برای ظاهر بصری دلپذیر ارائه می‌کند.

• جاوا اسکریپت: منتظر می ماند تا DOM به طور کامل بارگیری شود (رویداد DOMContentLoaded) قبل از اجرای اسکریپت برای اطمینان از در دسترس بودن عناصری مانند لیست نامرتب. سپس از یک حلقه for برای تکرار در میان آرایه نام ها استفاده می کند، یک آیتم لیست جدید برای هر نام ایجاد می کند و آن را به لیست نامرتب در HTML اضافه می کند. این نشان می دهد که چگونه حلقه ها در جاوا اسکریپت می توانند برای تولید و نمایش پویا محتوا در یک صفحه وب بر اساس داده ها استفاده شوند.

در این مثال یکپارچه، ما قدرت استفاده از حلقه ها در جاوا اسکریپت برای تعامل با DOM را می بینیم که امکان تولید محتوای پویا را فراهم می کند. این رویکرد در توسعه وب اساسی است، جایی که محتوای صفحات وب اغلب باید بر اساس داده های سرور، ورودی کاربر یا منابع دیگر تولید یا به روز شود.

استفاده از قدرت توابع / Functions در جاوا اسکریپت

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

مقدمه ای بر توابع

یک تابع / Funktion در جاوا اسکریپت مجموعه ای از دستورات است که یک کار را انجام می دهد یا یک مقدار را محاسبه می کند. با تعریف یک تابع، می‌توانید یک قطعه از برنامه را در یک مقدار «پیچید» کنید و به شما این امکان را می‌دهد که آن را هر کجا که به آن عملکرد خاص نیاز دارید، بدون نیاز به نوشتن دوباره کد، فراخوانی کنید.

تعریف توابع

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

Syntax

function functionName(parameters) {

 // Code to be executed

}

• functionName نام تابع است.

• پارامترها / parameters نام ورودی هایی هستند که تابع می پذیرد و با کاما از هم جدا شده اند.

• بلوک کد داخل پرانتزهای فرفری {} هنگام فراخوانی تابع اجرا می شود.

مثال

function greet(name) {

 console.log(`Hello, ${name}!`);

}

فراخوانی توابع

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

مثال

greet(‘Alice’);

// Output: Hello, Alice!

پارامترهای تابع و آرگومان ها

پارامترها متغیرهایی هستند که به عنوان مکان نگهدار برای مقادیر ارسال شده به تابع عمل می کنند. مقادیر واقعی ارائه شده هنگام فراخوانی یک تابع به عنوان آرگومان شناخته می شوند.

مثال

function add(a, b) {

 return a + b;

}

const sum = add(5, 3);

console.log(sum); // Output: 8

محدوده عملکرد – Function Scope

محدوده دسترسی متغیرها را تعیین می کند. متغیرهای تعریف شده در داخل یک تابع را نمی توان از خارج از تابع در دسترس قرار داد، زیرا تابع یک محدوده محلی برای متغیرهای خود ایجاد می کند.

مثال

function showName() {

 const name = ‘Alice’; // `name` is a local variable created by showName function

 console.log(name);

}

showName(); // Output: Alice

// console.log(name); // Uncaught ReferenceError: name is not defined

با غواصی در قلمرو توابع جاوا اسکریپت، با یک مفهوم محوری مواجه می شویم: محدوده. این مفهوم فقط یک جزئیات فنی نیست. نقش مهمی در ساختار و امنیت کد ما دارد. اساساً scope قابلیت مشاهده و دسترسی متغیرها و توابع را در بخش‌های مختلف کد ما تعریف می‌کند.

محدوده عملکرد داخل

هنگامی که یک متغیر یا یک تابع را در یک تابع دیگر اعلام می کنید، آن را در یک فضای بسته و مجزا قرار می دهید که به عنوان محدوده تابع شناخته می شود. به این فکر کنید که یک اتاق خصوصی در کد خود ایجاد می کنید که در آن هر چیزی که در داخل آن اعلام شده فقط در آن اتاق قابل دسترسی است.

این انزوا خودسرانه نیست. اهداف مهمی مانند به حداقل رساندن خطر تداخل نام‌گذاری و محافظت در برابر دستکاری ناخواسته سایر اسکریپت‌ها یا بخش‌هایی از کد انجام می‌شود.

دامنه جهانی

خارج از همه عملکردها، دامنه جهانی قرار دارد. متغیرها و توابع اعلام شده در اینجا از هر بخشی از کد قابل دسترسی هستند. اگرچه این ممکن است راحت به نظر برسد، اما یک شمشیر دو لبه است. متغیرهای جهانی را می توان از هر جایی تغییر داد، که به طور بالقوه منجر به رفتار غیرقابل پیش بینی و ردیابی اشکالات سخت می شود.

پیمایش درگیری ها و نگرانی های امنیتی

بیایید یک سناریوی گویا را در نظر بگیریم. تصور کنید در حال ادغام دو فایل جاوا اسکریپت مجزا در سند HTML خود هستید و هر دو فایل یک تابع و یک متغیر را با نام‌های یکسان اعلام می‌کنند:

<!– Simplified HTML Document –>

<script src=”first.js”></script>

<script src=”second.js”></script>

<script>

 greeting(); // Attempt to invoke the greeting function

</script>

جاوا اسکریپت

// Contents of first.js

const name = “Chris”;

function greeting() {

 alert(`Hello ${name}: welcome to our company.`);

}

// Contents of second.js

const name = “Zaptec”;

function greeting() {

 alert(`Our company is called ${name}.`);

}

ممکن است قصد فراخوانی تابع greeting() تعریف شده در هر دو اسکریپت باشد، اما مدیریت جاوا اسکریپت با دامنه جهانی به این معنی است که فقط اولین مورد قابل دسترسی است و باعث می شود دومی نادیده گرفته شود. بعلاوه، تلاش برای تخصیص مجدد متغیر نام در second.js به دلیل اعلام const در first.js خطایی ایجاد می کند.

این نشان می‌دهد که چگونه متغیرها و توابع جهانی می‌توانند منجر به درگیری و عوارض جانبی ناخواسته شوند، به‌ویژه هنگام ادغام چند اسکریپت.

قیاس باغ وحش: تصویری در محدوده

تصور کنید ساختار کد ما را با یک باغ وحش مقایسه کنید که در آن هر گونه حیوانی (شیر، گورخر، ببر، پنگوئن) در محوطه خود زندگی می کند. هر محفظه ای شبیه به یک محدوده عملکردی است: حاوی همه چیزهایی است که حیوانات به آن نیاز دارند، اما آنها نمی توانند به چیزهای خارج از فضای خود دسترسی داشته باشند یا با آنها تداخل داشته باشند. نگهبان باغ وحش، با دسترسی به تمام محوطه ها، مانند محدوده جهانی در کد ما است.

این تنظیمات از هرج و مرج جلوگیری می کند. همانطور که حیواناتی که آزادانه رومینگ می‌کنند و وارد محوطه‌های دیگر می‌شوند منجر به مشکل می‌شوند، متغیرها و عملکردهایی که از محدوده آنها فرار می‌کنند می‌توانند کد ما را ویران کنند.

Best Practices

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

توابع ناشناس و عبارات تابع – Anonymous Functions and Function Expressions

یک عبارت تابع شبیه به و دارای همان نحوی / syntax است که اعلان / declaration تابع است با این تفاوت که نام تابع را می توان حذف کرد و یک تابع ناشناس ایجاد کرد. عبارات تابع را می توان در متغیرها ذخیره کرد، به عنوان آرگومان به توابع دیگر ارسال کرد و موارد دیگر.

مثال

const sayGoodbye = function(name) {

 console.log(`Goodbye, ${name}!`);

};

sayGoodbye(‘Bob’);

// Output: Goodbye, Bob!

تا اینجا ما فقط یک تابع مانند این ایجاد کرده ایم:

function myFunction() {

 alert(“hello”);

}

اما شما همچنین می توانید تابعی ایجاد کنید که نامی نداشته باشد:

(function () {

 alert(“hello”);

});

این تابع ناشناس / Anonymous نامیده می شود، زیرا نامی ندارد. هنگامی که یک تابع انتظار دارد تابع دیگری را به عنوان پارامتر دریافت کند، اغلب توابع ناشناس را مشاهده خواهید کرد. در این حالت، پارامتر تابع اغلب به عنوان یک تابع ناشناس ارسال می شود.

توجه: این شکل از ایجاد یک تابع به عنوان عبارت تابع نیز شناخته می شود. برخلاف اعلان های تابع، عبارات تابع بالا نمی روند.

به عنوان مثال، فرض کنید زمانی که کاربر در یک کادر متنی تایپ می کند، می خواهید کدی را اجرا کنید. برای این کار می توانید تابع addEventListener() کادر متن را فراخوانی کنید. این تابع از شما انتظار دارد که آن را (حداقل) دو پارامتر ارسال کنید:

•      نام رویداد برای گوش دادن، که در این مورد keydown است

•      یک تابع برای اجرا در هنگام وقوع رویداد / event.

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

function logKey(event) {

 console.log(`You pressed “${event.key}”.`);

}

textBox.addEventListener(“keydown”, logKey);

به جای تعریف یک تابع logKey() جداگانه، می توانید یک تابع ناشناس را به addEventListener():

textBox.addEventListener(“keydown”, function (event) {

 console.log(`You pressed “${event.key}”.`);

});

توابع پیکان – Arrow Functions

ES6 توابع فلش را معرفی کرد، روشی مختصر برای نوشتن توابع در جاوا اسکریپت. توابع پیکان مخصوصاً برای توابع درون خطی و فراخوانی مفید هستند.

const multiply = (a, b) => a * b;

console.log(multiply(2, 3)); // Output: 6

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

یک مثال عملی توابع

بیایید یک مثال عملی بسازیم که نشان می دهد چگونه توابع جاوا اسکریپت با HTML و CSS تعامل دارند و بر دامنه عملکرد و کپسوله کردن کد تأکید می کند. ما یک برنامه وب ساده ایجاد خواهیم کرد که در آن کاربران می توانند نام خود را وارد کنند و با کلیک بر روی یک دکمه، یک تبریک شخصی ظاهر می شود. این مثال همچنین نشان می دهد که چگونه کپسوله کردن متغیرها در توابع از تضادها جلوگیری می کند و کدهای ماژولار و تمیز را حفظ می کند.

ساختار HTML

ابتدا ساختار HTML را برای ورودی کاربر و یک دکمه برای راه اندازی تبریک تنظیم می کنیم:

<!DOCTYPE html>

<html lang=”en”>

<head>

   <meta charset=”UTF-8″>

   <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

   <title>Greeting Example</title>

   <link rel=”stylesheet” href=”style.css”>

</head>

<body>

   <input id=”nameInput” type=”text” placeholder=”Enter your name” />

   <button id=”greetBtn”>Greet Me!</button>

   <p id=”greetingText”></p>

   <script src=”script.js”></script>

</body>

</html>

CSS Style

در مرحله بعد، برای افزایش جذابیت بصری، یک استایل اولیه اضافه کنید:

/* style.css */

body {

   font-family: Arial, sans-serif;

   margin: 20px;

   background-color: #f4f4f4;

}

input, button {

   padding: 10px;

   margin-right: 10px;

   border-radius: 5px;

   border: 1px solid #ddd;

}

input {

   width: 200px;

}

button {

   cursor: pointer;

   background-color: #5cb85c;

   color: white;

}

p {

   margin-top: 20px;

}

توابع جاوا اسکریپت

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

// script.js

// شنونده رویدادی را ضمیمه کنید که منتظر بارگذاری کامل سند HTML است

// این تضمین می کند که همه عناصر قبل از اینکه جاوا اسکریپت سعی در تعامل با آنها داشته باشد قابل دسترسی هستند

document.addEventListener(‘DOMContentLoaded’, () => {

// ارجاع به دکمه، فیلد ورودی و عنصر پاراگراف را از سند HTML بازیابی کنید

    // اینها در متغیرها ذخیره می شوند تا بعداً در اسکریپت به راحتی دسترسی داشته باشید

   const greetBtn = document.getElementById(‘greetBtn’);

   const nameInput = document.getElementById(‘nameInput’);

   const greetingText = document.getElementById(‘greetingText’);

// یک شنونده رویداد را به “Greet Me!” اضافه کنید. دکمه

    // این مشخص می کند که با کلیک روی دکمه چه اتفاقی می افتد

   greetBtn.addEventListener(‘click’, function() {

// با کلیک روی دکمه، تابع greetUser را فراخوانی کنید

        // اینجا جایی است که ما منطق تبریک را کپسوله می کنیم

       greetUser();

   });

// تعریف تابع greetUser

    // این تابع کپسوله شده است. این شامل تمام منطق برای ایجاد یک تبریک است

    // و فقط از طریق فراخوانی این تابع به طور خاص قابل دسترسی است

   function greetUser() {

// مقدار را از قسمت ورودی دریافت کرده و در یک متغیر ذخیره کنید

       const name = nameInput.value;

// بررسی کنید که آیا متغیر نام خالی نیست

       if(name) {

// اگر نام ارائه شده است، یک تبریک شخصی در عنصر پاراگراف نمایش دهید

           greetingText.textContent = `Hello, ${name}! Welcome to our website.`;

       } else {

// اگر نامی ارائه نشد، از کاربر بخواهید نام خود را وارد کند

           greetingText.textContent = “Please enter your name.”;

       }

   }

});

1. تابع greetUser درون تابع ناشناس ارسال شده به شنونده رویداد DOMContentLoaded کپسوله شده است. این بدان معنی است که دامنه greetUser به این تابع ناشناس محدود می شود و خطر تداخل نامگذاری با سایر اسکریپت ها یا بخش هایی از کد را کاهش می دهد.

1. کپسوله‌سازی تابع با تعریف تابع greetUser در پاسخ به تماس شنونده رویداد و نه در محدوده جهانی نشان داده می‌شود. این امر دسترسی آن را محدود می کند و کد را امن تر و سازماندهی می کند.

1. متغیرهای greetBtn، nameInput و greetingText در ابتدای اسکریپت برای ارجاع به عناصر خاص در سند HTML تعریف می شوند. این به ما اجازه می دهد تا به راحتی این عناصر را در کد جاوا اسکریپت خود دستکاری کنیم.

1. متد addEventListener در greetBtn به رویداد کلیک گوش می دهد، که تابع greetUser محصور شده را فعال می کند و نشان می دهد که چگونه رویدادها می توانند با منطق تابع کپسوله شده تعامل داشته باشند.

توضیح گام به گام:

• HTML Setup: ساختار را با یک فیلد ورودی برای نام، یک دکمه برای راه اندازی تبریک و یک پاراگراف برای نمایش پیام تبریک تعریف می کند.

• CSS Styling: یک سبک ساده و کاربر پسند برای قسمت ورودی، دکمه و پاراگراف ارائه می دهد.

• منطق جاوا اسکریپت:
  • Event Listener برای DOMContentLoaded: اطمینان حاصل می کند که جاوا اسکریپت فقط پس از بارگیری کامل سند HTML اجرا می شود و تضمین می کند که همه عناصر در دسترس هستند.
  • Variable Declarations: ارجاع به عناصر HTML را که با آنها تعامل خواهیم داشت شناسایی و ذخیره می کند.
  • شنونده رویداد کلیک روی دکمه: شنونده رویداد را به “Greet Me!” دکمه، هنگام کلیک کردن، تابع greetUser را فراخوانی می کند.
  • greetUser Function: این تابع منطق تبریک را کپسوله می کند. نام کاربر را از قسمت ورودی بازیابی می کند. اگر نامی ارائه شود، یک تبریک شخصی نمایش داده می شود. در غیر این صورت، از کاربر می خواهد که نام خود را وارد کند.

با کپسوله کردن متغیرها و عملکردها در تابع greetUser، از تداخل احتمالی با سایر اسکریپت ها جلوگیری می کنیم و ساختار کد به خوبی سازماندهی شده را حفظ می کنیم. این مثال قدرت توابع در ایجاد برنامه های کاربردی وب تعاملی را نشان می دهد و اهمیت مدیریت محدوده برای کدهای تمیز و بدون تضاد را برجسته می کند.

نتیجه:

مقدمه ای بر مقادیر بازگشتی تابع – Function Return Values

در سفر خود از طریق جاوا اسکریپت، با بلوک‌های سازنده مختلفی مواجه شده‌ایم که هسته اصلی نوشتن برنامه‌های کاربردی و تعاملی وب را تشکیل می‌دهند. در این میان، مقادیر بازگشتی تابع به عنوان یک مفهوم محوری است که توابع را با قابلیت خروجی داده‌ها پس از اجرا غنی می‌کند. درک چگونگی مهار این مقادیر بازگشتی برای برنامه نویسی موثر بسیار مهم است، و شما را قادر می سازد از توابع نه تنها به عنوان وسیله ای برای انجام اقدامات، بلکه به عنوان ابزاری برای محاسبه و ارسال داده ها نیز استفاده کنید. این بحث شما را از طریق تفاوت‌های ظریف مقادیر بازگشتی تابع، کاربردهای آن‌ها و نحوه ایجاد توابعی که داده‌های معنادار را برمی‌گردانند، راهنمایی می‌کند.

قبل از شروع این کاوش، باید درک اساسی از HTML، CSS، و اصول اولیه جاوا اسکریپت، از جمله دانش مقدماتی از توابع داشته باشید. هدف ما در اینجا این است که درک شما را از اینکه چگونه توابع می‌توانند مقادیر را برگردانند و چگونه می‌توان از این مقادیر بازگشتی در کد جاوا اسکریپت استفاده کرد، عمیق‌تر کرد.

ارزش های بازگشتی / Return Values دقیقاً چیست؟

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

یک مثال اساسی را در نظر بگیرید که مقدار بازگشتی یک تابع را در عمل نشان می دهد:

function calculateArea(width, height) {

   return width * height;

}

let roomArea = calculateArea(10, 20);

console.log(roomArea); // Outputs: 200

در این قطعه، تابع calculateArea مساحت یک مستطیل را با توجه به عرض و ارتفاع آن محاسبه می کند و سپس نتیجه را برمی گرداند. این مقدار بازگشتی در متغیر roomArea ذخیره می‌شود و متعاقباً در کنسول ثبت می‌شود.

استفاده از مقادیر بازگشتی در توابع سفارشی

برای فعال کردن یک تابع برای برگرداندن یک مقدار، کلمه کلیدی بازگشتی را به همراه مقدار یا عبارتی که می‌خواهید برگردانید وارد کنید. این مکانیسم نه تنها برای توابع داخلی مانند Array.prototype.map یا String.prototype.replace محفوظ است، بلکه برای تعریف توابع سفارشی نیز در اختیار شماست.

بیایید تابع drawCircles را بررسی کنیم که برای پر کردن یک بوم با تعداد مشخصی از دایره‌های تصادفی طراحی شده است:

function getRandom(max) {

   return Math.floor(Math.random() * max);

}

function drawCircles(circleCount) {

   for (let i = 0; i < circleCount; i++) {

       let x = getRandom(canvas.width);

       let y = getRandom(canvas.height);

       let radius = getRandom(50);

       drawCircle(x, y, radius);

   }

}

در این مثال، تابع getRandom یک عدد تصادفی تا حداکثر مقدار مشخص شده تولید می کند و آن را برمی گرداند. هنگام ترسیم دایره ها، هر فراخوانی به getRandom مقداری را برمی گرداند که برای تعیین موقعیت و اندازه دایره استفاده می شود.

کاربرد دنیای واقعی: تحلیل اعداد تعاملی

یک ابزار وب ساده را تصور کنید که در آن کاربران یک عدد را وارد می‌کنند و در پاسخ، برنامه ویژگی‌های مختلف ریاضی آن عدد را نمایش می‌دهد (به عنوان مثال، مربع، مکعب، وضعیت اول). با استفاده از مقادیر بازگشتی، می توانید توابعی را پیاده سازی کنید که این ویژگی ها را محاسبه کرده و سپس از داده های برگشتی برای به روز رسانی پویا UI استفاده کنید.

<!– HTML structure –>

<input id=”numberInput” type=”number” placeholder=”Enter a number” />

<div id=”analysisOutput”></div>

// JavaScript to analyze the number and display results

// Adding an event listener to the input field to trigger the function when the value changes

document.getElementById(‘numberInput’).addEventListener(‘change’, function() {

   // Parsing the input value as a float and storing it in a variable

   let num = parseFloat(this.value);

   // Setting the innerHTML of the analysisOutput div to display the results

   // of the calculations performed by square, cube, and isPrime functions

   document.getElementById(‘analysisOutput’).innerHTML = `

       <p>${num} squared is ${square(num)}</p>

       <p>${num} cubed is ${cube(num)}</p>

       <p>Is ${num} prime? ${isPrime(num)}</p>

   `;

});

// Function to calculate the square of a number

function square(n) {

   return n * n; // Returns the square of the input number

}

// Function to calculate the cube of a number

function cube(n) {

   return n * n * n; // Returns the cube of the input number

}

// Function to determine whether a number is prime

function isPrime(n) {

   // Checks if the number is less than 2, which is not prime

   if (n < 2) return ‘No’;

   // Loop from 2 to n-1 to check for factors other than 1 and n itself

   for (let i = 2; i < n; i++) {

       // If n is divisible by any number between 2 and n-1, it is not prime

       if (n % i === 0) return ‘No’;

   }

   // If no factors are found, n is prime

   return ‘Yes’;

}

نتیجه‌:

نتیجه‌گیری: ارزش‌های بازده

توابع در جاوا اسکریپت دنباله ای از دستورالعمل ها نیستند. آنها ساختارهای قدرتمندی هستند که می توانند داده ها را محاسبه و ارسال کنند. از طریق مقادیر بازگشتی، توابع به اجزای جدایی ناپذیر منطق کد شما تبدیل می شوند، که قادر به انجام محاسبات و ارائه نتایج در هر کجا که لازم است می شوند. چه در حال دستکاری داده ها، به روز رسانی DOM یا اجرای الگوریتم های پیچیده باشید، درک و استفاده از مقادیر بازگشتی تابع به طور قابل توجهی مهارت برنامه نویسی جاوا اسکریپت شما را افزایش می دهد.

همانطور که به سفر خود در جاوا اسکریپت ادامه می دهید، مقادیر بازگشتی را در زمینه های مختلف آزمایش کنید و مشاهده کنید که چگونه می توانند کد شما را کارآمدتر و ماژولار کنند. به یاد داشته باشید، تمرین و کاوش کلید تسلط بر این مفاهیم است.

مقدمه ای بر رویدادهای جاوا اسکریپت – Events in JS

هدف این مقدمه روشن کردن مفهوم رویدادها در جاوا اسکریپت، به طور خاص بر رفتار آنها در مرورگرهای وب است. اگرچه این یک کاوش جامع نیست، اما موارد ضروری را که در این مقطع باید بدانید را پوشش می دهد.

یک رویداد دقیقاً چیست؟

در حوزه برنامه نویسی، به ویژه در جاوا اسکریپت، رویدادها به معنای اعمال یا رخدادهایی هستند که توسط سیستم شناسایی می شوند و به کد شما اجازه می دهند به صورت پویا پاسخ دهند. به عنوان مثال، هنگامی که کاربر روی دکمه صفحه وب کلیک می کند، ممکن است یک هشدار نمایش داده شود یا محتوا را به عنوان یک واکنش تغییر دهید. رویدادها در مرورگر رخ می‌دهند که اغلب با عناصر خاصی (مانند یک دکمه یا فرم)، خود سند HTML یا پنجره مرورگر مرتبط هستند.

نمونه‌هایی از رویدادها عبارتند از تعاملات کاربر مانند کلیک‌ها، شناور کردن، یا فشار دادن کلید. اتمام بارگذاری صفحه وب؛ فرم های ارسالی؛ و پخش رسانه ها مجموعه گسترده ای از رویدادهای ممکن به این معنی است که چشم انداز غنی برای بهبود تجربه کاربر پویا وجود دارد.

برای مدیریت یک رویداد، یک کنترل کننده رویداد را به آن متصل می کنید. این یک قطعه کد است، معمولاً یک تابع جاوا اسکریپت که شما نوشته اید، که در پاسخ به رویداد اجرا می شود. این فرآیند به عنوان ثبت کنترل کننده رویداد شناخته می شود.

مدیریت یک رویداد کلیک: یک تصویر

یک صفحه وب را با یک دکمه ساده در نظر بگیرید:

• (“document.querySelector(“button دکمه را از سند انتخاب می کند.

• addEventListener یک کنترل کننده رویداد را برای رویداد “کلیک” متصل می کند.

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

استفاده از addEventListener()

متد addEventListener () روش ترجیحی برای پیوست کردن کنترل کننده رویداد به عناصر است. این اجازه می دهد تا انعطاف پذیری بیشتری داشته باشید، از جمله توانایی اتصال چندین کنترل کننده رویداد به یک رویداد واحد و استفاده از ضبط و حباب کردن رویداد (در ادامه در مورد این موارد بیشتر توضیح خواهیم داد).

مثال با addEventListener():

const button = document.querySelector(“button”);

function changeColor() {

 document.body.style.backgroundColor = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;

}

button.addEventListener(“click”, changeColor);

• تابع changeColor برای تغییر رنگ پس زمینه تعریف شده است.

• سپس به عنوان یک کنترل کننده رویداد برای رویداد کلیک دکمه ثبت می شود.

گسترش افق رویداد

فراتر از کلیک ها، عناصر می توانند رویدادهای مختلفی را تحریک کنند. با مشاهده تغییرات تعامل، با جایگزین کردن «کلیک» با رویدادهایی مانند «mouseover»، «focus» یا «dblclick» در کدتان آزمایش کنید.

حذف شنوندگان رویداد

همانطور که می توانید کنترل کننده های رویداد را با addEventListener() ضمیمه کنید، می توانید آنها را با removeEventListener() حذف کنید. این می تواند برای مدیریت حافظه و عملکرد در برنامه های پیچیده تر بسیار مهم باشد.

انتشار رویداد: حباب زدن و گرفتن

انتشار رویداد در DOM می تواند به دو صورت اتفاق بیفتد: حباب و ضبط. به‌طور پیش‌فرض، رویدادها از عنصر هدف تا ریشه درخت سند حباب می‌شوند و مکانیسم‌هایی مانند تفویض رویداد را امکان‌پذیر می‌کنند. گرفتن عکس برعکس است، جایی که رویداد از ریشه به سمت عنصر هدف حرکت می کند.

قدرت نمایندگی رویداد

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

رویدادهای فراتر از صفحه وب

در حالی که این بحث بر رویدادهای وب متمرکز است، شایان ذکر است که مدل رویداد جاوا اسکریپت در محیط‌های مختلف، مانند Node.js یا برنامه‌های افزودنی مرورگر، متفاوت است. هر زمینه ممکن است ویژگی های مدیریت رویداد منحصر به فردی داشته باشد.

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

سناریوی عملی: گالری تصاویر تعاملی

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

ساختار HTML:

<!DOCTYPE html>

<html lang=”en”>

<head>

   <meta charset=”UTF-8″>

   <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

   <title>Interactive Image Gallery</title>

   <link rel=”stylesheet” href=”style.css”>

</head>

<body>

   <div id=”gallery”>

       <img class=”thumbnail” src=”thumbnail1.jpg” alt=”Thumbnail 1″>

       <img class=”thumbnail” src=”thumbnail2.jpg” alt=”Thumbnail 2″>

       <img class=”thumbnail” src=”thumbnail3.jpg” alt=”Thumbnail 3″>

   </div>

   <div id=”main-image”>

       <img src=”placeholder.jpg” alt=”Main Image”>

   </div>

   <script src=”script.js”></script>

</body>

</html>

• بخش #gallery شامل تصاویر کوچک از تصاویر است.

• وقتی روی یک تصویر کوچک کلیک می‌شود، #main-image div تصویر را در اندازه کامل نمایش می‌دهد.

• فایل script.js حاوی کد جاوا اسکریپت ما برای مدیریت رویدادهای کلیک خواهد بود.

CSS (style.css)

#gallery {

   display: flex;

   justify-content: space-around;

   margin-bottom: 20px;

}

.thumbnail {

   width: 100px;

   cursor: pointer;

   transition: transform 0.2s ease;

}

.thumbnail:hover {

   transform: scale(1.1);

}

#main-image img {

   width: 90%;

   display: block;

   margin: 0 auto;

}

• گالری به عنوان یک ظرف انعطاف پذیر برای چیدمان آسان نمایش داده می شود.

• تصاویر بندانگشتی دارای مکان نما هستند که نشان می دهد قابل کلیک هستند و با نگه داشتن ماوس کمی بزرگتر می شوند.

• تصویر اصلی در مرکز قرار دارد و 90٪ از عرض ظرف را اشغال می کند.

جاوا اسکریپت (script.js):

document.getElementById(‘gallery’).addEventListener(‘click’, function(event) {

   // Checking if the clicked element is a thumbnail

   if (event.target.className === ‘thumbnail’) {

       // Retrieving the source of the clicked thumbnail

       const newSrc = event.target.src.replace(‘thumbnail’, ‘fullsize’);

       // Updating the main image’s source

       document.querySelector(‘#main-image img’).src = newSrc;

   }

});

توضیحات:

• ما یک شنونده رویداد را به بخش #gallery متصل می کنیم که به رویدادهای کلیک گوش می دهد.

• هنگامی که یک رویداد کلیک فعال می شود، بررسی می کنیم که آیا عنصر کلیک شده دارای یک کلاس از تصویر کوچک است یا خیر.

• اگر چنین است، ویژگی src آن را تغییر می‌دهیم تا به تصویر با اندازه کامل اشاره کند (با فرض اینکه تصاویر با اندازه کامل نام‌های مشابهی دارند اما در فهرستی متفاوت قرار دارند یا نامگذاری متفاوتی دارند). این با جایگزینی «تصویر کوچک» با «اندازه کامل» در src تصویر شبیه‌سازی می‌شود.

• سپس src تصویر اصلی به منبع جدید به روز می شود و تصویر در اندازه کامل نمایش داده می شود.

این مثال عملی نحوه استفاده از تفویض رویداد برای مدیریت موثر رویدادها را نشان می‌دهد، به‌ویژه زمانی که با چندین عنصر مشابه مانند گالری تصاویر سروکار دارید.