JavaScript. Приклад створення найпростішого додатку на мові JavaScript в IDE WebStorm

Приклад створення найпростішого додатку на мові JavaScript в IDE WebStorm

Даний приклад демонструє створення найпростішого додатку на мові JavaScript в інтегрованому середовищі WebStorm. За даним прикладом можна отримати програмний каркас для вивчення синтаксису та основних можливостей мови JavaScript та її інтеграції з HTML/CSS.


Зміст


Пошук на інших ресурсах:

1. Умова задачі

Використовуючи поєднання мов програмування HTML та JavaScript розробити програму, яка виводить на екран повідомлення “Hello, world!”. Програму розробити в інтегрованому середовищі WebStorm.

Продемонструвати різноманітні способи виведення повідомлення:

  • у документі веб-браузера;
  • в окремому діалоговому вікні.

Програмний код JavaScript повинен бути реалізований двома способами:

  • безпосередньо в документі HTML;
  • в окремому файлі hello.js, який підключається до документу HTML.

 

2. Виконання
2.1. Створення проекту в IDE WebStorm

Для розробки додатків на мовах JavaScript, HTML&CSS добре підходить інтегроване середовище розробки WebStorm від компанії JetBrains.

Після запуску на виконання інтегрованого середовища відкриється вікно запрошення, приблизний вигляд якого зображений на рисунку 1.

Для створення нового проекту потрібно вибрати команду “Create New Project”.

WebStorm. Вікно "Welcome to WebStorm"

Рисунок 1. Вікно “Welcome to WebStorm”

У результаті відкриється вікно “New Project”, зображене на рисунку 2.

WebStorm. JavaScript. Вікно вибору типу нового проекту

Рисунок 2. Вікно вибору типу нового проекту

Система пропонує наступні види проектів:

  • Empty Project – пустий проект;
  • Angular CLI – реалізація проекту на основі npm-модуля (JavaScript Package Manager), призначеного для реєстрації програмного забезпечення з терміналу. Більш детально про npm-модуль можна прочитати за наступним посиланням;
  • AngularJS – проект з використанням фреймворку з відкритим кодом AngularJS;
  • Bootstrap – проект на основі відкритого безкоштовного фреймворку Bootstrap, який використовується для front-end розробки сайтів. Отримати детальну інформацію про даний фреймворк можна за посиланням;
  • Cordova App – додаток з використанням платформи для розробки мобільних додатків Apache Cordova;
  • HTML5 Boilerplate – проект, що базується на використанні популяного шаблону з підтримкою HTML/CSS/JavaScript;
  • Meteor App – проект на основі веб-фреймворку MeteorJS, який використовує Node.js;
  • Node.js, Node.js Express – проекти на основі платформи з відкритим кодом Node.js, призначеної для створення мережевих застосунків. Детальну інформацію про фреймворки можна отримати тут і тут;
  • React App – проект на основі JavaScript-бібліотеки React з відкритим програмним кодом, яка використовується для створення інтерфейсів користувача у великих веб-застосунках, які використовують дані, що змінюються з часом без перезавантаження сторінки;
  • React Native – проект на основі React-архітектури, запропонованої компанією Facebook. Детальну документацію про архітектуру React Native можна отримати за посиланням;
  • Vue.js – проект на основі JavaScript фреймворку з відкритим кодом Vue.js, який використовується для створення користувацьких інтерфейсів. Детальну інформацію про даний фреймворк можна отримати за цим посиланням;
  • Yeoman – проект на основі набору додатків Yeoman (Yo), який дозволяє генерувати (створювати) проекти на будь-якій мові, в тому числі і JavaScript. Більш детально про Yeoman можна прочитати за цим посиланням.

 

2.2. Створення пустого проекту

У нашому випадку, поки що не потрібно використовувати додаткових бібліотек чи фреймворків. Тому, при створенні проекту потрібно вибрати Empty Project (рисунок 3).

