Function displaying at bottom of web page

Page 1 of 1

2 Replies - 383 Views - Last Post: 18 July 2012 - 10:59 PM

#1 synlight  Icon User is offline

  • D.I.C Regular

Reputation: 44
  • View blog
  • Posts: 259
  • Joined: 14-September 11

Function displaying at bottom of web page

Posted 18 July 2012 - 12:38 PM

I fixed the problem, sorry if I wasted anyone's time!








My program is functioning properly, but it displays my life_expect function at the bottom of the web page. There are no errors that I can see, I can't figure out why it's doing that.

<html>
<head>
<title>Chapter 8 Assignment 1 </title>
<h1>Browser Settings:</h1>
<script type = "text/javascript">

if (navigator.javaEnabled() == true){
document.write("<h2>Java is enabled! </h2>");}
else{
document.write("<h2>Java is disabled! </h2>");}


document.write("<h2>Browser Platform: ", navigator.platform,"</h2>");
document.write("<h2>Browser Code Name: ", navigator.appCodeName,"</h2>");
document.write("<h2>Browser Name: ", navigator.appName,"</h2>");+
document.write("<h2>Browser Version: ", navigator.appVersion,"</h2>");

function person(name, age, gender)
{
	this.name = name;
	this.age = age;
	this.gender = gender.toUpperCase();
	this.years = 0;
	this.life_expect = life_expect;
}

function life_expect(age, gender)
{
	if (gender == "M")
		years = 76-age;
	else 
		years = 81-age;
	return years;	
}
</script> 
</head>

<body bgcolor = "#4682B4">

<script type = "text/javascript">

var name = prompt("Please enter your full name:","");
var age = prompt("Please enter your age:","");
var gender = prompt("Please enter your gender as a single character \n(ex: M or m, F or f):","");

var myPerson = new person(name, age, gender);
myPerson.years = myPerson.life_expect(myPerson.age, myPerson.gender);
document.write("<h2>Person's Properties:</h2>");

for (var property in myPerson)
{
  document.write(myPerson[property]+"<br>");
}

if (myPerson.gender == "M")
	var strGender = "male"
else
	strGender = "female";	
	
document.write("Hi ", myPerson.name, ", as a ", myPerson.age, " year old ", 
	strGender, " you are expected to live ", myPerson.years, " more years!");


</script>
</body>
</html>

This post has been edited by synlight: 18 July 2012 - 12:54 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Function displaying at bottom of web page

#2 synlight  Icon User is offline

  • D.I.C Regular

Reputation: 44
  • View blog
  • Posts: 259
  • Joined: 14-September 11

Re: Function displaying at bottom of web page

Posted 18 July 2012 - 12:43 PM

Ooohhh wait... is it because my function is considered a property in my for loop? Now I have to figure out how to get around that...
Was This Post Helpful? 0
  • +
  • -

#3 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 2935
  • View blog
  • Posts: 7,684
  • Joined: 08-June 10

Re: Function displaying at bottom of web page

Posted 18 July 2012 - 10:59 PM

View Postsynlight, on 18 July 2012 - 09:43 PM, said:

is it because my function is considered a property in my for loop? Now I have to figure out how to get around that...

nope & get around what?

since JS does not have block scope and the for() loop ain’t an object, nothing can be a property of it. what you do is define the function in the <head> (more to that later), and assign its return value (#47) to a property. and since you print at the end of the document, well, that’s why it is there.

and now for the issues/recommendations:
  • do not use document.write(). it will do more harm than good. use DOM methods or innerHTML.
  • define object methods in the scope of the object, not via external function
  • don’t externally convert an object property value into another. methods are cheap to use

point 1:
// example why document.write() is bad
window.onload = function () 
{
	document.write("Hello World.");
};


points 2 & 3: how to define a method properly:
// constructor names should start upper-case
function Person(name, age, male)
{
// check that you pass a number (NaN - Not a Number)
	if (isNaN(age)) {
		throw new Error("Invalid age.");
	}
	this.age = age;
	this.name = name;
// since there are only 2 genders, booleans are a good choice
// since anything could be passed as the gender, we restrict it to one of the booleans by boolean conversion
	this.isMale = !!male; // converts falsy values to false and truthy values to true
// I’ve deleted the years property, it serves no purpose (since the life_expect() method already does the job)
// and the age value can change!
}
// this is how (public) methods are defined in JS
Person.prototype.life_expect = function()
{
//	gender and age are properties of the Person object, so use it
//	"this" refers to the object instance
	if (this.isMale) { // always use braces, even for "one-liners"!
		return 76 - this.age;
	}
	return 81 - this.age;	
};
// no need for an external condition either, the gender is a property of a person
// a method makes it "internationalisable" while maintaining a sensible value for programming
Person.prototype.getGender = function()
{
	if (this.isMale) {
		return "male";
	}
	return "female";
};

This post has been edited by Dormilich: 18 July 2012 - 11:05 PM

Was This Post Helpful? 1
  • +
  • -
Page 1 of 1