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

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

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

برنامه نویسی جاوا اسکریپت در اندروید را می‌توان با برنامه‌های مختلفی انجام داد که یکی از معروف‌ترینِ آن‌ها، اپلیکیشنی به نام «JavaScript For Android» است. این اپلیکیشن در فروشگاه گوگل‌پلی [+] به صورت رایگان در دسترس است و کاربران علاقه‌مند می‌توانند از آن برای کد نویسی جاوا اسکریپت استفاده کنند. در ادامه این مطلب، اپلیکیشن JavaScript For Android برای برنامه نویسی جاوا اسکریپت اندروید معرفی شده است.

برنامه JavaScript For Android چیست؟

اپلیکیشن JavaScript For Android یکی از بهترین برنامه‌ها برای کدنویسی جاوا اسکریپت در اندروید و در واقع نوعی «کامپایلر» (Compiler) جاوا اسکریپت اندرویدی به حساب می‌آید. این برنامه به کاربران اجازه می‌دهد تا کدهای جاوا اسکریپت را در دستگاه‌های اندرویدی بنویسند و آن‌ها را فوراً اجرا کنند.

این اپلیکیشن در فروشگاه اپلیکیشن گوگل‌پلی امتیاز مطلوب ٣/٤ را از کاربران دریافت کرده است و می‌توان آن را به عنوان یکی از بهترین برنامه‌ها برای برنامه نویسی جاوا اسکریپت در اندروید نام برد. برای کدنویسی جاوا اسکریپت با اپ اندروید JavaScript For Android کافی است اپلیکیشن را دانلود و شروع به استفاده از آن کرد. حجم این برنامه تنها ٣ مگابایت است و حافظه بسیار ناچیزی را از گوشی تلفن همراه اشغال می‌کند.

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

console.log('سلام. به این آموزش از مجله تم آف خوش آمدید');

نحوه نوشتن کد و اجرای آن به صورت تصویر زیر خواهد بود:

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

مثال کدنویسی جاوا اسکریپت در اندروید با JavaScript For Android

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

let numbers = [];

// حلقه برای گرفتن ٥ عدد دلخواه از کاربر
for (let i = 1; i  max) {
    max = numbers[i];
  }
}

// نمایش بزرگترین عدد
alert(`بزرگترین عدد در این مجموعه: ${max}`);

حال نحوه اجرای برنامه برای دریافت هر ورودی به صورت زیر است.

خروجی که تولید خواهد شد نیز به صورت تصویر زیر خواهد بود.

آیا می‌توان از برنامه JavaScript For Android برای ذخیره و باز کردن برنامه‌ های جاوا اسکریپت استفاده کرد؟

متأسفانه خیر. برنامه فوق بسیار ساده است و تنها توانایی اجرای کدهای جاوا اسکریپت را دارد. با این برنامه هیچ فایلی را نمی‌توان باز یا ذخیره کرد. این برنامه فقط توسعه یافته است تا کاربران با آن تمرین‌های جاوا اسکریپت ساده و متوسط انجام بدهند و برای کارهای بزرگ‌تری که مثلاً نیاز به ادغام با کدهای «HTML» ،«CSS» و غیره دارد، کاربردی نخواهد داشت.

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

سایر اپلیکیشن های جاوا اسکریپت اندروید کدامند؟

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

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

اپلیکیشن WebMaster’s HTML Editor Lite

برنامه بسیار جالب بعدی را که در این مطلب مورد بررسی قرار داده‌ایم، «WebMaster’s HTML Editor Lite» است که نوعی ویرایشگر کدِ منبع محسوب می‌شود و از فایل‌های جاوا اسکریپت، CSS ،PHP و HTML پشتیبانی می‌کند.

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

اگرچه این برنامه ویژگی‌های اضافی زیادی را ارائه نمی‌دهد، اما برای رفع نیازهای اولیه کدنویسی جاوا اسکریپت اندروید به نظر کافی می‌آید. در این برنامه ویژگی‌هایی مانند برجسته کردن «سینتکس» (Syntax)، شماره گذاری خطوط، دکمه‌های کدگذاری تخصصی روی صفحه و نوعی کاوش‌گر داخلی فایل وجود دارند.

همچنین این اپلیکیشن از سرور FTP پشتیبانی می‌کند. برنامه نام برده دو نسخه رایگان و پولی دارد. نسخه رایگان دارای محدودیت‌هایی از جمله پشتیبانی محدود از ویژگی‌های تکمیل خودکار کُد و عدم وجود حالت پیش‌نمایش است. برنامه WebMaster’s HTML Editor Lite قابلیت ذخیره و بازکردن فایل خارجی را دارد و این ویژگی، آن را به کد ادیتوری مناسب برای جاوا اسکریپت اندروید تبدیل خواهد کرد.

