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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  تابعی جهانی برای جاوا اسکریپت است که کدهای JS را حل می‌کند. تابع display()

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

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

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

  
  
  

    
    +
    -
    ×
    ÷

    7
    8
    9


    4
    5
    6


    1
    2
    3


    0
    .
    AC

    =

  

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

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

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

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

.calculator {
  border: 1px solid #ccc;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
}

.calculator-screen {
  width: 100%;
  font-size: 5rem;
  height: 80px;
  border: none;
  background-color: #252525;
  color: #fff;
  text-align: right;
  padding-right: 20px;
  padding-left: 10px;
}

button {
  height: 60px;
  background-color: #fff;
  border-radius: 3px;
  border: 1px solid #c4c4c4;
  background-color: transparent;
  font-size: 2rem;
  color: #333;
  background-image: linear-gradient(to bottom,transparent,transparent 50%,rgba(0,0,0,.04));
  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);
  text-shadow: 0 1px rgba(255,255,255,.4);
}

button:hover {
  background-color: #eaeaea;
}

.operator {
  color: #337cac;
}

.all-clear {
  background-color: #f0595f;
  border-color: #b0353a;
  color: #fff;
}

.all-clear:hover {
  background-color: #f17377;
}

.equal-sign {
  background-color: #2e86c0;
  border-color: #337cac;
  color: #fff;
  height: 100%;
  grid-area: 2 / 4 / 6 / 5;
}

.equal-sign:hover {
  background-color: #4e9ed4;
}

.calculator-keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  padding: 20px;
}

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

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

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

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

function inputDigit(digit) {
  const { displayValue, waitingForSecondOperand } = calculator;

  if (waitingForSecondOperand === true) {
    calculator.displayValue = digit;
    calculator.waitingForSecondOperand = false;
  } else {
    calculator.displayValue = displayValue === '0' ? digit : displayValue + digit;
  }
}

function inputDecimal(dot) {
  if (calculator.waitingForSecondOperand === true) {
  	calculator.displayValue = "0."
    calculator.waitingForSecondOperand = false;
    return
  }

  if (!calculator.displayValue.includes(dot)) {
    calculator.displayValue += dot;
  }
}

function handleOperator(nextOperator) {
  const { firstOperand, displayValue, operator } = calculator
  const inputValue = parseFloat(displayValue);
  
  if (operator && calculator.waitingForSecondOperand)  {
    calculator.operator = nextOperator;
    return;
  }


  if (firstOperand == null && !isNaN(inputValue)) {
    calculator.firstOperand = inputValue;
  } else if (operator) {
    const result = calculate(firstOperand, inputValue, operator);

    calculator.displayValue = `${parseFloat(result.toFixed(7))}`;
    calculator.firstOperand = result;
  }

  calculator.waitingForSecondOperand = true;
  calculator.operator = nextOperator;
}

function calculate(firstOperand, secondOperand, operator) {
  if (operator === '+') {
    return firstOperand + secondOperand;
  } else if (operator === '-') {
    return firstOperand - secondOperand;
  } else if (operator === '*') {
    return firstOperand * secondOperand;
  } else if (operator === '/') {
    return firstOperand / secondOperand;
  }

  return secondOperand;
}

function resetCalculator() {
  calculator.displayValue = '0';
  calculator.firstOperand = null;
  calculator.waitingForSecondOperand = false;
  calculator.operator = null;
}

function updateDisplay() {
  const display = document.querySelector('.calculator-screen');
  display.value = calculator.displayValue;
}

updateDisplay();

const keys = document.querySelector('.calculator-keys');
keys.addEventListener('click', event => {
  const { target } = event;
  const { value } = target;
  if (!target.matches('button')) {
    return;
  }

  switch (value) {
    case '+':
    case '-':
    case '*':
    case '/':
    case '=':
      handleOperator(value);
      break;
    case '.':
      inputDecimal(value);
      break;
    case 'all-clear':
      resetCalculator();
      break;
    default:
      if (Number.isInteger(parseFloat(value))) {
        inputDigit(value);
      }
  }

  updateDisplay();
});

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

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

بازی Tic Tac Toe

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

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

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

