C C T B H P N

Lab #4 - JavaScript Lab

This lab focuses on the JavaScript programming language. We will use HTML, CSS, and JavaScript to build resizable page previewer.

Lab Resources - JavaScript:

Nice JavaScript Summary, Eloquent JavaScript - the book
Introduction to the DOM - MDN JavaScript Reference - MDN, JavaScript Reference - w3shools.com javascript-reference.info,

Activities:

Build a resizable web page previewer:
  1. Starting with an empty html file, add html document structure, a heading, and a suitably-placed iframe.
  2. Add hide, minus, and plus buttons just above the iframe, similar to the image-sizer demonstration in class.
  3. Add, to the right of the buttons, a textbox that allows you to enter a page url to preview in the iframe.
  4. Define, and support a default url for the previewer.
  5. You will need to provide some JavaScript to change the src parameter of the iframe.
  6. iframe will allow following links, but sites can block loads into an iframe. w3schools.com does that, for example.
  7. This is an iframe:
  8. The ImageSizer is a good starting point.
Please zip your Lab #4 folder and Submit Lab. Note: just zip, no rar, tar, ...