Добавил:
ivanov666
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Предмет:
Файл:Задачи и упражнения по JavaScript. Учебное пособие
.pdf
Использование тега с атрибутом src дает ряд преимуществ:
HTML-файлы становятся проще, так как из них
можно убрать большие блоки JavaScript-кода, что помогает
отделить содержимое от поведения.
JavaScript-функцию или другой JavaScript-код, ис-
пользуемый несколькими HTML-файлами, можно держать в
одном файле и считывать при необходимости. Это уменьшает
объем занимаемой дисковой памяти и намного облегчает поддержку программного кода, так как отпадает необходимость
править каждый HTML-файл при изменении кода.
Если сценарий на языке JavaScript используется
сразу несколькими страницами, он будет загружаться браузером только один раз, при первом его использовании – последующие страницы будут извлекать его из кэша браузера.
Правила подключения скриптов
1. Чтобы подключить несколько скриптов, необходимо
использовать несколько тегов:
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
2. В одном теге script нельзя одновременно подключить
внешний скрипт и указать код. Вот так не сработает, так как
указан src, то внутренняя часть тега игнорируется:
<script src="file.js">
alert(1) ;
</script>
31
Нужно выбрать либо script с атрибутом src, либо он содержит JavaScript – код. Тег выше следует разбить на два:
один – с src, другой – с кодом, вот так:
<script src="file.js"></script>
<script>
alert(1);
</script>
Как уже упоминалось, только закончив выполнение
скрипта, браузер возвращается обратно в HTML-режим и тогда отображает оставшуюся часть документа.
Введем следующие условные обозначения:
→ – обработка страницы
÷– загрузка скрипта
═– выполнение скрипта
Таким образом, при обычном подключении тега script
<script src="example.js"></script>
последовательность обработки HTML-файла происходит по
следующей схеме:
Однако такая ситуация не всегда устраивает разработчика. Например, если в HTML-файле подключается внешний
скрипт, который показывает рекламу, а затем идет код страницы. Конечно, неправильно, что пока реклама не подгрузится, оставшаяся часть страницы не показывается. Реклама
не должна тормозить сайт и нарушать его функциональность.
Еще хуже, если сервер, с которого загружается внешний
скрипт, перегружен. Посетитель в этом случае может ждать
очень долго!
Решить эту проблему помогут атрибуты async или defer
тега script:
32
Атрибут async
При обнаружении <script async src="..."> браузер не
останавливает обработку страницы, а спокойно работает
дальше. Когда скрипт будет загружен, он выполнится.
при загрузке двух и более скриптов первым сработает
тот скрипт, который раньше загрузится:
<script src="1.js" async></script>
<script src="2.js" async></script>
При подключении скрипта следующим образом
<script async src="example.js"></script>
схема последовательности обработки HTML-файла выглядит,
как показано ниже.
Атрибут async разрешает браузеру загружать js-файлы параллельно и выполнять сразу после загрузки, не дожидаясь обработки остальной части страницы.
Атрибут defer
Скрипт также не заставляет ждать страницу, но есть
два отличия от async.
a. Браузер гарантирует, что относительный порядок
скриптов с defer будет сохранен:
<script src="1.js" defer ></script>
<script src="2.js" defer ></script>
В таком коде первым сработает всегда 1.js, а скрипт 2.js,
даже если загрузился раньше, будет его ждать. Поэтому атрибут defer используют в тех случаях, когда второй скрипт 2.js
зависит от первого 1.js, к примеру, использует что-то, описанное первым скриптом.
33
b. скрипт с defer сработает, когда весь HTML-документ
будет обработан браузером.
При подключении скрипта следующим образом
<script defer src="example.js"></script>
схема последовательности обработки HTML-файла выглядит,
как показано ниже.
Атрибут defer позволяет браузеру начать загрузку jsфайлов параллельно, не останавливая дальнейшую обработку
страницы. Их выполнение происходит после полной обработки страницы.
Упражнения
В примере ниже подключены два скрипта small.js и
big.js. Если предположить, что small.js загружается гораздо
быстрее, чем big.js, то какой скрипт выполнится первым?
Задание 1
<script src="big.js" ></script>
<script src="small.js" ></script>
Задание 2
<script src="big.js" async></script>
<script src="small.js" async></script>
Задание 3
<script src="big.js" defer></script>
<script src="small.js" defer ></script>
34
Задание 4
Например, если документ достаточно большой и в нем
встречаются следующие скрипты, то в какой последовательности будет выполняться документ
<script src="async.js" async></script>
<script src=" defer.js" defer ></script>
Задание 5
В задании 1 вынесите скрипт во внешний файл alert.js,
который расположите в той же директории. Откройте страницу и проверьте, что вывод сообщения работает.
Задание 6
Что можно сказать о последовательности выполнения
следующих файлов?
<script src="script1.js" async></script>
<script src=" script2.js" async></script>
<script src=" script3.js" ></script>
<script src=" script4.js" ></script>
<script src="script5.js" async></script>
2.2. Различные возможности отображения
информации на экран
JavaScript имеет различные способы отображения ин-
формации на экран.
Ввод/вывод информации осуществляется одним из
следующих способов:
window.alert(сообщение) выводит сообщение в окне с
кнопкой «ОК». window.alert(“Cообщение”);
35
window.confirm(сообщение) выводит сообщения в окне
с кнопками «ОК» и «Отмена». Возвращает значение true
или false в зависимости от нажатой кнопки:
window.confirm(“Вы действительно хотите завершить работу?”);
var window.prompt(сообщение, значение поля ввода)
создает окно с полем ввода и кнопками «ОК» и «Отмена».
Метод prompt принимает два аргумента: первый выводится в
качестве простой строки в модальном окне; второй (необязательный) – значение по умолчанию в текстовом поле для
ввода. Возвращается введенное значение в виде строки при
нажатии кнопки «ОК» и null при нажатии «Отмена». Для преобразования введенной строки в числовое значение необходимо использовать функции parseInt() или parseFloat().
prompt ("Как Вас зовут?", "Иван");
36
Во всех трех случаях использования методов ввода или
вывода объект window можно опускать. Этот объект означает
«окно», и для краткости обращения к методам разрешено его
не использовать;
document.write(сообщение) выводит сообщение на
HTML-страницу
document.write(5 + 6); // 11
свойство innerHTML позволяет получить и изменить
текст элемента. У пустых элементов свойство innerHTML отсутствует, его можно применять только с теми элементами,
которые имеют открывающий и закрывающий тег.
a. Получение текста элемента.
<body>
<p id="elem">Текст абзаца </p>
<script>
var elem = document.getElementById('elem');
alert (elem.innerHTML); //Текст абзаца.
</script>
</body>
В переменную elem с помощью getElementById() получим ссылку на абзац. Затем с помощью elem.innerHTML получим доступ к его тексту и выведем его на экран.
b. Можно не только считывать текст, но и записывать
новый.
<p id="elem">Текст абзаца </p>
var elem = document.getElementById('elem');
37
elem.innerHTML = 'новый текст';
HTML код станет выглядеть так:
<p id="elem"> новый текст </p>
c. Можно изменять не только текст, но и теги, и они бу
дут работать.
<p id="elem">Текст абзаца </p>
var elem = document.getElementById('elem');
elem.innerHTML = '<u>новый текст</u>';
HTML код станет выглядеть так:
<p id="elem"><u> новый текст </u></p>
В данном случае «новый текст» станет подчеркнутым.
Упражнения
Задание 1
Проверить, какое значение возвращает функция
window.confirm() при нажатии кнопки «ОК» и какое при нажатии «Отмена».
Задание 2
В поле ввода окна, создаваемого window.prompt (сообщение), записать свою фамилию и вывести приветствие, обращенное к себе, в окне с кнопкой «ОК».
Задание 3
С помощью метода window.prompt(сообщение) узнать
имя, возраст и настроение пользователя, а затем с помощью
метода document.write() выдать следующий монолог:
Здравствуй, имя
Тебе возраст лет
И у тебя введенное настроение!
Все верно, не так ли?!
38
Задание 4
Допиcать фрагмент кода для конвертации строкового зн
ачения в числовое. Для вывода результата использовать мето
д document.write():
var x = prompt("Введите значение x ", "0");
var y = prompt("Введите значение y ", "0.0");
var integerX = ...
var floatY = ...
var result = integerX + floatY;
...;
Задание 5
Найти ошибки в следующем фрагменте кода:
var firstName = prompt("Введите имя"; "сюда");
var lastName = promt("Введите фамилию");
int age = prompt("Введите возраст");
alert("В следующем году вам будет", Age);
Задание 6
Создать несколько абзацев с различными ID, например
ID1, ID2, ID3. . . С помощью метода prompt() ввести ID и,
используя innerHTML, методом alert() вывести текст соответствующего абзаца в окне.
Задание 7
Создать несколько абзацев с различными ID, например
ID1, ID2, ID3. . . С помощью метода prompt() ввести ID и,
используя innerHTML, заменить текст соответствующего абзаца на текст, который вводится с помощью метода prompt().
Методом alert() вывести новый текст в окне.
2.3. Переменные
Переменная – это именованный участок памяти, в котором хранится ее значение. Имя переменной должно состоять
39
из английских букв: больших или малых, а также цифр и
знака_подчеркивания.
На языке JavaScript переменные объявляются с помощью ключевого слова var, хотя допускается объявление и без
него, при этом тип данных переменной не указывается. Ее тип
определяется по значению, которое ей присваивается. Так как
на языке JavaScript переменные являются универсальными и
могут хранить значения любого типа, то при необходимости
можно изменять значение переменной на значение из другого
типа данных.
var age;
age=20;
age="Пенсионный возраст";
В языке JavaScript можно выделить три основных типа
данных: числовой, логический и строковый. Тип данных переменной определяет, какие операции над ней можно выполнить.
Операции
В языке существует четыре типа операций:
арифметические (+, -, *, /, %, ++, --);
присваивания (=,+=, *=, /=, %=);
сравнения ((==, != сравнение по значению), (===, !==
сравнение по значению и типу), >, <, >=,<=);
логические (&&, ||, !);
var a = 0;
if (a == 0) alert('Верно!'); else alert('Неверно!'); // Верно!
var a = '0';
if (a == 0) alert('Верно!'); else alert('Неверно!'); // Верно!
var a = '0';
if (a === 0) alert('Верно!'); else alert('Неверно!'); // Неверно!
40
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]