Browser Object Model& Debugging CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also from W3schools. Edited by Guoliang Liu, Only for Course CSc2320 at GSU CS Department

In this chapter Browser Object Model (BOM) Debugging

Browser Object Model (BOM) BOM ◦ No official standards (DOM has) ◦ Includes:  Global variables  Global functions  DOM  window.document.getElementById("header");  Screen  Location  History  Navigator  Pop-ups  Timing  Cookies

Browser Object Model (BOM) Window ◦ Two properties:  window.innerHeight: the inner height of the browser window  window.innerWidth: the inner width of the browser window ◦ Functions:  window.open() - open a new window  window.close() - close the current window  window.moveTo() -move the current window  window.resizeTo() -resize the current window

Browser Object Model (BOM) Screen ◦ Get it by using window.screen ◦ Properties:  screen.availWidth - available screen width  screen.availHeight - available screen height ◦ E.g.,

Browser Object Model (BOM) Location ◦ Get it by using window.location ◦ Properties:  location.hostname  location.pathname  location.port (80)  location.protocol (http or https)  location.href: return the url ◦ Function:  window.location.assign(): change the locationchange the location

Browser Object Model (BOM) History ◦ Get it by using window.history ◦ Functions:  history.back()  history.forward() ◦ E.g.,  function goBack() { window.history.back(); }

Browser Object Model (BOM) Navigator: ◦ Get it by using window.navigator ◦ Methods:  Depends on browsers and not accurate.  E.g.,  Check the navigator Check the navigator

Browser Object Model (BOM) Pop-ups ◦ Alert box  Window. alert(); ◦ Confirm box  Window.confirm();  E.g., confirm boxconfirm box ◦ Prompt box  Window.prompt ();  E.g., prompt boxprompt box

Browser Object Model (BOM) Timing ◦ The timing functions in animation in last lecture.

Browser Object Model (BOM) Cookies ◦ Get it by using document.cookie ◦ What is cookie and where is it?  Variables store user information  In visitor’s computer

Debugging Common errors ◦ Syntax errors  Compiler never goes through ◦ Runtime errors  E.g., overflow problems ◦ Logic errors  Does not behave as expected

Debugging How to debug? ◦ Tools in browser  Simple tools with debugging in all kinds of browser  IE, Firefox, Chrome and so on.  Plug-ins in Firefox  Firebug  Test in the browser

Debugging How to prevent syntax errors and easily locate the errors. ◦ Make it readable.  Keep your code incident for each block ◦ Use editors with type verification  Eclipse

Debugging Be aware of runtime errors. ◦ Define appropriate data types for variables.  Int, float, double all have their range according to different kinds of languages. ◦ Keep your eye on the static array size, avoid the overflow. Keep your logic strict when you code instead of when you debug. ◦ In your mind, never consider your program job as two parts: edit and debug. ◦ Be aware of polymorphism of functions, scope of variables. ◦ Add brief comments when you program big!

Debugging Output debugging for programmers ◦ Output something in some point of your program. ◦ Spirit: similar with adding breaking point. ◦ Advantages: Divide your code and nail each bug in each part.