برنامه نویسی و طراحی سایت

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

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

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

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

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

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

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

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

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

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

بازی Tic Tac Toe

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

تمرین اساسی

جمع بندی

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

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

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

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

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

faradars mobile

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

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

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

کلیک کنید

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

یادگیری جاوا اسکریپت

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

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

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

کلیک کنید

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

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

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

کلیک کنید

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

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

کلیک کنید

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

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

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

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

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

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

کلیک کنید

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

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

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

کلیک کنید

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

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

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

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

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

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

حال پس از ذخیره کردن کدهای 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 با زبان‌های زیادی قابل پیاده‌سازی هستند و در قدم‌های اول یادگیری هر زبان، می‌توان کدهای این بازی‌ها را نوشت و از پیاده‌سازی آن‌ها لذت برد.

تمرین Tic Tac Toe با جاوا اسکریپت

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

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

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

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

مطلب پیشنهادی:

API چیست و API های باز چگونه اینترنت را تغییر می‌دهند؟

شروع مطالعه

 

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

 ، main.js

  و main.css

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

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

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

کلیک کنید

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

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

کلیک کنید

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

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



 
 
 KeyBoard Music


 
A
S
D
F
G
H
J
K
L

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

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

مطلب پیشنهادی:

۱۰ کتابخانه و فریم‌ورک جاوا اسکریپت که باید آنها را بشناسید — قسمت اول

شروع مطالعه

 

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

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

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

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


  
     Form Validation
        
  
  
     

USER REGISTRATION

Name
E-mail
Phone Number
Subject

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

مطلب پیشنهادی:

چگونه برنامه نویس شویم ؟ — راهنمای کار و رشته برنامه نویسی

شروع مطالعه

 

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

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

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

کلیک کنید

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

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

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

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



 
   My Sun Sign Infos
 
 
 
 
   

Hover over a sunsign image to display details.

Sagittarius are beautiful, loyal and passionate. Pisces are dreamy, helpful and love everyone! Leo are strong and fearless. They aim for and achieve a lot! Scorpions are friends for life. They are trustworthy and truthful.

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

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

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

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

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

آموزش مقدماتی Vue برای طراحی و مدل سازی سه بعدی
فیلم آموزش مقدماتی Vue برای طراحی و مدل سازی سه بعدی در تم آف

کلیک کنید

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

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

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

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

کلیک کنید

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

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

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

کلیک کنید

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

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

مطلب پیشنهادی:

جاوا اسکریپت خالص بهتر است یا جی کوئری؟ | راهنمای کاربردی

شروع مطالعه

 

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

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

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

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

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

کلیک کنید

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

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

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

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

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

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

کلیک کنید

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

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

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

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

مطلب پیشنهادی:

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

شروع مطالعه

 

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

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

مطلب پیشنهادی:

کاربرد جاوا اسکریپت چیست؟ – ۱۳ مورد از کاربردهای کلیدی

شروع مطالعه

 

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

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

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

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

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

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

کلیک کنید

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

مطلب پیشنهادی:

بهترین فریم ورک جاوا اسکریپت چیست ؟ – ۱۵ گزینه برتر ۲۰۲۲

شروع مطالعه

 

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

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

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

کلیک کنید

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

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

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

آموزش نود جی اس، انگولار و مونگو دی بی – پیاده سازی احراز هویت کاربر با Angular، Node.js و MongoDB
فیلم آموزش نود جی اس، انگولار و مونگو دی بی – پیاده سازی احراز هویت کاربر با Angular، Node.js و MongoDB در تم آف

کلیک کنید

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

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

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

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

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

کلیک کنید

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

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

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

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

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

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

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

پروژه سایتی شبیه به Trello با JS

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

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

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

آموزش فریم ورک انگولار جی اس – ساخت اپلیکیشن با AngularJS
فیلم آموزش فریم ورک انگولار جی اس – ساخت اپلیکیشن با AngularJS در تم آف

کلیک کنید

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

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

آموزش نود جی اس، انگولار و مونگو دی بی – طراحی سایت خبری با Angular ،Node.js  و MongoDB
فیلم آموزش نود جی اس، انگولار و مونگو دی بی – طراحی سایت خبری با Angular ،Node.js و MongoDB در تم آف

کلیک کنید

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

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

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

مطلب پیشنهادی:

شیء (Object) در جاوا اسکریپت — راهنمای کاربردی

شروع مطالعه

 

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

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

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

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

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

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

مطلب پیشنهادی:

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

شروع مطالعه

 

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

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

آموزش وردپرس WordPress برای راه اندازی سایت – مقدماتی
فیلم آموزش وردپرس WordPress برای راه اندازی سایت – مقدماتی در تم آف

کلیک کنید

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

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

پروژه فرانت‌اند یک وبلاگ شخصی با جاوا اسکریپت

تمرین اساسی

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

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

آموزش فریم ورک انگولار جی اس – ساخت اپلیکیشن با AngularJS
فیلم آموزش فریم ورک انگولار جی اس – ساخت اپلیکیشن با AngularJS در تم آف

کلیک کنید

جمع بندی

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

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

مطلب پیشنهادی:

بهترین فریم ورک جاوا اسکریپت چیست ؟ – ۱۵ گزینه برتر ۲۰۲۲

شروع مطالعه

 

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

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

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

کلیک کنید

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

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

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

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

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

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

مطلب پیشنهادی:

چگونه در برنامه نویسی پیشرفت کنیم ؟ — نکات کلیدی به زبان ساده

شروع مطالعه

 

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

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

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

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.