جاوا اسکریپت و مفاهیم اصلی آن: راهنمای مبتدیان برای توسعه وب

Summarize this content to 400 words in Persian Lang

جاوا اسکریپت چیست؟

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

به عنوان مثال:• روی یک دکمه کلیک می‌کنید و اتفاقی می‌افتد (مثل باز شدن منو).• شما پیمایش می کنید و محتوا به صورت پویا ظاهر می شود.• یک فرم ورودی شما (مانند اعتبارسنجی ایمیل) را قبل از ارسال بررسی می کند.

ویژگی های کلیدی جاوا اسکریپت (ساده شده)

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

جاوا اسکریپت چگونه کار می کند (ساده شده)

وقتی از یک صفحه وب بازدید می کنید:

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

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

مثال هایی برای روشن شدن آن

تغییر متن در صفحهفرض کنید یک عنوان دارید و می خواهید جاوا اسکریپت متن آن را تغییر دهد.

JavaScript Example

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توضیح:

getElementById (“heading”) عنصر 'h1' را انتخاب می کند.
.innerText = “سلام جاوا اسکریپت!”; متن آن را تغییر می دهد

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

Click Example

Click Me

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

چه اتفاقی می افتد:

دکمه برای “کلیک” گوش می دهد.
هنگامی که روی آن کلیک می شود، جاوا اسکریپت به روز رسانی می شود با یک پیام تگ کنید

ماشین حساب سادهبیایید یک ماشین حساب برای جمع دو عدد ایجاد کنیم.

چگونه کار می کند:

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

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

متغیرها:متغیرها داده هایی را ذخیره می کنند که می توانند بعداً مورد استفاده قرار گیرند.

چرا از متغیرها استفاده کنیم؟

متغیرها به شما کمک می کنند:

اطلاعات ذخیره: داده ها را برای استفاده بعدی در حافظه نگه دارید.
مقادیر استفاده مجدد: از بازنویسی چندین بار یک مقدار خودداری کنید.
Make Code Dynamic: برای تغییر رفتار برنامه، مقادیر متغیر را تغییر دهید.

let name = “John”; // Storing the value “John” in a variable called name
console.log(name); // Outputs: John

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

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

function greet(name) {
return “Hello, ” + name;
}

console.log(greet(“Alice”)); // Output: Hello, Alice
console.log(greet(“Bob”)); // Output: Hello, Bob

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

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

Click Me

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

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

چرا از شرایط استفاده کنیم؟

تصمیم گیری: کد را بر اساس موقعیت های خاص اجرا کنید.
رفتار پویا: به ورودی کاربر یا داده های خارجی واکنش نشان می دهد.
رسیدگی به خطا: موارد غیرمنتظره را با ظرافت مدیریت کنید.

let age = 20;

if (age >= 18) {
console.log(“You are an adult.”);
} else {
console.log(“You are not an adult.”);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

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

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

حلقه for اساسی ترین حلقه است. یک بلوک کد را برای تعداد مشخصی بار تکرار می کند.

// Print numbers 1 to 5
for (let i = 1; i <= 5; i++) {
console.log(i);
}
// Output: 1, 2, 3, 4, 5

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

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

// Print numbers 1 to 5 using a while loop
let i = 1;
while (i <= 5) {
console.log(i);
i++; // Don’t forget to increment i!
}
// Output: 1, 2, 3, 4, 5

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

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

// Print numbers 1 to 5 using do…while loop
let i = 1;
do {
console.log(i);
i++;
} while (i <= 5);
// Output: 1, 2, 3, 4, 5

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

حلقه for…in برای تکرار روی خصوصیات یک شی (کلیدها) استفاده می شود.

let person = {
name: “John”,
age: 30,
city: “New York”
};

for (let key in person) {
console.log(key + “: ” + person[key]);
}
// Output:
// name: John
// age: 30
// city: New York

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

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

let numbers = [1, 2, 3, 4, 5];

for (let number of numbers) {
console.log(number);
}
// Output: 1, 2, 3, 4, 5

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

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

توسعه Frontend: چارچوب های جاوا اسکریپت مانند React، Angular و Vue.js برای ساخت وب سایت های تعاملی استفاده می شوند.
توسعه Backend: Node.js به جاوا اسکریپت اجازه می دهد تا روی سرورها اجرا شود و منطق باطن را تقویت می کند.
API ها: جاوا اسکریپت داده ها را از سرورهای راه دور واکشی می کند.

چرا جاوا اسکریپت یاد بگیریم؟

به طور گسترده استفاده می شود: تقریباً هر وب سایتی از جاوا اسکریپت استفاده می کند.
فرصت های شغلی: برای توسعه دهندگان وب ضروری است.
آسان برای شروع: برای نوشتن و آزمایش جاوا اسکریپت فقط به یک مرورگر نیاز دارید.

نتیجه گیری

جاوا اسکریپت یک زبان برنامه نویسی مبتدی و در عین حال قدرتمند است. با تمرین مثال های ساده و درک مفاهیم کلیدی، شما می تواند توانایی ایجاد وب تعاملی و جذاب را باز کند برنامه های کاربردی!

  


  Click Me
  

  

let name = "John"; // Storing the value "John" in a variable called name
console.log(name); // Outputs: John

function greet(name) {
  return "Hello, " + name;
}

console.log(greet("Alice")); // Output: Hello, Alice
console.log(greet("Bob"));   // Output: Hello, Bob

Click Me

let age = 20;

if (age >= 18) {
  console.log("You are an adult.");
} else {
  console.log("You are not an adult.");
}

// Print numbers 1 to 5
for (let i = 1; i <= 5; i++) {
  console.log(i);
}
// Output: 1, 2, 3, 4, 5

// Print numbers 1 to 5 using a while loop
let i = 1;
while (i <= 5) {
  console.log(i);
  i++;  // Don't forget to increment i!
}
// Output: 1, 2, 3, 4, 5

// Print numbers 1 to 5 using do...while loop
let i = 1;
do {
  console.log(i);
  i++;
} while (i <= 5);
// Output: 1, 2, 3, 4, 5

let person = {
  name: "John",
  age: 30,
  city: "New York"
};

for (let key in person) {
  console.log(key + ": " + person[key]);
}
// Output:
// name: John
// age: 30
// city: New York

let numbers = [1, 2, 3, 4, 5];

for (let number of numbers) {
  console.log(number);
}
// Output: 1, 2, 3, 4, 5