فرادرس۲۲ پروژه جاوا اسکریپت برای تمرین و افزایش مهارت
برای تبدیل شدن به یک برنامه نویس وب قوی و پیاده‌سازی پروژههای مختلف وب، لازم است هر فرد متقاضی این حرفه، مهارت‌های زبان برنامه نویسی جاوا اسکریپت را در خود بهبود ببخشد. جاوا اسکریپت هم‌اکنون یکی از محبوب‌ترین زبانهای برنامه نویسی است و به خصوص در توسعه وب بسیار مورد استفاده قرار می‌گیرد. در این مطلب آموزشی از مجله فرادرس 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}کدهای جاوا اسکریپت پروژه ساخت ماشین حساب به صورت زیر است:
سلام، خسته نباشید بهتون میگم. واقعا عالی بود این مطلبتون