۵ سپتامبر ۲۰۲۳

مقدمه‌ای بر جاوااسکریپت

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

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

جاوااسکریپت در ابتدا به منظور جان دادن به صفحات وب ساخته شد.

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

اِسکریپت‌ها نیازی به Compilation ندارند و فقط کافیست آن‌ها را به صورت متنی در یک فایل (Plain Text) بنویسیم.

از این نظر جاوااسکریپت تفاوت زیادی با زبان جاوا دارد.

چرا به آن جاوااسکریپت می‌گویند؟

جاوااسکریپت در زمان تولد، «LiveScript» نامیده می‌شد. اما در آن زمان زبانی به نام جاوا محبوبیت فراوانی داشت، به همین منظور تصمیم بر آن شد تا برای جاوا برادری جوان‌تر قرار دهند.

اما با توسعه روز افزون جاوااسکریپت، این زبان کاملا مستقل، و دارای استانداری به نام اِکمااسکریپت (EcmaScript) شد و اکنون هیچ ارتباطی با زبان جاوا ندارد.

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

مرورگرهای وب دارای موتوری داخلی برای اجرای جاوااسکریپت هستند، که گاهی آن را ماشین مجازی جاوااسکریپت (JavaScript virtual machine) نیز می‌نامند.

موتورهای مختلف دارای «codenameهای» خاص خود هستند، برای نمونه :

  • V8 برای مرورگرهای کروم، اُپِرا و Edge.
  • SpiderMonkey برای مرورگر فایرفاکس
  • codenameهای دیگری چون “Chakra” برای مرورگر IE یا “JavaScriptCore” و “Nitro” و “SquirrelFish” برای نسخه‌های مختلف مرورگر سافاری وجود دارند.

بخاطر سپردن این نام‌ها مفید هستند، چراکه در مقالات مختلف توسعه‌دهندگان به آن‌ها بر خواهید خورد. ما هم از آن‌ها استفاده خواهیم کرد. زمانی که ما در این آموزش برای نمونه می‌گوییم ویژگی X توسط موتور «V8» پشتیبانی می‌شود، یعنی به احتمال زیاد در مرورگرهای کروم و اپرا پشتیبانی خواهد شد.

موتورها چگونه کار می‌کنند؟

موتورها پیچیده هستند، ولی اساس آن‌ها ساده است.

۱. موتور (اگر مرورگر باشد، تعبیه شده است) اِسکریپت را می‌خواند (Parse). ۲. سپس اسکریپت را به زبان ماشین ترجمه می‌کند (Compile). ۳. در انتها کد ماشین به سرعت اجرا می‌شود.

موتور در تمام مراحل پردازش عملیات بهینه‌سازی را انجام می‌دهد. حتی به اِسکریپت‌ ترجمه شده توجه می‌کند و اطلاعاتی که در این بین رد و بدل می‌شود را بررسی می‌کند و در این مرحله هم روی ‌کدهای ماشین عملیات بهینه‌سازی را انجام می‌دهد تا سرعت اجرای اِسکریپت‌ها بالا رود.

جاوااسکریپت در مرورگر چه توانایی‌هایی دارد؟

جاوااسکریپت مدرن یک زبان برنامه‌نویسی «امن» است. این زبان اجازه دسترسی در سطوح پایین مانند دسترسی به حافظه (Memory) و پردازنده (CPU) را نمی‌دهد، چراکه از ابتدا برای مرورگرها (که نیازی به این موارد ندارند) ساخته شده بود.

قابلیت‌های جاوااسکریپت کاملا به محیطی که در آن اجرا می‌شود بستگی دارد. برای نمونه با جاوااسکریپت در Node.JS می‌توان عملیات خواندن و نوشتن (Read/Write) روی فایل‌ها را انجام داد، و یا در شبکه درخواست‌هایی ارسال و دریافت کرد، و دیگر موارد.

در مرورگر جاوااسکریپت می‌تواند تمامی تعاملات لازم با کاربر و وب‌سِرور را انجام دهد.

برای نمونه جاوااسکریپت در مرورگر می‌تواند:

  • اِلِمان‌های HTML به صفحه اضافه نماید، محتوای فعلی را تغییر دهد و استایل‌ها را اصلاح کند.
  • با کاربر در تعامل باشد، و نسبت به کلیک‌ها، فشردن دکمه‌ها و حرکت موس عکس‌العمل نشان دهد.
  • درخواست‌ها مورد نظر را در سطح شبکه ارسال و دریافت کند، فایل آپلود و دانلود کند (که به این نوع تکنولوژی‌ها اصطلاحا AJAX و COMET گفته می‌شود)
  • کوکی (Cookie) ها را ذخیره و استفاده کند، از کاربران سوال بپرسد، پیام‌ها را نمایش دهد.
  • اطلاعات سمت کاربر را بخاطر بسپارد («local storage»).

جاوااسکریپت در مرورگر چه توانایی‌هایی ندارد؟

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

