آموزش جاوا اسکریپت – BOM در جاوا اسکریپت (مدل شی گرای مرورگر)

BOM چیست؟

کلمه BOM مخفف Browser Object Model به معنای مدل شی گرای مرورگر یکی از مفاهیم اصلی و بسیار پرکاربرد در جاوا اسکریپت است. BOM در جاوا اسکریپت اهمیت زیادی دارد. به طوری که کاربران برای استفاده کردن بسیاری از شی یا ویژگی‌ها ابتدا نیازمند یادگیری چیستی BOM هستند.

اما واقعا BOM چیست؟

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

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

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

شی windows

شی windows توسط همه مرورگرها پشتیبانی می‌شود. این شی مهم‌ترین قسمت در BOM است. درواقع تمامی متدها و متغیرهای سراسری جزئی از شی windows خواهند بود. از آن جایی که یک سند HTML داخل مرورگر باز می‌شود، بنابراین می‌توانیم بگوییم که DOM نیز جزئی از BOM است.

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

document.write("hello world");
window.document.write("hello world");

//result hello world

در پست بعدی در رابطه با DOM صحبت خواهیم کرد.

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

مطمئن این سوال برایتان پیش آمده که چگونه یک پنجره جدید در مروگر باز می‌شود؟ در مبحث BOM در جاوا اسکریپت از متد ()open برای بازکردن پنجره جدید و متد ()close برای بستن یک پنجره استفاده می‌شود.

به این صورت که شما می‌توانید به سادگی چند دکمه (button) تعبیه کنید و از آن‌ها برای باز و بسته کردن پنجره‌ها استفاده کنید.

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

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

برای درک بهتر به تکه کد زیر توجه کنید:

<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
  window.open("https://www.programstore.ir");
}
</script>

در مثال بالا یک دکمه طراحی کردیم و یک تابع به نام myFunction تعریف کردیم. سپس در قسمت onclick دکمه، تابع مورد نظر را نوشتیم تا در صورت کلیک کاربر برروی دکمه دستورات داخل تایع اجرا شود. و درنهایت دستور باز شدن پنجره جدید را داخل تابع نوشتیم.

متد ()open چهار آرگومان به صورت زیر می‌گیرد:

window.open(URL, name, specs, replace);

• URL : آدرس صفحه
• name : نام صفحه و مقصد
• specs : ویژگی هایی از پنجره که باید با کاما (,) از هم جدا شوند.
• replace : یک مقدار Boolean که مشخص می‌کند آدرس صفحه در سابقه مرورگر جایگزین فعلی شود و یا یک ورودی جدید ایجاد کند.

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

• آموزش جاوا اسکریپت – آشنایی با مفاهیم و اصطلاحات — کلیک کنید.

ویژگی name

این ویژگی دارای پنج پارامتر به صورت زیر است:

• blank_ : این پارامتر به صورت پیش‌فرض است. مشخص می‌کند که آدرس در پنجره جدید بارگذاری می‌شود.
• parent_ : با انتخاب این پارامتر، آدرس در پنجره فعلی باز می‌شود.
• self_ : این پارامتر آدرس را در صفحه فعلی جایگزین می‌کند.
• top_ : با این پارامتر آدرس در پنجره اصلی یا مادر باز می‌شود.
• name : نام پنجره (این نام عنوان پنجره جدید را مشخص نمی‌کند!)

مثال : اگر بخواهیم از ویژگی parent_ استفاده کنیم نحوه نوشتاری دستور بدین صورت خواهد بود.

window.open("https://programstore.ir","_parent");

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

ویژگی specs

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

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

• ‍‍‍‍‍‍left : فاصله از چپ را تعیین می‌کند. این پارامتر برحسب پیکسل (pixels) می‌باشد و نمی‌توان از مقادیر منفی استفاده کرد.
• top : فاصله از بالا را تعیین می‌کند. این پارامتر برحسب پیکسل (pixels) می‌باشد و نمی‌توان از مقادیر منفی استفاده کرد.
• width : عرض پنجره را تعیین می‌کند. حداقل می‌توان مقدار 100px به این پارامتر داد.
• height : ارتفاع پنجره را تعیین می‌کند. حداقل می‌توان مقدار 100px به این پارامتر داد.
• status : مشخص می‌کند که آیا پنجره نوار وضعیت داشته باشد یا خیر. این پارامتر برحسب yes/no و یا ۰/۱ است.
• scrollbars : مشخص می‌کند که آیا پنجره اسکرول بار (نوار پیمایش) داشته باشد یا خیر. این پارامتر برحسب yes/no و یا ۰/۱ است و تنها در مرورگرهای IE ، Firefox و Opera پشتیبانی می‌شود.
• toolbar : مشخص می‌کند که آیا پنجره شامل نوار ابزار باشد یا خیر. این پارامتر برحسب yes/no و یا ۰/۱ است و تنها در مرورگرهای Firefox و IE پشتیبانی می‌شود.
• location : مشخص می‌کند که آیا پنجره نوار آدرس داشته باشد یا خیر. این پارامتر برحسب yes/no و یا ۰/۱ است و تنها در مرورگر Opera پشتیبانی می‌شود.

