Project 10: Exploring the Window Object Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 2 Objectives Implement status bar properties Use screen properties Move and resize windows

Copyright (c) 2004 Prentice-Hall. All rights reserved. 3 Objectives (continued) Control scrolling Work with frames Redirect users to a frameset

Copyright (c) 2004 Prentice-Hall. All rights reserved. 4 Why Would I Do This? The window object is the highest-level object of the browser’s object model For every browser window we create, an instance of the window object is created You can also:  Resize windows  Move windows  Control the browsers status bar  Manually control scrolling

Copyright (c) 2004 Prentice-Hall. All rights reserved. 5 Visual Summary The screen object represents the user's computer screen Properties of this object can be used to determine the current width and height resolution in pixels of the users computer screen

Copyright (c) 2004 Prentice-Hall. All rights reserved. 6 Visual Summary (continued) In this example, the user is using a resolution of 1024 pixels width by 768 pixels height

Copyright (c) 2004 Prentice-Hall. All rights reserved. 7 Visual Summary (continued) It is difficult to design a page which looks good at any resolution  However, by using screen properties, we can adapt to different resolutions or size browser windows accordingly The resolution of the user's monitor can also be a factor when determining where to place a pop-up window

Copyright (c) 2004 Prentice-Hall. All rights reserved. 8 Visual Summary (continued) A single browser window can contain multiple HTML documents  A frameset is an HTML file which divides the browser window up into sections and displays various HTML files in the sections  A frame is an HTML page, displayed with other HTML pages in a single browser window

Copyright (c) 2004 Prentice-Hall. All rights reserved. 9 Implement Status Bar Properties Most browsers have a status bar which appears in the lower left corner of the browser window

Copyright (c) 2004 Prentice-Hall. All rights reserved. 10 Implement Status Bar Properties (continued) The status bar is designed to add additional usability to Web pages  The term, usability, describes how easy a Web page is to use The status bar enhances usability by giving the user clues as to how the navigation and browser works

Copyright (c) 2004 Prentice-Hall. All rights reserved. 11 Implement Status Bar Properties (continued) HTML:  Does not give the user the ability to change or control aspects of the status bar JavaScript:  Allows developers to manipulate the messages shown in the status bar

Copyright (c) 2004 Prentice-Hall. All rights reserved. 12 Implement Status Bar Properties (continued) Using the status and defaultStatus properties of the window object, developers can manipulate the messages shown in the status bar

Copyright (c) 2004 Prentice-Hall. All rights reserved. 13 Implement Status Bar Properties (continued) The defaultStatus property  The defaultStatus property is used to place text messages within the status bar

Copyright (c) 2004 Prentice-Hall. All rights reserved. 14 Implement Status Bar Properties (continued)  The following line of code places the message "Welcome to our site!" as the default message in the status bar window.defaultStatus="Welcome to our Site";  As you might expect, the property can also be detected and used in our code document.write("The message in the status bar is "+defaultStatus);  By using these two statements together, we get the result in our browser as shown HEREHERE

Copyright (c) 2004 Prentice-Hall. All rights reserved. 15 Implement Status Bar Properties (continued) The status property  This property consists of a string that will be temporarily displayed in the browser's status window  After a brief period, the string in the defaultStatus property will replace this message  This is especially useful when we want to add explanatory copy to a choice the user can make

Copyright (c) 2004 Prentice-Hall. All rights reserved. 16 Implement Status Bar Properties (continued)  Status message can be placed on images or hyperlinks to control the message temporarily, such as when the user moves the mouse over a hyperlink This requires the return keyword to work correctly and event handlers to first trigger, then reset the message.  Example Example

Copyright (c) 2004 Prentice-Hall. All rights reserved. 17 Implement Status Bar Properties (continued) StatusBar.html // this code creates a new date object currentTime=new Date(); document.write(currentTime); <a href="products.html" onmouseover="window.status='Learn About Our Products!';return true" onmouseout="window.status='';"> Products Page

Copyright (c) 2004 Prentice-Hall. All rights reserved. 18 Implement Status Bar Properties (continued) Implement a Default Status Message status.html - demonstrates use of the status properties About Us Page defaultStatus="Welcome to our site!"; A default message will appear in the status bar

Copyright (c) 2004 Prentice-Hall. All rights reserved. 19 Implement Status Bar Properties (continued) Implement a Default Status Message status.html - demonstrates use of the status properties About Us Page While your mouse is over the link, the message should change

Copyright (c) 2004 Prentice-Hall. All rights reserved. 20 Moving and Resizing Windows Various methods in JavaScript allow browser windows to be resized and moved  This allows new possibilities for browser interaction

