path: root/files/ru/learn/getting_started_with_the_web/javascript_basics/index.html

---
title: Основы JavaScript
slug: Learn/Getting_started_with_the_web/JavaScript_basics
tags:
  - Beginner
  - CodingScripting
  - JavaScript
  - Learn
  - Новичку
  - Обучение
translation_of: Learn/Getting_started_with_the_web/JavaScript_basics
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div>

<div class="summary">
<p>JavaScript – это язык программирования, который добавляет интерактивность на ваш веб-сайт (например: игры, отклик при нажатии кнопок или при вводе данных в формы, динамические стили, анимация). Эта статья поможет вам начать работать с этим захватывающим языком и даст вам представление о том, на что он способен.</p>
</div>

<h2 id="Что_такое_JavaScript_на_самом_деле">Что такое JavaScript на самом деле?</h2>

<p>{{Glossary("JavaScript")}} ("JS" для краткости) — это полноценный {{Glossary("Dynamic programming language", "динамический язык программирования")}}, который применяется к {{Glossary("HTML")}} документу, и может обеспечить динамическую интерактивность на веб-сайтах. Его разработал Brendan Eich, сооснователь проекта Mozilla, Mozilla Foundation и Mozilla Corporation.</p>

<p>JavaScript невероятно универсален и дружелюбен к новичкам. Обладая большим опытом, вы сможете создавать игры, анимированную 2D и 3D графику, полномасштабные приложения с базами данных и многое другое!</p>

<p>JavaScript сам по себе довольно компактный, но очень гибкий. Разработчиками написано большое количество инструментов поверх основного языка JavaScript, которые разблокируют огромное количество дополнительных функций с очень небольшим усилием. К ним относятся:</p>

<ul>
 <li>Программные интерфейсы приложения ({{Glossary("API","API")}}), встроенные в браузеры, обеспечивающие различные функциональные возможности, такие как динамическое создание HTML и установку CSS стилей, захват и манипуляция видеопотоком, работа с веб-камерой пользователя или генерация 3D графики и аудио сэмплов.</li>
 <li>Сторонние API позволяют разработчикам внедрять функциональность в свои сайты от других разработчиков, таких как Twitter или Facebook.</li>
 <li>Также вы можете применить к вашему HTML сторонние фреймворки и библиотеки, что позволит вам ускорить создание сайтов и приложений.</li>
</ul>

<p>Поскольку эта статья должна быть только лёгким введением в JavaScript, мы не собираемся путать вас на этом этапе, подробно рассказывая о том, какая разница между основным языком JavaScript и различными инструментами, перечисленными выше. Вы можете подробно изучить все это позже, в нашей <a href="/ru/docs/Learn/JavaScript">учебной области JavaScript </a> и в остальной части MDN. </p>

<p>Ниже мы познакомим вас с некоторыми аспектами основного языка, и вы также будете играть с несколькими функциями API браузера. Веселитесь!</p>

<h2 id="Пример_hello_world">Пример "hello world"</h2>

<p>Предыдущий раздел звучит очень многообещающе, и это на самом деле так — JavaScript является одной из самых перспективных веб-технологий, и когда вы освоитесь и начнёте использовать его, ваши веб-сайты перейдут в новое измерение мощи и креативности.</p>

<p>Тем не менее, с JavaScript немного более сложно освоиться, чем с HTML и CSS. Вам придётся начать с малого, продолжая изучение небольшими шагами. Для начала мы покажем вам, как добавить некоторые основы JavaScript на вашу страницу, чтобы создать "hello world!" пример (<a href="https://ru.wikipedia.org/wiki/Hello,_world!">стандарт в начальных примерах программирования</a>).</p>

<div class="warning">
<p><strong>Важно</strong>: Если вы не следили за остальным нашим курсом, <a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">скачайте этот пример кода</a> и используйте его в качестве стартовой точки.</p>
</div>

