۲۲ پروژه جاوا اسکریپت برای تمرین و افزایش مهارت

فیلم آموزش پروژه محور جاوا اسکریپت، CSS و HTML – طراحی صفحه فرود واکنشگرا در فرادرس

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

بهترین پروژه های جاوا اسکریپت برای مبتدیان

فهرست 22 پروژه جاوا اسکریپت

در سطح وب، سورس کدهای زیادی از پروژه‌های مختلف برای جاوا اسکریپت وجود دارد. در این بخش، فهرست ٢٢ تا از بهترین پرژوه های جاوا اسکریپت به همراه سورس کدهای آن‌ها گرد آوری شده است که کاربران به دلخواه خود می‌توانند کدهای آن را دست‌کاری کرده و آن‌ها را کاملاً شخصی‌سازی کنند تا بتوانند تسلط بیشتری را روی زبان جاوا اسکریپت و مهارت برنامه نویسی با آن کسب کنند. در این بخش ابتدا عنوان و موضوع پروژه‌ها فهرست شده‌اند و سپس هر پروژه در بخشی جداگانه معرفی و کدهای آن ارائه شده است.

فیلم آموزش مقدماتی کتابخانه ReactJS در جاوا اسکریپت در فرادرس

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

پروژه زمان‌سنج با JavaScript
ساخت ساعت دیجیتال با جاوا اسکریپت
پروژه ساخت ماشین حساب
فهرست مواد غذایی
پروژه ساخت ساعت آنالوگ با جاوا اسکریپت
ساخت ماشین حساب وام
پروژه نقل قول از سخن بزرگان
ساخت ماشین حساب BMI با جاوا اسکریپت
پروژه تبدیل پوند به کیلوگرم
تغییر رنگ پس زمینه با جاوا اسکریپت
پروژه شمارنده طول کلمات
ساخت فرم تماس با حافظه محلی
اپلیکیشن نمایش روز هفته با جاوا اسکریپت
پروژه بازی جمع با JavaScript
فهرست وظایف با جاوا اسکریپت
ساخت سوالات چهار گزینه‌ای
پروژه خاموش و روش کردن لامپ
ساخت بازی ضربه زدن به هدف
به‌روزرسانی متغیرهای CSS با جاوا اسکریپت
جلوه ماوس با جاوا اسکریپت
پروژه ساخت کدهای ادیتور
ساخت اسلایدر عکس با جاوا اسکریپت

1. پروژه زمان‌سنج با JavaScript

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

دکمه شروع
دکمه توقف
دکمه بازنشانی

در این پروژه از HTML و CSS نیز استفاده شده است که کدهای منبع آن به صورت زیر خواهد بود.

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کدهای HTML پروژه زمان‌سنج با JavaScript به صورت زیر است:

1<div class="wrapper">
2<h1>کرنومتر</h1>
3<h2>پروژه کرنومتر جاوا اسکریپت - فرادرس</h2>
4<p><span id="seconds">00</span>:<span id="tens">00</span></p>
5<button id="button-start">شروع</button>
6<button id="button-stop">پایان</button>
7<button id="button-reset">بازنشانی</button>
8</div>

کدهای CSS پروژه زمان‌سنج به صورت زیر است:

1/* Variabes */  
2$orange: #ffa600;
3$grey:#f3f3f3;
4$white: #fff;
5$base-color:$orange ;
6
7
8/* Mixin's */  
9@mixin transition {
10-webkit-transition: all 0.5s ease-in-out;
11-moz-transition: all 0.5s ease-in-out;
12transition: all 0.5s ease-in-out;
13}
14@mixin corners ($radius) {
15-moz-border-radius: $radius;
16-webkit-border-radius: $radius;
17border-radius: $radius; 
18-khtml-border-radius: $radius; 
19}
20
21body {
22background:$base-color;
23font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
24height:100%;
25}
26
27.wrapper {
28width: 800px;
29margin: 30px auto;
30color:$white;
31text-align:center;
32}
33
34h1, h2, h3 {
35  font-family: 'Roboto', sans-serif;
36  font-weight: 100;
37  font-size: 2.6em;
38  text-transform: uppercase;
39}
40
41#seconds, #tens{
42  font-size:2em;
43}
44
45button{
46@include corners (5px);
47background:$base-color;
48color:$white;
49border: solid 1px $white;
50text-decoration:none;
51cursor:pointer;
52font-size:1.2em;
53padding:18px 10px;
54width:180px;
55margin: 10px;
56 outline: none;
57  &:hover{
58	@include transition;
59	background:$white;
60	border: solid 1px $white;
61	color:$base-color;
62	}
63}

کدهای جاوا اسکریپت زمان‌سنج به صورت زیر است:

1window.onload = function () {
2  
3  var seconds = 00; 
4  var tens = 00; 
5  var appendTens = document.getElementById("tens")
6  var appendSeconds = document.getElementById("seconds")
7  var buttonStart = document.getElementById('button-start');
8  var buttonStop = document.getElementById('button-stop');
9  var buttonReset = document.getElementById('button-reset');
10  var Interval ;
11
12  buttonStart.onclick = function() {
13    
14    clearInterval(Interval);
15     Interval = setInterval(startTimer, 10);
16  }
17  
18    buttonStop.onclick = function() {
19       clearInterval(Interval);
20  }
21  
22
23  buttonReset.onclick = function() {
24     clearInterval(Interval);
25    tens = "00";
26  	seconds = "00";
27    appendTens.innerHTML = tens;
28  	appendSeconds.innerHTML = seconds;
29  }
30  
31   
32  
33  function startTimer () {
34    tens++; 
35    
36    if(tens <= 9){
37      appendTens.innerHTML = "0" + tens;
38    }
39    
40    if (tens > 9){
41      appendTens.innerHTML = tens;
42      
43    } 
44    
45    if (tens > 99) {
46      console.log("seconds");
47      seconds++;
48      appendSeconds.innerHTML = "0" + seconds;
49      tens = 0;
50      appendTens.innerHTML = "0" + 0;
51    }
52    
53    if (seconds > 9){
54      appendSeconds.innerHTML = seconds;
55    }
56  
57  }
58  
59
60}

خروجی پروژه زمان‌سنج به صورت زیر است:

2. پروژه ساخت ساعت دیجیتال با جاوا اسکریپت

یکی دیگر از پروژه های جذاب جاوا اسکریپت، ساخت ساعت دیجیتال است. در این پروژه هم در کنار JavaScript از HTML و CSS نیز استفاده خواهد شد. این پروژه برای تمرین حلقه‌ها در جاوا اسکریپت و کار با متغیرهای جاوا اسکریپت بسیار پروژه مناسبی به حساب می‌آید. کدهای این پروژه Javascript در ادامه قرار خواهند گرفت.

فیلم آموزش پروژه محور ری اکت جی اس ReactJS با فریم ورک Tailwind CSS در فرادرس

کدهای HTML پروژه ساخت ساعت به صورت زیر است:

1<div id="MyClockDisplay" class="clock" onload="showTime()"></div>

کدهای CSS پروژه ساخت ساعت به صورت زیر است:

1body {
2    background: black;
3}
4
5.clock {
6    position: absolute;
7    top: 50%;
8    left: 50%;
9    transform: translateX(-50%) translateY(-50%);
10    color: #17D4FE;
11    font-size: 60px;
12    font-family: Orbitron;
13    letter-spacing: 7px;
14   
15
16
17}

کدهای جاوا اسکریپت ساخت ساعت به صورت زیر است:

1function showTime(){
2    var date = new Date();
3    var h = date.getHours(); // 0 - 23
4    var m = date.getMinutes(); // 0 - 59
5    var s = date.getSeconds(); // 0 - 59
6    var session = "AM";
7    
8    if(h == 0){
9        h = 12;
10    }
11    
12    if(h > 12){
13        h = h - 12;
14        session = "PM";
15    }
16    
17    h = (h < 10) ? "0" + h : h;
18    m = (m < 10) ? "0" + m : m;
19    s = (s < 10) ? "0" + s : s;
20    
21    var time = h + ":" + m + ":" + s + " " + session;
22    document.getElementById("MyClockDisplay").innerText = time;
23    document.getElementById("MyClockDisplay").textContent = time;
24    
25    setTimeout(showTime, 1000);
26    
27}
28
29showTime();

خروجی پروژه ساخت ساخت ساعت دیجیتال به صورت زیر است:

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

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

فیلم آموزش پروژه محور ری اکت نیتیو – طراحی اپلیکیشن BMI در React Native در فرادرس

دست‌کاری DOM
«ساختارهای کنترلی» (Control Structures)
کار با ForEach در جاوا اسکریپت
دست‌کاری CSS جاوا اسکریپت
کار با «شنونده رویداد» (EventListeners) و رویداد در جاوا اسکریپت
و بسیاری از موارد دیگر

قطعه کدهای پروژه ساخت ماشین حساب با JavaScript در ادامه خواهند آمد.

قطعه کدهای Html ساخت ماشین حساب با جاوا اسکریپت به صورت زیر است:

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Recording</title>
9 <link rel="stylesheet" href="main.css">
10</head>
11
12<body>
13 <section class="calculator">
14  <form>
15   <input type="text" name="" id="" class="screen">
16  </form>
17  <div class="buttons">
18   <!-- yellow -->
19   <button type="button" class="btn btn-yellow" data-num="*">*</button>
20   <button type="button" class="btn btn-yellow" data-num="/">/</button>
21   <button type="button" class="btn btn-yellow" data-num="-">-</button>
22   <button type="button" class="btn btn-yellow" data-num="+">+</button>
23   <!-- grey buttons -->
24   <button type="button" class="btn btn-grey" data-num=".">.</button>
25   <button type="button" class="btn btn-grey" data-num="9">9</button>
26   <button type="button" class="btn btn-grey" data-num="8">8</button>
27   <button type="button" class="btn btn-grey" data-num="7">7</button>
28   <button type="button" class="btn btn-grey" data-num="6">6</button>
29   <button type="button" class="btn btn-grey" data-num="5">5</button>
30   <button type="button" class="btn btn-grey" data-num="4">4</button>
31   <button type="button" class="btn btn-grey" data-num="3">3</button>
32   <button type="button" class="btn btn-grey" data-num="2">2</button>
33   <button type="button" class="btn btn-grey" data-num="1">1</button>
34   <button type="button" class="btn btn-grey" data-num="0">0</button>
35   <button type="button" class="btn-equal btn-grey">=</button>
36   <button type="button" class="btn-clear btn-grey">C</button>
37  </div>
38
39 </section>
40 <script src="./app.js"></script>
41</body>
42
43</html>

قطعه کدهای CSS پروژه ماشین حساب به صورت زیر است:

1*{
2 margin: 0;
3 padding: 0;
4 box-sizing: border-box;
5}
6
7body{
8 min-height: 100vh;
9 display: flex;
10 align-items: center;
11 justify-content: center;
12
13}
14
15.calculator{
16 flex: 0 0 95%;
17}
18.screen{
19 width: 100%;
20 font-size: 7rem;
21 padding: 0.5rem;
22 background: rgb(41,41,56);
23 color: white;
24 border:none;
25}
26
27.buttons{
28 display: flex;
29 flex-wrap: wrap;
30 transition: all 0.5s linear;
31}
32
33button{
34 flex:0 0 25%;
35 border: 1px solid black;
36 padding: 0.25rem 0;
37 transition: all 2s ease;
38}
39button:hover{
40 background: blue;
41}
42.btn-yellow{
43 background: rgb(245,146,62);
44 color: white;
45}
46.btn-grey{
47 background: rgb(224,224,224);
48}
49.btn,.btn-equal,.btn-clear{
50 font-size: 4rem;
51}
52.btn-equal{
53 background: green;
54}
55.btn-clear{
56 background: red;
57}

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

