JavaScript for VBA Developers: Getting Started


The first thing you need to understand about JavaScript is that it’s not a general purpose programming language. For instance, it doesn’t come with any APIs that deal with IO (Input-Output) operations. On its own it cannot open a text file, read from it, or write to it. Instead, it requires a host environment in which to work. The host environment provides the APIs. This situation is due to historical reasons.

In the beginning, JavaScript – or LiveScript as it was originally known – was designed to be used in a web browser. Recently, however, ‘server-side’ JavaScript has appeared in non-browser applications such as Node.js and MongoDB – applications written in C/C++ that allow the user to write and execute JavaScript code using the APIs provided by the application. The installation and use of Node.js and/or MongoDB can be a bit daunting for the first-timer so, in this blog, I’m going to stick to JavaScript in the browser, ie. ‘client-side’ JavaScript.

To write JavaScript, you can use a fully-blown IDE, such as Visual Studio or WebStorm or any one of the multitude of others which have all the bells and whistles you’ll possibly ever need but, as a beginner, all you really need is a simple text editor. I use Notepad++ on Windows and Chrome Dev Editor on my Chromebook, but any text editor will do. A popular alternative is SublimeText.

So, having installed your text editor, create a text file called ‘index.html’ with the following code in it:

<!doctype html>
<html>
  <head></head>
  <body></body>
</html>

and save it.

“What’s with the HTML and why not JavaScript”? In ‘client-side’ JavaScript, when an HTML file is loaded by the browser it creates a ‘document’ object. This object exposes properties and methods (ie. it’s an API) and JavaScript can use these to enhance the appeal of the web page running in the browser (ie. the document object).

As you can see, the above HTML document is pretty bare and, to be frank, pretty useless. If you load it into your browser (eg. open Internet Explorer and, using Windows Explorer, drag your index.html file onto IE) you’ll see a blank page that does nothing.

Dev Tools

With this useless page open, press the F12 function key in IE (Ctrl+Shift+I, if you’re using Chrome). Now you’ll see the browser’s development tool (typically at the bottom of the screen in IE and on the right of the screen in Chrome). These tools are very, very useful.  It is worth your while spending some time exploring them. Amongst other things, they allow you to:

  1. debug your JavaScript code using the ‘Console’ (something very, very handy); and
  2. make changes to the loaded document and see the effect immediately (also very, very handy).

For now, click on the ‘DOM Explorer’ tab (‘Elements’ in Chrome). Here you’ll see the HTML code of your web page as the browser sees it. Again, not very interesting right now, but we’ll come back to the this later.  For now, I want you to go back into your text editor and add some JavaScript to index.html:

<!doctype html>
<html>
  <head></head>
  <body>
    <script type="text/javascript">
      document.body.style.backgroundColor = 'red';
    </script >
  </body>
</html>

Please note that the whitespace after the word ‘script’ in the closing script tag (ie. </script >)  should not be there.  I had to put it there for this blog as WordPress doesn’t like people running scripts from their blog posts on other peoples’ web browsers.  So, in your .html file don’t include this trailing whitespace (ie. have …script> not …script >).

Now reload this file – you can either ‘drag and drop’ as you did before or, you can simply click the ‘reload’ icon in your browser.   Provided you didn’t change the file name or its location, the latter will work just as well as the former.

You should see that your web page now has a red background.  This should come as no surprise as your JavaScript code was pretty self-explanatory: you take the ‘body’ element of the ‘document’ object, examine its ‘style’ collection and set its ‘backgroundColor’ property to red.  You should be familiar with this style of object model coding in VBA where you’ve probably had to refer to the ‘value’ of a ‘range’ on a ‘sheet’ in the current ‘workbook’:

ThisWorkbook.Sheets(1).Range("A1").Value = "red"

Now go back into the dev tool and take a look at your code.  On the ‘Elements’ page in the frame at the bottom half of the screen you’ll see a ‘Style’ tab.  If you activate it (if it isn’t already) you’ll see the ‘background-color’ is ‘red’.  Go ahead and double click on this ‘red’ value.  It’ll change to a text box expecting you to input something.  Go ahead and choose another color, eg. orange.  You’ll see your web page changes colour instantly.  This ability to change a documents style ‘on the fly’ makes the dev tool a useful companion when developing a web page.  Note that this change only applies to the document in memory.  The code in your index.html file is not updated.

Now I want to demonstrate how to use the dev tool to check for any errors in page loading, be they JavaScript, HTML or CSS errors. I won’t be talking about the Debugger in this post as that deserves a whole Blog post. Instead I’m going to talk about the Console. Alter your index.html file to look like this:

<!doctype html>
<html>
  <head></head>
  <body>
    <script type="text/javascript">
      document.body.style,backgroundColor = 'green';
    </script >
  </body>
</html>

Note how I’ve used a comma instead of a full-stop in between ‘style’ and ‘backgroundColor’. Go ahead and reload this modified file. You’ll see that you get a blank page, not a green one. Now open the dev tool and instead of ‘Elements’, click on the ‘Console’ tab. You’ll see an error message in red and you’ll also see (to the right) a reference to the file and line number (index.html:6 in my file). If you examine the error message in full you may also get the column number of where the error occurred on the line. I find the Console is the first place I go to if my page is not working as I expect it to. Unsurprisingly, 100% of the time the computer is NOT wrong.

That concludes this blog. As a VBA developer, I hope it’s piqued your interest and enables you to ‘get started’ with JavaScript.

Categories:JavaScript

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: