Author: Bogdan Polak BSC

Temporarily I have to break the theme of project architecture in Delphi.  You have certainly heard that the Emabarcadero acquired Sencha (official press release). In addition to the fact that I love Delphi, I’m also a big fan of JavaScript and the ExtJS team that has done a brilliant and super professional job. So I decided to make some blog entries about JavaScript and ExtJS dedicated for VCL developers (Delphi / C ++).

I’m impressed with Marc Gusmano article on the Sencha Blog. Please read and try it yourself. I will try to explain JS magic included in this demo project in the following posts, but I think that I should start with JS kindergarten.

Setup JavaScript developer environment.

Maybe you heard that advanced IDE isn’t required to develop JS project, but you need an only standard text editor and a default Web browser. True, but only for a moment. When you make the first mistake (software bug) then you find that you need something more. You can invest in a commercial integrated environment like JetBrain WebStorm, but also can setup lite version of it by yourself. You will need:

1. Web browser developer extension (tools)
2. Code Editor supporting Web development

Web browser developer tools.

All popular browsers allow you to enable, open or install Developer Tools. Just try to search for your browser name and Developer Tools to figure out to do it. I recommend Chrome browser and it’s Developer Tools, but also like Safari Developer Tools. Install and try some browsers to find your preferred one. Developer tools allow to:

• review and edit HTML or CSS nodes (elements) and view other page resources,
• run JavaScript with an integrated debugger (set watches and breakpoints, inspect variable values, step through code, live edit your code, view event listeners and more),
• use JavaScript console to view errors, but also review application warnings and review diagnostic messages,
• and many other functions like to monitor and inspect HTTP requests and responses, verify performance by profiling the time and system resources, measure use of memory, inspect accessibility properties, test your site with a different browser or screen resolutions.

Most of this developer tools are very useful but at the begging, we will focus on two of them: the console and the debugger.

JavaScript console

Open developer tools, find console and type following code:

.

function printTriangle (n, char) {
    if (n>1) printTriangle(n-1, char);
    var s='';
    for (i=0; i<n; i++) s+=char;
    console.log(s);
};

The console allows us to test JavaScript snippets as it was shown above, but we can also run and test script code loaded with web page resources. It could be useful especially when we’re working with JS framework, like ExtJS. We can also inspect current variables (available in the global scope):

We will use JS console to output our code diagnostic information. For example to verify if AJAX HTTP call returns proper data.

JavaScript debugger

The debugger is extremely useful and you will have to use it many times when developing front-end js code. There are plenty of docs and blog posts on this subject. For Chrome DevTools you can read the official doc page and step-by-step, interactive tutorial by Kayce Basques (Technical Writer at Google).

• Doc: Chrome DevTools Overview
• Tutorial: Get Started with Debugging JavaScript in Chrome DevTools

Okey not it’s time for our own exercises. We will start with a very simple HTML page. Just create an empty text document, and save it into index.html file. Type or copy following code:

<screen01.png>

To copy above JS HTML code jump to my gist snippet, created here. When we open it in the Chrome web browser with the Chrome DevTools we should see:

We can switch to the Sources tab, define breakpoint in our code and reload page (refresh), then js debbuger be activated:

Try to work and play with this code. For example, you can add date just after the number, generate more rows, and many other. As a little more difficult task you can generate random names and add them to each data row.

---

Reduce development time and get to market faster with RAD Studio, Delphi, or C++Builder.
Design. Code. Compile. Deploy.
Start Free Trial   Upgrade Today

   Free Delphi Community Edition   Free C++Builder Community Edition

---