lOMoARcPSD|42073050

The Browser Object Model

Energy conservation (Government Polytechnic, Nagpur)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by ?????? ([email protected])
 lOMoARcPSD|42073050

September
MR.SWAMI R.S. {MOBILE NO:- +91-8275265361}
17, 2019

The Browser Object Model (BOM) allows JavaScript to "talk to" the browser.

The Browser Object Model (BOM)

There are no official standards for the Browser Object Model (BOM).

Since modern browsers have implemented (almost) the same methods and properties for
JavaScript interactivity as methods and properties of the BOM.

The Window Object

The window object is supported by all browsers. It represents the browser's window.

All global JavaScript objects, functions, and variables automatically become members of the
window object.

URL
The URL of the page to open in the new window. This argument could be blank.

windowName
A name to be given to the new window. The name can be used to refer this window again.

windowFeatures
A string that determines the various window features to be included in the popup window (like
status bar, address bar etc)

The following code opens a new browser window with standard features.

fullscreen=yes|no|1|0 Whether or not to display the browser in full-screen mode. Default is no. A
window in full-screen mode must also be in theater mode. IE only

height=pixels The height of the window. Min. value is 100

left=pixels The left position of the window. Negative values not allowed

1 |Page
location=yes|no|1|0 Whether or not to display the address field. OperaVonly
APM ALMALA

Downloaded by ?????? ([email protected])

 lOMoARcPSD|42073050

September
MR.SWAMI R.S. {MOBILE NO:- +91-8275265361}
17, 2019

menubar=yes|no|1|0 Whether or not to display the menu bar

resizable=yes|no|1|0 Whether or not the window is resizable. IE only

scrollbars=yes|no|1|0 Whether or not to display scroll bars. IE, Firefox & Opera only

status=yes|no|1|0 Whether or not to add a status bar

titlebar=yes|no|1|0 Whether or not to display the title bar. Ignored unless the calling application is an
HTML Application or a trusted dialog box

toolbar=yes|no|1|0 Whether or not to display the browser toolbar. IE and Firefox only

top=pixels The top position of the window. Negative values not allowed

width=pixels The width of the window. Min. value is 100

Window.close()
This method is used to close the window which are opened by window.open() method.
Syntax:
window.close()

Parameters: This method does not contains any parameter.

Return Value: This method does not return any value.
Below example illustrates the window.open() and window.close() method in jQuery:

2|Page VAPM ALMALA

Downloaded by ?????? ([email protected])

 lOMoARcPSD|42073050

September
MR.SWAMI R.S. {MOBILE NO:- +91-8275265361}
17, 2019

Javascript | Window Blur() and Window Focus() Method

Window.blur() Method
The blur() method is used to remove focus from the current window. i.e, It send the new open
Window to the background.
Syntax:
Window.blur()

Parameter: It does not require any parameters.

Return Value: It does not Return any value.
window.html
Window.focus() Method
The focus() method is used to focus on the new open window. i.e bringing back the blur window
to the foreground.
Syntax:
window.focus()

Parameter: It does not require any parameters.

Return Value: It does not Return any value.
Below example illustrates the window.blur() and window.focus() method in JavaScript:

Javascript | Window prompt() Method

The prompt() method is used to display a dialog with an optional message prompting the user to
input some text. It is often used if the user wants to input a value before entering a page.
It returns a string containing the text entered by the user, or null.
Syntax:
prompt(message, default)

 message is a string of text to display to the user.It can be omitted if there is nothing to
show in the prompt window i.e. it is optional.
 default is a string containing the default value displayed in the text input field. It is also
optional.
prompt.html

3|Page VAPM ALMALA

Downloaded by ?????? ([email protected])

 lOMoARcPSD|42073050

September
MR.SWAMI R.S. {MOBILE NO:- +91-8275265361}
17, 2019

Javascript | Window scrollTo() Method

The Window scrollTo() method is used to scroll to a particular set of coordinates in the
document.
Syntax:
window.scrollTo(x-coord, y-coord)
Parameters: The scrollTo() method accepts two parameters as described below:
 x-coord: It is the pixel along the horizontal axis of the document that is displayed in the
upper left. It is the required field.
 y-coord: It is the pixel along the vertical axis of the document that is displayed in the upper
left. It is the required field.

Note :- //Scrolling the document to position "250"

//horizontally and "110" vertically

ScrollBarDemo.html

ScrollBarDemo2.html

Changing the Contents of Window

By writing some text to the newly created window we can change the contents of a window.

New message using writes write () method.

multiple.html

JavaScript Security

Since its release, there have been several JavaScript security issues that have gained widespread
attention. For one, the way JavaScript interacts with the DOM poses a risk for end users by
enabling malicious actors to deliver scripts over the web and run them on client computers.
There are two measures that can be taken to contain this JavaScript security risk. First is
sandboxing, or running scripts separately so that they can only access certain resources and
perform specific tasks. The second measure is implementing the same origin policy, which
prevents scripts from one site from accessing data that is used by scripts from other sites. Many
JavaScript security vulnerabilities are the result of browser authors failing to take these measures
to contain DOM-based JavaScript security risks.

