آموزش Bom در جاوا اسکریپت

BOM به عنوان یکی از اجزای اصلی و ابتدایی تشکیل دهنده در جاوا اسکریپت نقش مهمی در تعامل کاربران با بخش هاي گوناگون مرورگرها همچون بخش نمایش سند، فریم ها، پنجره ها، تاریخچه ، مشخصات سیستم عامل و مرورگر و … ایفا می کند. ما در این بخش ابتدا با BOM در جاوا اسکریپت آشنا شده و سپس به بررسی بخش های تشکیل دهنده آن و هر یک از خصوصیات آن ها خواهیم پرداخت.

 

 

Bom  در جاوا اسکریپت چیست ؟

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

اکنون به بررسی هر یک از اجزاي تشکیل دهنده BOM و خصوصیات و متدهاي مربوط به آن ها می پردازیم:

شی window

شی window تمامی پنجره هاي مرورگر را شامل می شود اما نه لزومآ محتوایی که در آن نمایش داده می شود. از این شی براي جابجایی ، تغییر اندازه و دیگر اثرات بر روي پنجره ها استفاده می کنیم.

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

شش متد براي دستکاری پنجره مرورگر براي شی window وجود دارد :

 

1. moveBy(dx,dy)

پنجره را نسبت به موقعیت کنونی به اندازه x در جهت افقی و به اندازه y در جهت عمودي جابجا می کند. عدد هاي منفی هم براي x,y مجازند.

2. moveTo(x,y)

گوشه بالاي چپ مرورگر را به موقعیت x,y می برد. مقادیر منفی نیز مجاز هستند.

3. resizeBy(w,h)

عرض پنجره مرورگر را به اندازه w و ارتفاع آنرا به اندازه h نسبت به size کنونی تغییر می دهد. مقادیر منفی نیز مجازند.

4. resizeTo(w,h)

عرض مرورگر را به w و ارتفاع آن را به h تغییر می دهد. مقادیر منفی مجاز نیستند.

5. scrollBy(dx,dy)

اسکرول افقی را به اندازه x و اسکرول عمودي را به اندازه y جابجا می کند.

6. scrollTo(x,y)

این متد مختصات جدید اسکرول هاي افقی و عمودي را به ترتیب با استفاده از آرگومان هاي x و y مشخص می کند.

 

مثال ها :

window.moveBy (10, 20)

• پنجره را نسبت به مکان فعلی 10px پیکسل به سمت راست و 20px به سمت پایین جابجا می کند.

window.resizeTo (150, 300)

• عرض پنجره را به 150px و ارتفاع آن را به 300px تغییر می دهد.

window.resizeBy (150, 0)

• فقط 150px به عرض کنونی پنجره اضافه می کند.

window.moveTo (0, 0)

• پنجره را به گوشه بالا و سمت چپ صفحه نمایش هدایت می کند.

پیمایش و باز کردن پنجره های جدید

براي باز کردن پنجره هاي جدید با استفاده از جاوا اسکریپت از متد ()open استفاده می شود که چهار آرگومان می گیرد :

 

۱. آدرس صفحه
2. نام صفحه
3. رشته اي از ویژگی هاي
4. و یک مقدار Booelan

 

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

 

ویژگی های آرگومان سوم مشخص می کند که پنجره ي جدید چه خصوصیاتی داشته باشد که در زیر بیان می کنیم:

 

خصوصیات با = مقدار دهی می شود و با , از هم جدا می شود.

 

برخی از خصوصیات مجاز قابل استفاده عبارتند از :

 

left : فاصله از چپ
top : فاصله از بالا
width : عرض پنجره
height : ارتفاع پنجره
resizable (Yes/No) : آیا پنجره قابل تغییر اندازه باشد یا خیر
(Yes/No) scrollable(scrollbars) : مشخص می کند آیا پنجره نوار اسکرول داشته باشد یا خیر.
(Yes/No) toolbar : آیا شامل نوار ابزار باشد.
(Yes/No) status : آیا نوار وضعبت داشته باشد.
(Yes/No) location : آیا نوار آدرس داشته باشد.

 

در رشته ای از خصوصیات نباید هیچ فضای خالی وجود داشته باشد.

 

متد () open  شی اي از نوع window را بر می گرداند که تمام متدها و خاصیت هایی که شی window دارد را داراست.

 

براي بستن پنجره از متد () close استفاده می شود. این متد فقط می تواند پنجره اي که توسط جاوا اسکریپت باز شده است را مستقیما ببندد نه پنجره ي اصلی.

پنجره های System Dialog

شی window چندین تابع براي نمایش پیغام و گرفتن جواب از کاربران را دارد.

 