برنامه‌های آب و هوا تمرین‌های محبوب جاوا اسکریپت هستند زیرا چنین برنامه‌هایی می‌توانند واقعاً مفید باشند و احتمال استفاده در زندگی روزانه را نیز دارند. این لینک [+] کدهای مربوط به تمرین را شامل می‌شود که برای مبتدیان بسیار مناسب است، زیرا کمک می‌کند اصول اساسی «مدل شی گرای سند» (DOM) در جاوا اسکریپت را درک کرده و یاد می‌دهد که چگونه از API برای فراخوانی و دریافت اطلاعات از یک سرویس شخص ثالث استفاده کنید.

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

 

در این ویدیوی یوتیوب [+] می‌توان کد برنامه آب و هوا و عملکرد آن را با جزئیات مشاهده کرد. طبق معمول سه فایل index.html

 ، main.js

  و main.css

  وجود دارد، اگرچه می‌توان تمام کدها را در یک فایل HTML قرار داد، اما نگهداری فایل‌های جداگانه راحت‌تر است.

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

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

انجام تمرین ساخت برنامه موسیقی با جاوا اسکریپت

در این تمرین، «شنونده‌های رویداد» (eventListeners) را معرفی می‌کنیم که براساس صفحه کلید عمل می‌کنند. به عنوان مثال، اگر کلید “S” فشار داده شود، یک رویداد رخ خواهد داد. هر کدام از کلیدها کد و اکشن متفاوتی خواهند داشت. به غیر از شنوندگان رویداد، نحوه افزودن و پخش فایل‌های صوتی را نیز یاد خواهیم گرفت. توجه داشته باشید که استایل‌دهی CSS بسیار ابتدایی به پروژه اضافه شده است، زیرا تمرکز اینجا روی جاوا اسکریپت قرار دارد و شما باید صداها و تصویر پس‌زمینه خود را وارد کنید تا برنامه به طور کامل کار کند. کدهای این تمرین در ادامه آمده است.

 
 
 


 

   

     A
   
   

     S
   
   

     D
   
   

     F
   
   

     G
   
   

     H
   
   

     J
   
   

     K
   
   

     L
   
 
 
 
 
 
 
 
 
 
 

تمرین ایجاد صفحه منوی رستوران با JS

این تمرین جاوا اسکریپت، دستور پخت چندین غذا است که به دنبال آن خواهیم بود و ما را با نحوه ساخت صفحه منوی رستوران آشنا می‌کند. در این صفحه از طریق فهرست غذاهای مختلف می‌توان فیلتر انجام داد. علاوه بر آن، توابع سطح بالاتری مانند map ،reduce و filter را به ما می‌آموزد. توابع سطح بالاتر برای یادگیری بسیار عالی هستند، زیرا قابلیت استفاده مجدد بسیار بالایی دارند و بنابراین، با استفاده از آن‌ها نحوه برنامه نویسی هوشمندانه‌تر و البته دشوارتر را خواهیم آموخت. برای مشاهده کدهای این تمرین به لینک گیت‌هاب [+] مراجعه کنید.

 

اعتبار سنجی فرم

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

جاوا اسکریپت می‌تواند این اطلاعات را تایید کند. تمرین زیر شامل اعتبارسنجی ساده فُرم است. البته تمرین به عناصر HTML نیز نیاز خواهد داشت. در این تمرین جاوا اسکریپت هیچ استایل‌دهی گسترده‌ای (با CSS) انجام نشده است و فقط شامل عناصر اساسی در خود HTML می‌شود. در ادامه کد کامل یک فرم ساده با اعتبارسنجی اولیه آمده است.

  
     
        
  
  
     

   	 
USER REGISTRATION
        

           

              
Name
              

           
           

              
E-mail
              

           
           

              
Phone Number
              

           
           

              
Subject
              

                 
                    Select
                    HTML
                    JavaScript
                    CSS
                    JSP
                 
              
           
        
        

  

     
  

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

 

تمرین ساخت صفحه وب تعاملی Landing page برای وب سایت با JS

ساخت یک وب سایت کامل، نیازمند تلاشی گسترده است. بیایید در عوض با یکی از تمرین‌های کوچک جاوا اسکریپت برای مبتدیان ادامه بدهیم. این تمرین شامل ساخت صفحه وب پویا است که نام و متن نوشته شده توسط کاربر را در حافظه محلی ذخیره می‌کند و یک تصویر مناسب و پیام تبریک را براساس ساعت روز به او نشان می‌دهد. در این ویدیوی یوتیوب [+] می‌توان با نحوه ساخت آن بیشتر آشنا شد و این تمرین کمک می‌کند تا اجزای جاوا اسکریپتی آن را بیشتر بررسی کنید.

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

