OhLordy
10-01-2003, 04:10 AM
I have read around in may places that javascript is an object oriented language but nowhere seems to say how I can create a class. Is this possible with javascript and if so, how?
Thanks
Rob
Thanks
Rob
Click to See Complete Forum and Search --> : Creating a class
Charles
10-01-2003, 05:21 AM
You're not really using an Object Oriented Language if you aren't creating a class. See http://devedge.netscape.com/library/manuals/2000/javascript/1.3/guide/obj.html.
OhLordy
10-01-2003, 06:42 AM
cheers, got my class definition, that part seems to be working fine. However in one of my methods I have this line
document.images['screenshot_main'].src=this.shots[this.currentShot].src;
Now, I definately have an image called screenshot_main on the page but I'm getting an error (Netscape javascript console) saying "document.images.screenshot_main has no properties"
Any ideas about this?
Cheers
Rob
document.images['screenshot_main'].src=this.shots[this.currentShot].src;
Now, I definately have an image called screenshot_main on the page but I'm getting an error (Netscape javascript console) saying "document.images.screenshot_main has no properties"
Any ideas about this?
Cheers
Rob
Charles
10-01-2003, 06:48 AM
I'd have to see the rest of the script and page.
OhLordy
10-01-2003, 06:52 AM
here is the code for the page.
<script language="javascript">
//define the screenshots class
function screenshots(image)
{
//attributes;
this.shots = new Array(4);
this.noShots = 0;
this.currentShot = 0;
this.image = image;
//method pointers
this.addShot = _addShot ;
this.setCurrent = _setCurrent ;
this.getNextImg = _getNextImg ;
//add another screenshot to the list
function _addShot(shot)
{
alert(shot);
this.shots[this.noShots] = new Image();
this.shots[this.noShots].src = shot;
this.noShots++;
return true;
}
function _setCurrent(current)
{
alert("in this function"+this.noShots+" "+parseInt(this.noShots)+" "+current+" "+parseInt(current));
if(parseInt(current)<parseInt(this.noShots)) {
this.currentShot=current;
alert("this is the current"+this.currentShot);
this.image.src=this.shots[this.currentShot].src;
document.images['screenshot_main'].src=this.shots[this.currentShot].src;
alert("this is the image"+this.shots[this.currentShot].src);
alert(this.currentShot+" "+this.shots[this.currentShot]);
return true;
} else {
return false;
}
}
function _getNextImg()
{
if(this.currentShot<this.noShots) {
this.currentShot++;
} else {
this.currentShot=0;
}
image.src=this.shots[this.currentShot];
return true;
}
}
var screenshots=new screenshots(document.images['screenshot_main']);
screenshots.addShot('images/src3/mr-ps2-1.jpg');
screenshots.addShot('images/src3/mr-ps2-2.jpg');
screenshots.addShot('images/src3/mr-ps2-3.jpg');
screenshots.setCurrent(1);
</script>
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td>
<img src="images/src3/mr-ps2-1.jpg" name="screenshot_main" onClick="screenshots.getNextImg();" />
</td>
</tr>
</table>
Thanks Rob
<script language="javascript">
//define the screenshots class
function screenshots(image)
{
//attributes;
this.shots = new Array(4);
this.noShots = 0;
this.currentShot = 0;
this.image = image;
//method pointers
this.addShot = _addShot ;
this.setCurrent = _setCurrent ;
this.getNextImg = _getNextImg ;
//add another screenshot to the list
function _addShot(shot)
{
alert(shot);
this.shots[this.noShots] = new Image();
this.shots[this.noShots].src = shot;
this.noShots++;
return true;
}
function _setCurrent(current)
{
alert("in this function"+this.noShots+" "+parseInt(this.noShots)+" "+current+" "+parseInt(current));
if(parseInt(current)<parseInt(this.noShots)) {
this.currentShot=current;
alert("this is the current"+this.currentShot);
this.image.src=this.shots[this.currentShot].src;
document.images['screenshot_main'].src=this.shots[this.currentShot].src;
alert("this is the image"+this.shots[this.currentShot].src);
alert(this.currentShot+" "+this.shots[this.currentShot]);
return true;
} else {
return false;
}
}
function _getNextImg()
{
if(this.currentShot<this.noShots) {
this.currentShot++;
} else {
this.currentShot=0;
}
image.src=this.shots[this.currentShot];
return true;
}
}
var screenshots=new screenshots(document.images['screenshot_main']);
screenshots.addShot('images/src3/mr-ps2-1.jpg');
screenshots.addShot('images/src3/mr-ps2-2.jpg');
screenshots.addShot('images/src3/mr-ps2-3.jpg');
screenshots.setCurrent(1);
</script>
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td>
<img src="images/src3/mr-ps2-1.jpg" name="screenshot_main" onClick="screenshots.getNextImg();" />
</td>
</tr>
</table>
Thanks Rob
Charles
10-01-2003, 07:02 AM
A couple of things...
1) It's been <script type="text/javascript"> since 1997.
2) Class names should start with an uppercase letter. See http://java.sun.com/docs/codeconv/html/CodeConventions.doc8.html. This will take care of the little namespace issue you have there.
3) document.images is an array. Try document.images[0].src or document.screenshot_main.src.[/font]
1) It's been <script type="text/javascript"> since 1997.
2) Class names should start with an uppercase letter. See http://java.sun.com/docs/codeconv/html/CodeConventions.doc8.html. This will take care of the little namespace issue you have there.
3) document.images is an array. Try document.images[0].src or document.screenshot_main.src.[/font]
OhLordy
10-01-2003, 07:16 AM
That's brilliant. Solved the problem of the document.image, however it isnot saying screenshots is not defined when I click on the image to change it. Could this be something to do with the scope of the screenshots. I've also tried using an intemediary function but that also apears to be out of scope.:confused:
Cheers
Rob
Cheers
Rob
OhLordy
10-01-2003, 07:29 AM
actually, no it's not, I just messed up a little.
The error is "document.screenshot_main has no properties" the compiler does understand the associative array imges['image_name'] perfetly well it just can't find it.
I've now tried it as
document.screenshot_main
document.images['screenshot_main']
document.images[0]
and none of them work
Any Ideas??
Rob
The error is "document.screenshot_main has no properties" the compiler does understand the associative array imges['image_name'] perfetly well it just can't find it.
I've now tried it as
document.screenshot_main
document.images['screenshot_main']
document.images[0]
and none of them work
Any Ideas??
Rob
Charles
10-01-2003, 07:41 AM
I've cleaned up a bunch of stuff but your problem was that you were trying to use and Image object that didn't yet exist.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>
<script type="text/javascript">
//define the screenshots class
function ScreenShots(image)
{
//attributes;
this.shots = new Array(4);
this.noShots = 0;
this.currentShot = 0;
this.image = image;
}
ScreenShots.prototype.addShot = function (shot)
//add another screenshot to the list
{
this.shots[this.noShots] = new Image();
this.shots[this.noShots++].src = shot;
return true;
}
ScreenShots.prototype.setCurrent = function (current)
{
if(parseInt(current)<parseInt(this.noShots)) {
this.currentShot=current;
this.image.src=this.shots[this.currentShot].src;
document.screenshot_main.src=this.shots[this.currentShot].src;
return true;
} else {
return false;
}
}
ScreenShots.prototype.getNextImg = function ()
{
if(this.currentShot<this.noShots) {
this.currentShot++;
} else {
this.currentShot=0;
}
this.image.src=this.shots[this.currentShot];
return true;
}
onload = function ()
{
screenshots =new ScreenShots(document.screenshot_main);
screenshots.addShot('images/src3/mr-ps2-1.jpg');
screenshots.addShot('images/src3/mr-ps2-2.jpg');
screenshots.addShot('images/src3/mr-ps2-3.jpg');
screenshots.setCurrent(1);
}
</script>
<div>
<img src="images/src3/mr-ps2-1.jpg" name="screenshot_main" onclick="screenshots.getNextImg();">
</div>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>
<script type="text/javascript">
//define the screenshots class
function ScreenShots(image)
{
//attributes;
this.shots = new Array(4);
this.noShots = 0;
this.currentShot = 0;
this.image = image;
}
ScreenShots.prototype.addShot = function (shot)
//add another screenshot to the list
{
this.shots[this.noShots] = new Image();
this.shots[this.noShots++].src = shot;
return true;
}
ScreenShots.prototype.setCurrent = function (current)
{
if(parseInt(current)<parseInt(this.noShots)) {
this.currentShot=current;
this.image.src=this.shots[this.currentShot].src;
document.screenshot_main.src=this.shots[this.currentShot].src;
return true;
} else {
return false;
}
}
ScreenShots.prototype.getNextImg = function ()
{
if(this.currentShot<this.noShots) {
this.currentShot++;
} else {
this.currentShot=0;
}
this.image.src=this.shots[this.currentShot];
return true;
}
onload = function ()
{
screenshots =new ScreenShots(document.screenshot_main);
screenshots.addShot('images/src3/mr-ps2-1.jpg');
screenshots.addShot('images/src3/mr-ps2-2.jpg');
screenshots.addShot('images/src3/mr-ps2-3.jpg');
screenshots.setCurrent(1);
}
</script>
<div>
<img src="images/src3/mr-ps2-1.jpg" name="screenshot_main" onclick="screenshots.getNextImg();">
</div>
OhLordy
10-01-2003, 08:37 AM
I am really having trouble with this one. I've finally got it working just as plain text (not being built dynamically with php) and I know it's working because if I change the number in setCurrent() in the onload function the image changes on reload. however the screenshots object is not available to me outside of the onload function. If I try to use it anywhere else in my page I get a screenshots is not defined error.
Cheers
Rob
Cheers
Rob
Charles
10-01-2003, 01:23 PM
Originally posted by OhLordy
I am really having trouble with this one. I've finally got it working just as plain text (not being built dynamically with php) and I know it's working because if I change the number in setCurrent() in the onload function the image changes on reload. however the screenshots object is not available to me outside of the onload function. If I try to use it anywhere else in my page I get a screenshots is not defined error.
Cheers
Rob That's because your constructor is passed an Image object that doesn't yet exist. Outside of the "onload" handler nothing yet exists after the SCRIPT element. That part of the document hasn't yet been parsed.
I am really having trouble with this one. I've finally got it working just as plain text (not being built dynamically with php) and I know it's working because if I change the number in setCurrent() in the onload function the image changes on reload. however the screenshots object is not available to me outside of the onload function. If I try to use it anywhere else in my page I get a screenshots is not defined error.
Cheers
Rob That's because your constructor is passed an Image object that doesn't yet exist. Outside of the "onload" handler nothing yet exists after the SCRIPT element. That part of the document hasn't yet been parsed.
webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved.
Copyright Internet.com Inc., All Rights Reserved.