5

1. Введение в JavaScript

2. Что такое JavaScript?

JavaScript
—
это
кросс-платформенный,
объектноориентированный скриптовый язык, который добавляет
интерактивность и отзывчивость к вашим веб-страницам.
Программы на этом языке называются скриптами. Они могут
встраиваться в HTML и выполняться автоматически при загрузке
веб-страницы.
Скрипты распространяются и выполняются, как простой текст. Им
не нужна специальная подготовка или компиляция для запуска.
Это отличает JavaScript от другого языка – Java.

3. Что такое JavaScript?

Когда JavaScript создавался, у него было другое имя – «LiveScript».
Однако, язык Java был очень популярен в то время, и было
решено, что позиционирование JavaScript как «младшего брата»
Java будет полезно.
Со временем JavaScript стал полностью независимым языком со
своей собственной спецификацией, называющейся ECMAScript, и
сейчас не имеет никакого отношения к Java.

4. Что делает JavaScript особенным?

Как минимум, три сильные стороны JavaScript:
• Полная интеграция с HTML/CSS.
• Простые вещи делаются просто.
• Поддерживается всеми основными браузерами и
включён по умолчанию.

5. Что Может JavaScript?

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

6. Что Может JavaScript?

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

7. Подключение JavaScript

Чтобы пpoгpaммa (или сценарий) JavaScript запустилась, ее нужно
внедрить в НТМL-документ.
Сценарии внедряются в HTML-документ различными
стандартными способами:
• поместить код непосредственно в атрибут события HTMLэлемента;
• поместить код между открывающим и закрывающим
тегами <script>;
• поместить все ваши скрипты во внешний файл (с расширением
.js), а затем связать его с документом HTML.

8. Тег «script»

Программы на JavaScript могут быть вставлены в любое место HTMLдокумента с помощью тега <script>.

9. Тег «script»

10. Внешние скрипты

Если у вас много JavaScript-кода, вы можете поместить его в отдельный
файл.
Файл скрипта можно подключить к HTML с помощью атрибута src:
script.js

11. Внешние скрипты

Можно указать и полный URL-адрес. Например:

12. Внешние скрипты

Для подключения нескольких скриптов используйте несколько тегов:

13. Внешние скрипты

14. Внешние скрипты

15. Структура программного обеспечения компьютера. Понятие «инструментальное средство».

Независимо от того, как JS-код включается в НТМL-документ,
элементы <script> интерпретируются браузером в том порядке, в
котором они расположены в HTML-документе.
Сначала интерпретируется код первого элемента <script>, затем браузер
приступает ко второму элементу <script> и т. д.

16. Расположение тегов <script>

Расположение тегов <script>
браузер читает HTML-документ сверху вниз и, начинает
отображать страницу, показывая часть документа до тега <script>.
Встретив тег <script>, переключается в JavaScript-режим и
выполняет сценарий. Закончив выполнение, возвращается
обратно в HTML-режим и отображает оставшуюся часть
документа.
Это наглядно демонстрирует следующий пример. Метод alert()
выводит на экран модальное окно с сообщением и
приостанавливает выполнение скрипта, пока пользователь не
нажмёт «ОК»:

17. Расположение тегов <script>

Расположение тегов <script>

18. Расположение тегов <script>

Расположение тегов <script>
Если на странице используется много скриптов JavaScript, то могут
возникнуть длительные задержки при загрузке, в течение которых
пользователь видит пустое окно браузера.
Поэтому считается хорошей практикой все ссылки нa
javaScript-cцeнapии указывать после контента страницы
перед закрывающим тегом <body>

19. Отложенные и асинхронные сценарии

по умолчанию файлы JavaScript-кода прерывают синтаксический анализ
(парсинг) HTML-документа до тех пор, пока скрипт не будет загружен и
выполнен, тем самым увеличивая промежуток времени до первой
отрисовки страницы.
Возьмём пример, в котором элемент <script> расположен где-то в
середине страницы:

20. Отложенные и асинхронные сценарии

В этом примере, пока пока браузер не загрузит и не выполнит script.js, он
не покажет часть страницы под ним.
Такое поведение браузера называется «синхронным» и может доставить
проблемы, если мы загружаем несколько JavaScript-файлов на странице,
так как это увеличивает время её отрисовки.
Кардинально решить проблему загрузки скриптов помогут
атрибуты async и defer элемента <script>.

21. Атрибут async

Async используется для того, чтобы указать браузеру, что скрипт может быть
выполнен «асинхронно».
При обнаружении тега <script async src="..."> браузер не останавливает
обработку HTML-документа для загрузки и выполнения скрипта,
выполнение может произойти после того, как скрипт будет получен
параллельно с разбором документа. Когда скрипт будет загружен – он
выполнится.

22. Атрибут defer

Атрибут defer откладывает выполнение скрипта до тех пор, пока вся HTMLстраница не будет загружена полностью.
Как и при асинхронной загрузке скриптов — JS-файл может быть загружен,
в то время как HTML-документ ещё грузится. Однако, даже если скрипт
будет полностью загружен ещё до того, как браузер закончит обработку
страницы, он не будет выполнен до тех пор, пока HTML-документ не
обработается до конца.

23. Отложенные и асинхронные сценарии

Применение атрибута defer бывает полезным, когда в коде
скрипта предусматривается работа с HTML-документом, и
разработчик должен быть уверен, что страница полностью
получена.