۲۲ پروژه جاوا اسکریپت برای تمرین و افزایش مهارت
برای تبدیل شدن به یک برنامه نویس وب قوی و پیادهسازی پروژههای مختلف وب، لازم است هر فرد متقاضی این حرفه، مهارتهای زبان برنامه نویسی جاوا اسکریپت را در خود بهبود ببخشد. جاوا اسکریپت هماکنون یکی از محبوبترین زبانهای برنامه نویسی است و به خصوص در توسعه وب بسیار مورد استفاده قرار میگیرد. در این مطلب آموزشی از مجله تم آف 22 پروژه جاوا اسکریپت برای تمرین و بهبود دانش کاربران از JavaScript به همراه توضیحات کوتاهی با هر پروژه ارائه شده است. ایدههای به کار گرفته شده در این پروژههای مختلف از سطح مبتدی تا متوسط را شامل میشوند و برای کاربرانی که به جاوا اسکریپت علاقه دارند، بسیار مفید هستند.
نحوه انتخاب بهترین پروژه جاوا اسکریپت برای یادگیری سریعتر
بهترین راه برای یادگیری یک زبان برنامه نویسی، صرف زمان و تلاش روی پروژههای مختلف است. کاربران برای انتخاب بهترین پروژه به منظور کمک به ارتقای دانش خود، باید نسبت به تسلط آنها به این زبان پروژه های جاوا اسکریپتی خود را انتخاب کرده و روی آنها کار کنند.
برای مثال کسانی که در سطح صفر از برنامه نویسی جاوا اسکریپت قرار دارند یا در سطح بسیار مبتدی با آن آشنا هستند، بهتر است از پروژههای ساده جاوا اسکریپت شروع کنند. به صورت کلی بهتر است کاربران همیشه موضوعهایی را انتخاب کنند که از سطح دانش فعلی آنها کمی بالاتر هستند. این به این دلیل است که مانور دادن فقط روی چیزهایی که یاد دارند، کمکی به پیشرفتشان نخواهد کرد.
فهرست 22 پروژه جاوا اسکریپت
در سطح وب، سورس کدهای زیادی از پروژههای مختلف برای جاوا اسکریپت وجود دارد. در این بخش، فهرست ٢٢ تا از بهترین پرژوه های جاوا اسکریپت به همراه سورس کدهای آنها گرد آوری شده است که کاربران به دلخواه خود میتوانند کدهای آن را دستکاری کرده و آنها را کاملاً شخصیسازی کنند تا بتوانند تسلط بیشتری را روی زبان جاوا اسکریپت و مهارت برنامه نویسی با آن کسب کنند. در این بخش ابتدا عنوان و موضوع پروژهها فهرست شدهاند و سپس هر پروژه در بخشی جداگانه معرفی و کدهای آن ارائه شده است.
همچنین تا حد امکان سعی کردهایم کدهایها را توضیح بدهیم تا چندان جای ابهام باقی نماند. اما بهترین روش برای یادگیری این است که ابتدا سعی کنیم خودمان کدهای هر پورژه را بنویسیم و بعد از کدهای این مطلب کمک بگیریم، اما در هر صورت اجرا کردن کدهایها و حتی نوشتن انها در کدهای ادیتور به یادگیری هر چه بهتر کمک بسیار زیادی میکند.
- پروژه زمانسنج با JavaScript
- ساخت ساعت دیجیتال با جاوا اسکریپت
- پروژه ساخت ماشین حساب
- فهرست مواد غذایی
- پروژه ساخت ساعت آنالوگ با جاوا اسکریپت
- ساخت ماشین حساب وام
- پروژه نقل قول از سخن بزرگان
- ساخت ماشین حساب BMI با جاوا اسکریپت
- پروژه تبدیل پوند به کیلوگرم
- تغییر رنگ پس زمینه با جاوا اسکریپت
- پروژه شمارنده طول کلمات
- ساخت فرم تماس با حافظه محلی
- اپلیکیشن نمایش روز هفته با جاوا اسکریپت
- پروژه بازی جمع با JavaScript
- فهرست وظایف با جاوا اسکریپت
- ساخت سوالات چهار گزینهای
- پروژه خاموش و روش کردن لامپ
- ساخت بازی ضربه زدن به هدف
- بهروزرسانی متغیرهای CSS با جاوا اسکریپت
- جلوه ماوس با جاوا اسکریپت
- پروژه ساخت کدهای ادیتور
- ساخت اسلایدر عکس با جاوا اسکریپت
1. پروژه زمانسنج با JavaScript
پروژه زمانسنج، پروژهای جذاب است که برای افرادی مبتدی بسیار مناسب به حساب میآید. در این پروژه کاربران با سه دکمه زیر با زمانسنج تعامل برقرار کنند.
- دکمه شروع
- دکمه توقف
- دکمه بازنشانی
در این پروژه از HTML و CSS نیز استفاده شده است که کدهای منبع آن به صورت زیر خواهد بود.
کدهای HTML پروژه زمانسنج با JavaScript به صورت زیر است:
کرنومتر
پروژه کرنومتر جاوا اسکریپت - تم آف
00:00
کدهای CSS پروژه زمانسنج به صورت زیر است:
/* Variabes */
$orange: #ffa600;
$grey:#f3f3f3;
$white: #fff;
$base-color:$orange ;
/* Mixin's */
@mixin transition {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
@mixin corners ($radius) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
-khtml-border-radius: $radius;
}
body {
background:$base-color;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
height:100%;
}
.wrapper {
width: 800px;
margin: 30px auto;
color:$white;
text-align:center;
}
h1, h2, h3 {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 2.6em;
text-transform: uppercase;
}
#seconds, #tens{
font-size:2em;
}
button{
@include corners (5px);
background:$base-color;
color:$white;
border: solid 1px $white;
text-decoration:none;
cursor:pointer;
font-size:1.2em;
padding:18px 10px;
width:180px;
margin: 10px;
outline: none;
&:hover{
@include transition;
background:$white;
border: solid 1px $white;
color:$base-color;
}
}
کدهای جاوا اسکریپت زمانسنج به صورت زیر است:
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 در ادامه قرار خواهند گرفت.
کدهای HTML پروژه ساخت ساعت به صورت زیر است:
کدهای CSS پروژه ساخت ساعت به صورت زیر است:
body {
background: black;
}
.clock {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: #17D4FE;
font-size: 60px;
font-family: Orbitron;
letter-spacing: 7px;
}
کدهای جاوا اسکریپت ساخت ساعت به صورت زیر است:
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
خروجی پروژه ساخت ساخت ساعت دیجیتال به صورت زیر است:
٣. ساخت ماشین حساب با جاوا اسکریپت
یکی دیگر از پروژه های تمرینی جاوا اسکریپت، ساخت ماشین حساب با جاوا اسکریپت است. این پروژه چهار عمل اصلی جمع، تفریق، صرب و تقسیم را انجام میدهد و یک دکمه به عنوان دکمه پاک کننده دارد. این پروژه برای تمرین مفاهیم زیر بسیار مفید است.
- دستکاری DOM
- «ساختارهای کنترلی» (Control Structures)
- کار با ForEach در جاوا اسکریپت
- دستکاری CSS جاوا اسکریپت
- کار با «شنونده رویداد» (EventListeners) و رویداد در جاوا اسکریپت
- و بسیاری از موارد دیگر
قطعه کدهای پروژه ساخت ماشین حساب با JavaScript در ادامه خواهند آمد.
قطعه کدهای Html ساخت ماشین حساب با جاوا اسکریپت به صورت زیر است:
Recording
قطعه کدهای CSS پروژه ماشین حساب به صورت زیر است:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.calculator{
flex: 0 0 95%;
}
.screen{
width: 100%;
font-size: 7rem;
padding: 0.5rem;
background: rgb(41,41,56);
color: white;
border:none;
}
.buttons{
display: flex;
flex-wrap: wrap;
transition: all 0.5s linear;
}
button{
flex:0 0 25%;
border: 1px solid black;
padding: 0.25rem 0;
transition: all 2s ease;
}
button:hover{
background: blue;
}
.btn-yellow{
background: rgb(245,146,62);
color: white;
}
.btn-grey{
background: rgb(224,224,224);
}
.btn,.btn-equal,.btn-clear{
font-size: 4rem;
}
.btn-equal{
background: green;
}
.btn-clear{
background: red;
}
کدهای جاوا اسکریپت پروژه ساخت ماشین حساب به صورت زیر است:
//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. پروژه فهرست مواد غذایی
هدف از این پروژه ایجاد فهرستی است که آیتمی را میپذیرد و آن را در فضای محلی ذخیره میکند. اگر کاربر بخواهد آیتم خالی را وارد کادر مربوطه کند در نتیجه برنامه به او اخطار میدهد. همچنین اگر کاربر با موفقیت آیتمی را وارد کند، برنامه به او پیام موفقیتآمیز بودن را نشان خواهد داد.
در این پروژه هر دفعه که آیتمی اضافه میشود، مورد در DOM نمایش داده خواهد شد و همچنین در حافظه محلی کاربر ذخیره میشود. همچنین اگر کاربر روی دکمه «پاک کردن موارد» کلیک کند، همه موارد از DOM و حافظه محلی حذف خواهند شد. مباحثی که در این پروژه به کار رفتهاند شامل موارد زیر هستند:
- دستکاریهای DOM
- توابع جاوا اسکریپت
- شنونده رویداد
- حلقه For در جاوا اسکریپت
- ذخیرهسازی محلی در جاوا اسکریپت
- دستکاری CSS
- گزاره شرطی در جاوا اسکریپت
در ادامه کدهای مربوط به این پروژه JavaScript قرار خواهند گرفت.
قطعه کدهای Html پروژه مواد غذایی با JavaScript به صورت زیر است:
Grocery List
display action
پروژه جاوا اسکریپت تم آف - اضافه کردن اقلام مود غذایی
display action
لیست اقلام مواد غذایی
قطعه کدهای CSS پروژه فهرست مواد غذایی با جاوا اسکریپت به صورت زیر است:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: grid;
grid-template-columns: 80%;
justify-content: center;
margin-top: 3rem;
background: #828489;
}
.addItems-container{
background: #4d7ea8;
}
.addItems-container, .displayItems-container{
margin: 1rem 0;
padding: 2rem;
border-radius: 0.5rem;
text-align: center;
border: 2px solid #272932;
box-shadow: 0 5px 10px #272932;
}
.addItems-title, .displayItems-title{
text-transform: capitalize;
}
.addItems-title{
color: #b6c2d9;
}
.addItems-action, .displayItems-action{
border: 2px solid #272932;
padding: 0.5rem 0;
text-transform: capitalize;
border-radius: 0.5rem;
display: none;
}
.addItems-input{
background: transparent;
border: none;
border-bottom: 5px solid #9e90a2;
width: 100%;
font-size: 2rem;
padding: 0.5rem;
color: #9e90a2;
outline: none;
text-transform: uppercase;
}
.addItems-submit,.displayItems-clear{
display: block;
width: 90%;
margin: 2rem auto 0 auto;
font-size: 1.5rem;
border-radius: 0.5rem;
cursor: pointer;
text-transform: capitalize;
outline: none;
}
.addItems-submit{
color: #b6c2d9;
background: transparent;
border: 3px solid #b6c2d9;
transition: all 2s ease;
}
.addItems-submit:hover{
background: #b6c2d9;
color: #272932;
}
.displayItems-container{
background: #b6c2d9;
}
.displayItems-title{
color: #4d7ea8;
margin-bottom: 0.25rem;
}
.grocery-item{
display:grid;
grid-template-columns: 4fr 1fr;
align-items: center;
border-radius: 0.5rem;
padding: 0.5rem;
transition: all 1s ease-in-out;
margin: 0.5rem 0;
}
.grocery-item:hover{
background: #828489;
}
.grocery-item__title{
text-align: left;
margin-left: 0.5rem;
font-size: 1.2rem;
text-transform: capitalize;
color: #272932;
}
.grocery-item__link{
color: red;
transition: all 2s linear;
}
.grocery-item:hover .grocery-item__link{
transform: scale(2);
}
.displayItems-clear{
color: #4d7ea8;
background: transparent;
border: 3px solid #4d7ea8;
transition: all 2s ease;
}
.displayItems-clear{
background: #4d7ea8;
color:#272932;
outline:none;
background: transparent;
}
/*Add utility action classes */
.alert{
color: red;
border-color: red;
display: block;
margin-bottom: 0.5rem;
}
.success{
color:rgb(32, 184, 32);
border-color: rgb(32, 184, 32);
display: block;
margin-bottom: 0.5rem;
}
@media screen and (min-width: 768px){
body{
grid-template-columns: 50%;
}
}
قطعه کدهای پروژه ساخت فهرست مواد غذایی به صورت زیر است:
//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 استفاده کند، بلکه باید بداند چگونه از ریاضیات برای دستکاری موقعیت بسیاری از عناصر در پروژه بهره ببرد. در ادامه قطعه کدهای این پروژه قرار خواهند گرفت.
قطعه کدهای HTML پروژه ساخت ساعت آنالوگ با JavaScript به صورت زیر است:
Analogue Clock
قطعه کدهای CSS پروژه ساعت آنالوگ با جاوا اسکریپت به صورت زیر است:
body{
background-color: #000;
}
#canvas{
margin-left: 300px;
margin-top: 50px;
}
قطعه کدهای پروژه ساعت آنالوگ به صورت زیر است:
//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 پروژه ماشین حساب وام با جاوا اسکریپت به صورت زیر است:
#loancal {
width: 375px;
height: 295px;
background-color:#000;
color: #fff;
margin-left: 275px;
margin-top: 95px;
padding-left: 90px;
padding-top: 20px;
}
#months, #amount, #interest_rate{
width: 175px;
height: 20px;
}
#interest_rate {
margin-left: 2px;
}
h1 {
font-size:40px;
}
قطعه کدهای پروژه ماشین حساب وام به صورت زیر است:
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)
در این پروژه کاربر یاد خواهد گرفت که چگونه با «شی» (Object) در جاوا اسکریپت کار کند و آن را در آرایههای جاوا اسکریپت قرار دهد. در این پروژه آرایه جاوا اسکریپت از 6 شی مختلف تشکیکل شدهاند که هرکدهایام دارای جفت نام – مقدار هستند که به ترتیب نشان دهنده نام نویسنده (بزرگان) و نقلقول او است. در ادامه قطعه کدهای این پروژه نیز خواهند آمد. قطعه کدهای HTML پروژه نمایش نقل قول با JavaScript به صورت زیر است:
Quotes App
نقل قول روز
برای دریافت نقل قول تصادفی روی دکمه کلیک کنید
قطعه کدهای CSS پروژه نقل قول با جاوا اسکریپت به صورت زیر است:
div {
text-align: center;
}
h1 {
font-size: 80px;
font-family: Impact;
}
button {
width: 250px;
height: 80px;
background-color: blue;
color: white;
}
p{
font-size: 35px;
}
button:hover{
background-color: green;
}
قطعه کدهای پروژه نقل قول به صورت زیر است:
//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 خارجی استفاده خواهد شد. در ادامه قطعه کدهای این پروژه نیز قرار خواهند گرفت.
قطعه کدهای HTML پروژه ساخت ماشین حساب BMI با جاوا اسکریپت به صورت زیر است:
تم آف -BMI ماشین حساب
تم آف -BMI ماشین حساب
قطعه کدهای CSS پروژه ساخت ماشین حساب BMI با جاوا اسکریپت به صورت زیر است:
.container {
width: 375px;
height: 525px;
margin-left: 350px;
margin-top: 65px;
background-color: yellow;
padding-left: 30px;
}
#height, #weight {
width: 150px;
height: 25px;
margin-top: 30px;
}
#weight-guide{
margin-left: 75px;
margin-top: 25px;
}
#results{
font-size: 35px;
margin-left: 90px;
margin-top: 20px;
color: blue;
}
button{
width: 150px;
height: 35px;
margin-left: 90px;
margin-top: 25px;
border-radius: 5px;
border-style: none;
background-color: blue;
color: #fff;
font-size: 25px;
}
h1{
padding-left: 15px;
padding-top: 25px;
}
کدهای جاوا اسکریپت ماشین حساب 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 را شروع کردند، بسیار مناسب است. قطعه کدهای این پروژه در ادامه قرار خواهند گرفت.
قطعه کدهای HTML پروژه تبدیل وزن با جاوا اسکریپت به صورت زیر است:
Weight Converstion Tool
قطعه کدهای CSS پروژه تبدیل وزن با جاوا اسکریپت به صورت زیر است:
form {
background-color: Purple;
color: white;
width: 500px;
height: 300px;
margin: 100px auto 100px;
padding: 25px;
}
.error{
color: red;
}
.no-error{
color: rgb(0, 255, 0);
}
قطعه کدهای پروژ جاوا اسکریپت تبدیل پوند به کیلوگرم به صورت زیر است:
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 جاوا اسکریپت
در ادامه قطعه کدهای پروژه قرار خواهند گرفت.
قطعه کدهای HTML پروژه تغییر رنگ با جاوا اسکریپت به صورت زیر است:
پروژه تغییر رنگ پس زمینه - جاوا اسکریپ
پروژه تغییر رنگ پس زمینه با جاوا اسکریپت - تم آف
برای تغییر رنگ پس زمینه روی دایره رنگ مد نظر کلیک کنید
قطعه کدهای CSS پروژه تغییر رنگ پس زمینه با جاوا اسکریپت به صورت زیر است:
html {
margin: 0;
}
span {
display: block;
}
.canvas {
margin: 100px auto 100px;
width: 80%;
text-align: center;
}
.button {
width: 100px;
height: 100px;
border: solid black 2px;
display: inline-block;
border-radius: 50%;
}
#grey{
background: grey;
}
#Purple{
background: Purple;
}
#blue{
background: blue;
}
#yellow{
background: yellow;
}
قطعه کدهای پروژه تغییر رنگ پس زمینه به صورت زیر است:
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 استفاده شده است. در ادامه قطعه کدهای این پروژه قرار خواهند گرفت.
قطعه کدهای HTML پروژه شمارنده طول کلمات به صورت زیر است:
Word Length Calcuator
متن مد نظر را اینجا بنویسید
قطعه کدهای CSS پروژه برای محاسبه طول کلمات به صورت زیر است:
body{
background-color:#FA8072;
text-align: center;
}
input{
margin: 100px auto 100px;
/* margin-left: 220px; */
width: 350px;
height: 40px;
display: block;
text-align: center;
}
#output{
margin-top: 45px;
width: 100px;
background: lightgreen;
margin: 100px auto 100px;
}
#btn{
width: 350px;
height: 80px;
color: #fff;
background-color:blue;
border-style: none;
border-radius: 15px;
margin-top: 100px;
/* margin-left: 385px; */
}
h1{
color: #000;
margin-top: 50px;
}
قطعه کدهای جاوا اسکریپت شمارنده طول کلمات به صورت زیر است:
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 قرار خواهند گرفت.
قطعه کدهای HTML پروژه ساخت فرم تماس با جاوا اسکریپت به صورت زیر است:
Contact Form
قطعه کدهای CSS پروژه ساخت فرم تماس با جاوا اسکریپت به صورت زیر است:
form{
background-color: black;
width: 500px;
border-radius: 25px;
height: 400px;
padding: 25px;
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
margin: 50px auto 50px;
}
form h1{
color: white;
text-align: center;
font-size: 22px;
}
label{
color: rgb(43, 134, 209);
font-weight: bold;
padding-bottom: 5px;
padding-top: 15px;
display: inline-block;
}
input,textarea{
box-sizing: border-box;
width: 450px;
height: 30px;
padding-left: 5px;
font-family: Arial, Helvetica, sans-serif;
}
textarea{
height: 50px;
}
#buttons-row{
display: flex;
justify-content: space-evenly;
}
button{
flex-grow: 1;
width: 125px;
margin: 25px;
border:none;
border-radius: 15px;
height: 35px;
font-size: 20px;
}
button#send{
background-color: rgb(211, 59, 59);
color: white;
}
button#reset{
background-color: rgb(253, 253, 54);
color: black;
}
قطعه کدهای جاوا اسکریپت ساخت فرم تماس با جاوا اسکریپت به صورت زیر است:
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 پروژه نمایش روز هفته با جاوا اسکریپت به صورت زیر است:
body{
font-family: Arial, Helvetica, sans-serif;
margin: 50px;
background: #fff;
}
#container{
width: 650px;
height: 350px;
background-color: #00ffff;
margin: auto;
border-radius: 30px;
}
h1{
font-size: 47px;
font-weight: 600;
color: #fff;
text-transform: uppercase;
margin-bottom: 20px;
margin-left: 170px;
background: #0000ff;
padding: 10px;
border-radius: 5px;
display: inline-block;
}
#weekday{
font-size: 80px;
color: #dd5800;
font-weight: 800;
margin-left: 170px;
}
#phrase{
font-size: 40px;
color: #0000ff;
font-weight: 800;
margin-left: 170px;
}
قطعه نمایش روز هفته با جاوا اسکریپت به صورت زیر است:
//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 مناسب است.
- آرایه ها در جاوا اسکریپت
- شنونده رویداد در جاوا اسکریپت
- تابع «Math.random» در جاوا اسکریپت
قطعه کدهای این پروژه در ادامه قرار خواهند گرفت.
10 پروژه اوپن سورس جاوا اسکریپت برتر در گیت هاب — فهرست کاربردی
قطعه کدهای HTML پروژه بازی جمع به صورت زیر است:
Document
7
+
10
=
قطعه کدهای CSS پروژه بازی جمع به صورت زیر است:
body{
background: lightskyblue;
}
#canvas{
box-sizing:border-box;
display: flex;
align-items: center;
justify-content: center;
background: yellow;
width: 700px;
height: 300px;
margin: 50px auto;
}
#primary-number, #secondary-number{
display:flex;
align-items:center;
justify-content: center;
font-size: 40px;
font-weight: bold;
width: 125px;
height: 125px;
box-sizing: border-box;
}
#primary-number{
border: solid 4px green;
}
#secondary-number{
border: solid 4px blue;
}
#add, #equal{
font-weight: bold;
font-size: 40px;
padding: 5px;
}
input{
border: solid 2px cyan;
width: 150px;
height: 30px;
padding-left: 25px;
}
button{
width: 100px;
height: 35px;
margin: 5px;
background: red;
color: white;
border: 1px solid lightgrey;
}
قطعه کدهای 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
قطعه کدهای این پروژه در ادامه قرار خواهند گرفت.
قطعه کدهای HTML پروژه ساخت فهرست کار به صورت زیر است:
Todo List
قطعه کدهای CSS پروژه فهرست کار با جاوا اسکریپت به صورت زیر است:
body{
background-color: lightblue;
}
form{
background-color: darkblue;
width: 50%;
color: white;
margin: 50px auto;
padding: 50px;
box-sizing: border-box;
}
form h1{
text-align: center;
}
form input#todo-input{
box-sizing: border-box;
width: 75%;
height: 25px;
padding-left: 25px;
}
#add-item{
height: 25px;
width: 25%;
background-color: red;
color: white;
border-style: none;
}
ul {
list-style: none;
list-style-position: outside;
margin: 0;
padding: 25px 0;
}
li{
display: flex;
justify-content: space-between;
padding-bottom: 10px;
}
.delete-item{
background-color: yellow;
border-radius: 5px;
border:none;
color: black;
width: 50px;
text-align: center;
}
.delete-item:hover{
background-color: orange;
width: 55px;
}
قطعه کدهای 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 پروژه ساخت سؤالات چهارگزینهای با جاوا اسکریپت به صورت زیر است:
@import url(http://fonts.googleapis.com/css?family=Rokkitt);
h1 {
font-family: 'Rokkitt', serif;
text-align: center;
color: #fff;
font-size: 35px;
}
ul{
list-style: none;
}
li{
font-family: 'Rokkitt', serif;
font-size: 2em;
color: #feb135;
}
input[type=radio]{
border: 0px;
width: 20px;
height: 2em;
}
p{
font-family: 'Rokkitt', serif;
}
/* Quiz Classes */
.quizContainer {
background-color: #000398;
border-radius: 8px;
width: 75%;
margin: auto;
margin-top: 190px;
padding-top: 5px;
position: relative;
}
.nextButton{
border-radius: 6px;
width: 150px;
height: 40px;
text-align: center;
background-color: #cc0000;
/*clear: both;*/
color:#fff;
font-family: 'Rokkitt', serif;
font-weight: bold;
position: relative;
margin: auto;
padding-top: 20px;
}
.question{
font-family: 'Rokkitt', serif;
font-size: 2em;
width: 90%;
height: auto;
margin: auto;
border-radius: 6px;
background-color: #f2f205;
text-align: center;
color: #27aa63;
}
.quizMessage{
background-color: peachpuff;
border-radius: 6px;
width: 30%;
margin: auto;
text-align: center;
padding: 2px;
font-family: 'Rokkitt', serif;
color: red;
}
.choiceList {
font-family: 'Courier New', Courier, monospace;
color: blueviolet;
}
.result {
width: 30%;
height: auto;
border-radius: 6px;
background-color: linen;
margin: auto;
margin-bottom: 35px;
text-align: center;
font-family: 'Rokkitt', serif;
}
قطعه کدهای پروژه ساخت سؤالات چهارگزینهای به صورت زیر است:
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 پروژه خاموش و روشن کردن لامپ با جاوا اسکریپت به صورت زیر است:
.canvas{
width: 600px;
height: 500px;
margin: 50px auto;
text-align: center;
box-sizing: border-box;
}
.bulb-off{
width: 265px;
height: 400px;
background: url('lightoff.png') no-repeat;
margin: auto;
}
.bulb-on{
width: 265px;
height: 400px;
background: url('lighton.png') no-repeat;;
margin: auto;
}
قطعه کدهای جاوا اسکریپت روشن و خاموش کردن لام با جاوا اسکریپت به صورت زیر است:
const light = document.querySelector('#bulb');
light.addEventListener('click', function(e){
e.target.classList.toggle('bulb-on');
})
در این پروژه دو فایل با نامهای lightoff.png
و lighton.png
باید در پوشه اصلی پروژه قرار بگیرند، در نهایت خروجی این پروژه به صورت زیر است:
18. ساخت بازی ضربه زدن به هدف
این پروژه در واقع به ساخت نوعی بازی میپردازد که در آن باید هر با به هدف ضربه زد تا امتیاز لازم را کسب کرد. در اینجا هدف جانداری است که پشت تپههای کوچک شن ظاهر میشود. در این پروژه از DOM API، توابع مختلف، ریاضیات و غیره استفاده شده است و تمرین خوبی برای افرادی که دانش متوسطی از جاوا اسکریپت دارند به حساب میآید.
- تابعی برای ایجاد زمان تصادفی که هدف در آن ظاهر میشود.
- تابعی برای انتخاب تپه تصادفی که هدف از آن به بیرون نگاه میکند.
- تابعی برای بیرون آمدن هدف از پشت تپه تصادفی با استفاده از دو تابع بالا.
- تابعی برای شروع بازی.
- تابعی برای جلوگیری از تقلب.
در ادامه قطعه کدهایها و خروجی این پروژه قرار داده خواهد شد.
ساخت اسلایدر با جاوا اسکریپت — آموزش کامل و رایگان + کد
قطعه کدهای HTML پروژه بازی ضربه زدن به هدف با JavaScript:
Whack a Mole!
بازی ضربه به هدف - تم آف
0
قطعه کدهای CSS پروژه این بازی به صورت زیر است:
html {
font-size: 35px;
background: #98BCF4;
}
body {
padding: 0;
margin: 0;
text-align: center;
}
h1 {
text-align: center;
font-size: 100px;
line-height: 1;
margin-bottom: 0;
}
.score {
background:blue;
padding: 0 48px;
line-height: 1;
border-radius: 16px;
color: #fff;
margin-left: 15px;
}
.game {
width: 600px;
height: 400px;
display:flex;
flex-wrap:wrap;
margin: 0 auto;
}
.hole{
flex: 1 0 33.33%;
overflow: hidden;
position: relative;
}
.hole:after{
display:block;
background: url(dirt.png) bottom center no-repeat;
background-size:contain;
content: '';
width: 100%;
height: 90px;
position: absolute;
z-index: 2;
bottom: -30px;
}
.mole {
background: url('mole.png') bottom center no-repeat;
background-size: 80%;
position: absolute;
top: 100%;
width: 100%;
height: 100%;
transition: all 0.4s;
}
.hole.up .mole{
top:0;
}
button{
width:175px;
font-size: 35px;
height: 70px;
color: #fff;
background-color: blue;
border-radius: 10px;
margin-left: 20px;
margin-top: 90px;
}
@media (min-width: 667px) and (max-width: 1024px){
h1 {
display: none;
}
.score {
background:blue;
padding: 0 12px;
line-height: 1;
border-radius: 16px;
color: #fff;
font-size: 40px;
margin-left: 20px;
}
.hole.up .mole{
top:17px;
}
}
@media (max-width: 667px){
.game {
width: 667px;
height: 300px;
display:flex;
flex-wrap:wrap;
margin: 0 auto;
}
.score{
width:35px;
font-size: 15px;
height: 40px;
color: #fff;
background-color: blue;
border-radius: 10px;
margin-left: 10px;
margin-top: 10px;
padding: 5px;
}
button{
margin: 10px 10px 10px 10px;
height: 40px;
width: 75px;
font-size: 15px;
}
.hole:after{
display:block;
background: url(dirt.png) bottom center no-repeat;
background-size:contain;
content: '';
max-width: 70%;
height: 60px;
position: absolute;
z-index: 2;
bottom: -30px;
}
.mole {
background: url('mole.png') bottom center no-repeat;
background-size: 60%;
position: absolute;
top: 100%;
max-width: 70%;
height: 70%;
transition: all 0.4s;
}
.hole.up .mole{
top:50px;
}
}
قطعه کدهای جاوا اسکریپت این پروژه نیز به صورت زیر است:
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;
}
قطعه کدهای جاوا اسکریپت پروژه جلوه ماوس نیز به صورت زیر است:
console.log("Hello World");
var canvas = document.getElementById("canvas");
var c = canvas.getContext("2d");
var tx = window.innerWidth;
var ty = window.innerHeight;
canvas.width = tx;
canvas.height = ty;
//c.lineWidth= 5;
//c.globalAlpha = 0.5;
var mousex = 0;
var mousey = 0;
addEventListener("mousemove", function() {
mousex = event.clientX;
mousey = event.clientY;
});
var grav = 0.99;
c.strokeWidth=5;
function randomColor() {
return (
"rgba(" +
Math.round(Math.random() * 250) +
"," +
Math.round(Math.random() * 250) +
"," +
Math.round(Math.random() * 250) +
"," +
Math.ceil(Math.random() * 10) / 10 +
")"
);
}
function Ball() {
this.color = randomColor();
this.radius = Math.random() * 20 + 14;
this.startradius = this.radius;
this.x = Math.random() * (tx - this.radius * 2) + this.radius;
this.y = Math.random() * (ty - this.radius);
this.dy = Math.random() * 2;
this.dx = Math.round((Math.random() - 0.5) * 10);
this.vel = Math.random() /5;
this.update = function() {
c.beginPath();
c.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
c.fillStyle = this.color;
c.fill();
//c.stroke();
};
}
var bal = [];
for (var i=0; i= ty) {
bal[i].dy = -bal[i].dy * grav;
} else {
bal[i].dy += bal[i].vel;
}
if(bal[i].x + bal[i].radius > tx || bal[i].x - bal[i].radius bal[i].x - 20 &&
mousex bal[i].y -50 &&
mousey bal[i].startradius){
bal[i].radius += -5;
}
}
//forloop end
}
//animation end
}
animate();
setInterval(function() {
bal.push(new Ball());
bal.splice(0, 1);
}, 400);
خروجی این پروژه به صورت زیر است:
21. پروژه ساخت کدهای ادیتور با جاوا اسکریپت
یکی دیگر از پروژه های جاوا اسکریپت دیگر در این مطلب، پروژه ساخت ویرایشگر کدهای یا کدهای ادیتور است. این پروژه اگر چه خیلی ساده به نظر نمیرسد اما برای افراد مبتدی و کسانی که دانش متوسطی از JavaScript دارند مناسب است.
کدهای ادیتوری که در این پروژه به ساخت آن پرداخته خواهد شد از سه زبان HTML، جاوا اسکریپت و PHP پشتیبانی میکند و کاربر میتواند بین آنها سوئیچ کند. در ادامه قطعه کدهای مربوط به این ادیتور قرار خواهند گرفت.
ساخت اپلیکیشن مدیریت هزینه با جاوا اسکریپت — از صفر تا صد
قطعه کدهای HTML پروژه ساخت کدهای ادیتور با جاوا اسکریپت به صورت زیر است:
کد ادیتور ساده - مجله تم آف
*thanks to Lea Verou for Prism.jsقطعه کدهای CSS پروژه ساخت کدهای ادیتور با جاوا اسکریپت به صورت زیر است:
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700|PT+Mono); @color-1st: LightCoral; @color-2nd: GhostWhite; @color-3rd: Gainsboro; body{ background:@color-1st; font-family:Lato, sans-serif; font-size:15px; margin:0; } *, *:before, *:after{ box-sizing:border-box; } *:focus{ outline:none; } a{ text-decoration:none; color:inherit; } main{ min-height:100vh; display:flex; display:-webkit-flex; -webkit-align-items:center; align-items:center; -webkit-flex-direction:column; flex-direction:column; } .title{ color:#fff; text-align:center; font-weight:300; text-shadow:0 1px 0 rgba(0,0,0,0.2); font-size:2.8em; margin-top:1.5em; small{ display:block; font-size:0.6em; margin-top:0.4em; } } .credits{ color:#fff; text-shadow:0 1px 0 rgba(0,0,0,0.2); margin-top:2em; font-size:0.8em; opacity:0.5; } .window{ width:547px; background:@color-2nd; border-radius:0.3rem; box-shadow:0 8px 12px rgba(0,0,0,0.1); overflow:hidden; .window-header{ height:37px; background:@color-3rd; position:relative; .action-buttons{ position:absolute; top:50%; left:10px; margin-top:-5px; width:10px; height:10px; background:Crimson; border-radius:50%; box-shadow: 15px 0 0 Orange, 30px 0 0 LimeGreen; } .language{ display:inline-block; position:absolute; right:10px; top:50%; margin-top:-10px; height:21px; padding:0 1em; text-align:right; -webkit-appearance:none; appearance:none; border:none; background:transparent; font-family:Lato, sans-serif; color:DimGrey; &:before{ content:'asd'; } &:hover{ background:rgba(0,0,0,0.1); } } } .window-body{ position:relative; height:300px; .code-input, .code-output{ position:absolute; top:0; left:0; width:100%; height:100%; padding:1rem; border:none; font-family:'PT Mono', monospace; font-size:0.8rem; background:transparent; white-space:pre-wrap; line-height:1.5em; word-wrap: break-word; } .code-input{ opacity:0.7; margin:0; color:#999; resize:none; } .code-output{ pointer-events:none; z-index:3; margin:0; overflow-y:auto; code{ position:absolute; top:0; left:0; margin:0; padding:1rem; display:block; color:#666; font-size:0.8rem; font-family:'PT Mono', monospace; } } } } // Prism.js colors a.token{ text-decoration:none; } .token { &.selector, &.punctuation, &.keyword{ color:PaleVioletRed; } &.property, &.number, &.string, &.punctuation, &.tag-id{ color:DodgerBlue; } &.function, &.attr-name{ color:CadetBlue; } &.atrule{ .atrule-id{ color:BlueViolet; } } &.boolean{ color:LightSlateGray; } &.comment{ color:DarkGrey; } } .language-php{ .variable{ color:CadetBlue; } }
سورس کدهای جاوا اسکریپت ساخت کدهای ادیتور به صورت زیر است:
;var MicroCode = (function(){ return { init: function(inputSel, outputSel, languageSel){ this.focusInput(inputSel); this.listenForInput(inputSel); this.listenForLanguage(languageSel, '.code-output', inputSel); this.renderOutput(outputSel, $(inputSel)[0].value); this.listenerForScroll(inputSel, outputSel); }, listenForInput: function(inputSel){ var self = this; $(inputSel).on('input keydown', function(key){ var input = this, selStartPos = input.selectionStart, inputVal = input.value; if(key.keyCode === 9){ input.value = inputVal.substring(0, selStartPos) + " " + inputVal.substring(selStartPos, input.value.length); input.selectionStart = selStartPos + 4; input.selectionEnd = selStartPos + 4; key.preventDefault(); } self.renderOutput('.code-output', this.value); }); Prism.highlightAll(); }, listenForLanguage: function(languageSel, outputSel, inputSel){ var self = this; $(languageSel).on('change', function(){ $('code', outputSel) .removeClass() .addClass('language-' + this.value) .removeAttr('data-language'); $(outputSel) .removeClass() .addClass('code-output language-' + this.value); $(inputSel) .val(''); $('code', outputSel) .html(''); self.focusInput(inputSel); }); }, listenerForScroll: function(inputSel, outputSel){ $(inputSel).on('scroll', function(){ console.log(this.scrollTop); $(outputSel)[0].scrollTop = this.scrollTop; }); }, renderOutput: function(outputSel, value){ $('code', outputSel) .html(value.replace(/&/g, "&").replace(/, "<") .replace(/>/g, ">") + "n"); Prism.highlightAll(); }, focusInput: function(inputSel){ var input = $(inputSel); input.focus(); input[0].selectionStart = input[0].value.length; input[0].selectionEnd = input[0].value.length; } } })(); MicroCode.init('.code-input', '.code-output', '.language');
خروجی این پروژه نیز به صورت زیر خواهد بود:
22. ساخت اسلایدر عکس
پروژه بعدی در این فهرست، پروژه ساخت اسلایدر با جاوا اسکریپت است که برای مبتدیان پروژه نسبتا خوبی برای تمرین به حساب میآید. در این پروژه، عکسها در آرایهای کدهایگذاری شدهاند و هدف از آن مشاهده تصاویر به صورت اسلایدی خواهد بود.
در این پروژه از مفاهیم آرایهها، حلقه For، تغییرات CSS با جاوا اسکریپت و غیره استفاده شده است. در ادامه قطعه کدهایها و خروجی این پروژه قرار خواهند گرفت.
مطلب پیشنهادی:ساخت گالری تصاویر با جاوا اسکریپت — راهنمای کاربردی
قطعه کدهای HTML پروژه ساخت اسلایدر به صورت زیر است:
JavaScript Image Slider پروژه اسلایدر جاوا اسکریپت - مجله تم آف
قطعه کدهای CSS پروژه ساخت اسلایدر با جاوا اسکریپت به صورت زیر است:
h1{ text-align: center; } #canvas { position: relative; height: 600px; width: 900px; border: 2px solid black; margin: auto; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; } .arrow{ position: relative; z-index: 1; width: 50px; height: 50px; border: 2px solid green; padding: 5px; box-sizing: border-box; background: white; opacity: .8; } .image{ width: 35px; height: 35px; } .arrow:hover{ background-color: green; } footer{ margin-top: 50px; text-align: center; }
قطعه کدهای جاوا اسکریپت ساخت اسلایدر به صورت زیر است:
// 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 برای مبتدیان بسیار مناسب هستند.
چگونه باید یک پروژه جاوا اسکریپت را شروع کرد؟
قبل از هر تصمیمی برای پیادهسازی یک پروژه کاربر باید هدف خود را از پروژه تعیین کند. مثلاً باید بداند که پروژه را برای بکاند میسازد یا برای فرانتاند و در نهایت باید سطح مهارت خود را نیز در نظر بگیرد. پس از آن باید کدهای ادیتوری مناسب برای این کار برگزیند و ایده خود را با کمک به مهارت خود و جستجو در منابع اطلاعاتی و اینترنت پیادهسازی کند.
مطلب پیشنهادی:ساخت بازی سنگ، کاغذ، قیچی در جاوا اسکریپت — راهنمای کاربردی
آیا یادگیری جاوا اسکریپت برای مبتدیان آسان است؟
بله، جاوا اسکریپت زبانی سطح بالا است و یکی از سادهترین زبانهای برنامه نویسی برای مبتدیان به حساب میآید. برای اجرای برنامههای نوشته شده با جاوا اسکریپت تنها چیزی که نیاز است، ویرایشگر مناسب کدهای و مرورگری خواهد بود که از جاوا اسکریپت پشتیبانی کند. همچنین در حال حاضر منابع اطلاعاتی رایگان و پولی زیادی در سطح وب برای یادگیری جاوا اسکریپت وجود دارد که کار مبتدیان را بیش از هر زمانی آسانتر کرده است.
سخن پایانی
در این مطلب آموزشی از مجله تم آف سعی شد که پروژههای جذاب و مناسبی از جاوا اسکریپت به کاربران معرفی شود تا کاربران بتوانند از این پروژهها ایده بگیرند. در این مطلب ٢٢ پروژه جاوا اسکریپت از مبتدی تا سطح متوسط به کاربران معرفی و در کنار آن سورس کدهای این پروژه های جاوا اسکریپت نیز آورده شد. پروژههای مذکور در این مطلب میتوانند ایدههای جذابی برای کاربران باشند و به آنها انگیزه دهند که این پروژهها را بیشتر و بهتر توسعه دهند. امید است که این مطلب مورد پسند کاربران عزیز قرار گرفته باشد.