W3Docs

Тема

Русский

Начало работы с JavaScript ​

Написание вашей первой программы на JavaScript ​

HTML не умеет считать, он не может определить, правильно ли кто-то заполнил форму. HTML лишь позволяет людям читать текст, смотреть видео, рассматривать изображения и переходить по ссылкам. Вам нужен JavaScript, чтобы добавить вашим веб-страницам «интеллект» и они могли реагировать на посетителей сайта. Так JavaScript помогает сделать ваши сайты более привлекательными, эффективными и полезными.

JavaScript сложнее, чем HTML или CSS, и главная цель этой книги — помочь вам начать мыслить как программист. Программа на JavaScript содержит такие символы ({ } [ ] ; , () !=) и много незнакомых слов (var, null, else if). Можно сказать, что изучение языка программирования во многом похоже на изучение другого языка. Вам нужно выучить новые слова и понять, как соединять их вместе.

Что такое компьютерная программа? ​

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

Если вы хотите вывести приветственное сообщение с использованием имени посетителя веб-страницы: «Добро пожаловать, John Doe!», вам нужно выполнить несколько действий:

  • Узнать имя посетителя;
  • Получить ответ посетителя;
  • Вывести сообщение на веб-страницу.

Когда вы хотите создать программу на JavaScript, вы должны определить шаги, необходимые для достижения вашей цели. После того как вы узнаете эти шаги, вы переведёте свои идеи в программный код — слова и символы, которые заставляют веб-браузер вести себя так, как вам нужно.

Как добавить JavaScript на страницу ​

Веб-браузеры понимают HTML и CSS и преобразуют эти языки в визуальное отображение на экране. Веб-браузер ожидает HTML, поэтому вы должны явно сообщить браузеру, когда появляется JavaScript, используя HTML-тег <script>.

После открытия предпочитаемой консоли (например, Node.js) вам нужно лишь подключить скрипт к веб-странице. Чтобы связать JavaScript со страницей HTML, нужно использовать элемент <script>, который помогает вставлять программы JavaScript в любую часть HTML-документа. Например:

javascript Hello world example

html
<!DOCTYPE HTML>
<html>
  <body>
    <p>Before the script...</p>
    <script>
      alert('Hello, world!');
    </script>
    <p>...After the script.</p>
  </body>
</html>
Try it Yourself »

Давайте обсудим открывающий и закрывающий теги <script>. Если вы хотите добавить скрипт на страницу, начните с вставки тегов, которые содержат сам скрипт или ссылку на внешний файл, содержащий скрипты. Во многих случаях вы размещаете теги <script> в <head> страницы, чтобы аккуратно организовать ваш код JavaScript в одной части веб-страницы.

У элемента <script> есть несколько атрибутов, которые сегодня мы используем не так часто. Но мы всё ещё можем встретить их в старом коде:

Атрибут type: <script type=…>

В старом HTML — HTML4 — для скрипта требовался type. Раньше это было type="text/javascript", но сегодня это не требуется. Более того, современный стандарт HTML полностью изменил значение этого атрибута. Сегодня мы можем использовать его для модулей JavaScript. Но о модулях мы поговорим позже, так как это продвинутая тема.

Атрибут language: <script language=…>

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

Внешние файлы JavaScript ​

Как мы уже упоминали ранее, использование тега <script> позволяет добавить JavaScript на одну веб-страницу. Но вам также нужно создавать скрипты, которыми вы хотите делиться со всеми страницами вашего сайта. Однако простое копирование и вставка одного и того же кода JavaScript на каждую страницу — не лучшая идея, особенно если у вас сайт с сотнями страниц.

Короче говоря, мы используем внешние скрипты, когда у нас много кода JavaScript. Так мы получаем повторное использование кода, поскольку один файл JavaScript можно использовать на нескольких HTML-страницах. Расширение файла JavaScript — .js. Если мы хотим использовать внешний скрипт, нужно поместить имя файла скрипта в атрибут src (source) тега <script>:

javascript source attribute

css
<script src="W3DocsScript.js"></script>

С помощью атрибута src мы можем подключать файлы скриптов к HTML.

javascript source attribute

css
<script src="/path/W3DocsScript.js"></script>

В этом примере /path/W3DocsScript.js — это абсолютный путь к скрипту, который также может быть относительным путём от той же страницы. Например, значение src my-script.js указывает на этот файл рядом с текущей страницей.

Мы также можем указать полный URL, который будет выглядеть так:

javascript src url

