[ru] fix sample on 'Learn/JavaScript/First_steps/What_is_JavaScript'

files/ru/learn/javascript/first_steps/what_is_javascript/index.md

@@ -15,51 +15,49 @@ slug: Learn/JavaScript/First_steps/What_is_JavaScript
 
 JavaScript это язык, который позволяет вам применять сложные вещи на web странице — каждый раз, когда на web странице происходит что-то большее, чем просто её статичное отображение — отображение периодически обновляемого контента, или интерактивных карт, или анимация 2D/3D графики, или прокрутка видео в проигрывателе, и т.д. — можете быть уверены, что скорее всего, не обошлось без JavaScript. Это третий слой слоёного пирога стандартных web технологий, два из которых ([HTML](/ru/docs/Learn/HTML) и [CSS](/ru/docs/Learn/CSS)) мы детально раскрыли в других частях учебного пособия.
 
-![](cake.png)
+![Три слоя стандартных веб-технологий: HTML, CSS и JavaScript](cake.png)
 
-- {{glossary("HTML")}} - это язык разметки, который мы используем для визуального и смыслового структурирования нашего web контента, например, определяем параграфы, заголовки, таблицы данных, или вставляем изображения и видео на страницу.
-- {{glossary("CSS")}} - это язык стилей с помощью которого мы придаём стиль отображения нашего HTML контента, например придаём цвет фону (background) и шрифту, придаём контенту многоколоночный вид.
-- {{glossary("JavaScript")}} язык программирования, который позволяет вам создать динамически обновляемый контент, управляет мультимедиа, анимирует изображения, впрочем, делает всё, что угодно. Окей, не все, что угодно, но всё равно, это удивительно, что можно достичь с помощью нескольких строк JavaScript-кода.
+- {{glossary("HTML")}} — язык разметки, который мы используем для визуального и смыслового структурирования нашего web контента, например, определяем параграфы, заголовки, таблицы данных, или вставляем изображения и видео на страницу.
+- {{glossary("CSS")}} — язык стилей с помощью которого мы придаём стиль отображения нашего HTML контента, например придаём цвет фону (background) и шрифту, придаём контенту многоколоночный вид.
+- {{glossary("JavaScript")}} — язык программирования, который позволяет создавать динамически обновляемый контент, управлять мультимедиа, анимировать изображения и делать многое другое.
 
-Три слоя прекрасно выстраиваются друг над другом. Возьмём простой текст для примера. Для придания структуры и смыслового назначения тексту, разметим его с помощью HTML:
+Три слоя прекрасно выстраиваются друг над другом. Для примера примера возьмём кнопку. Чтобы задать структуру, создадим разметку с помощью HTML:
 
 ```html
-<p>Player 1: Chris</p>
+<button type="button">Player 1: Chris</button>
 ```
 
-![](just-html.png)
+![Кнопка с надписью "Player 1: Chris" без дополнительных стилей](just-html.png)
 
-Затем мы добавим немного CSS, что бы это выглядело симпатичнее:
+Затем добавим немного CSS, чтобы кнопка выглядела симпатичнее:
 
 ```css
-p {
+button {
   font-family: "helvetica neue", helvetica, sans-serif;
   letter-spacing: 1px;
   text-transform: uppercase;
-  text-align: center;
-  border: 2px solid rgba(0, 0, 200, 0.6);
-  background: rgba(0, 0, 200, 0.3);
-  color: rgba(0, 0, 200, 0.6);
-  box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
+  border: 2px solid rgb(200 200 0 / 0.6);
+  background-color: rgb(0 217 217 / 0.6);
+  color: rgb(100 0 0 / 1);
+  box-shadow: 1px 1px 2px rgb(0 0 200 / 0.4);
   border-radius: 10px;
   padding: 3px 10px;
-  display: inline-block;
   cursor: pointer;
 }
 ```
 
-![](html-and-css.png)
+![Кнопка с надписью "Player 1: Chris" и с применёнными стилями](html-and-css.png)
 
-И наконец, добавим немного JavaScript для придания динамического поведения:
+И наконец добавим немного JavaScript для реализации динамического поведения:
 
-```
-const para = document.querySelector('p');
+```js
+const button = document.querySelector("button");
 
-para.addEventListener('click', updateName);
+button.addEventListener("click", updateName);
 
 function updateName() {
-  let name = prompt('Enter a new name');
-  para.textContent = 'Player 1: ' + name;
+  const name = prompt("Enter a new name");
+  button.textContent = `Player 1: ${name}`;
 }
 ```
 
@@ -74,7 +72,7 @@ JavaScript может делать намного больше — давайт
 Ядро языка JavaScript состоит из некоторого количества обычных возможностей, которые позволяют делать следующее:
 
 - Хранить данные внутри переменных. В примере выше, мы, например, запрашивали ввод нового имени, которое нужно было ввести, затем сохраняли имя в переменной `name`.
-- Операции над фрагментами текстов (известными в программировании как "строки"). В примере выше мы брали строку "Player 1: " и присоединили её к значению переменной `name` для получения полного текста, например: ''Player 1: Chris".
+- Операции над фрагментами текстов (известными в программировании как "строки"). В примере выше мы брали строку "Player 1: " и присоединили её к значению переменной `name` для получения полного текста, например: "Player 1: Chris".
 - Запускать код в соответствии с определёнными событиями происходящими на web странице. В нашем примере выше, мы использовали {{Event("click")}} событие, для определения момента, когда кнопка была кликнута, в соответствии с этим запускался код, который обновлял текст.
 - И многое другое!