1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 4:31 am May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

constructors - instantiate instances

         

tnbrwneyez

4:15 am on Nov 13, 2004 (gmt 0)

10+ Year Member



Please help! I need to do several things to this code, and I cannot get it to work. I need to finish the employeeObject constructor and add the properties that are listed in the employeeObject constructor signature. I also need to add a method named showEmployee.

Then, I need to instantiate 3 instances of the employeeObject, using the employees array already listed.

Then, I need to complete the showEmployees()function by using the info variable that has been declared.

<HTML>
<HEAD>
<TITLE>Employee Database</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!--

function employeeObject(name,department,extension) {

this.name = name;
this.department = department;
this.extension = extension;
}

var employees = new Array();
employees[1] = new productObject("Mai Li", "Sales", 551);
employees[2] = new productObject("Maria Alvarez", "Human Resources", 441);
employees[3] = new productObject("Tom Smith", "Marketing", 331);

len = employees.length;

function showEmployee() {
var info = "";




alert(info);
}

function showAllEmployees() {
var info = "";
for (var i = 1; i < len; i++) {
info += "Employee: " + employees[i].name + "\n";
info += "Department: " + employees[i].department + "\n";
info += "Extension: " + employees[i].extension + "\n\n";
}

alert(info);
}

//-->
</SCRIPT>

</HEAD>
<BODY>

<H3>Employee Database</H3>
<HR>
<FORM NAME="empForm">
<B>Select name to view information:</B>
<SELECT NAME="empName" onChange="employees[this.selectedIndex].showEmployee();this.selectedIndex=0;">

<SCRIPT LANGUAGE="JavaScript">
<!--

for (var i = 0; i < len; i++) {
if(i == 0) document.write("<OPTION>" + employees[i]);
else document.write("<OPTION>" + employees[i].name);
}

//-->
</SCRIPT>

</SELECT>
<P>
<INPUT TYPE="button" VALUE="show all employees" onClick="showAllEmployees();">

</FORM>

</BODY>
</HTML>

Bernard Marx

1:27 pm on Nov 13, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



This is a little confusing.

The constructor is 

employeeObject
, but you are calling the (non-existant) productObject constructor.

Here are a few suggestions - but it's all a matter of taste, of course:

1. Stick to convention, and signify a constructor by starting with a capital letter, rather than using "

..Object
" all over the place.

2. Allow the possibility for 

Employee
to implement an interface (or a JS emulation). What I mean is that, for eg, 
showEmployee
is too specific. Use a method name like 
getInfo
. 


[blue]/*----------------------------------------------------------------------------
  Employee - constructor & methods
----------------------------------------------------------------------------*/[/blue]
function Employee(name,department,extension) 
{
  this.name    = name;
  this.department = department;
  this.extension = extension;
}
Employee.prototype.getInfo = function()
{
  return "Employee: "  + this.name    + "\n"
     + "Department: " + this.department + "\n"
     + "Extension: " + this.extension + "\n"; 
}
[blue]/*----------------------------------------------------------------------------
  employees array (and methods)
----------------------------------------------------------------------------*/[/blue]
var employees =
[
  new Employee("Mai Li", "Sales", 551),
  new Employee("Maria Alvarez", "Human Resources", 441),
  new Employee("Tom Smith", "Marketing", 331)
]
employees.getInfo = function()
{
  var info = [];
  for(var k=0;k<this.length;k++)
    info[info.length] = this[k].getInfo();
  return info.join('\n');
}
employees.alertInfo = function(){ alert( this.getInfo() ) }

Bernard Marx

1:42 pm on Nov 13, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



And here's the HTML page to go with the script above (called "employee.js"):

<HTML>
<HEAD>
<TITLE>Employee Database</TITLE>
<SCRIPT src="employee.js" LANGUAGE="JavaScript"></SCRIPT>
</HEAD>
<BODY>

<H3>Employee Database</H3>
<HR>
<B>Select name to view information:</B>
<FORM NAME="empForm">
<SELECT NAME="empName" onChange="alert(employees[this.selectedIndex].getInfo());">
<SCRIPT type="text/javascript">
for (var i=0;i<employees.length;i++) {
document.write("<option>" + employees[i].name +"</option>");
}
</SCRIPT>

</SELECT>
<br>
<INPUT TYPE="button" VALUE="show all employees"
onClick="alert(employees.getInfo());">

</FORM>

</BODY>
</HTML>

tnbrwneyez

7:29 pm on Nov 13, 2004 (gmt 0)

10+ Year Member



Thanks for your help.

When I altered the code to your specifications, it didn't work. That just means that I did not alter it correctly, because you know what you are doing, and I obviously do not. :)

What I need for the code to do is to have a drop box with the words select employee there, and for you to be able to pick an employee from there. When you choose one, then an alert will come up with all of the employee info (name, dept, ext). Then when I click the showemployees button, an alert will come up that shows all three employees with their info.

Here is the altered code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>
<HEAD>
<TITLE>Employee Database</TITLE>
<SCRIPT src="employee.js" LANGUAGE="JavaScript"></SCRIPT>