در تکه کدهای زیر به چند مورد از این پارامترها به عنوان مثال اشاره می‌کنیم:

<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
  window.open("", "", "width=300,height=200");
}
</script>

در مثال بالا یک صفحه خالی با ارتفاع ۲۰۰ و عرض ۳۰۰ باز می‌شود.

<script>
function myFunction() {
  window.open("https://programstore.ir", "_blank", "top=400,left=400,width=400,height=400");
}
</script>

و در مثال بالا پنجره جدید با فاصله ۴۰۰ از چپ و بالا و با عرض و ارتفاع ۴۰۰ باز می‌شود.

شما حتی می‌توانید با یک کلیک دو یا چند پنجره باز کنید. به مثال زیر توجه کنید:

<script>
function myFunction() {
  window.open("https://programstore.ir");
  window.open("https://google.com");
}
</script>

در این مثال با یک کلیک دو پنجره همزمان باز خواهد شد.

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

مهم‌ترین کار BOM در جاوا اسکریپت، در رابطه با مرورگر و تعامل با کاربران، دستکاری پنجره‌هاست. در شی windows برای دستکاری پنجره‌ها شش متد وجود دارد که در ادامه پس از نام بردن هر کدام از این متدها به توضیحات هرکدام می‌پردازیم:

• ()window.moveTo : این متد لبه سمت چپ و بالای پنجره را به مختصات داده شده می‌برد. همچنین می‌توان از مقادیر منفی نیز استفاده کرد.

<button onclick="openWin()">Open</button>
<button onclick="moveWin()">Move</button>
<script>
var myWindow;
function openWin() {
  myWindow=window.open("https://programstore.ir", "", "width=400, height=300");
}
function moveWin() {
  myWindow.moveTo(0, 0);
  myWindow.focus();
}
</script>

دستور بالا پنجره جدید را به موقعیت ۰ و ۰ می‌برد.

• ()window.moveBy : این متد پنجره را با توجه به مختصات فعلی پنجره جا به جا می‌کند. برای مثال:

<button onclick="openWin()">Open</button>
<button onclick="moveWin()">Move</button>
<script>
var myWindow;
function openWin() {
  myWindow=window.open("https://programstore.ir", "", "width=200, height=200");
}
function moveWin() {
  myWindow.moveBy(500, 500);
  myWindow.focus();
}
</script>

• ()window.resizeTo : این متد اندازه پنجره را با مقدار داده شده با توجه به اندازه فعلی پنجره تغییر می‌دهد. در این متد لبه سمت چپ و بالای پنجره ثابت می‌ماند و تنها لبه سمت راست و پایین تغییر می‌کنند. (مقادیر منفی مجاز نیستند.)

<button onclick="openWin()">Open</button>
<button onclick="resizeWin()">Resize</button>
<script>
var myWindow;
function openWin() {
  myWindow=window.open("https://programstore.ir", "", "width=600, height=600");
}
function resizeWin() {
  myWindow.resizeTo(200, 200);
  myWindow.focus();
}
</script>

• ()window.resizeBy : این متد اندازه پنجره را با توجه به اندازه فعلی بزرگ و یا کوچک می‌کند. با هربار اجرای دستور اندازه پنجره تغییر می‌کند. همچنین استفاده از مقادیر منفی نیز مجاز است.

<button onclick="openWin()">Open</button>
<button onclick="resizeWin()">Resize</button>
<script>
var myWindow;
function openWin() {
  myWindow=window.open("https://programstore.ir", "", "width=700, height=200");
}
function resizeWin() {
  myWindow.resizeBy(-100, 100);
  myWindow.focus();
}
</script>

• ()scrollTo : این متد (درصورتی که سایز پنجره بزرگتر از صفحه نمایش باشد، به معنای دیگر اسکرول خورده باشد) پنجره را به مختصات داده شده به ترتیب افقی و عمودی اسکرول می‌کند.

<head>
<style>
body {
  width: 5000px;
  height: 5000px;
}
</style>
</head>
<body>
<button onclick="scrollWin()">Click me to scroll</button>
<script>
function scrollWin() {
  window.scrollTo(200, 100);
}
</script>

• ()scrollBy : این متد پنجره را به مختصات داده شده به ترتیب افقی و عمودی اسکرول می‌کند. تفاوت این متد با متد ()scrollTo در این است که این بار شما می‌توانید با هربار کلیک صفحه را اسکرول نمایید.

در این تکه کد موقعیت button را fixed قرار دادیم تا با هربار کلیک بر روی دکمه بتوان دوباره از دکمه استفاده کرد.

<head>
<style>
body {
  width: 5000px;
  height: 5000px;
}
button {
  position: fixed;
}
</style>
</head>
<body>
<button onclick="scrollWin()">Click me to scroll</button>
<script>
function scrollWin() {
  window.scrollBy(200, 100);
}
</script>

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

در ادامه پست آموزشی BOM در جاوا اسکریپت و مبحث شی windows با ما همراه باشید. حتما دیده اید که در سایت های مختلف کادر پیغامی باز می‌شود و معمولا در این کادرها هشدار یا پیغام خاصی به کاربر نمایش داده می‌شود.

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

• ()alert : این متد یک مقدار از نوع رشته می‌گیرد و آن را در یک پنجره کوچک نمایش می‌دهد. این پنجره تنها یک دکمه OK دارد.

alert("Hello World!");

• ()confirm : این متد نیز یک مقدار از نوع رشته می‌گیرد و در پنجره کوچک نمایش می‌دهد. این پنجره یک دکمه OK و یک دکمه Cancel دارد. دکمه OK مقدار True و دکمه Cancel مقدار False را برمی‌گرداند.

confirm("Press a button!");

• ()prompt : این متد مانند ()confirm دارای دوکمه می‌باشد اما تفاوت متد ()prompt در این است که این متد دارای یک کادر متنی می‌باشد و کاربر می‌تواند در کادر مقادیر مورد نظر را تایپ کند. همچنین می‌توان مقداری را به صورت پیش‌فرض در داخل کادر متنی تعیین کرد که قابل ویرایش است. دکمه OK مقدار وارد شده داخل کادر و دکمه Cancel مقدار Null را برمی‌گرداند.

<p>Click the button to open the prompt box.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

<script>
function myFunction() {
  var person = prompt("Please enter your name", "");
  if (person != null) {
    document.getElementById("demo").innerHTML =
    "Hello " + person + "! How are you today?";
  }
}
</script>

و یا می‌توانید همزمان از دو پنجره دیالوگ استفاده نمایید:

<p>Click the button to open the prompt box.</p>
<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var person = prompt("Please enter your name", "");
  if (person != null) {
alert("Hello " + person + "! How are you today?");
  }
}
</script>

در این تکه کد ابتدا متد ()prompt اجرا می‌شود و  پس از دریافت نام کاربر و ذخیره آن در متغیر، متد ()alert اجرا می‌شود و پیغام به کاربر نمایش داده می‌شود.

متدهای ()setTimeout و ()setInterval

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

• متد ()setTimeout : این متد کد گرفته شده را پس از گذشتن زمان تعیین شده برحسب میلی ثانیه اجرا می‌کند. مثال:

<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
  setTimeout(function(){
  alert("Hello!"); }, 3000);
}
</script>

در این کد پس از گذشتن ۳ ثانیه کادر پیغام باز می‌شود.

• متد ()setInterval : این متد نیز همانند متد ()setTimeout کار می‌کند با این تفاوت که کد را پس از گذشت زمان به طور مکرر اجرا می‌کند. مثال:

<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
  setInterval(function(){
  alert("Hello"); }, 3000);
}
</script>

در این کد پس از گذشتن ۳ ثانیه کادر پیغام باز می‌شود و درصورت کلیک بر روی OK دوباره پس از ۳ ثانیه نمایش داده می‌شود. در صورتی که گزینه OK را کلیک نکنید به ازای هر ۳ ثانیه یک کادر پیغام در پشت کادر پیغام فعلی باز می‌ماند که پس از گذشتن مثلا ۳۰ ثانیه مجبور به بستن ۱۰ کادر پیغام خواهید بود.

شما می‌توانید از متد ()setInterval برای نوشتن برنامه هایی برحسب تایمر استفاده کنید. برای متوقف کردن اجرای کد از متد ()clearInterval استفاده می‌شود. در تکه کد زیر به یک مثال اشاره کردیم:

<p id="demo"></p>
<button onclick="myStopFunction()">Stop time</button>

<script>
var myVar = setInterval(myTimer, 1000);
function myTimer() {
  var d = new Date();
  var t = d.toLocaleTimeString();
  document.getElementById("demo").innerHTML = t;
}
function myStopFunction() {
  clearInterval(myVar);
}
</script>

