۳۰ تمرین جاوا اسکریپت با راه حل + معرفی سایت های تمرینی

برای یادگیری زبان برنامه نویسی «جاوا اسکریپت» (JavaScript | JS) که یکی از محبوب‌ترین زبان‌های برنامه نویسی است، نیازمند تمرین جاوا اسکریپت هستیم. در تمام برنامه‌های کاربردی وب برای اعتبارسنجی، ارائه محتوای پویا، گرافیک‌های تعاملی و نقشه‌ها و بسیاری موارد دیگر، از این زبان همراه با زبان‌های HTML و CSS استفاده می‌شود. جاوا اسکریپت قدرت ایجاد برنامه‌های وب کامل و قوی را دارد و با تمرین بهتر یاد خواهیم گرفت در کدام مرحله نیاز است زبان جاوا اسکریپت به تمرین وارد شود، اگر برای پروژه جاوا اسکریپت نیازمند ایده‌های مربوط به تمرین بودید، اصلا نگران نباشید. در این مطلب تمرین‌های برتر جاوا اسکریپت را برای افراد مبتدی جمع‌آوری کرده‌ایم و در ادامه چند تمرین پیچیده‌تر را برای زمانی آورده‌ایم که مهارت بیشتری کسب کرده باشید. بنابراین، برای شروع تمرین های جاوا اسکریپت آماده باشید.

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

جاوا اسکریپت صفحات وب تعاملی ایجاد می‌کند. این زبان، از زبان‌های برنامه نویسی پرطرفداری به حساب می‌آید که یکی از بالاترین درآمدها را دارد. جاوا اسکریپت بسیار گسترده است، بنابراین نه تنها از نظر کارایی اهمیت دارد، بلکه به نوعی سرگرم‌کننده هم خواهد بود. اگر جاوا اسکریپت را بلد باشید، می‌توانید احساس کنید که پشت پرده شبکه جهانی وب را می‌بینید. مقالات زیادی در مورد تمرین‌های تمرینی سطح مبتدی برای جاوا اسکریپت وجود دارد. برخی افراد را به انجام تمرین ساخت بازی Tic-Tac-Toe تشویق می‌کنند، که می‌تواند کمی کسل‌کننده باشد. برخی فقط گفتند «شما باید سعی کنید با جاوا اسکریپت یک وبلاگ بسازید» اما پس از آن هیچ دستورالعملی ارائه ندادند.

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

کلیک کنید

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

در این مطلب سعی در رفع اشکالات مذکور داریم که شامل تمرین‌های جالب و کمی چالش برانگیز جاوا اسکریپت برای مبتدیان می‌شود. برخی از آن‌ها کمی از سطح Copy-Paste کردن فراتر هستند و هنگام انجام آن‌ها، احساس رضایت بیشتری خواهید داشت. این تمرین‌ها را به طور کلی به عنوان راهی برای یادگیری کد نویسی می‌توان در نظر گرفت. آن‌ها بیشتر از تماشای ویدئوهای آموزشی یا خواندن کتاب آموزشی می‌توانند سودبخش باشند.

یادگیری تعاملی با انجام تمرین‌ها و تمرین‌های برنامه نویسی برای یادگیری از تمرین سخنرانی مؤثرتر خواهد بود. یادگیری ممکن است اندکی دشوارتر به نظر برسد، با این حال مهارت‌هایی که یاد می‌گیرید ملکه ذهن شما خواهند شد. جاوا اسکریپت دارای مجموعه‌ای از فریمورک‌های مختلف است، بنابراین این مقاله را به جاوا اسکریپت خالص، Vue.js و Angular تقسیم می‌کنیم. تمام این‌ها تمرین‌های جاوا اسکریپت، رایگان هستند و تنها چیزی که باید روی آن سرمایه‌گذاری کنید، زمان است. در ادامه به سراغ چندین تمرین عملی پیچیده، جالب و سرگرم‌کننده جاوا اسکریپت برای مبتدیان می‌رویم و به آن‌ها ورود خواهیم کرد. نگران کد آن‌ها نباشید، زیرا لینک دسترسی به آن‌ها را در اختیار شما قرار داده‌ایم.

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

کلیک کنید

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

جاوا اسکریپت قلب هر برنامه وب به حساب می‌آید. درک قوی جاوا اسکریپت بسیاری از گزینه‌های شغلی چالش‌برانگیز و جالب، از جمله توسعه اپلیکیشن تلفن‌های هوشمند، توسعه وب پویا، UI / UX دیزاینر و توسعه Full-Stack را به همراه دارد. به دلیل تعامل بی‌پایان این زبان، لذت بردن از جاوا اسکریپت آسان است.

فیلم آموزش کاربردی HTML5، CSS3 و jQuery در طراحی وب – بخش یکم در فرادرس

کلیک کنید