Copyright (c) 2004 Prentice-Hall. All rights reserved. 21 Moving and Resizing Windows (continued) Window sizes and window locations are measured in pixels  Window locations can by placed by specifying x- coordinates and y-coordinates an x-coordinate represents the number of pixels from the left corner of the screen a y-coordinate represents the number of pixels from the top of the screen. For example, using pseudo-code, we can move a window in the following fashion. moveTo(x-coordinate, y-coordinate);

Copyright (c) 2004 Prentice-Hall. All rights reserved. 22 Moving and Resizing Windows (continued) RESIZEBY()  This method will resize the window by a specific number of pixels  For example, the following statement will make the browser window 15 pixels wider and 10 pixels taller self.resizeBy(15,10);  The following statement would reduce the size by the same number of pixels self.resizeBy(-15,-10);

Copyright (c) 2004 Prentice-Hall. All rights reserved. 23 Moving and Resizing Windows (continued) RESIZETO()  This method allows us to change the browser window to a width and height which we specify  The entire browser window, including toolbars and buttons, will be set to the width and height we specify  The next statement changes the width to 300 and height to 350: self.resizeTo(300,350);

Copyright (c) 2004 Prentice-Hall. All rights reserved. 24 Moving and Resizing Windows (continued) moveBy()  The moveBy() method will allow you to move the current browser window by a specific number of pixels  The following command will move the current browser window by 40 pixels to the right and 35 pixels down from its current position By specifying negative numbers, we can move the browser window left and up self.moveBy(40,35);

Copyright (c) 2004 Prentice-Hall. All rights reserved. 25 Moving and Resizing Windows (continued) moveTo()  This method will move the browser window to a specific spot on the screen  Assuming we wanted to place the current window in the upper left corner of the screen, we could specify: self.moveTo(0,0);

Copyright (c) 2004 Prentice-Hall. All rights reserved. 26 Moving and Resizing Windows (continued) Resize a Window resize.html Make Larger self.resizeTo(250,200); The browser window resize to the 250 pixels wide and 200 pixels high

Copyright (c) 2004 Prentice-Hall. All rights reserved. 27 Moving and Resizing Windows (continued) Resize a Window Incrementally resize.html Make Larger self.resizeTo(250,200); Refresh the file in your browser by choosing View>Refresh The browser window resizes by the 15 pixels wide and 10 pixels high

Copyright (c) 2004 Prentice-Hall. All rights reserved. 28 Moving and Resizing Windows (continued) Using Screen Properties  The screen object: represents the user's computer screen contains useful properties designed to determine information about the screen settings on the client's computer  By using advanced techniques, we can: use JavaScript to determine the size of the client's current screen resolution load a page that looks best at that particular screen size  Example Example

Copyright (c) 2004 Prentice-Hall. All rights reserved. 29 Moving and Resizing Windows (continued) screen.html - demonstrates properties of the screen object document.write("The screen width is " + screen.availWidth+" "); document.write("The screen height is " + screen.availHeight); JavaScript displays the current dimensions of the current screen resolution Using Screen Properties

Copyright (c) 2004 Prentice-Hall. All rights reserved. 30 Controlling Scrolling Web pages have the ability to expand in order to include additional information We can control where the user is scrolled to in the document using the scrollBy() and scrollTo() methods  Both methods allow you to specify where to scroll in terms of width (x-coordinates) and height (y-coordinates): scrollTo(x,y);  Specifically, if we wanted to go 500 pixels down in the document, we could type: scrollTo(0,500);

Copyright (c) 2004 Prentice-Hall. All rights reserved. 31 Controlling Scrolling (continued) The scrollBy() method allows us to change where the user is currently scrolled in the document by moving the current scroll position up or down by a specific number of pixels  If we wanted to scroll the user up 100 pixels, we could type: scrollBy(0,-100);  If we wanted to move them right by 100 pixels, we could type: scrollBy(100,0);

Copyright (c) 2004 Prentice-Hall. All rights reserved. 32 Controlling Scrolling (continued) Controlling Scrolling through JavaScript JavaScript allows to control scrolling

Copyright (c) 2004 Prentice-Hall. All rights reserved. 33 Working with Frames Frames allow web designers to divide up the content area of the browser window into sections and display different Web pages within these areas JavaScript gives us additional power over HTML frames

Copyright (c) 2004 Prentice-Hall. All rights reserved. 34 Working with Frames (continued) HTML Frames Explained  A frameset is an HTML file which only serves the function of dividing up the browser window into sections  The frameset file tells the browser to create frames  A frame is a portion of the browser window which can display an HTML page frame and a frame for the main content area of page

Copyright (c) 2004 Prentice-Hall. All rights reserved. 35 Working with Frames (continued)  The frameset file: tells the browser how much space to use for each frame gives each frame a window name and tells the browser which HTML file to display in each frame  It's important to remember the frameset file loads first then tells the browser which files to load in each frame

Copyright (c) 2004 Prentice-Hall. All rights reserved. 36 Working with Frames (continued) Creating a Frameset  The tag is used to split the browser window into sections  The tag is used to: name the frame area specify which HTML page will be displayed in the are set the properties  Example Example

Copyright (c) 2004 Prentice-Hall. All rights reserved. 37 Working with Frames (continued) <frame name="leftFrame" SCROLLING="YES" NORESIZE SRC="leftNav.html">

Copyright (c) 2004 Prentice-Hall. All rights reserved. 38 Working with Frames (continued)  It is more common on modern Web pages to use frames without borders or scrollbars  Turning off the scrollbars and frame borders gives the page a more professional look but eliminates the visual clues that tell users they are looking at several pages at once this gives designers the ability to create elaborate interfaces from multiple frames which can be aligned to create a seamless appearance  Framesets have a powerful advantage in the ability to separate content from navigation and branding

Copyright (c) 2004 Prentice-Hall. All rights reserved. 39 Working with Frames (continued)  Framesets have a powerful advantage in the ability to separate content from navigation and branding  Frames also have disadvantages related with: printing content viewing the source code in the browser

Copyright (c) 2004 Prentice-Hall. All rights reserved. 40 Working with Frames (continued) Frame attributes:  refer to the properties of the tag  allow us to control various aspects of the frame  are specified in the tag of the frameset file which creates the frame  are also represented with matching properties in JavaScript

Copyright (c) 2004 Prentice-Hall. All rights reserved. 41 Working with Frames (continued)  SRC the SRC attribute is used to specify which HTML page will appear within the frame the SRC tag is written within the tag in the following form. linking a frame to an external URL is often desirable and just requires us to specify an absolute location such as:

Copyright (c) 2004 Prentice-Hall. All rights reserved. 42 Working with Frames (continued)  NAME the NAME attribute is used by JavaScript and HTML to refer to the frame that is created  NORESIZE the NORESIZE attribute is used to keep the end user from being able to move the border between frames and resize the amount of space allocated to each frame.

Copyright (c) 2004 Prentice-Hall. All rights reserved. 43 Working with Frames (continued)  SCROLLING SCROLLING turns scrollbars on or off for the frame if the SCROLLING attribute isn't used, the scrollbars will be activated by the browser if needed the SCROLLING attribute takes a "YES" or "NO" parameter

Copyright (c) 2004 Prentice-Hall. All rights reserved. 44 Working with Frames (continued)  MARGINHEIGHT the MARGINHEIGHT parameter specifies the top and bottom margins of the frame in pixels  MARGINWIDTH the MARGINWIDTH parameter specifies the left and right margins of the frame in pixel

Copyright (c) 2004 Prentice-Hall. All rights reserved. 45 Working with Frames (continued) Creating the Frameset File  It’s a common mistake to try and put the frameset code within the and tags  This is not allowed by most HTML interpreters and will cause your code to not work properly  The frameset code should be placed between the tag and the tag  Example Example

Copyright (c) 2004 Prentice-Hall. All rights reserved. 46 Working with Frames (continued) index.html - frameset file

Copyright (c) 2004 Prentice-Hall. All rights reserved. 47 Working with Frames (continued) Load an HTML Document Into Another Frame  If we specify a target name which doesn't exist, most browsers will open the file in a new browser window  If we don't specify a target name, the new page will appear in the same frame as the hyperlink which opened it

Copyright (c) 2004 Prentice-Hall. All rights reserved. 48 Working with Frames (continued)  HTML has certain pre-defined target names for links to frames: the _blank will open a new browser window when used in the target attribute. the _self qualifier will load the referenced page in place of the current document; this can also be accomplished by leaving off the target attribute. the _parent qualifier will load the window that contained the parent of the current document  Example Example

Copyright (c) 2004 Prentice-Hall. All rights reserved. 49 Working with Frames (continued) leftnav.html This is the leftnav.html page. Content Page 2

Copyright (c) 2004 Prentice-Hall. All rights reserved. 50 Redirecting Users to the Frame Search engines often use "Spiders" or "Bots" which are simply automated programs that explore Web pages, records, any hyperlinks used, and indexes the content of the pages You can use JavaScript's abilities to detect and control the use of frames

Copyright (c) 2004 Prentice-Hall. All rights reserved. 51 Redirecting Users to the Frame (continued) Use a Frame-Redirect Script in your Site  A frame redirect script has the added benefit of keeping users from being able to easily view the source code of individual frame pages  Example Example

Copyright (c) 2004 Prentice-Hall. All rights reserved. 52 Redirecting Users to the Frame (continued) main.html This is the main.html page. if (this.document == top.document) { location.replace("index.html"); }