چند نمونه کاربرد جاوا اسکریپت در طراحی سایت که باید حتما ببینید + ویدئو

سلام به همراهان همیشگی سایت سبزلرن. در این مقاله قصد دارم چند کاربرد جاوا اسکریپت در طراحی سایت رو به شما نشون بدم و شما رو با سایت هایی که از جاوااسکریپت استفاده میکنن اشنا بکنم.در حال حاضر حدود 1.6 بیلیون وبسایت در دنیا وجود داره که 95 درصدشون از جاوا اسکریپت استفاده میکنن؛ یعنی چیزی حدود 1.52 بیلیون وبسایت. اریک الیوت نویسنده کتابهای مختلفی در زمینه جاوا اسکریپت میگوید:

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

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

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

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

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

1.ترب

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

و همون طور که میبینید  در این سایت از node js ,React js,next js, jquery استفاده شده که یک نمونه جذاب از کاربرد جاوا اسکریپت در طراحی سایت هست.

2.اینستاگرام

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

3.دیجی کالا

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

4.گیت لب

یک نمونه سایت با جاوا اسکریپت که برنامه نویس ها باهاش اشنایی دارن و کارایی و کاربرد زیادی داره که موضوع این مقاله نیست تا راجبش صحبت کنیم. عملکرد این سایت مثل خود github هست.

اما تفاوتی که وجود داره اینه که ما در گیت لب میتونیم به صورت رایگان پروژه های اپلود شدمون رو بصورت پرایوت و شخصی دربیاریم. که در این سایت کاربرد جاوا اسکریپت در طراحی سایت مشهوده چون از vue js که فریمورکی از جاوااسکریپت هست استفاده شده. اگر باز هم میخواید بدونید چه سایت هایی با جاوا اسکریپت نوشته شده اند. یه مثال جالب داریم براتون.

5. گوگل

خیلی هیجان انگیزه که بدونی گوگل هم یکی از نمونه سایت با جاوا اسکریپت هست. گوگل  با تمام اون عظمتش از Angular js استفاده میکنه:)

6.کد پن

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

حرف آخر 

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

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

برای اینکه بدونین هر وبسایتی از چه زبان یا تکنولوژی یا فناوریی استفاده میکنه،همون طور که اول مقاله هم گفته شد؛ برای مرورگرتون اکستنشن Wappalyzer  رو نصب کنید تا اطلاعات دقیقی رو در اختیارتون بگذاره.

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