<ol>
 <li>Для начала перейдите на ваш тестовый сайт и создайте папку с именем 'scripts' (без кавычек). Затем, в новой папке скриптов, которую вы только что создали, создайте новый файл с именем <code>main.js</code>. Сохраните его в вашей папке <code>scripts</code>.</li>
 <li>Далее перейдите в ваш <code>index.html</code> файл и введите следующий элемент на новой строке прямо перед закрывающим тегом <code>&lt;/body&gt;</code>:
  <pre class="brush: html">&lt;script src="scripts/main.js"&gt;&lt;/script&gt;</pre>
 </li>
 <li> В основном этот код выполняет ту же работу, что и элемент {{htmlelement("link")}} для CSS — добавляет JavaScript на страницу, позволяя ему взаимодействовать с HTML (и CSS, и чем-нибудь ещё на странице).</li>
 <li>Теперь добавьте следующий код в файл <code>main.js</code>:
  <pre class="brush: js">var myHeading = document.querySelector('h1');
myHeading.textContent = 'Hello world!';</pre>
 </li>
 <li>Теперь убедитесь, что HTML и JavaScript файлы сохранены, и загрузите <code>index.html</code> в браузере. Вы должны увидеть что-то вроде этого: <img alt="" src="hello-world.png" style="display: block; margin: 0px auto;"></li>
</ol>

<div class="note">
<p><strong>Примечание</strong>: Причиной, по которой мы поставили элемент {{htmlelement("script")}} в нижней части HTML файла, является то, что HTML-элементы загружаются браузером в том порядке, в котором они расположены в файле. Поэтому, если JavaScript загружается первым и ему нужно взаимодействовать с HTML ниже его, он не сможет работать, так как JavaScript будет загружен раньше, чем HTML, с которым нужно работать. Поэтому, располагать JavaScript в нижней части HTML страницы считается лучшей стратегией.</p>
</div>

<h3 id="Что_произошло">Что произошло?</h3>

<p>Итак, ваш заголовок текста был изменён на "Hello world!" с помощью JavaScript. Мы сделали это с помощью вызова функции {{domxref("Document.querySelector", "querySelector()")}}, захватив ссылку на наш заголовок и сохранив её в переменной, названной <code>myHeading</code>. Это очень похоже на то, что мы делали в CSS с помощью селекторов. Если вы хотите что-то сделать с элементом, то для начала вам нужно его выбрать.</p>

<p>После этого, вы устанавливаете значение переменной <code>myHeading</code> в {{domxref("Node.textContent", "textContent")}} свойство (которое представляет собой контент заголовка) "Hello world!".</p>

<h2 id="Ускоренный_курс_по_основам_языка">Ускоренный курс по основам языка</h2>

<p>Давайте познакомимся с некоторыми основными возможностями языка JavaScript, чтобы дать вам больше понимания, как это всё работает. Более того, эти возможности являются общими для всех языков программирования. Если вы сможете понять эти основы, вы будете в состоянии начать программировать, как ни в чём не бывало!</p>

<div class="warning">
<p><strong>Важно</strong>: В этой статье попробуйте вводить примеры строк кода в вашей JavaScript консоли, чтобы увидеть, что происходит. Для более подробной информации о JavaScript консоли смотрите статью <a href="/ru/docs/Learn/Common_questions/What_are_browser_developer_tools">Откройте для себя браузерные инструменты разработчика</a>.</p>
</div>

<h3 id="Переменные">Переменные</h3>

<p>{{Glossary("Variable", "Переменные")}} — это контейнеры, внутри которых вы можете хранить значения. Вы начинаете с того, что объявляете переменную с помощью ключевого слова <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/var">var</a></code> <span class="tlid-translation translation" lang="ru"><span title="">(не рекомендуется, продолжайте читать, чтобы получить объяснения)</span></span> или <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/let">let</a></code>, за которым следует любое имя, которым вы захотите её назвать:</p>

<pre class="brush: js">let myVariable;</pre>

<div class="note">
<p><strong>Примечание</strong>: Точка с запятой в конце строки указывает, где заканчивается оператор; это абсолютно необходимо, когда вам нужно разделить оператора на одной строке. Однако некоторые люди считают, что хорошая практика - указывать их в конце каждого оператора. Существуют и другие правила, когда вы должны и не должны их использовать - смотрите более подробно в статье <a href="http://news.codecademy.com/your-guide-to-semicolons-in-javascript/">ваше руководство по точкам с запятой в JavaScript</a>.</p>
</div>