نمونه‌هایی از چنین محدودیت‌هایی شامل این‌ها می‌شود:

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

    مرورگرهای مدرن اجازه کار کردن با فایل‌ها را می‌دهند اما دسترسی محدود است و فقط اگر کاربر کارهای مشخصی را انجام دهد مجاز هستند مانند «drop» کردن یک فایل درون یک پنجره مرورگر یا انتخاب کردن آن فایل توسط یک تگ <input>.

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

  • تب‌ها (tab) و پنجره‌ها بطور کلی در مورد یکدیگر چیزی نمی‌دانند. اما در شرایطی هم می‌دانند، بطور نمونه زمانی که یک پنجره برای باز نمودن پنجره دیگر از جاوااسکریپت استفاده می‌کند. اما حتی در این حالت هم ممکن است جاوااسکریپت به صفحات دیگر دسترسی نداشته باشد (اگر صفحات مذکور از دامنه، پروتکل یا پورت دیگری باشند).

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

    این محدودیت‌ها برای امنیت کاربر است. صفحه‌ای از دامنه http://anysite.com/ که کاربر آن را باز کرده است نباید به تب دیگر مرورگر با آدرس http://gmail.com/ دسترسی داشته باشد و اطلاعات آن را به سرقت ببرد.

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

اگر جاوااسکریپت در محیطی خارج از مرورگرها اجرا می‌شد (برای نمونه در سِروِرها) ، این محدودیت‌ها وجود نداشتند. همینطور پلاگین‌های مختلف (plugin) ممکن است برای انجام کارهای مختلف پلاگین‌ها و افزونه‌هایی (extension) را نصب کنند که سطح دسترسی‌شان را افزایش می‌دهد.

چه چیزی جاوااسکریپت را منحصر بفرد می‌کند؟

حداقل سه ویژگی مهم در جاوااسکریپت وجود دارد :

  • تطابق کامل با HTML و CSS.
  • کارهای ساده به سادگی انجام می‌شوند.
  • توسط تمام مرورگرهای مهم پشتیبانی شده و به صورت پیش‌فرض مورد استفاده قرار می‌گیرد.

جاوااسکریپت تنها تکنولوژی مرورگر است که این سه چیز را ترکیب می‌کند.

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

همچنین جاوااسکریپت می‌تواند برای ایجاد سرور، اپلیکیشن‌های موبایل و دیگر موارد استفاده شود.

زبان‌هایی «فراتر» از جاوااسکریپت

سینتَکس (Syntax) جاوااسکریپت مورد نیاز هر کسی نیست و اشخاص مختلف به قابلیت‌های متفاوتی نیاز دارند.

این موضوع قابل انتظار است چراکه پروژه‌ها و نیازمندی‌ها برای هر شخص متفاوت است.

اخیرا تعداد زیادی زبان بوجود آمده‌اند که پیش از آنکه در مرورگر اجرا شوند به جاوااسکریپت transpile (تبدیل) می‌شوند.

ابزارهای مدرن فرایند transpile را بسیار سریع و پنهانی می‌کنند و به توسعه‌دهندگان اجازه می‌دهند که به زبانی دیگر کد بنویسند و «پشت پرده» آن را به طور خودکار تبدیل می‌کنند.

نمونه‌هایی از این زبان‌ها :

  • CoffeeScript : که سینتکس کوتاه‌تری را ارائه می‌کند و قابلیت نوشتن کدهایی تمیز و دقیق را بوجود می‌آورد.که معمولا توسعه دهندگان زبان روبی به آن علاقه مند هستند.
  • TypeScript : که تمرکز اصلی خود را بر اضافه نمودن «strict data typing» قرار داده تا فرایند توسعه ساده‌تر شود و نرم‌افزار نهایی قابلیت‌های پیچیده‌تری را به اجرا در آورد. این زبان توسط مایکروسافت توسعه داده شده است.
  • Flow هم به شیوه دیگری data typing را اضافه می کند. و توسط فیس بوک توسعه داده شده است.
  • Dart : که زبانی مستقل با موتور مربوط به خود بوده و در محیط‌های غیر مرورگری (مانند نرم‌افزارهای موبایل) کار می‌کند. این زبان در ابتدا توسط گوگل معرفی شد تا جایگزینی برای جاوااسکریپت باشد.
  • Brython یک transpiler پایتون به جاوااسکریپت است که توسعه دهندگان را قادر می سازد برنامه هایی به زبان پایتون خالص بدون جاوااسکریپت بنویسند.
  • Kotlin یک زبان برنامه‌نویسی مدرن، کوتاه و امن است که می‌تواند مرورگر یا Node را مورد هدف قرار دهد.

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

خلاصه

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

نظرات

قبل از نظر دادن این را بخوانید…
  • اگر پیشنهادی برای بهبود ترجمه دارید - لطفا یک ایشوی گیت‌هاب یا یک پول‌ریکوئست به جای کامنت‌گذاشتن باز کنید.
  • اگر چیزی را در مقاله متوجه نمی‌شوید – به دقت توضیح دهید.
  • برای قراردادن یک خط از کد، از تگ <code> استفاده کنید، برای چندین خط – کد را درون تگ <pre> قرار دهید، برای بیش از ده خط کد – از یک جعبهٔ شنی استفاده کنید. (plnkr، jsbin، codepen…)