0

I'm trying to learn javascript from online tutorial. I don't understand line 12, what does these line of code do? what are outImage, thisImage.outImage, and Image()?Is Image() a javascript built-in object? Is thisImage.outImage an object? or only outImage is an object? Thanks so much, any answers are appreciated.! enter image description here

sopanha
  • 345
  • 3
  • 11
  • 1
    `thisImage` is the object passed to the function (in this case, an image) `outImage` is a new property being defined on the object. `new Image();` is creating a new image. -- Really simple! – Niet the Dark Absol Feb 16 '14 at 15:41
  • Checkout this question: [Is there a specification for JavaScript Image object?](http://stackoverflow.com/questions/15233483/is-there-a-specification-for-javascript-image-object) – shawnzhu Feb 16 '14 at 15:42
  • @Niet the Dark Absol, is Image() an object? is document.images[i] an object? – sopanha Feb 16 '14 at 15:45
  • 1
    this is not the appropriate way to add code to a question. – Patrick Evans Feb 16 '14 at 15:47
  • @user3286390 These are basic concepts you should already know, but... Well, what do you *think* `new Image()` might *possibly* do? What could `document.images` *possibly* mean? – Niet the Dark Absol Feb 16 '14 at 15:47
  • Yes, it is an [HTMLImageElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement) object. – shawnzhu Feb 16 '14 at 15:48
  • i think thisImage is a new object created from new Image(). and i think Image() and document.image are built-in objects in javascript. – sopanha Feb 16 '14 at 15:51
  • @Niet the Dark Absol you said `outImage` is a new property. So in `thisImage.outImage.src` `src` is a new property too? – sopanha Feb 16 '14 at 16:00
  • 1
    No, `src` is already a property of `new Image()` objects, so it's just setting an existing property to a new value ;) – Niet the Dark Absol Feb 16 '14 at 16:15
  • @niet the Dark Absol so both `thisImage` and `Image()` or `new Image` are objects? – sopanha Feb 16 '14 at 17:01

1 Answers1

1

Look at line 6.

setupRollover( document.images[i] );

That's calling the function.

function setupRollover (thisImg) { /* ... */ }

So thisImg === document.images[i];

document is a browser built-in object (not built into JavaScript, but one which is put in by every browser), which gives you access to the HTML on the page (aka: The "DOM").

so, document.images is a list of all of the images on the DOM.

var img = new Image( ); img.src = "..."; makes a new image, the same way typing <img src="..."> in the HTML gives you a new image.

The difference is that now you have it in JavaScript and not in HTML, so you can change it and move it around, and pass it to different functions.

The only other confusing piece of the puzzle is that you can attach almost anything to almost anything else in JavaScript.

var img = new Image(),
    img2 = new Image();

img.otherImage = img2;

This doesn't do anything special or magic.
It's just, now any time I ask for img.otherImage in that script, it will give me img2.

Norguard
  • 26,167
  • 5
  • 41
  • 49
  • in this code `var img = new Image()`, `img` is an object? how about `Image()`, is it an object or a class? thanks – sopanha Feb 16 '14 at 17:06
  • 1
    There are no "classes" in JavaScript, yet. They're coming, eventually, though. Image is a constructor function, which returns a new instance of an image object. So it looks like a class. `var img = new Image( );` so it is the function that makes image objects. – Norguard Feb 16 '14 at 17:26