<div class="note">
<p><strong>Примечание</strong>: вы можете назвать переменную практически как угодно, но есть некоторые ограничения для её имени (смотрите<a href="http://www.codelifter.com/main/tips/tip_020.shtml"> в правилах именования переменных</a>.) Если вы не уверены, вы можете <a href="https://mothereff.in/js-variables">проверить имя вашей переменной</a>, чтобы увидеть корректно ли оно.</p>
</div>

<div class="note">
<p><strong>Примечание</strong>: JavaScript чувствителен к регистру — <code>myVariable</code> отличается от переменной <code>myvariable</code>. Если у вас возникают проблемы в вашем коде, проверьте регистр!</p>
</div>

<div class="blockIndicator note">
<p><strong>Примечание: </strong>Для получения более подробной информации о разнице между var и let, смотрите:  <a href="/ru/docs/Web/JavaScript/Reference/Statements/let">Разница между var и let</a>.</p>
</div>

<p>После объявления переменной вы можете присвоить ей значение:</p>

<pre class="brush: js">myVariable = 'Bob';</pre>

<p>Вы можете сделать обе эти операции на одной и той же строке, если вы захотите:</p>

<pre class="brush: js">var myVariable = 'Bob';</pre>

<p>Вы можете получить значение, просто вызвав переменную по имени:</p>

<pre class="brush: js">myVariable;</pre>

<p>После установки значения переменной  вы можете изменить его позже:</p>

<pre>var myVariable = 'Bob';
myVariable = 'Steve';</pre>

<p>Обратите внимание, что переменные имеют разные <a href="/ru/docs/Web/JavaScript/Data_structures">типы данных</a>:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="row">Переменная</th>
   <th scope="col">Пояснение</th>
   <th scope="col">Пример</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">{{Glossary("String")}}</th>
   <td>Последовательность текста, называемая строкой. Чтобы указать, что это значение является строкой, вы должны заключить его в кавычки.</td>
   <td><code>var myVariable = 'Bob';</code></td>
  </tr>
  <tr>
   <th scope="row">{{Glossary("Number")}}</th>
   <td>Числа. Числа не имеют кавычек вокруг них.</td>
   <td><code>var myVariable = 10;</code></td>
  </tr>
  <tr>
   <th scope="row">{{Glossary("Boolean")}}</th>
   <td>Значение True(Правда)/False(Ложь). Слова <code>true</code> и <code>false</code> специальные ключевые слова в JS, и не нуждаются в кавычках.</td>
   <td><code>var myVariable = true;</code></td>
  </tr>
  <tr>
   <th scope="row">{{Glossary("Array")}}</th>
   <td>Массив, который позволяет хранить несколько значений в одной ссылке.</td>
   <td><code>var myVariable = [1,'Bob','Steve',10];</code><br>
    Обратиться к каждому элементу массива можно так:<br>
    <code>myVariable[0]</code>, <code>myVariable[1]</code>, и т.д.</td>
  </tr>
  <tr>
   <th scope="row">{{Glossary("Object")}}</th>
   <td>В принципе, что угодно. Все в JavaScript является объектом, и может храниться в переменной. Имейте это в виду, пока вы учитесь.</td>
   <td><code>var myVariable = document.querySelector('h1');</code><br>
    Все это из вышеприведённых примеров.</td>
  </tr>
 </tbody>
</table>

<p>Так для чего нам нужны переменные? Что ж, переменные должны были сделать что-нибудь интересное в программировании. Если значения не могли бы изменяться, то вы не могли бы ничего сделать динамическим, например, персонализировать приветственное сообщение или сменить изображение, отображаемое в галерее изображений.</p>

<h3 id="Комментарии">Комментарии</h3>

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

<pre class="brush: js">/*
Всё, что находится тут - комментарий.
*/</pre>

<p>Если ваш комментарий не содержит переноса строк, то зачастую легче поставить две косые черты, как тут:</p>

