JavaScript: Browser Integration BOM

◄Page 9►

Browser Integration BOM

1: JavaScript Introduction, Constants 2: Let, Hoisting, Good Practices 3: Feature Range 4: Asynchronous Downloads 5: Change Content, Loops, Statements, Identifiers 6: Data Types 7: Template Literals, Promises, Closures, Arrow Functions 7a: Simple Module Example 8: Logic: Bitwise & Triple Equals Operators 9: Browser Integration BOM 10: Document Object Model DOM 10a: JavaScript: SSE PHP 11: Objects, Destructuring Assignment 12: Prototypes and Inheritance 13: Web Workers 14: Exception Handling 15: Network Requests 16: Code Quality 17: Classes 18: Strings & Arrays 19: Advanced Array Methods 20: JSON 21: Client-Server with JSON, PHP & MySQL 21a: JavaScript, JSON, MySQL: South Dakota Animals 21b: JSON Server - One Animal 21c: JSON with MySQL 22: Trailing Commas 23: Regular Expressions 24: Asynchronous Iteration 25: Exponentiation Operator 26: Default & Rest Parameters 27: Shared Memory 28: Object Entries, Values, Enhanced Properties 29: Spread Operator, Extended Literals 30: Maps & Sets 31: Iterables, Internationalization, Meta Programming 32: Summary BOM Browser Object Model DOM Document Object Model

Introduction

JavaScript browser integration combines HTML Web page elements with JavaScript scripted programming. Web page elements display to the Web browser window. JavaScript programming reacts to, or modifies, Web page elements dynamically. In other words, JavaScript browser integration allows JavaScript script to interact with HTML markup. Learn Browser Object Model(BOM) methods and properties on this page, including document methods, window methods, window properties and screen properties.

Browser Integration

Developers may use both the Browser Object Model (BOM) and the Document Object Model (DOM). BOM doesn't include standardized features, however most browsers apply similar BOM properties and methods. Learn about the DOM, on the next page. Learn about the BOM here.

Browser Object Model (BOM)

The BOM includes window, screen, history, navigator, timing and document.

Global Methods & Properties

Global JavaScript properties and methods are always available. Their parent object is the browser window. Therefore global methods and properties belong to the window object.

Global Methods

Global methods include decodeURI(), decodeURIComponent(), encodeURI(), encodeURIComponent(), escape(), unescape(), isFinite(), isNaN(), Number(),String() parseFloat(), parseInt() and eval().

See the source code at global.js.

Tap a Box: Methods to Encode & Decode

encodeURI() converts spaces to 20%. decodeURI() converts 20% back to spaces. The following characters are not encoded A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #.

Methods escape() and unescape() are deprecated. Use methods encodeURI(), encodeURIComponent(), decodeURI() and decodeURIComponent().

'https://code.7Thunders.biz?type=bison&location=south%20dakota'

function decodeU(s){
let decU = document.getElementById('decU');
let uri = s
decU.innerHTML = "<pre>"+decodeURI(uri)+"</pre>";
}

'https%3A%2F%2Fcode.7Thunders.biz%3Ftype%3Dbison%26location%3Dsouth%20dakota'

function decodeUC(s){
let decUC = document.getElementById('decUC');
let uri = s;
decUC.innerHTML = "<pre>"+decodeURIComponent(uri)+"</pre>";
}

Tap a Box: Methods to Encode & Decode for POST & GET

encodeURIComponent() converts special characters for use with POST and GET methods. decodeURIComponent() reverts POST and GET conversions to special characters. Special characters include, , / ? : @ & = + $ #.

Methods escape() and unescape() are deprecated. Use methods encodeURI(), encodeURIComponent(), decodeURI() and decodeURIComponent().

'https://code.7Thunders.biz?type=bison&location=south dakota'

function encodeU(s){
let encU = document.getElementById('encU');
let uri = s;
encU.innerHTML = "<pre>"+encodeURI(uri)+"</pre>";
}

'https://code.7Thunders.biz?type=bison&location=south dakota'

function encodeUC(s){
let encUC = document.getElementById('encUC');
let uri = s;
encUC.innerHTML = "<pre>"+encodeURIComponent(uri)+"</pre>";
}

Tap a Box: Methods isFinite, isNaN

isFinite() returns true for all valid numbers and false for Infinity, -Infinity, NaN.

Tap a Box: Types Number, String

Method Number() converts strings, booleans, dates, integers and floats to Number if possible.

Method String() converts values to String if possible.

Preparation Issue

The input fields, below, must terminate with a forward slash. Otherwise they input incorrect values. Yet img, br and hr don't require forward slash termination.

Tap a Box: Methods parseFloat, parseInt

Method parseFloat() converts a string to a floating point number. Method parseInt() converts a string, which represents a floating point number, to an integer. Method parseInt() truncates the digits after the decimal point.

parseFloat(String('88.5'))

parseInt(String('88.7'))

Method eval

Method eval() is a security risk because it executes values from a string. Method eval() proceses expressions, a statement or series of statements. If you use eval(), pass a JavaScript expression such as, 5 + 2, statement such as, if (1 != 2) n = 3; or series of statements such as, var n = 2; n = n * n;.

Global Properties

Global properties include Infinity, NaN and undefined.

Tap a Box: Properties Infinity, NaN, undefined

Infinity represents numbers which surpass the numerical limit in JavaScript

Infinity

In JavaScript Number(1.8E+2) represents 1.8 * 102 which equals 180. However Number(1.8E+309) represents 1.8 * 10309 which surpasses the maximum JavaScript numerical value, and therefore returns Infinity.

The maximum JavaScript value is 1.79E+308 which is a little less than 2^1024, or 2¹⁰²⁴. Any value beyond that equals Infinity.

undefined

An unassigned variable is undefined.

Math.pow(2,1024);

Math.pow(2,8);

Number("a")

var n;

Number(3)

var n = 7;

BOM Document Methods

document includes the cookie property, which you can read, write and delete.

Declare cookies with developer defined name=value pairs. You can also include browser defined names, expires, path with user defined values; expires = >Date< name value pair, path = >/"<

BOM Document Cookie Methods

BOM Create a Cookie

Read a Cookie

Cookies return in a string with name = value pairs.

Change a Cookie

Cookies return in a string with name = value pairs.

Delete a Cookie

Assign a past date to the expires value, to delete a cookie.

Document.Cookie: Tap a Box

BOM Window Methods & Properties

All global JavaScript variables and functions default as part of the window. The DOM itself is part of the window.

Window properties include innerWidth, innerHeight, history, navigator, location, screen. Window methods include alert(), confirm(), prompt(), open(),close(),moveTo(), resizeTo(), setTimeout, setInterval(), clearTimeOut(), .

Window.innerWidth & innerHeight: Tap a Box

Tap either box, resize the window, then tap the box again. The window's inner width or height should change.

BOM Window Methods

Window methods include alert(), confirm(), prompt(), open(),close(),moveTo(), resizeTo(), setTimeout(), setInterval(), clearTimeOut(), .

BOM Window Timer Methods

Tap a box below to assign a timer, stop a timer, assign a timed interval and stop the timed interval. Timer implementation is in timeout.js.

Window Set and Stop Timers: Tap a Box

BOM Window Output Methods

See window.js for implementation.

Tap a Box: Window Output Methods

Select alert(), confirm() and prompt() to see three built in popup dialogs.

Window popup dialogs display information to the user. The alert dialog simply pops up with a message. The confirm dialog captures the user's response. The response is either OK or Cancel. The prompt dialog captures user specific input information.

Window Popup Methods

Select the open() box to popup a small window with the first page of this tutorial. Resize your current window, this page, if you don't see the new small window.

Then select moveTo(0,0) to move the window to the upper right hand corner. Then select resize(300,300) to slightly change the window's dimensions. Then select scrollTo(0,128) multiple times. Each time you select scrollTo(0,128), the window scrolls down another 128 pixels.

function responseConfirm() {

var bconf = document.getElementById('bconf');

if (confirm("Press a button!")) {
bconf.innerHTML = "You pressed OK!";
} 

else {
bconf.innerHTML = "You Canceled!";
}
}

function responsePrompt(){
var bconf = document.getElementById('bprompt');

let animal = prompt("Enter your favorite animal.", "Coatimundi");

if (animal == null || animal == "") {
bconf.innerHTML = "You cancelled the prompt.";
} 

else {
bconf.innerHTML = "Your favorite animal is a "+animal+".";
}
}

function winClose() {

if(win != null){
win.close();	
dclose.innerHTML = "Window closed.";
}

else{
dclose.innerHTML = "Select open() first."
}

}

function winOpen() {

win = window.open("" +
"javascript.php", 
"_blank", 
"width=256, " +
"height=256"
);	

dopen.innerHTML = "Window opened.";
}

alert('Hello World')

win.moveTo(0,0);

win.resizeTo(300, 300);

win.scrollBy(0,128);

BOM Window History

window.history includes methods back() and forward().

Window.History: Tap a Box

If this browser window was opened directly from a bookmark, then neighther back() nor forward() are defined. However if you move forward a few pages and back a few pages, you should have some history to review here.

BOM Window Navigator

window.navigator includes properties appName, appCodeName, platform, cookieEnabled, product, userAgent, language and onLine. window.navigator methods include javaEnabled()

Window.Navigator: Tap a Box

BOM Window Location

window.location includes the following five properties, href, hostname, pathname, protocol, port and one method, assign().

Window.Location: Tap a Box

See the full URL of this page and the name of the host.

Window.PathName & Protocol: Tap a Box

See the Web protocol and path of this page's URL.

Window.Port & Host: Tap a Box

See this Internet host port. Tap the yellow box to return to the introduction book mark on this page.

BOM Screen Properties

Screen properties include screen.width, screen.height, screen.availWidth, screen.availHeight, screen.colorDepth and screen.pixelDepth.

BOM Screen Available Width & Height

Properties availWidth & availHeight provide the window dimensions. In other words, the values returned won't include your device's navigation bars and buttons.

Window.Screen: Tap a Box

The dimensions below do not seem to change when resizing a browser window. Try rotating a mobile device, as well. The height and depth tell us the maximum number of pixels available, not including a device's required navigation elements.

BOM Screen Color Depth

Current devices display 24 bit (16,777,216 colors) or 32 bit (4,294,967,296 colors) resolution. Older devices display 16 bit (65,536 colors) resolution, often called true colors. Inexpensive and extremely old devices display just 256 colors.

BOM Screen Pixel Depth

As far as I can tell, at this point in time, pixelDepth and colorDepth return the same values. I'll update this section as I gain new information.

Window.Screen: Color & Pixel Depth: Tap a Box

Summary

JavaScript browser integration combines HTML Web page elements with JavaScript scripted programming. Web page elements display to the Web browser window. JavaScript programming reacts to, or modifies, Web page elements dynamically. In other words, JavaScript browser integration allows JavaScript script to interact with HTML markup. You learned Browser Object Model(BOM) methods and properties on this page, including document methods, window methods, window properties and screen properties.

Learn JavaScript

JavaScript's the foundation of Web developer and Website design skills. This free and unique JavaScript tutorial includes some new or seldom used, but useful features.

Tags