تا حالا شده برای نوشتن یک قابلیت ساده، نیم ساعت دنبال یک تکه کد جاوا اسکریپت بگردید؟

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

هدف این مقاله چیز دیگری است؛ به‌جای توضیح‌های تئوری، یک مجموعه کاربردی از 22 نمونه کد جاوا اسکریپت را در اختیارتان قرار می‌دهد که در پروژه‌های واقعی بیشترین استفاده را دارند. در انتها نیز می‌توانید همه آن‌ها را به‌صورت PDF ذخیره یا دانلود کنید.

چرا داشتن یک آرشیو از کدهای آماده JS سرعت برنامه‌نویسی را چند برابر می‌کند؟

فرض کنید در حال طراحی فروشگاه اینترنتی هستید. مشتری می‌خواهد:

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

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

به همین دلیل بسیاری از برنامه‌نویسان حرفه‌ای یک فایل شخصی به نام JavaScript Snippets دارند که همیشه از آن استفاده می‌کنند.

خیییلی به دردت میخوره:  آموزش ساخت منو همبرگری با جاوا اسکریپت + کد آماده

قبل از استفاده از این کدها به چه نکاتی توجه کنیم؟

این نمونه‌ها با JavaScript مدرن (ES6+) نوشته شده‌اند و روی اغلب مرورگرهای جدید اجرا می‌شوند.

پیشنهاد می‌شود:

• ابتدا منطق هر کد را درک کنید.
• سپس آن را مطابق پروژه خود تغییر دهید.
• از کپی‌کردن بدون فهمیدن عملکرد کد خودداری کنید.

لیست کدهای جاوا اسکریپت

1- نمایش پیام هشدار (Alert)

کد کامل

alert(“سلام، خوش آمدید!”);

توضیح

این کد از تابع داخلی alert() استفاده می‌کند و یک پنجره هشدار (Alert Box) در مرورگر نمایش می‌دهد. متن داخل پرانتز همان پیامی است که کاربر مشاهده می‌کند. تا زمانی که کاربر روی دکمه OK کلیک نکند، اجرای ادامه کدهای جاوااسکریپت متوقف می‌شود.

2- تغییر متن یک عنصر (innerHTML)

کد کامل

document.getElementById(“title”).innerHTML = “سلام دنیا”;

توضیح

ابتدا عنصر HTML با شناسه (id) برابر title پیدا می‌شود، سپس مقدار innerHTML آن تغییر می‌کند. هر متنی که داخل innerHTML قرار دهید، جایگزین محتوای قبلی عنصر خواهد شد.

3- تغییر رنگ پس‌زمینه صفحه

کد کامل

document.body.style.backgroundColor = “#f3f3f3”;

توضیح

این کد به عنصر body صفحه دسترسی پیدا می‌کند و ویژگی backgroundColor را تغییر می‌دهد. با تغییر مقدار رنگ، پس‌زمینه کل صفحه بلافاصله تغییر خواهد کرد.

4- نمایش تاریخ امروز

کد کامل

const today = new Date();

document.getElementById(“date”).innerHTML = today.toLocaleDateString();

توضیح

ابتدا با new Date() تاریخ و زمان فعلی سیستم دریافت می‌شود. سپس متد toLocaleDateString() تاریخ را با فرمت محلی کاربر نمایش می‌دهد و در عنصر موردنظر قرار می‌گیرد.

5- نمایش ساعت زنده

کد کامل

setInterval(() => {

document.getElementById(“clock”).innerHTML =

new Date().toLocaleTimeString();

}, 1000);

توضیح

تابع setInterval() باعث می‌شود هر یک ثانیه یک‌بار ساعت سیستم خوانده شود. سپس با toLocaleTimeString() ساعت جاری نمایش داده شده و محتوای عنصر clock به‌روزرسانی می‌شود.

6- کپی متن در کلیپ‌بورد

کد کامل

navigator.clipboard.writeText(“Hello World”);

توضیح

این کد متن مشخص‌شده را در حافظه موقت (Clipboard) سیستم ذخیره می‌کند تا کاربر بتواند آن را در هر برنامه‌ای Paste کند. این قابلیت در دکمه‌های «کپی کد تخفیف»، «کپی لینک» یا «کپی شماره کارت» کاربرد زیادی دارد.

