{"id":887,"date":"2013-04-11T12:49:04","date_gmt":"2013-04-11T02:49:04","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=887"},"modified":"2013-04-11T12:49:04","modified_gmt":"2013-04-11T02:49:04","slug":"bookmarklet-via-javascript-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/bookmarklet-via-javascript-primer-tutorial\/","title":{"rendered":"Bookmarklet via Javascript Primer Tutorial"},"content":{"rendered":"
\"Bookmarklet<\/a>

Bookmarklet via Javascript Primer Tutorial<\/p><\/div>\n

\nHave you heard of Bookmarklets?<\/p>\n

Are you a person with a cluttered (thoughtfully placed, of course) desk?<\/p>\n

Yes? Read on … even if not … read on … why?<\/p>\n


\n<html>
\n<head>
\n<\/head>
\n<body>
\n<script type=”text\/javascript”><\/p>\n

while (“abracadabra” != prompt(“Guess the magic word?”).toLowerCase()) {
\n alert(“Bad Luck”);
\n}
\ndocument.write(“<html><body><p>You win a cupee doll!<\/body><\/html>”);<\/p>\n

<\/script>
\n<a href=’#’ onclick=’javascript: while (“abracadabra” != prompt(“Guess the magic word?”).toLowerCase()) { alert(“Bad Luck”); } document.write(“<html><body><p>You win a cupee doll!<\/body><\/html>”);’>Click me for another (confirmed) go … but limited offer on cupee dolls!<\/a>
\n<\/body>
\n<\/html>
\n<\/em><\/strong><\/p>\n

Look at the cutesy wootsey HTML\/Javascript above. Isn’t it cuuuuuuute?!
\n Isn’t it sweeeeeet?!<\/p>\n

♫ Oh, aint she sweet, when she’s walking down the street,
\n Well I ask you very confidentially … aint … she … sweet. ♫ <\/p><\/blockquote>\n

Enough of a sell job?<\/p>\n

Okay look at the Javascript of one vs Javascript of one below in the a tag onclick bit. So you just place javascript: in front of the Javascript code required to do something interesting, all squeezed together onto the one line … this is where the cluttered desk people may continue breathing easily but others may falter.<\/p>\n

Well, if you can place this sort of thing into a browser Bookmark then that is a
\n Bookmarklet. Remember the Javascript calculator rave in previous tutorials?<\/p>\n

Bear in mind we show Firefox in tutorial but all browsers have something similar, whether that be called Bookmarks or Favourites.\n<\/p>\n

Click on picture above<\/a> to go to tutorial about Bookmarklets.<\/p>\n

Link to downloadable source code of HTML above is bmark.html<\/a> which you need to rename in order to try.<\/p>\n

Did you know …<\/em><\/strong>
\nJavaScript makes a great easy-access Calculator?<\/p>\n

Try typing the lines below into the address bar of your favourite browser:<\/p>\n

Javascript: eval(512 \/ 380);
\nJavascript: eval(512 * 380);
\nJavascript: eval(512 – 380);
\nJavascript: eval(512 + 380);
\nJavascript: eval(512 % 380);<\/p>\n

These days we spend so much time on the Internet it is a much quicker way to get to a calculator!\n<\/p>\n

If this was interesting you may be interested in this<\/a> too.<\/p>\n