Home   CGS 2820C
  Web Development
#11 Grading Criteria for:
An Intro to JavaScript
Continue working on your website.

Description: On a separate page, named js.htm, you will use a table or ordered list or other organizing scheme to number and list each of the 10 JavaScript items listed below. Use the same masthead, navigation, and stylesheet that you use for the rest of your site - copy an exising page, such as portfolio.htm, delete the content in the main div and replace it with the content for this assignment; also update the <title> tag and meta description. You do NOT have to link this page to your site navigation.

Your page will include such items as internal javascripts, external javascripts, alerts, calculations, cursor change, Behaviors which are the Actions an object can perform such as a Swap Image, a Pop-up, or creating a Jump Menu...  You will also get an introduction to JavaScript, which is a client side (on the local computer) scripting language.

Create a JavaScript Demo webpage using a table or Ordered List <ol> or numbered rows in a table showing at least ten unique items numbered 1 to 10. This page does NOT have to be part of your navigation, but it must be live on your site. Upload the URL address to the Angel Assignment dropbox.

JavaScript is a client-side scripting language and has a similar look to Java programming and CSS. JavaScript can:
1. Allow Interactivity
2. Display Pop-up messages to users
3. Perform Calculations and use variables, ex: var Total
4. Perform Validation and use if statements, ex: if (Total >= 100)
5. Work with Event Handlers such as onmouseover, onload, or onclick
6. Produce and preload Roll-over images
7. Work with Cookies
Fortunately, you can copy existing scripts from reliable websites like those shown below, or you can allow Dreamweaver or Expression Web to create the certain scripts for you.

Event: an action such as a key press or mouse click or mouse over (onMouseOver, onclick, onload ...)
JavaScript is Case Sensitive. Almost all commands are in lower case.
Internal JavaScript code is placed inside <script> tags which may be in the <head> or <body>.
External JavaScript files have a .js extension and your HTML file imports or attaches an external .js file just as you can import or attach a .css file to your web page.
For example: <script src="scriptName.js" type="text/javascript"></script>
A single-line comment can be designated with two forward slashes, ex: // a one line JavaScript comment

For sample sites with free JavaScript Tutorials and free script samples see:
JavaScript Tutor
http://www.dynamicdrive.com/
http://jquery.com/
http://hotscripts.com/

JavaScript Videos

Topic Directions Points
Intro to JavaScript
On a separate page, list and number each of the 10 JavaScript items listed below.
Copy one of your existing pages, and rename it js.htm. Delete the main content and add the numbered items below.
You do not have to link this page to your main site navigation, but include your normal masthead, navigation, and css.

Add a relevant JavaScript Alert as a mouseover Hover event

Note: JavaScript is spelled with a capital J and a capital S when referring to its name. However, in code it should be typed all in lower case.

Modify any copied code to make it relevant to your site.

 

Actual Code that you can Copy and Modify:

Do not use the samples below unless you significantly modify them:
<a href="#" onMouseOver= "alert('This is a MouseOver Alert demo')">Hover Here</a>

<a href="javascript: alert ('Alert Message Here');">Alert Message</a>


Actual Results:

   Alert Message   
#1
5 pts

Relevant to your site

-10 points if these items are not numbered 1 to 10.

Add a relevant JavaScript Alert as a Button.

Modify any copied code to make it relevant to your site.

 

Actual Code that you can Copy and Modify:

Do not use the sample below unless you significantly modify them:

<input type="button" onclick="alert('Alert Pop-up Message');" value="More Info" />

Actual Results:

  
#2
5 pts

Relevant to your site

Add at least one or two Interactive JavaScript Graphic Buttons. (Graphic images as opposed to CSS buttons.)
In Expression Web choose: Insert | Interactive Button.
Then choose your style, desired button text, and font.
When you save your file you will be prompted to save the buttons. At this time you can select a button then click [Rename] to give it an appropriate name like homeOff.jpg Also make sure you pay attention to what folder the buttons are placed in.
Top Home

In Dreamweaver, create your own button, (perhaps in Photoshop, Illustrator or with an online button creator) then:
Insert > Image Objects > Roll Over Image
#3
10
Use a prompt statement to ask a question and display a relevant answer.

Use the results of the prompt somewhere on your page. You can modify, but you can NOT use the sample shown at the right.
<script type="text/javascript">
var answer = prompt("I would like to get to know you, please enter your name", "");
document.write("Welcome, " +answer);
</script>


Also Dreamweaver CS5 has some neat JavaScript snippets such as a Close Window Button, Calculators, Conversions, Slideshow, Breadcrumbs...
Directions: Open a new practice page. Click on the Snippets tab of the Files Panel. Drag the desired snippet to the practice page.
#4
10
Insert a Swap Image ( Rollover).  These are examples of Event Behaviors.

See samples below:

House Off

Also see Zoey Rollover
Or you may choose to do a CSS Rollover: #divName {background:url(images
no-repeat; height:100px;...
#divName:hover {background url
Be sure to tell me specifically where the rollover is when you submit your URL in Angel.
Add a Swap Image or Rollover:
To insert a Behavior (in this case a Swap Image / Rollover):
1. In Expression Web, open an existing file
2. Insert an Image
3. Select the Image
4. Click Format | Behaviors and click the [Insert] drop down button on the Behaviors panel to choose Swap Image, and [Browse] to select an alternative image.
5. View the Code to see the JavaScript that was added
6. Preview in a Browser and hover the mouse over the initial image and notice how it is replaced by the swap image

In Dreamweaver: Insert > Image Objects > Rollover Image
#5
10
Insert One of the following Event Behaviors in a correct and appropriate manner consistent with your website:
Change Property
Check Browser
Check Plug-in
Jump Menu
Play Sound: default loads in <body> tag

Add a Behavior such as a Jump Menu.
1. In Expression Web, open an existing file or
2. Click Format | Behaviors and look at options
3. View the Code to see the JavaScript that was added

IE may treat Jump menu items as a PopUp so you may have to click the yellow message to Allow Blocked Content.

#6
10
Add and call at least one other appropriate and relevant Internal JavaScript routine that you found from a free online JavaScript website to display or rotate or transition some images in a special format.
Make sure you add comments in your code to indicate where it came from and what it does.

For instance, visit:
http://www.dynamicdrive.com/ for example: Circling text trail
(Do NOT use the sample above. This is a demo for class.)
http://hotscripts.com/

#7
10

Find at least one appropriate External JavaScript routine that you found from a free online JavaScript website. Save the .js file on your website. Call or attach the external .js file from one of your web pages.

Make sure you add comments in your code to indicate where it came from and what it does.

Make sure you upload the .js file to your website.

Customize the script for your site or to reflect you, just like I have my family pictures for Concentration on the right.
For instance, visit:
http://www.dynamicdrive.com/
http://hotscripts.com/

For sample External JavaScript Files click & view source (do not use the samples below unless you significantly modify them):
JavaScript 3 Month Basic Calendar
<script src="scripts/basiccalendar.js" type="text/javascript"></script>
JavaScript Rotate Header
<script src="scripts/RotateHeaderFunction.js" type="text/javascript"></script>
Concentration
<script src="tiles.js" type="text/javascript"></script> >
#8
20

You must use an external JavaScript. That is link to a separate .js file. This is worth 20 points and it is not optional.


Do not use my samples shown at left.
Include a relevant Java Script Pop-Up window (NOT a new page) with message appropriate to your website from either Dreamweaver or Expression Web Behaviors or from one of the code samples show at right, or from a free JavaScript download site.

A Pop-Up is a new Window with a specific size, not a link to a new web page.

Test on multiple browsers: such as IE, FireFox, Chrome, Safari, Opera.
Actual Code that you can Copy and Modify:

Do NOT use the sample(s) above or below unless you significantly modify them so they no longer resemble what is shown below:

<a href="javascript: var newWin =
window.open('../SamplesJavaScript/Pop-UpMessage.htm', 'popUp', 'height=400, width=580, left=200');">JavaScript Pop-Up</a>

JavaScript Pop-Up  (will vary depending on browser & settings)
#9
20

Note: This is a PopUp window. It is NOT just a new page. It is javascript controlled to set size and position.

Use document.write to add a Last Update message and date to the bottom of your index.htm and Portfolio.htm.
Format the font-size to be smaller than on the rest of the page.
<script type="text/javascript">
  var update = new Date(document.lastModified);
  month=update.getMonth() +1;
  date=update.getDate()
  year=update.getFullYear()
  document.write("Last Updated - " + month +" /" +date+ "/ "+ year)
</script>

#10
10
JavaScript also allows you to do calculations.

Make and link to your page your own Calculation Form relevant to your site. You may modify, but you cannot copy the one below.
Either have more or less calculated items.
Use the Styles and Themes consistent with your Web site.
Simple JavaScript Calculation Form (view source)

#11 Optional
10 Insurance points
(in case you lose points on another item)
The root folder of your actual local (thumb drive or C:\Users\UserName\Documents\My Web Sites\YourDomainName) and remote (webserver) website should look now like this:
 images      [Dir] This is a subFolder - All images except possibly favicon.ico go here 
    contact.htm (Note: Your server will have a file named something like: webformmailer.php for your form action.)
    favicon.ico This is often in the images folder
    index.htm Your Home page (usually must be in lower case)
    newsletter.htm  
    portfolio.htm Your artwork, or books, or items for sale...
    resume.htm  
    webformmailer.php (or gdform.php) Godaddy/Linux Script used to process forms - this file is only on the GoDaddy server
    js.htm Your Javascript page which does not have to be linked to your main menu, but uses same .css
    yourSiteName.css Your external stylesheet
    externalJavaScript.js An external JavaScript file