У полі Location: встановлюється папка, в якій будуть розміщуватись файли проекту. У нашому випадку встановлюється папка

D:\Projects\WebStorm\Hello

За бажанням можна встановити іншу папку.

WebStorm. JavaScript. Вибір пустого проекту у вікні New Project

Рисунок 3. Вибір пустого проекту у вікні New Project

Після вибору кнопки Create, відкриється вікно середовища WebStorm, як показано на рисунку 4.

Вікно інтегрованого середовища WebStorm

Рисунок 4. Вікно інтегрованого середовища WebStorm

 

2.3. Створення HTML-файлу

Щоб запустити та протестувати код програми на JavaScript спочатку потрібно створити файл на мові HTML, який буде запускатись у деякому браузері. Для створення HTML-файлу можна використати один з двох способів:

  • клікнути правою кнопкою мишки на імені проекту “Hello” і в контекстному меню вибрати послідовність команд New->HTML File (рисунок 5);
  • у головному меню вибрати послідовність команд File -> New -> HTML File (рисунок 6).

WebStorm. JavaScript. Команда контекстного меню New->HTML File

Рисунок 5. Команда контекстного меню New->HTML File

WebStorm. JavaScript. Команда File->New->HTML File

Рисунок 6. Вибір команди створення HTML-документу з головного меню

Після виклику команди створення HTML-файлу відкриється вікно “New HTML File” (рисунок 7), в якому потрібно задати ім’я main (або інше) та вибрати версію мови “HTML 5 file”. Свій вибір потрібно зафіксувати клавішою Enter.

WebStorm. JavaScript. Задавання імені HTML-файлу та версії HTML 5

Рисунок 7. Задавання імені HTML-файлу та версії HTML 5

У результаті, в головному вікні середовища WebStorm буде створено заготовку на мові HTML, яка має наступний текст

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

</body>
</html>

На рисунку 7 зображено вигляд вікна середовища WebStorm після додавання HTML-файлу.

WebStorm. HTML. Базовий код файлу main.html

Рисунок 8. Проект Hello після додавання файлу main.html

 

2.4. Запуск HTML-файлу

Як відомо, HTML-файли відкриваються у веб-браузері. У нашому випадку запуску HTML-файлу виконується одним з двох способів:

  • кліком мишкою на кнопці з зображенням веб-браузера (рисунок 9);
  • вибором послідовності команд Run -> Run… -> main.html (якщо файл main.html запускається вперше) або Run->main.html (якщо файл main.html запускається повторно) як показано на рисунку 10.

Після виклику команди запуску файлу main.html відкриється один з вибраних браузерів з пустою сторінкою.

WebStorm. Перелік браузерів, що можуть виконати (відкрити) файл main.html

Рисунок 9. Перелік браузерів, що можуть виконати (відкрити) файл main.html

WebStorm. Команда запуску HTML-файлу

Рисунок 10. Запуск файлу main.html вперше (команда Run…) та повторно (команда Run ‘main.html’)

 

2.5. Додавання коду JavaScript

У файлі main.html код програми на JavaScript вписується між тегами

<body>
  ...
</body>

У найбіль загальному випадку код може бути вписаний одним з трьох способів:

1. Безпосередньо в html-файлі. У цьому випадку код на JavaScript розміщується між тегами

<script>
  ...
</script>

2. У файлі з розширенням *.js, який також підключається між тегами

<script>
  ...
</script>

3. Безпосередньо в html-файлі з поміщенням коду в атрибут події HTML-елементу.

У даній темі розглядаються перші два випадки.

 

2.5.1. Код JavaScript у тексті файлу main.html. Вивід повідомлення на сторінці веб-браузера з допомогою методу document.write()

Вигляд файлу main.html у випадку включення в нього коду JavaScript, що виводить повідомлення “Hello, world!” наступний

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <script>
    // Текст на JavaScript
    document.write("Hello, world!")
  </script>
</body>
</html>

Тут, між тегами <script>…</script> вписано рядок

