Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 Если бы для интернета писали Библию, она начиналась бы так:

2 Сначала была почта. И увидели инженеры, что это хорошо. И создали они WWW с гиперссылками. И увидели инженеры, что это тоже хорошо. И создали они тогда язык JavaScript для оживления страничек.

3 Примерно так происходило в реальности.<a>JavaScript</a>придумали, чтобы "оживить"<a>HTML</a>. СкриптыJavaScriptпишутся непосредственно в текстHTMLили хранятся в отдельных файлах, как и стили<a>CSS</a>. Они выполняются сразу после загрузки страницы в браузер.

4 Даже сам язык в первое время называлсяLiveScript. Потом его переименовали в JavaScript, потому что планировали как-то увязать с языком общего назначения Java. Но сейчас у них нет практически ничего общего, а JavaScript - совершенно независимый язык программирования со своей четкой спецификацией<a>ECMAScript</a>.

5 Формально JavaScript является торговой маркой Oracle, а этот язык - "расширение" ECMAScript, наряду с JScript от Microsoft и ActionScript, но это скорее заморочки владельцев торговых марок. Главное, что свободный ECMAScript никому не принадлежит.

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

7 Приложения JavaScript выполняются в любой среде, где есть соответствующий интерпретатор.

8 Как сделатьJavaScript? Написать элементарный скрипт не сложнее, чем простуюHTML-страничку, ведь скриптыJavaScriptпишутся обычным текстом, то есть их можно создавать буквально в том же "Блокноте", сохраняя потом в отдельных файлах или вставляя в телоHTML-документа. Самые простые вещи на JavaScriptделаются действительно просто.

9 Для примера сделаем простой скрипт для выполнения сервером сценариев Windows. Этот скрипт можно написать прямо в "Блокноте" и выполнить без браузера.

10 WScript.echo ("Привет, Skillbox!")Пишем этот текст в "Блокноте", затем сохраняем файл под именемskillbox.jsи запускаем в "Проводнике"Windows.

11 Аналогичный скрипт можно записать прямо в коде страницыHTMLмежду тегами<script>и</script>.Там уже можно использовать обычные методы JavaScript, а не методechoспецифического объектаWScript. Рассмотрим некоторые из стандартных методов для ввода и вывода данных в браузере.

12 Методalert()отображает окошко с кнопкой "OK". В окне выводится сообщение, которое указано в скобках. Например,"Привет, Skillbox!". То есть в данном случае браузер делает ровно то же самое, что перед этим делал сервер сценариевWindows.

13 Эти примеры тоже можно писать в "Блокноте", только сохранять в файлах с расширениемHTML. Например,skillbox.htm.

14 <html> <script> alert("Привет, Skillbox") </script> </html>Результат:

15 В качестве аргументаalert()можно указать не только конкретный текст, но и результат каких-либо вычислений или обработки других данных. Например,alert(x), где x вычисляется отдельно.

16 Методconfirm()выводит такое же окно с сообщением, но уже с двумя кнопками - "ОК" и "Отмена". В зависимости от того, какую кнопку щелкнет пользователь, метод возвращает либо значениеtrue, либоfalse. Сервер получает это возвращаемое значение от пользователя и выполняет какое-то действие, в зависимости от ответа.

17 Синтаксис такой же, только здесь логически предполагается выбор, так что пользователю задают вопрос.

18 <html> <script> confirm("Привет, Skillbox?") </script> </html>Результат:

19 Методprompt()выводит диалоговое окно с сообщением и текстовым полем, куда пользователь вводит данные. Здесь тоже предусмотрены две кнопки "ОК" и "Отмена". По нажатию первой кнопки метод возвращает на сервер введенный текст, а по нажатию второй кнопки возвращает логическое значениеfalse.

20 Синтаксис здесь такой:

21 prompt(сообщение, значение_поля_ввода_данных)Значение поля ввода необязательно. Туда можно вписать текст, который изначально введен в поле для удобства пользователя.

22 Код:

23 <html> <script> prompt("Передай привет Skillbox", "Привет") </script> </html>Результат:

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

25 Во всех популярных браузерах есть специальная консоль разработчика. Она показывает код скриптов на странице, а также выводит другую полезную информацию. В Chrome, Firefoxи IEконсоль разработчика открывается по нажатию горячей клавишиF12, в Safari - Ctrl+Shift+Iили Ctrl+Alt+C.На скриншоте скрипты отображаются справа вверху, вместе с другими элементами веб-страницы.

26 Консоль разработчика в Chrome.В дальнейшем для удобного программирования понадобится установить редактор кода илиIDE (Integrated Development Environment),интегрированную среду разработки.IDE - это редактор с расширенной функциональностью, который интегрирован с другими полезными инструментами, поддерживает подключение дополнительных модулей и так далее.

27 Для начала можно рекомендовать один из легких редакторов:

28 <ul><li><a>Sublime Text</a>;</li>

29 <li><a>Atom</a>;</li>

30 <li><a>SciTe</a>;</li>

31 <li><a>Notepad++</a>.</li>

32 </ul>В будущем есть смысл присмотреться к IDE:

33 <ul><li><a>IntelliJ WebStorm</a>;</li>

34 <li><a>Visual Studio</a>.</li>

35 </ul>