1//Wrap code in an IIFE
2(function(){
3  
4  let screen = document.querySelector('.screen');
5  let buttons = document.querySelectorAll('.btn');
6  let clear = document.querySelector('.btn-clear');
7  let equal = document.querySelector('.btn-equal');
8  
9  //retrieve data from numbers that are clicked
10  buttons.forEach(function(button){
11    button.addEventListener('click', function(e){
12      let value = e.target.dataset.num;
13      screen.value += value;
14    })
15  });
16  
17  equal.addEventListener('click', function(e){
18    if(screen.value === ''){
19      screen.value = 'Please Enter a Value';
20    } else {
21      let answer = eval(screen.value);
22      screen.value = answer;
23    }
24  })
25  
26  clear.addEventListener('click', function(e){
27    screen.value = '';
28  })
29 
30})(); //end IIFE

خروجی این پروژه به صورت زیر خواهد بود:

4. پروژه فهرست مواد غذایی

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

فیلم آموزش کتابخانه Redux در جاوا اسکریپت JS برای مدیریت وضعیت برنامه ها در فرادرس

در این پروژه هر دفعه که آیتمی اضافه می‌شود، مورد در DOM نمایش داده خواهد شد و همچنین در حافظه محلی کاربر ذخیره می‌شود. همچنین اگر کاربر روی دکمه «پاک کردن موارد» کلیک کند، همه موارد از DOM و حافظه محلی حذف خواهند شد. مباحثی که در این پروژه به کار رفته‌اند شامل موارد زیر هستند:

در ادامه کدهای مربوط به این پروژه JavaScript قرار خواهند گرفت.

قطعه کدهای Html پروژه مواد غذایی با JavaScript به صورت زیر است:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <link rel="stylesheet" href="main.css">
8    <script src="https://kit.fontawesome.com/0615dc2069.js" crossorigin="anonymous"></script>
9    <title>Grocery List</title>
10</head>
11<body>
12    <!-- add items -->
13    <div class="addItems-container">
14        <h4 class="addItems-action">display action</h4>
15        <h2 class="addItems-title">  پروژه جاوا اسکریپت فرادرس - اضافه کردن اقلام مود غذایی</h2>
16        <form action="">
17            <input type="text" name="" id="" class="addItems-input">
18            <button type="submit" class="addItems-submit">ارسال به فهرست</button>
19        </form>
20    </div>
21    <!-- display items-->
22    <div class="displayItems-container">
23        <h4 class="displayItems-action">display action</h4>
24        <h2 class="displayItems-title">لیست اقلام مواد غذایی</h2>
25        <div class="grocery-list">
26            <!--grocery item-->
27            <!-- <div class="grocery-item">
28                <h4 class="grocery-item__title">item</h4>
29                <a href="#" class="grocery-item__link">
30                    <i class="far fa-trash-alt"></i>
31                </a> -->
32            </div>
33            <!-- end grocery item -->
34            <button type="submit" class="displayItems-clear">پاک کردن اقلام</button>
35        </div>
36
37    </div>
38    <script src="app.js"></script>
39</body>
40</html>

قطعه کدهای CSS پروژه فهرست مواد غذایی با جاوا اسکریپت به صورت زیر است:

1*{
2    margin: 0;
3    padding: 0;
4    box-sizing: border-box;
5}
6
7body{
8    display: grid;
9    grid-template-columns: 80%;
10    justify-content: center;
11    margin-top: 3rem;
12    background: #828489;
13}
14
15.addItems-container{
16    background: #4d7ea8;
17}
18
19.addItems-container, .displayItems-container{
20    margin: 1rem 0;
21    padding: 2rem;
22    border-radius: 0.5rem;
23    text-align: center;
24    border: 2px solid #272932;
25    box-shadow: 0 5px 10px #272932;
26}
27
28.addItems-title, .displayItems-title{
29    text-transform: capitalize;
30}
31
32.addItems-title{
33    color: #b6c2d9;
34}
35
36.addItems-action, .displayItems-action{
37    border: 2px solid #272932;
38    padding: 0.5rem 0;
39    text-transform: capitalize;
40    border-radius: 0.5rem;
41    display: none;
42}
43
44.addItems-input{
45    background: transparent;
46    border: none;
47    border-bottom: 5px solid #9e90a2;
48    width: 100%;
49    font-size: 2rem;
50    padding: 0.5rem;
51    color: #9e90a2;
52    outline: none;
53    text-transform: uppercase;
54}
55
56.addItems-submit,.displayItems-clear{
57    display: block;
58    width: 90%;
59    margin: 2rem auto 0 auto;
60    font-size: 1.5rem;
61    border-radius: 0.5rem;
62    cursor: pointer;
63    text-transform: capitalize;
64    outline: none;
65}
66
67.addItems-submit{
68    color: #b6c2d9;
69    background: transparent;
70    border: 3px solid #b6c2d9;
71    transition: all 2s ease;
72}
73
74.addItems-submit:hover{
75    background: #b6c2d9;
76    color: #272932;
77}
78
79.displayItems-container{
80    background: #b6c2d9;
81}
82
83.displayItems-title{
84    color: #4d7ea8;
85    margin-bottom: 0.25rem;
86}
87
88.grocery-item{
89    display:grid;
90    grid-template-columns: 4fr 1fr;
91    align-items: center;
92    border-radius: 0.5rem;
93    padding: 0.5rem;
94    transition: all 1s ease-in-out;
95    margin: 0.5rem 0;
96}
97
98.grocery-item:hover{
99    background: #828489;
100}
101
102.grocery-item__title{
103    text-align: left;
104    margin-left: 0.5rem;
105    font-size: 1.2rem;
106    text-transform: capitalize;
107    color: #272932;
108}
109
110.grocery-item__link{
111    color: red;
112    transition: all 2s linear;   
113}
114
115.grocery-item:hover .grocery-item__link{
116    transform: scale(2);
117}
118
119.displayItems-clear{
120    color: #4d7ea8;
121    background: transparent;
122    border: 3px solid #4d7ea8;
123    transition: all 2s ease;
124}
125
126.displayItems-clear{
127    background: #4d7ea8;
128    color:#272932;
129    outline:none;
130    background: transparent;
131}
132/*Add utility action classes */
133.alert{
134    color: red;
135    border-color: red;
136    display: block;
137    margin-bottom: 0.5rem;
138}
139
140.success{
141    color:rgb(32, 184, 32);
142    border-color: rgb(32, 184, 32);
143    display: block;
144    margin-bottom: 0.5rem;
145}
146
147@media screen and (min-width: 768px){
148    body{
149        grid-template-columns: 50%;
150    }
151}

قطعه کدهای پروژه ساخت فهرست مواد غذایی به صورت زیر است:

1//Selection items from the DOM
2//Add items container
3const addItemsAction = document.querySelector('.addItems-action');
4const input = document.querySelector('.addItems-input');
5const submit = document.querySelector('.addItems-submit');
6
7//Display items container
8const list = document.querySelector('.grocery-list');
9const displayItemsAction = document.querySelector('.displayItems-action');
10const clear = document.querySelector('.displayItems-clear');
11
12//Add event listeners
13//Submit listener
14submit.addEventListener('click', addItem);
15//Check for local storage
16document.addEventListener('DOMContentLoaded', displayStorage);
17//Clear list
18clear.addEventListener('click', removeItems);
19//Listen to list to delete individual items
20list.addEventListener('click', removeSingleItem);
21
22
23//functions
24function addItem(event){
25    event.preventDefault();
26    let value = input.value;
27    if (value === ''){
28        showAction(addItemsAction, 'Please add grocery item', false);
29    } else {
30        showAction(addItemsAction, `${value} به فهرست اقلا،م اضافه شد`, true);
31        createItem(value);
32        updateStorage(value);
33    }
34}
35
36function showAction(element, text, value){
37    if (value === true){
38        element.classList.add('success');
39        element.innerText = text;
40        input.value = '';
41        setTimeout(function(){
42            element.classList.remove('success');
43        }, 3000)
44    } else {
45        element.classList.add('alert');
46        element.innerText = text;
47        input.value = '';
48        setTimeout(function(){
49            element.classList.remove('alert');
50        }, 3000)
51    }
52}
53
54// create item
55function createItem(value){
56    let parent = document.createElement('div');
57        parent.classList.add('grocery-item');
58
59    // let title = document.createElement('h4');
60    //     title.classList.add('grocery-item__title');
61
62    parent.innerHTML = `<h4 class="grocery-item__title">${value}</h4>
63    <a href="#" class="grocery-item__link">
64        <i class="far fa-trash-alt"></i>
65    </a>`
66
67    list.appendChild(parent);
68}
69
70//update storage
71function updateStorage(value){
72    let groceryList;
73
74    groceryList = localStorage.getItem('groceryList') ? JSON.parse(localStorage.getItem('groceryList')) : [];
75
76    groceryList.push(value);
77    localStorage.setItem('groceryList', JSON.stringify(groceryList));
78}
79
80//display items in local storage
81function displayStorage(){
82    let exists = localStorage.getItem('groceryList');
83
84    if(exists){
85        let storageItems = JSON.parse(localStorage.getItem('groceryList'));
86        storageItems.forEach(function(element){
87            createItem(element);
88        })
89    }
90}
91
92//remove all items
93function removeItems(){
94    //delete from local storage
95    localStorage.removeItem('groceryList');
96    let items = document.querySelectorAll('.grocery-item');
97
98    if(items.length > 0){
99        //remove each item from the list
100        showAction(displayItemsAction, 'All items deleted', false);
101        items.forEach(function(element){
102            list.removeChild(element);
103        })
104    } else {
105        showAction(displayItemsAction, 'No more items to delete', false);
106    }
107}
108
109//remove single item
110
111function removeSingleItem(event){
112    event.preventDefault();
113
114    let link = event.target.parentElement;
115    if(link.classList.contains('grocery-item__link')){
116        let text = link.previousElementSibling.innerHTML;
117        let groceryItem = event.target.parentElement.parentElement;
118        //remove from list
119
120        list.removeChild(groceryItem);
121        showAction(displayItemsAction,`${text} از فهرست اقلام حذف شد`, true);
122
123        //remove from local storage
124        editStorage(text);
125
126    }
127}
128
129function editStorage(item){
130    let groceryItems = JSON.parse(localStorage.getItem('groceryList'));
131    let index = groceryItems.indexOf(item);
132
133    groceryItems.splice(index, 1);
134    //first delete existing list
135    localStorage.removeItem('groceryList');
136    //add new updated/edited list
137    localStorage.setItem('groceryList', JSON.stringify(groceryItems));
138
139}

خروجی این پروژه به صورت زیر است:

5. پروژه ساخت ساعت آنالوگ با جاوا اسکریپت

پروژه بعدی، ساخت ساعت آنالوگ است. در این پروژه از Canvas Web API استفاده خواهد شد تا ساعت جاوا اسکریپتی راه‌اندازی شود. این پروژه برای مبتدیان مناسب نیست و برای افرادی که دانش نسبتاً متوسطی از جاوا اسکریپت دارند پروژه‌ای عالی است. در این پروژه کاربر نه تنها باید بداند که چگونه از Canvas API استفاده کند، بلکه باید بداند چگونه از ریاضیات برای دست‌کاری موقعیت بسیاری از عناصر در پروژه بهره ببرد. در ادامه قطعه کدهای این پروژه قرار خواهند گرفت.

فیلم آموزش پروژه محور AngularJS و ASP.Net Web API با معماری MVC در فرادرس

قطعه کدهای HTML پروژه ساخت ساعت آنالوگ با JavaScript به صورت زیر است:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <link rel="stylesheet" href="clock.css">
8    <title>Analogue Clock</title>
9</head>
10<body>
11    <canvas id="canvas" width="600" height="600"></canvas>
12
13    <script src="clock.js"></script>
14</body>
15</html>

قطعه کدهای CSS پروژه ساعت آنالوگ با جاوا اسکریپت به صورت زیر است:

1body{
2    background-color: #000;
3}
4
5#canvas{
6    margin-left: 300px;
7    margin-top: 50px;
8}

