BOM

មេរៀន​នេះ មាន​ជា​វីដេអូ ។

មេរៀន​ជា​វីដេអូ

ពាក្យពេញ​នៃ BOM គឺ Browser Object Model ។ BOM គឺ​ក្ដោប​ក្ដាប់​អ្វីៗ​គ្រប់​យ៉ាង ដែល​ដំណើរការ​លើ​កម្មវិធី​រុករក​បច្ចុប្បន្ន (រាប់​បញ្ចូល​ទាំង DOM) ដែល​របស់​ទាំងអស់​នោះ ស្ថិត​នៅ​ក្នុង window object ។

Property ឬ Method នៃ window យើង​អាច​ហៅ​បាន ដោយ​មិន​បាច់​សរសេរ window. ។

កម្មវិធី​រុករក

Property មួយ​ចំនួន​នៃ window
Property ផ្ទុក
outerWidth ប្រវែង​ផ្ដេក​នៃ​កម្មវិធី
outerHeight ប្រវែង​បញ្ឈរ​នៃ​កម្មវិធី
innerWidth ប្រវែង​ផ្ដេក​នៃ​កន្លែង​បង្ហាញទំព័រ
innerHeight ប្រវែង​បញ្ឈរ​នៃ​កន្លែង​បង្ហាញទំព័រ
pageXOffset ចម្ងាយ​ដែល​ទំព័រ​បាន​រំកិល​ទៅ​ឆ្វេង​ឬ​ស្ដាំ
pageYOffset ចម្ងាយ​ដែល​ទំព័រ​បាន​រំកិល​ទៅ​លើ​ឬ​ក្រោម
window.onresize = function () {
    document.getElementById("inner-width").innerHTML = innerWidth;
    document.getElementById("outer-width").innerHTML = outerWidth;
    document.querySelector("#inner-height").innerHTML = innerHeight;
    document.querySelector("#outer-height").innerHTML = outerHeight;
}
window.onresize();
window.onscroll = function () {
    document.getElementById("x-offset").innerHTML = pageXOffset;
    document.getElementById("y-offset").innerHTML = pageYOffset;
}
<div>
    innerWidth : <span id="inner-width"></span><br>
    outerWidth : <span id="outer-width"></span><br>
    innerHeight : <span id="inner-height"></span><br>
    outerHeight : <span id="outer-height"></span>
</div>
<div style="position: fixed; text-align: right; right: 50%;">
    <span id="x-offset">0</span> : pageXOffset<br>
    <span id="y-offset">0</span> : pageYOffset
</div>body {
    height: 500vh;
    width: 500vh;
}

អេក្រង់

Property មួយ​ចំនួន​នៃ screen
Propert ផ្ទុក
width ប្រវែង​ផ្ដេក​នៃ​អេក្រង់
height ប្រវែង​បញ្ឈរ​នៃ​អេក្រង់
availWidth ប្រវែង​ផ្ដេក​នៃ​អេក្រង់ (មិន​រាប់​បញ្ចូល taskbar)
availHeight ប្រវែង​បញ្ឈរ​នៃ​អេក្រង់ (មិន​រាប់​បញ្ចូល taskbar)
width.innerHTML = screen.width;
height.innerHTML = screen.height;
document.querySelector("#avail-width").innerHTML = screen.availWidth;
document.querySelector("#avail-height").innerHTML = screen.availHeight;
<div>
    width : <span id="width"></span><br>
    height : <span id="height"></span><br>
    availWidth : <span id="avail-width"></span><br>
    availHeight : <span id="avail-height"></span>
</div>

URL ទំព័រ​បច្ចុប្បន្ន

Property មួយ​ចំនួន​នៃ location
Propert ផ្ទុក
href ទីតាំង​នៃ​ទំព័រ
hostname ឈ្មោះ​នៃ​ទំព័រ
protocol protocol នៃ​ទំព័រ
path path ​នៃ​ទំព័រ
var info = document.createElement("div");

// loop ដើម្បី​ចាប់​យក property ទាំងអស់​នៃ window.location
// for loop ប្រើ​សំរាប់​ចាប់​យក​ឈ្មោះ property ដែល​មាន​នៅ​ក្នុង object មួយ
// ខាងក្រោម​ ឈ្មោះ property ក្នុង​ជុំ​នីមួយៗ ត្រូវ​បាន​តំណាង​ដោយ​អញ្ញាត key
for (var key in location)
    // យើង​បាន​ឈ្មោះ property ហើយ
    // ដើម្បី​បាន​តម្លៃ​តាម​ឈ្មោះ​នោះ យើង​អាច​សរសេរ​ទម្រង់ object[property]
    // typeof ប្រើ​សំរាប់​ប្រើ​អំពី​ប្រភេទ​នៃ​តម្លៃ​មួយ
    if (typeof location[key] != 'function')
        info.innerHTML += key.bold() + ": " + location[key] + "<br>";


var link = document.createElement('div');
link.innerText = "ទៅ​កាន់ Khode Academy";
link.style.cssText = "\
    background: lightblue;\
    padding: .5em;\
    text-align: center;\
    cursor: pointer;\
    font-size: 1.5em;";
link.onclick = function () {
    window.location = "http://www.khode.academy/";
};

document.body.appendChild(info);
document.body.appendChild(link);
ទំព៏រ​ដើម កូដ វីដេអូ បញ្ជី ចែករំលែក បោះពុម្ភ ឡើង​លើ Facebook Google Plus Twitter មតិ ឧបត្ថម្ភ ទំនាក់ទំនង អាជ្ញាប័ណ្ឌ សិទ្ធ​អ្នក​និពន្ធ បិទ Khode Academy មុន បន្ទាប់ ប្ដូរ​ម៉ូត