در این مثال با استفاده از شی ()Date زمان فعلی سیستم دریافت و در متغیر ذخیره می‌شود و با استفاده از متد پس از گذشت هر ثانیه یک رقم به ساعت فعلی اضافه می‌شود. همچنین دکمه ای درنظر گرفته شده است که با کلیک کاربر بر روی آن متد ()clearInterval اجرا می‌شود و درنهایت ساعت از حرکت می‌ایستد.

شی History

در مبحث BOM در جاوا اسکریپت یکی از مواردی که نمی‌توان به طور قطعی درباره آن توضیحات کامل داد مسئله تاریخچه (History) مرورگر است. برای حفظ حریم خصوصی کاربران یک سری محدودیت برای دسترسی جاوا اسکریپت به این شیء وجد دارد. در دنیای مجازی هیچ راهی برای دسترسی به آدرس صفحاتی که در تاریخچه هستند وجود ندارد.

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

• ()go : این متد تنها یک مقدار می‌گیرد و آن تعداد صفحاتی است که باید به جلو یا عقب پیمایش خواهد شد. بنابراین استفاده از عدد مثبت به معنی پیمایش به جلو و عدد منفی به معنی پیمایش به عقب خواهد بود. مثال:

window.history.go(-3);

به جای استفاده از متد ()go می‌توان از متدهای زیر استفاده کرد:

• ()back : تعداد صفحاتی که باید به عقب برگردند مشخص می‌کند. مثال:

window.history.back();

• ()forward : تعداد صفحاتی که باید به جلو بروند مشخص می‌کند. مثال:

window.history.forward();

شی Location

این شیء دارای اطلاعاتی درمورد آدرس فعلی است.

• ()location.href : با خاصیت location.href می‌توان به آدرس صفحه فعلی دسترسی پیدا کرد. مثال:

<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

<script>
function myFunction() {
  var x = location.href;
  document.getElementById("demo").innerHTML = x;
}
</script>

با اجرای کد بالا در یک صفحه HTML، آدرس صفحه نمایش داده می‌شود. همچنین با استفاده از این خاصیت می‌توان در همان صفحه یک آدرس جدید را بارگذاری کرد. مثال:

<button onclick="myFunction()">click button to open programstore.ir</button>
<script>
function myFunction() {
  location.href = "https://programstore.ir";
}
</script>

• ()location.assign : این متد نیز می‌تواند یک آدرس را در صفحه جاری بارگذاری کند. مثال:

<button onclick="myFunction()">click button to open programstore.ir</button>
<script>
function myFunction() {
  location.assign("https://programstore.ir");
}
</script>

• ()replace : این متد نیز همانند مورد قبلی کار می‌کند با این تفاوت که آدرس فعلی را با آدرس قبلی جایگزین می‌کند. این بدین معناست که در این متد استفاده از دکمه برگشت (Back) مرورگر برای بازگشت به آدرس قبلی امکان پذیر نخواهد بود.
• ()reload : از این متد برای بارگذاری دوباره یک صفحه استفاده می‌شود. این متد همانند دکمه رفرش (refresh) موجود در مرورگر عمل می‌کند.

شی Navigator

از این شیء برای به دست آوردن اطلاعات مروگر استفاده می‌شود. در تکه کد زیر به برخی از خاصیت های این شیء اشاره کرده ایم:

<div id="demo"></div>
<script>
var txt = "";
txt += "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt += "<p>Browser Name: " + navigator.appName + "</p>";
txt += "<p>Browser Version: " + navigator.appVersion + "</p>";
txt += "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt += "<p>Browser Language: " + navigator.language + "</p>";
txt += "<p>Browser Online: " + navigator.onLine + "</p>";
txt += "<p>Platform: " + navigator.platform + "</p>";
txt += "<p>User-agent header: " + navigator.userAgent + "</p>";
document.getElementById("demo").innerHTML = txt;
</script>

با اجرای کد بالا مشخصات مررگر شما نمایش داده می‌شود.

شی Screen

از این شیء برای به دست آوردن اطلاعات صفحه نماش کاربر استفاده می‌شود. در تکه کد زیر به خاصیت های این شیء اشاره کرده ایم:

<div id="demo"></div>
<script>
var txt = "";
txt += "<p>Total width/height: " + screen.width + "*" + screen.height + "</p>";
txt += "<p>Available width/height: " + screen.availWidth + "*" + screen.availHeight + "</p>";
txt += "<p>Color depth: " + screen.colorDepth + "</p>";
txt += "<p>Color resolution: " + screen.pixelDepth + "</p>";
document.getElementById("demo").innerHTML = txt;
</script>

با اجرای کد بالا مشخصات صفحه نمایش شما نمایش داده می‌شود.

سخن آخر آموزش جاوا اسکریپت

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

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

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

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

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

کلیک کنید