تمرین نمایش جزئیات تصویر با JS

در این تمرین جاوا اسکریپت برخی از تصاویر را در یک صفحه وب نمایش خواهیم داد. هنگامی که کاربر روی تصاویر قرار می‌گیرد، جزئیات بیشتری ظاهر می‌شوند. می‌توان تصاویر را از هر جایی دانلود کرد یا از تصاویری استفاده کرد که در حال حاضر باز هستند. باز هم از HTML و CSS پایه همراه با جاوا اسکریپت استفاده می‌شود که کد این برنامه را در ادامه مشاهده می‌کنیم.

 
   
 
 
 
 
   

   
Hover over a sunsign image to display details.

   
   
   
   
   
 

برای پیچیده‌تر کردن این تمرین می‌توان نمایش اسلاید را امتحان کرد. می‌توان رویدادهای onClick را به رویدادهای onMousehover و onMouseout تغییر داد، در این صورت زمانی که کاربر ماوس را روی تصاویر قرار دهد، تصاویر تغییر می‌کنند.

ایجاد یک بازی به سبک پرشی (Platformer) با JS

اگر از علاقه‌مندان بازی‌هایی مانند «پرندگان خشمگین» (Angry Birds) باشید، این تمرین قطعاً برای شما جذاب خواهد بود. تا به حال به این فکر کرده‌اید که بازی پرشی خود را بسازید؟ این تمرین آموزشی جاوا اسکریپت بسیار مناسب خواهد بود که در لینک [+] می‌توان ویدیوی یوتیوب آن را مشاهده کرد و به کدهای آن دسترسی داشت.

این آموزش ما را با مفهوم برنامه نویسی شی‌گرا و الگوهای نرم‌افزاری «مدل‌نما-کنترل‌گر» (MVC) آشنا خواهد کرد. مفاهیم زیادی، مانند حلقه‌ها، گزاره‌های سوئیچ، اصول OOP و غیره را در این آموزش فرا خواهیم گرفت. این تمرین یکی از آموزش‌های طولانی است و تقریباً سه ساعت به طول می‌انجامد، اما با این حال، بسیار خوب و سازمان یافته است. در پایان آن، تنها یک بازی واقعاً جالب نخواهیم داشت، بلکه بسیاری از اصول پایه‌ای جاوا اسکریپت را نیز درک خواهیم کرد.

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

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

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

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

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

ساخت سبد خرید یا لیستی از مواد غذایی برای انجام سفارش

تاکنون تمرین‌های کوچکی را با CSS ،HTML و JS خالص اجرا کرده‌ایم. در این برنامه نویسنده یک سبد خرید کامل برای انجام سفارش می‌سازد و در تمرین از jQuery نیز استفاده می‌کند. با بازگشت به مبحث غذا، این آموزش پایه‌ای جاوا اسکریپت آموزش می‌دهد که چگونه برخی از مواد را از فهرست مواد غذایی به‌روزرسانی یا حذف کنیم. طی مراحل انجام این تمرین، ما با مبحث CRUD آشنا خواهیم شد. (CRUD به معنای ایجاد، خواندن، به‌روزرسانی و حذف است.)

 

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

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

در این تمرین جاوا اسکریپت ، صفحه با پیمایش لینک‌های جانبی دوباره بارگیری نمی‌شود، اما محتوا تغییر می‌کند. مجددا از eventListeners برای تغییر نما از یک پیوند به پیوند دیگر استفاده خواهیم کرد. کد [+] و توضیح این تمرین در ویدیوی یوتیوب [+] را بررسی کنید.

ویرایشگر کد مرورگر با جاوا اسکریپت

در حالی که در حال حاضر انتخاب زیادی برای ویرایشگرهای کد جاوا اسکریپت داریم، همیشه خوب است بتوانیم کدهای خودمان را ایجاد کنیم. جاوا اسکریپت به ما این امکان را می‌دهد که یک ویرایشگر کد درون مرورگر ایجاد کنیم و این تمرین در مورد همین مسئله است. جاوا اسکریپت از برخی روش‌های مفید استفاده می‌کند و حتی برجسته‌سازی سینتکس در کد را نیز در بر دارد. کدهای این تمرین در این لینک [+] قابل ارزیابی است.

