Browser environment
The browser provides access to a large hierarchy of objects for developers to manipulate. browserenv
Document Object Model (DOM)
document and related objects allow to access contents of the page, modify elements etc. Most interaction with HTML is handled here.
Browser Object Model (BOM)
BOM is a pack of objects that allow to control the browser, e.g change current URL, access frames, do background requests to server with XMLHttpRequest etc. Functions like alert,confirm,prompt also belong BOM, they are provided by the browser.
JavaScript objects and functions
JavaScript itself is a language which gives us access to DOM, BOM and provides objects and functions of its own. JavaScript follows the ECMA-262 standard. The global window object mixes browser window functionality (methods focus(),open() etc) with being a JavaScript global object. That´s why it is both green and red. All browsers are split into different parts (objects) that can be accessed using Javascript. Collectively, these parts are known as the Browser Object Model, or the BOM. At the very top of this browser hierarchy is the Window object. This represents the entire browser, with its toolbars, menus, status bar, the page itself, and a whole lot more besides. Effectively, the Window IS the browser. window.document Allows you to access all your HTML elements. We'll go into more detail about the document object later. window.history Access information about browsing history. This object is of limited use since you can't get at which pages a user has visited, just how many pages are in the browsing history. You can also access the methods history.back, history.forward and history.go. There's not many situations where you want to, though. window.innerHeight and window.innerWidth Gets the height and width of the available space on the page window.screen Gets information about the browser screen. You may think that screen is the same as innerHeight and innerWidth but they are not. As an example, create a new HTML page from your template with SCRIPT tags in the HEAD section. window.navigator Used to gets information about the browser
Window Methods and Events
The Window object also has something called Methods. A method is a chunk of code that does a particular job. window.open window.open("popup.html", "PopUp", "toolbar=no,width=500,height=300"); Here are some more configuration options you can have: left - the left position of the window in pixels top - the top position of the window in pixels height - height of the window's viewing area. Minimun height is 100 pixels width - width of the window viewing area. Minimun width is 100 pixels menubar - gets you the File, Edit, View, etc, menus at the top. toolbar - gets you the standard toolbar: back, forward arrows, etc location - gets you the Address bar, to type web address in scrollbars - gets you scroll horizontal and vertical scroll bars < a href="#" onClick="eAdd()">Link Text Here< /A> The onClick part is something called an event. onChange onClose onKeydown onKeypress onKeyup onLoad onMousedown onMousemove onMouseout onMouseover onMouseup onScroll onSelect onSubmit onUnload The Document is another Window object you can manipulate. It's quite a powerful object as it refers to just about all the elements you can have on a web page (forms, links, images, text, HTML code, etc). This means that you can use Javascript to get at HTML elements, amend them, and add new ones.
up