Tutorial > Introduction
The ChemDoodle Web Components library is a JavaScript library and runs in the browser. To begin, please download and install ChemDoodle Web Components. The rest of this page will cover some introductory material.
We will not cover the basics of JavaScript here, but the following resources will provide more instruction:
For those that know the basics, we also recommend reading Programming languages in chemistry: a review of HTML5/JavaScript, written by Kevin Theisen of iChemLabs and published in the Journal of Cheminformatics.
Hello ChemDoodle!
To start, let's just write a simple script that displays a popup with the current version of the ChemDoodle Web Components library installed. To use JavaScript in HTML web pages, all code must be encapsulated in <script> tags. We will use a function called alert() to popup the message "Hello ChemDoodle!". Write the function as follows in the <body> tag of your HTML file:
<script>
let message = 'Hello ChemDoodle!';
alert(message);
</script>When you load your webpage in a browser, the message "Hello ChemDoodle!" should appear. You can click on the Run button above to see this in action right now. Now that you can see the message, let's see how to access the ChemDoodle Web Components library.
When you link the ChemDoodleWeb.js file as a URI resource in your webpage, a single variable, ChemDoodle, is placed into the global JavaScript namespace for that page. All functions in this library can be accessed through this single ChemDoodle variable. So let's just make sure that ChemDoodle Web Components was properly installed by viewing its version. We can obtain the version by calling the ChemDoodle.getVersion() function. So let's modify our script to display this as follows:
<script>
let message = 'The version of ChemDoodle installed is: ' + ChemDoodle.getVersion();
alert(message);
</script>Again, reload the page and the new message with the version number of the library will be displayed. You can click on the Run button above to see this behavior now. If you do not see the message or the version number, then an error has occured. Your browser of choice has JavaScript developer tools to help you with debugging.
Debugging JavaScript
Every programmer will have to debug code at some point. Unfortunately, the debugging process for JavaScript is a bit more cryptic than for other programming languages. Every major browser has tools and strengths for JavaScript development. Our team prefers to debug JavaScript in Google Chrome. The following lists a few JavaScript debugging resources:
- The Firefox JavaScript Debugger
- Debugging JavaScript in WebKit based browsers (Safari/Chrome)
- Debugging JavaScript in Opera
- Some JavaScript debugging tips
