2011-06-10

Tip: use JavaScript as a calculator in Firefox and Chrome

The following tip allows you to quickly perform calculations via JavaScript in Firefox and Chrome. Many people use Google for this purpose, but this tip even works if your computer is offline.

The basic idea

javascript URLs allow you to perform calculations in a web browser. For example, type the following into the address bar (or click on the link):
    javascript:alert(7*45)
With the keywords feature [1] of Chrome and Firefox, you can abbreviate long URLs, including the one above. In this post, we will create a “calculator” keyword so that the previous calculation can be performed by typing just
    js 7*45
You can see that the keyword is invoked by typing the command js and the argument 7*45, separated by a space. You need to specify the following data to create a keyword:
  • Name: a short description what the keyword does. For example, you can call the calculator keyword “JavaScript calculator”.
  • Keyword: the command used to invoke the keyword. For the calculator keyword this value is, obviously, js.
  • URL: the URL that defines what the keyword does. Usually, this URL has a place holder %s where the argument is to be filled in. For example, you could define a keyword for a Google search via the URL
        http://www.google.com/#q=%s
    
    If a keyword does not need an argument then you omit the %s.
The following sections show you how to create the calculator keyword in Chrome and Firefox.

Creating the calculator keyword in Google Chrome

Go to “Preferences → Basics → Search → Manage Search Engines...” and create a new entry:
  • Name: JavaScript calculator
  • Keyword: js
  • URL: javascript:alert(%s)

Creating the calculator keyword in Firefox

In Firefox, you can use a shorter URL, because it displays the result of a JavaScript computation in the window. In contrast, Webkit browsers such as Chrome and Safari need a dialog to do that. For example, this URL works in Firefox:
    javascript:7*45
To create a keyword in Firefox, you do the following:
  • Execute the menu command “Bookmarks → Show All Bookmarks”. Then use the menu with the sprocket symbol to perform “New Bookmark...”.
    • Alternatively, “New Bookmark...” is also available via a the context menu (=right-click) of the bookmarks toolbar.
  • Enter the data:
    • Name: JavaScript calculator
    • Location: javascript:%s
    • Keyword: js

JavaScript you can use

  • Arithmetic operators: addition (+), subtraction (-), multiplication (*), division (/), modulo (%).
        77 / 11
         7
        
        3.16 * 5
         15.8
        
        10 % 7
         3
    
  • Properties and methods of the global object Math [2]:
    • Math.PI
    • Math.pow(base, exponent)
    • Math.sqrt(x)
    • Math.sin(x)
  • Converting to and from hexadecimal, binary, etc.
        (255).toString(16)
         'ff'
        
        parseInt("ff", 16)
         255
    
    You need to put an integer in parenthesis to invoke a method on it. Otherwise the dot will be mistaken for a decimal point. Alternatively, you can type two dots or append .0.

Related reading

  1. Browser keywords: using the address bar as a command line
  2. Math - MDN Docs
  3. Implementing bookmarklets in JavaScript

No comments: