 |
AutoHotkey Community
Let's help each other out
|
| View previous topic :: View next topic |
| Your opinion on this tutorial |
| It's just great, exactly what I needed! |
|
52% |
[ 13 ] |
| It's nice, helped me a lot |
|
40% |
[ 10 ] |
| It's ok, but nothing new to me |
|
4% |
[ 1 ] |
| It's ok, but too difficult for me |
|
0% |
[ 0 ] |
| I don't wanna learn, just gimme the snippets! |
|
4% |
[ 1 ] |
| It sucks, why would I need this anyway... |
|
0% |
[ 0 ] |
|
| Total Votes : 25 |
|
| Author |
Message |
daonlyfreez
Joined: 16 Mar 2005
Posts: 821
Location: Berlin
|
 Posted: Mon Nov 28, 2005 12:14 am Post subject: Tutorial - Control/manipulate webpages - AHK and JavaScript |
 |
|
 I want to play around with my browser windows with AHK, but I cannot really get it to work...
Yes, I know... -> but..., with JavaScript you can! 
Since many here are requesting how to control webpages, and I'm getting a bit tired of repeating 'search the forum for JavaScript', I thought I'd write a short tutorial.
--------------------------------------------------------------------------
Part 1
I'll use the W3Schools' HTML DOM pages for Part 1.
-> a) Open the first page and read a bit about what the HTML DOM is (forget about the 'what you should know' part).
-> b) Try their examples and read the second page...
-> c) Take a closer look at the second example on the second page...
HTML DOM Example 2 (Demo)
With that JavaScript, you can change the background color of that page. Now how is this done?
- There is a function to change the background color of the document, you can see it doesn't differ much syntaxwise from AHK, but there is a difference: the reference to the background color of the document is written as a string of references with dots between them...
 Remember that...
