Js in Web Browser: Window object

Client-Side JavaScript Overview
JS Embedding
JavaScript Execution
Client-Side JavaScript Restrictions
Compatibility

Roadmap

Window Object
Timers
Location
History and Navigator
Windows and Error handling
iFrames

Window object

Timers

var timeoutId = setTimeout(function() {
    alert('5 seconds passed');
}, 5000);

var intervalId = setInterval(function() {
    console.log(new Date());
}, 1000);

clearTimeout(timeoutId);
claerInterval(intervalId);

requestAnimationFrame(callback);

//Non-standard
var immediateID = setImmediate(func, [param1, param2, ...]);

LOCATION

{
    assign: function(),
    hash: "locationInfo",
    host: "developer.mozilla.org",
    hostname:"developer.mozilla.org",
    href: "https://somesite.org/Window/location?v=1#locationInfo",
    origin: "https://somesite.org",
    pathname: "/Window/location",
    port: "",
    protocol: "https:",
    reload: function(),
    replace: function(),
    search:"?v=1"
}

//changing page
location.assign("http://www.anothersite.org"); // or
location = "http://www.anothersite.org";

//reload page
location.reload(true); //or
location.assign(location.href); //or
location.replace(location.href);

history

{
    length: 4,
    pushState: function(),
    replaceState: function(),
    scrollRestoration: "auto",
    state: null
}

history.back();     // equivalent to clicking back button
history.go(-1);     // equivalent to history.back();

Navigator

Error Handling

window.onerror = function(msg, url, line) {
   if (onerror.num++ < onerror.max) {
       alert('ERROR ICCURED: ' + msg + ', at ' + url + ':' + line);
       return true;
   }
};

onerror.max = 3;
onerror.num = 0;

// prefer 
try {
    //code which may cause erorr
} catch (e) {
    //handle error
} finally {
    //perform finallization
}

alert()
prompt()
confirm()

Windows popup and dialog

var windowObjectReference = window.open(strUrl, strWindowName, [strWindowFeatures]);
var result = window.showModalDialog(
          'dialog.html',
          'Dialog Window',
          'dialogwidth: 400px; dialogheight:200px; resizable:no'
        );

Window Properties

<html>
<head>
    <title>
        Window Element Properties
    </title>
</head>
<body>
    <div id="mainTextBlock"> Lorem Ipsum Dolor Sit Amet </div>
    <script type="text/javascript">
        console.log(window.mainTextBlock);
    </script>
</body>
<html>

Frames and iframes

IFRAME RESTRICTION

window == self;
window.top;
window.parent;
window.frames;
window.frames[0].contentWindow;

CONCLUSIOn
Questions?
Proposals

Thank for your attention!

Client-Side JavaScript

Basically there are two main kinds of JavaScript at client-side

JavaScript in Web Documents

JavaScript in Web Application

JavaScript in Web Documents

Serve to enhance user experience
Provide easier data access possibilities
Hiding or revealing content depending on user input
Web Document should designed such way, so if JavaScript is disabled in user browser, it will continue working normally.

JavaScript in Web Application

Used to create web application
Complicated logic developed with using variety of JS APIs, libraries and frameworks
There are no possibilities to develop robust web application without javascript

JS Embedding

Exists few ways of JS embedding in web page:
Inline script, between <script></script> tags
External file import, src attribute of <script> tag
javascript: url
eventHandler properties of html tags, such as <button onclick="alert('clicked!');"/>

JS in External file

<html>
<head>
    <script src="https://code.jquery.com/jquery-2.2.3.js"
            integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4="
	    crossorigin="anonymous">/* JQuery CDN */</script>
		
    <script defer src="app/main.js">/* Main application module import */</script>
    <script async src="app/utils.js">/* Utility functions  */</script>
    <script src="app/body-parser.js">/* Analyzer module  */</script>
</head>
<body>
    <h1>How it's look like</h1>
</body>
</html>

Javascript Execution process

JavaScript has single threaded execution model, but it can be launched asynchronously
JS Launches in two phase: script loading and event-driven phase.
As soon JS is single threaded, it can hang browser, but most of browser can handle that(denial of service attack prevention).
Events launch asynchronously, but only one can run in single moment of time.

TIMELINE

document.readyState == 'loading';

document.readyState == 'interactive';

DOMContentLoaded event fired on Document object

document.readyState == 'complete';

Client-Side JavaScript Restriction

Can't read file system (without requesting access)
Can't change FileUpload value
Can't close windows what doesn't open
Can't open windows without prompting user
Can't read document's data from another domain (Same-Origin Policy, but can be relaxed)

Compatibility and interoperability

Feature Testing

Graded Browser Support

Compat Libraries

Quirks Mode

Browser Testing

Can I Use

IE...

Window Object

By diodredd