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

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

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

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

خروجی قطعه کد زیر کدام گزینه است؟

• 5
• 6
• 7
• Error

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

در این تمرین یک فایل JSON داریم که شامل اطلاعاتی در مورد تعدادی از اشخاص است (از جمله نام ، نام خانوادگی ، آی دی ، ایمیل و شماره تلفن). در فایل اسکریپت با استفاده از Ajax میخواهیم یک درخواست ارسال کنیم و از فایل JSON تمامی اسامی (نام و نام خانوادگی) به همراه ایمیل اشخاص را استخراج نموده و خروجی آن را به صورت یک لیست غیرترتیبی (UL) نمایش دهیم. در اینجا اطلاعات را با استفاده از یک حلقه for پیمایش نموده و در یک متغیر ذخبره میکنیم. این متغیر یک لیست تشکیل داده و در تگ div که id آن update است و در فایل index.htm قرار دارد نمایش میدهد.

در این پروژه ، استفاده شده از : #جاوا_اسکریپت | #اچ_تی_ام_ال | #ای-جکس

خروجی را در تصویر زیر مشاهده میکنید:

همیشه در حال یادگیری و بدرود
سعید دامغانیان - رادیو صدای ققنوس

سورس فایلها را با کلیک روی دگمه زیر دانلود نمایید.

در این تمرین یک فایل XML داریم که شامل اطلاعاتی در مورد تعدادی کتاب است (از جمله عنوان کتاب ، نام نویسنده ، و...). در فایل اسکریپت با استفاده از Ajax میخواهیم یک درخواست ارسال کنیم و از فایل XML تمامی تگهای title را استخراج نموده و محتوای آن را که در واقع شامل عنوانین کتابهاست به صورت یک لیست غیرترتیبی (UL) نمایش دهیم. در اینجا اطلاعات را با استفاده از یک حلقه for پیمایش نموده و در یک متغیر ذخبره میکنیم. این متغیر یک لیست تشکیل داده و در تگ div که id آن update است و در فایل index.htm قرار دارد نمایش میدهد.

در این پروژه ، استفاده شده از : #جاوا_اسکریپت | #اچ_تی_ام_ال | #ای-جکس

خروجی را در تصویر زیر مشاهده میکنید:

همیشه در حال یادگیری و بدرود
سعید دامغانیان - رادیو صدای ققنوس

سورس فایلها را با کلیک روی دگمه زیر دانلود نمایید.

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

در این پروژه ، استفاده شده از : #جاوا_اسکریپت | #اچ_تی_ام_ال | #سی_اس_اس

همیشه در حال یادگیری و بدرود
سعید دامغانیان - رادیو صدای ققنوس

سورس فایلها را با کلیک روی دگمه زیر دانلود نمایید.

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

در این پروژه ، استفاده شده از : #جاوا_اسکریپت | #اچ_تی_ام_ال | #سی_اس_اس

همیشه در حال یادگیری و بدرود
سعید دامغانیان - رادیو صدای ققنوس

سورس فایلها را با کلیک روی دگمه زیر دانلود نمایید.

پروژه بازی سنگ کاغذ قیچی ، بصورت گرافیکی با جاوا اسکریپت و جی-کوئری.

در این پروژه ، استفاده شده از : #جاوا_اسکریپت | #جی_کوئری | #اچ_تی_ام_ال | #سی_اس_اس

همیشه در حال یادگیری و بدرود
سعید دامغانیان - رادیو صدای ققنوس

سورس فایلها را با کلیک روی دگمه زیر دانلود نمایید.

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

در این پروژه ، استفاده شده از : #جاوا_اسکریپت | #اچ_تی_ام_ال | #سی_اس_اس

همیشه در حال یادگیری و بدرود
سعید دامغانیان - رادیو صدای ققنوس

سورس فایلها را با کلیک روی دگمه زیر دانلود نمایید.

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

در این پروژه ، استفاده شده از : #جاوا_اسکریپت | #اچ_تی_ام_ال | #سی_اس_اس

همیشه در حال یادگیری و بدرود
سعید دامغانیان - رادیو صدای ققنوس

سورس فایلها را با کلیک روی دگمه زیر دانلود نمایید.

در این پروژه یک اسلایدر بسیار زیبا با جاوا اسکریپت ساخته شده که در آن 5 تصویر از گل های زیبا قرار داده شده است. نام هر تصویر به همراه شماره اسلاید روی هر اسلاید قرار داده شده است.

در این پروژه ، استفاده شده از : #جاوا_اسکریپت | #اچ_تی_ام_ال | #سی_اس_اس

همیشه در حال یادگیری و بدرود
سعید دامغانیان - رادیو صدای ققنوس

