خلاصه JavaScript مقدماتی

1. آماده‌سازی محیط

باز کردن پوشه فعلی با VS Code

code .

افزونه‌های پیشنهادی

• Live Server
• Prettier
• HTML CSS Support
• ES7+ React/Redux/React-Native snippets

2. اجرای JavaScript

با Node.js

console.log("TEST");

node test.js

داخل مرورگر

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8" />
  <title>Introduction to JavaScript</title>
</head>
<body>

  <h1>JavaScript in Browser</h1>

  <script>
    console.log("Hello from browser");
  </script>

</body>
</html>

3. متغیرها — var, let, const

let age = 25;
age = 26; // مجاز

const PI = 3.14;
// PI = 3.14159; // Error

let j = 10;
// let j = 20; // Error

4. Data Types

// String
let name = "Ali";
let greeting = `سلام ${name}`;

// Number
let pi = 3.14;

// BigInt
let big = 9007199254740991n;
big + 10n;

// Boolean
let isActive = true;
const pending = false;

// undefined و null
let m;
let n = null;

// Symbol
let id1 = Symbol("id");
let id2 = Symbol("id");

console.log(id1 == id2); // false

typeof

console.log(typeof "hello"); // string
console.log(typeof 42);      // number
console.log(typeof true);    // boolean
console.log(typeof null);    // object

5. Object

const car = {
  brand: "Toyota",
  model: "Corolla",
  start: function () {
    console.log("Car is Started");
  },
};

car.start();
car.brand = "BMW";

// car = { test: 1 }; // Error

6. Array

let scores = [10, 19, 13, 8, 20];

console.log(scores);
console.log(scores.length); // 5
console.log(scores[0]);     // 10

scores.push(15);
scores.unshift(4);
scores.pop();
scores.shift();
scores.splice(1, 2, 17, 18);

7. Function

function sum(a, b) {
  return a + b;
}

console.log(sum(10, 134)); // 144

function average(a, b) {
  return (a + b) / 2;
}

Arrow Function

const sum2 = (a, b) => {
  return a + b;
};

const sum3 = (a, b) => a + b;

8. Loop / Iteration

let scores = [10, 12, 4, 19, 18];

for (let i = 0; i < scores.length; i++) {
  console.log(scores[i]);
}

جمع عناصر

let total = 0;

for (let i = 0; i < scores.length; i++) {
  total += scores[i];
}

console.log(total);

تابع میانگین

function avg(arr) {
  let sum = 0;

  for (let i = 0; i < arr.length; i++) {
    sum += arr[i];
  }

  return sum / arr.length;
}

مثال مرتبط با React

const products = ["Laptop", "Phone", "Tablet"];

for (let i = 0; i < products.length; i++) {
  console.log(products[i]);
}

9. Callback Function

Callback تابعی است که به عنوان آرگومان به تابع دیگری داده می‌شود.

function calc(a, b, callback) {
  let add = a + b;
  let sub = a - b;
  let mul = a * b;
  let div = a / b;

  callback({ add, sub, mul, div });
}

calc(10, 5, function (result) {
  console.log(result.add); // 15
  console.log(result.mul); // 50
});

مثال ساده‌تر

function calculate(a, b, callback) {
  let result = a * b;
  callback(result);
}

calculate(4, 5, function (answer) {
  console.log(answer);
});

// 20

10. forEach, map, filter, reduce

let scores = [10, 12, 4, 19, 18];

forEach

scores.forEach(function (value, index, array) {
  console.log(value, index);
});

map

let scores100 = scores.map((v) => v * 5);

filter

let scoresTop10 = scores.filter((v) => v >= 10);

reduce

let total = scores.reduce((p, v) => p + v, 0);

let average =
  scores.reduce((p, v) => p + v, 0) / scores.length;

مثال React

products.map((product) => (
  <div key={product.id}>
    {product.name}
  </div>
))

11. Template Literals

let a = 5;
let b = 10;

let message = `
  a = ${a}
  b = ${b}
  sum = ${a + b}
`;

console.log(message);

مثال

let userName = "Mehrnaz";
let count = 3;

let message =
  `Hello ${userName}, you have ${count} products.`;

12. قرارداد نام‌گذاری

13. خطاهای رایج و عیب‌یابی

14. ترتیب فایل‌های تمرین

test.js
01-introduction-to-javascript.html
02-variable.html
03-datatype.html
04-array.html
05-function.html
06-iteration.html
07-naming-convention.html
08-callback-function.html

15. تمرین کوتاه

1. سه متغیر با let و یک مقدار با const بساز و یکی را عمداً اشتباه تغییر بده.
2. یک آرایه ۵ عضوی بساز؛ با map همه را ×۲ کن.
3. با filter فقط مقادیر بزرگ‌تر یا مساوی ۱۲ را نگه دار.
4. با reduce مجموع و میانگین آرایه را حساب کن.
5. یک Callback بنویس که نتیجه ضرب دو عدد را چاپ کند.
6. یک Template Literal بساز که نام و سن را داخل یک جمله نمایش دهد.

جمع‌بندی نهایی برای مرور سریع

کدهای کامل فایل‌های جلسه

این بخش شامل خودِ کدهای فایل‌های اصلی تمرین است؛ یعنی همان فایل‌هایی که داخل پوشه جلسه داری، نه فقط مثال‌های خلاصه‌شده.