JavaScript Tutorial
🚀 JavaScript Tutorial (Beginner to Advanced)
1) JavaScript چیست؟
JavaScript یک زبان برنامهنویسی سمت کاربر (Client-side) است که برای ایجاد صفحات وب پویا استفاده میشود.
-
اضافه کردن تعامل به HTML
-
تغییر استایلها
-
درخواست به سرور
-
ساخت بازی، اپلیکیشن، سرور (با Node.js)
2) شروع کار با JavaScript
📌 قرار دادن در HTML
<script>
alert(“Hello JavaScript!”);
</script>
یا:
3) متغیرها (Variables)
ES6 سه نوع متغیر دارد:
const pi = 3.14; // غیرقابل تغییر
var name = “Ali”; // قدیمی، توصیه نمیشود
4) انواع داده (Data Types)
-
string
"hello" -
number
10,3.14 -
boolean
true / false -
array
[1, 2, 3] -
object
{name: "Ali"} -
null
-
undefined
5) عملگرها (Operators)
let x = 5;
let y = 2;
x + y; // 7
x * y; // 10
x == 5; // true
x === “5”; // false (بررسی نوع + مقدار)
6) دستورات شرطی (Conditions)
if (age >= 18) {
console.log(“Adult”);
} else {
console.log(“Minor”);
}
7) حلقهها (Loops)
for (let i = 0; i < 5; i++) {
console.log(i);
}
let n = 0;
while (n < 3) {
console.log(n);
n++;
}
8) توابع (Functions)
function greet(name) {
return “Hello “ + name;
}
console.log(greet(“Sara”));
تابع با فلش (Arrow Function)
const sum = (a, b) => a + b;
9) آرایهها (Arrays)
let fruits = [“apple”, “banana”, “mango”];
fruits.push(“orange”); // افزودن
fruits.pop(); // حذف آخر
fruits[1]; // دسترسی
10) اشیاء (Objects)
let user = {
name: “Ali”,
age: 25,
};
console.log(user.name);
1) DOM Manipulation
تغییر عناصر صفحه از طریق JavaScript
document.getElementById(“title”).innerHTML = “New Title”;
document.querySelector(“.box”).style.color = “red”;
12) رخدادها (Events)
<button onclick=“sayHello()”>Click</button>
<script>
function sayHello() {
alert(“Hello!”);
}
</script>
13) JSON
فرمت محبوب برای تبادل اطلاعات
let obj = { name: “Ali”, age: 30 };
let json = JSON.stringify(obj); // تبدیل به JSON
let parsed = JSON.parse(json); // تبدیل به JS object
14) Fetch API (درخواست به سرور)
fetch(“https://api.example.com/data”)
.then(res => res.json())
.then(data => console.log(data));
15) کلاسها (Classes)
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
const p1 = new Person(“Sara”, 20);
16) Async / Await
const res = await fetch(“https://api.example.com”);
const data = await res.json();
console.log(data);
}
17) ماژولها (Modules)
// add.js
export function add(a, b) {
return a + b;
}
// main.js
import { add } from “./add.js”;
دیدگاهتان را بنویسید