css
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Если мы хотим подключить несколько скриптов, следует использовать несколько тегов:

javascript src multiple tags

css
<script src="/W3DocsScript1.js"></script>
<script src="/W3DocsScript2.js"></script>
...

Если src задан, содержимое скрипта будет проигнорировано. Это означает, что один тег <script> не может одновременно содержать атрибут src и код внутри. Это просто не сработает:

script tag with src attribute

html
<!DOCTYPE HTML>
<html>
  <body>
    <p>Before the script...</p>
    <script src="W3DocsScript.js">
      alert("Hello, world!"); // the content is ignored, because src is set
    </script>
    <p>...After the script.</p>
  </body>
</html>
Try it Yourself »

Нам нужно выбрать либо внешний скрипт с атрибутом src, либо обычный <script> со встроенным кодом. Только после этого мы можем разделить этот пример на два скрипта, чтобы он работал:

javascript example into two scripts

html
<!DOCTYPE HTML>
<html>
  <body>
    <p>Before the script...</p>
    <script src="W3DocsScript.js"></script>
    <script>
      alert("Hello, world!");
    </script>
    <p>...After the script.</p>
  </body>
</html>
Try it Yourself »

Ваша первая программа на JavaScript ​

Давайте начнём программировать, ваша первая программа будет очень простой:

  • Откройте простой HTML-файл в вашем любимом текстовом редакторе.
  • Перед закрывающим тегом </body> щёлкните по пустой строке и введите: <script>
  • Нажмите клавишу Return, чтобы создать новую пустую строку, и введите: alert('Welcome to W3Docs');Поздравляем! Вы набрали первую строку кода JavaScript.
  • Затем введите </script>. Код должен выглядеть так:

Javascript alert example

html
<!DOCTYPE HTML>
<html>
  <head>
    <link href="../_css/style.css" rel="stylesheet" />
  </head>
  <body>
    <p>Before the script...</p>
    <script>
      alert('Welcome to W3Docs');
    </script>
  </body>
</html>
Try it Yourself »
  1. Запустите веб-браузер и откройте файл test1.html, чтобы просмотреть его. Обратите внимание, что страница пустая, когда появляется окно alert.
  2. Нажав кнопку OK в окне Alert, вы закроете его. После того как окно Alert исчезнет, веб-страница появится в окне браузера.

Написание текста на веб-странице ​

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

  • Откройте файл test2.html в текстовом редакторе. Хотя теги <script> обычно размещают в <head> веб-страницы, вы можете поместить их и программы JavaScript прямо в тело страницы.
  • Под <h1> Writing to the document window </h1> введите этот код:

javascript document write example

html
<!DOCTYPE HTML>
<html>
  <head>
    <link href="../_css/style.css" rel="stylesheet" />
  </head>
  <body>
    <p>Before the script...</p>
    <script>
      document.write('<p>Welcome to W3Docs!</p>');
    </script>
  </body>
</html>
Try it Yourself »

Document.write() — это команда JavaScript, похожая на функцию alert(); она выводит всё, что вы поместите между открывающей и закрывающей скобками. В этом примере на страницу добавляется HTML <p>Hello world!<p>: абзацный тег и два слова.

  1. Теперь сохраните страницу и откройте её в веб-браузере. Как видите, страница открывается, и «Welcome to w3Docs» появляется под заголовком.

Консоль JavaScript в Chrome ​

Многие веб-разработчики предпочитают использовать браузер Google Chrome. Его атрибут DevTools даёт вам множество способов исправлять и настраивать проблемы в HTML, CSS и JavaScript. Консоль JavaScript — отличное место для поиска ошибок и опечаток в вашем коде. Она также показывает строку в коде, где произошла каждая ошибка.

Javascript console log example

html
<!DOCTYPE HTML>
<html>
  <head>
    <link href="../_css/style.css" rel="stylesheet" />
  </head>
  <body>
    <p>Before the script...</p>
    <script>
      alert('Welcome to W3Docs');
    </script>
  </body>
</html>
Try it Yourself »

Нажмите кнопку меню Customize, чтобы открыть консоль JavaScript, и выберите Tools→JavaScript Console. Или используйте сочетание клавиш Ctrl+Shift+J (Windows) или ⌘-Option-J (Mac) и т. д.

Практика ​

Какие из следующих утверждений верны о начале работы с JavaScript в веб-разработке?

Считаете ли это полезным?

Предпросмотр dual-run — сравните с маршрутами Symfony на продакшене.