diff options
Diffstat (limited to 'files/ru/learn/javascript/first_steps/what_is_javascript/index.html')
| -rw-r--r-- | files/ru/learn/javascript/first_steps/what_is_javascript/index.html | 38 |
1 files changed, 19 insertions, 19 deletions
diff --git a/files/ru/learn/javascript/first_steps/what_is_javascript/index.html b/files/ru/learn/javascript/first_steps/what_is_javascript/index.html index 2e0ff5a198..114f4601ba 100644 --- a/files/ru/learn/javascript/first_steps/what_is_javascript/index.html +++ b/files/ru/learn/javascript/first_steps/what_is_javascript/index.html @@ -31,11 +31,11 @@ original_slug: Learn/JavaScript/Первые_шаги/What_is_JavaScript <ul> <li>{{glossary("HTML")}} - это язык разметки, который мы используем для визуального и смыслового структурирования нашего web контента, например, определяем параграфы, заголовки, таблицы данных, или вставляем изображения и видео на страницу.</li> - <li>{{glossary("CSS")}} - это язык стилей с помощью которого мы придаем стиль отображения нашего HTML контента, например придаем цвет фону (background) и шрифту, придаем контенту многоколоночный вид.</li> + <li>{{glossary("CSS")}} - это язык стилей с помощью которого мы придаём стиль отображения нашего HTML контента, например придаём цвет фону (background) и шрифту, придаём контенту многоколоночный вид.</li> <li>{{glossary("JavaScript")}} язык программирования, который позволяет Вам создать динамически обновляемый контент, управляет мультимедиа, анимирует изображения, впрочем, делает всё, что угодно. Окей, не все, что угодно, но все равно, это удивительно, что можно достичь с помощью нескольких строк JavaScript кода.</li> </ul> -<p>Три слоя прекрасно выстраиваются друг над другом. Возьмем простой текст для примера. Для придания структуры и смыслового назначения тексту, разметим его с помощью HTML:</p> +<p>Три слоя прекрасно выстраиваются друг над другом. Возьмём простой текст для примера. Для придания структуры и смыслового назначения тексту, разметим его с помощью HTML:</p> <pre class="brush: html"><p>Player 1: Chris</p></pre> @@ -73,7 +73,7 @@ function updateName() { <p>{{ EmbedLiveSample('Определение_высокого_уровня', '100%', 80) }}</p> -<p>Попробуйте кликнуть по тексту чтобы увидеть, что произойдет (Вы так же можете найти это демо на GitHub — смотрите <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html">исходный код</a>, или <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html">запустите вживую</a>)!</p> +<p>Попробуйте кликнуть по тексту чтобы увидеть, что произойдёт (Вы так же можете найти это демо на GitHub — смотрите <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html">исходный код</a>, или <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html">запустите вживую</a>)!</p> <p>JavaScript может делать намного больше — давайте выясним это более детально.</p> @@ -84,11 +84,11 @@ function updateName() { <ul> <li>Хранить данные внутри переменных. В примере выше, мы, например, запрашивали ввод нового имени, которое нужно было ввести, затем сохраняли имя в переменной <code>name</code>.</li> <li>Операции над фрагментами текстов (известными в программировании как "строки"). В примере выше мы брали строку "Player 1: " и присоединили её к значению переменной <code>name</code> для получения полного текста, например: ''Player 1: Chris".</li> - <li>Запускать код в соответствии с определенными событиями происходящими на web странице. В нашем примере выше, мы использовали {{Event("click")}} событие, для определения момента, когда кнопка была кликнута, в соответствии с этим запускался код, который обновлял текст.</li> + <li>Запускать код в соответствии с определёнными событиями происходящими на web странице. В нашем примере выше, мы использовали {{Event("click")}} событие, для определения момента, когда кнопка была кликнута, в соответствии с этим запускался код, который обновлял текст.</li> <li>И многое другое!</li> </ul> -<p>Еще более увлекательным является функциональность, созданная поверх основного языка JavaScript. Так называемые интерфейсы прикладного программирования (API) предоставляют вам дополнительные сверхспособности для использования в вашем коде JavaScript.</p> +<p>Ещё более увлекательным является функциональность, созданная поверх основного языка JavaScript. Так называемые интерфейсы прикладного программирования (API) предоставляют вам дополнительные сверхспособности для использования в вашем коде JavaScript.</p> <p>API - это готовые наборы блоков кода, которые позволяют разработчику реализовывать программы, которые в противном случае было бы трудно или невозможно реализовать. Они делают то же самое для программирования, что готовые комплекты мебели делают для домашнего строительства - гораздо проще брать готовые панели и скручивать их вместе, чтобы сделать книжную полку, чем самому разрабатывать дизайн, ходить в поисках правильной древесины, вырезать все панели необходимого размера и формы, найти подходящие винты, а затем собрать их вместе, чтобы сделать книжную полку.</p> @@ -120,13 +120,13 @@ function updateName() { <p><strong>Заметка</strong>: Эти API-и <span style="background-color: #f6d5d9;">являются продвинутыми</span>, и мы не будем их рассматривать в нашем курсе, но ссылки, данные выше, предлагают полную документацию, если вы заинтересованы в более подробной информации.</p> </div> -<p>Доступно еще больше! Но пока не заостряйте на этом внимание. Вы не сможете создать следующий Facebook, Google Maps или Instagram после 24 часов изучения JavaScript — сначала нужно изучить основы. И именно для этого вы здесь — давайте двигаться дальше!</p> +<p>Доступно ещё больше! Но пока не заостряйте на этом внимание. Вы не сможете создать следующий Facebook, Google Maps или Instagram после 24 часов изучения JavaScript — сначала нужно изучить основы. И именно для этого вы здесь — давайте двигаться дальше!</p> <h2 id="Что_JavaScript_делает_на_вашей_странице">Что JavaScript делает на вашей странице?</h2> <p>В этой главе мы рассмотрим код и увидим что же действительно происходит, когда на странице запускается JavaScript.</p> -<p>Давайте составим краткий бриф, что же происходит когда мы загружаем страничку в браузере (первое упоминание в статье <a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_does_CSS_actually_work">Как работает CSS</a>). Когда вы загружаете страничку в браузере, вы запускаете ваш код (HTML, CSS и JavaScript) внутри исполняемой среды (внутри вкладки браузера). Это как будто фабрика берет сырьё (некий код) и выдает продукцию (веб-страничку).</p> +<p>Давайте составим краткий бриф, что же происходит когда мы загружаем страничку в браузере (первое упоминание в статье <a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_does_CSS_actually_work">Как работает CSS</a>). Когда вы загружаете страничку в браузере, вы запускаете ваш код (HTML, CSS и JavaScript) внутри исполняемой среды (внутри вкладки браузера). Это как будто фабрика берет сырьё (некий код) и выдаёт продукцию (веб-страничку).</p> <p><img alt="" src="https://mdn.mozillademos.org/files/13504/execution.png" style="display: block; margin: 0 auto;"></p> @@ -144,7 +144,7 @@ function updateName() { <h3 id="Последовательность_выполнения_JavaScript">Последовательность выполнения JavaScript</h3> -<p>Обычно, когда браузер сталкивается с блоком JavaScript, он запускает его по порядку, сверху вниз. Это значит, что вам нужно осторожно выбирать порядок. Например, вернемся к блоку JavaScript, который мы видели в первом примере:</p> +<p>Обычно, когда браузер сталкивается с блоком JavaScript, он запускает его по порядку, сверху вниз. Это значит, что вам нужно осторожно выбирать порядок. Например, вернёмся к блоку JavaScript, который мы видели в первом примере:</p> <pre>const para = document.querySelector('p'); @@ -157,7 +157,7 @@ function updateName() { <p>Здесь мы выбираем абзац текста (строка 1), а затем добавляем к нему обнаружение событий (строка 3), чтобы при нажатии на этот абзац выполнялся блок кода <code>updateName()</code> (строки 5–8). Блок кода <code>updateName()</code> (эти типы <span id="result_box" lang="ru"><span>многократно используемых блоков кода</span></span> называются "функции") запрашивает у пользователя новое имя, а затем вставляет это имя в абзац для обновления отображения.</p> -<p>Если вы поменяете порядок первых двух строк кода, он перестанет работать — вместо этого вы получите ошибку <span id="result_box" lang="ru"><span>возвращаемую в консоль браузера</span></span> — <code>TypeError: para is undefined</code>. Это значит, что объект <code>para</code> еще не существует и вы не можете добавить к нему обнаружение событий.</p> +<p>Если вы поменяете порядок первых двух строк кода, он перестанет работать — вместо этого вы получите ошибку <span id="result_box" lang="ru"><span>возвращаемую в консоль браузера</span></span> — <code>TypeError: para is undefined</code>. Это значит, что объект <code>para</code> ещё не существует и вы не можете добавить к нему обнаружение событий.</p> <div class="note"> <p><strong>Заметка</strong>: Это очень частая ошибка — вы должны быть осторожны, чтобы объекты, на которые ссылается ваш код, существовали до того, как вы попытаетесь что-то с ними сделать.</p> @@ -177,7 +177,7 @@ function updateName() { <p>С другой стороны, серверный код запускается на сервере, затем его результаты загружаются и отображаются в браузере. Примеры популярных серверных веб-языков включают PHP, Python, Ruby и ASP.NET. И JavaScript! JavaScript так же может использоваться, как серверный язык, например в популярной среде Node.js — вы можете больше узнать о серверном JavaScript в нашем разделе <a href="/en-US/docs/Learn/Server-side">Dynamic Websites – Server-side programming</a>.</p> -<p>Слово <strong>динамический</strong> используется для описания и клиентского JavaScript, и серверного языка — это относится к возможности обновления отображения веб-страницы/приложения, чтобы показывать разные вещи в разных обстоятельствах, генерируя новый контент по мере необходимости. Серверный код динамически генерирует новый контент на сервере, например достает данные из базы данных, тогда как клиентский JavaScript динамически генерирует новое содержание внутри браузера на клиенте, например создает новую HTML таблицу, вставляя в нее данные полученные с сервера, затем отображает таблицу на веб-странице, которую видит пользователь. В этих двух контекстах значение немного отличается, но связано, и обычно оба подхода (серверный и клиентский) работают вместе.</p> +<p>Слово <strong>динамический</strong> используется для описания и клиентского JavaScript, и серверного языка — это относится к возможности обновления отображения веб-страницы/приложения, чтобы показывать разные вещи в разных обстоятельствах, генерируя новый контент по мере необходимости. Серверный код динамически генерирует новый контент на сервере, например достаёт данные из базы данных, тогда как клиентский JavaScript динамически генерирует новое содержание внутри браузера на клиенте, например создаёт новую HTML таблицу, вставляя в неё данные полученные с сервера, затем отображает таблицу на веб-странице, которую видит пользователь. В этих двух контекстах значение немного отличается, но связано, и обычно оба подхода (серверный и клиентский) работают вместе.</p> <p>Веб-страница без динамического обновления контента называется <strong>статической</strong> — она просто показывает один и тот же контент все время.</p> @@ -189,7 +189,7 @@ function updateName() { <ol> <li>Сначала, сделайте локальную копию нашего файла-примера <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html">apply-javascript.html</a>. Сохраните его в удобное для вас место.</li> - <li>Откройте этот файл в вашем браузере и в вашем текстовом редакторе. Вы увидите, что HTML создает простую веб-страницу с активной кнопкой.</li> + <li>Откройте этот файл в вашем браузере и в вашем текстовом редакторе. Вы увидите, что HTML создаёт простую веб-страницу с активной кнопкой.</li> <li>Затем, перейдите в текстовый редактор и добавьте следующие строки перед закрывающим тегом <code></head></code>: <pre class="brush: html"><script> @@ -212,11 +212,11 @@ function updateName() { } });</pre> </li> - <li>Сохраните файл и обновите страницу в браузере — теперь вы должны увидеть, что при нажатии на кнопку создается новый абзац и помещается ниже.</li> + <li>Сохраните файл и обновите страницу в браузере — теперь вы должны увидеть, что при нажатии на кнопку создаётся новый абзац и помещается ниже.</li> </ol> <div class="note"> -<p><strong>Заметка</strong>: Если ваш пример не работает, пройдите еще раз все шаги и проверьте, сделали ли вы все правильно. Сохранили ли вы вашу локальную копию начального кода, как <code>.html</code> файл? Добавили ли ваш {{htmlelement("script")}} элемент после тэга <code></body></code>? Ввели ли вы JavaScript именно так, как показано? <strong>JavaScript регистрозависимый, и очень привередливый. Поэтому вам нужно вводить синтаксис именно так, как показано, в противном случае оно может не работать.</strong></p> +<p><strong>Заметка</strong>: Если ваш пример не работает, пройдите ещё раз все шаги и проверьте, сделали ли вы все правильно. Сохранили ли вы вашу локальную копию начального кода, как <code>.html</code> файл? Добавили ли ваш {{htmlelement("script")}} элемент после тэга <code></body></code>? Ввели ли вы JavaScript именно так, как показано? <strong>JavaScript регистрозависимый, и очень привередливый. Поэтому вам нужно вводить синтаксис именно так, как показано, в противном случае оно может не работать.</strong></p> </div> <div class="note"> @@ -225,7 +225,7 @@ function updateName() { <h3 id="Внешний_JavaScript">Внешний JavaScript</h3> -<p>Это отлично работает, но что если мы хотим поместить наш JavaScript в отдельный файл? Давайте сейчас разберемся с этим.</p> +<p>Это отлично работает, но что если мы хотим поместить наш JavaScript в отдельный файл? Давайте сейчас разберёмся с этим.</p> <ol> <li>Сначала, создайте новый файл в той же папке, что и ваш файл-пример HTML. Назовите его <code>script.js</code> — убедитесь, что у имени файла расширение .js, так как оно распознается, как JavaScript.</li> @@ -254,7 +254,7 @@ for(let i = 0; i < buttons.length ; i++) { <h3 id="Инлайновые_JavaScript_обработчики">Инлайновые JavaScript обработчики</h3> -<p>Обратите внимание, что иногда можно столкнуться с частями JavaScript кода, который живет внутри HTML. Это может выглядеть примерно так:</p> +<p>Обратите внимание, что иногда можно столкнуться с частями JavaScript кода, который живёт внутри HTML. Это может выглядеть примерно так:</p> <div id="Inline_JavaScript_handlers"> <pre class="brush: js example-bad">function createParagraph() { @@ -285,7 +285,7 @@ for(let i = 0; i < buttons.length ; i++) { <p>Это может выглядеть немного длиннее, чем атрибут <code>onclick</code>, но это будет работать для всех кнопок, независимо от того, сколько их на странице, и сколько их удалят или добавят. JavaScript менять не нужно.</p> <div class="note"> -<p><strong>Заметка</strong>: Попробуйте отредактировать вашу версию <code>apply-javascript.html</code> и добавить еще несколько кнопок в файл. После перезагрузки вы должны увидеть, что все кнопки создают параграф, если кликнуть на них. Классно, да?</p> +<p><strong>Заметка</strong>: Попробуйте отредактировать вашу версию <code>apply-javascript.html</code> и добавить ещё несколько кнопок в файл. После перезагрузки вы должны увидеть, что все кнопки создают параграф, если кликнуть на них. Классно, да?</p> </div> <h3 id="Стратегии_загрузки_скриптов">Стратегии загрузки скриптов</h3> @@ -294,7 +294,7 @@ for(let i = 0; i < buttons.length ; i++) { <h2 id="Комментарии">Комментарии</h2> -<p>Так же, как и в HTML и CSS, возможно писать комментарии в вашем JavaScript коде, что будет проигнорировано браузером, и существует только для того, чтобы давать подсказки вашим друзьям-разработчикам о том, как работает код (и лично вам, если вы вернетесь к коду спустя 6 месяцев и не сможете вспомнить, что вы делали). Комментарии очень полезны, и вы должны часто их использовать, особенно для больших приложений. Вот два типа комментариев:</p> +<p>Так же, как и в HTML и CSS, возможно писать комментарии в вашем JavaScript коде, что будет проигнорировано браузером, и существует только для того, чтобы давать подсказки вашим друзьям-разработчикам о том, как работает код (и лично вам, если вы вернётесь к коду спустя 6 месяцев и не сможете вспомнить, что вы делали). Комментарии очень полезны, и вы должны часто их использовать, особенно для больших приложений. Вот два типа комментариев:</p> <ul> <li>Однострочный комментарий пишется после двойного слеша (//), например: @@ -310,7 +310,7 @@ for(let i = 0; i < buttons.length ; i++) { <p>Так, например, мы можем описать наш последний демо-пример JavaScript подобными комментариями:</p> -<pre class="brush: js">// Функция: создает новый параграф и добавляет его вниз тела HTML. +<pre class="brush: js">// Функция: создаёт новый параграф и добавляет его вниз тела HTML. function createParagraph() { var para = document.createElement('p'); @@ -335,6 +335,6 @@ for (var i = 0; i < buttons.length ; i++) { <p>Поздравляем, вы сделали ваш первый шаг в мир JavaScript. Мы начали всего-лишь с теории, чтобы вы привыкли к тому, что вы будете использовать JavaScript, и что именно вы можете делать с его помощью. На этом пути вы увидели несколько примеров кода и выучили, как JavaScript вписывается в остальной код на вашем сайте среди всего прочего.</p> -<p>JavaScript может показаться немного пугающим в данным момент, но не переживайте - в этом курсе мы проведем вас сквозь него простыми шагами, которые имеют смысл, забегая наперед. В следующей главе мы <a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/A_first_splash">погрузимся непосредственно в практику</a>, подталкивая вас погрузиться в код и сделать ваши собственные примеры JavaScript.</p> +<p>JavaScript может показаться немного пугающим в данным момент, но не переживайте - в этом курсе мы проведём вас сквозь него простыми шагами, которые имеют смысл, забегая наперёд. В следующей главе мы <a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/A_first_splash">погрузимся непосредственно в практику</a>, подталкивая вас погрузиться в код и сделать ваши собственные примеры JavaScript.</p> <p>{{NextMenu("Learn/JavaScript/Первые_шаги/A_first_splash", "Learn/JavaScript/Первые_шаги")}}</p> |