درس ۱۱: مقدمات JavaScript

یادگیری مقدمات JavaScript و برنامه‌نویسی تعاملی

پیشرفت درس ۱۱ از ۲۰ درس

JavaScript چیست؟

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

ویژگی‌های کلیدی JavaScript:

  • تفسیری (Interpreted): نیاز به کامپایل ندارد
  • شی‌گرا (Object-Oriented): پشتیبانی از برنامه‌نویسی شی‌گرا
  • تابعی (Functional): توابع شهروند درجه یک هستند
  • پویا (Dynamic): انواع متغیرها در زمان اجرا تعیین می‌شوند
  • رویدادمحور (Event-Driven): واکنش به رویدادهای کاربر

کاربردهای JavaScript:

  • توسعه وب Frontend: تعامل با کاربر در مرورگر
  • توسعه وب Backend: سرور با Node.js
  • اپلیکیشن موبایل: React Native, Ionic
  • اپلیکیشن دسکتاپ: Electron
  • بازی‌سازی: بازی‌های مرورگری
  • IoT: اینترنت اشیا

تاریخچه JavaScript

JavaScript در سال ۱۹۹۵ توسط برندان آیک (Brendan Eich) در شرکت نت‌اسکیپ طراحی شد. علی‌رغم نام آن، هیچ ارتباط مستقیمی با زبان Java ندارد.

نکات مهم تاریخی:

  • ۱۹۹۵: ایجاد JavaScript در ۱۰ روز!
  • ۱۹۹۷: استاندارد ECMAScript
  • ۲۰۰۹: Node.js و ورود به سمت سرور
  • ۲۰۱۵: ES6/ES2015 و تحول بزرگ
  • امروز: یکی از محبوب‌ترین زبان‌های برنامه‌نویسی

نحوه اجرای JavaScript

JavaScript را می‌توان به روش‌های مختلفی در صفحات وب اجرا کرد:

۱. JavaScript درون‌خطی (Inline):

<button onclick="alert('سلام دنیا!')">کلیک کن</button>

۲. JavaScript داخلی (Internal):

<script>
  console.log('سلام دنیا!');
  alert('خوش آمدید!');
</script>

۳. JavaScript خارجی (External):

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

بهترین شیوه:

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

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

کنسول مرورگر

کنسول مرورگر ابزار قدرتمندی برای تست و اشکال‌زدایی JavaScript است.

دسترسی به کنسول:

  • Chrome/Edge: F12 یا Ctrl+Shift+I
  • Firefox: F12 یا Ctrl+Shift+K
  • Safari: Cmd+Option+I

دستورات مفید کنسول:

console.log('پیام معمولی');
console.warn('پیام هشدار');
console.error('پیام خطا');
console.info('پیام اطلاعاتی');
console.table([{نام: 'علی', سن: 25}, {نام: 'سارا', سن: 30}]);
console.clear(); // پاک کردن کنسول

تمرین عملی: اولین برنامه JavaScript

در ادامه، اولین برنامه JavaScript خود را بنویسید و اجرا کنید:

نحو پایه JavaScript

JavaScript دارای نحو ساده و قابل فهمی است که شباهت زیادی به زبان‌های C و Java دارد.

قوانین نحوی مهم:

  • حساس به حروف کوچک و بزرگ: myVariable ≠ MyVariable
  • نقطه‌ویرگول: پایان دستورات (اختیاری اما توصیه می‌شود)
  • فاصله‌ها: معمولاً نادیده گرفته می‌شوند
  • کامنت‌ها: // برای تک خط، /* */ برای چند خط

مثال‌های نحو:

// این یک کامنت تک خطی است

/*
  این یک کامنت
  چند خطی است
*/

// تعریف متغیر
let name = 'علی';
const age = 25;

// فراخوانی تابع
console.log('نام: ' + name);
console.log('سن: ' + age);

کلمات کلیدی JavaScript

JavaScript دارای کلمات کلیدی رزرو شده‌ای است که نمی‌توان از آن‌ها به عنوان نام متغیر استفاده کرد.

کلمات کلیدی رایج:

break case catch class const continue debugger default delete do else export extends false finally for function if import in instanceof let new null return super switch this throw true try typeof undefined var void while

اولین برنامه: سلام دنیا!

بیایید اولین برنامه JavaScript خود را بنویسیم:

روش ۱: نمایش در کنسول

console.log('سلام دنیا!');

روش ۲: نمایش در alert

alert('سلام دنیا!');

روش ۳: نوشتن در صفحه

document.write('سلام دنیا!');

روش ۴: تغییر محتوای عنصر

document.getElementById('demo').innerHTML = 'سلام دنیا!';

مثال کامل:

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>اولین برنامه JavaScript</title>
</head>
<body>
    <h1 id="demo">در انتظار...</h1>
    
    <script>
        // نمایش پیام در کنسول
        console.log('برنامه شروع شد');
        
        // تغییر محتوای صفحه
        document.getElementById('demo').innerHTML = 'سلام دنیا!';
        
        // نمایش پیام خوش‌آمدگویی
        alert('خوش آمدید به دنیای JavaScript!');
    </script>
</body>
</html>

ابزارهای توسعه

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

ویرایشگرهای کد:

  • Visual Studio Code: رایگان و قدرتمند
  • WebStorm: IDE حرفه‌ای
  • Sublime Text: سبک و سریع
  • Atom: منبع باز و قابل تنظیم

ابزارهای آنلاین:

  • CodePen: برای تست سریع
  • JSFiddle: اشتراک‌گذاری کد
  • Repl.it: محیط توسعه آنلاین
  • CodeSandbox: پروژه‌های پیچیده

افزونه‌های مفید VS Code:

  • Live Server: سرور محلی
  • Prettier: فرمت‌دهی کد
  • ESLint: بررسی کیفیت کد
  • Bracket Pair Colorizer: رنگ‌بندی پرانتزها

تمرین‌های عملی

برای تسلط بیشتر بر مطالب این درس، تمرین‌های زیر را انجام دهید:

تمرین ۱: پیام خوش‌آمدگویی

صفحه‌ای ایجاد کنید که هنگام بارگذاری پیام خوش‌آمدگویی نمایش دهد.

تمرین ۲: تغییر محتوا

دکمه‌ای ایجاد کنید که با کلیک روی آن، متن صفحه تغییر کند.

تمرین ۳: کنسول لاگ

انواع مختلف پیام‌ها را در کنسول نمایش دهید.

تمرین ۴: کامنت‌گذاری

کدی بنویسید و آن را با کامنت‌های مناسب توضیح دهید.

نکات مهم و بهترین شیوه‌ها

بهترین شیوه‌ها:

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

نکات امنیتی:

  • هرگز اطلاعات حساس را در JavaScript کلاینت قرار ندهید
  • ورودی‌های کاربر را همیشه اعتبارسنجی کنید
  • از eval() و innerHTML با احتیاط استفاده کنید
  • کد خود را مینیفای کنید تا خوانایی کمتر شود

اشتباهات رایج:

  • فراموش کردن نقطه‌ویرگول
  • اشتباه در نام‌گذاری متغیرها (حساس به حروف)
  • استفاده از کلمات کلیدی به عنوان نام متغیر
  • عدم استفاده از کنسول برای اشکال‌زدایی
  • نوشتن کد بدون کامنت

ادامه یادگیری

در درس بعدی با متغیرها و انواع داده در JavaScript آشنا خواهید شد.

درس قبلی: Flexbox و Grid درس بعدی: متغیرها و انواع داده