revision:
There are no official standards for the Browser Object Model (BOM). But, since modern browsers have implemented (almost) the same methods and properties for JavaScript interactivity, it is often referred to as "methods and properties of the BOM".
All global JavaScript objects, functions, and variables automatically become members of the window object.
Global variables are properties of the window object.
Global functions are methods of the window object.
Even the document object (of the HTML DOM) is a property of the window object.
Syntax : window.document.getElementById("header");" === "document.getElementById("header");"
P.S. The browser window (the browser viewport) is NOT including toolbars and scrollbars
closed — checks whether a window has been closed or not and returns true or false.
defaultStatus — sets or returns the default text in the statusbar of a window.
document — returns the document object for the window.
frames — returns all iframe elements in the current window.
history — provides the History object for the window.
innerHeight — the inner height of a window's content area (in pixels).
innerWidth — the inner width of the content area (in pixels).
length — find out the number of framed window elements in the window.
location — returns the location object for the window.
name — sets or returns the name of a window.
navigator — returns the Navigator object for the window.
opener — returns a reference to the window that created the window.
outerHeight — the outer height of a window, including toolbars/scrollbars.
outerWidth — the outer width of a window, including toolbars/scrollbars.
pageXOffset — number of pixels the current document has been scrolled horizontally.
pageYOffset — number of pixels the document has been scrolled vertically.
parent — the parent window of the current window.
screen — returns the Screen object for the window.
screenLeft — the horizontal coordinate of the window (relative to screen).
screenTop — the vertical coordinate of the window.
screenX — same as screenLeft but needed for some browsers.
screenY — same as screenTop but needed for some browsers.
self — returns the current window.
status — sets or returns the text in the statusbar of a window.
top — returns the topmost browser window.
alert() — displays an alert box with a message and an OK button.
blur() — removes focus from the current window.
clearInterval() — clears a timer set with setInterval().
clearTimeout() — clears a timer set with setTimeout().
close() — closes the current window.
confirm() — displays a dialogue box with a message and an "OK" and "Cancel" button.
focus() — sets focus to the current window
moveBy() — moves a window relative to its current position.
moveTo() — moves a window to a specified position.
open() — opens a new browser window.
print() — prints the content of the current window.
prompt() — displays a dialogue box that prompts the visitor for input.
resizeBy() — resizes the window by the specified number of pixels.
scrollBy() — scrolls the document by a specified number of pixels.
scrollTo() — scrolls the document to specified coordinates.
setInterval() — calls a function or evaluates an expression at specified intervals.
setTimeout() — calls a function or evaluates an expression after a specified interval.
stop() — stops the window from loading Screen Properties.
availHeight — returns the height of the screen (excluding the Windows Taskbar).
availWidth — returns the width of the screen (excluding the Windows Taskbar).
colorDepth — returns the bit depth of the color palette for displaying images.
height — the total height of the screen.
pixelDepth — the color resolution of the screen in bits per pixel.
width — the total width of the screen.
<div class="spec">
<a id="t">This is some text.</a>
<select>
<option value="large">Large Text</option>
<option value="initial" selected>Medium Text</option>
<option value="small">Small Text</option>
</select>
</div>
<script>
document.querySelector('select').onchange = function() {
document.querySelector('#t').style.fontSize = this.value;
}
</script>
It can be written without the "window" prefix
screen.width - returns the width of the visitor's screen in pixels.
screen.height - returns the height of the visitor's screen in pixels.
screen.availHeight - returns the height of the visitor's screen, in pixels, minus interface features like the Windows Taskbar
screen.availWidth - returns the width of the visitor's screen, in pixels, minus interface features like the Windows Taskbar
screen.colorDepth- returns the number of bits used to display one color.
screen.pixelDepth - returns the pixel depth of the screen
<div class="spec">
<a id="screen1"></a><br><br>
<a id="screen2"></a><br><br>
<a id="screen3"></a><br><br>
<a id="screen4"></a><br><br>
<a id="screen5"></a><br><br>
<a id="screen6"></a><br><br>
</div>
<script>
document.getElementById("screen1").innerHTML = "screen width is " + screen.width;
document.getElementById("screen2").innerHTML = "screen height is " + screen.height;
document.getElementById("screen3").innerHTML = "available screen height is " + screen.availHeight;
document.getElementById("screen4").innerHTML = "Available screen width is " + screen.availWidth;
document.getElementById("screen5").textContent = "screen color depth: " + screen.colorDepth;
document.getElementById("screen6").innerText = "screen pixel depth: " + screen.pixelDepth;
</script>
It can also be used to redirect the browser to a new page.
The "window.location" object can be written without the window prefix.
window.location.href - returns the href (URL) of the current page.
window.location.hostname - returns the domain name of the web host.
window.location.pathname - returns the path and filename of the current page
window.location.protocol - returns the web protocol used (http: or https:)
window.location.port - returns the number of the internet host port (of the current page).
window.location.assign() loads a new document
<div class="spec">
<a id="screen7"></a><br><br>
<a id="screen8"></a><br><br>
<a id="screen9"></a><br><br>
<a id="screen10"></a><br><br>
<a id="screen11"></a><br><br>
<a id="screen12"></a><br><br>
<input type="button" value="Load new document" onclick="newDoc()">
</div>
<script>
document.getElementById("screen7").innerHTML = "The full URL of this page is : " + window.location.href;
document.getElementById("screen8").innerHTML = "Page hostname is: " + window.location.hostname;
document.getElementById("screen9").innerHTML = "Page path is " + window.location.pathname;
document.getElementById("screen10").innerHTML = "Page protocol is " + window.location.protocol;
document.getElementById("screen11").innerHTML = "The URL port number of the current page is: " + window.location.port;
function newDoc() {
window.location.assign("https://lwitters.com")
}
</script>
It can be written without the window prefix. To protect the privacy of the users, there are limitations to how JavaScript can access this object.
history.back() - same as clicking back in the browser; the method loads the previous URL in the history list.
history.forward() - same as clicking forward in the browser. The method loads the next URL in the history list
<div class="spec">
<a id="screen12"></a><br><br>
<a id="screen13"></a><br><br>
</div>
<script>
function goBack() { window.history.back() }
function goForward() {window.history.forward()}
</script>
It can be written without the window prefix.
navigator.appName - returns the application name of the browser.
P.S. Strange enough, "Netscape" is the application name for IE11, Chrome, Firefox, and Safari.
This property is removed (deprecated) in the latest web standard.
navigator.appCodeName - returns the application code name of the browser.
P.S.Do not rely on it! "Mozilla" is the application code name for Chrome, Firefox, IE, Safari, and Opera.
This property is removed (deprecated) in the latest web standard.
navigator.cookieEnabled - returns true if cookies are enabled, otherwise false.
navigator.product - returns the product name of the browser engine.
P.S.Do not rely on it! Most browsers returns "Gecko" as product name!
This property is removed (deprecated) in the latest web standard.
navigator.appVersion - returns version information about the browser.
navigator.userAgent - returns the user-agent header sent by the browser to the server.
navigator.platform - returns the browser platform (operating system).
navigator.language - returns the browser's language.
navigator.onLine - returns true if the browser is online.
navigator.javaEnabled() - returns true if Java is enabled.
<div class="spec">
<a id="screen15"></a><br><br>
<a id="screen16"></a><br><br>
<a id="screen17"></a><br><br>
<a id="screen18"></a><br><br>
<a id="screen19"></a><br><br>
<a id="screen20"></a><br><br>
<a id="screen21"></a><br><br>
<a id="screen22"></a><br><br>
<a id="screen23"></a><br><br>
<a id="screen24"></a><br><br>
</div>
<script>
document.getElementById("screen15").innerHTML = "navigator.appName is " + navigator.appName;
document.getElementById("screen16").innerHTML = "navigator.appCodeName is " + navigator.appCodeName;
document.getElementById("screen17").innerHTML = "navigator.cookieEnabled is " + navigator.cookieEnabled;
document.getElementById("screen18").innerHTML = "navigator.product is " + navigator.product;
document.getElementById("screen19").innerHTML = navigator.appVersion;
document.getElementById("screen20").innerHTML = navigator.userAgent;
document.getElementById("screen21").innerHTML = navigator.platform;
document.getElementById("screen22").innerHTML = "navigator language is " + navigator.language;
document.getElementById("screen23").innerHTML = "navigator.onLine is " + navigator.onLine;
document.getElementById("screen24").innerHTML = "javaEnabled is " + navigator.javaEnabled();
</script>
When an alert box pops up, the user will have to click "OK" to proceed.
Syntax: window.alert("sometext") or alert("sometext");
examples
<div class="spec">
<button onclick="screenFunction()">Try it</button>
</div>
<script>
function screenFunction() {
alert("I am an alert box!");
}
</script>
When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed. If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.
Syntax: window.confirm("sometext") or confirm("sometext");
examples
<div class="spec">
<button onclick="screenFunction2()">Try it</button>
<p id="screen25"></p>
</div>
<script>
function screenFunction2() {
var txt;
if (confirm("Press a button!")) {
txt = "You pressed OK!";
} else {
txt = "You pressed Cancel!";
}
document.getElementById("screen25").innerHTML = txt;
}
</script>
When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value. If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.
Syntax: window.prompt("sometext", "defaultText") or confirm("sometext", "defaultText");
examples
<div class="spec">
<button onclick="screenFunction3()">Try it</button>
<p id="screen26"></p>
</div>
<script>
function screenFunction3() {
let text;
let person = prompt("Please enter your name:", "Harry Potter");
if (person == null || person == "") {
text = "User cancelled the prompt.";
} else {
text = "Hello " + person + "! How are you today?";
}
document.getElementById("screen26").innerHTML = text;
}
</script>
When a web server has sent a web page to a browser, the connection is shut down, and the server forgets everything about the user. Cookies were invented to solve the problem "how to remember information about the user". When a user visits a web page, his/her name can be stored in a cookie. Next time the user visits the page, the cookie "remembers" his/her name. Cookies are saved in name-value pairs like: username = John Doe.
When a browser requests a web page from a server, cookies belonging to the page are added to the request. This way the server gets the necessary data to "remember" information about users.
With JavaScript, a cookie can be created like this : document.cookie = "username=John Doe";
You can also add an expiry date (in UTC time).
By default, the cookie is deleted when the browser is closed: document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";
By default, the cookie belongs to the current page: document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
function sayHi() {
alert("Hello");
}
// global functions are methods of the global object:
window.sayHi();
alert(window.innerHeight); // inner window height
alert(location.href); // shows current URL
if (confirm("Go to Wikipedia?")) {
location.href = "https://wikipedia.org"; // redirect the browser to another URL
}