۲۲ پروژه جاوا اسکریپت برای تمرین و افزایش مهارت
برای تبدیل شدن به یک برنامه نویس وب قوی و پیادهسازی پروژههای مختلف وب، لازم است هر فرد متقاضی این حرفه، مهارتهای زبان برنامه نویسی جاوا اسکریپت را در خود بهبود ببخشد. جاوا اسکریپت هماکنون یکی از محبوبترین زبانهای برنامه نویسی است و به خصوص در توسعه وب بسیار مورد استفاده قرار میگیرد. در این مطلب آموزشی از مجله فرادرس 22 پروژه جاوا اسکریپت برای تمرین و بهبود دانش کاربران از JavaScript به همراه توضیحات کوتاهی با هر پروژه ارائه شده است. ایدههای به کار گرفته شده در این پروژههای مختلف از سطح مبتدی تا متوسط را شامل میشوند و برای کاربرانی که به جاوا اسکریپت علاقه دارند، بسیار مفید هستند.
نحوه انتخاب بهترین پروژه جاوا اسکریپت برای یادگیری سریعتر
بهترین راه برای یادگیری یک زبان برنامه نویسی، صرف زمان و تلاش روی پروژههای مختلف است. کاربران برای انتخاب بهترین پروژه به منظور کمک به ارتقای دانش خود، باید نسبت به تسلط آنها به این زبان پروژه های جاوا اسکریپتی خود را انتخاب کرده و روی آنها کار کنند.
برای مثال کسانی که در سطح صفر از برنامه نویسی جاوا اسکریپت قرار دارند یا در سطح بسیار مبتدی با آن آشنا هستند، بهتر است از پروژههای ساده جاوا اسکریپت شروع کنند. به صورت کلی بهتر است کاربران همیشه موضوعهایی را انتخاب کنند که از سطح دانش فعلی آنها کمی بالاتر هستند. این به این دلیل است که مانور دادن فقط روی چیزهایی که یاد دارند، کمکی به پیشرفتشان نخواهد کرد.
فهرست 22 پروژه جاوا اسکریپت
در سطح وب، سورس کدهای زیادی از پروژههای مختلف برای جاوا اسکریپت وجود دارد. در این بخش، فهرست ٢٢ تا از بهترین پرژوه های جاوا اسکریپت به همراه سورس کدهای آنها گرد آوری شده است که کاربران به دلخواه خود میتوانند کدهای آن را دستکاری کرده و آنها را کاملاً شخصیسازی کنند تا بتوانند تسلط بیشتری را روی زبان جاوا اسکریپت و مهارت برنامه نویسی با آن کسب کنند. در این بخش ابتدا عنوان و موضوع پروژهها فهرست شدهاند و سپس هر پروژه در بخشی جداگانه معرفی و کدهای آن ارائه شده است.
همچنین تا حد امکان سعی کردهایم کدهایها را توضیح بدهیم تا چندان جای ابهام باقی نماند. اما بهترین روش برای یادگیری این است که ابتدا سعی کنیم خودمان کدهای هر پورژه را بنویسیم و بعد از کدهای این مطلب کمک بگیریم، اما در هر صورت اجرا کردن کدهایها و حتی نوشتن انها در کدهای ادیتور به یادگیری هر چه بهتر کمک بسیار زیادی میکند.
- پروژه زمانسنج با JavaScript
- ساخت ساعت دیجیتال با جاوا اسکریپت
- پروژه ساخت ماشین حساب
- فهرست مواد غذایی
- پروژه ساخت ساعت آنالوگ با جاوا اسکریپت
- ساخت ماشین حساب وام
- پروژه نقل قول از سخن بزرگان
- ساخت ماشین حساب BMI با جاوا اسکریپت
- پروژه تبدیل پوند به کیلوگرم
- تغییر رنگ پس زمینه با جاوا اسکریپت
- پروژه شمارنده طول کلمات
- ساخت فرم تماس با حافظه محلی
- اپلیکیشن نمایش روز هفته با جاوا اسکریپت
- پروژه بازی جمع با JavaScript
- فهرست وظایف با جاوا اسکریپت
- ساخت سوالات چهار گزینهای
- پروژه خاموش و روش کردن لامپ
- ساخت بازی ضربه زدن به هدف
- بهروزرسانی متغیرهای CSS با جاوا اسکریپت
- جلوه ماوس با جاوا اسکریپت
- پروژه ساخت کدهای ادیتور
- ساخت اسلایدر عکس با جاوا اسکریپت
1. پروژه زمانسنج با JavaScript
پروژه زمانسنج، پروژهای جذاب است که برای افرادی مبتدی بسیار مناسب به حساب میآید. در این پروژه کاربران با سه دکمه زیر با زمانسنج تعامل برقرار کنند.
- دکمه شروع
- دکمه توقف
- دکمه بازنشانی
در این پروژه از HTML و CSS نیز استفاده شده است که کدهای منبع آن به صورت زیر خواهد بود.
کدهای 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 در ادامه قرار خواهند گرفت.
کدهای 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();
خروجی پروژه ساخت ساخت ساعت دیجیتال به صورت زیر است:
٣. ساخت ماشین حساب با جاوا اسکریپت
یکی دیگر از پروژه های تمرینی جاوا اسکریپت، ساخت ماشین حساب با جاوا اسکریپت است. این پروژه چهار عمل اصلی جمع، تفریق، صرب و تقسیم را انجام میدهد و یک دکمه به عنوان دکمه پاک کننده دارد. این پروژه برای تمرین مفاهیم زیر بسیار مفید است.
- دستکاری 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. پروژه فهرست مواد غذایی
هدف از این پروژه ایجاد فهرستی است که آیتمی را میپذیرد و آن را در فضای محلی ذخیره میکند. اگر کاربر بخواهد آیتم خالی را وارد کادر مربوطه کند در نتیجه برنامه به او اخطار میدهد. همچنین اگر کاربر با موفقیت آیتمی را وارد کند، برنامه به او پیام موفقیتآمیز بودن را نشان خواهد داد.
در این پروژه هر دفعه که آیتمی اضافه میشود، مورد در DOM نمایش داده خواهد شد و همچنین در حافظه محلی کاربر ذخیره میشود. همچنین اگر کاربر روی دکمه «پاک کردن موارد» کلیک کند، همه موارد از DOM و حافظه محلی حذف خواهند شد. مباحثی که در این پروژه به کار رفتهاند شامل موارد زیر هستند:
- دستکاریهای DOM
- توابع جاوا اسکریپت
- شنونده رویداد
- حلقه For در جاوا اسکریپت
- ذخیرهسازی محلی در جاوا اسکریپت
- دستکاری CSS
- گزاره شرطی در جاوا اسکریپت
در ادامه کدهای مربوط به این پروژه 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 استفاده کند، بلکه باید بداند چگونه از ریاضیات برای دستکاری موقعیت بسیاری از عناصر در پروژه بهره ببرد. در ادامه قطعه کدهای این پروژه قرار خواهند گرفت.
قطعه کدهای 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)
در این پروژه کاربر یاد خواهد گرفت که چگونه با «شی» (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 خارجی استفاده خواهد شد. در ادامه قطعه کدهای این پروژه نیز قرار خواهند گرفت.
قطعه کدهای 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 را شروع کردند، بسیار مناسب است. قطعه کدهای این پروژه در ادامه قرار خواهند گرفت.
قطعه کدهای 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 جاوا اسکریپت
در ادامه قطعه کدهای پروژه قرار خواهند گرفت.
قطعه کدهای 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 استفاده شده است. در ادامه قطعه کدهای این پروژه قرار خواهند گرفت.
قطعه کدهای 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 خواهند آمد.
قطعه کدهای 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» در جاوا اسکریپت
قطعه کدهای این پروژه در ادامه قرار خواهند گرفت.
قطعه کدهای 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 مورد بررسی قرار خواهند گرفت تا کاربر با دیدی بازتری بتواند مطابق بامهارت خود پروژههایی را برای تمرین برگزیند.
چه پروژه هایی را میتوان با جاوا اسکریپت انجام داد؟
از جاوا اسکریپت میتوان برای ساخت پروژههای بکاند و فرانتاند استفاده کرد. برای توسعه پروژههای بکاند نیاز به استفاده از فریمورک نود جی اس است. برای برنامه نویسان مبتدی جاوا اسکریپت توصیه میشود که پروژههای سادهای مانند پروژه زمانسنج، پروژه تغییر رنگ پسزمینه، پروژه ساخت ساعت دیجیتال با جاوا اسکریپت و غیره را انتخاب کنند.
بهترین پروژه های جاوا اسکریپ برای مبتدیان کدهایام پروژه ها هستند؟
بسته به مهارت که کاربر دارد هر پروژهای میتواند کاربرد خاص خودش را داشته باشد اما به صورت کلی برای مبتدیان مواردی مانند ساخت ساعت با JavaScript، پروژه ساخت ماشین حساب BMI با جاوا اسکریپت و فهرست کارهای JavaScript برای مبتدیان بسیار مناسب هستند.
چگونه باید یک پروژه جاوا اسکریپت را شروع کرد؟
قبل از هر تصمیمی برای پیادهسازی یک پروژه کاربر باید هدف خود را از پروژه تعیین کند. مثلاً باید بداند که پروژه را برای بکاند میسازد یا برای فرانتاند و در نهایت باید سطح مهارت خود را نیز در نظر بگیرد. پس از آن باید کدهای ادیتوری مناسب برای این کار برگزیند و ایده خود را با کمک به مهارت خود و جستجو در منابع اطلاعاتی و اینترنت پیادهسازی کند.
آیا یادگیری جاوا اسکریپت برای مبتدیان آسان است؟
بله، جاوا اسکریپت زبانی سطح بالا است و یکی از سادهترین زبانهای برنامه نویسی برای مبتدیان به حساب میآید. برای اجرای برنامههای نوشته شده با جاوا اسکریپت تنها چیزی که نیاز است، ویرایشگر مناسب کدهای و مرورگری خواهد بود که از جاوا اسکریپت پشتیبانی کند. همچنین در حال حاضر منابع اطلاعاتی رایگان و پولی زیادی در سطح وب برای یادگیری جاوا اسکریپت وجود دارد که کار مبتدیان را بیش از هر زمانی آسانتر کرده است.
سخن پایانی
در این مطلب آموزشی از مجله فرادرس سعی شد که پروژههای جذاب و مناسبی از جاوا اسکریپت به کاربران معرفی شود تا کاربران بتوانند از این پروژهها ایده بگیرند. در این مطلب ٢٢ پروژه جاوا اسکریپت از مبتدی تا سطح متوسط به کاربران معرفی و در کنار آن سورس کدهای این پروژه های جاوا اسکریپت نیز آورده شد. پروژههای مذکور در این مطلب میتوانند ایدههای جذابی برای کاربران باشند و به آنها انگیزه دهند که این پروژهها را بیشتر و بهتر توسعه دهند. امید است که این مطلب مورد پسند کاربران عزیز قرار گرفته باشد.
سلام، خسته نباشید بهتون میگم. واقعا عالی بود این مطلبتون