W3docs
ru
Войти

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

Due to simple but detailed descriptions and examples, you will get an opportunity to know all you need about scripts, external scripts, JavaScript console.

Написание вашей первой программы на 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

<!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. Раньше это было type="text/javascript", но сегодня это не требуется. Более того, современный стандарт HTML полностью изменил значение этого атрибута. Сегодня мы можем использовать его для модулей JavaScript. Но о модулях мы поговорим позже, так как это продвинутая тема.

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

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

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

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

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

javascript source attribute

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

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

javascript source attribute

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

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

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

javascript src url

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

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

javascript src multiple tags

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

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

script tag with src attribute

<!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>
Попробуйте сами »

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

javascript example into two scripts

<!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, чтобы создать новую пустую строку, и введите: alert('Welcome to W3Docs');Поздравляем! Вы набрали первую строку кода JavaScript.
  • Затем введите </script>. Код должен выглядеть так:

Javascript alert example

<!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>
Попробуйте сами »
  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

<!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>Hello world!<p>: абзацный тег и два слова.

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

Консоль JavaScript в Chrome

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

Javascript console log example

<!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>
Попробуйте сами »

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

Практика

Практика

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