در صورت دانستن اصول اولیه جاوا اسکریپت، انجام تمرین‌ها گام بعدی ما برای افزودن اعتبار بیشتر به رزومه است. اگر هیچ تجربه برنامه نویسی نداریم، می‌توان کتاب‌های جاوا اسکریپت را خواند یا دوره‌های اولیه این زبان را گذراند، سپس به سراغ انجام تمرین‌ها بازگشت. اگر اطلاعات لازم درباره زبان‌های HTML و CSS را داشته باشیم، بیشتر تمرین‌های جاوا اسکریپت را درک خواهیم کرد، زیرا کد منبع تمرین‌ها ارائه شده است.

فیلم آموزش کاربردی HTML5, CSS3, jQuery در طراحی وب – بخش دوم در فرادرس

کلیک کنید

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

• در «سمت مشتری» (Client-Side) و «سمت سرور» (Server-Side) برای ایجاد محتوای وب تعاملی استفاده می‌شود.
• تجربه کاربر را با عملکرد پویا بسیار بهبود می‌بخشد.
• زبان سبک با قابلیت‌های شی گرایی
• زبان تفسیر شده، باز و چند پلتفرمی
• یکپارچگی ادغام با زبان‌های جاوا و HTML

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

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

فیلم آموزش پروژه محور اچ تی ام ال و سی اس اس HTML و CSS در فرادرس

کلیک کنید

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

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

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

کلیک کنید

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

ماشین حساب یکی از تمرین‌های آسان جاوا اسکریپت در این فهرست به شمار می‌رود، ما فقط از HTML و CSS ساده استفاده خواهیم کرد و تمام اجزای عملکردی را با استفاده از توابع پایه جاوا اسکریپت ایجاد می‌کنیم. همچنین با استفاده از HTML برای نمایش دکمه‌ها و بهبود ارائه با CSS ادامه خواهیم داد. در نهایت باید مطمئن شویم که دکمه‌ها با استفاده از جاوا اسکریپت عملکرد مناسبی را خواهند داشت. تابع اصلی eval()  تابعی جهانی برای جاوا اسکریپت است که کدهای JS را حل می‌کند. تابع display()  عدد انتخاب شده را روی صفحه ماشین حساب نمایش می‌دهد. توجه داشته باشید که این برنامه فقط برای فعالیت‌های مربوط به ماوس کار می‌کند. در ادامه کدهای کامل این تمرین را مشاهده می‌کنید که به بخش‌های CSS و HTML و جاوا اسکریپت تقسیم شده است.

کدهای HTML تمرین ساخت ماشین حساب با JS

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

1<div class="calculator">
2
3  <input type="text" class="calculator-screen" value="" disabled />
4  
5  <div class="calculator-keys">
6    
7    <button type="button" class="operator" value="+">+</button>
8    <button type="button" class="operator" value="-">-</button>
9    <button type="button" class="operator" value="*">×</button>
10    <button type="button" class="operator" value="/">÷</button>
11
12    <button type="button" value="7">7</button>
13    <button type="button" value="8">8</button>
14    <button type="button" value="9">9</button>
15
16
17    <button type="button" value="4">4</button>
18    <button type="button" value="5">5</button>
19    <button type="button" value="6">6</button>
20
21
22    <button type="button" value="1">1</button>
23    <button type="button" value="2">2</button>
24    <button type="button" value="3">3</button>
25
26
27    <button type="button" value="0">0</button>
28    <button type="button" class="decimal" value=".">.</button>
29    <button type="button" class="all-clear" value="all-clear">AC</button>
30
31    <button type="button" class="equal-sign operator" value="=">=</button>
32
33  </div>
34</div>

حال پس از ذخیره کردن کدهای HTML در یک فایل، نوبت به نوشتن و استفاده از کدهای CSS برای استایل‌دهی به صفحه ماشین حساب فرا می‌رسد، بنابراین در بخش بعدی کدهای CSS ارائه شده‌اند.

کدهای CSS تمرین ساخت ماشین حساب با JS

کدهای CSS مربوط به تمرین ماشین حساب با جاوا اسکریپت نیز در ادامه آمده است.

1html {
2  font-size: 62.5%;
3  box-sizing: border-box;
4}
5
6*, *::before, *::after {
7  margin: 0;
8  padding: 0;
9  box-sizing: inherit;
10}
11
12.calculator {
13  border: 1px solid #ccc;
14  border-radius: 5px;
15  position: absolute;
16  top: 50%;
17  left: 50%;
18  transform: translate(-50%, -50%);
19  width: 400px;
20}
21
22.calculator-screen {
23  width: 100%;
24  font-size: 5rem;
25  height: 80px;
26  border: none;
27  background-color: #252525;
28  color: #fff;
29  text-align: right;
30  padding-right: 20px;
31  padding-left: 10px;
32}
33
34button {
35  height: 60px;
36  background-color: #fff;
37  border-radius: 3px;
38  border: 1px solid #c4c4c4;
39  background-color: transparent;
40  font-size: 2rem;
41  color: #333;
42  background-image: linear-gradient(to bottom,transparent,transparent 50%,rgba(0,0,0,.04));
43  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 1px 0 0 rgba(255,255,255,.45), inset 0 -1px 0 0 rgba(255,255,255,.15), 0 1px 0 0 rgba(255,255,255,.15);
44  text-shadow: 0 1px rgba(255,255,255,.4);
45}
46
47button:hover {
48  background-color: #eaeaea;
49}
50
51.operator {
52  color: #337cac;
53}
54
55.all-clear {
56  background-color: #f0595f;
57  border-color: #b0353a;
58  color: #fff;
59}
60
61.all-clear:hover {
62  background-color: #f17377;
63}
64
65.equal-sign {
66  background-color: #2e86c0;
67  border-color: #337cac;
68  color: #fff;
69  height: 100%;
70  grid-area: 2 / 4 / 6 / 5;
71}
72
73.equal-sign:hover {
74  background-color: #4e9ed4;
75}
76
77.calculator-keys {
78  display: grid;
79  grid-template-columns: repeat(4, 1fr);
80  grid-gap: 20px;
81  padding: 20px;
82}

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

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

