bannermuseum

Many websites contain code you can adapt for your own use. This is called repurposing. If you copy any code be sure to give credit to the source of the code. You can do this as a comment in your HTML code.

Before you add a JavaScript to your HTML, decide whether it should be placed in the body section and/or the head section. Scripts placed in the body section will be executed while the page loads, while scripts in the head section will be executed when called.

Before you copy a JavaScript, look for any restrictions on use. Some websites ask for users to include a link back to the developer's website. Others request that you leave any comments in the code.

You don't need to create JavaScripts from scratch. It's easy to copy a script and repurpose it for your need. Go to the page containing a JavaScript you like. Then, view the Source. Look in both the head and body for scripts. Be sure to copy everything within the script tags. <script> </script>

Many times you don't need to make any changes. If you wish to make a change, be sure to only change parts of the code you understand. For example, if you open the Alert Box page. It displays an alert box as the page loads. You might want to change the message that is displayed in the alert box. Below, I changed the "Welcome to my Web Site" message to "This page is still under construction!".

Copied Script

<script type="text/javascript">
alert('Welcome to my Web Site!');
</script>

Modifed Script

<script type="text/javascript">
alert('This page is still under construction!');
</script>

JavaScripts To Repurpose

Let's examine some JavaScripts you can repurpose.

Passwords

In many environments you may wish to use a simple password system. Check out:

Try the Video page. Notice that it asked for the password. Use the word video to try it out. Then, view the source of the blank password.html page.

Pulldown Menu

Go to Landmark Pulldown Menu to see an example of JavaScript for a pulldown menu.

Slide Show & Virtual Tours

Slide Show with Text. There are many JavaScripts for slide shows. Go to Landmarks Gallery to see a slide show.

Virtual Field Trip with Controls. Here's another way to provide a virtual tour. Visit St. Peter's Church. Let's repurpose this one by copying the JavaScript from the head and the form from the body. Then, simply change the .jpg file names and descriptions. Go to Landmarks Gallery 2 to see the script repurposed.

Slide Show. Here's a third option for a slide show. Go to Landmarks Gallery 3 and view the script.

Tools

JavaScripts can be used to embed tools such as calendars and calculators on your page. Check out:

Try copying the JavaScript from the head and the body and creating your own project. Be sure to give credit! Check out Field Trip Fun as an example.

Tutorials

There are many websites that use JavaScripts to help students learn.

Go to Animal Homes. Think about how you coud modify a school to meet your needs.

You'll want to modify the SCRIPT at the top of the page in the head area by indicating your "correct items" ('a','b','c','d') and the appropriate link page (correct.html or incorrect.html). Also add a note thanking the code developer.

<SCRIPT LANGUAGE="Javascript">
<!--Hide from older browsers.
This code was adapted from Be an Architect page at
http://www.sanford-artedventures.com/play/arch2/a2.html

function check(){
r=new Array('a','b','c','d');
for(i=0;i<r.length;i++){
el = document.theForm.elements['q'+i];
if(r[i]!=el.options[el.selectedIndex].value){
location.href='wrong.html';
return;
}
}
location.href='right.html';
}
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>

Scroll down the code to locate the FORM used for the questions. Notice the values assigned to each possible answer. These values can be changed to meet your needs. We have 4 questions, but you could increase this number by adding "q4", "q5", etc. Be sure to add the "correct answer" to the SCRIPT if you add additional items.

<FORM NAME="theForm" onSubmit="check(); return false;">
<table width="440" border="0" cellpadding="3">
<tr align="center"> <td><img src="hole.jpg" alt="hole"></td>
<td><img src="water.jpg" alt="water"></td>
</tr> <tr align="center">
<td><select name="q0">
<option value="0">This is a home for a </option>
<option value="a">skunk.</option>
<option value="b">fish.</option>
<option value="c">bird.</option>
<option value="d">bear.</option></select>
</td>
<td><select name="q1">
<option value="0">This is a home for a </option>
<option value="a">skunk.</option>
<option value="b">fish.</option>
<option value="c">bird.</option>
<option value="d">bear.</option></select></td></tr>
<tr align="center"> <td><img src="nest.jpg" alt="nest" ></td>
<td><img src="cave.jpg" alt="cave" ></td></tr>
<tr align="center">
<td><select name="q2">
<option value="0">This is a home for a </option>
<option value="a">skunk.</option>
<option value="b">fish.</option>
<option value="c">bird.</option>
<option value="d">bear.</option></select></td>
<td><select name="q3">
<option value="0">This is a home for a </option>
<option value="a">skunk.</option>
<option value="b">fish.</option>
<option value="c">bird.</option>
<option value="d">bear.</option></select></td></tr>
<tr> <td colspan="2" align="center">
<INPUT TYPE="button" VALUE="Am I right?" onClick="check()">
</td>
</tr>
</table>
</form>

| eduscapes | IUPUI Online Courses | Teacher Tap | 42explore | escrapbooking | About Us | Contact Us | ©2006-2011 Annette Lamb and Larry Johnson