Common JavaScript Security Vulnerabilities

4|Page VAPM ALMALA

Downloaded by ?????? ([email protected])

 lOMoARcPSD|42073050

September
MR.SWAMI R.S. {MOBILE NO:- +91-8275265361}
17, 2019

One of the most common JavaScript security vulnerabilities is Cross-Site Scripting (XSS).
Cross-Site Scripting vulnerabilities enable attackers to manipulate websites to return malicious
scripts to visitors. These malicious scripts then execute on the client side in a manner determined
by the attacker. XSS vulnerabilities can exist when browser or application authors fail to
implement the same origin policy and can be prevented by following correct development
techniques. If XSS vulnerabilities aren’t remediated, they can result in user data theft, account
tampering, malware spreading or remote control over a user’s browser.
Another common JavaScript security vulnerability is Cross-Site Request Forgery (CSRF). Cross-
Site Request Forgery vulnerabilities allow attackers to manipulate victims’ browsers to take
unintended actions on other sites. This is possible when target sites authenticate requests solely
using cookies and attackers are able to send requests carrying users’ cookies. This JavaScript
security issue can lead to account tampering, data theft, fraud and more. Both Cross-Site
Scripting and Cross-Site Request Forgery vulnerabilities exist in the application layer and require
that correct development techniques are followed in order to be avoided.
There are a variety of other common JavaScript security issues that can increase risks for users.
These issues include improper client-server trust relationships, vulnerabilities in browser and
browser plugin code, and incorrect implementation of sandboxing or same origin policy. And for
Node.js-based server side applications, there may be many other security vulnerabilities,
including SQL Injection, Command Injection, and others. The only way for organizations to
avoid these JavaScript security risks is to develop and source applications that are free of
JavaScript security vulnerabilities. Many organizations use JavaScript security analyzers to test
for and remediate these vulnerabilities.

JavaScript Security Analyzers

JavaScript security analyzers are JavaScript security tools that perform code analysis on client-
side applications. These analyzers can typically test for JavaScript security vulnerabilities, issues
in implementation, configuration errors and other risks that can be exploited by attackers. The
Veracode platform provides JavaScript security analysis through its automated cloud-based
service. Veracode assesses web applications and client-side technologies in a running
environment in order to discover JavaScript security vulnerabilities and other issues.

JavaScript is designed as an open scripting language. It is not intended to replace proper security
measures, and should never be used in place of proper encryption. See also my article
about cross site scripting.

JavaScript has its own security model, but this is not designed to protect the Web site owner or
the data passed between the browser and the server. The security model is designed to protect the
user from malicious Web sites, and as a result, it enforces strict limits on what the page author is

5|Page VAPM ALMALA

Downloaded by ?????? ([email protected])

 lOMoARcPSD|42073050

September
MR.SWAMI R.S. {MOBILE NO:- +91-8275265361}
17, 2019

allowed to do. They may have control over their own page inside the browser, but that is where
their abilities end.

 JavaScripts cannot read or write files on users' computers (File API - not currently supported
by many browsers - allows files to be read by scripts if the user specifically chooses to allow
it), though they can cause the browser to load remote pages and resources like scripts or
images, which the browser may choose to cache locally. They cannot create files on the
server (except by communicating with a server side script that creates files for them). The
only thing they can store on the user's computer are cookies (and Web Storage - similar to
cookies but with more data types - in newer browsers).
 They are allowed to interact with other pages in a frameset, if those frames originate from the
same Web site, but not if they originate from another Web site (the postMessage method
from HTML 5 does safely extend this capability, but I will not cover that here). Some
browsers will even treat different port numbers on the same server as a different Web site.
 JavaScript cannot be used to set the value attribute of a file input, and will not be allowed to
use them to upload files without permission.
 JavaScript cannot read what locations a user has visited by reading them from the location
object, although it can tell the browser to jump back or forward any number of steps through
the browser history. It cannot see what other Web pages the user has open.
 JavaScript cannot access the cookies or variables from other sites.
 It cannot see when the user interacts with other programs, or other parts of the browser
window.
 It cannot open windows out of sight from the user or too small for the user to see, and in
most browsers, it cannot close windows that it did not open.

Some other methods:

 window.open() - open a new window

 window.close() - close the current window
 window.moveTo() - move the current window
 window.resizeTo() - resize the current window

<html>
<body>

<button onclick="openWin()">Open "myWindow"</button>

<button onclick="closeWin()">Close "myWindow"</button>

6|Page VAPM ALMALA

Downloaded by ?????? ([email protected])

 lOMoARcPSD|42073050

September
MR.SWAMI R.S. {MOBILE NO:- +91-8275265361}
17, 2019

<script>
var myWindow;

