مرورگر (Browser)
اشیای مرورگر یعنی بخش های قابل دسترسیِ مرورگر با جاوااسکریپت. مثل پنجره، آدرس، تاریخچه. مثل دفتر مدیر مدرسه که هر اتاقش کاری دارد.
Window: مدیریت پنجره
شیء «window» نماینده پنجره مرورگر است. می توانی پنجره جدید باز کنی.
const btn = document.getElementById("openBtn");
btn.addEventListener("click", function () {
window.open("https://example.com", "_blank");
});
Screen: اطلاعات نمایشگر
شیء «screen» اندازه نمایشگر را می دهد. مثلا برای طراحی واکنش گرا.
const info = `${screen.width}x${screen.height}`;
console.log("screen:", info);
Location: آدرس صفحه
شیء «location» آدرس فعلی را دارد. می توانی آن را بخوانی یا عوض کنی.
console.log("href:", location.href);
// تغییر صفحه
// location.href = "https://underdevelops.com";
History: تاریخچه مرورگر
شیء «history» رفت وآمد بین صفحات را می دهد. مثل دکمه های عقب و جلو.
const backBtn = document.getElementById("back");
backBtn.addEventListener("click", function () {
history.back();
});
Navigator: اطلاعات مرورگر
شیء «navigator» درباره مرورگر کاربر اطلاعات می دهد. مثل userAgent.
console.log("ua:", navigator.userAgent);
Popup Boxes: جعبه های پیام
سه نوع پاپ آپ داریم: alert، confirm، prompt. برای پیام های سریع مفیدند.
alert("Hi");
const ok = confirm("Are you sure?");
const name = prompt("Your name?");
console.log(ok, name);
Timing: زمان بندی با تایمر
با setInterval کاری را تکراری اجرا کن. مثل تیک تاک ساعت.
let t = null;
function startClock() {
t = setInterval(function () {
console.log(new Date().toLocaleTimeString());
}, 1000);
}
function stopClock() {
clearInterval(t);
}
startClock();
Cookies: ذخیره سازی ساده
کوکی (Cookie) یک یادداشت کوچک در مرورگر است. نام کاربر را نگه دار.
const username = "Ali";
const days = 7;
const d = new Date();
d.setTime(d.getTime() + days * 24 * 60 * 60 * 1000);
document.cookie = `username=${username}; expires=${d.toUTCString()}; path=/`;
گام های تمرین سریع
- یک دکمه بساز و به آن id بده.
- با querySelector انتخابش کن.
- رویداد کلیک بده و متد شیء مناسب را صدا بزن.
نکته: از ویژگی های مرورگر با احتیاط استفاده کن. گاهی محدودیت امنیتی وجود دارد.
جمع بندی سریع
- window برای مدیریت پنجره است.
- screen اندازه نمایشگر می دهد.
- location آدرس را مدیریت می کند.
- history برای عقب و جلو است.
- navigator اطلاعات مرورگر را می دهد.