قطعه کدهای پروژه ساعت آنالوگ به صورت زیر است:

1//create a canvas object fro HTML element
2var canvas = document.getElementById('canvas');
3//create a 2d drawing object
4var ctx = canvas.getContext('2d');
5//calculate the clock radius by using the height
6var radius = canvas.height / 2;
7//remap the x and y axis to the center of the canvas
8ctx.translate(radius, radius);
9//reduce clock radius by 90%
10radius = radius * 0.90;
11
12setInterval(drawClock, 1000); //run the drawClock function every second.
13
14function drawClock(){
15    drawFace(ctx, radius);
16    drawNumbers(ctx, radius);
17    drawTime(ctx, radius);
18}
19
20function drawFace(ctx, radius){
21    var grad;
22    //draw white circle for the face
23    ctx.beginPath();
24    ctx.arc(0,0,radius,0,2*Math.PI);
25    ctx.fillStyle = "White";
26    ctx.fill();
27    // create a radial gradient (inner, middle, and outer edge of clock)
28    grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
29    grad.addColorStop(0, '#333');
30    grad.addColorStop(0.5, 'white');
31    grad.addColorStop(1, '#333');
32    //define gradient as stroke style
33    ctx.strokeStyle = grad;
34    ctx.lineWidth = radius*0.1;
35    ctx.stroke(); 
36    //draw the center of the clock
37    ctx.beginPath();
38    ctx.arc(0,0, radius*0.1,0,2*Math.PI);
39    ctx.fillStyle = '#333';
40    ctx.fill();
41}
42
43function drawNumbers(ctx, radius) {
44    var ang;
45    var num;
46    ctx.font = radius*0.15 + "px arial"; //set font at 15% of radius
47    ctx.textBaseline = "middle"; //set text alignment to middle
48    ctx.textAlign = "center"; //set text alignment to center
49    for(num=1; num < 13; num++){ //calculate the print position for each number
50        ang = num *Math.PI /6;
51        ctx.rotate(ang);
52        ctx.translate(0, -radius*0.85);
53        ctx.rotate(-ang);
54        ctx.fillText(num.toString(), 0, 0);
55        ctx.rotate(ang);
56        ctx.translate(0, radius*0.85);
57        ctx.rotate(-ang);
58    }
59}
60
61function drawTime(ctx, radius){
62    var now = new Date();
63    var hour = now.getHours();
64    var minute = now.getMinutes();
65    var second = now.getSeconds();
66    //hour
67    hour = hour%12;
68    //calculate angle of hour hand
69    hour = (hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60));
70    //make hour hand 50% of canvas's radius
71    drawHand(ctx, hour, radius*0.5, radius*0.07);
72    //minute
73    //calculate angle of minute hand
74    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
75    //make minute hand 80% of canvas's radius
76    drawHand(ctx, minute, radius*0.8, radius*0.07);
77    //second
78    //calculate angle of second hand
79    second=(second*Math.PI/30);
80    //make second hand 90% of canvas's radius
81    drawHand(ctx, second, radius*0.9, radius*0.02);
82}
83
84function drawHand(ctx, pos, length, width){
85    ctx.beginPath();
86    ctx.lineWidth = width;
87    ctx.lineCap = "round";
88    ctx.moveTo(0,0);
89    ctx.rotate(pos);
90    ctx.lineTo(0, -length);
91    ctx.stroke();
92    ctx.rotate(-pos);
93}

خروجی این پروژه به صورت زیر خواهد بود:

6. ساخت ماشین حساب وام

این مورد، پروژه‌ای نسبتاً ساده از ساخت ماشین حساب برای پرداخت بدهی وام با JavaScript است. در این پروژه از مفاهیم «جاوا اسکریپت درون خطی» (Inline JavaScript) و «عبارات با قاعده جاوا اسکریپت» (regular expressions) استفاده خواهد شد.

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

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <link rel="stylesheet" href="loancalculator.css">
8    <title>Mortgage Loan Calculator</title>
9</head>
10<body>
11    <div id="loancal">
12        <h1>ماشین حساب وام - فرادرس</h1>
13        <p>مبلغ وام: $<input id="amount" type="number" min="1" max="5000000" onchange="computeLoan()"></p>
14        <p>نرخ بهره: %<input id="interest_rate" min="0" max="100" value="10" step=".1" onchange="computeLoan()"></p>
15        <p>تعداد ماه: <input id="months" type="number" min="1" max="300" value="1" step="1" onchange="computeLoan()"></p>
16        <h2 id="payment"></h2>
17    </div>
18    <script src="loancalculator.js"></script>
19</body>
20</html>

قطعه کدهای CSS پروژه ماشین حساب وام با جاوا اسکریپت به صورت زیر است:

1#loancal {
2    width: 375px;
3    height: 295px;
4    background-color:#000;
5    color: #fff;
6    margin-left: 275px;
7    margin-top: 95px;
8    padding-left: 90px;
9    padding-top: 20px;
10}
11
12#months, #amount, #interest_rate{
13    width: 175px;
14    height: 20px;
15
16}
17
18#interest_rate {
19    margin-left: 2px;
20}
21
22h1 {
23    font-size:40px;
24}

قطعه کدهای پروژه ماشین حساب وام به صورت زیر است:

1function computeLoan(){
2    const amount = document.querySelector('#amount').value;
3    const interest_rate = document.querySelector('#interest_rate').value;
4    const months = document.querySelector('#months').value;
5    const interest = (amount * (interest_rate * 0.01)) / months;
6    let payment = ((amount / months) + interest).toFixed(2); //calculate monthly payment
7
8    //regedit to add a comma after every three digits
9    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
10    document.querySelector('#payment').innerHTML = `پرداخت ماهانه = ${payment}` 
11
12}

خروجی این پروژه به صورت زیر است:

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

معرفی فیلم‌ های آموزش جاوا اسکریپت

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

در زمان نگارش این مقاله، نزدیک به ۲۵ عنوان آموزشی حاوی بیش از ۱۲۰ ساعت ویدیو در سطوح مختلفی از جمله آموزش مقدماتی جاوا اسکریپت، آموزش حرفه‌ای و پیشرفته جاوا اسکریپت و همچنین آموزش انواع فریمورک‌های جاوا اسکریپت، آموزش پروژه‌محور جاوا اسکریپت و غیره ارائه شده است. فهرست فیلم‌های آموزشی جاوا اسکریپت در پلتفرم فرادرس دائماً در حال به روز شدن هستند و در آینده، فیلم‌ها و آموزش‌های بیشتری در فرادرس برای جاوا اسکریپت قرار خواهند گرفت. در تصویر بالا تنها تعداد کمی از دوره‌های آموزشی جاوا اسکریپت به عنوان نمونه نمایش داده ‌شده است.

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

7. پروژه نقل قول از سخن بزرگان

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

جاوا اسکریپت درون خطی
«اشیا در جاوا اسکریپت» (JavaScript objects)
انتخاب کننده در جاوا اسکریپت (JavaScript selectors)
«کتاب‌خانه ریاضیات جاوا اسکریپت» (JavaScript math library)

فیلم آموزش ویو جی اس – فریم ورک Vue.js در جاوا اسکریپت JavaScript در فرادرس

در این پروژه کاربر یاد خواهد گرفت که چگونه با «شی» (Object) در جاوا اسکریپت کار کند و آن را در آرایه‌های جاوا اسکریپت قرار دهد. در این پروژه آرایه جاوا اسکریپت از 6 شی مختلف تشکیکل شده‌اند که هرکدهایام دارای جفت نام – مقدار هستند که به ترتیب نشان دهنده نام نویسنده (بزرگان) و نقل‌قول او است. در ادامه قطعه کدهای این پروژه نیز خواهند آمد. قطعه کدهای HTML پروژه نمایش نقل قول با JavaScript به صورت زیر است:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <link rel="stylesheet" href="quotes.css">
8    <title>Quotes App</title>
9</head>
10<body>
11    <div>
12        <h1>نقل قول روز</h1>
13        <p> برای دریافت نقل قول تصادفی روی دکمه کلیک کنید </p>
14
15        <button onclick="generateQuote();">نقل قول جدید</button>
16        <p id="quoteOutput"></p>
17        <p id="authorOutput"></p>
18    </div>
19    <script src="quotes.js"></script>
20</body>
21</html>

قطعه کدهای CSS پروژه نقل قول با جاوا اسکریپت به صورت زیر است:

1div {
2    text-align: center;
3}
4
5h1 {
6    font-size: 80px;
7    font-family: Impact;
8}
9
10button {
11    width: 250px;
12    height: 80px;
13    background-color: blue;
14    color: white;
15}
16
17p{
18    font-size: 35px;
19}
20
21button:hover{
22    background-color: green;
23}

قطعه کدهای پروژه نقل قول به صورت زیر است:

1//Use an array to hold the value of the quotes
2const arrayOfQuotes = [
3    {'author': 'کورش کبیر',
4     'quote': 'فرمانروایی بر مردمان به شیوه ای نیک و والا بزرگ تر از هر کار دیگر است '
5    },
6    {'author': 'آلبرت انیشتین',
7     'quote': 'از دیروز بیاموز. برای امروز زندگی کن و امید به فردا داشته باش '
8    },
9    {'author': 'گاندی',
10     'quote': 'پیروزی آن نیست که هرگز زمین نخوری، آنست که بعد از هر زمین خوردنی برخیزی'
11    },
12    {'author': 'والترنیس',
13     'quote': 'تغییر دهندگان اثر گذار در جهان کسانی هستند کـه بر خلاف جریان شنا میکنند'
14    },
15    {'author': 'داستا یوفسکی',
16     'quote': 'تنها آرامش و سکوت سرچشمه‌ي نیروی لایزال اسـت'
17    },
18    {'author': 'ناپلئون هیل',
19     'quote': 'دانستن کافی نیست، باید بـه دانسته ي خود عمل کنید'
20    },
21];
22
23function generateQuote(){
24    const random = Number.parseInt(Math.random()*arrayOfQuotes.length + 1);
25    document.querySelector('#quoteOutput').textContent = `"${arrayOfQuotes[random].quote}"`;
26    document.querySelector('#authorOutput').textContent = `--${arrayOfQuotes[random].author}`;
27
28}

خروجی این پروژه به صورت زیر است:

8. ساخت ماشین حساب BMI

پروژه جدید این فهرست، ساخت ماشین حساب «BMI» با جاوا اسکریپت است. این پروژه نیز برای افراد مبتدی بسیار مناسب به حساب می‌آید و برای تمرین مفاهیم زیر بسیار مناسب است.

استفاده از «جاوا اسکریپت خارجی» (external JavaScript)
گزاره شرطی در جاوا اسکریپت
ویژگی «AddEventListener» جاوا اسکریپت
انتخاب‌گرهای CSS جاوا اسکریپت

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

فیلم آموزش پروژه محور ویو جی اس و لاراول – طراحی وب اپلیکیشن پیش رونده PWA با Vue.js و Laravel در فرادرس

قطعه کدهای HTML پروژه ساخت ماشین حساب BMI با جاوا اسکریپت به صورت زیر است:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <link rel="stylesheet" href="style.css">
8    <title>فرادرس -BMI ماشین حساب</title>
9</head>
10<body>
11    <div class="container">
12    <h1>فرادرس -BMI ماشین حساب</h1>
13    <form>
14    <p><label>قد با سانتی متر: </label><input type="text" id="height"></p>
15    <p><label>وزن با کیلوگرم: </label><input type="text" id="weight"></p>
16    <button>محسابه</button>
17    <div id="results"></div>
18    <div id="weight-guide">
19    <h3>نتایج محاسبه سلامت وزنی</h3>
20    <p>Under Weight = Less than 18.6</p>
21    <p>Normal Range = 18.6 and 24.9</p>
22    <p>Overweight = Greater than 24.9</p>
23    </div>
24    </form>
25    </div>
26</body>
27<script src="script.js"></script>
28</html>

