An example of creating a basic JavaScript application in the WebStorm IDE

This example demonstrates how to create a simple JavaScript application using the WebStorm framework. This example provides a framework for learning the syntax and basic features of JavaScript and its integration with HTML/CSS.

Search other resources:

1. Task

Using a combination of the programming languages HTML and JavaScript, develop a program that displays the message “Hello, world!” Develop the program in the integrated WebStorm environment.

Demonstrate different ways of displaying a message:

in a web browser document;
in a separate dialog box.

JavaScript code must be implemented in two ways:

directly in HTML document;
in a separate hello.js file that is connected to the HTML document.

⇑

2. Solution

2.1. Creating a project in the WebStorm IDE

For developing applications in JavaScript, HTML & CSS, the WebStorm integrated development environment from JetBrains is well suited.

After launching the integrated environment, a prompt window will open, an approximate view of which is shown in Figure 1.

To create a new project, select the Create New Project command.

Figure 1. “Welcome to WebStorm” window

This will open the “New Project” window shown in Figure 2.

Figure 2. New project type selection window

The system offers the following types of projects:

Empty Project;
Angular CLI is an implementation of a project based on an npm-module (JavaScript Package Manager) designed to register software from the terminal. You can read more about the npm-module here;
AngularJS – a project using the AngularJS open source framework;
Bootstrap is a project based on the open source Bootstrap framework used for front-end website development. You can get detailed information about this framework here;
Cordova App – an application using the Apache Cordova mobile application development platform;
HTML5 Boilerplate – a project based on the use of a popular template with HTML/CSS/JavaScript support;
Meteor App – a project based on the MeteorJS web framework using Node.js;
Node.js, Node.js Express – projects based on the open source Node.js platform for building networked applications. Detailed information about frameworks can be found here and here;
React App – a project based on the open source JavaScript library React, which is used to create user interfaces in large web applications that use data that changes over time without reloading the page;
React Native – a project based on the React architecture proposed by Facebook. Detailed documentation on React Native architecture can be obtained here;
Vue.js is an open source JavaScript project Vue.js that is used to create user interfaces. Detailed information about this framework can be found here;
Yeoman – a project based on the Yeoman (Yo) application suite, which allows you to generate (create) projects in any language, including JavaScript. You can read more about Yeoman here.

⇑

2.2. Creating an empty project

In our case, there is no need to use additional libraries or frameworks yet. Therefore, when creating a project, you need to select Empty Project (Figure 3).

The Location: field sets the folder where the project files will be located. In our case, the folder is installed

D:\Projects\WebStorm\Hello

You can install a different folder if you want.

Figure 3. Selecting an empty project in the “New Project” window

After selecting the Create button, the WebStorm window will open, as shown in Figure 4.

Figure 4. WebStorm framework window

⇑

2.3. Creating an HTML file

To run and test your JavaScript code, you first need to create an HTML file that will run in a browser. You can use one of two ways to create HTML file:

right-click on the project name Hello and select the sequence of commands New-> HTML File in the context menu (Figure 5);
in the main menu select the sequence of commands File-> New-> HTML File (Figure 6).

Figure 5. Context menu command New-> HTML File

Figure 6. Selecting the command to create an HTML-document from the main menu

After calling the command for creating an HTML file, the New HTML File window will open (Figure 7), in which you need to specify the name main (or another) and select the version of the HTML 5 file language. Fix your choice by pressing the Enter key.

Figure 7. Specifying the HTML File Name and HTML 5 Version

As a result, an HTML stub will be created in the main window of the WebStorm environment, which has the following text

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

</body>
</html>

Figure 8 shows the WebStorm window after adding the HTML file.

Figure 8. Hello project after adding main.html file

⇑

2.4. Running the HTML file

HTML files open in a web browser. In our case, the HTML file is launched in one of two ways:

by clicking the mouse on the button with the image of the web browser (Figure 9);
by selecting the sequence of commands Run-> Run …-> main.html (if the main.html file is started for the first time) or Run-> main.html (if the main.html file is started again) as shown in Figure 10.

