1. The JavaScript component:

ECMAscript (Core Standard): Defines basic grammar, such as if for array strings.

2.BOM: Browser Object Model

2. Components of BOM:

1. Each subwindow of a window object corresponds to another window object.
2. screen object
3.location object
4.history object
5.Navigator object
6. Timers (two)
7. Bullet Frame (Three Kinds)
8. document (DOM-Document Object Model)

1.1 window object (representing browser window):

1. All browsers support Windows objects. It represents the browser window.
2. All JavaScript global objects, functions, and variables automatically become members of window s objects.
3. Global variables are attributes of window s objects.
4. Global functions are the methods of window s objects.
5. Even the document of HTML DOM is one of the attributes of window s objects.

1.2 Window Size:

There are three ways to view window sizes for different situations:

1) w3c standard (for browsers other than older version ie)

• window.innerHeight - Internal height of browser window
• window.innerWidth - Internal Width of Browser Window

2) Old version of IE browser
Standard model:
　　document.documentElement.clientHeight)
　　document.documentElement.clientWidth)

In weird mode (backward compatibility):
　　document.body.clientHeight
　　document.body.clientWidth

(How do you know what model it is?

console.log(document.compatMode) can see how documents are parsed
CSS1 Compat Standard Mode
BackCompat weird pattern

)

function getScreen(){    //Get the visual width and height of the screen
            if (window.innerWidth) {    //If window If you have this property underneath, use this.    w3c standard
                return {
                    width : window.innerWidth,
                    height : window.innerHeight
                }
            }else{    //Old version IE
                if(document.compatMode == "CSS1Compat"){   //Standard mode
                    return {
                        width : document.documentElement.clientWidth,
                        height : document.documentElement.clientHeight
                    }
                }else{    //Weird pattern
                    return {
                        width : document.body.clientWidth,
                        height : document.body.clientHeight
                    }
                }    
            }
        }
        console.log(getScreen())

 

1.3 Other Window s Methods

window.open() - Open a new window
window.close() - Close the current window
window.moveTo() - Move the current window
window.resizeTo() - Adjust the size of the current window

 

2.1 screen object (containing information about user screen)

• screen.availWidth - Available screen width
• screen.availHeight - Available screen height

<script>

document.write("Available Width:" + screen.availWidth);
document.write("Available height:" + screen.availHeight);

</script>

 

3.1 location object (used to get the address (URL) of the current page and redirect the browser to a new page)

　　　　　console.log(location.href)    //Returns the entire URL of the current page:
        console.log(location.hash)   //hash      Hash value, also known as anchor point, for example a Links
        console.log(location.host) // host    Set or return the host name and current URL The port number of the.
        console.log(location.hostname) // hostname    Setting or returning to the current URL Host name.
        console.log(location.pathname) // pathname    Setting or returning to the current URL Path section.
        console.log(location.port) // port    Setting or returning to the current URL The port number of the.
        console.log(location.protocol) // protocol    Setting or returning to the current URL The agreement.
        console.log(location.search) // search     Parameter (query string) setting or returning from question mark (?) Beginning URL(Query section).

　　　　// location.href = "http://www.baidu.com"//Put it into an event to trigger

 

4.1 History objects (including browser history)

• history.back() - the same as clicking the back button in the browser
• history.forward() - the same as clicking the button in the browser to move forward

<body>
    <a href="http://www.baidu.com">Go to Baidu</a>
    <button>Back off</button>
    <button>Forward</button>

    <script>
        var btn1 = document.getElementsByTagName("button")[0];
        var btn2 = document.getElementsByTagName("button")[1];


        btn1.onclick = function(){
            history.back()
        }
        btn2.onclick = function(){
            history.forward()
        }
    </script>
</body>

 

5.1 Navigator objects (objects that record some information about browsers)

1. appCodeName returns the browser's code name.
2. appMinorVersion returns the secondary version of the browser.
3. appName returns the name of the browser.
4. appVersion returns the browser's platform and version information.
5. Browser Language returns the language of the current browser.
6. cookieEnabled returns a Boolean value indicating whether cookie s are enabled in the browser.
7. cpuClass returns the CPU level of the browser system.
8. onLine returns a Boolean value indicating whether the system is in offline mode.
9. Platform returns to the operating system platform that runs the browser.
10. System Language returns the default language used by the OS.
11. userAgent returns the value of the user-agent header of the sending server by the client.
12. userLanguage returns the OS's natural language settings.

<div id="example"></div>

<script>

txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";

document.getElementById("example").innerHTML=txt;

</script>

 

 

6.1 PopupAlert object

 

Warning box:

alert("text")

Confirmation box:

confirm("text")

Tip box:

prompt("text","Default value")

 

7.1 Timing object

One-time timer:

setTimeout() executes code at some point in the future;

CleaTimeout () cancels setTimeout();

Infinite Timer:

　　setInterval( );
　　clearInterval();

8.1 cookie (Used to Identify Users)

Examples of cookie s:

Name cookie:

When a visitor first visits a page, he or she may fill in his or her name. Names are stored in cookies. When visitors visit the site again, they receive a welcome message like "Welcome John Doe!". Names are retrieved from cookies.

Password cookie:

When a visitor first visits a page, he or she may fill in his or her password. Passwords can also be stored in cookies. When they visit the site again, the password is retrieved from the cookie.

Date cookie:

When visitors first visit your site, the current date can be stored in cookies. When they visit the website again, they receive a message like "Your last visit was on Tuesday August 11, 2005!". Dates are also retrieved from cookies.