Home   CGS 2820C
  Web Development 		#12 Grading Criteria for:
An Intro to JavaScript (Up to 50 points Extra Credit)
Continue working on your website.

Description: This is an introduction to JavaScript, which is a client side scripting language. On a single, separate page, named js.htm, use an ordered list <ol> or numbered rows in a table or other organizing scheme to number, list and use each of the 8 JavaScript items listed below. All items will be on the same page. You may substitute other completely different JavaScript routines if desired. Your page will include such items as internal JavaScripts, external JavaScripts, alerts, calculations, cursor change, image carousel/slideshow... 

Javascript Tutor, a Quick Summary: JavaScriptOverView.shtm

Short Interactive Tutorials:

W3Schools JS Intro Tutorial:

W3Schools JS Examples:

W3Schools Script Tutorial:

W3Schools document.write:

W3Schools JS Comments Tutorial:

Try It Yourself

Try It Yourself

Try It Yourself

Try It Yourself

Try It Yourself

Use the same masthead, navigation, and stylesheet that you use for the rest of your site - copy an existing page, such as portfolio.htm, delete the content in the <main> section and replace it with the content for this assignment; also update the <title> tag, meta description and <h1>.

This page does NOT have to be part of your navigation, but it must be live on your site. Upload any scripts and js.htm to your website. I recommend you create a scripts folder, similar to the images folder. Then upload the full URL web address to the JavaScript Canvas Assignment Dropbox.

NOTE: If you have converted your site to a WordPress site, upload js.htm to your site and then link to it through a WordPress page.
OR: Just submit the absolute URL address to the Canvas assignment Dropbox. Ex: http://yourDomainName/js.htm

JavaScript is a client-side (on the local computer) scripting language and has a similar look to Java programming and CSS. JavaScript can:
1. Allow Interactivity with the user and the webpage
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
8. And the James Webb Space Telescope is largely controlled by JavaScript files - pre-written scripts for doing specific tasks
Fortunately, you can copy existing scripts from reliable websites like those shown below, or you can allow editors like Dreamweaver 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="scriptName1.js" type="text/javascript"></script>
<script src="scriptName2.js" type="text/javascript"></script>
You will need to call each script one at a time. This is different than a typical CSS page, where all the styles are usually in the same file. You can call the scripts in the <head> tag, but today most scripts are placed just before the closing </body> tag.
 
Multiline comments are just like CSS comments, ex:
/* Multiline comments */
A single-line comment can be designated with two forward slashes, ex:
// a one line JavaScript comment
Just like CSS, JavaScript code blocks are embedded in braces { }

Sample sites with free JavaScript Tutorials and free Scripts

JavaScript Tutor
Dynamicdrive.com/
Hotscripts.com/
Interactive W3Schools JavaScript Tutorial

Make sure you MEET ALL GRADING CRITERIA below.
Topic Directions Points
On a page named js.htm, use an ordered list <ol> or a table with numbered rows to number 8 unique JavaScript items such as those listed below. All items will be on the same page. You can substitute other JavaScript routines, but make sure there are 8 different, unique types of JavaScripts. (p 529-559)
Do NOT do the same script with different words or a different image set.
You can Google Cool or Fun JavaScripts for Web pages.

#1 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.

Use the same personalized banner/masthead in the top row or on the top of the page consistent with the rest of 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 Alert
5 pts

Do not just copy code to left. Modify it and make it relevant to your site.

-10 points if these items are not numbered 1 to 8 (like this sheet is numbered 1 to 8).

#2 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 Alert Button
5 pts

Do not just copy code to left. Modify it and make it relevant to your site.
#3 Use a prompt statement to ask a question and display a relevant answer on your JavaScript 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. 		#3 Prompt
5 pts


Do not just copy code to left. Modify it and make it relevant to your site. (3 pts)

Display a relevant answer. (2 pts)
#4 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>
 #4 doc write and
Last Update
5 pts

#5 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)		 #5 Calculation
10 pts

* Or try another completely different JavaScript routine
#6 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 some images in a special format or special effect.
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 Circling text tail above. This is a demo for class.)
https://hotscripts.com/ 		#6 Internal
Special Effect
10 pts

Find your own Internal JavaScript image routine to use.
#7 Find at least one appropriate External JavaScript routine that you found from the book (p 554-555) or from a free online JavaScript website. It can be an image slideshow, transition, or carousel in the header. 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.		 REQUIRED - an EXTERNAL SCRIPT
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 Rotate Header
<script src="scripts/RotateHeaderFunction.js" type="text/javascript"></script>
JavaScript 3 Month Basic Calendar
<script src="scripts/basiccalendar.js" type="text/javascript"></script>
Concentration
<script src="tiles.js" type="text/javascript"></script> 		#7 External
Image slideshow
10 pts

You MUST use at least one 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.
#8 Find, modify and include a relevant Java Script Pop-Up window (NOT a new page) with message appropriate to your website.

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 Edge, FireFox, Chrome, Safari, and your smartphone.		 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)
 #8
10 pts

Note: This is a PopUp window. It is NOT just a new page. It is JavaScript controlled to set size and position.
Be sure to test your page with FireFox, Chrome and Edge. * Feel free to substitute other JavaScripts routines for one of the above
Be sure to include all 8 numbered routines on the page named js.htm
Upload your js.htm file and your scripts. Then upload the full URL web address to the JavaScript assignment dropbox.
The root folder of your actual local C:\Users\UserName\Documents\My Web Sites\YourDomainName and the pubic_html folder in the 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 also have a file named something like: FormProcess.php for your form action.)
    favicon.ico This is often in the images folder. See Favicon Tutorial and Favicon Generator
    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  
    FormProcess.php Script used to process forms - this file is only on the 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 (You may have multiple external .js files)