After calling the command to run the main.html file, one of the selected browsers will open with a blank page.

Figure 9. List of browsers that can execute (open) the main.html file

Figure 10. Running the main.html file for the first time (Command “Run…”) and again (Command “Run main.html”)

⇑

2.5. Add JavaScript Code

In the main.html file, the JavaScript code is inserted between the tags

<body>
  ...
</body>

In the most general case, the code can be written in one of three ways:

1. Directly in the html-file. In this case, the JavaScript code is placed between the tags

<script>
  ...
</script>

2. In a file with the *.js extension, which is also connected between tags

<script>
  ...
</script>

3. Directly in the html-file with the placement of the code in the event attribute of the HTML-element.

The first two cases are considered in this topic.

⇑

2.5.1. JavaScript code in main.html text. Displaying a message on a web browser page using the document.write() method

The view of the main.html file in the case of including JavaScript code that displays the message “Hello, world!” is as follows

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <script>
    // JavaScript text
    document.write("Hello, world!")
  </script>
</body>
</html>

Here between the tags <script> … </script> there is a line

document.write("Hello, world!")

which prints a message. Now you can run the main.html file in a web browser and test the program.

⇑

2.5.2. Displaying a message in a separate window. Method alert()

You can call a window to display the message “Hello, world!” In this case, a call to the alert() method is used. The modified code snippet of the main.html file looks like this:

... 

<body>
  <script>
    // JavaScript text
    // Calling a message window
    alert("Hello, world!")
  </script>
</body>

...

⇑

2.5.3. Calling JavaScript code that was generated in a separate file

If the size of the JavaScript code is large, then it is advisable to place (structure) it in one or more separate files. To call the JavaScript code placed in the file in an HTML file, you need to use a line of the form

<script src="myfile.js"> </script>

here

myfile.js – name of the included file.

⇑

2.5.4. Including a JavaScript file

The process of adding a file in JavaScript is similar to creating the HTML file. There are also 2 ways to include a JavaScript file in a project:

using the context menu (Figure 11);
by calling the sequence of commands File-> New-> JavaScript File (Figure 12).

Figure 11. Adding a JavaScript file to a project from the context menu

Figure 12. The commands of main menu for adding a JavaScript file to the project

This will open the “New JavaScript file” refinement window, in which you need to specify the file name (Figure 13) and press the Enter key. In our case, the name hello is specified. As a result, the system will create a file named hello.js. The extension *.js means that the file is created in JavaScript.

Figure 13. Specifying the filename hello.js

After creating the file, the hello.js file will appear in the Project window, which displays the project structure (Figure 14).

Figure 14. Displaying the hello.js file in the project structure

The JavaScript file has been added, now you can move on to generating code.

⇑

2.5.5. Writing JavaScript code in the hello.js file

You can use your mouse or keyboard to switch between hello.js and main.html files. In the hello.js file, you can write program code (script) in JavaScript. In our case, the message output line is entered in a separate window:

// The hello.js file contains JavaScript code
alert("Hello, world!")

Figure 15 shows the WebStorm editor window with JavaScript code.

Figure 15. WebStorm editor window with JavaScript program

To display the message in the main document of the web browser in the hello.js file, you can use the document() method as follows

document.write("Hello, world!")

⇑

2.5.6. Include JavaScript code to the main.html file

In order to execute the script located in the hello.js file, you need to enter the following code in the main.html file

<script
  src = hello.js>
</script>

Here, the name of the JavaScript executable is specified using the hello.js attribute. After correction, the complete code of the main.html file will look like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <script
    src = hello.js>
  </script>
</body>
</html>

Likewise, you can add any number of JavaScript files to the HTML file code.

⇑

2.6. Running the main.html file in the browser. Viewing results

After completing the steps, you can open the main.html file in a browser. This process has already been described in clause 2.4. After opening the file in some browser, the result of the program should be something like the following

Figure 16. Program result

BestProg

JavaScript. An example of creating a basic JavaScript application in the WebStorm IDE