<pre class="brush: js" style="font-size: 14px;">// Это комментарий
</pre>

<h3 id="Операторы">Операторы</h3>

<p>{{Glossary("operator")}} — это математический символ, который производит результат, основанный на двух значениях (или переменных). В приведённой ниже таблице вы можете увидеть некоторые из наиболее простых операторов, наряду с некоторыми примерами, которые опробуете в JavaScript консоли.</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="row">Оператор</th>
   <th scope="col">Пояснение</th>
   <th scope="col">Символ(ы)</th>
   <th scope="col">Пример</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Сложение (Конкатенация)</th>
   <td>Используется для сложения двух чисел или склеивания двух строк вместе.</td>
   <td><code>+</code></td>
   <td><code>6 + 9;<br>
    "Hello " + "world!";</code></td>
  </tr>
  <tr>
   <th scope="row">Вычитание, Умножение, Деление</th>
   <td>Они делают то, чего вы от них ожидаете в математике.</td>
   <td><code>-</code>, <code>*</code>, <code>/</code></td>
   <td><code>9 - 3;<br>
    8 * 2; // умножение в JS это звёздочка<br>
    9 / 3;</code></td>
  </tr>
  <tr>
   <th scope="row">Присваивание</th>
   <td>Вы уже это видели: он присваивает значение переменной.</td>
   <td><code>=</code></td>
   <td><code>var myVariable = 'Bob';</code></td>
  </tr>
  <tr>
   <th scope="row">Равенство (Тождество)</th>
   <td>Делает проверку, если увидит, что два значения равны друг другу, то возвращает результат <code>true</code>/<code>false</code> (Boolean).</td>
   <td><code>===</code></td>
   <td><code>var myVariable = 3;<br>
    myVariable === 4;</code></td>
  </tr>
  <tr>
   <th scope="row">Отрицание (Неравенство)</th>
   <td>Возвращает логически противоположное значение, которое ему предшествует; превращает <code>true</code> в <code>false</code>, и т.д. Когда используется вместе с оператором равенства, оператор отрицания проверяет, являются ли два значения <em>не</em> равными.</td>
   <td><code>!</code>, <code>!==</code></td>
   <td>
    <p>Основное выражение <code>true</code>, но сравнение возвращает <code>false</code>, потому что мы отрицаем его:</p>

    <p><code>var myVariable = 3;<br>
     !(myVariable === 3);</code></p>

    <p>Здесь мы проверяем "<code>myVariable</code> НЕ равно 3". Это возвращает <code>false</code>, потому что <code>myVariable</code> равно 3.</p>

    <p><code><code>var myVariable = 3;</code><br>
     myVariable !== 3;</code></p>
   </td>
  </tr>
 </tbody>
</table>

<p>Существует намного больше операторов для изучения, но этих пока хватит. Смотрите их полный список в разделе <a href="/ru/docs/Web/JavaScript/Reference/Operators">выражения и операторы</a>.</p>

<div class="note">
<p><strong>Примечание</strong>: Смешивание типов данных может привести к некоторым неожиданным результатам при выполнении вычислений, поэтому будьте осторожны, правильно ссылайтесь на ваши переменные, чтобы получать ожидаемые результаты. Например, введите <code>"35" + "25"</code> в вашу консоль. Почему вы не получили результат, который вы ожидали? Потому, что кавычки превратили числа в строки, так что у вас в итоге получилась конкатенация строк, а не сложение чисел. Если вы введёте, <code>35 + 25</code>, то получите правильный результат.</p>
</div>

<h3 id="Условия">Условия</h3>

<p>Условия — это кодовые структуры, которые позволяют вам проверять, истинно или ложно выражение, а затем выполнить другой код в зависимости от результата. Самая распространённая форма условия называется, <code>if ... else</code>. Например:</p>

<pre class="brush: js">var iceCream = 'chocolate';
if (iceCream === 'chocolate') {
  alert('Yay, I love chocolate ice cream!');
} else {
  alert('Awwww, but chocolate is my favorite...');
}</pre>