تمرین چت بلادرنگ با جاوا اسکریپت

ساخت برنامه‌های چت نسبتاً ساده هستند و خودتان با استفاده از جاوا اسکریپت توانایی ایجاد یکی از آن‌ها را دارید. این تمرین از React و Node.js استفاده می‌کند، بنابراین ممکن است کمی ترسناک باشد. با این حال، یک راه خوب برای ورود به آن، یادگیری نحوه کار با ابزارهای ارزشمند است. در این لینک [+] می‌توان به کدهای این تمرین در گیت‌هاب دسترسی داشت.

ساخت پلتفرم بازی دو بعدی با JS

ساخت بازی‌ها یک راه عالی و سرگرم کننده برای یادگیری جاوا اسکریپت هستند. به همین دلیل است که تمرین‌های زیادی را خواهیم دید که حول بازی‌ها می‌چرخند. این تمرین به ما می‌آموزند که چگونه یک پلتفرم بازی دو بعدی بسازیم، همه آن با استفاده از HTML، CSS و جاوا اسکریپت و درکی از مفاهیم OOPs و یک API استفاده می‌شود، که تمامی این مهارت‌ها مفید هستند.

لینک ویدیوی یوتیوب برای توضیحات تمرین و کد آن در [+] وجود دارد.

 

برنامه اشتراک گذاری فایل

در این تمرین جاوا اسکریپت به سراغ یادگیری نحوه به اشتراک‌گذاری فایل‌ها با JS می‌رویم که یکی دیگر از مهارت‌های مفید در برنامه نویسی جاوا اسکریپت به حساب می‌آید. برای ایجاد این برنامه از کتابخانه Virgil Crypto در جاوا اسکریپت استفاده خواهیم کرد. می‌توان فایل‌های رسانه‌ای رمزگذاری شده را دانلود، رمزگشایی و مشاهده کرد. کد این تمرین در لینک [+] قابل دسترسی است.

 

تمرین اشتراک گذاری عکس با جاوا اسکریپت

اینستاگرام را همه می‌شناسند، این اپلیکیشن ویژگی‌های زیادی دارد، اما اساساً برنامه‌ای برای به اشتراک‌گذاری عکس است. می‌توان نسخه‌ای مشابه اما در مقیاس کوچک‌تر از آن را با استفاده از جاوا اسکریپت ایجاد کرد. این تمرین سنگین است و اغلب برنامه‌نویسان از React ،Node.js و Postgres استفاده می‌کنند. اطلاعات در مورد کدهای آن را در [+] مشاهده کنید.

بخش سوم: تمرین‌های Vue.js جاوا اسکریپتی برای مبتدیان

فریمورک‌های مختلفی برای جاوا اسکریپت وجود دارند. این فریمورک‌ها کارهای مشابه یا دارای هم‌پوشانی تمرین‌های مختلف را انجام می‌دهند. vue.js یکی از آن‌هاست. vue.js برای ساخت برنامه‌ها و رابط‌های کاربری تعاملی کاربر انتخاب بسیار مناسبی است. در حالی که React نیز کار مشابهی انجام می‌دهد و محبوب‌تر است (از نظر برخی، یادگیری آن مفیدتر خواهد بود)، اما Vue.js ممکن است برای مبتدیان گزینه بهتری باشد.

به همین دلیل در این بخش انتخاب شده است. این بخش شامل چند تمرین جاوا اسکریپتی برای یادگیری Vue.js می‌شود.

 

تمرین برنامه دستور پخت غذا با جاوا اسکریپت

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

سه عنصر اصلی در این برنامه وجود دارد، یک لیست با تمام دستور پخت‌ها، یک فرم برای اضافه کردن دستور پخت جدید و یک نمای کامل از دستور پخت انتخاب شده است. (این دستور پخت، پر از عکس‌های جذاب از غذاها خواهد بود)
این تمرین جاوا اسکریپت از فریمورک‌های زیادی بهره می‌برد. لازم است از Vue2 ،Vuex ،Vuetify و Cosmic.js استفاده شود. این آموزش از تمرین‌های ارزشمند برای مبتدیان محسوب می‌شود و در نهایت محصولی واقعاً جالب، زیبا و بالقوه مفید ایجاد خواهد کرد. برای دسترسی به کد این تمرین می‌توان به لینک [+] مراجعه کرد.

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

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

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