()alert : این تابع یک آرگومان از نوع متن می گیرد و آن را در قالب یک پنچره کوچک که یک دکمه ok دارد نمایش می دهد:

<scritp type="text/javascript" >
alert('Hello world');
</script>

 

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

()confirm : این تابع هم مانند تابع بالاست. تنها تفاوت این دو وجود یک دکمه Cancel در پنجره ي باز شونده است.

<scritp type="text/javascript" >
confirm('Are you sure ? ') ;
</script>

 

در صورتی که کاربر دکمه Ok را بزند مقدار True و در صورت زدن دکمه ي Cancel مقدار False را بر می گرداند.

()prompt : پنجره ي این متد چهار قسمت دارد. دکمه ي Ok ، دکمه Cancel یک متن و یک کادر متنی براي وارد کردن یک رشته توسط کاربر.

 

این متد دو آرگومان می گیرد:

 

۱. عنوان سوال یا متنی که به کاربر نشان داده می شود.
2. مقدار پیش فرض براي کادر متنی

<scritp type="text/javascript" >
Prompt('what is your name','Michael');
</script>

 

در صورتی که کاربر دکمه ي Ok را بزند تابع مقدار وارد شده در کادر متنی را برمی گرداند و در صورت زدن دکمه ي Cancel مقدار Null را برمی گرداند.

خاصیت statusbar

این قسمت پنجره فرآیند بارگذاری و پایان بارگذاري را به کاربر نشان می دهد. هر چند که می توانیم از دو خاصیت به نام هاي status و defaultStatus براي تغییر آن استفاده کنیم. همانطور که حدس زدید از خاصیت Status براي تغییر متن Statusbar براي چند لحظه استفاده می شود در حالی که از defaultstatus براي تغییر Statusbar تا زمانی که کاربر در صفحه هست استفاده می شود.

 

براي تغییر لحظه اي نوار وضعیت مثلآ وقتی کاربر، ماوس را روي یک لینک قرار می دهد می توان از کد زیر استفاده نمود:

<a href="books.htm" onmouseover="window.status='Information on Wrox
books.'
">Books</a>

 

اجراي مکرر کدها از طریق متدهای Timeouts و Intervals

از این دو تابع براي اجراي یک تکه کد بعد از بازه زمانی خاصی استفاده می شود.

 

setTimeouts : کد گرفته شده را پس از عددي بر حسب میلی ثانیه اجرا می کند. در حالی که Intervals کد گرفته شده را مکررآ بعد از مدتی بر حسب میلی ثانیه چندین بار تکرار می کند. این متد دو آرگومان می گیرد:

 

۱. کدي که باید اجرا شود.
2. مدت زمانی که باید بعد از آن کد اجرا شود.

 

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

<scritp type="text/javascript" >
setTimeout("alert('Hello world!')", 1000);
</script>
----------------------------------------------------------
<scritp type="text/javascript" >
setTimeout(function() { alert("Hello world!"); }, 1000);
</script>
----------------------------------------------------------
<scritp type="text/javascript" >
function sayHelloWorld() {
alert("Hello world!");
}
setTimout(sayHelloWorld, 1000);
</script>

 

براي جلوگیري از اجراي تابع ()setTimeout از متد ()clearTimeout به صورت زیر استفاده می شود:

<scritp type="text/javascript" >
var iTimeoutId = setTimeout("alert('Hello world!')", 1000);
clearTimeout(iTimeoutId);
</script>

 

setIntervals : مانند تابع قبلی است جز اینکه کد گرفته شده را بعد از گذشت بازه ي زمانی مشخص تکرار می کند.

 

براي جلوگیري از اجراي این متد , از تابعی به نام () clearInterval استفاده می شود :

setInterval(“alert(‘Hello world!’) “, ۱۰۰۰);
-----------------------------------------------------
setInterval(function() { alert(“Hello world!”); }, ۱۰۰۰);
-----------------------------------------------------
function sayHelloWorld() {
alert(“Hello world!”);
}
setInterval(sayHelloWorld, 1000);

 

شی history

ممکن است بخواهیم به تاریخچه ي مرورگر دسترسی داشته باشیم. البته هیچ راهی براي دسترسی به آدرس صفحات که در history وجود دارند، نیست. براي این کار از متدها و خاصیت هاي شی history مربوط به شی window استفاده می کنیم :

 

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

window.history.go(-1);

 

و براي رفتن به جلو:

window.history.go(+1);

 

همیچنین می توانیم از متد هاي ()back و ()forward به جای کدهای بالا استفاده کنیم.

//go back one
history.back();
//go forward one
history.forward();

 

همچنین از خاصیت lenght برای تعداد صفحات موجود در history استفاده کنیم:

alert("There are currently " + history.length + " pages in history.");

 

شی document