<p>Выражение внутри <code>if ( ... )</code> — это проверка, которая использует тождественный оператор (как описано выше), чтобы сравнить переменную <code>iceCream</code> со строкой <code>chocolate</code> и увидеть равны ли они. Если это сравнение возвращает <code>true</code>, выполнится первый блок кода. Если нет, этот код пропустится и выполнится второй блок кода, после инструкции <code>else</code>.</p>

<h3 id="Функции">Функции</h3>

<p>{{Glossary("Function", "Функции")}} - способ упаковки функциональности, которую вы хотите использовать повторно. Всякий раз, когда вам нужна определённая процедура, вы можете просто вызвать функцию по её имени, а не переписывать весь код каждый раз. Вы уже видели некоторые функции, описанные выше, например:</p>

<ol>
 <li>
  <pre class="brush: js">var myVariable = document.querySelector('h1');</pre>
 </li>
 <li>
  <pre class="brush: js">alert('hello!');</pre>
 </li>
</ol>

<p>Эти функции, <code>document.querySelector</code> и <code>alert</code>, встроены в браузер для того, чтобы вы использовали их всякий раз, когда вам это необходимо.</p>

<p>Если вы видите что-то, что выглядит как имя переменной, но имеет после него скобки — <code>()</code>, скорее всего, это функция. Функции часто принимают {{Glossary("Argument", "аргументы")}} — биты данных, которые им необходимы для выполнения своей работы. Они находятся в скобках, и разделяются запятыми, если присутствует более одного аргумента.</p>

<p>Например, функция <code>alert()</code> вызывает всплывающий блок, появляющийся в окне браузера, но мы должны дать ему строку в качестве аргумента, чтобы сказать функции, что писать во всплывающем блоке.</p>

<p>Хорошая новость заключается в том, что вы можете определить свои собственные функции — в следующем примере мы напишем простую функцию, которая принимает два числа в качестве аргументов и умножает их:</p>

<pre class="brush: js">function multiply(num1,num2) {
  var result = num1 * num2;
  return result;
}</pre>

<p>Попробуйте запустить вышеупомянутую функцию в консоли, затем попробуйте изменить аргументы, например:</p>

<pre class="brush: js">multiply(4,7);
multiply(20,20);
multiply(0.5,3);</pre>

<div class="note">
<p><strong>Примечание</strong>: Инструкция <a href="/ru/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> сообщает браузеру, что нужно вернуть переменную <code>result</code> из функции, которую можно будет использовать. Это необходимо потому, что переменные, определённые внутри функций, доступны только внутри этих функций. Это называется {{Glossary("Scope", "областью видимости")}} переменной. (Читайте <a href="/ru/docs/Web/JavaScript/Guide/Grammar_and_types#variable_scope">больше об области видимости переменных</a>.)</p>
</div>

<h3 id="События">События</h3>

<p>Для создания действительной интерактивности на веб-сайте вам необходимы события. События — это структура, которая следит за тем, что происходит в браузере, а затем позволяет вам запускать код в ответ на это. Наиболее очевидным является <a href="/ru/docs/Web/Events/click">событие клика</a>, которое вызывается браузером, когда мы щёлкаем по чему-то мышью. Для демонстрации этого события введите следующую команду в вашу консоль, а затем щёлкните по текущей веб-странице:</p>

<pre class="brush: js">document.querySelector('html').onclick = function() {
    alert('Ouch! Stop poking me!');
}</pre>

<p>Существуют множество способов прикрепить событие к элементу. Здесь мы выбираем {{htmlelement("html")}} элемент и устанавливаем ему обработчик свойства <code><a href="/ru/docs/Web/API/GlobalEventHandlers.onclick">onclick</a></code> анонимной функцией (т.е. безымянной) которая содержит код, который мы хотим запустить для события клика.</p>

<p>Обратите внимание, что</p>

<pre class="brush: js">document.querySelector('html').onclick = function() {};</pre>

<p>эквивалентно</p>

<pre class="brush: js">var myHTML = document.querySelector('html');
myHTML.onclick = function() {};</pre>

<p>Просто так короче.</p>

<h2 id="Прокачаем_пример_нашего_веб-сайта">Прокачаем пример нашего веб-сайта</h2>

