w3docs logo

Начните использовать Javascript

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

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

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

О компьютерной программе?

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

Если вы хотите отобразить приветственное сообщение с именем посетителя веб-страницы: “Welcome, John Doe!”, вам нужно сделать несколько шагов:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!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>

Мы должны выбрать либо внешний <script src="…"> или обычный <script> с кодом. Только после этого мы можем разделить этот пример на два скрипта для работы:

<!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>

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

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

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

    Поздравляем! Вы написали свою первую строку кода на JavaScript.

  • Затем введите </script>. Код должен выглядеть так: 
    <!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>
  • Запустите веб-браузер и откройте файл test1.html для предварительного просмотра. Обратите внимание, что страница пуста, когда появляется предупреждение.
  • Нажав на кнопку ОК в окне предупреждения, вы закроете его. После исчезновения окна предупреждения, веб-страница появится в окне браузера.

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

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

  • Откройте файл test2.html в вашем текстовом редакторе.

    В то время как теги <script> появляются в <head> веб-страницы, вы можете поместить их и программы JavaScript прямо в тело страницы.

  • Ниже <h1> Написание в окне документа </h1>, введите этот код: 
    <!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>

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

  • Теперь сохраните страницу и откройте ее в веб-браузере.

Как вы видите, страница открывается и “Welcome to w3Docs” появляется под заголовком.

Консоль JavaScript Chrome

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

<!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>

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

Время Викторины: Проверьте Свои Навыки!

отовы проверить свои знания? Погрузитесь в наши интерактивные викторины для более глубокого понимания и веселого способа закрепить знания.

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