این شی که تنها شی مشترك بین مدل هاي شی گراي BOM و DOM است داراي خصوصیاتی می باشد.

 

یکی از خاصیت هاي این شی ، URL است که براي تنظیم و دسترسی به آدرس کنونی صفحه استفاده می شود.

document.URL = "http://www.learnparsi.com/";

 

شی document از خاصیتی به نام referrer براي به دست آوردن آدرس صفحه اي که کاربر از آن به صفحه کنونی آمده است استفاده می کند.

 

این شی همچنین خاصیتی به نام title دارد که از آن براي بدست آوردن و حتی تغییر عنوان صفحه استفاده می کند.می توان از این خاصیت خواندنی/نوشتنی براي تغییر عنوان صفحه به صورت پویا نیز استفاده کرد. به عنوان مثال دستور زیر عنوان صفحه جاري را به New Title Page تغییر می دهد:

Document.title = “New Title Page”;

 

همچنین این شی داراي یکسري خصوصیات مجموعه اي براي دسترسی به انواع عناصر داخل صفحه ي بارگذاري شده است. برخی از خاصیت ها به شرح زیر است:

 

anchors : دسترسی به لینک هاي صفحه
embeds : دسترسی به تمامی عناصر embed صفحه
forms : دسترسی به تمامی فرم هاي صفحه
images : دسترسی به تمامی عناصر عکس صفحه
links : دسترسی به تمامی لینک هاي صفحه

 

هر مجموعه می تواند بوسیله ي عدد یا نام ، index گذاري شوند. به این معنی که شما می توانید به صورت زیر به اولین عنصر عکس صفحه دسترسی داشته باشید:

Document.images[0];
Or
Document.images['image-name'] ;

 

با این روش ما می توانیم به آدرس آن ها هم دسترسی داشته باشیم , به صورت زیر:

document.images[0].src

 

از دیگر متدهای این شی می توان به ()write و ()writeln براي چاپ یک متن اشاره کرد.

شی location

یکی دیگر از شی ها براي دسترسی به آدرس صفحه جاري ، location است. ما توسط خاصیت location.href می توانیم براي تنظیم یا بدست آوردن URL استفاده کنیم :

location.href= "http://www.learnparsi.com/";

 

متد () assign هم همین کار را می کند:

Location.assign(“http://www.learnparsi.com”)

 

از متد () reload براي بارگزاری مجدد صفحه استفاده می شود. ما می توانیم تعیین کنیم که بارگزاري مجدد از روي Cache یا Server باشد. این کار با یکی از آرگومان هاي false براي بارگزاري مجدد از Catch و true براي بارگزاري مجدد از Server استفاده می شود. چنانچه آرگومانی ذکر نشود به صورت پیش فرض false در نظر گرفته خواهد شد.

شی navigator

این شی یکی از اشیاي قدیمی مدل شی گراي BOM به شمار می رود. از این شی براي دسترسی و بدست آوردن اطلاعاتی در مورد نوع و نسخه مرورگر استفاده می شود. بعضی از خاصیت هاي آن به شرح زیر است :

 

appcodeName : رشته اي حاوي کد رشته اي مرورگر
appName : نام عمومی مرورگر
appMinotVersion : اطلاعات اضافی مرورگر
appVersion : نسخه مرورگر
browserLanguage : نوع زبان مرورگر یا سیستم عامل
cookieEnabled : مشخص می کند میکند آیا کوکی ها فعال هستند یا خیر
cpuClass : کلاس cpu را مشخص میکند
javaEnabled : فعال بودن جاوا
Language : زبان مرورگر را مشخص میکند
mimeType : آرایه اي از mimetype هاي ثبت شده در مرورگر
Platform : نوع platform ي که کامپیوتر کاربر بر روي آن قرار دارد را مشخص می کند.
userAgent : رشته اي حاوي اطلاعاتی درمورد نوع و نسخه مرورگر و سیستم عامل را نگه داري می کند که می توان از آن براي بازیابی مشخصات دقیق سیستم عامل و مرورگر کار استفاده کرد.

 

مقدار این خاصیت همیشه همراه با هر درخواست توسط مرورگرها فرستاده می شود.

شی screen

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

 

availHeight : ارتفاع قابل دسترس از ویندوز
availWidth : عرض قابل دسترس از ویندوز
colorDepth : تعداد بیت ها براي نمایش رنگ ها
height : ارتفاع صفحه
width : عرض صفحه

 

از دو خاصیت اول می توان براي بدست آوردن سایز جدید پنجره استفاده نمود. به طور مثال براي fullscreen کردن صفحه نمایش می توان از کد زیر استفاده نمود:

 

Window.moveTo(0,0);
Window.resizeTo(screen.availWidth,screen.availHegiht);

 

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