<p>Теперь, когда мы прошли некоторые основы JavaScript, давайте добавим несколько крутых несложных функций в пример нашего сайта, чтобы дать вам некоторое представление о принципах работы.</p>

<h3 id="Добавление_смены_изображения">Добавление смены изображения</h3>

<p>В этом разделе мы добавим ещё одно изображение на наш сайт и добавим некоторый простой JavaScript для переключения между двумя изображениями, когда по ним щёлкнули.</p>

<ol>
 <li>В первую очередь найдите другое изображение, которые вы хотели бы показать на вашем сайте. Убедитесь что оно такого же размера, как ваше первое изображение или максимально близкое к нему.</li>
 <li>Сохраните изображение в вашу папку <code>images</code>.</li>
 <li>Переименуйте это изображение в 'firefox2.png' (без кавычек).</li>
 <li>Перейдите в ваш файл <code>main.js</code> и введите следующий JavaScript. (Если ваш "hello world" JavaScript по-прежнему существует, удалите его.)
  <pre class="brush: js">var myImage = document.querySelector('img');

myImage.onclick = function() {
    var mySrc = myImage.getAttribute('src');
    if(mySrc === 'images/firefox-icon.png') {
      myImage.setAttribute ('src','images/firefox2.png');
    } else {
      myImage.setAttribute ('src','images/firefox-icon.png');
    }
}</pre>
 </li>
 <li>Сохраните все файлы и загрузите <code>index.html</code> в браузере. Теперь, когда вы щёлкните по изображению, оно должно измениться на другое!</li>
</ol>

<p>Итак, мы сохраняем ссылку на наш элемент {{htmlelement("img")}} в переменной <code>myImage</code>. Далее, мы создаём этой переменной обработчик события <code>onclick</code> с анонимной функцией. Теперь, каждый раз, когда на этот элемент изображения щёлкнут:</p>

<ol>
 <li>Мы получаем значение из атрибута <code>src</code> изображения.</li>
 <li>Мы используем условие для проверки значения <code>src,</code> равен ли путь к исходному изображению:
  <ol>
   <li>Если это так, мы меняем значение <code>src</code> на путь ко 2-му изображению, заставляя другое изображение загружаться внутри элемента {{htmlelement("image")}}.</li>
   <li>Если это не так (значит, оно должно было уже измениться), мы меняем значение <code>src</code>, возвращаясь к первоначальному пути изображения, каким он был изначально.</li>
  </ol>
 </li>
</ol>

<h3 id="Добавление_персонального_приветственного_сообщения">Добавление персонального приветственного сообщения</h3>

<p>Далее мы добавим немного другого кода, чтобы изменить заголовок страницы на персонализированное приветственное сообщение, когда пользователь впервые зайдёт на сайт. Это приветственное сообщение будет сохраняться, когда пользователь покинет сайт, а позже вернётся - мы сохраним его с помощью <a href="/ru/docs/Web/API/Web_Storage_API">Web Storage API</a>. Мы также включим возможность изменить пользователя и, следовательно, приветственное сообщение, в любое время, когда это будет необходимо.</p>

<ol>
 <li>В <code>index.html</code>, добавьте следующую строку перед элементом {{htmlelement("script")}}:

  <pre class="brush: html">&lt;button&gt;Change user&lt;/button&gt;</pre>
 </li>
 <li>В <code>main.js</code>, добавьте следующий код в конец файла, точно так, как написано - он захватит ссылки на новую кнопку и заголовок, и сохранит их в переменные:
  <pre class="brush: js">var myButton = document.querySelector('button');
