-4

To keep it short I want to write a Userscript which reads data on a website and display it in a more user-friendly way.

I have next to no experience with writing userscript, I have installed Firebug on firefox to help me locate the elements.

I have saved a page from the website but I want to learn how to proceed from here, what software can I use test my code in real time. I have notepad++ and I can install eclipse.

What I can locate:

  1. XPATH: /html/body/main/section[2]/div[1]/div[2]/div/div[4]/div[2]/div[1]
  2. InnerHTML: "$ 0.30"
  3. HTML Node+contents: <div class="value">$ 0.30</div>
  4. CSS path: html body main section.box div.box-shiny-alt div.full div.winsorloses div.oitm div.item div.value

I have 4 of these value class elements that I want to add together and then display the sum. Where should I start?

AH15
  • 17
  • 3
  • 2
    You should obviously start by learning JavaScript more. I don't like it when people come on this site with no experience, no attempts, and post a question wanting us to make something for them. :S –  Aug 03 '15 at 18:19
  • Agree with @Jamen, here's a free JavaScript course, you can complete it in a day or two. https://www.codeschool.com/paths/javascript – Dan Beaulieu Aug 03 '15 at 18:23
  • I have experience with Java, It's some what similar but should I be learning JQuery? I am also asking for tools that I can use to help me learn. – AH15 Aug 03 '15 at 18:27

1 Answers1

1

It sounds like you're on the right track, but the massive DOM API can be rather daunting for a beginner, so let me see if I can help you out. As others have suggested, getting acquainted with the JavaScript language itself should be your first step.

I believe the most important line in your question is right here:

what software can I use test my code in real time

Nowadays Firefox's built-in web console is really powerful, and exactly what you need. Open it with Ctrl+Shift+K. For now just focus on the JavaScript console and element inspector tabs — they will show you exactly what's going on with your code and with the HTML.

Take a look at this screenshot of the JS console and I'll point out some of the useful features: JS console screenshot

The text bar at the bottom is where you can enter code and see the results in the log above. Notice that as I'm typing document.body.get…, the console will show a list of all properties of the document.body object that begin with 'get'.

In the log you can see I've previously entered document.querySelector("div"), and it printed the resulting object: the first <div> element on the page. If you click on that line in the console, the panel on the right-hand side opens showing you all the properties of that object and their values. If you click on the white square thing in the log it'll point out exactly where in the document tree that element exists.

So, play around in the console; experiment; search property names in https://devdocs.io or google if you're wondering what they mean. This should help you learn your way around the DOM API. If you have some more specific questions about JavaScript that you can't find the answer to, I'd suggest asking on a JavaScript forum or IRC channel for helping novices — perhaps https://www.reddit.com/r/learnjavascript or https://chat.stackoverflow.com/rooms/17/javascriptball-pit. Or just leave a comment here, I'll see it. Good luck!

Community
  • 1
  • 1
Cauterite
  • 1,637
  • 17
  • 24
  • Thanks for all of this information really appreciate your help. Thanks for pointing me to devdocs.io I see this being very useful to me. One thing I did notice is my firefox doesn't show the properties panel when I click on the line in the console. Is there a fix for this? I have one big question. I want to create a website which imports data from another website, manipulates the data and displays it in a table. However the source website does not have an API so my thought was to use a script to extract the data via DOM. I want to do it all from my website without installed script. Possible? – AH15 Aug 29 '15 at 20:53
  • @AH15 try clicking [this part](http://u84.imgup.net/HisiKb50b.png) specifically. · · · · · · Because of the [same-origin policy](https://en.wikipedia.org/wiki/Same-origin_policy), if you want to scrape pages from another domain without a userscript, you'll have to do it from your webserver itself. While this is something I have done before, I can't say I have enough experience to suggest what the best way of going about it would be. There are plenty of existing libraries for this purpose though; see [here](http://stackoverflow.com/questions/5211486/scrape-web-pages-in-real-time-with-node-js). – Cauterite Aug 30 '15 at 08:01