|
E
D
P
S
Y
3
8
7
|
TECHNOLOGY MINIWORKSHOP 1:
Adding JavaScript to a Web page
In upcoming assignment 3c, we offer you a variety of ways that you can create on-line evaluation forms to help you and your students evaluate the Web. These ways will vary from technically simple to moderately complex. This miniworkshop is preparation for 3c.
In this miniworkshop, we will explore two interactive variations on a theme:
- a pure-text HTML Web evaluation form -- the "theme"
- the same questions as an interactive JavaScript-enabled form -- variation 1
- the JavaScript-enabled form from (2) using Netscape's "frames" -- variation 2
All you will be doing is personalizing an existing Web page with JavaScript already included. No programming required. But you will have a chance to see what the script looks like and how it is interspersed throughout an HTML document -- kind of like an English text with quotations in Latin mixed in.
So, here are the steps we recommend for this miniworkshop:
- View an evaluation "rubric" that a teacher created last semester to help students evaluate other students' Web pages. The form can be printed out but is not interactive. (Note: these pages contain no JavaScript; it is merely an example of evaluation content elaborated on in the next two steps.)
- View a more interactive version of the rubric above. This page of text-plus-input blanks is an example of JavaScript mixed in with the HTML. Fill in the blanks. The JavaScript automatically adds up the scores to give a total as they are entered, and Javascript creates a second, summary page when the button at the bottom is pressed, which the evaluator can print out or save as a Web page. (If these don't happen, check to see that JavaScript is enabled on your computer, following the instructions from the first part of the "TAPPED IN" instruction sheet from Week 1.)
Now, select Page Source in the Netscape View menu. You can then see the Web page "in its underwear", so to speak: a new gray Netscape window opens showing the underlying HTML script. Keep this window open on your desktop for now. (If you get an error message, check with Tech support.) Browse down the lines till you see <SCRIPT language="javascript">. Everything between that and the next </script> (=end script) is a JavaScript script embedded in the HTML code. Click here for an alternative color-coded version of this Page Source for easier viewing. (It would also be helpful to print out a copy of (1) the evaluation page and (2) the page it created for reference later in this workshop.)
- View a yet more complex interactive version of the rubrics, this time with "frames". This version conveniently offers a Webpage window (frame) at top for the Web page to be evaluated and another frame at bottom for the evaluation form. Enter any URL (with http://) in the bottom field, press TAB (not RETURN), and it will bring up the Web page to be evaluated in the top frame. Fill in the form, press the "Create a summary page" button, and a new window opens with your completed form.
On a "frames" page, each frame has a separate HTML file: use "Page Source" to look at first the script for the bottom frame, then the script for the top frame. You will see an HTML file with Javascript nearly identical to the one in 2 above for the bottom frame; a very short HTML script for the top frame.
- Return to the open "Page Source" window from example 2 above. COPY the entire contents of the file and PASTE into any word-processing application (Simple Text or MS Word). SAVE this file as an .html file on your hard disk. In the JavaScript section after "function writeSummary ()" and the HTML secton after <BODY>, reword the text parts to say what you want, but don't modify the JavaScript or HTML commands, e.g. <INPUT TYPE>. However, feel free to modify the "size=" commands to enlarge the input blanks, if you wish.
Upload (publish) your modified page to the Web as an .html document (here is an example of a revision) and see if adding input works the way you planned. You may likely get small Javascript error windows at first. Just click OK. Often, your new page will still show up. (Hint: change only a line or two in the original at first so as not to get too deeply into trouble.)
We've provided a more detailed - step-by-step - list of instructions for modifying the page, if you need more guidance and are unfamiliar with HTML.
- Submit the URL of your experimental JavaScript evaluation page to CTERBase as assignment 3e. The content or perfection of the coding is not the main point for this lesson; we just want to see you made a good-faith effort.
to Week 3 page
|