var myHeading = document.querySelector('h1');</pre>
 </li>
 <li>Теперь добавьте следующую функцию для установки персонализированного приветствия - она ничего не будет делать, но мы будем использовать её позже:
  <pre class="brush: js">function setUserName() {
  var myName = prompt('Please enter your name.');
  localStorage.setItem('name', myName);
  myHeading.<span class="pl-smi">textContent</span> = 'Mozilla is cool, ' + myName;
}</pre>
  Эта функция содержит функцию <a href="/ru/docs/Web/API/Window.prompt"><code>prompt()</code></a>, которая вызывает диалоговое окно, немного похожее на <code>alert()</code> кроме того, что <code>prompt()</code> просит пользователя ввести некоторые данные, и сохраняет эти данные в переменной, после того как пользователь нажимает <strong>OK</strong>. В данном случае, мы просим пользователя ввести его имя. Далее, мы вызываем API под названием <code>localStorage</code>, который позволяет нам хранить данные в браузере и извлекать их позднее. Мы используем функцию <code>setItem()</code> из localStorage для создания и хранения данных в свойстве под названием <code>'name'</code>, и устанавливаем это значение в переменную <code>myName</code>, которая содержит имя введённое пользователем. В конце мы устанавливаем <code>textContent</code> заголовку в виде строки и имени пользователя.</li>
 <li>Затем добавьте блок <code>if ... else</code> - мы могли бы назвать это кодом инициализации, поскольку он структурирует приложение при его первой загрузке:
  <pre class="brush: js">if(!localStorage.getItem('name')) {
  setUserName();
} else {
  var storedName = localStorage.getItem('name');
  myHeading.<span class="pl-smi">textContent</span> = 'Mozilla is cool, ' + storedName;
}</pre>
  Этот блок сначала использует оператор отрицания (логическое НЕ, представленное в виде !) чтобы проверить, существуют ли данные в пункте <code>name</code>. Если нет, то функция <code>setUserName()</code> запускается для их создания. Если данные существуют (то есть, пользователь установил его во время предыдущего посещения), мы извлекаем сохранённое имя, с помощью <code>getItem()</code> и устанавливаем <code>textContent</code> заголовку в виде строки плюс имя пользователя, так же, как мы делали внутри <code>setUserName()</code>.</li>
 <li>Наконец, установите обработчик события <code>onclick</code> на кнопку. При нажатии кнопки запускается функция <code>setUserName()</code>. Это позволяет пользователю установить новое имя, всякий раз, когда он захочет, нажатием кнопки:
  <pre class="brush: js">myButton.onclick = function() {
  setUserName();
}
</pre>
 </li>
</ol>

<p>Теперь, когда вы впервые заходите на сайт, он попросит вас указать имя пользователя, а затем предоставит вам персональное сообщение. Вы можете изменить имя в любое время, нажав на кнопку. В качестве дополнительного бонуса, поскольку имя хранится внутри localStorage, оно сохраняется после закрытия сайта, сохраняя при этом персонализированное сообщение при следующем открытии сайта!</p>

<h2 id="Заключение">Заключение</h2>

<p>Если вы следовали всем инструкциям в этой статье, в конечном итоге вы должны получить страницу, которая выглядит примерно так (вы также можете <a href="https://mdn.github.io/beginner-html-site-scripted/">посмотреть нашу версию здесь</a>):</p>

<p><img alt="" src="website-screen-scripted.png" style="display: block; margin: 0px auto;"></p>

<p>Если вы застряли, вы всегда можете сравнить свою работу с нашим <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">готовым примером кода на Github</a>.</p>

<p>Здесь мы узнали только самую поверхность JavaScript. Если вам понравился этот язык и вы хотите изучить его поглубже, перейдите к нашему разделу <a href="/ru/docs/Learn/JavaScript">изучение JavaScript</a>.</p>

<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p>

<h2 id="В_этом_модуле">В этом модуле</h2>

<ul>
 <li id="Installing_basic_software"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">Установка базового программного обеспечения</a></li>
 <li id="What_will_your_website_look_like"><a href="/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Каким должен быть ваш веб-сайт?</a></li>
 <li id="Dealing_with_files"><a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a></li>
 <li id="HTML_basics"><a href="/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a></li>
 <li id="CSS_basics"><a href="/ru/docs/Learn/Getting_started_with_the_web/CSS_basics">Основы CSS</a></li>
 <li id="JavaScript_basics"><a href="/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Основы JavaScript</a></li>
 <li id="Publishing_your_website"><a href="/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Публикация вашего веб-сайта</a></li>
 <li id="How_the_web_works"><a href="/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Как работает Веб</a></li>
</ul>