• نکته: برنامه WebMaster’s HTML Editor Lite نوعی کامپایلر جاوا اسکریپت نیست که به صورت مستقیم خروجی تولید کند. در یان برنامه فقط می‌توان کد نوشت و برای اجرا نیاز به مرورگری با قابلیت پشتیبانی از جاوا اسکریپت خواهد بود. در زیر مثالی از نحوه کار این اپلیکیشن بررسی خواهد شد.

 

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

  
  


  
سلام. به مجله تم آف خوش آمدید!
  

خروجی قطعه کد بالا به صورت زیر خواهد بود.

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

 

برنامه اندروید Spck Code Editor برای کدنویسی جاوا اسکریپت

«Spck Code Editor» یکی دیگر از ویرایشگرهای عالی جاوا اسکریپت اندروید به حساب می‌آید که ویژگی‌های زیادی دارد. این برنامه از جاوا اسکریپت، CSS و HTML برای کدنویسی پشتیبانی می‌کند.

همچنین پشتیبانی از انواع زبان برنامه نویسی شامل موارد زیر در آن ارائه شده است.

• «پایتون» (Python)
• «روبی» (Ruby)
• «پی اچ پی» (PHP)
• «گولنگ» (Golang)
• «راست» (Rust)
• «جاوا» (Java)

در این ویرایشگر محبوب پشتیبانی از «Emmet» و همچنین توانایی استفاده از پیش‌پردازنده‌های CSS مانند «SCSS» و «Less» نیز گنجانده شده است. علاوه بر این، نوعی کنسول جاوا اسکریپت یکپارچه و ارائه پیش‌نمایش مرورگر درون برنامه‌ای برای بررسی صفحات HTML در این برنامه وجود دارد.

از طرفی، یکی از بهترین ویژگی‌ها پشتیبانی آن از «Git» است. این قابلیت امکان شبیه‌سازی پروژه‌های «گیت‌هاب» ،«GitLab» و «Bitbucket» را فراهم می‌کند، بنابراین می‌توان برنامه نویسی جاوا اسکریپت را با استفاده از آن در هر دستگاه اندرویدی شروع و دنبال کرد. علاوه بر این، در Spck Code Editor تمام پروژه‌ها به‌طور خودکار در فضای ابری ذخیره می‌شوند تا امکان دسترسی آسان به دستگاه‌های مختلف فراهم شود.

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

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

    
    


    

        
 Hi. Welcome To Faradars Mag
    
    

قطعه کد CSS پروژه در ادامه آمده است.

/* index.css */
.container {
  background-color: #add8e6;
  text-align: center;
}

h1 { 
  color: red;
  font-size: 24px;
  animation: animated-text 4s linear infinite;
}

