Browser Object Model& Debugging

1. Browser Object Model& Debugging CSc 2320 Fall 2013 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

2. In this chapter • Browser Object Model (BOM) • Debugging

3. 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

4. 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

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

6. 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 location

7. Browser Object Model (BOM) • History • Get it by using window.history • Functions: • history.back() • history.forward() • E.g., • <script> function goBack()  {window.history.back();  } </script>

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

9. Browser Object Model (BOM) • Pop-ups • Alert box • Window. alert(); • Confirm box • Window.confirm(); • E.g., confirm box • Prompt box • Window.prompt (); • E.g., prompt box

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

11. 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

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

13. 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

14. 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

15. 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!

16. 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.