JavaScript Exercises 1

Introduction and DOM

I have been persistent in encouraging you to think of your browser as a tool and to use the most suitable tool, currently this is Firefox (or some other Mozilla browser). Firefox has inbuilt debugging facilities which can help you to get to grips with JavaScript programming (and help with other stuff too).

The first Firefox tool to look at is Tools -> Web Developer -> Error Console. Newer Firefox browsers may (annoyingly) require you to install this as an add-on. You may need to try Tools -> Web Developer -> Web Console and select the JavaScript panel instead. These can quickly guide you to the source of any errors on your page. If you want more, then look at the inbuilt Firebug debugger (F12 or the bug icon in the bottom right of your browser or Tools -> Web Developer -> Firebug). This also has an error console. If this is not powerful enough for you (it should be fine at this stage) then you can install Venkman, a full-featured JavaScript debugger.

1. Create a page that uses JavaScript to display a different heading depending on the day of the week. On Monday it'll be headed "Monday's page" etc.
    
2. Amend the above page so that it has a different background colour for morning and afternoon (use the getHours method of the Date object) and assign the appropriate colour to the backgroundColor property of the style attribute of a page element (any page element).
   • JavaScript style properties
      
3. Create a page containing a form with two text boxes and a button (type="button"). When the button is clicked (onClick event) numeric values entered by the user in the text boxes should be added together and the result displayed via alert().
    
4. Visit JavaScript Guide (and maybe also JavaScript Reference) and answer the following questions:
   • What would be the result of the following two statements and why?
     • "37" - 7
     • "37" + 7
   • How many JavaScript event handlers are listed?
   • Which is the one that is triggered when an error occurs loading an image or document?
   • What does the special "for...in" form of the for loop do?
      
5. Read the article JavaScript: Why You Don't Know More About It).by Steve Champeon
   • What are the main reasons Champeon identifies that have held back the use of JavaScript by serious web developers?
      
6. In what way have environments such as Dreamweaver increased the amount of JavaScript on the web?
    
7. What are JavaScript obfuscators and why do some developers use them?
    
8. How can you view a file included in a page by <script src="...">
    
9. Are you convinced by Champeon's arguments in favour of the value of learning JavaScript?
    

. .