7- بازگشت به ابتدای صفحه

کد کامل

window.scrollTo({

top: 0,

behavior: “smooth”

});

توضیح

تابع scrollTo() صفحه را به مختصات مشخص‌شده اسکرول می‌کند. با قرار دادن top: 0 صفحه به ابتدای سایت بازمی‌گردد و گزینه behavior: “smooth” باعث می‌شود حرکت اسکرول به‌صورت نرم و روان انجام شود.

8- اسکرول نرم تا یک بخش خاص

کد کامل

document.querySelector(“#about”).scrollIntoView({

behavior: “smooth”

});

توضیح

ابتدا عنصر دارای شناسه about انتخاب می‌شود. سپس متد scrollIntoView() مرورگر را به‌صورت نرم به همان بخش هدایت می‌کند. این روش در منوهای تک‌صفحه‌ای (One Page Website) و لندینگ پیج‌ها بسیار پرکاربرد است.

این صددرصد به کارت میاد: ۳ بهترین کد جاوا اسکریپت برای طراحی سایت + دانلود PDF

9- نمایش یا مخفی کردن رمز عبور

کد کامل

const password = document.getElementById(“password”);

if (password.type === “password”) {

password.type = “text”;

} else {

password.type = “password”;

}

توضیح

این کد نوع فیلد ورودی رمز عبور را بین password و text تغییر می‌دهد. زمانی که نوع ورودی text باشد، رمز عبور قابل مشاهده است و با بازگرداندن آن به password، کاراکترها دوباره مخفی می‌شوند. این قابلیت تقریباً در تمام فرم‌های ورود و ثبت‌نام استفاده می‌شود.

10- اعتبارسنجی ایمیل

کد کامل

function validateEmail(email) {

const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

return regex.test(email);

}

console.log(validateEmail(“user@example.com”));

توضیح

در این کد از یک عبارت منظم (Regular Expression) برای بررسی فرمت ایمیل استفاده شده است. اگر ساختار ایمیل صحیح باشد، مقدار true و در غیر این صورت false برگردانده می‌شود. این روش قبل از ارسال فرم، از ورود ایمیل‌های نامعتبر جلوگیری می‌کند.

11- اعتبارسنجی شماره موبایل ایران

کد کامل

function validatePhone(phone) {

return /^09\d{9}$/.test(phone);

}

console.log(validatePhone(“09123456789”));

توضیح

این تابع بررسی می‌کند که شماره واردشده با 09 شروع شده و دقیقاً 11 رقم باشد. این کد برای فرم‌های ثبت‌نام، ورود با پیامک و سامانه‌های احراز هویت بسیار کاربردی است.

12- تولید عدد تصادفی

کد کامل

const randomNumber = Math.floor(Math.random() * 100) + 1;

console.log(randomNumber);

توضیح

تابع Math.random() عددی تصادفی بین 0 و 1 تولید می‌کند. سپس با ضرب در 100 و استفاده از Math.floor() یک عدد صحیح بین 1 تا 100 ساخته می‌شود. این کد در بازی‌ها، قرعه‌کشی‌ها و تولید داده‌های تصادفی کاربرد دارد.

13- تولید رمز عبور تصادفی

کد کامل

function generatePassword(length = 10) {

const chars = “ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%”;

let password = “”;

for (let i = 0; i < length; i++) {

password += chars.charAt(Math.floor(Math.random() * chars.length));

}

return password;

}

console.log(generatePassword());

توضیح

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

14- شمارنده معکوس (Countdown Timer)

کد کامل

let count = 10;

const timer = setInterval(() => {

console.log(count);

count–;

if (count < 0) {

clearInterval(timer);

console.log(“پایان زمان”);

}

}, 1000);

توضیح

این کد هر یک ثانیه مقدار شمارنده را یک واحد کاهش می‌دهد. زمانی که مقدار آن از صفر کمتر شود، با استفاده از clearInterval() اجرای شمارنده متوقف شده و پیام پایان زمان نمایش داده می‌شود. این قابلیت در کمپین‌های فروش، آزمون‌های آنلاین و تایمرها بسیار رایج است.

15- فعال کردن حالت تاریک (Dark Mode)

کد کامل

const button = document.getElementById(“darkMode”);