function openWin() {
myWindow = window.open("", "myWindow", "width=200,height=100");
myWindow.document.write("<p>This is 'myWindow'</p>");
//myWindow.opener.document.write("<p>This is the source window!</p>");
}

function closeWin() {
myWindow.close();
}
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script>
function scrollWindow() {
window.scrollTo(0, 100);
}
</script>
</head>
<body>

<input type="button" onclick="scrollWindow()" value="Scroll" />

<h2>Reserved Words</h2>
<hr>
<p>You cannot use reserved words as variables, labels, or function names:</p>
<hr>
<br>
abstract<br><br>
arguments<br><br>
boolean<br><br>
break<br><br>
byte<br><br>
case<br><br>
catch<br><br>
char<br><br>
class<br><br>
const<br><br>

7|Page VAPM ALMALA

Downloaded by ?????? ([email protected])

 lOMoARcPSD|42073050

September
MR.SWAMI R.S. {MOBILE NO:- +91-8275265361}
17, 2019

continue<br><br>
debugger<br><br>
default<br><br>
delete<br><br>
do<br><br>
double<br><br>
else<br><br>
enum<br><br>
eval<br><br>
export<br><br>
extends<br><br>
false<br><br>
final<br><br>
finally<br><br>
float<br><br>
for<br><br>
function<br><br>
goto<br><br>
if<br><br>
implements<br><br>
import<br><br>
in<br><br>
instanceof<br><br>
int<br><br>
interface<br><br>
let<br><br>
long<br><br>
native<br><br>
new<br><br>
null<br><br>
package<br><br>
private<br><br>
protected<br><br>
public<br><br>
return<br><br>
short<br><br>
static<br><br>
super<br><br>
switch<br><br>
synchronized<br><br>
this<br><br>
throw<br><br>
throws<br><br>
transient<br><br>
true<br><br>
try<br><br>

8|Page VAPM ALMALA

Downloaded by ?????? ([email protected])

 lOMoARcPSD|42073050

September
MR.SWAMI R.S. {MOBILE NO:- +91-8275265361}
17, 2019

typeof<br><br>
var<br><br>
void<br><br>
volatile<br><br>
while<br><br>
with<br><br>
yield<br><br>

</body>
</html>

Timing Events
The window object allows execution of code at specified time intervals.

These time intervals are called timing events.

The two key methods to use with JavaScript are:

 setTimeout(function, milliseconds)
Executes a function, after waiting a specified number of milliseconds.

 setInterval(function, milliseconds)
Same as setTimeout(), but repeats the execution of the function
continuously.

The setTimeout() and setInterval() are both methods of the HTML DOM
Window object.

The setTimeout() Method

window.setTimeout(function, milliseconds);

The window.setTimeout() method can be written without the window prefix.

The first parameter is a function to be executed.

The second parameter indicates the number of milliseconds before execution.

9|Page VAPM ALMALA

Downloaded by ?????? ([email protected])

 lOMoARcPSD|42073050

September
MR.SWAMI R.S. {MOBILE NO:- +91-8275265361}
17, 2019

How to Stop the Execution?

The clearTimeout() method stops the execution of the function specified in
setTimeout().

window.clearTimeout(timeoutVariable)

The window.clearTimeout() method can be written without the window prefix.

The clearTimeout() method uses the variable returned from setTimeout():

myVar = setTimeout(function, milliseconds);

clearTimeout(myVar);

If the function has not already been executed, you can stop the execution by
calling the clearTimeout() method:

Example
Same example as above, but with an added "Stop" button:

<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>

<button onclick="clearTimeout(myVar)">Stop it</button>

The setInterval() Method

The setInterval() method repeats a given function at every given time-
interval.

window.setInterval(function, milliseconds);

The window.setInterval() method can be written without the window prefix.

The first parameter is the function to be executed.

The second parameter indicates the length of the time-interval between each
execution.

This example executes a function called "myTimer" once every second (like a
digital watch).

10 | P a g e VAPM ALMALA

Downloaded by ?????? ([email protected])

 lOMoARcPSD|42073050

September
MR.SWAMI R.S. {MOBILE NO:- +91-8275265361}
17, 2019

Example
Display the current time:

var myVar = setInterval(myTimer, 1000);

function myTimer() {
var d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}

How to Stop the Execution?

The clearInterval() method stops the executions of the function specified in
the setInterval() method.

window.clearInterval(timerVariable)

The window.clearInterval() method can be written without the window

prefix.

The clearInterval() method uses the variable returned from setInterval():

myVar = setInterval(function, milliseconds);

clearInterval(myVar);

Example
Same example as above, but we have added a "Stop time" button:

<p id="demo"></p>

<button onclick="clearInterval(myVar)">Stop time</button>

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

11 | P a g e VAPM ALMALA

Downloaded by ?????? ([email protected])

 lOMoARcPSD|42073050

September
MR.SWAMI R.S. {MOBILE NO:- +91-8275265361}
17, 2019

12 | P a g e VAPM ALMALA

Downloaded by ?????? ([email protected])