قطعه کدهای CSS پروژه ساخت ماشین حساب BMI با جاوا اسکریپت به صورت زیر است:

1.container {
2    width: 375px;
3    height: 525px;
4    margin-left: 350px;
5    margin-top: 65px;
6    background-color: yellow;
7    padding-left: 30px;
8}
9#height, #weight {
10    width: 150px;
11    height: 25px;
12    margin-top: 30px;
13}
14
15#weight-guide{
16    margin-left: 75px;
17    margin-top: 25px;
18}
19
20#results{
21    font-size: 35px;
22    margin-left: 90px;
23    margin-top: 20px;
24    color: blue;
25}
26
27button{
28    width: 150px;
29    height: 35px;
30    margin-left: 90px;
31    margin-top: 25px;
32    border-radius: 5px;
33    border-style: none;
34    background-color: blue;
35    color: #fff;
36    font-size: 25px;
37}
38
39h1{
40    padding-left: 15px;
41    padding-top: 25px;
42}

کدهای جاوا اسکریپت ماشین حساب BMI به صورت زیر است:

1const form = document.querySelector('form');
2
3form.addEventListener('submit', function(e){
4    e.preventDefault();
5    
6    const height = parseInt(document.querySelector('#height').value);
7    const weight = parseInt(document.querySelector('#weight').value);
8    const results = document.querySelector('#results');
9    
10    if((height === '') || (height < 0) || (isNaN(height))){
11        //NaN !== NaN
12        results.innerHTML = "Please provide a valid height";
13        
14    } else if (weight === '' || weight < 0 || isNaN(weight)){
15        results.innerHTML = "Please provide a valid weight";
16    } else {
17    //calculate BMI
18    const bmi = (weight / ((height*height)/10000)).toFixed(2);
19    //display the results
20    results.innerHTML = `<span>${bmi}</span>`
21    }
22    
23    
24});
25
26//notes
27//NaN !== NaN, use the isNaN() function
28//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN
29

خروجی این پروژه به صورت زیر خواهد بود:

9. تبدیل پوند به کیلوگرم

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

شنونده رویداد در جاوا اسکریپت
گزاره شرطی در جاوا اسکریپت
انتخاب‌گرهای CSS جاوا اسکریپت

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

فیلم آموزش React.JS – استفاده از Fetch و Axios برای اتصال به API در فرادرس

قطعه کدهای HTML پروژه تبدیل وزن با جاوا اسکریپت به صورت زیر است:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <link rel="stylesheet" href="styles.css">
8    <title>Weight Converstion Tool</title>
9</head>
10<body>
11    <div>
12        <form>
13            <h1>پروژه تبدیل پوند به کیلوگرم - فرادرس</h1>
14            <p>وزن را به پوند وارد کنید:</p>
15            <label>پوند</label>
16            <input type="number" step=".1">
17            <p> وزن به کیلوگرم برابر است با: <span id="result"></span></p>
18        </form>
19    </div>
20    <script src="app.js"></script>
21</body>
22</html>

قطعه کدهای CSS پروژه تبدیل وزن با جاوا اسکریپت به صورت زیر است:

1form {
2    background-color: Purple;
3    color: white;
4    width: 500px;
5    height: 300px;
6    margin: 100px auto 100px;
7    padding: 25px;
8}
9
10.error{
11    color: red;
12}
13
14.no-error{
15    color: rgb(0, 255, 0);
16}

قطعه کدهای پروژ جاوا اسکریپت تبدیل پوند به کیلوگرم به صورت زیر است:

1const form = document.querySelector('form');
2
3
4//add an event listener to the form
5
6form.addEventListener('submit', function(e){
7    e.preventDefault();
8    const input = document.querySelector('input');
9    let results = document.querySelector('span');
10    let poundsToKG;
11
12    if ((input.value <= 0) || (isNaN(input.value))){
13        results.classList.add('error');
14        results.innerHTML = "<p>Please enter a value number!</p>"
15        setTimeout(function(){
16            results.innerHTML = '';
17            
18            results.classList.remove('error');
19        }, 2000)
20        input.value = '';
21    } else {
22        poundsToKG = Number(input.value) / 2.2;
23        results.classList.add('no-error');
24        results.innerHTML = `${poundsToKG.toFixed(2)}`;
25        setTimeout(function(){
26            results.innerHTML = '';
27            input.value = '';
28            results.classList.remove('no-error');
29        }, 10000)
30        
31    }
32    
33    
34})

خروجی این پروژه به صورت زیر است:

10. پروژه تغییر رنگ پس زمینه

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

حلقه‌های شرطی در جاوا اسکریپت
ویژگی AddEventListener جاوا اسکریپت
انتخاب‌گرهای CSS جاوا اسکریپت
دست‌کاری CSS جاوا اسکریپت

در ادامه قطعه کدهای پروژه قرار خواهند گرفت.

فیلم آموزش پروژه محور نود جی اس Node.js – ساخت چت روم ویدئویی در فرادرس

قطعه کدهای HTML پروژه تغییر رنگ با جاوا اسکریپت به صورت زیر است:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <link rel="stylesheet" href="style.css">
8    <title>پروژه تغییر رنگ پس زمینه - جاوا اسکریپ</title>
9</head>
10<body>
11    <div class="canvas">
12     <h1>پروژه تغییر رنگ پس زمینه با جاوا اسکریپت - فرادرس</h1>
13    <span class="button" id="grey"></span>
14    <span class="button" id="Purple"></span>
15    <span class="button" id="blue"></span>
16    <span class="button" id="yellow"></span>
17    <h2>برای تغییر رنگ پس زمینه <span>روی دایره رنگ مد نظر کلیک کنید</span></h2>
18    </div>
19    <script src="app.js"></script>
20</body>
21</html>

قطعه کدهای CSS پروژه تغییر رنگ پس زمینه با جاوا اسکریپت به صورت زیر است:

1html {
2    margin: 0;
3}
4
5span {
6    display: block;
7}
8.canvas {
9    margin:  100px auto 100px;
10    width: 80%;
11    text-align: center;
12}
13
14.button {
15    width: 100px;
16    height: 100px;
17    border: solid black 2px;
18    display: inline-block;
19    border-radius: 50%;
20}
21
22#grey{
23    background: grey;
24}
25
26#Purple{
27    background: Purple;
28}
29#blue{
30    background: blue;
31}
32#yellow{
33    background: yellow;
34}

قطعه کدهای پروژه تغییر رنگ پس زمینه به صورت زیر است:

1const buttons = document.querySelectorAll('.button');
2const body = document.querySelector('body');
3
4console.log(buttons);
5
6buttons.forEach(function(button){
7    button.addEventListener('click', function(e){
8        console.log(e.target);
9        if (e.target.id === 'grey'){
10            body.style.backgroundColor = e.target.id;
11        }
12        if (e.target.id === 'Purple'){
13            body.style.backgroundColor = e.target.id;
14        }
15        if (e.target.id === 'blue'){
16            body.style.backgroundColor = e.target.id;
17        }
18        if (e.target.id === 'yellow'){
19            body.style.backgroundColor = e.target.id;
20        }
21    })
22})

خروجی این پروژه به صورت زیر خواهد بود:

11. پروژه شمارنده طول کلمات

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

فیلم آموزش رایگان جاوا اسکریپت JavaScript – سریع و آسان در ۱۵۰ دقیقه در فرادرس

قطعه کدهای HTML پروژه شمارنده طول کلمات به صورت زیر است:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <link rel="stylesheet" href="style.css">
8    <title>Word Length Calcuator</title>
9</head>
10<body>
11    <h1>متن مد نظر را اینجا بنویسید</h1>
12    <input type="text" id="str">
13    <div id="output"></div>
14    <button id="btn"><h2>برای محاسبه طول کلمات اینجا کلیک کنید</h2></button>
15    <script src="app.js"></script>
16</body>
17</html>

قطعه کدهای CSS پروژه برای محاسبه طول کلمات به صورت زیر است:

1body{
2    background-color:#FA8072;
3    text-align: center;
4}
5
6input{
7    margin: 100px auto 100px;
8    /* margin-left: 220px; */
9    width: 350px;
10    height: 40px;
11    display: block;
12    text-align: center;
13}
14
15#output{
16    margin-top: 45px;
17    width: 100px;
18    background: lightgreen;
19    margin: 100px auto 100px;
20
21}
22
23#btn{
24    width: 350px;
25    height: 80px;
26    color: #fff;
27    background-color:blue;
28    border-style: none;
29    border-radius: 15px;
30    margin-top: 100px;
31    /* margin-left: 385px; */
32}
33
34h1{
35    
36    color: #000;
37    margin-top: 50px;
38}

قطعه کدهای جاوا اسکریپت شمارنده طول کلمات به صورت زیر است:

1let button = document.getElementById('btn');
2
3button.addEventListener('click', function(){
4    let word = document.getElementById('str').value;
5    let count = word.length;
6    let outputDiv = document.getElementById('output');
7
8    outputDiv.innerHTML = `<h1>${count}</h1>`
9});

خروجی این پروژه به صورت زیر است:

12. پروژه ساخت فرم تماس با حافظه محلی

این پروژه برای بازیابی اطلاعات از فیلدهای متنی فرم‌های تماس و ذخیره کردن آن‌ها در حافظه‌های محلی استفاده خواهد کرد. این پروژه برای تمرین استفاده از حافظه محلی در جاوا اسکریپت بسیار مناسب است. همچنین باید به این نکته توجه داشت که پروژه فعلی اسکریپت‌های سمت سرور را پیاده‌سازی نخواهد کرد، بنابراین نباید نگران اضافه کردن ویژگی‌های «Action» و «Method» در این برنامه بود. پروژه ساخت فرم تماس برای تمرین موارد زیر در JavaScript بسیار مناسب است:

شنونده رویداد در جاوا اسکریپت
دست‌کاری‌ DOM
کار با حافظه محلی

در ادامه قطعه کدهایها و خروجی مربوط به این پروژه JavaScript قرار خواهند گرفت.

قطعه کدهای HTML پروژه ساخت فرم تماس با جاوا اسکریپت به صورت زیر است:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <link rel="stylesheet" href="style.css">
8    <title>Contact Form</title>
9</head>
10<body>
11<form id="form">
12        <h1>فرم تماس - فرادرس</h1>
13    <div>
14        <label for="name">نام</label></br>
15        <input id="name" name="name">
16    </div>
17    <div>
18        <label for="email">ایمیل</label><br>
19        <input type="email" id="email" name="email">
20    </div>
21    <div>
22        <label for="message">پیغام</label><br>
23        <textarea id="message" name="message"></textarea>
24    </div>
25    <div id="buttons-row">
26    <div class="buttons">
27        <button type="submit" id="send">ارسال</button>
28    </div>
29    <div class="buttons">
30        <button id="reset">بازنشانی</button>
31    </div>
32    </div>
33</form>
34    <script src="app.js"></script>
35</body>
36</html>

قطعه کدهای CSS پروژه ساخت فرم تماس با جاوا اسکریپت به صورت زیر است:

1form{
2    background-color: black;
3    width: 500px;
4    border-radius: 25px;
5    height: 400px;
6    padding: 25px;
7    font-family: Arial, Helvetica, sans-serif;
8    box-sizing: border-box;
9    margin: 50px auto 50px;
10
11}
12
13form h1{
14    color: white;
15    text-align: center;
16    font-size: 22px;
17}
18
19label{
20    color: rgb(43, 134, 209);
21    font-weight: bold;
22    padding-bottom: 5px;
23    padding-top: 15px;
24    display: inline-block;
25}
26
27input,textarea{
28    box-sizing: border-box;
29    width: 450px;
30    height: 30px;
31    padding-left: 5px;
32    font-family: Arial, Helvetica, sans-serif;
33}
34
35textarea{
36    height: 50px;
37}
38
39#buttons-row{
40    display: flex;
41    justify-content: space-evenly;
42}
43
44button{
45    flex-grow: 1;
46    width: 125px;
47    margin: 25px; 
48    border:none;
49    border-radius: 15px;
50    height: 35px;
51    font-size: 20px;
52}
53
54button#send{
55    background-color: rgb(211, 59, 59);
56    color: white;
57}
58
59button#reset{
60    background-color: rgb(253, 253, 54);
61    color: black;
62}