در بخش آخر کدهای مربوط به تمرین ماشین حساب، به سراغ کد JS آن می‌رویم که در ادامه می‌توان آن را بررسی کرد.

1const calculator = {
2  displayValue: '0',
3  firstOperand: null,
4  waitingForSecondOperand: false,
5  operator: null,
6};
7
8function inputDigit(digit) {
9  const { displayValue, waitingForSecondOperand } = calculator;
10
11  if (waitingForSecondOperand === true) {
12    calculator.displayValue = digit;
13    calculator.waitingForSecondOperand = false;
14  } else {
15    calculator.displayValue = displayValue === '0' ? digit : displayValue + digit;
16  }
17}
18
19function inputDecimal(dot) {
20  if (calculator.waitingForSecondOperand === true) {
21  	calculator.displayValue = "0."
22    calculator.waitingForSecondOperand = false;
23    return
24  }
25
26  if (!calculator.displayValue.includes(dot)) {
27    calculator.displayValue += dot;
28  }
29}
30
31function handleOperator(nextOperator) {
32  const { firstOperand, displayValue, operator } = calculator
33  const inputValue = parseFloat(displayValue);
34  
35  if (operator && calculator.waitingForSecondOperand)  {
36    calculator.operator = nextOperator;
37    return;
38  }
39
40
41  if (firstOperand == null && !isNaN(inputValue)) {
42    calculator.firstOperand = inputValue;
43  } else if (operator) {
44    const result = calculate(firstOperand, inputValue, operator);
45
46    calculator.displayValue = `${parseFloat(result.toFixed(7))}`;
47    calculator.firstOperand = result;
48  }
49
50  calculator.waitingForSecondOperand = true;
51  calculator.operator = nextOperator;
52}
53
54function calculate(firstOperand, secondOperand, operator) {
55  if (operator === '+') {
56    return firstOperand + secondOperand;
57  } else if (operator === '-') {
58    return firstOperand - secondOperand;
59  } else if (operator === '*') {
60    return firstOperand * secondOperand;
61  } else if (operator === '/') {
62    return firstOperand / secondOperand;
63  }
64
65  return secondOperand;
66}
67
68function resetCalculator() {
69  calculator.displayValue = '0';
70  calculator.firstOperand = null;
71  calculator.waitingForSecondOperand = false;
72  calculator.operator = null;
73}
74
75function updateDisplay() {
76  const display = document.querySelector('.calculator-screen');
77  display.value = calculator.displayValue;
78}
79
80updateDisplay();
81
82const keys = document.querySelector('.calculator-keys');
83keys.addEventListener('click', event => {
84  const { target } = event;
85  const { value } = target;
86  if (!target.matches('button')) {
87    return;
88  }
89
90  switch (value) {
91    case '+':
92    case '-':
93    case '*':
94    case '/':
95    case '=':
96      handleOperator(value);
97      break;
98    case '.':
99      inputDecimal(value);
100      break;
101    case 'all-clear':
102      resetCalculator();
103      break;
104    default:
105      if (Number.isInteger(parseFloat(value))) {
106        inputDigit(value);
107      }
108  }
109
110  updateDisplay();
111});

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

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

بازی Tic Tac Toe

با جاوا اسکریپت می‌توان توسعه بازی Tic-Tac-Toe را آسان کرد. برای مشاهده و دسترسی به همه کدها می‌توانید به این لینک [+] مراجعه کنید. در این کدها نحوه ساختن بازی ۳ در ۳ به صورت گام به گام انجام و توضیح داده می‌شود. سپس بعدتر می‌توان برای تمرین بیشتر و بالا بردن دانش خود این بازی را به ابعاد NxN گسترش داد. زبان‌های HTML و CSS برای تمرین بسیار ساده هستند و نویسنده ابتدا با شبه کد شروع می‌کند و سپس به توضیح هر تابع به صورت جداگانه می‌پردازد.

فیلم آموزش پروژه محور یونیتی – طراحی و ساخت بازی دوز پیشرفته (رایگان) در فرادرس

کلیک کنید

برخی بازی‌ها مانند Tic-Tac-Toe با زبان‌های زیادی قابل پیاده‌سازی هستند و در قدم‌های اول یادگیری هر زبان، می‌توان کدهای این بازی‌ها را نوشت و از پیاده‌سازی آن‌ها لذت برد.