- 1. Task
- 2. Solution
- 2.1. Creating a project in the WebStorm IDE
- 2.2. Creating an empty project
- 2.3. Creating an HTML file
- 2.4. Running the HTML file
- 2.5.2. Displaying a message in a separate window. Method alert()
- 2.6. Running the main.html file in the browser. Viewing results
Search other resources:
Demonstrate different ways of displaying a message:
- in a web browser document;
- in a separate dialog box.
- directly in HTML document;
- in a separate hello.js file that is connected to the HTML document.
2.1. Creating a project in the WebStorm IDE
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;
- 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;
- 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 Native – a project based on the React architecture proposed by Facebook. Detailed documentation on React Native architecture can be obtained 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
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
- 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”)
<body> ... </body>
In the most general case, the code can be written in one of three ways:
<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.
Here between the tags <script> … </script> there is a line
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:
<script src="myfile.js"> </script>
- myfile.js – name of the included file.
- using the context menu (Figure 11);
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
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
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>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src = hello.js> </script> </body> </html>
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