ساخت برنامه انجام کارهای روزمره

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

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

اگر علاقه‌مند به خبرها و اتفاقات به‌روز باشید، این تمرین برای شما مفید خواهد بود. در اینجا [+] آموزشی وجود دارد که به شما می‌آموزد چگونه یک برنامه وب خبری با Vue.js ایجاد کنید. این آموزش از API در newsapi.org استفاده می‌کند. به طور قطع از برخی دیگر از آموزش‌های موجود میان تمرین های جاوا اسکریپت، بیشتر متکی به خود و مستقل است.

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

برنامه مبدل دما

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

سایتی شبیه به Trello

راهی عالی برای یادگیری برنامه جاوا اسکریپت مخصوص افراد مبتدی، ایجاد تمرین‌هایی شبیه به چیزهایی است که از پیش وجود دارد. به همین دلیل این تمرین جاوا اسکریپت توصیه می‌شود، زیرا به آموزش اینکه چگونه یک وب‌سایت شبیه به Trello با Vue.js بسازیم کمک می‌کند. زمانی که هدفی داریم باید ببینیم که چه چیزی نیاز به تغییر یا حتی بهبود دارد. Trello بسیار محبوب است و بسیاری از افراد، روزمره از آن استفاده می‌کنند. بنابراین این تمرین واقعاً جالب خواهد بود.
در این تمرین بیشتر بر جنبه یادگیری در حین کار کردن متمرکز می‌شویم، بنابراین در هنگام غرق شدن در مخزن گیت‌هابِ مربوط به این تمرین [+]، این نکته را به خاطر داشته باشید.

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

«انگولار» (Angular) هم یک پلتفرم و هم یک فریمورک‌‌ برای ساخت برنامه‌های کلاینت تک‌صفحه‌ای با استفاده از HTML و TypeScript به حساب می‌آید. این فریمورک مقیاس‌پذیری خوبی دارد و از این نظر برای مبتدیان جاوا اسکریپت جذاب خواهد بود. واقعاً ارزش آن را دارد که با آن آشنا شویم.

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

ساخت یک پخش‌‌کننده صوتی

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

با پایان این تمرین، در واقع ما یک برنامه پخش‌کننده صوتی ایجاد کرده‌ایم و انجام عملیات صوتی و وضعیت برنامه را فرا خواهیم گرفت. همچنین با استفاده از Auth0، برنامه خود را امن می‌کنیم. برای دسترسی به کدهای این تمرین، به مخزن گیت‌هاب [+] مراجعه کنید.

ایجاد یک نقشه گوگل با استفاده از انگولار

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

 

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

صفحه اصلی گوگل

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

ماشین حساب مخارج و درآمد

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

 

بخش فرانت‌اند یک وبلاگ شخصی

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

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

پیش‌فرض برای انجام این تمرین این است که شما چیزی نمی‌دانید. به همین دلیل برای مبتدیان بسیار مناسب خواهد بود، حتی اگر تمرین ایجاد بخش فرانت‌اند وبلاگ، بسیار پیچیده و سطح بالا به نظر برسد. برای مشاهده کد این تمرین می‌توان لینک [+] را بررسی کرد.

تمرین اساسی

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

این تمرین یک مخزن گیت‌هاب [+] با یک فایل بسیار کوتاه ReadMe است و دارای ماژول‌های npm، پیکربندی، اسکریپت‌ها، پوشه‌ها و سایر موارد است. این یک برنامه مینیمال و مناسب برای یادگیری است. با آن کار کنید، آن را اجرا کنید و ببینید قدم بعدی چیست.

جمع بندی

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

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

 

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

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

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

در انتها به برخی پرسش‌های رایج در مورد این مطلب پاسخ داده شده است.

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

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

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

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

 

از کجا می‌توان یادگیری جاوا اسکریپت را برای افراد مبتدی شروع کرد ؟

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

از کجا می‌توان تمرین های جاوا اسکریپت را دریافت کرد ؟

می‌توان تمرین‌های مبتدی جاوا اسکریپت را در ابتدای این مطلب برای چند تمرین ساده و جالب بررسی کرد. همچنین می‌توان برای پیدا کردن سایر ایده‌های تمرین جاوا اسکریپت در اینترنت جستجو کنید.