| Next page | Contents page |

The development environment

For graphical work it is best to use an IDE (Integrated Development Environment). That is a kind of super text editor that can also organise all the files we need in any project and enables the work to be seen in a browser. IDEs also recognise the syntax of the programming language and are able to point errors out and suggest what to write next.

Netbeans

If you do not already have an IDE I recommend Apache Netbeans. It is completely free. Here are the steps for setting it up to do what we need:

Netbeans is written in a programming language called Java. That is quite different from the language we will be using: Javascript. Someone made a very unfortunate naming decision back in the 1990s. The two languages are very different.
  1. If you do not have Java installed on your system go to java.com to download and install that.
  2. Then go to netbeans.apache.org/front/main/download/nb18/ to download and install version 18 of Netbeans. (There are more recent versions but they require Java later than version 8 and you cannot easily get that. I use version 18 of Netbeans and I know it works well in Windows 11 using Java 8.)
  3. Run Netbeans. On the Tools menu select Plug-ins. This opens a window where you need to select Available plug-ins and look for HTML5. Select and install that.
  4. On the File menu select New Project. This opens a window for choosing the kind of project. You want HTML5/JS Application. Follow the steps to give the project a name (First?), No template, and you don't want any of the tools in the last step.
  5. In the Run menu select Set Project Browser and choose the browser that you have on your system and want to use.

Setting the new project will automatically create an HTML file. It will have some more things in the head section than we saw before but just keep those.

The final step, choosing the browser, ensures that you can run the HTML from a "localhost" server that is part of Netbeans. This means you do not have to have a real online server for testing the project.

Other IDEs

There are several other free IDEs. Ones reckoned to be good are listed here: www.educative.io/blog/best-javascript-ides-code-editors. Unfortunately that list does not say whether each program has the localhost capability, for testing your project.

There is a lot of useful information about other ways of working here: developer.mozilla.org/en-US/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server. This very useful Mozilla site will often be linked to later in these notes, where it will be referred to as MDN.

Exercise

Download and install an IDE. Follow its documentation to start a project.

| Next page | Contents page |