<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
<!--
function Employee(name,department,extension)
{ this.name = name;
this.department = department;
this.extension = extension;
}
Employee.prototype.getInfo = function()
{
return "Employee: " + this.name + "\n"
+ "Department: " + this.department + "\n"
+ "Extension: " + this.extension + "\n"; }

var employees =
[
new Employee("Mai Li", "Sales", 551),
new Employee("Maria Alvarez", "Human Resources", 441),
new Employee("Tom Smith", "Marketing", 331)
]
employees.getInfo = function()
{
var info = [];
for(var k=0;k<this.length;k++)
info[info.length] = this[k].getInfo();
return info.join('\n');
}
employees.alertInfo = function(){ alert( this.getInfo() ) }

<BODY>

<H3>Employee Database</H3>
<HR>
<B>Select name to view information:</B>
<FORM NAME="empForm">
<SELECT NAME="empName"

onChange="alert(employees[this.selectedIndex].getInfo());">
<SCRIPT type="text/javascript">
for (var i=0;i<employees.length;i++) {
document.write("<option>" + employees[i].name +"</option>");
}
</SCRIPT>

</SELECT>
<br>
<INPUT TYPE="button" VALUE="show all employees"
onClick="alert(employees.getInfo());">

</FORM>

I really appreciate all of your help. I admire that you can understand this stuff so completely, when I feel like my head is swimming.

Thanks again!

Bernard Marx

9:48 pm on Nov 13, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You'll get the hang of it after a while.

The script, as you posted, works fine..
..when you put back the closing tags that have somehow gone missing!

The closing </script> and </head> tags. 


..etc..
employees.alertInfo = function(){ alert( this.getInfo() ) }
[red]</script>
</head>[/red]
..etc..

........................................

I didn't actually use the 

alertInfo
method in the end.
The main point I was making - in terms of 'info' functions - was to simplify any such function to just returning a string, as opposed to giving an alert. This makes it more flexible.

Also, every instance is responsible for returning its own info - via its getInfo method, rather than having another method 'reaching into' each object and querying individual properties. The idea is that you can change the implementation of the Employee type (or the behaviour of particular instances), but as long as it still has a getInfo method, then the array's getInfo method will still work.

tnbrwneyez

12:09 am on Nov 14, 2004 (gmt 0)

10+ Year Member



I cannot thank you enough! I have worked on this for days, and I could not figure it out! You are the best, and I really appreciate your help. And, I did learn from you on this, also, so that is a big bonus!

Thanks again!

tnbrwneyez

1:12 am on Nov 16, 2004 (gmt 0)

10+ Year Member



Help again. The code works fine, but when I upload it to my server, and then go to the web page and try to open it, it does not work and the code looks weird. Here is what it looks like in the browser:

<HTML><HEAD><TITLE>Employee Database</TITLE>

<script language="JavaScript">
<!--

function SymError()
{
return true;
}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{
return (new Object());
}

window.open = SymWinOpen;

//-->
</script>

<SCRIPT src="employee.js"LANGUAGE="JavaScript"></SCRIPT>
</head>
<script LANGUAGE="JavaScript" type="text/javascript">

<!--
function Employee(name,department,extension)
{ this.name = name;
this.department = department;
this.extension = extension;
}
Employee.prototype.getInfo = function()
{
return "Employee: " + this.name + "\n"
+ "Department: " + this.department + "\n"
+ "Extension: " + this.extension + "\n"; }

var employees =
[
new Employee("Mai Li", "Sales", 551),
new Employee("Maria Alvarez", "Human Resources", 441),
new Employee("Tom Smith", "Marketing", 331)
]
employees.getInfo = function()
{
var info = [];
for(var k=0;k<this.length;k++)
info[info.length] = this[k].getInfo();
return info.join('\n');
}
employees.alertInfo = function(){ alert( this.getInfo() ) }
</SCRIPT>

<BODY>
<H3>Employee Database</H3>
<HR>
<B>Select name to view information:</B>
<FORM name="empForm">
<SELECT name="empName">
onchange="alert(employees[this.selectedIndex].getInfo());">
<SCRIPT type="text/javascript">
for (var i=0;i<employees.length;i++) {
document.write("<option>" + employees[i].name +"</option>");
}
</SCRIPT>
</SELECT> <BR>
<INPUT type=button value="show all employees"
onclick="alert(employees.getInfo());">
</FORM></BODY></HTML>

<script language="JavaScript">
<!--
var SymRealOnLoad;
var SymRealOnUnload;

function SymOnUnload()
{
window.open = SymWinOpen;
if(SymRealOnUnload!= null)
SymRealOnUnload();
}

function SymOnLoad()
{
if(SymRealOnLoad!= null)
SymRealOnLoad();
window.open = SymRealWinOpen;
SymRealOnUnload = window.onunload;
window.onunload = SymOnUnload;
}

SymRealOnLoad = window.onload;
window.onload = SymOnLoad;

//-->
</script>

Someone please help! I have tohave this done by Wednesday and I am losing my ming!

Thanks

code_geek

3:39 am on Nov 18, 2004 (gmt 0)

10+ Year Member



window.open method works like this:

[WindowName] = window.open([stuff]);

i'm not exactly sure what [stuff] is, but i know it includes the address (obviously), and stuff you can disable, like address bar and statusbar

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 4:31 am May 14, 2026