HTML Help Forum

Java Script Newbie: HELP

Client-side (i.e. browser) code to create a popup, menu, or other feature.

Java Script Newbie: HELP

Postby ArchGirl2012 » Sun Jul 24, 2011 1:20 pm

I am working on an assignment that involves Java Script, and i have no idea why the web page is not functioning the way it is supposed to. The page is supposed to have a countdown between the brown bars at the top of the page, the scroll bar is supposed to be a different color than the default and there is supposed to be a copyright line at the bottom of the page. I have included all of the code that i have for this assignment below. Any help of suggestions would be much appreciated!
Code: Select all
<!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Oakwood Elementary School</title>
<script type="text/ javascript">
<!--Hide from old browsers
function countDown() {
   var today = new Date ()
   var dayofweek = today.toLocaleString()
   dayLocate = dayofweek.indexOf(" ")
   weekDay = dayofweek.substring(0, dayLocate)
   newDay = dayofweek.substring(dayLocate)
   dateLocate = newDay.indexOf(",")
   monthDate = newDay.substring(0, dateLocate+1)
   yearLocate = dayofweek.indexOf("2012")
   year = dayofweek.substr(yearLocate, 4)
   
   var ColumbusDay = new Date("October 8, 2012")
   var daysToGo = ColumbusDay.getTime()-today.getTime()
   var daysToColumbusDay = Math.ceil(daysToGo/(1000*60*60*24))
   
   display \Date.innerHTML = "<h3>Today is "+weehDay+" "+monthDate+" "year+".  We have "+daysToColumbusDay+" days until Columbus Day.</h3>"
}

function scrollColor() {
   styleObject="document.getElementsByTagName('HTML')[0].style
   styleObject.scrollbarFaceColor="#fbb040"
   styleObject.scrollbarTrackColor="ffe700"
}

function loadInfo(myForm) {
   var menuSelect=myForm.Menu.selectedIndex
   var menuUrl=myForm.Menu.options[menuSelect].value+".html"
   window.location=menuUrl
}

function copyRight() {
   var lastModDate = document.lastModified
   var lastModDate = lastModDate.substring(0,10)
   displayCopyRight.innerHTML = "<h6>The URL of this document is "+document.URL+"<br />Copyright Oakwood Elementary School"+"<br />This document was last modified "+lastModDate+".</h6>"
}

//-->
</script>
<style type="text/css">
.center {
   text-align:center;
    }

table {
   margin-left:15%;
   margin-right:15%;
    }
.cell-width {
   width: 50%;
}
   
.left-align {
   width: 50%;
   left: 0;
   }

.right-align {
   width: 50%;
   right: 0;
   text-align: right;
   }
 
</style>
</head>
<body onload= scrollColor(); countDown(); copyRight()>
<div class="center">
<p><img src="chapter9Oakwood.jpg" alt="oakwood banner" width="750" height="120" /></p>
<p style="font-family:Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold;">OAKWOOD ELEMENTARY SCHOOL</p>
<img src="hrzntlrule.jpg" width="700" height="5" alt="hr" />
<div id="displayDate">
</div>
<img src="hrzntlrule.jpg" width="700" height="5" alt="hr" /> </div>
<table>
  <tr>
    <td colspan="2">
    <p style="font-weight:bold; font-family:Arial, sans-serif; font-size:14pt">Oakwood Village School Board</p>
    <p style="font-family: 'Times New Roman', Times, serif; font-size:12pt">The Oakwood Village School Board will have monthly meetings on the third Tuesday of the month this fall. Meeting days are September 18, October 16, November 19, and December 18, 2012. All meetings will start promptly at 7:30 p.m. and adjourn by 9 p.m. Meeting days for the spring semester will be determined at the December meeting.</p>
    </td>
  </tr>
  <tr>
    <td colspan="2">
    <p style="font-weight:bold; font-family:Arial, sans-serif; font-size:14pt">Morning drop off and afternoon pick up</p>
<p style="font-family: 'Times New Roman', Times, serif; font-size:12pt">Please remember to enter the school drop off area from the south entrance and exit out the north drive way. As always, please watch for children walking to school.</p>
    </td>
  </tr>
  <tr>
    <td colspan="2">
    <p style="font-weight:bold; font-family:Arial, sans-serif; font-size:14pt">Fall Fund Raiser</p>