- And there is a trigger, an onclick action in the body of the document.
Now I'll rewrite the JavaScript from the example to one line for you:
One-line JS:
| Code: | | javascript:function ChangeColor(){document.body.style.background="yellow"};ChangeColor(); |
Why in one line?
The cool thing about browsers is, that you can feed them JavaScript thru the address bar!
What is that good for?
-> d) Copy and paste the one-liner (and do make sure it really is one line) into your browser's address bar, press Return/Enter after that, and you'll see!
Great, isn't it?!
(The reason I took the second example is because the first example only works reliably on Internet Explorer, and this one works (for me) on the latest IE, Firefox and Opera.)
What did I just do?
You have loaded a new function into the browser window's page, and after that, called it. Yes, completely new, and on-the-fly! It stays loaded too, so you can call it again (in the same window) by inserting just this:
One-line JS:
| Code: | | javascript:ChangeColor(); |
(which ofcourse doesn't do much, since the background of the window is already yellow)
So,
-> e) Try this:
One-line JS:
| Code: | javascript:function ChangeColorToYellow(){document.body.style.background="yellow"};
function ChangeColorToWhite(){document.body.style.background="white"}; |
Nothing happens!
Yes, nothing happens. Well, not quite, nothing happens visibly, you only loaded two new functions, but didn't trigger them yet...
-> f) Now try this to change to yellow:
One-line JS:
| Code: | | javascript:ChangeColorToYellow(); |
-> g) And this to change to white:
One-line JS:
| Code: | | javascript:ChangeColorToWhite(); |
Catch the drift? 
-> h) Now take a look at the next page of the tutorial, the HTML DOM Reference.
You'll see there are a lot of objects on webpages
Can I work with them all?
Well, most can be used and manipulated, yes!
You are not limited to only changing the background color of a page, you can redesign the whole thing if you want, and remember, this works with almost any webpage (not only your own), and in almost all browsers!
-> i) Now take your time to browse thru the DOM Objects you'll see listed, and dream a bit about what you could do, I'll be dreaming soon to (really have to go to sleep now), about JavaScript probably  ... Part 2 - x will follow soon...
--------------------------------------------------------------------------
Part 2
Now I hope you did take the time to browse thru the HTML DOM objects listed on the mentioned page  , and I hope you found the examples too, and had a look...
Full of ideas? Good! Now, first let me elaborate a bit more on the basics...
- JavaScript (short: JS) is - as the name already implies - a script language, specifically created for html pages. JavaScript has no direct relationship to Java. The creator of JavaScript (Brendan Eich) did have Java in mind when he created JavaScript (also to be able to control Java Applets), so the syntax is somewhat equal, but Java is a high level programming language (even the biggest now on SourceForge, overtook C++).
- JavaScript is nothing new, it's in fact 10 years old. JavaScript was already present on the version 3 browsers (Netscape and Internet Explorer), but got really useable with v 1.2, and quite mature with v 1.4. JavaScript is also known as JScript (Microsoft's version), and ECMAScript (the core language standard).
- JavaScript is an object-oriented language, albeit a simple one. Remember the reference-dot-reference...-syntax? Hierarchy is important (you need to get the references right), but you don't need to worry about classes, inheritance or instances.
- JavaScript is usually incorporated directly into a html page, or as a separate .js file. Since JavaScript is used in webpages - out of security reasons - it is limited: it cannot directly access files on a system without special priviliges thru Java, only cookie files.
- JavaScript (like AHK) is very powerful and simple to use, although it's a bit stricter than AHK. Especially when you rewrite 'normal' JavaScript to one-line JavaScript you need to take care.
Back to subject, JavaScript and AutoHotkey...
Since JS is already so 'built-in' into most browsers, loading and/or invoking JS commands thru the address bar is not the only way. Another term for these one-line JavaScripts is 'Bookmarklets', since you can save them as a bookmark and use them that way too...
-> a) Save the examples of Part 1 as bookmarks in your browser, the browser might complain about it's syntax, but you should be able to save them like that. Invoke them, they should work exactly like if you would have pasted-enter'ed them into the address bar!
It doesn't change the address bar!
Exactly, we now have two methods of invoking a one-line JS, thru the address bar, and thru a bookmark, and the latter has the big advantage of being unobtrusive.
In Part 1 I let you set something on the page, now we are going to get something from it.
JS - unfortunately for us - only has a couple of methods available to write output: to the document itself, to another document, to a message box, or to a cookie file (but not to files normally). This means, if we want to capture data from JS with AHK, we are limited.
There are three somewhat useable methods for getting data from JS to AHK
1 - The message box method.
-> b) Paste-return this:
One-line JS:
| Code: | | javascript:alert(document.links.length); |
It shows you a count of the links on the page
With AHK, one can focus on the message box (alert), extract the data and close it again.
Quite ugly, and limited to approx. 255 characters on most browsers.
2 - The new window method.
-> c) Paste-return this:
One-line JS:
| Code: | javascript:function getLinks(){top.w=window.open('','getlinks','width=350,height=250'+'
,menubar=0'+',toolbar=0'+',status=0'+',scrollbars=1'+',resizable=1');
docRef=top.w.document.open("text/html","replace");
for(var i=0;i<document.links.length;i++){link=document.links[i];
top.w.document.writeln(i+' '+link.href+'<br>');}};getLinks(); |
It pops up a new window (this should bypass most popup blockers) and writes the urls of the links on the page to it.
With AHK, one can focus on the window, extract the data and close it again.
A little less ugly, and can handle more data.
3 - The cookie-file method.
-> d) Take a closer look at a previous posting of mine: How to use Internet Explorer windows as a GUI for AutoHotkey.
In that posting, the JavaScript is already in the html file, but I think you can understand what goes on, and you might even get an idea on how to use the code as a one-line JavaScript.
Unobtrusive, quite some data can be handled (name and value max. 4095 bytes), but difficult to handle because of different browser methods of writing cookies.
Now even though the cookie method might look the most attractive, it is less browser compatible as the new window method and less easier to handle, therefore I'll continue in Part 3 with the new window method, getting and setting data, and you'll see the first AutoHotkey code.
-> e) In the meantime, you could search the internet a bit on 'bookmarklets'.
Edits:
+ Added poll.
+ Added Wikipedia links.
+ Broke up long one-line JavaScripts to keep this page readable.
+ Added Part 2.
- Removed html again (violates W3Schools' terms of use).
+ Inserted html and cleaned up (thanks JSLover).
_________________
 My AHK stuff on ahk.net / on DropBox (mirror) / @home (if online)
Last edited by daonlyfreez on Wed Nov 30, 2005 12:02 pm; edited 10 times in total |
|
| Back to top |
|
 |
Chris
Site Admin
Joined: 02 Mar 2004
Posts: 10692
|
| Posted: Mon Nov 28, 2005 1:58 am Post subject: |
|
|
Informative post. I'm going to try to remember to refer others to it when they ask about automating browsers and pages.
Thanks! |
|
| Back to top |
|
|
Serenity
Joined: 08 Nov 2004
Posts: 1277
|
| Posted: Mon Nov 28, 2005 3:10 am Post subject: |
|
|
Thanks for posting this! I'm looking forward to Part 2.
_________________
"Anything worth doing is worth doing slowly." - Mae West
 |
|
| Back to top |
|
|
JSLover
Joined: 20 Dec 2004
Posts: 541
Location: LooseChange911.com... the WTC attacks were done by the US Gov't... the official story is a lie...
|
| Posted: Mon Nov 28, 2005 9:19 am Post subject: |
|
|
| daonlyfreez wrote: | (I cannot get the html to show right on this forum  ) ... |
...what?...works fine...???
Using [list][/list]...
<html>
<head>
<script type="text/javascript">
function ChangeColor()
{
document.body.style.background="yellow"
}
</script>
</head>
<body onclick="ChangeColor()">
Click on this document!
</body>
</html> Using [code][/code]...
| Code: | <html>
<head>
<script type="text/javascript">
function ChangeColor()
{
document.body.style.background="yellow"
}
</script>
</head>
<body onclick="ChangeColor()">
Click on this document!
</body>
</html> |
Using [quote][/quote]...
| HTML DOM Example 2 (Demo) wrote: | <html>
<head>
<script type="text/javascript">
function ChangeColor()
{
document.body.style.background="yellow"
}
</script>
</head>
<body onclick="ChangeColor()">
Click on this document!
</body>
</html> |
...works when using nothing too...
_________________
Home • Click image! • Blog |
|
| Back to top |
|
|
not-logged-in-daonlyfreez
Guest
|
| Posted: Mon Nov 28, 2005 1:42 pm Post subject: |
|
|
Thanks all
The code didn't work in the BBCodev-preview  (me very diverted...)
Thanks JSLover, I'll edit the post
Am working on Part 2 now... |
|
| Back to top |
|
|
AHKnow*
Guest
|
| Posted: Tue Nov 29, 2005 2:10 am Post subject: |
|
|
| AutoHotkey combined with JScript and/or Javascript is a tag team made in heaven. |
|
| Back to top |
|
|
daonlyfreez
Joined: 16 Mar 2005
Posts: 821
Location: Berlin
|
| Posted: Tue Nov 29, 2005 11:17 pm Post subject: |
|
|
Part 2 added
_________________
My AHK stuff on ahk.net / on DropBox (mirror) / @home (if online) |
|
| Back to top |
|
|
BoBo
Guest
|
| Posted: Wed Jun 07, 2006 7:24 am Post subject: |
|
|
Helped a lot. Thx mate. 
Und nun Alle : "Zugabe ... Zugabe ... Zugabe" |
|
| Back to top |
|
|
PhiLho
Joined: 27 Dec 2005
Posts: 6719
Location: France (near Paris)
|
| Posted: Wed Jun 07, 2006 8:53 am Post subject: |
|
|
Oooh, there was this gem in the forum, and I didn't knew. Thanks, BoBo, for resurecting it. Now, we can point it out to newcomers!
I just have to read it, not just skim it quickly...
_________________
 vPhiLho := RegExReplace("Philippe Lhoste", "^(\w{3})\w*\s+\b(\w{3})\w*$", "$1$2") |
|
| Back to top |
|
|
Micha
Joined: 15 Nov 2005
Posts: 487
Location: Germany
|
| Posted: Wed Jun 07, 2006 11:14 am Post subject: |
|
|
Cool,
more input more input..... Please post additional tips..
Ciao
Micha |
|
| Back to top |
|
|
BoBo
Guest
|
| Posted: Wed Jun 07, 2006 12:58 pm Post subject: |
|
|
| Quote: | | Thanks, BoBo, for resurecting it |
The tribute goes to toralf (AKA "The GUI") who has mentioned it here. And yes I'm also interested to see some more cross coding techniques |
|
| Back to top |
|
|
not-logged-in-daonlyfreez
Guest
|
| Posted: Wed Jun 07, 2006 5:50 pm Post subject: |
|
|
Thanks all for the nice remarks...
Unfortunately, as with many intended AHK projects, I simply haven't got enough spare time for these things, but...
Since I'll be spending time at work with AHK more, and I will be looking into unobtrusively manipulating browser windows, I might be able to update this post eventually...
Might take a while tho... |
|
| Back to top |
|
|
Jon
Joined: 28 Apr 2004
Posts: 360
|
| Posted: Wed Jun 07, 2006 6:23 pm Post subject: |
|
|
I knew this topic was here somewhere. I've looked before but couldn't find it.
Very useful tutorial. Thanks for bumping it. |
|
| Back to top |
|
|
Guest
|
| Posted: Wed Jun 07, 2006 7:03 pm Post subject: |
|
|
very informative...thanks...any other "gems" buried in the forum that we newcomers may have missed?
Thanks Very good read... |
|
| Back to top |
|
|
toralf
Joined: 31 Jan 2005
Posts: 3842
Location: Bremen, Germany
|
| Posted: Wed Jun 07, 2006 8:20 pm Post subject: |
|
|
There is always the Catalogue of All Scripts and the search function of this forum.
Since I read nearly all posts, I remember sometimes that a certain topic has been solved, so I know what I have to search. :) But my knowledge only goes back 1,5 years. The post of the time before that are only known to a few (e.g. BoBo, Rajat and of cause Chris).
_________________
Ciao
toralf  |
|
| Back to top |
|
|
|
|
You can post new topics in this forum
You can reply to topics in this forum
|
Powered by phpBB © 2001, 2005 phpBB Group
|
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