button.addEventListener(“click”, () => {

document.body.classList.toggle(“dark”);

});

توضیح

با کلیک روی دکمه، کلاس dark به عنصر body اضافه یا حذف می‌شود. کافی است در فایل CSS استایل مربوط به کلاس dark را تعریف کنید تا کل سایت بین حالت روشن و تاریک جابه‌جا شود.

16- منوی همبرگری (Hamburger Menu)

کد کامل

const menuButton = document.getElementById(“menuButton”);

const menu = document.getElementById(“menu”);

menuButton.addEventListener(“click”, () => {

menu.classList.toggle(“active”);

});

توضیح

این کد با کلیک روی آیکون منوی همبرگری، کلاس active را به منو اضافه یا حذف می‌کند. در CSS معمولاً کلاس active وظیفه نمایش یا مخفی کردن منو را بر عهده دارد. این روش یکی از رایج‌ترین پیاده‌سازی‌ها برای منوی نسخه موبایل وب‌سایت‌ها است.

17-نمایش پنجره Popup (Modal)

کد کامل

const openBtn = document.getElementById(“openPopup”);

const closeBtn = document.getElementById(“closePopup”);

const popup = document.getElementById(“popup”);

openBtn.addEventListener(“click”, () => {

popup.style.display = “block”;

});

closeBtn.addEventListener(“click”, () => {

popup.style.display = “none”;

});

توضیح

این کد با کلیک روی دکمه openPopup پنجره Popup را نمایش می‌دهد و با کلیک روی دکمه closePopup آن را می‌بندد. از این روش برای نمایش فرم ورود، عضویت در خبرنامه، پیام‌های تبلیغاتی و اعلان‌های مهم استفاده می‌شود.

18- پیش‌نمایش تصویر قبل از آپلود

کد کامل

const fileInput = document.getElementById(“image”);

const preview = document.getElementById(“preview”);

fileInput.addEventListener(“change”, function () {

const file = this.files[0];

if (file) {

preview.src = URL.createObjectURL(file);

}

});

توضیح

پس از انتخاب فایل توسط کاربر، آدرس موقت تصویر با URL.createObjectURL() ساخته می‌شود و در ویژگی src تصویر قرار می‌گیرد. به این ترتیب کاربر قبل از ارسال فایل، پیش‌نمایش آن را مشاهده می‌کند.

19- جستجوی لحظه‌ای (Live Search)

کد کامل

const search = document.getElementById(“search”);

const items = document.querySelectorAll(“.item”);

search.addEventListener(“keyup”, () => {

const value = search.value.toLowerCase();

items.forEach(item => {

item.style.display =

item.textContent.toLowerCase().includes(value)

? “block”

: “none”;

});

});

توضیح

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

20- نمایش Loader هنگام بارگذاری اطلاعات

کد کامل

const loader = document.getElementById(“loader”);

loader.style.display = “block”;

setTimeout(() => {

loader.style.display = “none”;

}, 3000);

توضیح

ابتدا Loader نمایش داده می‌شود. سپس پس از گذشت سه ثانیه (یا بعد از پایان دریافت اطلاعات از سرور)، Loader مخفی می‌شود. این روش باعث می‌شود کاربر در زمان بارگذاری اطلاعات، وضعیت برنامه را مشاهده کند.

21- ذخیره اطلاعات در LocalStorage

کد کامل

localStorage.setItem(“name”, “Ali”);

const userName = localStorage.getItem(“name”);

console.log(userName);

توضیح

در این مثال مقدار Ali با کلید name در حافظه مرورگر ذخیره می‌شود. حتی اگر صفحه را رفرش کنید، این اطلاعات باقی می‌مانند تا زمانی که خودتان آن‌ها را حذف کنید. از LocalStorage برای ذخیره تنظیمات سایت، زبان، تم تاریک و اطلاعات غیرحساس استفاده می‌شود.

22- دانلود فایل

کد کامل

const downloadBtn = document.getElementById(“download”);

downloadBtn.addEventListener(“click”, () => {

window.open(“files/javascript-cheatsheet.pdf”, “_blank”);

});

توضیح