<p style="font-family: 'Times New Roman', Times, serif; font-size:12pt">This fall, Oakwood Elementary School will have a flea market. We are seeking donations of usable items that can be sold at the flea market. Volunteers are needed to help with setup, sales, and post flea market clean up. Mike's Stop and Shop will serve hot dogs, hamburgers and refreshments.</p>
     </td>
  </tr>
  <tr>
    <td class="right-align"><img src="school-house_left.gif" alt="school" width="160" height="139" /></td>
    <td class="left-align">
          <img src="school-house_right.gif" alt="school" width="160" height="139" />
    </td>
  </tr>
    <tr>
    <td colspan="2">
    <form id="announceMenu" action=" ">
      <p style="font-weight:bolder">
       Select an item from the list to see other current announcements:
         <select name="Menu" onchange= "loadInfo(this. form)">
           <option>Select an information item</option>
           <option href="chapter09fundraiser.html" value="chapter09fundraiser">October Fundraiser</option>
           <option href="chapter09pto.html" value="chapter09pto">October PTO </option>
           <option href="chapter09tests.html" value="chapter09tests">State Achievement Test</option>
         </select>
      </p>
    </form></td>
  </tr>
  <tr>
    <td colspan="2">
    <p style="font-weight:bold; font-family:Arial, sans-serif; font-size:14pt">Attendance Policy:
    <span style="font-family: 'Times New Roman', Times, serif; font-size:8pt">Please call in your child's attendance at 555-555-5555 x2205.</span>
    </p>   
    </td>
  </tr>
</table>
<p></p>
<div id="displayCopyRight">
</div>
</body>
</html>


Thanks!

Edited. Please use the code tags when inserting code in your posts. Mod
ArchGirl2012
 
Posts: 8
Joined: Mon Jul 18, 2011 5:27 pm

Re: Java Script Newbie: HELP

Postby PayneLess Designs » Sun Jul 24, 2011 4:22 pm

Try correcting the Log in or Register to see link. Re-run after each correction as more errors may show up. Where did you get script?

Make sure your document type is in properly. It came out on 3 lines in my editor. Should be:
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Some html errors:
Result: 5 errors / 0 warnings

line 71 column 14 - Error: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified
line 71 column 25 - Error: an attribute value must be a literal unless it contains only name characters
line 71 column 38 - Error: "countDown" is not a member of a group specified for any attribute
line 71 column 51 - Error: "copyRight" is not a member of a group specified for any attribute
line 111 column 15 - Error: there is no attribute "href"


Is the page online at this time? Could use a link to it.
PayneLess Designs
Site Admin
 
Posts: 5662
Joined: Wed Feb 28, 2007 9:19 pm
Location: MS

Re: Java Script Newbie: HELP

Postby ArchGirl2012 » Sun Jul 24, 2011 6:01 pm

Thanks for your speedy reply,

I fixed the document type, and i have tried to validate the site through w3 and the same problems were listed. I guess im just not sure how to fix the problems let alone what they are trying to tell me. I am a true newbie (I just learned what Java Script was today :| ). I would post the link. but this is just an assignment I've been given to learn how to "master the web" so I've just been running it through Notepad++ (it shows up in IE). I really appreciate you and your efforts to help me :)

Thanks!
ArchGirl2012
 
Posts: 8
Joined: Mon Jul 18, 2011 5:27 pm

Re: Java Script Newbie: HELP

Postby PayneLess Designs » Sun Jul 24, 2011 6:22 pm

With a XHTML document type, tags, attributes and many JavaScript code has to be in lowercase. The 3 are in the body tag for the onload. The others with that document type will be in the Javacript code itself for the "h3" and "h6" heading tags.

Where did you get the JavaScript? There are countdown scripts and separate copyright scripts that could be used and would probably work better with that doctype.

Your select menu is not going to jump to the required file as it is constructed incorrectly. maybe try:

Code: Select all

<form action="click">
<p><input type="button" value="Page You Want" onClick="window.open('http://paynelessdesigns.com')"></p>
</form>

<form name="jump1" action="select">
<p>
<select name="MyList" OnChange="location.href=jump1.MyList.options[selectedIndex].value">
<option selected>Please Select...</option>
<option value="index.html">My Home Page</option>
<option value="http://PayneLessDesigns.com/">PayneLessDesigns.com</option>
<option value="http://answers.yahoo.com/">Yahoo!Answers</option>
<option value="http://domain_name.com/">Option Four</option>
<option value="http://domain_name.com/">Option Five</option>
<option value="http://domain_name.com/">Option Six</option>
<option value="http://domain_name.com/">Option Seven</option>
<option value="http://domain_name.com/">Option Eight</option>
<option value="http://domain_name.com/">Option Nine</option>
<option value="http://domain_name.com/">Option Ten</option>
</select>
</p>
</form>


Just insert the items you want like the examples. Those you can write over or remove.
PayneLess Designs
Site Admin
 
Posts: 5662
Joined: Wed Feb 28, 2007 9:19 pm
Location: MS

Re: Java Script Newbie: HELP

Postby ArchGirl2012 » Sun Jul 24, 2011 7:35 pm

some of the code that i have was given to me in the assignment and the rest of it i got from the book im using. i've been following the instructions that i've been given, and it just doesnt work. i'm not sure how much i can deviate from the instructions and examples i've been given (for learning purposes i suppose). Anyway... I included a zipped folder (hopefully) that has all of the files i have for this assignment so that you can see what i'm working on (that may help :) )

Thanks again!
Attachments
makeitright9-1solution.zip
zipped folder with all necessary files :)
(110.97 KiB) Downloaded 129 times
ArchGirl2012
 
Posts: 8
Joined: Mon Jul 18, 2011 5:27 pm

Re: Java Script Newbie: HELP

Postby kanenas » Fri Jul 29, 2011 2:20 pm

As in HTML tags, whitespace isn't significant between the "DOCTYPE" and closing ">" of a Log in or Register to see link. What matters is that there isn't a space between "<!" (the markup declaration open (MDO) delimiter) and "DOCTYPE", just as there isn't supposed to be a space between a tag opener ("<") and tag name in HTML or between the MDO and "--" in Log in or Register to see link. Removing the newlines from it isn't necessary, but neither will it hurt.

Another place to look for error messages (the first thing you should do when something isn't working the way you expect) is to check your browser's error console. In IE 9, the Log in or Register to see link is a part of the Log in or Register to see link. Firefox with Log in or Register to see link installed is a great way to debug web page issues.

The errors on line 71 are because the value for the body's "onload" Log in or Register to see link isn't quoted. Whenever an attribute value contains certain characters (such as whitespace), it must be quoted so the HTML parser can distinguish the value from further attributes (whitespace separates attributes). Even if quotes aren't required, it's recommended to always use them. You have:
Code: Select all
<body onload= scrollColor(); countDown(); copyRight()>

This will be parsed as four attributes: an empty "onload", followed by three named "scrollColor();", "countDown();" and "copyRight()". To be valid HTML, this should be:
Code: Select all
<body onload="scrollColor(); countDown(); copyRight()">

However, this mixes document structure and behavior. In programming, different Log in or Register to see link should be kept as separate as possible to reduce Log in or Register to see link; a similar principle applies to web development. Instead of inline event listener registration, use a JS library (if allowed), such as jQuery. jQuery has Log in or Register to see link event. You don't need to use the standard methods to bind to an Log in or Register to see link; you can call the Log in or Register to see link ("jQuery" or "$") and pass it a function containing the code to execute when the document finishes loading (rather, when the DOM finishes loading; external objects, such as video and images, may not have finished loading).
Code: Select all
$(function() {
    scrollColor();
    countDown();
    copyRight();
})

Simply put this in a script and include it on the page as external JS.

If a library isn't allowed or you want to try it yourself, use your own wrapper around Log in or Register to see link and Log in or Register to see link event listener registration methods.

Code: Select all
var addEventListenerTo, removeEventListenerFrom;

// Note: user agents without DOM or IE event registration aren't supported
if (window.addEventListener) {
    addEventListenerTo = function (target,event,listener,useCapture) {
        target.addEventListener(event,listener,useCapture);
    };

    removeEventListenerFrom = function(target,event,listener,useCapture) {
        target.removeEventListener(event,listener,useCapture);
    };
} elseif (window.attachEvent) {
    function wrapListener(target, listener) {
        return function (evt) {
            // so that 'this' in listener is bound to target
            listener.call(target, evt);
        };
    };

    addEventListenerTo = function (target,event,listener,useCapture) {
        var wrap;
        switch (event) {
        case 'focus':
        case 'blur':
            if (useCapture) {
                // focus & blur don't bubble, so try events that do
                if ('focus' == event) event = 'focusin';
                else event = 'focusout';
            } // FALLTHRU
        default:
            wrap = wrapListener(target, listener);
        }

        if (wrap) {
            target[event+listener] = wrap;
            target.attachEvent('on'+event, wrap);
            // now plug memory leak introduced by attachEvent
            var removeWrap = function (evt) {
                removeEventListenerFrom(target, event, wrap);
                document.detachEvent(removeWrap);
            };
            document.attachEvent('onunload', removeWrap);
        }
    };

    removeEventListenerFrom = function(target,event,listener,useCapture) {
        var wrap = target[event + listener];
        target.detachEvent('on'+event, wrap);
        delete target[event + listener];
    }
}


You'd use the above as:
Code: Select all
addEventListenerTo(document.body, 'load',
    function () {
        scrollColor();
        countDown();
        copyRight();
    }, false)
kanenas
 
Posts: 473
Joined: Tue Dec 14, 2004 5:41 am


Return to Javascript

Who is online

Users browsing this forum: No registered users and 1 guest