قطعه کدهای جاوا اسکریپت ساخت فرم تماس با جاوا اسکریپت به صورت زیر است:

1let sendButton = document.getElementById('send');
2let resetButton = document.getElementById('reset');
3let form = document.getElementById('form');
4
5
6form.addEventListener('submit', function(e){
7    e.preventDefault();
8})
9
10resetButton.addEventListener('click', function(){
11    let name = document.getElementById('name');
12    let email = document.getElementById('email');
13    let message = document.getElementById('message');
14
15    name.value = '';
16    email.value = '';
17    message.value = '';
18})
19
20sendButton.addEventListener('click', function(e){
21    let name = document.getElementById('name');
22    let email = document.getElementById('email');
23    let message = document.getElementById('message');
24
25    name = name.value;
26    localStorage.setItem('name', name);
27    
28    email = email.value;
29    localStorage.setItem('email', email);
30
31    message = message.value;
32    localStorage.setItem('message', message);
33    
34})

رابط کاربری این پروژه به صورت زیر خواهد بود:

خروجی نهایی این پروژه پس از زدن دکمه ارسال به صورت زیر است:

13. اپلیکیشن نمایش روز هفته

این پروژه ساده جاوا اسکریپت روز هفته را به همراه نقل‌قولی به کاربران نمایش می‌دهد و برای تمرین مفاهیم مقدماتی JavaScript بسیار مناسب است. در واقع این پروژه روی ٣ تا موضوع زیر در JavaScript مانور می‌دهد:

شیء Date() ‎
آرایه‌های جاوا اسکریپت
عبارت Switch در جاوا اسکریپت

در ادامه قطعه کدهای مربوط به این پروژه Javascript خواهند آمد.

آموزش پروژه محور جاوا اسکریپت | 15 پروژه عملی و کاربردی

قطعه کدهای HTML پروژه نمایش روز هفته با JavaScript به صورت زیر است:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <link rel="stylesheet" href="style.css">
8    <title>Day of the Week</title>
9</head>
10<body>
11    <div id="container">
12        <h1>نمایش روز هفته</h1>
13        <div>
14            <span id="weekday">
15                Display day of the week.
16            </span></br>
17            <span id="phrase">Display a quote</span>
18        </div>
19    </div>
20    <script src="app.js"></script>
21</body>
22</html>

قطعه کدهای CSS پروژه نمایش روز هفته با جاوا اسکریپت به صورت زیر است:

1body{
2    font-family: Arial, Helvetica, sans-serif;
3    margin: 50px;
4    background: #fff;
5}
6
7#container{
8    width: 650px;
9    height: 350px;
10    background-color: #00ffff;
11    margin: auto;
12    border-radius: 30px;
13}
14
15h1{
16    font-size: 47px;
17    font-weight: 600;
18    color: #fff;
19    text-transform: uppercase;
20    margin-bottom: 20px;
21    margin-left: 170px;
22    background: #0000ff;
23    padding: 10px;
24    border-radius: 5px;
25    display: inline-block;
26}
27
28#weekday{
29    font-size: 80px;
30    color: #dd5800;
31    font-weight: 800;
32    margin-left: 170px;
33}
34
35#phrase{
36    font-size: 40px;
37    color: #0000ff;
38    font-weight: 800;
39    margin-left: 170px;
40}

قطعه نمایش روز هفته با جاوا اسکریپت به صورت زیر است:

1//Grab day of the week from local computer
2let date = new Date();
3let dayOfWeekNumber = date.getDay();
4let nameOfDay;
5let quote;
6
7switch(dayOfWeekNumber){
8    case 0:
9        nameOfDay = 'یکشنبه';
10        quote = 'سلام فرادرس';
11        break;
12    case 1:
13        nameOfDay = 'دوشنبه';
14        quote = 'به مجله فراردس خوش آمدید';
15        break;
16    case 2:
17        nameOfDay = 'سه شنبه';
18        quote = 'مجله فرادرس';
19        break;
20    case 3:
21        nameOfDay = 'چهارشنبه';
22        quote = 'سلام فاردرس.';
23        break;
24    case 4:
25        nameOfDay = 'پنج شنبه';
26        quote = 'دانشگاه فرادرس';
27        break;
28    case 5:
29        nameOfDay = 'جمعه';
30        quote = 'سلام فاردرس';
31        break;
32    case 6:
33        nameOfDay = 'شنبه';
34        quote = 'مجله فرادرس!';
35        break;
36
37}
38//Display the day of the week
39let weekdayDiv = document.getElementById('weekday');
40weekdayDiv.innerHTML = `${nameOfDay}`;
41
42//Display quote
43let quoteDiv = document.getElementById('phrase');
44quoteDiv.innerHTML = `${quote}`

خروجی این پروژه نیز به صورت زیر خواهد بود:

14. پروژه بازی جمع

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

آرایه ها در جاوا اسکریپت
شنونده رویداد در جاوا اسکریپت
تابع «Math.random» در جاوا اسکریپت

قطعه کدهای این پروژه در ادامه قرار خواهند گرفت.

10 پروژه اوپن سورس جاوا اسکریپت برتر در گیت هاب — فهرست کاربردی

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

قطعه کدهای HTML پروژه بازی جمع به صورت زیر است:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <link rel="stylesheet" href="style.css">
8    <title>Document</title>
9</head>
10<body>
11    <div id="canvas">
12        <div id="primary-number">7</div>
13        <div id="add">+</div>
14        <div id="secondary-number">10</div>
15        <div id="equal">=</div>
16        <div>
17            <input type="number" id="guess">
18        </div>
19        <div>
20            <button id="btn">check</button>
21        </div>
22    </div>
23    <script src="app.js"></script>
24</body>
25</html>

قطعه کدهای CSS پروژه بازی جمع به صورت زیر است:

1body{
2    background: lightskyblue;
3}
4
5#canvas{
6    box-sizing:border-box;
7    display: flex;
8    align-items: center;
9    justify-content: center;
10    background: yellow;
11    width: 700px;
12    height: 300px;
13    margin: 50px auto;
14}
15
16#primary-number, #secondary-number{
17    display:flex;
18    align-items:center;
19    justify-content: center;
20    font-size: 40px;
21    font-weight: bold;
22    width: 125px;
23    height: 125px;
24    box-sizing: border-box;
25}
26
27#primary-number{
28    border: solid 4px green;
29}
30
31#secondary-number{
32    border: solid 4px blue;
33}
34
35#add, #equal{
36    font-weight: bold;
37    font-size: 40px;
38    padding: 5px;
39}
40input{
41    border: solid 2px cyan;
42    width: 150px;
43    height: 30px;
44    padding-left: 25px;
45}
46
47button{
48    width: 100px;
49    height: 35px;
50    margin: 5px;
51    background: red;
52    color: white;
53    border: 1px solid lightgrey;
54}
55

قطعه کدهای JavaScript پروژه بازی جمع به صورت زیر است:

1//generate random numbers
2let firstNumber = parseInt(Math.random()*10);
3let secondNumber = parseInt(Math.random()*10);
4
5//get the total
6let total = firstNumber + secondNumber;
7
8//display numbers on the canvas
9let primary = document.getElementById('primary-number');
10    primary.innerHTML = `<p>${firstNumber}</p>`;
11
12let secondary = document.getElementById('secondary-number');
13    secondary.innerHTML = `<p>${secondNumber}</p>`
14
15
16//get guess from user
17let button = document.getElementById('btn')
18
19button.addEventListener('click', function(){
20
21let guess = document.getElementById('guess').value;
22    guess = Number(guess);
23//check answer
24if (guess === total){
25    alert('Correct');
26    window.location.reload()
27} else {
28    alert('Sorry. Incorrect. The correct answer was ' + total + '.')
29    window.location.reload()
30
31}
32    });

خروجی این پروژه چیزی مانند تصویر زیر خواهد بود:

15. پروژه فهرست وظایف

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

شنونده رویداد
آرایه در جاوا اسکریپت
تابع در جاوا اسکریپت
ذخیره‌سازی با جاوا اسکریپت
دست‌کاری DOM

قطعه کدهای این پروژه در ادامه قرار خواهند گرفت.

قطعه کدهای HTML پروژه ساخت فهرست کار به صورت زیر است:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <link rel="stylesheet" href="style.css">
8    <title>Todo List</title>
9</head>
10<body>
11    <form action="" id="form">
12        <h1>پروژه فهرست انجام کار - فرادرس</h1>
13        <input id="todo-input"><button id="add-item">اضافه کردن کار</button>
14        <ul>
15
16        </ul>
17    </form>
18    <script src="app.js"></script>
19</body>
20</html>
21
22<!--2:16pm Began HTML and CSS-->
23<!--2:43pm HTML and CSS finished-->

قطعه کدهای CSS پروژه فهرست کار با جاوا اسکریپت به صورت زیر است:

1body{
2    background-color: lightblue;
3}
4
5form{
6    background-color: darkblue;
7    width: 50%;
8    color: white;
9    margin: 50px auto;
10    padding: 50px;
11    box-sizing: border-box;
12}
13
14form h1{
15    text-align: center;
16}
17
18form input#todo-input{
19    box-sizing: border-box;
20    width: 75%;
21    height: 25px;
22    padding-left: 25px;
23}
24
25#add-item{
26    height: 25px;
27    width: 25%;
28    background-color: red;
29    color: white;
30    border-style: none;
31}
32
33ul {
34    list-style: none;
35    list-style-position: outside;
36    margin: 0;
37    padding: 25px 0;
38}
39li{
40    display: flex;
41    justify-content: space-between;
42    padding-bottom: 10px;
43}
44
45.delete-item{
46    background-color: yellow;
47    border-radius: 5px;
48    border:none;
49    color: black;
50    width: 50px;
51    text-align: center;
52}
53
54.delete-item:hover{
55    background-color: orange;
56    width: 55px;
57}

قطعه کدهای JavaScript پروژه فهرست کارها به صورت زیر است:

1//grab the form and prevent default submission behavior
2let form = document.getElementById('form');
3
4//items array for new items
5let items = [];
6
7//function call to check local storage and display items, if any.
8displayLocalStorage();
9
10//submit new items to todolist
11form.addEventListener('submit', function(e){
12    e.preventDefault();
13    //grab input from
14    let todoInput = document.getElementById('todo-input').value;
15    //if input is blank do nothing
16    if (todoInput === ""){
17        alert('Please enter valid input!');
18    }
19    else {
20        //display items
21        displayItems(todoInput);
22        //Place todoItem in localStorage
23        storeItem(todoInput);
24        //Clear the todo item field
25        document.getElementById('todo-input').value = '';
26        //add an event listener to the delete button
27        addDeleteFunction(todoInput);
28    }
29});
30
31//function to store items in local storage
32function storeItem(item){
33    items.push(item);
34    localStorage.setItem('item',JSON.stringify(items));
35};
36
37//function to display items in the DOM
38function displayItems(todoInput){
39    //create a li tag for the element
40    let todoItem = document.createElement('li');
41
42    todoItem.innerHTML = `${todoInput}<div class="delete-item"> حذف کار</div>`;
43    //Display the todo item
44    let todoList = document.querySelector('ul');
45    todoList.appendChild(todoItem);
46};
47
48function displayLocalStorage(){
49    let storage = localStorage.getItem('item');
50
51    if (storage === null){
52        items = [];
53    } else {
54        let storageParsed = JSON.parse(storage);
55        storageParsed.forEach(function(storageItem){
56            displayItems(storageItem);
57        })
58    };
59};
60
61function addDeleteFunction(todoInput){
62
63    let deleteButton = document.querySelectorAll('.delete-item');
64
65    deleteButton.forEach(function(button, index){
66        button.addEventListener('click', function(e){
67            console.log(e.path[1].childNodes);
68
69            //remove index number from localStorage
70           let deletedStorage = localStorage.getItem('item');
71           let deletedStorageParsed = JSON.parse(deletedStorage);
72
73                deletedStorageParsed.splice(index, 1);
74                console.log(deletedStorageParsed);
75                localStorage.setItem('item',JSON.stringify(deletedStorageParsed));
76            if(deletedStorageParsed.length === 0){
77                let todoList = document.querySelector('ul');
78                todoList.innerHTML = '';
79                let todoItem = document.createElement('li');
80                todoItem.innerHTML = `No more todos!`;
81
82                todoList.appendChild(todoItem);
83                displayLocalStorage();
84
85
86
87
88            } else {
89                localStorage.setItem('item',JSON.stringify(deletedStorageParsed));
90            }
91
92
93        })
94    })
95}