با کلیک روی دکمه دانلود، فایل PDF در یک تب جدید باز می‌شود یا دانلود آن آغاز می‌شود (بسته به تنظیمات مرورگر). این روش برای دانلود کتاب‌های الکترونیکی، فایل‌های آموزشی، فاکتورها و راهنماهای PDF بسیار کاربردی است.

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

22 بهترین نمونه کد JS (دانلود PDF)

• دانلود فایل (حجم فایل: 461 کیلو بایت)

یک مثال واقعی که احتمالاً به دردتان می‌خورد

چند ماه قبل در پروژه طراحی یک پنل مدیریت، کارفرما درخواست کرد دکمه‌ای اضافه شود که با یک کلیک، شناسه سفارش را کپی کند. به‌جای استفاده از کتابخانه‌های اضافی، تنها از navigator.clipboard.writeText() استفاده شد. نتیجه این بود که حجم پروژه افزایش پیدا نکرد و قابلیت در کمتر از پنج دقیقه پیاده‌سازی شد. همین نوع کدهای کوچک، در پروژه‌های واقعی می‌توانند ساعت‌ها زمان توسعه را ذخیره کنند.

پروژه واقعی با ترکیب چند کد

یک پروژه کوچک برای شما مثلاً:

ساخت فرم ورود

از این کدها استفاده می‌شود:

• اعتبارسنجی ایمیل
• نمایش رمز
• LocalStorage
• Alert
• Dark Mode

در پایان یک فایل کامل HTML+CSS+JS قرار دهید.

کدام کدهای JS بیشترین استفاده را در پروژه‌های واقعی دارند؟

اگر بخواهیم فقط چند مورد را انتخاب کنیم، این‌ها تقریباً در هر پروژه وب دیده می‌شوند:

• اعتبارسنجی فرم‌ها
• LocalStorage
• Dark Mode
• اسکرول نرم
• منوی همبرگری
• کپی در کلیپ‌بورد
• شمارنده معکوس
• جستجوی لحظه‌ای
• Popup
• تولید رمز عبور

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

بدون بررسی سازگاری مرورگر

بعضی APIها مانند Clipboard در مرورگرهای قدیمی محدودیت دارند.

استفاده مستقیم در پروژه اصلی

ابتدا کد را در محیط آزمایشی اجرا کنید.

کپی بدون فهمیدن منطق

این کار هنگام رفع خطا یا توسعه پروژه دردسرساز می‌شود.

نادیده گرفتن امنیت

هرگز داده‌های حساس مانند رمز عبور یا توکن‌های امنیتی را در LocalStorage ذخیره نکنید.

معرفی منابع تمرین

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

1. DOM Manipulation
2. Event Handling
3. Fetch API
4. Promise
5. Async/Await
6. Modules
7. Classes
8. ES6+
9. JSON
10. REST API

سوالات متداول

آیا این کدها برای افراد مبتدی مناسب هستند؟

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

آیا این کدها با ES6 سازگار هستند؟

بله، اغلب آن‌ها با نسخه‌های جدید جاوا اسکریپت نوشته شده‌اند.

آیا می‌توان این کدها را در React یا Vue استفاده کرد؟

بله، اما در برخی موارد باید آن‌ها را با ساختار کامپوننتی آن فریم‌ورک‌ها تطبیق دهید.

آیا استفاده از کدهای آماده باعث کاهش کیفیت برنامه می‌شود؟

خیر، به شرطی که منبع کد معتبر باشد و عملکرد آن را کاملاً درک کنید.

برای حرفه‌ای شدن در JavaScript فقط حفظ کردن این کدها کافی است؟

خیر. این کدها ابزار هستند، نه هدف. درک مفاهیمی مانند Scope، Promise، Async/Await، Event Loop و DOM مهم‌تر از حفظ کردن چند اسنیپت آماده است.

جمع‌بندی

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

گام بعدی: پیشنهاد می‌کنم به‌جای ذخیره این صفحه در بوکمارک، یک مخزن شخصی در GitHub یا حتی یک فایل با نام my-js-snippets بسازید و هر بار که کد مفیدی یاد می‌گیرید، آن را همراه با توضیح کوتاه به آن اضافه کنید. بعد از چند ماه، این آرشیو شخصی ارزشمندتر از بسیاری از دوره‌های آموزشی خواهد بود؛ چون دقیقاً بر اساس تجربه‌های واقعی خودتان شکل گرفته است.