Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Object-Oriented JavaScript (2015) Prototypal Inheritance Building the Media Object

Mohammed Safiulla D
Mohammed Safiulla D
14,666 Points
Posted by Mohammed Safiulla D
Mohammed Safiulla D
14,666 Points

Regarding the order of linking js files in index.html. Why is it necessary to link media.js before song.js?

I know that song.js uses function Media from media.js, but if that's the case then why is playlist.js before song.js, as playlist.js also uses song object. What I had previously thought was that since app.js is the file which actually creates the objects whose definitions are in other script files, it didn't matter in what order the files were linked as long as all are called before app.js ( and had tried that out before changing the order of calling playlist.js and song.js ), but now it doesn't seem to work unless media.js is called before song.js. Can someone explain why its ok when we interchange the order of playlist.js and song.js, but not media.js and song.js?

1 Answer

Özgür Ozan Çakmak
Özgür Ozan Çakmak
11,451 Points
Özgür Ozan Çakmak
Özgür Ozan Çakmak
11,451 Points

I haven't reached to the object-oriented javascript course yet but what I know is you need to link the javascript files in order they are used. What I mean is if you are using jquery libraries in a file called app.js for example, you need to include jQuery first, then your app.js because it wouldn't function without the jQuery definition.

If those objects you mention don't depend on each other, common sense says you can link them in whatever order you wish. If they do, the depending file must be linked after the depended file.

You can think them like inverted blocks, rising on top of each other. First <script src... goes to the base, and second rises on top of that and so on and so forth.

Mohammed Safiulla D
Mohammed Safiulla D
14,666 Points
Mohammed Safiulla D
Mohammed Safiulla D
14,666 Points

Yes, I get that, but here in this course playlist.js uses an object of song.js, but its called before song.js (in index.html) and it seems to work fine.

Özgür Ozan Çakmak
Özgür Ozan Çakmak
11,451 Points
Özgür Ozan Çakmak
Özgür Ozan Çakmak
11,451 Points

Hm.. weird. Can you copypaste the code in the html and the javascripts of playlist.js and song.js, as well as the app.js if there is any.

Özgür Ozan Çakmak
Özgür Ozan Çakmak
11,451 Points
Özgür Ozan Çakmak
Özgür Ozan Çakmak
11,451 Points

Ah okay now it is clearer!

function Playlist() {
    this.songs = [];
    this.nowPlayingIndex = 0;
}

I assume the this.songs=[] statement and the operations done to it is confusing you.

The songs property and all the operations done in the playlist.js has nothing to do with the song.js. It only creates a property in the Playlist object, which is an array.

You instantiate the song object via new Song("Hey Jude!"); or (which is a new usage for me I have to admit) Song.call() (like the Media.call(this,title,duration); statement on playlist.js) which isn't used yet.

Please note the capital S here which is derived from the statement function Song(title,artist,duration) { on song.js. If you named it as SongTree in here, you'd do var song = new SongTree("Hey Jude"); or SongTree.call(something,something)

Hope it is clear.

Mohammed Safiulla D
Mohammed Safiulla D
14,666 Points
Mohammed Safiulla D
Mohammed Safiulla D
14,666 Points

Thanks! So basically to sum up what you said, since we are not instantiating a song object in playlist.js (this.songs = []; is just declaring of an empty array not instantiating), so it's ok call playlist.js before song.js or use prototype methods of song.js (note that in play() and stop() methods currentSong.play() and currentSong.stop() are calling prototype methods of song.js).

Özgür Ozan Çakmak
Özgür Ozan Çakmak
11,451 Points
Özgür Ozan Çakmak
Özgür Ozan Çakmak
11,451 Points

Exactly! Glad I can be of assistance )))