خروجی این پروژه به صورت زیر خواهد بود:

16. ساخت سوالات چهار گزینه ای با جاوا اسکریپت

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

شنونده رویداد
حلقه‌های For در جاوا اسکریپت
forEach در جاوا اسکریپت
توابع جاوا اسکریپت
دست‌کاری DOM

در ادامه قطعه کدهای این پروژه قرار خواهند گرفت.

ساخت ماشین حساب با جاوا اسکریپت – از صفر تا صد + کد

قطعه کدهای HTML پروژه ساخت سؤالات چهارگزینه‌ای با جاوا اسکریپت به صورت زیر است:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <link rel="stylesheet" href="style.css">
8    <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
9    <title>Test4</title>
10</head>
11<body>
12    <div class="quizContainer">
13    <h1>جواب صحیح را انتخاب کنید</h1>
14    
15    <div class="question"></div>
16    <ul class="choiceList"></ul>
17    <div class="quizMessage"></div>
18    <div class="result"></div>
19    <div class="nextButton">سوال بعدی</div>
20    <br>
21    </div>
22
23    <script text="text/javascript" src="app.js"></script>
24</body>
25</html>

قطعه کدهای CSS پروژه ساخت سؤالات چهارگزینه‌ای با جاوا اسکریپت به صورت زیر است:

1@import url(http://fonts.googleapis.com/css?family=Rokkitt);
2
3h1 {
4    font-family: 'Rokkitt', serif;
5    text-align: center;
6    color: #fff;
7    font-size: 35px;
8}
9
10ul{
11    list-style: none;
12}
13
14li{
15    font-family: 'Rokkitt', serif;
16    font-size: 2em;
17    color: #feb135;
18}
19
20input[type=radio]{
21    border: 0px;
22    width: 20px;
23    height: 2em;
24}
25
26p{
27    font-family: 'Rokkitt', serif;
28}
29
30/* Quiz Classes */
31.quizContainer {
32    background-color: #000398;
33    border-radius: 8px;
34    width: 75%;
35    margin: auto;
36    margin-top: 190px;
37    padding-top: 5px;
38    position: relative;
39}
40
41.nextButton{
42    border-radius: 6px;
43    width: 150px;
44    height: 40px;
45    text-align: center;
46    background-color: #cc0000;
47    /*clear: both;*/
48    color:#fff;
49    font-family: 'Rokkitt', serif;
50    font-weight: bold;
51    position: relative;
52    margin: auto;
53    padding-top: 20px;
54}
55
56.question{
57    font-family: 'Rokkitt', serif;
58    font-size: 2em;
59    width: 90%;
60    height: auto;
61    margin: auto;
62    border-radius: 6px;
63    background-color: #f2f205;
64    text-align: center;
65    color: #27aa63;
66}
67
68.quizMessage{
69    background-color: peachpuff;
70    border-radius: 6px;
71    width: 30%;
72    margin: auto;
73    text-align: center;
74    padding: 2px;
75    font-family: 'Rokkitt', serif;
76    color: red;
77}
78
79.choiceList {
80    font-family: 'Courier New', Courier, monospace;
81    color: blueviolet;
82}
83
84.result {
85    width: 30%;
86    height: auto;
87    border-radius: 6px;
88    background-color: linen;
89    margin: auto;
90    margin-bottom: 35px;
91    text-align: center;
92    font-family: 'Rokkitt', serif;
93}

قطعه کدهای پروژه ساخت سؤالات چهارگزینه‌ای به صورت زیر است:

1var questions = [
2    {
3        question: 'گوگل در چه سالی تاسیس شد؟',
4        choices: ['2002', '2000', '1998', '1989'],
5        correctAnswer: 2
6    },
7    {
8        question: 'مخترع اینترنت چه کسی است؟',
9        choices: ['نیکولا تسلا', 'مکلوهان', 'ونار بوش', 'رابرت کان'],
10        correctAnswer: 2
11    },
12    {
13        question: 'مدیر عامل شرکت اپل چه کسی است؟',
14        choices: ['استیون جابز', 'بیل گیتس', 'تیم کوک', 'لیزا برنان'],
15        correctAnswer: 0
16    },
17    {
18        question: 'اولین کامپیوتر جهان در چه سالی تولید شد؟',
19        choices: ['1800', '1875', '1850', '1884'],
20        correctAnswer: 1
21    },
22    {
23        question: 'گرانترین شرکت فناوری 2022 چه شرکتی است؟',
24        choices: ['مایکروسافت', 'تسلا', 'آمازون', 'اپل'],
25        correctAnswer: 3
26    }
27];
28
29var currentQuestion = 0;
30var correctAnswers = 0;
31var quizOver = false;
32
33window.addEventListener('DOMContentLoaded', function(e){
34    displayCurrentQuestion();
35
36    var quizMessage = document.querySelector('.quizMessage');
37
38        quizMessage.style.display = 'none';
39
40    document.querySelector('.nextButton').addEventListener('click', function(){
41
42        if(!quizOver){
43            var radioBtnsChecked = document.querySelector('input[type=radio]:checked');
44
45            if (radioBtnsChecked === null){
46                quizMessage.innerText = 'لطفا پاسخی را انتخاب کنید';
47                quizMessage.style.display = 'block';
48            } else {
49                console.log(radioBtnsChecked.value);
50                quizMessage.style.display = 'none';
51                if (parseInt(radioBtnsChecked.value) === questions[currentQuestion].correctAnswer){
52                    correctAnswers++;
53                }
54
55                currentQuestion++;
56
57                if (currentQuestion < questions.length){
58                    displayCurrentQuestion();
59                } else {
60                    displayScore();
61                    document.querySelector('.nextButton').innerText = 'نمایش دوباره?';
62                    quizOver = true;
63                 }
64                }
65        } else {
66            quizOver = false;
67            document.querySelector('.nextButton').innerText = 'سوال بعدی';
68            resetQuiz();
69            displayCurrentQuestion();
70            hideScore();
71        }
72    });
73});
74
75function displayCurrentQuestion(){
76    console.log('In display current Questions');
77
78    var question = questions[currentQuestion].question;
79    var questionClass = document.querySelector('.quizContainer > .question');
80    var choiceList = document.querySelector('.quizContainer > .choiceList');
81    var numChoices = questions[currentQuestion].choices.length;
82
83    //Set the questionClass text to the current question
84    questionClass.innerText = question;
85
86    //Remove all current <li> elements (if any)
87    choiceList.innerHTML = '';
88
89    var choice;
90    for (i = 0; i < numChoices; i++){
91        choice = questions[currentQuestion].choices[i];
92        var li = document.createElement('li');
93            li.innerHTML = '<li><input type="radio" value="' + i + '" name="dynradio" />' + choice + '</li>'
94        choiceList.appendChild(li);
95
96    }
97}
98
99function resetQuiz(){
100    currentQuestion = 0;
101    correctAnswers = 0;
102    hideScore();
103}
104
105function displayScore(){
106    document.querySelector('.quizContainer > .result').innerText = 'امتیاز شما: ' + correctAnswers + ' out of ' + questions.length;
107    document.querySelector('.quizContainer > .result').style.display = 'block';
108}
109
110function hideScore(){
111    document.querySelector('.result').style.display = 'none';
112}
113//https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event

خروجی این پروژه به صورت زیر خواهد بود:

ساخت سوالات چهار گزینه ای با جاوا اسکریپت

17. خاموش و روش کردن لامپ با جاوا اسکریپت

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

پروژه مذکور برای اهدافی مانند استایل سازی با CSS با استفاده از JavaScript و دست‌کاری DOM بسیار مناسب است. لازم به ذكر است همراه این پروژه 2 فایل تصویری نیز لازم خواهد بود که باید در پوشه اصلی پروژه قررا بگیرند. در ادامه قطعه کدهای مربوط به این پروژه قرار دارند.

ساخت بازی دوز با جاوا اسکریپت — از صفر تا صد

قطعه کدهای HTML پروژه خاموش و روشن کردن لامپ با جاوا اسکریپت به صورت زیر است:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <link rel="stylesheet" href="style.css">
8    <title>Light Switching</title>
9</head>
10<body>
11    <div class="canvas">
12        <h1>با کلیک روی لامپ </br>لامپ را روشن و خاموش کنید</h1>
13        <div id="bulb" class="bulb-off"></div>
14    </div>
15    <script src="app.js"></script>
16</body>
17</html>

قطعه کدهای CSS پروژه خاموش و روشن کردن لامپ با جاوا اسکریپت به صورت زیر است:

1.canvas{
2    width: 600px;
3    height: 500px;
4    margin: 50px auto;
5    text-align: center;
6    box-sizing: border-box;
7}
8
9.bulb-off{
10    width: 265px;
11    height: 400px;
12    background: url('lightoff.png') no-repeat;
13    margin: auto;
14}
15
16.bulb-on{
17    width: 265px;
18    height: 400px;
19    background: url('lighton.png') no-repeat;;
20    margin: auto;
21}

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

1const light = document.querySelector('#bulb');
2
3light.addEventListener('click', function(e){
4
5    e.target.classList.toggle('bulb-on');
6
7})

در این پروژه دو فایل با نام‌های lightoff.png و lighton.png باید در پوشه اصلی پروژه قرار بگیرند، در نهایت خروجی این پروژه به صورت زیر است:

18. ساخت بازی ضربه زدن به هدف

این پروژه در واقع به ساخت نوعی بازی می‌پردازد که در آن باید هر با به هدف ضربه زد تا امتیاز لازم را کسب کرد. در اینجا هدف جانداری است که پشت تپه‌های کوچک شن ظاهر می‌شود. در این پروژه از DOM API، توابع مختلف، ریاضیات و غیره استفاده شده است و تمرین خوبی برای افرادی که دانش متوسطی از جاوا اسکریپت دارند به حساب می‌آید.

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

در ادامه قطعه کدهایها و خروجی این پروژه قرار داده خواهد شد.

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

قطعه کدهای HTML پروژه بازی ضربه زدن به هدف با JavaScript:

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <meta http-equiv="X-UA-Compatible" content="ie=edge">
8    <link rel="stylesheet" href="styles.css">
9    <title>Whack a Mole!</title>
10</head>
11
12<body>
13    <h1>بازی ضربه به هدف - فرادرس</h1><span class="score">0</span>
14    <button onClick="startGame()">شروع بازی</button>
15
16    <div class="game">
17        <div class="hole hole1">
18            <div class="mole"></div>
19        </div>
20
21        <div class="hole hole2">
22            <div class="mole"></div>
23        </div>
24
25        <div class="hole hole3">
26            <div class="mole"></div>
27        </div>
28
29        <div class="hole hole4">
30            <div class="mole"></div>
31        </div>
32
33        <div class="hole hole5">
34            <div class="mole"></div>
35        </div>
36
37        <div class="hole hole6">
38            <div class="mole"></div>
39        </div>
40
41    </div>
42    <script src="script.js"></script>
43</body>
44
45</html>

قطعه کدهای CSS پروژه این بازی به صورت زیر است:

1html {
2    font-size: 35px;
3    background: #98BCF4;
4}
5
6body {
7    padding: 0;
8    margin: 0;
9    text-align: center;
10}
11
12h1 {
13    text-align: center;
14    font-size: 100px;
15    line-height: 1;
16    margin-bottom: 0;
17}
18
19.score {
20    background:blue;
21    padding: 0 48px;
22    line-height: 1;
23    border-radius: 16px;
24    color: #fff;
25    margin-left: 15px;
26}
27
28.game {
29    width: 600px;
30    height: 400px;
31    display:flex;
32    flex-wrap:wrap;
33    margin: 0 auto;
34    
35}
36
37.hole{
38    flex: 1 0 33.33%;
39    overflow: hidden;
40    position: relative;
41}
42
43.hole:after{
44    display:block;
45    background: url(dirt.png) bottom center no-repeat;
46    background-size:contain;
47    content: '';
48    width: 100%;
49    height: 90px;
50    position: absolute;
51    z-index: 2;
52    bottom: -30px;
53}
54
55.mole {
56    background: url('mole.png') bottom center no-repeat;
57    background-size: 80%;
58    position: absolute;
59    top: 100%;
60    width: 100%;
61    height: 100%;
62    transition: all 0.4s;
63}
64
65.hole.up .mole{
66    top:0;
67}
68
69button{
70    width:175px;
71    font-size: 35px;
72    height: 70px;
73    color: #fff;
74    background-color: blue;
75    border-radius: 10px;
76    margin-left: 20px;
77    margin-top: 90px;
78}
79
80@media (min-width: 667px) and (max-width: 1024px){
81    
82    h1 {
83        display: none;
84    }
85    .score {
86    background:blue;
87    padding: 0 12px;
88    line-height: 1;
89    border-radius: 16px;
90    color: #fff;
91    font-size: 40px;
92    margin-left: 20px;
93}
94
95    .hole.up .mole{
96        top:17px;
97    }
98}
99
100@media (max-width: 667px){
101
102    .game {
103        width: 667px;
104        height: 300px;
105        display:flex;
106        flex-wrap:wrap;
107        margin: 0 auto;
108    }
109
110    .score{
111        width:35px;
112        font-size: 15px;
113        height: 40px;
114        color: #fff;
115        background-color: blue;
116        border-radius: 10px;
117        margin-left: 10px;
118        margin-top: 10px;
119        padding: 5px;
120        }
121
122        button{
123            margin: 10px 10px 10px 10px;
124            height: 40px;
125            width: 75px;
126            font-size: 15px;
127        }
128
129    .hole:after{
130        display:block;
131        background: url(dirt.png) bottom center no-repeat;
132        background-size:contain;
133        content: '';
134        max-width: 70%;
135        height: 60px;
136        position: absolute;
137        z-index: 2;
138        bottom: -30px;
139    }
140
141    .mole {
142        background: url('mole.png') bottom center no-repeat;
143        background-size: 60%;
144        position: absolute;
145        top: 100%;
146        max-width: 70%;
147        height: 70%;
148        transition: all 0.4s;
149    }
150
151    .hole.up .mole{
152        top:50px;
153    }
154}

قطعه کدهای جاوا اسکریپت این پروژه نیز به صورت زیر است:

1const holes = document.querySelectorAll('.hole');
2const scoreBoard = document.querySelector('.score');
3const moles = document.querySelectorAll('.mole');
4let lastHole;
5let timeUp = false;
6let score = 0;
7
8//create a function to make a random time for mole to pop from the hole
9function randomTime(min, max) {
10    return Math.round(Math.random() * (max - min) + min);
11}
12
13function randomHole(holes){
14    const index  = Math.floor(Math.random() * holes.length);
15    const hole = holes[index];
16
17    //prevent same hole from getting the same number
18    if (hole === lastHole){
19        return randomHole(holes);
20    }
21    lastHole = hole;
22    return hole;
23}
24
25function peep() {
26    const time = randomTime(500, 1000); //get a random time to determine how long mole should peep
27    const hole = randomHole(holes); //get the random hole from the randomHole function
28    hole.classList.add('up'); //add the CSS class so selected mole can "pop up"
29    setTimeout(() => {
30        hole.classList.remove('up'); //make the selected mole "pop down" after a random time
31        if(!timeUp) {
32            peep();
33        }
34    }, time);
35}
36
37function startGame() {
38    scoreBoard.textContent = 0;
39    timeUp = false;
40    score = 0;
41    peep();
42    setTimeout(() => timeUp = true, 15000) //show random moles for 15 seconds
43}
44
45function wack(e){
46    if(!e.isTrusted) return; //** new thing I learned */
47    score++;
48    this.parentNode.classList.remove('up'); //this refers to item clicked
49    scoreBoard.textContent = score;
50}
51
52moles.forEach(mole => mole.addEventListener('click', wack))
53

در نهایت خروجی این پروژه به صورت زیر است:

19. پروژه به روزرسانی متغیرهای CSS

هدف از این پروژه دست‌کاری متغیرهای CSS به‌صورت تعاملی با استفاده از JavaScript است. این پروژه خیلی سخت نیست و برای افراد مبتدی توصیه می‌شود. همچنین در پروژه مذکور توابع مختلف جاوا اسکریپت، DOM API، ریاضیات و غیره استفاده شده است.

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

قطعه کدهای پروژه به‌روزرسانی متغیرهای CSS با جاوا اسکریپت به صورت زیر است:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <title>Scoped CSS Variables and JS</title>
6</head>
7<body>
8  <h2>دست کاری متغیرهای سی اس اس  <span class='hl'>با جاوا اسکریپت</span></h2>
9
10  <div class="controls">
11    <label for="spacing">فاصله گادری:</label>
12    <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
13
14    <label for="blur">وضوع:</label>
15    <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
16
17    <label for="base">رنگ پایه</label>
18    <input id="base" type="color" name="base" value="#ffc600">
19  </div>
20
21  <img src="http://www.coca.ir/wp-content/uploads/2017/07/beautiful-dream-nature-photos-1.jpg">
22
23  <style>
24
25    /*
26      misc styles, nothing to do with CSS variables
27    */
28    /*Declaring CSS variables */
29    :root{
30      --spacing: 10px;
31      --blur: 10px;
32      --base: #BADA55;
33    }
34
35    body {
36      text-align: center;
37      background: #193549;
38      color: white;
39      font-family: 'helvetica neue', sans-serif;
40      font-weight: 100;
41      font-size: 50px;
42    }
43
44    .controls {
45      margin-bottom: 50px;
46    }
47
48    input {
49      width: 100px;
50    }
51
52    .hl{
53      color: var(--base);
54    }
55
56    img{
57      padding: var(--spacing);
58      background: var(--base);
59      filter: blur(var(--blur));
60    }
61
62
63  </style>
64
65  <script>
66    /* 5July19
67    Things learned or refreshed
68    - CSS Variables - https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
69      Updating CSS with JavaScript
70    - CSS filter property - https://developer.mozilla.org/en-US/docs/Web/CSS/filter
71    - HTMLElement.dataset - https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset - Takes everything on the data-'set' and puts in an object.
72    - Element: mousemove event - https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event
73    -document.documentElement selects the entire HTML element
74    */
75    const inputs = document.querySelectorAll('.controls input');
76
77    function handleUpdate(){
78      const suffix = this.dataset.sizing || ''; //dataset retrieves the suffix from the data object
79      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix); //grab a style property (css variable from the page);
80    }
81
82    inputs.forEach(input => input.addEventListener('change', handleUpdate));
83    inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
84  </script>
85
86</body>
87</html>