document.write("Hello, world!")

який виводить повідомлення. Тепер можна запустити файл main.html у веб-браузері та перевірити роботу програми.

 

2.5.2. Вивід повідомлення в окремому вікні. Метод alert()

Можна викликати вікно для відображення повідомлення “Hello, world!”. У цьому випадку використовується виклик методу alert(). Модифікований фрагмент коду файлу main.html має вигляд:

...

<body>
  <script>
    // Текст на JavaScript
    // Виклик вікна з повідомленням
    alert("Hello, world!")
  </script>
</body> 

...

 

2.5.3. Виклик коду JavaScript, який був сформований в окремому файлі

Якщо розмір коду JavaScript великий, то доцільно розмістити (структурувати) його в одному або декількох окремих файлах.

Щоб в HTML-файлі викликати код програми на JavaScript, яка розміщується у файлі, потрібно використати рядок виду

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

тут

  • myfile.js – назва файлу, що підключається.

 

2.5.4. Додавання файлу на мові JavaScript

Процес додавання файлу на JavaScript подібний до створення HTML-файлу. Так само існує 2 способи додавання JavaScript-файлу до проекту:

  • з допомогою контекстного меню (рисунок 11);
  • з допомогою виклику послідовності команд File -> New -> JavaScript File (рисунок 12).

 

WebStorm. Додавання JavaScript-файлу до проекту з контекстного меню

Рисунок 11. Додавання JavaScript-файлу до проекту з контекстного меню

 

WebStorm. Додавання JavaScript-файлу до проекту

Рисунок 12. Команди головного меню для додавання JavaScript-файлу до проекту

У результаті відкриється вікно уточнення “New JavaScript file”, в якому потрібно задати ім’я файлу (рисунок 13) і натиснути клавішу Enter. У нашому випадку задається ім’я hello. У результаті система створить файл з іменем hello.js. Розширення *.js означає, що створюється файл на мові JavaScript.

WebStorm. Задавання імені JavaScript-файлу

Рисунок 13. Задавання імені файлу hello.js

 

Після створення файлу у вікні Project, що відображає структуру проекту, з’явиться файл hello.js (рисунок 14).

WebStorm. Відображення JavaScript-файлу в структурі проекту

Рисунок 14. Відображення файлу hello.js в структурі проекту

Файл JavaScript додано, тепер можна переходити до створення коду.

 

2.5.5. Написання коду JavaScript у файлі hello.js

З допомогою мишки або клавіатури можна перемикатись між файлами hello.js та main.html.

У файлі hello.js можна писати програмний код (скріпт) на мові JavaScript. У нашому випадку вписується рядок виведення повідомлення окремому вікні:

// У файлі hello.js вписується код на JavaScript
alert("Hello, world!")

На рисунку 15 відображено вікно редактора WebStorm з кодом JavaScript.

Вікно редактора WebStorm з програмою на JavaScript

Рисунок 15. Вікно редактора WebStorm з програмою на JavaScript

Для виведення повідомлення в головному документі веб-браузера у файлі hello.js можна використати метод document() за наступним зразком

document.write("Hello, world!")

 

2.5.6. Підключення JavaScript коду до файлу main.html

Для того, щоб виконувати скріпт, що розміщується у файлі hello.js, потрібно в файлі main.html вписати наступний код

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

Тут ім’я виконуваного JavaScript-файлу задається з допомогою атрибуту hello.js.

Після корегування, повний код файлу main.html буде мати такий вигляд:

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

Подібним чином в код HTML-файлу можна додавати будь-яку кількість файлів на мові JavaScript.

 

2.6. Запуск файлу main.html у браузері. Перегляд результатів

Після виконаних дій можна відкривати файл main.html у браузері. Цей процес вже був описаний в п. 2.4. Після відкриття файлу у деякому браузері, результат виконання програми має бути приблизно наступний

WebStorm. JavaScript. Програма "Hello, world!"Рисунок 16. Результат виконання програми