Retrieve external Webpage data and post it to page with Javascript?

[Sm]

Here's the basic outline:

I'd like a Javascript function that reads this webpage: http://www.neopets.com/games/game.phtml?game_id=412 - Searches for "<div id="gr-ctp-npratio" class="popup">", retrieves the data that follows until "</div>", and then posts it on the page every refresh.

There's a bit of a catch though, I'd also like it to "transform" that data before posting it to the page. For instance, I'd like everything in the "<div class="top"></div>" tags to instead become surrounded by "<b></b>", and for and for anything in "<span class="green"></span>" to be put into "<div style="color: #44330F;"></div>".

And then afterwards, there's even another thing I'd like to do with that data. If possible, I'd like for a calculation to take place that's user determined. For example, the above page says "4.00 POINTS = <span class='green'>1 NP</span>". I'd like to multiply both numbers based on a base number put in by the user, so if this number is 500, it would read:

2000.00 POINTS = 500 NP

So pretty much the user can submit any number they choose and see how many points = how many "NP".

And then something on top of that, I'd like to limit users to only entering a maximum of 1000 as the multiplier.

Do you get all that? It's quite a tall order.

First of all, I'm not even sure that such a thing is possible. Secondly, I know little to nothing about Javascript, I only learned the basic uses of variables yesterday and I'm still learning. I'm limited to using only Javascript at the moment because I now I have to develop offline.

I understand what you may be thinking: "What the heck are you trying to do if you don't know Javascript?!" and "Why can't you use other programming languages?"

To answer the latter, that's just how I learned PHP. There are so many "guides" and "tutorials" on how to do so, however, I learned little to nothing from those because of the technical talk and the author who always seems to assume you're sponge ready to absorb infinite knowledge. I instead learned by asking questions on specific how-tos and finding some random information on the internet, and I pieced it all together to figure it out.

Secondly, I'm technically not working offline, but with a Wiki. I do not have admin privileges so I'm confined to working with Javascript, and I've failed multiple times to set up an apache server with PHP so I cannot even present PHP code to the admins for approval.

So basically, here's what I'd like to know:

-How to retrieve specific data from a specific section of a specific webpage (Which I assume can be found based on CSS classes)
-How to take that data, and present it a different way (Remove it's div/span tags and put other tags around them)
-Take some of that specific data and allow it to multiplied based on user input
-And how to limit user input to 1000 for multiplying.

-And additionally, have the ability to the manipulate the URL in which the data is taken from (All pages are identical in layout, only the data I wish to take would be a bit different)

If you could even provide bits and pieces on how to do do some of those specific things, just how to multiply or just how to extract data and put it up for modification by other functions, that would be lovely.

I don't expect someone to go and write this all up for me, just provide bits and pieces on how I'd make this all work.I'm not a sponge, but I'm open to learning through experience!

(And please, I'd rather you not direct me elsewhere for questions)
Yahoo seems to keep chopping the end of my URLs out.

The above webpage ends in =412 right after the "ID".

[Chris]

(Not possible. Read on.)

What you're looking for is called AJAX. It's a Javascript technique that allows you to retrieve a resource in the background.
The basic idea is to pass the website's URL to the XMLHttpRequest object and provide a JavaScript function that processes the result as soon as the website's source code is fully loaded.
You can now search the returned text data for the div you're looking for and extract any content you need.

BUT:
For security reasons, this is only allowed if the document you're loading is on the same server. Otherwise you could use a simple JavaScript to DDOS a server for instance.
That is why websites that want to make their content available provide APIs. One example would be facebook's like button. What happens is the button will load a piece of JavaScript on the facebook server which is dynamically generated to contain the needed info.

The only way to show a piece of another website on your own is to use an iframe and scroll it so only the content you want is visible. This is of course a very bad solution that can easily break for a number of reasons.

TL;DR: not possible.