خروجی این پروژه به صورت زیر خواهد بود:

20. جلوه ماوس با جاوا اسکریپت

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

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

ساخت یک بازی ساده با جاوا اسکریپت — از صفر تا صد

قطعه کدهای HTML پروژه جلوه ماوس با جاوا اسکریپت به صورت زیر است:

1<canvas id="canvas"></canvas>

قطعه کدهای CSS پروژه جلوه ماوس به صورت زیر است:

1body {
2    margin: 0px;
3    background-color: rgb(56,220, 250);
4    overflow: hidden;
5}

قطعه کدهای جاوا اسکریپت پروژه جلوه ماوس نیز به صورت زیر است:

1console.log("Hello World");
2
3var canvas = document.getElementById("canvas");
4var c = canvas.getContext("2d");
5var tx = window.innerWidth;
6var ty = window.innerHeight;
7canvas.width = tx;
8canvas.height = ty;
9//c.lineWidth= 5;
10//c.globalAlpha = 0.5;
11
12var mousex = 0;
13var mousey = 0;
14
15addEventListener("mousemove", function() {
16  mousex = event.clientX;
17  mousey = event.clientY;
18});
19
20
21var grav = 0.99;
22c.strokeWidth=5;
23function randomColor() {
24  return (
25    "rgba(" +
26    Math.round(Math.random() * 250) +
27    "," +
28    Math.round(Math.random() * 250) +
29    "," +
30    Math.round(Math.random() * 250) +
31    "," +
32    Math.ceil(Math.random() * 10) / 10 +
33    ")"
34  );
35}
36
37function Ball() {
38  this.color = randomColor();
39  this.radius = Math.random() * 20 + 14;
40  this.startradius = this.radius;
41  this.x = Math.random() * (tx - this.radius * 2) + this.radius;
42  this.y = Math.random() * (ty - this.radius);
43  this.dy = Math.random() * 2;
44  this.dx = Math.round((Math.random() - 0.5) * 10);
45  this.vel = Math.random() /5;
46  this.update = function() {
47    c.beginPath();
48    c.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
49    c.fillStyle = this.color;
50    c.fill();
51    //c.stroke();
52  };
53}
54
55var bal = [];
56for (var i=0; i<50; i++){
57    bal.push(new Ball());
58}
59
60function animate() {    
61  if (tx != window.innerWidth || ty != window.innerHeight) {
62    tx = window.innerWidth;
63    ty = window.innerHeight;
64    canvas.width = tx;
65    canvas.height = ty;
66  }
67  requestAnimationFrame(animate);
68  c.clearRect(0, 0, tx, ty);
69  for (var i = 0; i < bal.length; i++) {
70    bal[i].update();
71    bal[i].y += bal[i].dy;
72    bal[i].x += bal[i].dx;
73    if (bal[i].y + bal[i].radius >= ty) {
74      bal[i].dy = -bal[i].dy * grav;
75    } else {
76      bal[i].dy += bal[i].vel;
77    }    
78    if(bal[i].x + bal[i].radius > tx || bal[i].x - bal[i].radius < 0){
79        bal[i].dx = -bal[i].dx;
80    }
81    if(mousex > bal[i].x - 20 && 
82      mousex < bal[i].x + 20 &&
83      mousey > bal[i].y -50 &&
84      mousey < bal[i].y +50 &&
85      bal[i].radius < 70){
86        //bal[i].x += +1;
87        bal[i].radius +=5; 
88      } else {
89        if(bal[i].radius > bal[i].startradius){
90          bal[i].radius += -5;
91        }
92      }
93      
94    //forloop end
95    }
96//animation end
97}
98
99animate();
100
101setInterval(function() {
102  bal.push(new Ball());
103  bal.splice(0, 1);
104}, 400);

خروجی این پروژه به صورت زیر است:

21. پروژه ساخت کدهای ادیتور با جاوا اسکریپت

یکی دیگر از پروژه های جاوا اسکریپت دیگر در این مطلب، پروژه ساخت ویرایشگر کدهای یا کدهای ادیتور است. این پروژه اگر چه خیلی ساده به نظر نمی‌رسد اما برای افراد مبتدی و کسانی که دانش متوسطی از JavaScript دارند مناسب است.

