I have been goofing around a lot with JavaScript lately. It’s fun to explore because every time I find and open a new door of understanding, there are two more doors to open and explore. I am currently in the room of browser functionality and thats where I found my bookmarklet.
Making a bookmarklet was an easy way to put a bit of code into action without building anything too big. As it turns out, it’s surprisingly useful. If you have ever wondered when a web page was published, it will tell you, (fairly accurately) just that.
A bookmarklet is essentially a bookmark that holds a bit of JavaScript code that a web browser, like Chrome or Firefox, will execute. Just like any bookmark it is a bit of information held within a link. A link is which is just a reference), but instead of referring to a web page, it refers to some instructions coded in JavaScript. The browser knows the code lingo and does exactly what it is instructed to do.
The instructions look like this (Javascript and HTML translated to plain English):
<a href='javascript:
“Hey browser, this looks like its a link, but no, here comes some JavaScript instructions.”
(function(){if(location.hostname === "www.google.com")“This is the beginning of the Javascript function: IF the user is on google.com…”
{window.location.href=document.URL+"&as_qdr=y15"}“THEN: take the page the user is on and change it (make it EQUAL to) the page they are on ADD ON ‘as_qdr=y15’.” (That is the instruction for Google to tell you the dates of all the pages on the results page.)
else{alert("This only works on Google Searches")}})()'“If the person is not on google.com, ELSE pop-up an alert window and tell them the bad news.”
>Google Date Finder</a>
“Finally, end the Javascript code. Specify the text that anchors the link. End the link code.”
When its all done it looks like this:
<a href='javascript:(function(){if(location.hostname === "www.google.com"){window.location.href=document.URL+"&as_qdr=y15"}else{alert("This only works on Google Searches")}})()'>Google Date Finder</a>And amounts to this with the super-sexy CSS styled version below:
Google Date FinderGoogle Date Finder
Just drag one of the links into your bookmark bar, make a Google search, click the “Google Date Finder” bookmarklet and Whammy! each one of the links has a date on it.