فایل سورس را با زدن دگمه زیر دانلود نمایید.

در این پروژه میتوانید درون یک لیست که 12 نام در آن وجود دارد ، یک نام را جستجو نمایید.#گرافیکی

در این پروژه ، استفاده شده از : #جاوا_اسکریپت | #بوت_استرپ | #اچ_تی_ام_ال | #سی_اس_اس

همیشه در حال یادگیری و بدرود
سعید دامغانیان - رادیو صدای ققنوس

سورس فایلها را با کلیک روی دگمه زیر دانلود نمایید.

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

در این پروژه ، استفاده شده از : #جاوا_اسکریپت | #بوت_استرپ | #اچ_تی_ام_ال | #سی_اس_اس

همیشه در حال یادگیری و بدرود
سعید دامغانیان - رادیو صدای ققنوس

فایل سورس را با زدن دگمه زیر دانلود نمایید.

در این پروژه یک تبدیل واحد برای وزن از گرم به میلی گرم ، کیلوگرم ، پوند و قیراط طراحی نموده ام.

در این پروژه ، استفاده شده از : #جاوا_اسکریپت | #بوت_استرپ | #اچ_تی_ام_ال | #سی_اس_اس

همیشه در حال یادگیری و بدرود
سعید دامغانیان - رادیو صدای ققنوس

فایل سورس را با زدن دگمه زیر دانلود نمایید.

پروژه متن متحرک با اچ تی ام ال و سی اس اس و جاوا اسکریپت

در این پروژه متن متحرک " به وبلاگ منزلگه ققنوس خوش آمدید " را با سرعتی که شما انتخاب میکنید تایپ میکند (تایپ متحرک)

در این پروژه ، استفاده شده از  : اچ تی ام ال + سی اس اس + جاوا اسکریپت

همیشه در حال یادگیری و بدرود
سعید دامغانیان - رادیو صدای ققنوس

سورس فایل ها را با زدن دگمه زیر دانلود نمایید.

مشابه دستورات if else در زبان های دیگر می باشد که با یک مثال بررسی می کنیم:

خروجی :

Click the button to get a time-based greeting.

Good day

این قسمت مشابه دستور if  در زبانهای دیگر می باشد.

خروجی:

Click the button to get a "Good day" greeting if the time is less than 20:00.

در جاوا اسکریپت تعریف متغیر با دستور var انجام می شود:

خروجی :

Click the button to get a "Good day" greeting if the time is less than 20:00.

Good day

کامنتهای چند خطی در جاوا اسکریپت مثال دوم

خروجی:

Note: The comment-block is not executed.

کامنت های چند خطی در جاوا اسکریپت مثال اول:

خروجی این برنامه رو خودتون تعیین کنید

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

خروجی کد زیر :

Welcome to my Homepage

This is my first paragraph.

Note: The comment-block is not executed.

کامنت ها در جاوا اسکریپت: قسمت اول)

کامنتها توضیحاتی هستند که برنامه نویس آنها را برای توضیح دادن برنامه خود می نویسد. نوشتن کامنتها اختیاری است ولی ننوشتن آنها در بعضی موارد باعث ابهام می شود مخصوصاً اگر کد شما طولانی تر شود... کدهایی که بصورت کامنت نوشته می شوند تاثیری در اجرای برنامه ندارند.

خروجی برنامه :

Welcome to my Homepage

This is my first paragraph.

Note: The comments are not executed.

در جاوا اسكريپت نيز مانند ساير زبانها مي توان كدها را در بلوك هايي جدا نوشت. تا برنامه خوانا تر شود‏ ‏و كارايي برنامه افزايش يابد و ... خوب بريم سراغ يك مثال...

خروجي قطعه كد بالا:

My Web Page

I am a paragraph.

Try it

خروجي قطعه كد بالا:

My Web Page

Hello Dolly

سلام دوستان. در درسهاي قبل ياد گرفتيم چگونه توي يك فايل html بنويسيم و از چه متدهايي استفاده كنيم. حالا مي خواييم از يك دكمه استفاده كنيم تا برنامه مون رو كامل تر كنيم...

خروجي برنامه ي فوق: 

My Web Page

A Paragraph.

Note: myFunction is stored in an external file called "myScript.js".

خروجي برنامه ي فوق:

My First Web Page

My First JavaScript

سلام دوستان ! از امروز باهاتون جاوا اسكريپت كار مي كنم. درس اول مون اينه كه يك پيغام يا يك متن رو در صفحه ي اسكريپت چاپ كنيم. اين كار رو با متد write به راحتي مي تونيم انجام بديم. خوب ببينيم...

: خروجي برنامه فوق

My First Web Page

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