برای تبدیل شدن به یک برنامه نویس وب قوی و پیاده‌سازی پروژه‌های مختلف وب، لازم است هر فرد متقاضی این حرفه، مهارت‌های زبان برنامه نویسی جاوا اسکریپت را در خود بهبود ببخشد. جاوا اسکریپت هم‌اکنون یکی از محبوب‌ترین زبان‌های برنامه نویسی است و به خصوص در توسعه وب بسیار مورد استفاده قرار می‌گیرد. در این مطلب آموزشی از مجله تم آف 22 پروژه جاوا اسکریپت برای تمرین و بهبود دانش کاربران از JavaScript به همراه توضیحات کوتاهی با هر پروژه ارائه شده است. ایده‌های به کار گرفته شده در این پروژه‌های مختلف از سطح مبتدی تا متوسط را شامل می‌شوند و برای کاربرانی که به جاوا اسکریپت علاقه دارند، بسیار مفید هستند.
فهرست مطالب این نوشته
نحوه انتخاب بهترین پروژه جاوا اسکریپت برای یادگیری سریع‌تر
فهرست 22 پروژه جاوا اسکریپت
1. پروژه زمان‌سنج با JavaScript
2. پروژه ساخت ساعت دیجیتال با جاوا اسکریپت
٣. ساخت ماشین حساب با جاوا اسکریپت
4. پروژه فهرست مواد غذایی
5. پروژه ساخت ساعت آنالوگ با جاوا اسکریپت
6. ساخت ماشین حساب وام
معرفی فیلم های آموزش جاوا اسکریپت
7. پروژه نقل قول از سخن بزرگان
8. ساخت ماشین حساب BMI
9. تبدیل پوند به کیلوگرم
10. پروژه تغییر رنگ پس زمینه
11. پروژه شمارنده طول کلمات
12. پروژه ساخت فرم تماس با حافظه محلی
13. اپلیکیشن نمایش روز هفته
14. پروژه بازی جمع
15. پروژه فهرست وظایف
16. ساخت سوالات چهار گزینه ای با جاوا اسکریپت
17. خاموش و روش کردن لامپ با جاوا اسکریپت
18. ساخت بازی ضربه زدن به هدف
19. پروژه به روزرسانی متغیرهای CSS
20. جلوه ماوس با جاوا اسکریپت
21. پروژه ساخت کدهای ادیتور با جاوا اسکریپت
22. ساخت اسلایدر عکس
سؤالات متداول
چه پروژه هایی را می‌توان با جاوا اسکریپت انجام داد؟
بهترین پروژه های جاوا اسکریپ برای مبتدیان کدهایام پروژه ها هستند؟
چگونه باید یک پروژه جاوا اسکریپت را شروع کرد؟
آیا یادگیری جاوا اسکریپت برای مبتدیان آسان است؟
سخن پایانی
نحوه انتخاب بهترین پروژه جاوا اسکریپت برای یادگیری سریع‌تر
بهترین راه برای یادگیری یک زبان برنامه نویسی، صرف زمان و تلاش روی پروژه‌های مختلف است. کاربران برای انتخاب بهترین پروژه به منظور کمک به ارتقای دانش خود، باید نسبت به تسلط آن‌ها به این زبان پروژه های جاوا اسکریپتی خود را انتخاب کرده و روی آن‌ها کار کنند.
فیلم آموزش جاوا اسکریپت JavaScript در تم آف
کلیک کنید
برای مثال کسانی که در سطح صفر از برنامه نویسی جاوا اسکریپت قرار دارند یا در سطح بسیار مبتدی با آن آشنا هستند، بهتر است از پروژه‌های ساده جاوا اسکریپت شروع کنند. به صورت کلی بهتر است کاربران همیشه موضوع‌هایی را انتخاب کنند که از سطح دانش فعلی آن‌ها کمی بالاتر هستند. این به این دلیل است که مانور دادن فقط روی چیزهایی که یاد دارند، کمکی به پیشرفتشان نخواهد کرد.
فهرست 22 پروژه جاوا اسکریپت
در سطح وب، سورس کدهای زیادی از پروژه‌های مختلف برای جاوا اسکریپت وجود دارد. در این بخش، فهرست ٢٢ تا از بهترین پرژوه های جاوا اسکریپت به همراه سورس کدهای آن‌ها گرد آوری شده است که کاربران به دلخواه خود می‌توانند کدهای آن را دست‌کاری کرده و آن‌ها را کاملاً شخصی‌سازی کنند تا بتوانند تسلط بیشتری را روی زبان جاوا اسکریپت و مهارت برنامه نویسی با آن کسب کنند. در این بخش ابتدا عنوان و موضوع پروژه‌ها فهرست شده‌اند و سپس هر پروژه در بخشی جداگانه معرفی و کدهای آن ارائه شده است.
فیلم آموزش پروژه محور جاوا اسکریپت، CSS و HTML – طراحی صفحه فرود واکنشگرا در تم آف
کلیک کنید
همچنین تا حد امکان سعی کرده‌ایم کدهایها را توضیح بدهیم تا چندان جای ابهام باقی نماند. اما بهترین روش برای یادگیری این است که ابتدا سعی کنیم خودمان کدهای هر پورژه را بنویسیم و بعد از کدهای این مطلب کمک بگیریم، اما در هر صورت اجرا کردن کدهایها و حتی نوشتن ان‌ها در کدهای ادیتور به یادگیری هر چه بهتر کمک بسیار زیادی می‌کند.
پروژه زمان‌سنج با JavaScript
ساخت ساعت دیجیتال با جاوا اسکریپت
پروژه ساخت ماشین حساب
فهرست مواد غذایی
پروژه ساخت ساعت آنالوگ با جاوا اسکریپت
ساخت ماشین حساب وام
پروژه نقل قول از سخن بزرگان
ساخت ماشین حساب BMI با جاوا اسکریپت
پروژه تبدیل پوند به کیلوگرم
تغییر رنگ پس زمینه با جاوا اسکریپت
پروژه شمارنده طول کلمات
ساخت فرم تماس با حافظه محلی
اپلیکیشن نمایش روز هفته با جاوا اسکریپت
پروژه بازی جمع با JavaScript
فهرست وظایف با جاوا اسکریپت
ساخت سوالات چهار گزینه‌ای
پروژه خاموش و روش کردن لامپ
ساخت بازی ضربه زدن به هدف
به‌روزرسانی متغیرهای CSS با جاوا اسکریپت
جلوه ماوس با جاوا اسکریپت
پروژه ساخت کدهای ادیتور
ساخت اسلایدر عکس با جاوا اسکریپت
1. پروژه زمان‌سنج با JavaScript
پروژه زمان‌سنج، پروژه‌ای جذاب است که برای افرادی مبتدی بسیار مناسب به حساب می‌آید. در این پروژه کاربران با سه دکمه زیر با زمان‌سنج تعامل برقرار کنند.
دکمه شروع
دکمه توقف
دکمه بازنشانی
در این پروژه از HTML و CSS نیز استفاده شده است که کدهای منبع آن به صورت زیر خواهد بود.
فیلم آموزش مقدماتی کتابخانه ReactJS در جاوا اسکریپت در تم آف
کلیک کنید
کدهای HTML پروژه زمان‌سنج با JavaScript به صورت زیر است:
window.onload = function () {
var seconds = 00;
var tens = 00;
var appendTens = document.getElementById("tens")
var appendSeconds = document.getElementById("seconds")
var buttonStart = document.getElementById('button-start');
var buttonStop = document.getElementById('button-stop');
var buttonReset = document.getElementById('button-reset');
var Interval ;
buttonStart.onclick = function() {
clearInterval(Interval);
Interval = setInterval(startTimer, 10);
}
buttonStop.onclick = function() {
clearInterval(Interval);
}
buttonReset.onclick = function() {
clearInterval(Interval);
tens = "00";
seconds = "00";
appendTens.innerHTML = tens;
appendSeconds.innerHTML = seconds;
}
function startTimer () {
tens++;
if(tens 9){
appendTens.innerHTML = tens;
}
if (tens > 99) {
console.log("seconds");
seconds++;
appendSeconds.innerHTML = "0" + seconds;
tens = 0;
appendTens.innerHTML = "0" + 0;
}
if (seconds > 9){
appendSeconds.innerHTML = seconds;
}
}
}
خروجی پروژه زمان‌سنج به صورت زیر است:
2. پروژه ساخت ساعت دیجیتال با جاوا اسکریپت
یکی دیگر از پروژه های جذاب جاوا اسکریپت، ساخت ساعت دیجیتال است. در این پروژه هم در کنار JavaScript از HTML و CSS نیز استفاده خواهد شد. این پروژه برای تمرین حلقه‌ها در جاوا اسکریپت و کار با متغیرهای جاوا اسکریپت بسیار پروژه مناسبی به حساب می‌آید. کدهای این پروژه Javascript در ادامه قرار خواهند گرفت.
function showTime(){
var date = new Date();
var h = date.getHours(); // 0 - 23
var m = date.getMinutes(); // 0 - 59
var s = date.getSeconds(); // 0 - 59
var session = "AM";
if(h == 0){
h = 12;
}
if(h > 12){
h = h - 12;
session = "PM";
}
h = (h
خروجی پروژه ساخت ساخت ساعت دیجیتال به صورت زیر است:
٣. ساخت ماشین حساب با جاوا اسکریپت
یکی دیگر از پروژه های تمرینی جاوا اسکریپت، ساخت ماشین حساب با جاوا اسکریپت است. این پروژه چهار عمل اصلی جمع، تفریق، صرب و تقسیم را انجام می‌دهد و یک دکمه به عنوان دکمه پاک کننده دارد. این پروژه برای تمرین مفاهیم زیر بسیار مفید است.
فیلم آموزش پروژه محور ری اکت جی اس ReactJS با فریم ورک Tailwind CSS در تم آف
کلیک کنید
دست‌کاری DOM
«ساختارهای کنترلی» (Control Structures)
کار با ForEach در جاوا اسکریپت
دست‌کاری CSS جاوا اسکریپت
کار با «شنونده رویداد» (EventListeners) و رویداد در جاوا اسکریپت
و بسیاری از موارد دیگر
قطعه کدهای پروژه ساخت ماشین حساب با JavaScript در ادامه خواهند آمد.
قطعه کدهای Html ساخت ماشین حساب با جاوا اسکریپت به صورت زیر است:
کدهای جاوا اسکریپت پروژه ساخت ماشین حساب به صورت زیر است:
//Wrap code in an IIFE
(function(){
let screen = document.querySelector('.screen');
let buttons = document.querySelectorAll('.btn');
let clear = document.querySelector('.btn-clear');
let equal = document.querySelector('.btn-equal');
//retrieve data from numbers that are clicked
buttons.forEach(function(button){
button.addEventListener('click', function(e){
let value = e.target.dataset.num;
screen.value += value;
})
});
equal.addEventListener('click', function(e){
if(screen.value === ''){
screen.value = 'Please Enter a Value';
} else {
let answer = eval(screen.value);
screen.value = answer;
}
})
clear.addEventListener('click', function(e){
screen.value = '';
})
})(); //end IIFE
خروجی این پروژه به صورت زیر خواهد بود:
4. پروژه فهرست مواد غذایی
هدف از این پروژه ایجاد فهرستی است که آیتمی را می‌پذیرد و آن را در فضای محلی ذخیره می‌کند. اگر کاربر بخواهد آیتم خالی را وارد کادر مربوطه کند در نتیجه برنامه به او اخطار می‌دهد. همچنین اگر کاربر با موفقیت آیتمی را وارد کند، برنامه به او پیام موفقیت‌آمیز بودن را نشان خواهد داد.
فیلم آموزش پروژه محور ری اکت نیتیو – طراحی اپلیکیشن BMI در React Native در تم آف
کلیک کنید
در این پروژه هر دفعه که آیتمی اضافه می‌شود، مورد در DOM نمایش داده خواهد شد و همچنین در حافظه محلی کاربر ذخیره می‌شود. همچنین اگر کاربر روی دکمه «پاک کردن موارد» کلیک کند، همه موارد از DOM و حافظه محلی حذف خواهند شد. مباحثی که در این پروژه به کار رفته‌اند شامل موارد زیر هستند:
دست‌کاری‌های DOM
توابع جاوا اسکریپت
شنونده رویداد
حلقه For در جاوا اسکریپت
ذخیره‌سازی محلی در جاوا اسکریپت
دست‌کاری CSS
گزاره شرطی در جاوا اسکریپت
در ادامه کدهای مربوط به این پروژه JavaScript قرار خواهند گرفت.
قطعه کدهای Html پروژه مواد غذایی با JavaScript به صورت زیر است:
Grocery List
display action
پروژه جاوا اسکریپت تم آف - اضافه کردن اقلام مود غذایی
display action
لیست اقلام مواد غذایی
قطعه کدهای CSS پروژه فهرست مواد غذایی با جاوا اسکریپت به صورت زیر است:
قطعه کدهای پروژه ساخت فهرست مواد غذایی به صورت زیر است:
//Selection items from the DOM
//Add items container
const addItemsAction = document.querySelector('.addItems-action');
const input = document.querySelector('.addItems-input');
const submit = document.querySelector('.addItems-submit');
//Display items container
const list = document.querySelector('.grocery-list');
const displayItemsAction = document.querySelector('.displayItems-action');
const clear = document.querySelector('.displayItems-clear');
//Add event listeners
//Submit listener
submit.addEventListener('click', addItem);
//Check for local storage
document.addEventListener('DOMContentLoaded', displayStorage);
//Clear list
clear.addEventListener('click', removeItems);
//Listen to list to delete individual items
list.addEventListener('click', removeSingleItem);
//functions
function addItem(event){
event.preventDefault();
let value = input.value;
if (value === ''){
showAction(addItemsAction, 'Please add grocery item', false);
} else {
showAction(addItemsAction, `${value} به فهرست اقلا،م اضافه شد`, true);
createItem(value);
updateStorage(value);
}
}
function showAction(element, text, value){
if (value === true){
element.classList.add('success');
element.innerText = text;
input.value = '';
setTimeout(function(){
element.classList.remove('success');
}, 3000)
} else {
element.classList.add('alert');
element.innerText = text;
input.value = '';
setTimeout(function(){
element.classList.remove('alert');
}, 3000)
}
}
// create item
function createItem(value){
let parent = document.createElement('div');
parent.classList.add('grocery-item');
// let title = document.createElement('h4');
// title.classList.add('grocery-item__title');
parent.innerHTML = `
${value}
`
list.appendChild(parent);
}
//update storage
function updateStorage(value){
let groceryList;
groceryList = localStorage.getItem('groceryList') ? JSON.parse(localStorage.getItem('groceryList')) : [];
groceryList.push(value);
localStorage.setItem('groceryList', JSON.stringify(groceryList));
}
//display items in local storage
function displayStorage(){
let exists = localStorage.getItem('groceryList');
if(exists){
let storageItems = JSON.parse(localStorage.getItem('groceryList'));
storageItems.forEach(function(element){
createItem(element);
})
}
}
//remove all items
function removeItems(){
//delete from local storage
localStorage.removeItem('groceryList');
let items = document.querySelectorAll('.grocery-item');
if(items.length > 0){
//remove each item from the list
showAction(displayItemsAction, 'All items deleted', false);
items.forEach(function(element){
list.removeChild(element);
})
} else {
showAction(displayItemsAction, 'No more items to delete', false);
}
}
//remove single item
function removeSingleItem(event){
event.preventDefault();
let link = event.target.parentElement;
if(link.classList.contains('grocery-item__link')){
let text = link.previousElementSibling.innerHTML;
let groceryItem = event.target.parentElement.parentElement;
//remove from list
list.removeChild(groceryItem);
showAction(displayItemsAction,`${text} از فهرست اقلام حذف شد`, true);
//remove from local storage
editStorage(text);
}
}
function editStorage(item){
let groceryItems = JSON.parse(localStorage.getItem('groceryList'));
let index = groceryItems.indexOf(item);
groceryItems.splice(index, 1);
//first delete existing list
localStorage.removeItem('groceryList');
//add new updated/edited list
localStorage.setItem('groceryList', JSON.stringify(groceryItems));
}
خروجی این پروژه به صورت زیر است:
5. پروژه ساخت ساعت آنالوگ با جاوا اسکریپت
پروژه بعدی، ساخت ساعت آنالوگ است. در این پروژه از Canvas Web API استفاده خواهد شد تا ساعت جاوا اسکریپتی راه‌اندازی شود. این پروژه برای مبتدیان مناسب نیست و برای افرادی که دانش نسبتاً متوسطی از جاوا اسکریپت دارند پروژه‌ای عالی است. در این پروژه کاربر نه تنها باید بداند که چگونه از Canvas API استفاده کند، بلکه باید بداند چگونه از ریاضیات برای دست‌کاری موقعیت بسیاری از عناصر در پروژه بهره ببرد. در ادامه قطعه کدهای این پروژه قرار خواهند گرفت.
فیلم آموزش کتابخانه Redux در جاوا اسکریپت JS برای مدیریت وضعیت برنامه ها در تم آف
کلیک کنید
قطعه کدهای HTML پروژه ساخت ساعت آنالوگ با JavaScript به صورت زیر است:
Analogue Clock
قطعه کدهای CSS پروژه ساعت آنالوگ با جاوا اسکریپت به صورت زیر است:
//create a canvas object fro HTML element
var canvas = document.getElementById('canvas');
//create a 2d drawing object
var ctx = canvas.getContext('2d');
//calculate the clock radius by using the height
var radius = canvas.height / 2;
//remap the x and y axis to the center of the canvas
ctx.translate(radius, radius);
//reduce clock radius by 90%
radius = radius * 0.90;
setInterval(drawClock, 1000); //run the drawClock function every second.
function drawClock(){
drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawTime(ctx, radius);
}
function drawFace(ctx, radius){
var grad;
//draw white circle for the face
ctx.beginPath();
ctx.arc(0,0,radius,0,2*Math.PI);
ctx.fillStyle = "White";
ctx.fill();
// create a radial gradient (inner, middle, and outer edge of clock)
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
grad.addColorStop(0, '#333');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#333');
//define gradient as stroke style
ctx.strokeStyle = grad;
ctx.lineWidth = radius*0.1;
ctx.stroke();
//draw the center of the clock
ctx.beginPath();
ctx.arc(0,0, radius*0.1,0,2*Math.PI);
ctx.fillStyle = '#333';
ctx.fill();
}
function drawNumbers(ctx, radius) {
var ang;
var num;
ctx.font = radius*0.15 + "px arial"; //set font at 15% of radius
ctx.textBaseline = "middle"; //set text alignment to middle
ctx.textAlign = "center"; //set text alignment to center
for(num=1; num
خروجی این پروژه به صورت زیر خواهد بود:
6. ساخت ماشین حساب وام
این مورد، پروژه‌ای نسبتاً ساده از ساخت ماشین حساب برای پرداخت بدهی وام با JavaScript است. در این پروژه از مفاهیم «جاوا اسکریپت درون خطی» (Inline JavaScript) و «عبارات با قاعده جاوا اسکریپت» (regular expressions) استفاده خواهد شد.
این پروژه برای درک مفاهیم چگونگی بازیابی از فیلد ورودی HTML بسیار مناسب است و پس از بازیابی مقادیر، محاسبات انجام خواهد شد. این ماشین حساب برای محاسبه سود ساده با توجه به نرخ بهره، مبلغ اصلی و تعداد ماه‌های پرداخت وام است. در این پروژه از توابع JavaScript درون خطی برای انجام این عمل استفاده خواهد شد و تمرین بسیار خوبی برای این مفهوم به حساب می‌آید. قطعه کدهای مربوط به این پروژه در ادامه خواهند آمد. قطعه کدهای HTML پروژه ماشین حساب وام با جاوا اسکریپت به صورت زیر است:
Mortgage Loan Calculator
ماشین حساب وام - تم آف
مبلغ وام: $
نرخ بهره: %
تعداد ماه:
قطعه کدهای CSS پروژه ماشین حساب وام با جاوا اسکریپت به صورت زیر است:
function computeLoan(){
const amount = document.querySelector('#amount').value;
const interest_rate = document.querySelector('#interest_rate').value;
const months = document.querySelector('#months').value;
const interest = (amount * (interest_rate * 0.01)) / months;
let payment = ((amount / months) + interest).toFixed(2); //calculate monthly payment
//regedit to add a comma after every three digits
payment = payment.toString().replace(/B(?=(d{3})+(?!d))/g, ","); //B looks for a word boundary, ? says what to look for, d looks for 3 digits in a row
document.querySelector('#payment').innerHTML = `پرداخت ماهانه = ${payment}`
}
خروجی این پروژه به صورت زیر است:
در ادامه این مطلب پیش از پرداختن به سایر پروژه های جاوا اسکریپت مجموعه دوره‌های آموزش JavaScript تم آف به علاقه‌مندان معرفی شده‌اند.
معرفی فیلم های آموزش جاوا اسکریپت
جاوا اسکریپت به عنوان زبانی همه‌کاره نقش پررنگی را در حوزه‌های تخصصی مختلف ایفا می‌کند و جدا از اینکه که امروزه از مهم‌ترین زبان‌های توسعه وب به حساب می‌آید، در صنعت ساخت بازی‌های رایانه‌ای، ساخت و توسعه اپلیکیشن موبایل و دسکتاپ و غیره نیز به کار گرفته می‌شود. هم‌اکنون در پلتفرم تم آف دوره‌ها و فیلم‌های آموزشی زیادی برای جاوا اسکریپت قرار داده شده است که نیاز کاربران را از جنبه‌های مختلفی پوشش می‌دهند. تمامی دوره‌های آموزش جاوا اسکریپت تم آف در مجموعه آموزش جاوا اسکریپت گردآوری شده‌اند.
در زمان نگارش این مقاله، نزدیک به ۲۵ عنوان آموزشی حاوی بیش از ۱۲۰ ساعت ویدیو در سطوح مختلفی از جمله آموزش مقدماتی جاوا اسکریپت، آموزش حرفه‌ای و پیشرفته جاوا اسکریپت و همچنین آموزش انواع فریمورک‌های جاوا اسکریپت، آموزش پروژه‌محور جاوا اسکریپت و غیره ارائه شده است. فهرست فیلم‌های آموزشی جاوا اسکریپت در پلتفرم تم آف دائماً در حال به روز شدن هستند و در آینده، فیلم‌ها و آموزش‌های بیشتری در تم آف برای جاوا اسکریپت قرار خواهند گرفت. در تصویر بالا تنها تعداد کمی از دوره‌های آموزشی جاوا اسکریپت به عنوان نمونه نمایش داده شده است.
برای مشاهده همه فیلم های آموزش جاوا اسکریپت و شروع یادگیری + اینجا کلیک کنید.
7. پروژه نقل قول از سخن بزرگان
پروژه دیگر در فهرست پروژه های JavaScript در این مطلب، پروژه نمایش نقل‌قول از سخن بزرگان است. این پروژه نیز برای مبتدیان مناسب و هدف از آن نمایش نقل‌قول تصادفی با هر کلیک از میان نقل‌قول‌هایی است که وجود دارد. در این برنامه جاوا اسکریپت از مفاهیم زیر برای تمرین استفاده شده است.
جاوا اسکریپت درون خطی
«اشیا در جاوا اسکریپت» (JavaScript objects)
انتخاب کننده در جاوا اسکریپت (JavaScript selectors)
«کتابخانه ریاضیات جاوا اسکریپت» (JavaScript math library)
فیلم آموزش پروژه محور AngularJS و ASP.Net Web API با معماری MVC در تم آف
کلیک کنید
در این پروژه کاربر یاد خواهد گرفت که چگونه با «شی» (Object) در جاوا اسکریپت کار کند و آن را در آرایه‌های جاوا اسکریپت قرار دهد. در این پروژه آرایه جاوا اسکریپت از 6 شی مختلف تشکیکل شده‌اند که هرکدهایام دارای جفت نام – مقدار هستند که به ترتیب نشان دهنده نام نویسنده (بزرگان) و نقل‌قول او است. در ادامه قطعه کدهای این پروژه نیز خواهند آمد. قطعه کدهای HTML پروژه نمایش نقل قول با JavaScript به صورت زیر است:
Quotes App
نقل قول روز
برای دریافت نقل قول تصادفی روی دکمه کلیک کنید
قطعه کدهای CSS پروژه نقل قول با جاوا اسکریپت به صورت زیر است:
//Use an array to hold the value of the quotes
const arrayOfQuotes = [
{'author': 'کورش کبیر',
'quote': 'فرمانروایی بر مردمان به شیوه ای نیک و والا بزرگ تر از هر کار دیگر است '
},
{'author': 'آلبرت انیشتین',
'quote': 'از دیروز بیاموز. برای امروز زندگی کن و امید به فردا داشته باش '
},
{'author': 'گاندی',
'quote': 'پیروزی آن نیست که هرگز زمین نخوری، آنست که بعد از هر زمین خوردنی برخیزی'
},
{'author': 'والترنیس',
'quote': 'تغییر دهندگان اثر گذار در جهان کسانی هستند کـه بر خلاف جریان شنا میکنند'
},
{'author': 'داستا یوفسکی',
'quote': 'تنها آرامش و سکوت سرچشمه‌ي نیروی لایزال اسـت'
},
{'author': 'ناپلئون هیل',
'quote': 'دانستن کافی نیست، باید بـه دانسته ي خود عمل کنید'
},
];
function generateQuote(){
const random = Number.parseInt(Math.random()*arrayOfQuotes.length + 1);
document.querySelector('#quoteOutput').textContent = `"${arrayOfQuotes[random].quote}"`;
document.querySelector('#authorOutput').textContent = `--${arrayOfQuotes[random].author}`;
}
خروجی این پروژه به صورت زیر است:
8. ساخت ماشین حساب BMI
پروژه جدید این فهرست، ساخت ماشین حساب «BMI» با جاوا اسکریپت است. این پروژه نیز برای افراد مبتدی بسیار مناسب به حساب می‌آید و برای تمرین مفاهیم زیر بسیار مناسب است.
استفاده از «جاوا اسکریپت خارجی» (external JavaScript)
گزاره شرطی در جاوا اسکریپت
ویژگی «AddEventListener» جاوا اسکریپت
انتخاب‌گرهای CSS جاوا اسکریپت
این ماشین حساب فقط به دو ورودی نیاز دارد، قد کاربر به سانتی‌متر و وزن کاربر بر حسب کیلوگرم. زمانی که کاربر این دو ورودی را دریافت کند، یک بازخوانی BMI دریافت خواهد کرد. برخلاف پروژه‌های قبلی در این پروژه از جاوا اسکریپت داخلی استفاده نمی‌شود و از یک فایل JavaScript خارجی استفاده خواهد شد. در ادامه قطعه کدهای این پروژه نیز قرار خواهند گرفت.
فیلم آموزش ویو جی اس – فریم ورک Vue.js در جاوا اسکریپت JavaScript در تم آف
کلیک کنید
قطعه کدهای HTML پروژه ساخت ماشین حساب BMI با جاوا اسکریپت به صورت زیر است:
تم آف -BMI ماشین حساب
تم آف -BMI ماشین حساب
قطعه کدهای CSS پروژه ساخت ماشین حساب BMI با جاوا اسکریپت به صورت زیر است:
کدهای جاوا اسکریپت ماشین حساب BMI به صورت زیر است:
const form = document.querySelector('form');
form.addEventListener('submit', function(e){
e.preventDefault();
const height = parseInt(document.querySelector('#height').value);
const weight = parseInt(document.querySelector('#weight').value);
const results = document.querySelector('#results');
if((height === '') || (height ${bmi}`
}
});
//notes
//NaN !== NaN, use the isNaN() function
//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN
خروجی این پروژه به صورت زیر خواهد بود:
9. تبدیل پوند به کیلوگرم
یکی دیگر از پروژه های ساده جاوا اسکریپت، تبدیل پوند به کیلوگرم است که برای تمرین مفاهیم زیر بسیار مناسب به حساب می‌آید.
شنونده رویداد در جاوا اسکریپت
گزاره شرطی در جاوا اسکریپت
انتخاب‌گرهای CSS جاوا اسکریپت
در این برنامه جاوا اسکریپت، ماشین حساب فقط به یک ورودی نیاز دارد که آن هم وزن کاربر بر حسب پوند است و با زدن دکمه تبدیل این وزن به کیلوگرم تبدیل خواهد شد. این پروژه برای افراد مبتدی و کسانی که تازه یادگیری JavaScript را شروع کردند، بسیار مناسب است. قطعه کدهای این پروژه در ادامه قرار خواهند گرفت.
فیلم آموزش پروژه محور ویو جی اس و لاراول – طراحی وب اپلیکیشن پیش رونده PWA با Vue.js و Laravel در تم آف
کلیک کنید
قطعه کدهای HTML پروژه تبدیل وزن با جاوا اسکریپت به صورت زیر است:
Weight Converstion Tool
قطعه کدهای CSS پروژه تبدیل وزن با جاوا اسکریپت به صورت زیر است:
قطعه کدهای پروژ جاوا اسکریپت تبدیل پوند به کیلوگرم به صورت زیر است:
const form = document.querySelector('form');
//add an event listener to the form
form.addEventListener('submit', function(e){
e.preventDefault();
const input = document.querySelector('input');
let results = document.querySelector('span');
let poundsToKG;
if ((input.value Please enter a value number!"
setTimeout(function(){
results.innerHTML = '';
results.classList.remove('error');
}, 2000)
input.value = '';
} else {
poundsToKG = Number(input.value) / 2.2;
results.classList.add('no-error');
results.innerHTML = `${poundsToKG.toFixed(2)}`;
setTimeout(function(){
results.innerHTML = '';
input.value = '';
results.classList.remove('no-error');
}, 10000)
}
})
خروجی این پروژه به صورت زیر است:
10. پروژه تغییر رنگ پس زمینه
یکی دیگر از پروژه های جاوا اسکریپت که برای مبتدیان مناسب است، تغییر رنگ پس زمینه به حساب می‌آید. در این پروژه چهار دکمه مختلف برای چهار رنگ مختلف قرار داده شده است و توسط شنونده رویداد JavaScript رنگ پس‌زمینه با کلیک روی هر دکمه به آن رنگ تغییر خواهد کرد. این پروژه برای تمرین مفاهیم زیر بسیار مناسب است.
حلقه‌های شرطی در جاوا اسکریپت
ویژگی AddEventListener جاوا اسکریپت
انتخاب‌گرهای CSS جاوا اسکریپت
دست‌کاری CSS جاوا اسکریپت
در ادامه قطعه کدهای پروژه قرار خواهند گرفت.
فیلم آموزش React.JS – استفاده از Fetch و Axios برای اتصال به API در تم آف
کلیک کنید
قطعه کدهای HTML پروژه تغییر رنگ با جاوا اسکریپت به صورت زیر است:
پروژه تغییر رنگ پس زمینه - جاوا اسکریپ
پروژه تغییر رنگ پس زمینه با جاوا اسکریپت - تم آف
برای تغییر رنگ پس زمینه روی دایره رنگ مد نظر کلیک کنید
قطعه کدهای CSS پروژه تغییر رنگ پس زمینه با جاوا اسکریپت به صورت زیر است:
قطعه کدهای پروژه تغییر رنگ پس زمینه به صورت زیر است:
const buttons = document.querySelectorAll('.button');
const body = document.querySelector('body');
console.log(buttons);
buttons.forEach(function(button){
button.addEventListener('click', function(e){
console.log(e.target);
if (e.target.id === 'grey'){
body.style.backgroundColor = e.target.id;
}
if (e.target.id === 'Purple'){
body.style.backgroundColor = e.target.id;
}
if (e.target.id === 'blue'){
body.style.backgroundColor = e.target.id;
}
if (e.target.id === 'yellow'){
body.style.backgroundColor = e.target.id;
}
})
})
خروجی این پروژه به صورت زیر خواهد بود:
11. پروژه شمارنده طول کلمات
یکی دیگر از پروژه های جاوا اسکریپت مناسب برای مبتدیان، شمارنده طول کلمات است. در این پروژه کاربر کلمه یا کلماتی را به عنوان ورودی می‌نویسد و JavaScript طول آن‌ها را محاسبه کرده و در صفحه نمایش می‌دهد. در این پروژه از شنونده رویداد و دست‌کاری‌های DOM استفاده شده است. در ادامه قطعه کدهای این پروژه قرار خواهند گرفت.
فیلم آموزش پروژه محور نود جی اس Node.js – ساخت چت روم ویدئویی در تم آف
کلیک کنید
قطعه کدهای HTML پروژه شمارنده طول کلمات به صورت زیر است:
Word Length Calcuator
متن مد نظر را اینجا بنویسید
قطعه کدهای CSS پروژه برای محاسبه طول کلمات به صورت زیر است:
قطعه کدهای جاوا اسکریپت شمارنده طول کلمات به صورت زیر است:
let button = document.getElementById('btn');
button.addEventListener('click', function(){
let word = document.getElementById('str').value;
let count = word.length;
let outputDiv = document.getElementById('output');
outputDiv.innerHTML = `
${count}
`
});
خروجی این پروژه به صورت زیر است:
12. پروژه ساخت فرم تماس با حافظه محلی
این پروژه برای بازیابی اطلاعات از فیلدهای متنی فرم‌های تماس و ذخیره کردن آن‌ها در حافظه‌های محلی استفاده خواهد کرد. این پروژه برای تمرین استفاده از حافظه محلی در جاوا اسکریپت بسیار مناسب است. همچنین باید به این نکته توجه داشت که پروژه فعلی اسکریپت‌های سمت سرور را پیاده‌سازی نخواهد کرد، بنابراین نباید نگران اضافه کردن ویژگی‌های «Action» و «Method» در این برنامه بود. پروژه ساخت فرم تماس برای تمرین موارد زیر در JavaScript بسیار مناسب است:
شنونده رویداد در جاوا اسکریپت
دست‌کاری DOM
کار با حافظه محلی
در ادامه قطعه کدهایها و خروجی مربوط به این پروژه JavaScript قرار خواهند گرفت.
فیلم آموزش رایگان جاوا اسکریپت JavaScript – سریع و آسان در ۱۵۰ دقیقه در تم آف
کلیک کنید
قطعه کدهای HTML پروژه ساخت فرم تماس با جاوا اسکریپت به صورت زیر است:
Contact Form
قطعه کدهای CSS پروژه ساخت فرم تماس با جاوا اسکریپت به صورت زیر است:
قطعه کدهای جاوا اسکریپت ساخت فرم تماس با جاوا اسکریپت به صورت زیر است:
let sendButton = document.getElementById('send');
let resetButton = document.getElementById('reset');
let form = document.getElementById('form');
form.addEventListener('submit', function(e){
e.preventDefault();
})
resetButton.addEventListener('click', function(){
let name = document.getElementById('name');
let email = document.getElementById('email');
let message = document.getElementById('message');
name.value = '';
email.value = '';
message.value = '';
})
sendButton.addEventListener('click', function(e){
let name = document.getElementById('name');
let email = document.getElementById('email');
let message = document.getElementById('message');
name = name.value;
localStorage.setItem('name', name);
email = email.value;
localStorage.setItem('email', email);
message = message.value;
localStorage.setItem('message', message);
})
رابط کاربری این پروژه به صورت زیر خواهد بود:
خروجی نهایی این پروژه پس از زدن دکمه ارسال به صورت زیر است:
13. اپلیکیشن نمایش روز هفته
این پروژه ساده جاوا اسکریپت روز هفته را به همراه نقل‌قولی به کاربران نمایش می‌دهد و برای تمرین مفاهیم مقدماتی JavaScript بسیار مناسب است. در واقع این پروژه روی ٣ تا موضوع زیر در JavaScript مانور می‌دهد:
شیء Date()
آرایه‌های جاوا اسکریپت
عبارت Switch در جاوا اسکریپت
در ادامه قطعه کدهای مربوط به این پروژه Javascript خواهند آمد.
مطلب پیشنهادی:
آموزش پروژه محور جاوا اسکریپت | 15 پروژه عملی و کاربردی
شروع مطالعه
قطعه کدهای HTML پروژه نمایش روز هفته با JavaScript به صورت زیر است:
Day of the Week
نمایش روز هفته
Display day of the week.
Display a quote
قطعه کدهای CSS پروژه نمایش روز هفته با جاوا اسکریپت به صورت زیر است:
قطعه نمایش روز هفته با جاوا اسکریپت به صورت زیر است:
//Grab day of the week from local computer
let date = new Date();
let dayOfWeekNumber = date.getDay();
let nameOfDay;
let quote;
switch(dayOfWeekNumber){
case 0:
nameOfDay = 'یکشنبه';
quote = 'سلام تم آف';
break;
case 1:
nameOfDay = 'دوشنبه';
quote = 'به مجله فراردس خوش آمدید';
break;
case 2:
nameOfDay = 'سه شنبه';
quote = 'مجله تم آف';
break;
case 3:
nameOfDay = 'چهارشنبه';
quote = 'سلام فاردرس.';
break;
case 4:
nameOfDay = 'پنج شنبه';
quote = 'دانشگاه تم آف';
break;
case 5:
nameOfDay = 'جمعه';
quote = 'سلام فاردرس';
break;
case 6:
nameOfDay = 'شنبه';
quote = 'مجله تم آف!';
break;
}
//Display the day of the week
let weekdayDiv = document.getElementById('weekday');
weekdayDiv.innerHTML = `${nameOfDay}`;
//Display quote
let quoteDiv = document.getElementById('phrase');
quoteDiv.innerHTML = `${quote}`
خروجی این پروژه نیز به صورت زیر خواهد بود:
14. پروژه بازی جمع
یکی دیگر از پروژه های جاوا اسکریپت که برای افراد مبتدی مناسب خواهد بود، پروژه بازی جمع با JavaScript است. در این بازی جاوا اسکریپت دو عدد را تصادفی به عنوان ورودی به کاربر خواهد داد و از کاربر می‌خواهد که نتیجه را حدس بزند. در صورتی که جواب کاربر درست باشد، پیام موفقیت‌آمیز بودن ظاهر می‌شود و در غیر این صورت پیام خطا به کاربر نمایش داده خواهد شد. این پروژه نیز برای تمرین با اجزایی مانند موارد زیر در JavaScript مناسب است.
قطعه کدهای JavaScript پروژه بازی جمع به صورت زیر است:
//generate random numbers
let firstNumber = parseInt(Math.random()*10);
let secondNumber = parseInt(Math.random()*10);
//get the total
let total = firstNumber + secondNumber;
//display numbers on the canvas
let primary = document.getElementById('primary-number');
primary.innerHTML = `
${firstNumber}
`;
let secondary = document.getElementById('secondary-number');
secondary.innerHTML = `
${secondNumber}
`
//get guess from user
let button = document.getElementById('btn')
button.addEventListener('click', function(){
let guess = document.getElementById('guess').value;
guess = Number(guess);
//check answer
if (guess === total){
alert('Correct');
window.location.reload()
} else {
alert('Sorry. Incorrect. The correct answer was ' + total + '.')
window.location.reload()
}
});
خروجی این پروژه چیزی مانند تصویر زیر خواهد بود:
15. پروژه فهرست وظایف
پروژه بعدی در این مطلب، پروژه فهرست کارها با جاوا اسکریپت است. هدف از پیاده‌سازی این پروژه،ایجاد فهرستی از وظایف یا کارها خواهد بود که به صورت بسیار ساده پیاده‌سازی خواهد شد. این پروژه برای تمرین مفاهیم زیر بسیار پروژه مناسبی به حساب می‌آید.
شنونده رویداد
آرایه در جاوا اسکریپت
تابع در جاوا اسکریپت
ذخیره‌سازی با جاوا اسکریپت
دست‌کاری DOM
قطعه کدهای این پروژه در ادامه قرار خواهند گرفت.
فیلم آموزش برنامه نویسی تایپ اسکریپت TypeScript در جاوا اسکریپت در تم آف
کلیک کنید
قطعه کدهای HTML پروژه ساخت فهرست کار به صورت زیر است:
Todo List
قطعه کدهای CSS پروژه فهرست کار با جاوا اسکریپت به صورت زیر است:
قطعه کدهای JavaScript پروژه فهرست کارها به صورت زیر است:
//grab the form and prevent default submission behavior
let form = document.getElementById('form');
//items array for new items
let items = [];
//function call to check local storage and display items, if any.
displayLocalStorage();
//submit new items to todolist
form.addEventListener('submit', function(e){
e.preventDefault();
//grab input from
let todoInput = document.getElementById('todo-input').value;
//if input is blank do nothing
if (todoInput === ""){
alert('Please enter valid input!');
}
else {
//display items
displayItems(todoInput);
//Place todoItem in localStorage
storeItem(todoInput);
//Clear the todo item field
document.getElementById('todo-input').value = '';
//add an event listener to the delete button
addDeleteFunction(todoInput);
}
});
//function to store items in local storage
function storeItem(item){
items.push(item);
localStorage.setItem('item',JSON.stringify(items));
};
//function to display items in the DOM
function displayItems(todoInput){
//create a li tag for the element
let todoItem = document.createElement('li');
todoItem.innerHTML = `${todoInput}
حذف کار
`;
//Display the todo item
let todoList = document.querySelector('ul');
todoList.appendChild(todoItem);
};
function displayLocalStorage(){
let storage = localStorage.getItem('item');
if (storage === null){
items = [];
} else {
let storageParsed = JSON.parse(storage);
storageParsed.forEach(function(storageItem){
displayItems(storageItem);
})
};
};
function addDeleteFunction(todoInput){
let deleteButton = document.querySelectorAll('.delete-item');
deleteButton.forEach(function(button, index){
button.addEventListener('click', function(e){
console.log(e.path[1].childNodes);
//remove index number from localStorage
let deletedStorage = localStorage.getItem('item');
let deletedStorageParsed = JSON.parse(deletedStorage);
deletedStorageParsed.splice(index, 1);
console.log(deletedStorageParsed);
localStorage.setItem('item',JSON.stringify(deletedStorageParsed));
if(deletedStorageParsed.length === 0){
let todoList = document.querySelector('ul');
todoList.innerHTML = '';
let todoItem = document.createElement('li');
todoItem.innerHTML = `No more todos!`;
todoList.appendChild(todoItem);
displayLocalStorage();
} else {
localStorage.setItem('item',JSON.stringify(deletedStorageParsed));
}
})
})
}
خروجی این پروژه به صورت زیر خواهد بود:
16. ساخت سوالات چهار گزینه ای با جاوا اسکریپت
یکی دیگر از پروژه های جاوا اسکریپت مهم در این مطلب، پروژه ساخت سؤالات چهارگزینه‌ای با JavaScript است. در این پروژه چند سؤال چهارگزینه‌ای از کاربر پرسیده می‌شود و در آخر با توجه به تعداد پاسخ‌های صحیح، امتیازی به کاربر تعلق می‌گیرد. این پروژه برای تمرین مفاهیم زیر در جاوا اسکریپت بسیار مهم است.
شنونده رویداد
حلقه‌های For در جاوا اسکریپت
forEach در جاوا اسکریپت
توابع جاوا اسکریپت
دست‌کاری DOM
در ادامه قطعه کدهای این پروژه قرار خواهند گرفت.
مطلب پیشنهادی:
ساخت ماشین حساب با جاوا اسکریپت – از صفر تا صد + کد
شروع مطالعه
قطعه کدهای HTML پروژه ساخت سؤالات چهارگزینه‌ای با جاوا اسکریپت به صورت زیر است:
Test4
جواب صحیح را انتخاب کنید
سوال بعدی
قطعه کدهای CSS پروژه ساخت سؤالات چهارگزینه‌ای با جاوا اسکریپت به صورت زیر است:
قطعه کدهای پروژه ساخت سؤالات چهارگزینه‌ای به صورت زیر است:
var questions = [
{
question: 'گوگل در چه سالی تاسیس شد؟',
choices: ['2002', '2000', '1998', '1989'],
correctAnswer: 2
},
{
question: 'مخترع اینترنت چه کسی است؟',
choices: ['نیکولا تسلا', 'مکلوهان', 'ونار بوش', 'رابرت کان'],
correctAnswer: 2
},
{
question: 'مدیر عامل شرکت اپل چه کسی است؟',
choices: ['استیون جابز', 'بیل گیتس', 'تیم کوک', 'لیزا برنان'],
correctAnswer: 0
},
{
question: 'اولین کامپیوتر جهان در چه سالی تولید شد؟',
choices: ['1800', '1875', '1850', '1884'],
correctAnswer: 1
},
{
question: 'گرانترین شرکت فناوری 2022 چه شرکتی است؟',
choices: ['مایکروسافت', 'تسلا', 'آمازون', 'اپل'],
correctAnswer: 3
}
];
var currentQuestion = 0;
var correctAnswers = 0;
var quizOver = false;
window.addEventListener('DOMContentLoaded', function(e){
displayCurrentQuestion();
var quizMessage = document.querySelector('.quizMessage');
quizMessage.style.display = 'none';
document.querySelector('.nextButton').addEventListener('click', function(){
if(!quizOver){
var radioBtnsChecked = document.querySelector('input[type=radio]:checked');
if (radioBtnsChecked === null){
quizMessage.innerText = 'لطفا پاسخی را انتخاب کنید';
quizMessage.style.display = 'block';
} else {
console.log(radioBtnsChecked.value);
quizMessage.style.display = 'none';
if (parseInt(radioBtnsChecked.value) === questions[currentQuestion].correctAnswer){
correctAnswers++;
}
currentQuestion++;
if (currentQuestion .question');
var choiceList = document.querySelector('.quizContainer > .choiceList');
var numChoices = questions[currentQuestion].choices.length;
//Set the questionClass text to the current question
questionClass.innerText = question;
//Remove all current
elements (if any)
choiceList.innerHTML = '';
var choice;
for (i = 0; i ' + choice + '
'
choiceList.appendChild(li);
}
}
function resetQuiz(){
currentQuestion = 0;
correctAnswers = 0;
hideScore();
}
function displayScore(){
document.querySelector('.quizContainer > .result').innerText = 'امتیاز شما: ' + correctAnswers + ' out of ' + questions.length;
document.querySelector('.quizContainer > .result').style.display = 'block';
}
function hideScore(){
document.querySelector('.result').style.display = 'none';
}
//https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event
خروجی این پروژه به صورت زیر خواهد بود:
17. خاموش و روش کردن لامپ با جاوا اسکریپت
یکی دیگر از پروژه های جاوا اسکریپت برای مبتدیان، خاموش و روشن کردن لامپ با جاوا اسکریپت است. این پروژه بسیار ساده بوده و در آن کاربر تنها با کلیک روی لامپی که در صفحه مرورگر نمایش داده خواهد شد، اقدام به خاموش و روشن کردن آن خواهد کرد.
پروژه مذکور برای اهدافی مانند استایل سازی با CSS با استفاده از JavaScript و دست‌کاری DOM بسیار مناسب است. لازم به ذكر است همراه این پروژه 2 فایل تصویری نیز لازم خواهد بود که باید در پوشه اصلی پروژه قررا بگیرند. در ادامه قطعه کدهای مربوط به این پروژه قرار دارند.
مطلب پیشنهادی:
ساخت بازی دوز با جاوا اسکریپت — از صفر تا صد
شروع مطالعه
قطعه کدهای HTML پروژه خاموش و روشن کردن لامپ با جاوا اسکریپت به صورت زیر است:
Light Switching
با کلیک روی لامپ لامپ را روشن و خاموش کنید
قطعه کدهای CSS پروژه خاموش و روشن کردن لامپ با جاوا اسکریپت به صورت زیر است:
باید در پوشه اصلی پروژه قرار بگیرند، در نهایت خروجی این پروژه به صورت زیر است:
18. ساخت بازی ضربه زدن به هدف
این پروژه در واقع به ساخت نوعی بازی می‌پردازد که در آن باید هر با به هدف ضربه زد تا امتیاز لازم را کسب کرد. در اینجا هدف جانداری است که پشت تپه‌های کوچک شن ظاهر می‌شود. در این پروژه از DOM API، توابع مختلف، ریاضیات و غیره استفاده شده است و تمرین خوبی برای افرادی که دانش متوسطی از جاوا اسکریپت دارند به حساب می‌آید.
تابعی برای ایجاد زمان تصادفی که هدف در آن ظاهر می‌شود.
تابعی برای انتخاب تپه تصادفی که هدف از آن به بیرون نگاه می‌کند.
تابعی برای بیرون آمدن هدف از پشت تپه تصادفی با استفاده از دو تابع بالا.
تابعی برای شروع بازی.
تابعی برای جلوگیری از تقلب.
در ادامه قطعه کدهایها و خروجی این پروژه قرار داده خواهد شد.
مطلب پیشنهادی:
ساخت اسلایدر با جاوا اسکریپت — آموزش کامل و رایگان + کد
شروع مطالعه
قطعه کدهای HTML پروژه بازی ضربه زدن به هدف با JavaScript:
قطعه کدهای جاوا اسکریپت این پروژه نیز به صورت زیر است:
const holes = document.querySelectorAll('.hole');
const scoreBoard = document.querySelector('.score');
const moles = document.querySelectorAll('.mole');
let lastHole;
let timeUp = false;
let score = 0;
//create a function to make a random time for mole to pop from the hole
function randomTime(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
function randomHole(holes){
const index = Math.floor(Math.random() * holes.length);
const hole = holes[index];
//prevent same hole from getting the same number
if (hole === lastHole){
return randomHole(holes);
}
lastHole = hole;
return hole;
}
function peep() {
const time = randomTime(500, 1000); //get a random time to determine how long mole should peep
const hole = randomHole(holes); //get the random hole from the randomHole function
hole.classList.add('up'); //add the CSS class so selected mole can "pop up"
setTimeout(() => {
hole.classList.remove('up'); //make the selected mole "pop down" after a random time
if(!timeUp) {
peep();
}
}, time);
}
function startGame() {
scoreBoard.textContent = 0;
timeUp = false;
score = 0;
peep();
setTimeout(() => timeUp = true, 15000) //show random moles for 15 seconds
}
function wack(e){
if(!e.isTrusted) return; //** new thing I learned */
score++;
this.parentNode.classList.remove('up'); //this refers to item clicked
scoreBoard.textContent = score;
}
moles.forEach(mole => mole.addEventListener('click', wack))
در نهایت خروجی این پروژه به صورت زیر است:
19. پروژه به روزرسانی متغیرهای CSS
هدف از این پروژه دست‌کاری متغیرهای CSS به‌صورت تعاملی با استفاده از JavaScript است. این پروژه خیلی سخت نیست و برای افراد مبتدی توصیه می‌شود. همچنین در پروژه مذکور توابع مختلف جاوا اسکریپت، DOM API، ریاضیات و غیره استفاده شده است.
در این پروژه عکسی را می‌توان فراخوانی کرد و وضوح رنگ، فاصله‌گذاری و رنگ پایه آن را با JavaScript به صورت مستقیم قرار داد که در اینجا عکسی فرضی برای این کار قرار داده شده است. در ادامه کدهای JavaScript این پروژه به همراه خروجی آن قرار گرفته خواهد شد.
قطعه کدهای پروژه به‌روزرسانی متغیرهای CSS با جاوا اسکریپت به صورت زیر است:
Scoped CSS Variables and JS
دست کاری متغیرهای سی اس اس با جاوا اسکریپت
خروجی این پروژه به صورت زیر خواهد بود:
20. جلوه ماوس با جاوا اسکریپت
پروژه بعدی در این مطلب، پروژه جلوه‌های ماوس با جاوا اسکریپت است. امروزه از جلوه ماوس در توسعه وب بسیار استفاده می‌شود. پروژه جلوه‌های ماوس با JavaScript در تعاملی کردن صفحات وب بسیار کاربرد دارد.
در این پروژه توپ‌های زیادی در صفحه پرت می‌شوند که در صورت گذاشتن ماوس روی آن‌ها توپ منبسط شده و بعد به حالت قبلی خود بازمی‌گردند. در ادامه قطعه کدهای این پروژه جذاب و خروجی آن قرار خواهند گرفت.
مطلب پیشنهادی:
ساخت یک بازی ساده با جاوا اسکریپت — از صفر تا صد
شروع مطالعه
قطعه کدهای HTML پروژه جلوه ماوس با جاوا اسکریپت به صورت زیر است:
قطعه کدهای CSS پروژه جلوه ماوس به صورت زیر است:
body {
margin: 0px;
background-color: rgb(56,220, 250);
overflow: hidden;
}
قطعه کدهای جاوا اسکریپت پروژه جلوه ماوس نیز به صورت زیر است:
یکی دیگر از پروژه های جاوا اسکریپت دیگر در این مطلب، پروژه ساخت ویرایشگر کدهای یا کدهای ادیتور است. این پروژه اگر چه خیلی ساده به نظر نمی‌رسد اما برای افراد مبتدی و کسانی که دانش متوسطی از JavaScript دارند مناسب است.
کدهای ادیتوری که در این پروژه به ساخت آن پرداخته خواهد شد از سه زبان HTML، جاوا اسکریپت و PHP پشتیبانی می‌کند و کاربر می‌تواند بین آن‌ها سوئیچ کند. در ادامه قطعه کدهای مربوط به این ادیتور قرار خواهند گرفت.
مطلب پیشنهادی:
ساخت اپلیکیشن مدیریت هزینه با جاوا اسکریپت — از صفر تا صد
شروع مطالعه
قطعه کدهای HTML پروژه ساخت کدهای ادیتور با جاوا اسکریپت به صورت زیر است:
کد ادیتور ساده - مجله تم آف
*thanks to Lea Verou for Prism.js
قطعه کدهای CSS پروژه ساخت کدهای ادیتور با جاوا اسکریپت به صورت زیر است:
پروژه بعدی در این فهرست، پروژه ساخت اسلایدر با جاوا اسکریپت است که برای مبتدیان پروژه نسبتا خوبی برای تمرین به حساب می‌آید. در این پروژه، عکس‌ها در آرایه‌ای کدهایگذاری شده‌اند و هدف از آن مشاهده تصاویر به صورت اسلایدی خواهد بود.
در این پروژه از مفاهیم آرایه‌ها، حلقه For، تغییرات CSS با جاوا اسکریپت و غیره استفاده شده است. در ادامه قطعه کدهایها و خروجی این پروژه قرار خواهند گرفت.
مطلب پیشنهادی:
ساخت گالری تصاویر با جاوا اسکریپت — راهنمای کاربردی
شروع مطالعه
قطعه کدهای HTML پروژه ساخت اسلایدر به صورت زیر است:
JavaScript Image Slider
پروژه اسلایدر جاوا اسکریپت - مجله تم آف
قطعه کدهای CSS پروژه ساخت اسلایدر با جاوا اسکریپت به صورت زیر است:
قطعه کدهای جاوا اسکریپت ساخت اسلایدر به صورت زیر است:
// create an array of image sources;
let images = [
'image1.png', 'image2.png', 'image3.png','image4.png'
]
let i = 0;
//add initial image to canvas
let canvas = document.getElementById('canvas');
canvas.style.background = `url(./images/${images[0]})`
//add eventListeners to arrows
let arrows = document.querySelectorAll('.arrow');
arrows.forEach(function(arrow){
arrow.addEventListener('click', function(e){
if (e.target.id === "left"){
//check to see if at beginning of array
i--;
if (i = images.length ){
i = 0;
}
canvas.style.background = `url(./images/${images[i]})`;
}
})
});
خروجی این پروژه اسلایدری به صورت زیر خواهد بود:
سؤالات متداول
در این بخش چندین سؤال متداول در مورد پروژه های JS مورد بررسی قرار خواهند گرفت تا کاربر با دیدی بازتری بتواند مطابق بامهارت خود پروژه‌هایی را برای تمرین برگزیند.
چه پروژه هایی را می‌توان با جاوا اسکریپت انجام داد؟
از جاوا اسکریپت می‌توان برای ساخت پروژه‌های بک‌اند و فرانت‌اند استفاده کرد. برای توسعه پروژه‌های بک‌اند نیاز به استفاده از فریمورک نود جی اس است. برای برنامه نویسان مبتدی جاوا اسکریپت توصیه می‌شود که پروژه‌های ساده‌ای مانند پروژه زمان‌سنج، پروژه تغییر رنگ پس‌زمینه، پروژه ساخت ساعت دیجیتال با جاوا اسکریپت و غیره را انتخاب کنند.
مطلب پیشنهادی:
11 ترفند بسیار کاربردی جاوا اسکریپت — به زبان ساده
شروع مطالعه
بهترین پروژه های جاوا اسکریپ برای مبتدیان کدهایام پروژه ها هستند؟
بسته به مهارت که کاربر دارد هر پروژه‌ای می‌تواند کاربرد خاص خودش را داشته باشد اما به صورت کلی برای مبتدیان مواردی مانند ساخت ساعت با JavaScript، پروژه ساخت ماشین حساب BMI با جاوا اسکریپت و فهرست کارهای JavaScript برای مبتدیان بسیار مناسب هستند.
چگونه باید یک پروژه جاوا اسکریپت را شروع کرد؟
قبل از هر تصمیمی برای پیاده‌سازی یک پروژه کاربر باید هدف خود را از پروژه تعیین کند. مثلاً باید بداند که پروژه را برای بک‌اند می‌سازد یا برای فرانت‌اند و در نهایت باید سطح مهارت خود را نیز در نظر بگیرد. پس از آن باید کدهای ادیتوری مناسب برای این کار برگزیند و ایده خود را با کمک به مهارت خود و جستجو در منابع اطلاعاتی و اینترنت پیاده‌سازی کند.
مطلب پیشنهادی:
ساخت بازی سنگ، کاغذ، قیچی در جاوا اسکریپت — راهنمای کاربردی
شروع مطالعه
آیا یادگیری جاوا اسکریپت برای مبتدیان آسان است؟
بله، جاوا اسکریپت زبانی سطح بالا است و یکی از ساده‌ترین زبان‌های برنامه نویسی برای مبتدیان به حساب می‌آید. برای اجرای برنامه‌های نوشته شده با جاوا اسکریپت تنها چیزی که نیاز است، ویرایشگر مناسب کدهای و مرورگری خواهد بود که از جاوا اسکریپت پشتیبانی کند. همچنین در حال حاضر منابع اطلاعاتی رایگان و پولی زیادی در سطح وب برای یادگیری جاوا اسکریپت وجود دارد که کار مبتدیان را بیش از هر زمانی آسان‌تر کرده است.
سخن پایانی
در این مطلب آموزشی از مجله تم آف سعی شد که پروژه‌های جذاب و مناسبی از جاوا اسکریپت به کاربران معرفی شود تا کاربران بتوانند از این پروژه‌ها ایده بگیرند. در این مطلب ٢٢ پروژه جاوا اسکریپت از مبتدی تا سطح متوسط به کاربران معرفی و در کنار آن سورس کدهای این پروژه های جاوا اسکریپت نیز آورده شد. پروژه‌های مذکور در این مطلب می‌توانند ایده‌های جذابی برای کاربران باشند و به آن‌ها انگیزه دهند که این پروژه‌ها را بیشتر و بهتر توسعه دهند. امید است که این مطلب مورد پسند کاربران عزیز قرار گرفته باشد.
.png "چرا باید الکترون (ElectronJS) را یاد بگیریم")
.png "کتابخانه بند کفش (ShoeLace) و مزایای آن")