کدهای ادیتوری که در این پروژه به ساخت آن پرداخته خواهد شد از سه زبان HTML، جاوا اسکریپت و PHP پشتیبانی می‌کند و کاربر می‌تواند بین آن‌ها سوئیچ کند. در ادامه قطعه کدهای مربوط به این ادیتور قرار خواهند گرفت.

ساخت اپلیکیشن مدیریت هزینه با جاوا اسکریپت — از صفر تا صد

قطعه کدهای HTML پروژه ساخت کدهای ادیتور با جاوا اسکریپت به صورت زیر است:

1<main class="view">
2	<h1 class="title">
3		کد ادیتور ساده - مجله فرادرس
4	</h1>
5
6	<div class="window">
7		<div class="window-header">
8			<div class="action-buttons"></div>
9			<select class="language">
10				<option value="javascript" selected>JavaScript</option>
11				<option value="markup">HTML</option>
12				<option value="php">PHP</option>
13			</select>
14		</div>
15		<div class="window-body">
16			<textarea class="code-input">//این یک کد ادیتور ساده است
17// که با جاوا اسکریپت ساخته شده است
18
19function greetings(name){
20    name = name || "stranger";
21    return "Hello, " + name + "!";
22}
23
24window.onLoad = alert(greetings());</textarea>
25			<pre class="code-output">
26				<code class="language-javascript">
27					
28				</code>
29			</pre>
30		</div>
31	</div>
32	<div class="credits">
33		*thanks to <a href="https://twitter.com/leaverou">Lea Verou</a> for <a href="http://prismjs.com/">Prism.js</a>
34	</div>
35</main>

قطعه کدهای CSS پروژه ساخت کدهای ادیتور با جاوا اسکریپت به صورت زیر است:

1@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700|PT+Mono);
2
3@color-1st: LightCoral;
4@color-2nd: GhostWhite;
5@color-3rd: Gainsboro;
6
7body{
8	background:@color-1st;
9	font-family:Lato, sans-serif;
10	font-size:15px;
11	margin:0;
12}
13
14*, *:before, *:after{
15	box-sizing:border-box;
16}
17
18*:focus{
19	outline:none;
20}
21
22a{
23	text-decoration:none;
24	color:inherit;
25}
26
27main{
28	min-height:100vh;
29	display:flex;
30	display:-webkit-flex;
31	-webkit-align-items:center;
32	align-items:center;
33	-webkit-flex-direction:column;
34	flex-direction:column;
35}
36
37.title{
38	color:#fff;
39	text-align:center;
40	font-weight:300;
41	text-shadow:0 1px 0 rgba(0,0,0,0.2);
42	font-size:2.8em;
43	margin-top:1.5em;
44	
45	small{
46		display:block;
47		font-size:0.6em;
48		margin-top:0.4em;
49	}
50}
51
52.credits{
53	color:#fff;
54	text-shadow:0 1px 0 rgba(0,0,0,0.2);
55	margin-top:2em;
56	font-size:0.8em;
57	opacity:0.5;
58}
59
60.window{
61	width:547px;
62	background:@color-2nd;
63	border-radius:0.3rem;
64	box-shadow:0 8px 12px rgba(0,0,0,0.1);
65	overflow:hidden;
66	
67	.window-header{
68		height:37px;
69		background:@color-3rd;
70		position:relative;
71		
72		.action-buttons{
73			position:absolute;
74			top:50%;
75			left:10px;
76			margin-top:-5px;
77			width:10px;
78			height:10px;
79			background:Crimson;
80			border-radius:50%;
81			box-shadow:
82				15px 0 0 Orange,
83				30px 0 0 LimeGreen;
84		}
85		
86		.language{
87			display:inline-block;
88			position:absolute;
89			right:10px;
90			top:50%;
91			margin-top:-10px;
92			height:21px;
93			padding:0 1em;
94			text-align:right;
95			-webkit-appearance:none;
96			appearance:none;
97			border:none;
98			background:transparent;
99			font-family:Lato, sans-serif;
100			color:DimGrey;
101			
102			&:before{
103				content:'asd';
104			}
105			
106			&:hover{
107				background:rgba(0,0,0,0.1);
108			}
109		}
110	}
111	
112	.window-body{
113		position:relative;
114		height:300px;
115		
116		.code-input, .code-output{
117			position:absolute;
118			top:0;
119			left:0;
120			width:100%;
121			height:100%;
122			padding:1rem;
123			border:none;
124			font-family:'PT Mono', monospace;
125			font-size:0.8rem;
126			background:transparent;
127			white-space:pre-wrap;
128			line-height:1.5em;
129			word-wrap: break-word;
130		}
131		
132		.code-input{
133			opacity:0.7;
134			margin:0;
135			color:#999;
136			resize:none;
137		}
138		
139		.code-output{
140			pointer-events:none;
141			z-index:3;
142			margin:0;
143			overflow-y:auto;
144			
145			code{
146				position:absolute;
147				top:0;
148				left:0;
149				margin:0;
150				padding:1rem;
151				display:block;
152				color:#666;
153				font-size:0.8rem;
154				font-family:'PT Mono', monospace;
155			}
156		}
157	}
158}
159
160// Prism.js colors
161a.token{
162	text-decoration:none;
163}
164.token
165{
166	
167	&.selector, &.punctuation, &.keyword{
168		color:PaleVioletRed;
169	}
170	
171	&.property, &.number, &.string, &.punctuation, &.tag-id{
172		color:DodgerBlue;
173	}
174	
175	&.function, &.attr-name{
176		color:CadetBlue;
177	}
178	
179	&.atrule{
180		.atrule-id{
181			color:BlueViolet;	
182		}
183	}
184	
185	&.boolean{
186		color:LightSlateGray;
187	}
188	
189	&.comment{
190		color:DarkGrey;
191	}
192}
193
194.language-php{
195	.variable{
196		color:CadetBlue;
197	}
198}

سورس کدهای جاوا اسکریپت ساخت کدهای ادیتور به صورت زیر است:

1;var MicroCode = (function(){
2	return {
3		init: function(inputSel, outputSel, languageSel){
4			this.focusInput(inputSel);
5			this.listenForInput(inputSel);
6			this.listenForLanguage(languageSel, '.code-output', inputSel);
7			this.renderOutput(outputSel, $(inputSel)[0].value);
8			this.listenerForScroll(inputSel, outputSel);
9		},
10		
11		listenForInput: function(inputSel){
12			var self = this;
13
14			$(inputSel).on('input keydown', function(key){
15				var input = this,
16					selStartPos = input.selectionStart,
17					inputVal = input.value;
18
19				if(key.keyCode === 9){
20					input.value = inputVal.substring(0, selStartPos) + "    " + inputVal.substring(selStartPos, input.value.length);
21					input.selectionStart = selStartPos + 4;
22					input.selectionEnd = selStartPos + 4;
23					key.preventDefault();
24				}
25
26				self.renderOutput('.code-output', this.value);
27			});
28
29			Prism.highlightAll();
30		},
31		
32		listenForLanguage: function(languageSel, outputSel, inputSel){
33			var self = this;
34			$(languageSel).on('change', function(){
35				$('code', outputSel)
36					.removeClass()
37					.addClass('language-' + this.value)
38					.removeAttr('data-language');
39				
40				$(outputSel)
41					.removeClass()
42					.addClass('code-output language-' + this.value);
43				
44				$(inputSel)
45					.val('');
46				
47				$('code', outputSel)
48					.html('');
49				
50				self.focusInput(inputSel);
51			});
52		},
53		
54		listenerForScroll: function(inputSel, outputSel){
55			$(inputSel).on('scroll', function(){
56				console.log(this.scrollTop);
57				$(outputSel)[0].scrollTop = this.scrollTop;
58			});
59		},
60		
61		renderOutput: function(outputSel, value){
62			$('code', outputSel)
63				.html(value.replace(/&/g, "&").replace(/</g, "<")
64				.replace(/>/g, ">") + "n");
65			
66			Prism.highlightAll();
67		},
68		
69		focusInput: function(inputSel){
70			var input = $(inputSel);
71			
72			input.focus();
73			
74			input[0].selectionStart = input[0].value.length;
75			input[0].selectionEnd = input[0].value.length;
76		}
77	}
78})();
79
80MicroCode.init('.code-input', '.code-output', '.language');

خروجی این پروژه نیز به صورت زیر خواهد بود:

22. ساخت اسلایدر عکس

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

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

ساخت گالری تصاویر با جاوا اسکریپت — راهنمای کاربردی

قطعه کدهای HTML پروژه ساخت اسلایدر به صورت زیر است:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <link rel="stylesheet" href="style.css">
8    <title>JavaScript Image Slider</title>
9</head>
10<body>
11    <h1>پروژه اسلایدر  جاوا اسکریپت -  مجله فرادرس </h1>
12    <div id="canvas">
13        <div class="arrow" ><img id="left" src="./images/left-arrow.png" class="image"></div>
14        <div class="arrow" ><img id="right" src="./images/right-arrow.png" class="image"></div>
15    </div>
16    <script src="app.js"></script>
17</body>
18<footer>
19
20</footer>
21</html>

قطعه کدهای CSS پروژه ساخت اسلایدر با جاوا اسکریپت به صورت زیر است:

1h1{
2    text-align: center;
3}
4
5#canvas {
6    position: relative; 
7    height: 600px;
8    width: 900px;
9    border: 2px solid black;
10    margin: auto;
11    box-sizing: border-box;
12    display: flex;
13    justify-content: space-between;
14    align-items: center;
15}
16
17.arrow{
18    position: relative; 
19    z-index: 1;
20    width: 50px;
21    height: 50px;
22    border: 2px solid green;
23    padding: 5px;
24    box-sizing: border-box;
25    background: white;
26    opacity: .8;
27
28}
29
30.image{
31    width: 35px;
32    height: 35px;
33}
34
35.arrow:hover{
36    background-color: green;
37}
38
39footer{
40    margin-top: 50px;
41    text-align: center;
42}

قطعه کدهای جاوا اسکریپت ساخت اسلایدر به صورت زیر است:

1// create an array of image sources;
2let images = [
3    'image1.png', 'image2.png', 'image3.png','image4.png'
4]
5let i = 0;
6
7//add initial image to canvas
8let canvas = document.getElementById('canvas');
9canvas.style.background = `url(./images/${images[0]})`
10
11//add eventListeners to arrows
12let arrows = document.querySelectorAll('.arrow');
13
14arrows.forEach(function(arrow){
15    arrow.addEventListener('click', function(e){
16                if (e.target.id === "left"){
17            //check to see if at beginning of array
18            i--;
19            if (i < 0){
20                i = images.length -1;
21            }
22            canvas.style.background = `url(./images/${images[i]})`;
23        } else if (e.target.id === "right") {
24            i++;
25            if (i >= images.length ){
26                i = 0;
27            }
28            canvas.style.background = `url(./images/${images[i]})`;
29        }
30    })
31});
32

خروجی این پروژه اسلایدری به صورت زیر خواهد بود:

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

در این بخش چندین سؤال متداول در مورد پروژه های JS مورد بررسی قرار خواهند گرفت تا کاربر با دیدی بازتری بتواند مطابق بامهارت خود پروژه‌هایی را برای تمرین برگزیند.

چه پروژه هایی را می‌توان با جاوا اسکریپت انجام داد؟

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

11 ترفند بسیار کاربردی جاوا اسکریپت — به زبان ساده

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

بسته به مهارت که کاربر دارد هر پروژه‌ای می‌تواند کاربرد خاص خودش را داشته باشد اما به صورت کلی برای مبتدیان مواردی مانند ساخت ساعت با JavaScript، پروژه ساخت ماشین حساب BMI با جاوا اسکریپت و فهرست کارهای JavaScript برای مبتدیان بسیار مناسب هستند.

چگونه باید یک پروژه جاوا اسکریپت را شروع کرد؟

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

ساخت بازی سنگ، کاغذ، قیچی در جاوا اسکریپت — راهنمای کاربردی