@keyframes animated-text {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

قطعه کد جاوا اسکریپت هم به صورت زیر است.

/* index.js */
const text = document.querySelector('h1');

function animate() {
  text.style.transform = `translateX(${text.offsetWidth}

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

برنامه جاوا اسکریپت اندروید SoloLearn

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

• جاوا اسکریپت
• HTML
• پایتون
• «جی کوئری» (JQuery)
• «Ruby»
• «SQL»
• «PHP»
• «C++‎»
• «C»
• «Swift»

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

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

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

از قسمت «RUN» می‌توان برنامه را اجرا و در قسمت «OUTPUT» خروجی را مشاهده کرد.

 

برنامه جاوا اسکریپت اندروید TrebEdit

«TrebEdit» نیز ویرایشگر کامل HTML ،CSS و جاوا اسکریپت موبایل برای کسانی است که به دنبال مجموعه‌ای جامع از ویژگی‌ها هستند. این برنامه دارای ویژگی برجسته‌سازی کدها، تکمیل خودکار کدها، تم‌های قابل تنظیم و موارد دیگر است.

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

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

برای ساخت پروژه جدید به راحتی می‌توان به بخش «Workspace» رفت و از آنجا اقدام به ساخت پروژه دلخواه کرد. مانند تصویر زیر:

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

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

 

برنامه کدنویسی در اندروید Dcoder

«Dcoder» یکی دیگر از برنامه‌های جاوا اسکریپت اندروید در این فهرست محسوب می‌شود که برای کمک به کاربران در ایجاد پروژه‌های توسعه وب در اندروید طراحی شده است. این کد ادیتور از HTML ،CSS و جاوا اسکریپت و همچنین دو فریمورک محبوب جاوا اسکریپت، یعنی  «React» و «Angular» پشتیبانی می‌کند.

علاوه بر این، این برنامه دارای پشتیبانی از Git است که به کاربران امکان می‌دهد پروژه‌های GitHub یا Bitbucket را در داخل برنامه Clone کنند. ویژگی‌های دیگر این اپلیکیشنِ کدنویسی در اندروید برای جاوا اسکریپت به صورت موارد زیر هستند:

• برجسته‌سازی کد
• کنسول دیباگ
• تایپ و تکمیل خودکار کرد
• بسیاری از موارد دیگر

ایجاد پروژه جاوا اسکریپت با Dcoder ساده است. این برنامه الگویی پیش‌فرض را با فایل‌های CSS و JS ارائه می‌دهد که قبلاً به فایل HTML پیوند داده شده‌اند. علاوه بر این، این برنامه محبوب دارای نوعی مرورگر درون برنامه‌ای برای مشاهده پروژه‌های وب نیز هست.

همچنین برای کسانی که می‌خواهند با سایر زبان‌های برنامه نویسی در این اپلیکیشن کدنویسی کنند، این برنامه گزینه محبوبی به حساب می‌آید. Dcoder از زبان‌های محبوبی مانند پایتون ،C ،C++‎، جاوا و PHP پشتیبانی می‌کند. تنها نکته منفی که برای این برنامه وجود دارد این است که برخی از ویژگی‌های آن پولی هستند و نیاز به خرید درون برنامه‌ای دارند. اگر همان مثال بالا در این برنامه جاوا اسکریپت اندروید اجرا شود، مراحل به صورت زیر خواهند بود.

ابتدا باید مانند تصویر بالا از بخش «Files» شروع به کار کرد. بخش «Project» و بخش «Git Clone» آن نیازمند پرداخت هزینه و خرید اشتراک است. با رفتن به بخش Files می‌توان زبان مد نظر خود را انتخاب و شروع به کدنویسی کرد. برای کدنویسی جاوا اسکریپت باید بخش «HTML/CSS/JS» انتخاب شود.

در بخش بعد کدهای برنامه بالا را در بخش مربوطه کپی/پِیست خواهیم کرد تا پروژه قابل اجرا باشد. طبق تصویر زیر:

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

برنامه نویسی وب در اندروید با anWriter

«anWriter» نوعی ویرایشگر کم‌حجم و کاربرپسند HTML ،CSS و جاوا اسکریپت است. این ویرایشگر رایگان از HTML ،CSS، جاوا اسکریپت و «LaTeX» پشتیبانی می‌کند و نسخه غیر رایگان آن پشتیبانی از PHP و SQL را نیز ارائه می‌دهد.

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

• «HTML 5»
• «CSS 3»
• «jQuery»
• «بوت استرپ» (Bootstrap)
• «Angular»

anWriter به عنوان نوعی ویرایشگر کد دارای قابلیت‌هایی مانند؛ تکمیل خودکار کدها و همچنین برجسته‌سازی کدها و کنسول خطای جاوا اسکریپت است. همچنین می‌توان پیش‌نمایش صفحات وب را مستقیماً از برنامه مشاهده کرد. این برنامه با حجم کمتر از ٢ مگابایت، بسیار کم‌حجم‌تر از بسیاری از برنامه‌های جاوا اسکریپت اندروید دیگر در این مطلب است. حال مراحل اضافه کردن مثال بالا را در این برنامه هم پیگیری خواهیم کرد. برای این کار باید به وسیله آیکون «+» فایل‌های جدیدی را ایجاد کرد یا به وسیله آیکون پوشه، پروژه قبلی را مطابق تصویر زیر باز کرد.

حال اگر کدهای پروژه بالا در این برنامه وارد شوند، صفحه ادیتور به صورت زیر خواهد بود.

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

برنامه کدنویسی جاوا اسکریپت اندروید AWD

برنامه آخر در این فهرست، برنامه‌ای به نام «AWD» و نام آن مخفف «Android Web Developer» است.

این برنامه از کدنویسی زبان‌هایی مانند PHP ،CSS ،JS ،HTML و «جیسون» (JSON) پشتیبانی کرده و همچنین قابلیت استفاده از فناوری‌های زیر را برای مدیریت پروژه‌های وب فرهم می‌کند:

• «FTP»
• «FTPS»
• «SFTP»
• «WebDAV»

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

AWD همچنین قابلیت یکپارچه‌سازی Git را ارائه می‌دهد که همه این ویژگی‌ها آن را به یکی از بهترین ویرایشگرهای جاوا اسکریپت، HTML و CSS برای اندروید تبدیل می‌کند. مراحل کار با ابزار AWD نیز مشابه سایر برنامه‌های جاوا اسکریپت اندروید معرفی شده است.

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

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

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

سخن پایانی

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

به جز مورد اول، یعنی JavaScript For Android هیچ‌کدام قابلیت کامپایل کدهای جاوا اسکریپت بدون استفاده از ابزار مرورگر را ندارند، اما با این حال می‌توان با آن‌ها کدنویسی جاوا اسکریپت انجام داد. JavaScript For Android برای تمرین‌های جاوا اسکریپت بسیار گزینه مناسبی است و از طرف دیگر مابقی برنامه‌های دیگری که معرفی شدند برای ادغام کدهای جاوا اسکریپت با HTML و CSS برای ساخت پروژه‌های وب بسیار مفید هستند.