The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Vague javascript homework, write in value of a function with javascript scripting Element
robertimusprime
post May 13 2011, 11:30 PM
Post #1





Group: Members
Posts: 7
Joined: 26-March 11
Member No.: 14,210
Hello to you Html help forum users, I have recently started on the final & vaguest chapter of my html textbook, javascript.
The book asks me to "replace the date/time value January 1, 2011, 12:00 a.m. with a script element that writes the value of
the timeStr value to your web page." The chapter basically only goes over the document.write method, a basic function,
proper syntax, a little bit of variables, & comments, so I have no clue how to solve this.

QUOTE
Supporting files: datetime.js, mask.gif, sky0.jpg - sky23.jpg, skyweb.css,
-->

<title>SkyWeb: The Planisphere</title>
<link href="skyweb.css" rel="stylesheet" type="text/css" />

<script src="datetime.js" type="text/javascript"></script>

<script type="text/javascript">
/*
timeStr is a text string containing the current date and time
mapNum is the number of the map to display in the planisphere
*/

var timeStr = showDateTime();
var mapNum = getMap();

</script>
</head>

<body>
<div id="pageContent">

<div id="logo">
<img src="skyweb.jpg" alt="SkyWeb" />
</div>

<div id="maps">
<script type="text/javascript">
document.write(<img id='sky' src='mapNum.jpg' alt='' />)
</script>
<img id="mask" src="mask.gif" alt="" />
<div id="datetime">
January 1, 2011, 12:00 am
</div>

here is the javascript sheet
QUOTE

function showDateTime() {
var thisDate = new Date();
var thisWDay=thisDate.getDay();
var thisDay=thisDate.getDate();
var thisMonth=thisDate.getMonth();
var thisYear=thisDate.getFullYear();
var mName = new Array("January", "February", "March", "April", "May",
"June", "July", "August", "September", "October","November", "December");
var hours=thisDate.getHours();
var minutes=thisDate.getMinutes();
ampm = hours >=12 ? " pm" : " am";
hours = hours > 12 ? hours-12 : hours;
minutes = minutes < 10 ? "0"+minutes : minutes;
return mName[thisMonth]+" "+thisDay+", "+thisYear + ", " + hours + ":" + minutes + ampm;
}

function getMap() {
thisTime = new Date();
hour = thisTime.getHours();
month = thisTime.getMonth();
mapNumber = (month*2+hour)%24;
return mapNumber;
}


This post has been edited by robertimusprime: May 13 2011, 11:33 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 14 2011, 06:45 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,733
Joined: 9-August 06
Member No.: 6
The script has gotten the time stamp into the variable timeStr so all you need to do is document-write it at the spot you want it to occur.

HTML
<div id="datetime">
<script type="text/javascript">
document.write(timeStr);
</script>
</div>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
robertimusprime
post May 14 2011, 11:49 AM
Post #3





Group: Members
Posts: 7
Joined: 26-March 11
Member No.: 14,210
QUOTE(pandy @ May 14 2011, 06:45 AM) *

The script has gotten the time stamp into the variable timeStr so all you need to do is document-write it at the spot you want it to occur.

HTML
<div id="datetime">
<script type="text/javascript">
document.write(timeStr);
</script>
</div>


yep, that was the problem. didn't work the first time I tried.I have another problem that I thought was connected to the
first problem. the book asks me to declare: a variable named timeStr equal to the value of the showDateTime() function, a variable
named mapNum equal to the value of the getMap() function, & replace the line <img id="sky" src="sky0.jpg" alt="" />
with a script element that writes <img id='sky' src='mapNum.jpg' alt=' '/>

So I put:
QUOTE

<script type="text/javascript">
/*
timeStr is a text string containing the current date and time
mapNum is the number of the map to display in the planisphere
*/

var timeStr = showDateTime() ;
var mapNum = getMap() ;

</script>

and:
QUOTE

<div id="maps">
<script type="text/javascript">
document.write(<img id='sky' src='mapNum.jpg' alt='' />)
</script>

but it doesn't work, what should I do?

This post has been edited by robertimusprime: May 14 2011, 12:01 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 14 2011, 12:22 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,733
Joined: 9-August 06
Member No.: 6
In JavaScript strings need to be quoted while variable names and numbers should not be quoted. Since what you want to write out consists of both string parts (the HTML) and a variable name, you need to concatenate several bits so you can quote what should be quoted without also quoting the variable name. You do that with the + sign. Also, the slash needs to be escaped with a backslash and you should end the statement with semicolon.

CODE
document.write('<img id="sky" src="' + mapNum + '<img id="sky" src="' );


See how it works? Within the parenthesis you now have this string (quoted)
CODE
'<img id="sky" src="'

plus the variable (not quoted)
CODE
mapNum

plus this string (quoted).
CODE
'<img id="sky" src="'


Quotes in the string you want to write out can mess things up. JavaScript will see the first matching quote as the end of the string. I got around that by using single quotes for the JS bits and double quotes where quotes are needed in the html that is to be written out. An alternative is to escape the HTML quotes (again with the escape character backslash). If you don't know, escaping a character simply means JS will see it as a literal character and won't give it any special meaning. To play it safe I've taken to always escape quotes in strings. There are situations when alternating quote types isn't enough and I find this to be a good habit but others may find it overcautious.

CODE
document.write('<img id=\"sky\" src=\"' + mapNum + '.jpg\" alt=\"\" \/>');
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Client-side Scripting · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 28th April 2024 - 09:23 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC