Первая программа на JavaScript

от

Для создания первой программы на JavaScript нам потребуется минимальное знание HTML, а также любой текстовый редактор и браузер, например, Google Chrome, Edge и т.д. Для нашей первой программы нам будет достаточно обычного «Блокнота» Windows, а уже далее мы настроим для работы с JavaScript редактор VS Code и будем работать в нём.

Hello JavaScript

Создадим в любом месте на компьютере папку с любым названием, например «app». У меня это будет папка «C:\app»

Папка программы JS
Папка для программы JS

Внутри папки создадим новый текстовый файл и назовем его app.html:

Файл app.html
Файл app.html

Теперь откроем этот файл с помощью приложения «Блокнот» и напишем следующий код:

<html>
<body>
Это наша первая html-страница с JS.
<br>
  <script>
    document.write("Привет, JavaScript!")
  </script>
<br>
А это опять текст html-страницы
</body>
</html>

Сохраните файл и запустите его в браузере, сделав по нему двойной клик мышкой. В итоге, в браузере мы увидим следующее:

Первая программа JS
Первая программа JS

В файле мы определили стандартные элементы html — теги html и body . Внутри тегов body мы разместили строки «Это наша первая html-страница с JS.» и «А это опять текст html-страницы» и между ними скрипт JS.

Программы написанные на JavaScript также часто называют скриптами

Скрипт JS подключается на веб-страницу с использованием тегом <script></script>. В данном случае, наш скрипт выполняет всего одно действие — выводит строку «Привет, JavaScript!». Скрипты JS можно подключать в разных частях документа, а именно:

  • между тегами <head></head>
  • между тегами <body></body>

Нередко, скрипт подключается как можно ближе к закрывающему тегу </body>, что позволяет оптимизировать загрузку страницы. Также следует отметить, что в коде html-страницы нередко можно встретить такой способ подключения скрипта:

<script type="text/javascript">
....
</script>

Раньше, чтобы веб-браузер «понимал», что внутри тегов <script></script> находится именно код JavaScript, требовалось обязательно указывать атрибут type, однако сейчас, по умолчанию, веб-браузер принимает, что внутри этих тегов находится именно код JavaScript, поэтому атрибут type допускается не указывать.

Многострочный код JavaScript

Нередко, код JavaScript состоит из нескольких строк кода. В этом случае, каждая строка кода должна заканчиваться точкой с запятой. Например, перепишем код нашей программы следующим образом:

<html>
<body>
Это наша первая html-страница с JS.
<br>
  <script language="JavaScript">
    document.write("Привет, JavaScript!");
    document.write("<br><b>Вторая строка JavaScript</b>")
  </script>
<br>
А это опять текст html-страницы
</body>
</html>

В итоге наша страница станет выглядеть следующим образом:

JS код на веб-страницеОднако, стоит отметить, что современные веб-браузеры могут правильно обрабатывать JS-скрипты даже в том случае, если очередная строка не заканчивается точкой с запятой, но всё же злоупотреблять такой возможностью не стоит, особенно, если ваши JS-скрипты будут в дальнейшем минифицированы.

Итого

Код JavaScript подключается на веб-страницу с использованием тегов <script></script> . В первой нашей программе на JavaScript мы просто вывели некий текст на страницу. По большому счёту, точно эту же операцию мы могли бы написать и на «чистом» html, однако этот пример демонстрирует именно то, как код JavaScript встраивается внутрь HTML-код, что делает JavaScript особенным языком — он легко встраивается внутрь страниц и позволяет добавлять функциональность нашим страницам.

Оставьте комментарий