МакГрат, Майк.
JavaScript для начинающих / Майк МакГрат ; [перевод с английского М. А. Райтмана]. — 6-е издание. — Москва : Эксмо, 2023. —
232 с. : ил. — (Мировой компьютерный бестселлер).
ISBN 978-5-04-121621-4
Цветное руководство по JavaScript для начинающих позволит в короткое время
освоить этот язык программирования и приступить к созданию красивых и функциональных сайтов. Вся информация представлена схематично и снабжена наглядными
примерами, а код и другие элементы, необходимые для обучения, читатели могут скачать и использовать совершенно бесплатно.
УДК 004.43
ББК 32.973.26-018.1
Знакомство с JS
Добавление JavaScript в HTML-документ
Вывод JavaScript
Структура кода
Избегайте ключевых слов
Хранение значений
Создание функций
Назначение функций
Область видимости
Замыкания
Заключение
Преобразование типов
Арифметические операторы
Операторы присваивания
Операторы сравнения
Логические операторы
Условный (тернарный) оператор
Побитовые операции
Приоритет операторов
Заключение
Ветвление с помощью оператора if
Альтернативное ветвление
Ветвление с помощью оператора switch
Цикл for
Цикл while
Цикл do..while
Выход из циклов
Обработка ошибок
Заключение
9
10
11
12
14
17
19
21
24
26
29
31
33
34
36
38
40
42
44
46
48
51
53
54
56
58
60
62
64
66
68
71
z
Управление объектами
z
Работа с числовыми и строковыми типами данных
z
Открытие окон и методы объекта window
4
5
6
Пользовательские объекты
Расширенные функции
Встроенные объекты
Создание массивов
Обход элементов в цикле
Методы управления элементами в массиве
Сортировка элементов массива
Получение даты
Получение календаря
Получение времени
Установка даты и времени
Сопоставление текста с шаблоном
Заключение
Вычисление площади
Сравнение чисел
Округление чисел
Генерация случайных чисел
Объединение строк
Разбиение строк
Поиск символов
Обрезка строк
Заключение
Введение в DOM
Свойства объекта window
Диалоговые окна
Прокрутка
Всплывающие окна
Создание таймера
Сведения о браузерах
Включение/отключение функций
Расположение
История
Заключение
73
74
76
78
81
83
86
88
90
92
95
97
99
102
105
106
108
110
112
114
117
119
121
123
125
126
128
130
132
135
137
139
141
144
146
148
z
Методы и свойства объекта document
z
Разработка веб-приложений
z
Написание скриптов
7
8
9
Работа с документом
Свойства интерфейса Document
Получение элементов
Работа с текстом
Управление файлами cookie
События загрузки
Ответ на события мыши
Генерация событий
Добавление переключателей
Добавление элементов выбора
Сброс формы
Проверка и отправка формы
Заключение
Введение в JSON
Промисы
Получение данных
Разработка интерфейса
Заполнение ячеек в таблице
Заполненная таблица
Обновление приложений
Заключение
Запрос данных
Встраиваемая векторная графика
Работа с холстами
Хранение данных
Перемещение элементов
Связь между объектами window
Местоположение пользователей
Заключение
Как пользоваться этой книгой
С помощью примеров вы узнаете, как использовать встроенные функции JavaScript, поддерживаемые современными веб-браузерами, а снимки
экрана проиллюстрируют результаты, полученные с помощью примеров
кода. Необходимые фрагменты кода выделены цветом.
цветом выделен JavaScript-код; красным — имена, присвоенные программистом; черным — текст; зеленым — комментарии к коду:
Синим
let sum = ( 9 + 12 ) / 3 // Эквивалентно 21 / 3.
document.getElementById( 'info' ).innerHTML += 'Grouped sum: ' + sum
Синим цветом выделены HTML-теги; черным — текст; оранжевым — значения атрибутов элементов в HTML- и JavaScript-коде:
JavaScript in easy steps
Кроме того, для идентификации каждого исходного файла, описанного
в пошаговых инструкциях, на полях указаны значки и имена соответствующих файлов:
JS
page.html
data.json
JSON
{}
external.js
data.xml
echo.pl
banner.svg
Чтобы избежать повторений, исходный код HTML-документов, приведенных в примерах, указан не полностью. Однако он представляет собой весь
фрагмент документа, к которому применяется указанный JavaScript-код.
Вы можете скачать ZIP-архив, содержащий все полные файлы исходных
кодов, выполнив следующие простые шаги:
z
z
1
Перейдите на сайт http://addons.eksmo.ru/it/js.zip — загрузка начнется автоматически
2
Извлеките содержимое архива в любое удобное место на вашем
компьютере.
Если вы не довольны полученным результатом, просто сравните свой код
с кодом исходных файлов.
1
Введение
в JavaScript
Добро пожаловать
в удивительный
и захватывающий мир
8
Знакомство с JS
9
Добавление JavaScript
в HTML-документ
программирования
на JavaScript! В этой главе
10
Вывод данных JavaScript
сценарии в HTML-
12
Структура кода
документы, используя
15
Избегайте ключевых слов
17
Хранение значений
19
Создание функций
22
Назначение функций
24
Область видимости
27
Замыкания
29
Заключение
вы узнаете, как добавлять
переменные и функции
JavaScript.
Введение в JavaScript
Знакомство с JS
Язык программирования JavaScript («JS») — это
объектно-ориентированный язык сценариев, объекты которого встроены в программное обеспечение
веб-браузера, например, Google Chrome, Microsoft Edge,
Firefox, Opera и Safari. Для обеспечения функциональности это позволяет при загрузке страницы в браузере интерпретировать содержащиеся на веб-странице
сценарии. В целях безопасности язык JavaScript не может считывать или записывать файлы, за исключением файлов cookie, в которых хранится минимальный
объем данных.
10
Самая первая реализация JavaScript была создана
Бренданом Эйхом (Айком) (Brendan Eich) в компании
Netscape. Этот язык программирования был впервые
представлен в декабре 1995 года и первоначально назывался «LiveScript». Однако вскоре из коммерческих
соображений LiveScript был переименован в JavaScript,
получив соответствующую лицензию у Sun Microsystem.
До введения JavaScript браузер вызывал сценарии
на стороне сервера, а в связи с долгим ответом снижалась производительность. Эта проблема решилась
с помощью вызова сценариев на стороне клиента.
Брендан Эйх, создатель языка программирования
JavaScript, а также
соучредитель проекта Mozilla, помог
запустить веб-браузер Firefox.
Популярность языка JavaScript быстро росла. Но между
компаниями Netscape и Microsoft возникли разногласия по поводу его лицензирования, поэтому Microsoft
представила собственную версию языка под названием «JScript». Несмотря на то что новая версия JScript
очень похожа на JavaScript, она имеет некоторые расширенные функции. В июне 1997 года Ecma International
предложила стандартизировать JavaScript, и в результате появился «ECMAScript». Это помогло стабилизировать основные функции. Однако название не прижилось среди юзеров, поэтому язык программирования
все же получил название JavaScript.
В книге представлены:
zОсновы языка — синтаксис, ключевые слова,
операторы, структура и встроенные объекты.
zФункциональность веб-страницы показывает, как
объектная модель документа (DOM) браузера
обеспечивает взаимодействие с пользователем.
zВеб-приложения — адаптивные веб-приложения
и текстовый формат представления данных
в нотации объекта JavaScript (JSON).
Добавление JavaScript
в HTML-документ
Вы можете добавить JavaScript-код в HTML-документ, поместив его между тегами и ,
например:
Однако это не требуется, поскольку JavaScript —
язык сценариев для
HTML по умолчанию.
type="text/javascript".
11
HTML-документ может включать в себя несколько
сценариев, которые помещаются в раздел заголовка
или тела документа. Однако рекомендуется размещать
сценарии в конце основного раздела (непосредственно
перед закрывающим тегом ), чтобы браузер мог
отобразить веб-страницу до выполнения сценария.
Также в HTML-документ можно добавить JavaScript
код, расположенный во внешнем файле с расширением.js. Это позволяет нескольким различным
веб-страницам вызывать один и тот же сценарий.
Подключение внешнего сценария выполняется с помощью атрибута src тега следующим образом:
Этот код также можно поместить в раздел заголовка
или тела документа, и браузер будет рассматривать
сценарий так, как если бы он был написан непосредственно в этой позиции в HTML-документе.
Если атрибуту src тега присваивается только
имя файла внешнего сценария, необходимо, чтобы
файл сценария находился в одной папке (каталоге)
Не включайте теги
и
во внешний файл
JavaScript. В них
необходимо добавлять только код
сценария.
Введение в JavaScript
с HTML-документом. Если сценарий находится
в другом месте, вы можете указать относительный
путь к файлу, например:
Внешние файлы
сценариев упрощают сопровождение кода. Почти все примеры,
представленные
в этой книге, автономные, поэтому
код сценария можно вставлять между тегами в HTMLдокументе.
Если сценарий расположен в другом месте сайта,
можно указать абсолютный путь к файлу, например:
Кроме того, можно указать содержимое, которое будет отображаться на веб-странице только в том случае, если пользователь в своем веб-браузере отключил JavaScript, включив в HTML-документ элемент
, например:
JavaScript is Not Enabled!
12
Вывод JavaScript
В JavaScript существует несколько вариантов отображения данных. Например:
document.getElementById( 'message' ).innerText = 'Hello World!'
Обратите внимание на использование оператора.
(точка) в описании
свойств или методов объекта с использованием «точечной нотации».
Атрибут id определяет уникальный идентификатор
HTML-элемента. Свойство innerText определяет содержимое HTML-документа.
Также для отображения данных можно использовать
всплывающее окно сообщений.
window.alert( 'Hello World!' )
Метод alert( ) выводит на экран диалоговое окно с сообщением, указанным в коде в круглых скобках ().
В процессе изучения языка JavaScript предпочтительнее выводить данные в консоль браузера, например:
console.log( 'Hello World!' )
Метод log( ) объекта console выводит в окно консоли содержимое, указанное в круглых скобках ( ).
Фактически в любом браузере есть специальная панель веб-разработчика, доступ к которой осуществляется нажатием клавиши F12. Поскольку Google
Chrome — самый популярный браузер на момент
написания книги, я использовал его для демонстрации JavaScript, а консоль этого браузера используется для отображения данных.
1
z
2
z
3
Создайте HTML-документ, содержащий пустой абзац и программный код для отображения данных тремя способами.
Сохраните HTML-документ, затем откройте
его в браузере, чтобы проанализировать полученный результат, как показано на рисунке
ниже.
Нажмите клавишу F12 или воспользуйтесь
меню браузера, чтобы открыть Developers
Tools (Инструменты разработчика).
При возникновении ошибок в коде
консоль предоставляет полезные сообщения,
что очень удобно
для отладки программы.
output.html
13
z
Существует также метод document.
write( ), который перезаписывает весь
заголовок и тело
веб-страницы. Стоит отметить, что
его использование
считается плохой
практикой.
Введение в JavaScript
z
4
Убедитесь, что
в консоли отображается содержимое, а также имя
HTML-документа и номер строки, где есть соответствующий
JavaScript-код.
z
14
5
Выберите вкладку Console (Консоль), чтобы увидеть содержимое, записанное в консоли.
Нажмите кнопку
Show/Hide (Показать/
Скрыть), чтобы скрыть или показать боковую панель. Нажмите кнопку
Customize
(Настроить), чтобы выбрать способ закрепления консоли в окне
браузера. Затем нажмите кнопку
Clear
(Очистить), чтобы очистить все содержимое
консоли.
Структура кода
JavaScript-код состоит из ряда инструкций, называемых «операторами». Обычно все инструкции на странице выполняются сверху вниз.
Более подробную информацию
о ключевых словах вы можете найти на стр. 17–18,
а об операторах,
значениях и выражениях вы узнаете
позже.
Каждая инструкция может содержать любой из следующих элементов:
z Ключевые слова — слова, имеющие особое
значение в языке JavaScript.
z Операторы — специальные символы,
выполняющие операции с одним или
несколькими операндами.
z Значения — текстовые строки, числа,
логическое значение true или false, значения
undefined и null.
z Выражения — любая часть исходного кода
программы, которая вычисляет значение.
Ранее в коде JavaScript каждый оператор должен был
заканчиваться символом ; (точка с запятой), а каждое
предложение — символом . (точка) в английской раскладке. Теперь это необязательно, поэтому, если вы
не хотите писать несколько операторов в одной строке, то это правило можно опустить. В таком случае
операторы необходимо разделять точкой с запятой,
например:
оператор; оператор; оператор
Результат
вычисления
выражения — это
значение, тогда
как оператор
выполняет
действие.
Некоторые разработчики JavaScript по-прежнему
предпочитают заканчивать каждый оператор символом ; (точка с запятой). В приведенных в книге примерах он опускается, но выбор остается
за вами.
15
Интерпретатор JavaScript игнорирует отступы и пробелы. Поэтому, чтобы улучшить читабельность кода,
необходимо использовать пробелы. Например, при сложении двух чисел:
total = 100 + 200 вместо total=100+200
Операторы JavaScript обычно сгруппированы с помощью фигурных скобок { }, разделяющих код
на функциональные блоки, которые можно при необходимости многократно вызывать. Для удобства
и читабельности кода рекомендуется делать отступы
двумя пробелами, например:
{
оператор
оператор
оператор
}
Синтаксис JavaScript — это набор правил, по которым
строится программа. В JavaScript существуют два типа
значений: фиксированные и переменные. Фиксированные числовые и текстовые строковые значения называются литералами:
Для удобства и читабельности кода
создавайте отступы с помощью
клавиши Пробел,
так как при отладке кода в текстовых редакторах отступы, созданные
клавишей Tab, могут обрабатываться
по-разному.
Введение в JavaScript
zЧисловые литералы — целые числа, например
100, или числа с плавающей запятой, например
3,142.
zСтроковые литералы — строка символов,
Для использования
строковых литералов рекомендуется выбрать один
вид кавычек и придерживаться его.
В наших примерах
используются одинарные кавычки.
заключенная в двойные кавычки, например
"JavaScript Fun", или одинарные кавычки,
например 'JavaScript Fun'.
Переменные — это некий контейнер, внутри которого
можно хранить значения для дальнейшего использования
в программе. В JavaScript предусмотрен способ объявления переменных с помощью ключевого слова let. Например, с помощью кода let total создается переменная
с именем «total». Переменной можно присвоить значение, используя оператор присваивания =, например:
let total = 300
16
Прочие операторы JavaScript используются для создания выражений, которые будут вычислять одно
значение. Как правило, выражение заключается
в круглые скобки ( ). Например, приведенное ниже
выражение содержит числа и оператор сложения +
и вычисляет одно значение 100:
( 80 + 20 )
Также выражения могут содержать значения переменных. Например, для вычисления одного значения 100 выражения могут содержать предыдущее
значение переменной, оператор вычитания и число:
( total – 200 )
JavaScript чувствителен к регистру символов, поэтому
переменные с именами total и Total — это две совершенно разные переменные.
Иногда возникает необходимость
закомментировать
строки кода, чтобы предотвратить
их выполнение при
отладке.
Хорошей практикой считается добавление к коду пояснительных комментариев. Они делают код более понятным для других пользователей, а также для вас при
его повторном просмотре. Все, что находится в одной
строке после символа // или между символов /* и */ в одной или нескольких строках, будет проигнорировано.
let total = 100 // Этот код БУДЕТ выполнен.
/* let total = 100
Этот код НЕ БУДЕТ выполнен. */
Избегайте
ключевых слов
В программе для переменных и функций вы можете указывать собственные имена. Лучше всего давать
переменным осмысленные имена, которые будут отражать суть переменной или функции. Имя переменной может содержать буквы, цифры и символы
подчеркивания, но никогда не начинается с цифры.
Также в нем не используются пробелы. Запрещается использовать в качестве имен переменных приведенные ниже в таблице ключевые слова, которые
имеют особое значение:
abstract
arguments
await
boolean
break
byte
case
catch
char
class
const
continue
debugger
default
delete
do
double
else
enum
eval
export
extends
false
final
finally
float
for
function
goto
if
implements
import
in
instanceof
int
interface
let
long
native
new
null
package
private
protected
public
return
short
static
super
switch
synchronized
this
throw
throws
transient
true
try
typeof
var
void
volatile
while
with
yield
17
Ключевые (зарезервированные) слова JavaScript
Введение в JavaScript
Объекты, свойства и методы JavaScript
Array
Date
eval
function
hasOwnProperty
Infinity
isFinite
isNaN
isPrototypeOf
length
Math
NaN
name
Number
Object
prototype
String
toString
undefined
valueOf
18
HTML-имена, объекты окна и свойства
alert
all
anchor
anchors
area
assign
blur
button
checkbox
clearInterval
clearTimeout
clientInformation
close
closed
confirm
constructor
crypto
decodeURI
decodeURIcomponent
defaultStatus
document
element
elements
embed
embeds
encodeURI
encodeURIcomponent
escape
event
fileUpload
focus
form
forms
frame
innerHeight
innerWidth
layer
layers
link
location
mimeTypes
navigate
navigator
frames
frameRate
hidden
history
image
images
offscreenBuffering
open
opener
option
outerHeight
outerWidth
packages
pageXOffset
pageYOffset
parent
parseFloat
parseInt
password
pkcs11
plugin
prompt
propertyIsEnum
radio
reset
screenX
screenY
scroll
secure
select
self
setInterval
setTimeout
status
submit
taint
text
textarea
top
unescape
untaint
window
Атрибуты событий в HTML
Например:
onclick
ondblclick
onfocus
onfocusout
onkeydown
onkeypress
onkeyup
onload
onmousedown
onmouseup
onmouseover
onmouseout
onmousemove
onchange
onreset
onsubmit
Хранение значений
Переменная — это контейнер, общий для каждого языка сценариев и языка программирования, в котором
хранятся данные и в процессе работы могут быть извлечены. В отличие от строго типизированных переменных в большинстве других языков программирования, которые должны декларировать определенный
тип данных, переменные JavaScript в использовании
намного проще. JavaScript — язык со слабой типизацией, поэтому переменные могут содержать любой
тип данных:
Пример
Описание
String
'Hello World!'
Последовательность символов
Number
3.142
Целое число или число
с плавающей запятой
Boolean
true
Значение true (1) или false
(0)
Object
console
Пользовательский или
встроенный объект
Function
log( )
Пользовательская функция,
встроенная функция или
метод объекта
Symbol
Symbol( )
Уникальный
идентификатор
null
null
Отсутствие какого-либо
объектного значения
undefined
undefined
Пустое значение
Для объявления переменных в JavaScript используются ключевые слова let, const или var, за которыми следует пробел и выбранное вами имя. По мере выполнения программного кода ключевое слово let позволяет
присваивать переменным новые значения, тогда как
const (константа) не предполагает никаких изменений. Ключевое слово var использовалось в JavaScript
до введения ключевого слова let. Однако сейчас его
лучше избегать, так как оно позволяет дважды объявлять одну и ту же переменную в одном и том же
контексте.
Имя переменной —
это псевдоним
для значения.
С помощью него
можно ссылаться
на ее сохраненное
значение.
Для удобства рекомендуется выбирать понятные
и осмысленные
имена переменных.
19
Тип данных
Введение в JavaScript
Объявление переменной через let позволяет в программе создать переменную, значение которой может
быть присвоено позже. Директива let объявляет переменную с блочной областью видимости с возможностью инициализировать ее значением.
let myNumber
// Объявление переменной.
myNumber = 10
// Инициализация переменной.
let myString = 'Hello World!' // Объявление и инициализация переменной.
Также в одной строке можно объявить несколько переменных:
let i, j, k
let num = 10, char = 'C'
// Объявление трех переменных.
// Объявление и инициализация
двух переменных.
Однако константы должны быть инициализированы
во время объявления:
20
const myName = 'Mike'
После инициализации JavaScript автоматически устанавливает тип переменной для присвоенного значения.
Последующее назначение другого типа данных выполняется в программе позже, чтобы изменить тип данных. Текущий тип переменной можно узнать по ключевому слову typeof.
z
1
variables.html
z
2
Создайте HTML-документ. Объявите и проинициализируйте несколько переменных
разного типа.
const firstName = 'Mike'
const valueOfPi = 3.142
let isValid = true
let jsObject = console
let jsMethod = console.log
let jsSymbol = Symbol( )
let emptyVariable = null
let unusedVariable
Для вывода типа данных каждой переменной
добавьте операторы:
Сохраните HTML-документ, затем откройте его в браузере и запустите консоль. Проанализируйте полученные результаты — типы
данных.
Оператор конкатенации + в данном
примере используется для вывода
объединенной текстовой строки.
Создание функций
Объявление функции состоит из одного или нескольких операторов, сгруппированных вместе в фигурные
скобки { }. Функция вызывает свои инструкции и возвращает в результате единственное значение. Функции могут вызываться по требованию программы. Чтобы отличать встроенные функции от определяемых
пользователем, функции, которые являются свойством
объекта, например console.log(), называются методами.
Встроенные и определяемые пользователем функции
содержат завершающие круглые скобки, которые могут принимать значения аргумента. Например, аргумент, переданный в скобках метода console.log( ).
Количество аргументов, передаваемых функции,
как правило, должно соответствовать количеству
21
Вы будете удивлены, увидев, что переменная, которой
присвоено значение null, описывается как тип object,
а не тип null. Это
распространенная ошибка языка
JavaScript.
Введение в JavaScript
параметров, указанных в скобках. Например, определяемая пользователем функция, требующая только
один аргумент, выглядит так:
Обратите внимание, что в предпочтительном формате объявления
функции открывающая фигурная
скобка {находится в той же строке, что и ключевое
слово function.
function ƆƊƝ ƒƑƋƈƔƆƆ ( ƍžƎžƊƃƐƎ ) {
// Здесь будет ваш код.
}
Функция может иметь несколько параметров, которые
указываются через запятую в скобках. При необходимости вы можете указать значение по умолчанию, которое будет использоваться, когда вызов функции не передает аргумент, например:
function ƆƊƝ ƒƑƋƈƔƆƆ ( ƍžƎžƊƃƐƎ, ƍžƎžƊƃƐƎ = ƅƋžƕƃƋƆƃ ) {
// Здесь будет ваш код.
}
22
Выбирая собственные имена параметров, необходимо
следовать тем же правилам, что и при выборе имен
переменных. Имена параметров можно использовать
в функции для ссылки на значения аргументов, переданных при вызове функции.
Вы можете опустить оператор
return или использовать ключевое слово return без указания значения, тогда
функция в результате вернет значение undefined.
Функциональный блок может включать оператор return.
Он предназначен для возвращения значения выражения в качестве результата выполнения функции. Как
только выполнение программы доходит до этого места, функция останавливается, и значение возвращается в вызвавший ее код.
function имя функции ( параметр, параметр = значение ) {
// Здесь будет ваш код.
return результат
}
В функциональном блоке также может находиться вызов других функций.
z
1
functions.html
Создайте HTML-документ. Создайте функцию, возвращающую значения переданного аргумента, возведенного в квадрат (во вторую степень).
z
2
z
3
4
z
5
Добавьте функцию, возвращающую результат
сложения.
function add ( argOne, argTwo = 10 ) {
return argOne + argTwo
}
Теперь добавьте функцию, возвращающую
результат возведения в квадрат и сложения,
как показано ниже.
function squareAdd ( arg ) {
let result = square( arg )
return result + add( arg )
}
Добавьте операторы, которые вызывают
функции и выводят возвращаемые значения
на экран.
console.log( '8 x 8: ' + square( 8 ) )
console.log( '8 + 20: ' + add( 8, 20 ) )
console.log( '8 + 10: ' + add( 8 ) )
console.log( '(8 x 8) + (8 + 10): ' + squareAdd( 8 ) )
Сохраните HTML-документ, затем откройте
его в браузере и запустите консоль. Проанализируйте полученный результат — возвращаемые функциями значения.
Обратите
внимание, что
в нашем случае
используется
значение второго
параметра
по умолчанию
(10), когда при
вызове функции
передается только
одно значение
аргумента.
Символ * — это
оператор арифметического умножения в JavaScript.
23
z
function square ( arg ) {
return arg * arg
}
Введение в JavaScript
Назначение функций
Функции — важный инструмент в JavaScript. Это
некоторый фрагмент кода, который можно описать
один раз, а затем вызывать на выполнение в разных
частях программы любое число раз.
24
При присвоении
переменной
именованной
функции
указывайте
в операторе только
имя функции.
Переменные, которые были объявлены с использованием прежнего
ключевого слова var, также были
подняты. Переменные, которые были
объявлены с помощью ключевых
слов let или const,
не поднимались.
Важно понимать, что оператор ( ) — это компонент
оператора вызова, который фактически вызывает
функцию. Это означает, что оператор может назначить функцию переменной, указав только имя функции. Затем переменную можно использовать для вызова функции. Однако будьте внимательны, если вы
попытаетесь назначить функцию переменной, указав
ее имя, за которым следует символ ( ). Такая функция будет вызвана, и будет присвоено значение, возвращаемое этой функцией.
Поднятие
Хотя код читается интерпретатором JavaScript сверху
вниз, на самом деле он выполняет два этапа. На первом этапе ищутся объявления функций и запоминается все, что находится в процессе, то есть поднятие.
Второй этап — это когда код фактически выполняется интерпретатором.
Поднятие позволяет вызовам функций появляться
в коде до объявления функции, так как интерпретатор уже распознал функцию на первом этапе. Однако на первом этапе не распознаются функции, которые были присвоены переменным с помощью
ключевых слов let или const!
Анонимные функции
При присвоении функции переменной имя функции можно не указывать, так как ее можно вызвать
в операторе, указав имя переменной и оператор ().
Такие функции называются анонимными функциональными выражениями. Их синтаксис выглядит
следующим образом:
let переменная = function ( параметры ) { операторы ;
return ƅƋžƕƃƋƆƃ}
Анонимные функциональные выражения также можно сделать самовызывающимися, заключив функцию
целиком в круглые скобки ( ) и добавив в конце выражения оператор ( ). Это означает, что при первой
загрузке сценария браузером операторы автоматически выполняются один раз. Синтаксис функционального выражения с автоматическим запуском выглядит так:
( function ( ) { операторы ; return значение } ) ( )
В приведенных в книге примерах для выполнения
кода при загрузке скрипта обычно используются самовызывающиеся функции.
z
1
z
3
z
4
z
5
Создайте HTML-документ. Вызовите функцию, которая еще не была объявлена.
console.log( 'Hoisted: ' + add( 100, 200 ) )
anonymous.html
Добавьте функцию, которая вызывается выше.
25
z
2
Самовызывающиеся функциональные выражения
также известны как немедленно вызываемые
функции (IIFE — часто произносится
как «iff y»).
Добавьте функцию, которая назначает указанную выше функцию переменной, а потом
вызывает назначенную функцию.
let addition = add
console.log( 'Assigned: ' + addition( 32, 64 ) )
Назначьте аналогичную, но анонимную функцию переменной и вызовите назначенную
функцию.
let anon = function ( numOne, numTwo ) {
let result = numOne + numTwo ; return result
}
console.log( 'Anonymous: ' + anon( 9, 1 ) )
Присвойте значение, возвращаемое самовызывающейся функцией, переменной и отобразите полученное значение.
Смысл самовызывающихся функций может быть
не сразу понятен,
но к концу этой
главы их важность
станет более ясной и очевидной.
Введение в JavaScript
26
z
6
let iffy = ( function ( ) {
let str = 'Self Invoked Output' ; return str
})()
console.log( iffy )
Сохраните HTML-документ, затем откройте
его в браузере и запустите консоль. Проанализируйте полученные результаты — возвращаемые функцией значения.
Область видимости
Все переменные в JavaScript имеют определенную
область видимости, в пределах которой они могут
действовать. Таких областей две — глобальная и локальная.
Глобальная область видимости
Переменная или функция, созданная в этой области видимости, доступна из любой точки программы. Это означает, что переменные существуют постоянно и доступны для функций в одной области.
На первый взгляд это может показаться очень удобным, однако имеется серьезный недостаток, заключающийся в том, что одноименные переменные могут конфликтовать. Представьте, что вы создали
глобальную переменную myName, которой вами было
присвоено имя, но затем подключился внешний код,
в котором другой разработчик создал глобальную переменную myName с таким же именем. Обе переменные существуют в одной области программы,
то есть конфликтуют. Таких ситуаций лучше избегать, поэтому для хранения примитивных значений
не рекомендуется создавать глобальные переменные (всех типов данных, за исключением Object
и Function).
Наиболее эффективный вариант
Объявление глобальных переменных с использованием ключевого слова var позволяет конфликтующим
переменным с одинаковыми именами перезаписывать присвоенные им значения без предупреждения. В этом случае в результате использования более новых ключевых слов let и const выдается ошибка
Uncaught SyntaxError. Поэтому в программе для хранения значений рекомендуется создавать переменные, объявленные с использованием ключевых слов
let или const.
z
1
Создайте внешний код, в котором вызывается функция для вывода значения глобальной
переменной.
Информация
по обнаружению
и обработке ошибок более подробно описана
на стр. 68–69.
27
Локальная область видимости
Переменные, созданные внутри функциональных блоков, доступны локально на протяжении всего цикла функции. Они существуют только во время ее выполнения, а затем удаляются. Их область
программы ограничена — от места, в котором они
были созданы, до последней фигурной скобки} или
момента возврата из функции. Рекомендуется объявлять переменные в начале функционального блока, чтобы их лексическая область видимости соответствовала времени жизни функции. Это означает,
что переменные с одинаковыми именами могут существовать внутри отдельных функций без создания конфликта. Например, локальная переменная
myName может успешно существовать в программе внутри отдельных функций и внутри функций
во включенных внешних кодах. В программе для
хранения значений рекомендуется создавать только
локальные переменные.
JS
external.js
let myName = 'External Script'
function readName( ) {console.log( myName ) }
readName( )
scope.html
Введение в JavaScript
z
2
z
3
z
28
4
Вызовы функций
readName( ) и getName( )
остаются
в коде без
редактирования.
Создайте HTML-документ, который подключает внешний код и добавляет аналогичный.
let myName = 'Internal Script'
function getName( ) {console.log( myName ) }
getName( )
Сохраните оба файла в одной папке, затем
откройте HTML-документ, чтобы увидеть
сообщение об ошибке конфликта в консоли.
Отредактируйте оба скрипта, чтобы преобразовать глобальные переменные в локальные.
Во избежание конфликта обновите браузер.
function readName( ) {
let myName = 'External Script'; console.log (
myName )
}
function getName( ) {
let myName = 'Internal Script'; console.log (
myName )
}
Замыкания
На предыдущем примере была продемонстрирована
опасность создания глобальных переменных для хранения значений в JavaScript. Однако возникает необходимость сохранить значения, которые остаются постоянно доступными, — например, чтобы запоминать
увеличение счетчика в ходе выполнения программы.
Как это сделать без использования глобальных переменных для хранения примитивных значений? Ответ
заключается в использовании замыканий.
Замыкание — это комбинация функции и лексического окружения вместе со всеми доступными внешними
переменными. В JavaScript замыкания создаются каждый раз при создании функции, во время ее создания.
z
1
2
z
3
z
4
const add = ( function ( ) {
// Здесь будет ваш код.
})()
сlosure.html
Добавьте операторы для инициализации локальной переменной и назначения функции
локальной переменной в той же области.
let count = 0
const nested = function ( ) { return count = count + 1
}
Теперь добавьте оператор для возврата внутренней функции — присвоения внутренней
функции глобальной переменной.
return nested
Наконец добавьте три идентичных вызова
функций к внутренней функции, которая теперь назначена глобальной переменной.
console.log( 'Count is ' + add( ) )
Самовызывающиеся функции описаны на стр. 24. Они
выполняют свои
операторы только один раз. В данном случае вы можете использовать
console.log(add),
чтобы подтвердить, что выражение функции было
присвоено внешней переменной.
29
z
Создайте HTML-документ с кодом, который
присваивает глобальной переменной самовызывающуюся анонимную функцию.
Введение в JavaScript
z
5
Все объекты
JavaScript наследуют свойства и методы от свойства
prototype. Стандартные объекты JavaScript, такие
как функции, для
создания объекта
вызывают функцию
внутреннего конструктора.
6
30
Сохраните HTML-документ, затем откройте
его в браузере и запустите консоль. Проанализируйте полученные результаты — значения, возвращенные при закрытии.
Понять концепцию замыканий непросто — может показаться, что переменная count в нашем примере должна быть удалена, когда самовызывающаяся функция
завершит выполнение. Чтобы разобраться, как работают замыкания, вы можете изучить свойство prototype.
z
z
7
Не беспокойтесь, если вы сразу не сможете понять, как работают
замыкания. Сначала это покажется сложным,
но со временем
все станет гораздо
проще и понятнее.
Вы можете продолжить изучение,
а затем вернуться к этому инструменту.
console.log( 'Count is ' + add( ) )
console.log( 'Count is ' + add( ) )
В конце кода добавьте следующий оператор.
console.log( add.prototype )
Сохраните HTML-документ, затем обновите
браузер и разверните раскрывающийся список constructor, чтобы увидеть области.
Присмотритесь внимательнее, и вы обнаружите, что
назначенная функция имеет особую область видимости (замыкание) в дополнение к обычной локальной
(скрипт или код) и внешней (глобальной) области. Таким образом, переменная count остается доступной через назначенную функцию. Однако на нее невозможно ссылаться каким-либо другим способом.
Считается важным использование замыканий для сокрытия постоянных переменных от других областей
кода. Точно так же частные переменные могут быть
скрыты в других языках программирования и доступны только при использовании методов чтения.
Заключение
zJavaScript-код может быть включен в HTMLдокумент напрямую или из внешнего файла
с помощью тегов .
вывода в диалоговом окне предупреждения или
в окне консоли браузера.
zОператоры JavaScript могут содержать ключевые
слова, операторы, значения и выражения.
zИнтерпретатор JavaScript игнорирует отступы
и пробелы.
zОператоры JavaScript могут быть сгруппированы
в функциональные блоки с помощью фигурных
скобок {}, которые при необходимости
вызываются для выполнения.
zИмена переменных и функций могут состоять
из букв, цифр и символов подчеркивания,
но запрещается использовать в качестве имен
переменных ключевые слова.
zПеременные JavaScript могут содержать
следующие типы данных: строка (string), число
(number), булев или логический тип (boolean),
31
zJavaScript позволяет отображать результаты
Введение в JavaScript
объекты (object), функция (function), символы
(symbol), значение (null) и специальное
значение (undefined).
zПеременным, объявленным с использованием
ключевого слова let, можно дать новые значения.
Ключевое слово const не предполагает
изменений.
zОбъявление функции состоит из одного или
нескольких операторов, сгруппированных вместе
в фигурные скобки { }. Функция вызывает
свои инструкции и возвращает в результате
единственное значение.
zВ функциональном выражении в круглых скобках
( ) могут содержаться параметры значений
аргументов, передаваемых от вызывающей
стороны.
32
zФункциональный блок может включать оператор
return для указания данных, которые должны
быть переданы обратно вызывающей стороне.
zОператор ( ) вызывает функцию.
zПоднятие позволяет вызовам функций
появляться в коде до объявления функции.
zФункция может быть анонимной, то есть
не иметь имени.
zЛексическая область видимости — это область,
где была создана переменная, которая может
быть глобальной, локальной или замыканием.
zЗамыкание — это функция, вложенная
во внешнюю функцию, которая сохраняет
доступ к переменным, объявленным во внешней
функции.
2
Распространенные
операции
В этой главе вы узнаете
об операторах языка
JavaScript и о том, как они
32
Преобразование типов
34
Арифметические
операторы
36
Операторы присваивания
38
Операторы сравнения
40
Логические операторы
42
Условный (тернарный)
оператор
44
Побитовые операции
46
Приоритет операторов
49
Заключение
используются в скриптах.
Распространенные операции
Преобразование типов
Во избежание непредвиденных результатов перед
выполнением операций в JavaScript важно определить типы данных значений, с которыми вы работаете. Например, значение 42 — это число,
а значение '42' — строка, поэтому в результате сложения '42' + 8 получится строковое выражение '428',
а не число 50. JavaScript предоставляет несколько
способов преобразования типов данных без изменения исходного значения.
Преобразование строки в число
Встроенная функция parseInt() принимает строку в качестве аргумента и возвращает целое число в соответствии с указанным основанием системы счисления. Например, parseInt('42') вернет число 42, поэтому
в результате сложения 42 + 8 получится число 50.
34
Встроенная функция parseFloat() принимает строку
в качестве аргумента и возвращает десятичное число
(число с плавающей запятой).
Оба метода позволяют буквенным символам следовать за числовой частью указанной строки и удалять
их из результата — например, parseInt('42nd Street')
в результате возвращает число 42.
Преобразование или приведение типов данных может быть
явным или неявным. Например,
‹42› + 8 в результате выполнения возвращает строку
‹428› — это неявное
приведение. Метод
String(42) возвращает
в результате строку '42' — это явное
приведение.
Если в начале указанной строки ни одна из этих
функций не находит числовое значение, результатом
будет NaN (Not-A-Number) — свойство JavaScript,
означающее «не число». С помощью функции isNaN( )
вы можете проверить, является ли переменная или
литерал нечисловым значением. В начале указанного значения она попытается найти число и вернет
false, если число обнаружено (даже в указанной строке). В противном случае, если этого не произойдет,
в результате вернется значение true.
Преобразование числа в строку
Метод String( ) – строковое представление числа, указанного в круглых скобках, например, String(42) вернет в результате строковый тип данных '42'.
Чтобы вернуть строковое представление сохраненного числового типа данных, к имени переменной
можно добавить вызов метода toString(). Например,
если переменной с именем «num» был присвоен номер, метод num.toString() в результате вернет строковое представление этого сохраненного числа.
z
1
Создайте HTML-документ с самовызывающейся анонимной функцией, объявите
и проинициализируйте три переменные.
( function ( ) {
let sum, net = '25', tax = 5.00
// Здесь будет ваш код.
})()
z
2
3
Добавьте операторы, которые создают разные типы данных и выводят результат в выходной строке.
sum = net + tax
console.log( 'sum: ' + sum + ' ' + typeof sum )
sum = parseFloat( net ) + tax
console.log( 'sum: ' + sum + ' ' + typeof sum )
console.log( 'tax: ' + tax + ' ' + typeof tax )
tax = tax.toString( )
console.log( 'tax: ' + tax + ' ' + typeof tax )
net = '$' + net
console.log( 'net: ' + net + ' ' + parseInt( net ) )
console.log( 'net Not a Number? ' + isNaN( net ) )
Сохраните HTML-документ, затем откройте
его в браузере и запустите консоль. Проанализируйте результаты вывода.
Если вы вызовете функцию isNan(net)
до того, как кстроке будет добавлен префикс '$', результат будет false
(ложь), так как в начале строки функция находит число '25'.
35
z
conversion.html
Распространенные операции
36
Арифметические
операторы
Перед вами наиболее распространенные в JavaScript
арифметические операторы:
Оператор возведения в степень **
возвращает результат первого операнда, возведенного в степень.
Оператор
Описание
+
Оператор сложения возвращает сумму числовых операндов или объединяет строки
–
Оператор вычитания
*
Оператор умножения
/
Оператор деления
%
Остаток от деления
++
Инкремент
––
Декремент
**
Возведение в степень
Данные, обрабатываемые сценарием JavaScript, называются операндами. Например, в выражении 5+2
оператору + передаются значения операндов 5 и 2.
Обратите внимание, что в зависимости от типа операндов оператор + выполняет два типа операций.
Числовые операнды добавляются для получения суммы чисел, однако при сложении строковых операндов в результате возвращается объединенная строка.
Оператор % возвращает целый остаток от деления
левого операнда на правый. Деление на 2 вернет
либо 1, либо 0.
Пример использования оператора % с нечетными
или четными числами можно найти
на стр. 45.
Оператор инкремент ++ и оператор декремент увеличивают и уменьшают значение операнда на единицу соответственно и возвращают новое значение.
Эти операторы чаще всего используются для подсчета итераций цикла двумя разными способами. Если
форма операции постфикс (оператор после операнда), значение операнда возвращается, а затем увеличивается или уменьшается на единицу. Если
применяется префиксная форма (оператор перед
операндом), значение операнда возвращается увеличенным или уменьшенным на единицу.
z
1
z
2
Создайте HTML-документ с самовызывающейся функцией.
( function ( ) {
// Здесь будет ваш код.
})()
arithmetic.html
Добавьте операторы, которые присваивают значения переменным, используя каждый
арифметический оператор, и проанализируйте результат.
let sum = 80 + 20 ; console.log( 'Addition: ' + sum )
let sub = sum - 50 ; console.log( 'Subtraction: ' + sub )
let mul = sum * 5 ; console.log( 'Multiplication: ' + mul )
let div = sum / 4 ; console.log( 'Division: ' + div )
let mod = sum % 2 ; console.log( 'Modulus: ' + mod )
let inc = ++sum ; console.log( 'Increment: ' + inc )
z
3
Сохраните HTML-документ, затем откройте его в браузере и запустите консоль. Проанализируйте результаты вывода — значения,
полученные в результате выполнения арифметических операций.
37
let dec = --sum ; console.log( 'Decrement: ' + dec )
Распространенные операции
Операторы
присваивания
Ниже в таблице представлены наиболее распространенные в JavaScript операторы присваивания. Все операторы, кроме =, — ɷɬɨ ɫɨɤɪɚɳɟɧɧɚɹ ɮɨɪɦɚ ɛɨɥɟɟ ɞɥɢɧɧɵɯ
ɜɵɪɚɠɟɧɢɣ, ɩɨɷɬɨɦɭ ɤɚɠɞɨɦɭ ɨɩɟɪɚɬɨɪɭ ɩɪɢɜɨɞɢɬɫɹ
ɷɤɜɢɜɚɥɟɧɬ.
Оператор
Пример
Эквивалент
=
a=b
a=b
+=
a += b
a=(a+b)
–=
a –= b
a=(a–b)
*=
a *= b
a=(a*b)
/=
a /= b
a=(a/b)
%=
a %= b
a=(a%b)
**=
a **= b
a = ( a ** b )
38
Важно понимать, что оператор = означает «присваивать», а не «равно». Для сравнения оператор равенства в JavaScript выглядит следующим образом: ===.
Оператор равенства === сравнивает значения. Более
подробная информация об операторах сравнения приведена на стр. 40.
На примере в таблице оператор присваивания = присваивает переменной a значение, содержащееся в переменной b, и в результате возвращается новое сохраненное значение.
Оператор присваивания += считается наиболее полезным и может использоваться для добавления новой
строки к существующей. На следующем примере let
str='JavaScript' и str+='Fun' мы видим, что теперь переменная хранит объединенную строку 'JavaScript Fun'.
На примере в таблице оператор присваивания += добавит значение, содержащееся в переменной a, к значению, содержащемуся в переменной b, а затем назначит итоговую сумму, чтобы она стала новым значением,
сохраненным в переменной a.
Все остальные комбинированные операторы присваивания работают аналогично. Каждый из них сначала выполняет арифметическую операцию с двумя
операндами, а затем присваивает результат этой операции первой переменной, и она становится ее новым
сохраненным значением.
z
1
z
2
Создайте HTML-документ с самовызывающейся анонимной функцией, объединяющей
две строки.
assignment.html
( function ( ) {
let msg = 'JavaScript' ; msg += ' Fun'
console.log( 'Add & concatenate: ' + msg )
// Здесь будет ваш код.
})()
Добавьте операторы, использующие для выполнения арифметических операций комбинированные операторы, и выведите результат.
let sum = 5.00 ; sum += 2.50
console.log( 'Add & assign decimal: ' + sum )
sum = 8 ; sum -= 4
console.log( 'Subtract & assign integer: ' + sum )
sum = 8 ; sum %= 4
console.log( 'Modulus & assign integer: ' + sum )
z
3
Сохраните HTML-документ, затем откройте его в браузере и запустите консоль. Проанализируйте вывод — результат выполнения
операторов присваивания.
39
sum = 8 ; sum *= 4
console.log( 'Multiply & assign integer: ' + sum )
sum = 8 ; sum /= 4
console.log( 'Divide & assign integer: ' + sum )
Распространенные операции
>>
40
Пример использования оператора
меньше < в структуре цикла можно
найти на стр. 61.
Также существуют
стандартные оператор равенства ==
и оператор неравенства !=. Однако
они могут привести
к непредвиденным
результатам. В отличие от операторов
строгого равенства, они не гарантируют, что сравниваемые значения
относятся к одному типу данных. Например, в результате сравнения 25== '25'
возвращается значение true, а в результате сравнения
25=== '25' — false. Для
точных сравнений
всегда используйте трехсимвольные
операторы.
Операторы сравнения
Ниже в таблице представлены наиболее распространенные в JavaScript операторы сравнения.
Оператор
Описание
===
Строго равно
!==
Строго не равно
>
Больше
<
Меньше
>=
Больше или равно
возвращает значение true в том случае, если значение левого операнда больше, чем правого. Оператор меньше < возвращает значение true
в том случае, если значение левого операнда меньше,
чем правого. При добавлении символа = после оператора > или оператора < в результате возвращается значение true еще в том случае, если два операнда равны.
Операторы больше > и меньше 5
console.log( 'Greater Than? ' + comparison )
comparison = sum numTwo ) ? numOne : numTwo
console.log( max + ' is the Greater Number' )
Сохраните HTML-документ, затем откройте
его в браузере и запустите консоль. Проанализируйте результаты вывода.
Тернарный оператор может возвращать значения любого типа данных,
будь то строка,
число, логическое
значение и т. д.
Распространенные операции
46
Побитовые операции
Побитовые операторы JavaScript интерпретируют
операнды как последовательность из 32 битов (нулей и единиц). Каждый бит передает десятичный
компонент только в том случае, если он содержит
единицу. Компоненты рассматриваются справа налево от «младшего значащего бита» (LSB) до «старшего значащего бита» (MSB). Ниже представлено
двоичное число в восьмибитном представлении —
десятичное число 50, что обозначено битами, установленными со значением 1 (2 + 16 + 32 = 50).
Многие авторы книг
по программированию на JavaScript
не дают информацию по побитовым
операторам. Однако полезно понять,
что они из себя
представляют и как
их можно использовать.
Биты
8
7
6
5
4
3
2
1
Десятичное
представление
128
64
32
16
8
4
2
1
Двоичное
представление
0
0
1
1
0
0
1
0
В следующей таблице перечислены все побитовые операторы, используемые в JavaScript.
Оператор
|
Название
Binary number operation:
Побитовое
ИЛИ (OR)
Возвращает 1 в тех разрядах,
которые хотя бы у одного
из операндов были равны 1.
Пример: 1010 | 0101 = 1111
&
Байт состоит
из 8 бит, и каждая
половина байта
известна как полубайт (4 бита).
Двоичные числа,
представленные
в примерах таблицы, описывают значения, хранящиеся
в полубайте.
~
Побитовое
И (AND)
Побитовое
НЕ (NOT)
Возвращает 1 в тех разрядах,
которые у обоих операндов
были равны 1.
Пример: 1010 & 1100 = 1000
Заменяет каждый бит операнда на противоположный. Возвращает 1, если бит не равен
1, и 0 — если бит равен 1.
Пример: ~ 1010 = 0101
^
Побитовое
исключающее ИЛИ
(XOR)
Возвращает 1 в тех позициях, которые только у одного
из операндов были равны 1.
Пример: 1010 ^ 0100 = 1110
Оператор
Правый
сдвиг,
переносящий знак
Сдвигает двоичное представление числа на некоторое
количество разрядов вправо.
Освобождающиеся разряды
заполняются знаковым битом.
Пример: 1000 >> 2 = 0010
>>>
Правый
сдвиг с заполнением
нулями
Сдвигает двоичное представление числа на некоторое
количество разрядов вправо.
Освобождающиеся разряды
заполняются нулями.
Пример: 1000 >> 2 = 0010
1
z
2
z
3
47
z
Создайте HTML-документ с самовызывающейся анонимной функцией, объявите
и проинициализируйте две переменные.
( function ( ) {
let numOne = 10, numTwo = 5
// Здесь будет ваш код.
})()
Добавьте операторы для простого вывода
строк, подтверждающих начальные значения,
хранящиеся в каждой переменной.
console.log( 'numOne: ' + numOne )
console.log( 'numTwo: ' + numTwo )
Добавьте операторы, чтобы с помощью побитовых операций поменять местами значения,
хранящиеся в каждой переменной.
numOne = numOne ^ numTwo
// 1010 ^ 0101 = 1111 = (десятичное число 15)
bitwise.html
Распространенные операции
Обратите внимание, каким образом в нашем примере для разрыва
строки используется специальная
escape-последовательность \n.
z
4
z
Добавьте операторы для вывода разрыва
строки и строк, чтобы подтвердить окончательные значения, хранящиеся в каждой переменной.
console.log( '\n' + 'numOne: ' + numOne )
console.log( 'numTwo: ' + numTwo )
Сохраните HTML-документ, затем откройте
его в браузере и запустите консоль. Проанализируйте результаты вывода.
Приоритет операторов
Операторы JavaScript имеют разные уровни приоритета. Приоритет операторов определяет порядок,
в котором операторы выполняются. Операторы с более высоким приоритетом выполняются раньше операторов с более низким приоритетом.
В таблице сверху вниз перечислены операторы каждого типа в порядке от самого высокого до самого
низкого уровня приоритета:
Описание
()
Группировка
.
Оператор доступа к объекту
Оператор доступа к массиву
Вызов функции
Оператор [ ] описан в разделе
о массивах, начиная со стр. 81.
Также обратите внимание, что
оператор. (точка)
используется в точечной нотации,
например console.
log( ). Он нужен для
доступа к свойствам или методам
объекта (массива
или функции).
=
+= –= *= /=%=
&= ^= |=
Операторы присваивания
= >>>=
,
Запятая
z
1
Создайте HTML-документ с самовызывающейся анонимной функцией, которая инициализирует переменную с результатом разгруппированного выражения и выводит его
значение.
precedence.html
( function ( ) {
let sum = 9 + 12 / 3
// Эквивалентно 9 + 4.
console.log( 'Ungrouped sum: ' + sum )
})()
49
**
Приоритет
Оператор
Распространенные операции
z
2
Сохраните HTML-документ, затем откройте
его в браузере и запустите консоль. Проанализируйте полученные результаты.
Сначала вычисляется деление, так как оператор деления имеет более высокий приоритет по сравнению с оператором сложения, поэтому результат
равен 13. Также вы можете определить порядок приоритета, сгруппировав выражение в круглых скобках, и оно будет вычислено первым, так как оператор ( ) имеет самый высокий приоритет.
z
50
3
Для определения
порядка вычислений в выражениях
рекомендуется использовать круглые
скобки ( ).
z
4
Чтобы установить порядок вычисления, вы можете изменить операторы в функции, и сложение будет вычисляться перед делением.
let sum = ( 9 + 12 ) / 3
// Эквивалентно 21 / 3.
console.log( 'Grouped sum: ' + sum )
Сохраните HTML-документ, затем откройте
его в браузере и запустите консоль. Проанализируйте результаты вывода.
Заключение
zФункции parseInt( ) и parseFloat( ) преобразовывают
строки в числа. Функции String( ) и toString( )
преобразовывают числа в строки.
zФункция isNaN( ) определяет, является ли литерал
или переменная нечисловым значением NaN.
zАрифметические операторы выполняют математические операции: сложение +, остаток от деления %, инкремент ++, декремент — и возведение
в степень **.
zЕсли операция используется как постфикс (оператор после операнда), значение операнда возвращается, а затем увеличивается или уменьшается на единицу. Если используется префиксная
форма (оператор перед операндом), значение
операнда возвращается увеличенным или уменьшенным на единицу.
ческим оператором для выполнения арифметической операции, а затем присвоения ее результата.
zОператор присваивания += считается наиболее
полезным и может использоваться для добавления строки к уже существующей.
zОперанды можно сравнивать. Существуют следующие операторы сравнения: строго равно ===,
строго не равно !==, больше > или меньше tolerable )
{
turn_on_air-conditioning( )
get_a_cool_drink( )
stay_in_shade( )
}
Проверка условий эквивалентна следующему синтаксису if( условие === true ). Но поскольку JavaScript
автоматически преобразует результат выражения
в логическое значение, т. е. выполняет проверку равенства для истинного значения, нет необходимости
включать в скобки оператор ===true.
z
1
z
2
3
z
4
let flag = true
if.html
Вставьте операторы для выполнения условий
логического значения переменной.
if( !flag )
{
console.log( 'Power is OFF' )
}
if( flag )
{
console.log( 'Power is ON' )
}
Вставьте операторы для выполнения условий
выражения, сравнивающего два целых числа.
В этом примере оператор NOT
используется для
инвертирования
проверки условий,
чтобы он стал эквивалентным
if ( flag===false ).
Сохраните HTML-документ, затем откройте
его в браузере и запустите консоль. Проанализируйте полученные результаты.
Код сценария, создающий функциональный блок,
в нашем примере опущен. Более
подробную информацию по созданию анонимных
самовызывающихся функций вы можете прочитать
на стр. 24.
55
z
Создайте HTML-документ с самовызывающейся функцией, которая начинается с инициализации логической переменной.
Управляющие конструкции в JavaScript
Альтернативное
ветвление
Оператор if, который проверяет условие для логического значения и выполняет свои операторы только
тогда, когда результат равен true, обеспечивает единственную ветвь для выполнения действий. Альтернативная ветвь, по которой действия могут быть выполнены при ложном результате, обозначается ключевым
словом else.
После оператора if следует оператор else, например:
if ( условие ) выполняется, если условие истинно
else выполняется, если условие ложно
56
Оператор if else может также выполнять несколько
инструкций, если заключить их в фигурные скобки,
например:
if ( условие )
{
выполняется,
выполняется,
}
else
{
выполняется,
выполняется,
}
Как только условие в операторе
if else оказывается
равным true, выполняются связанные
с ним операторы,
затем поток продолжается после
оператора if else —
без проверки последующих операторов else.
если условие истинно
если условие истинно
если условие ложно
если условие ложно
Иногда возникает необходимость проверить несколько вариантов условия. Для этого используется блок
else if, например:
if ( условие )
{
выполняется, если условие истинно
}
else if ( условие )
{
выполняется, если условие истинно
}
else if ( условие )
{
выполняется, если условие истинно
}
else
{
выполняется, если условие ложно
}
Оператор if else if может многократно проверять переменную или условия. Последний блок else срабатывает
по умолчанию, когда не выполнено ни одно условие.
z
1
2
z
3
let flag = false
const num = 10
else.html
Для выполнения условий логического значения первой переменной вставьте следующие
операторы.
57
z
Создайте HTML-документ с самовызывающейся функцией, объявите и проинициализируйте две переменные.
if( !flag )
{
console.log( 'Power is OFF' )
}
else
{
console.log( 'Power is ON' )
}
Для выполнения условий числового значения второй переменной добавьте следующие
операторы.
if( num === 5 )
{
console.log( 'Number is Five' )
}
else if( num === 10 )
{
console.log( 'Number is Ten' )
}
Оператор if может
содержать блок
else. Он выполняется, когда условие ложно. Блок
else if используется при необходимости проверить
несколько вариантов условия.
Управляющие конструкции в JavaScript
58
z
4
else
{
console.log( 'Number is Neither Five nor Ten' )
}
Сохраните HTML-документ, затем откройте его в браузере и запустите консоль. Проанализируйте полученные результаты — условия, которые были выполнены, а которые
проигнорированы.
Ветвление с помощью
оператора switch
Оператор if else подходит для проверки лишь нескольких условий, однако может стать неудобным
при столкновении со множеством условий. В такой
ситуации наиболее эффективно использовать оператор switch.
Оператор switch работает необычным образом. Он
сравнивает выражение с вариантами, перечисленными внутри нее, а затем выполняет соответствующие
действия. Если совпадение найдено, оператор switch
выполнит один или несколько операторов, связанных с этим значением, в противном случае он выполнит один или несколько операторов, указанных
как «операторы по умолчанию».
Оператор switch начинается с заключения выражения, которое необходимо проверить, в круглые скобки после ключевого слова switch. Затем следуют фигурные скобки {}, которые содержат возможные
совпадения. Каждое значение соответствия следует
за ключевым словом case и использует символ двоеточия: для связывания одного или нескольких выполняемых операторов. Необходимо отметить, что
каждый случай должен заканчиваться оператором
break, который выполняет выход из блока switch.
Опциональный оператор break может располагаться
в каждом из случаев, однако он необязателен. В случае отсутствия оператора break выполняются следующие операторы из блока switch.
Синтаксис оператора switch выглядит таким образом:
Игнорирование
оператора break позволяет сценарию
выполнять операторы, связанные
с последующими
несоответствующими значениями
блока case.
Ограничений на количество блоков case, которые могут быть включены в блок операторов switch, не существует. Поэтому его использование — это идеальный
вариант, чтобы сопоставить любое из десятков, сотен
или даже тысяч различных значений.
z
1
z
2
Создайте HTML-документ с самовызывающейся функцией, объявите и проинициализируйте переменную.
let day
Затем добавьте оператор switch, чтобы присвоить значение переменной после проверки
выражения.
switch( 5 – 2 )
{
case 1 : day = 'Monday' ; break
switch.html
59
switch (выражение)
{
case значение-1 : операторы, которые выполняются
при нахождении совпадения ; break
case значение-2 : операторы, которые выполняются
при нахождении совпадения ; break
case значение-3 : операторы, которые выполняются
при нахождении совпадения ; break
default : операторы, которые выполняются, если совпадения не найдено
}
Управляющие конструкции в JavaScript
z
3
z
4
Добавьте оператор для вывода значения, назначенного оператором case при совпадении.
console.log( 'It is ' + day )
Сохраните HTML-документ, затем откройте
его в браузере и запустите консоль. Проанализируйте полученные результаты.
60
Строковые значения, предлагаемые
в качестве возможных совпадений
в блоке case, должны быть заключены
в кавычки, как и все
другие строковые
значения.
case 2 : day = 'Tuesday' ; break
case 3 : day = 'Wednesday' ; break
case 4 : day = 'Thursday' ; break
case 5 : day = 'Friday' ; break
default : day = 'Weekend'
}
Цикл for
Цикл — это структура, содержащая условие и один
или несколько операторов, которые повторно выполняются, пока выполняется условие. Повторение
процесса с целью получения результата называется
итерацией. Если условие не выполняется, дальнейшие итерации также игнорируются, и выполнение
продолжается со следующего оператора, идущего
за структурой цикла.
Цикл for — наиболее распространенная структура
цикла в JavaScript. Он имеет такой синтаксис:
for ( инициализатор ; условие ; модификатор ) { операторы на выполнение }
В скобках после ключевого слова for указываются три
выражения, управляющие числом итераций цикла:
zИнициализатор — инструкция, указывающая
начальное значение переменной, которая
будет использоваться для подсчета количества
итераций цикла. Обычно эту переменную
счетчика называют просто «i».
zУсловие — выражение, которое при каждой
итерации проверяется на логическое значение
true. Если выражение принимает значение true,
выполняются операторы цикла для завершения
итерации. Если выражение принимает значение
false, операторы не выполняются, и цикл
завершается. Обычно в условии проверяется
значение переменной счетчика цикла.
zМодификатор — оператор, который изменяет
значение в условии, поэтому в какой-то момент
в результате вернется значение false. Обычно при
этом увеличивается или уменьшается значение
переменной счетчика цикла.
let i
for ( i = 0 ; i < 100 ; i++ ) { операторы-на-выполнение }
В этом случае при каждой итерации переменная
счетчика увеличивается, пока ее значение не достигнет значения 100, после чего в результате вернется
значение false, и цикл завершится.
z
1
z
2
Создайте HTML-документ с самовызывающейся функцией, объявите и проинициализируйте переменную счетчика цикла.
let i = 0
Вставьте структуру цикла for, которая будет
выполнять 10 итераций и при каждой итерации выводить на экран значение счетчика
цикла.
for( i = 1 ; i < 11 ; i++ )
for.html
61
Например, структура цикла for при выполнении набора операторов сто раз может выглядеть следующим
образом:
Если модификатор не позволяет
в какой-то момент
вернуть значение
false, создается бесконечный цикл, т. е.
цикл будет выполняться бесконечное число раз.
Управляющие конструкции в JavaScript
62
{
console.log( 'Iteration Number: ' + i )
z
3
}
Сохраните HTML-документ, затем откройте
его в браузере и запустите консоль. Проанализируйте полученные результаты — итерации цикла.
Мы рассмотрели
обычный цикл for.
Существует также
специальный цикл
for in, который используется для перебора свойств
объекта. На стр. 76
вы можете найти
о нем более подробную информацию.
Цикл while
Структура цикла for, описанная на стр. 000, идеальна, когда количество требуемых итераций известно. В ином случае предпочтительнее использовать
структуру цикла while. Так выглядит его синтаксис:
while( условие )
{
операторы-на-выполнение
модификатор
}
В скобках после ключевого слова while указывается
условие или выражение, логическое значение которого проверяется каждый раз перед заходом в цикл.
Операторы, которые должны выполняться при
каждой итерации, заключаются в фигурные скобки вместе с оператором, который изменяет значение
в условии. Поэтому в определенный момент в результате вернется значение false, и цикл завершится.
Пока результат равен true, операторы будут выполняться на каждой итерации цикла.
Если на первой итерации условие принимает значение false, цикл немедленно завершается, поэтому
операторы, указанные в фигурных скобках, никогда не выполняются. Циклы while и циклы for иногда
называют циклами предварительного тестирования,
поскольку их тестовое условие проверяется до выполнения каких-либо операторов.
Цикл while может быть выполнен для определенного количества итераций, аналогично циклу for, используя переменную счетчика в качестве условия
проверки и увеличения ее значения на каждой итерации. Например, структура цикла while для выполнения набора операторов 100 раз может выглядеть
следующим образом:
При отсутствии
модификатора
в структуре цикла while возникнет
бесконечный цикл,
т. е. цикл будет выполняться бесконечное число раз.
63
let i = 0
while ( i < 100 )
{
операторы-на-выполнение
i++;
}
На каждой итерации переменная счетчика увеличивается до тех пор, пока значение не достигнет 100,
после чего результат будет равен false, и цикл завершится.
z
1
z
2
Создайте HTML-документ с самовызывающейся функцией, объявите и проинициализируйте переменную счетчика цикла.
let i = 10
Вставьте структуру цикла while, которая будет
выполнять итерации и при каждой итерации
выводить на экран значение счетчика цикла,
пока не достигнет значения 0.
while.html
Управляющие конструкции в JavaScript
z
3
while( i > -1 )
{
console.log( 'Countdown Number: ' + i )
i-}
Сохраните HTML-документ, затем откройте
его в браузере и запустите консоль. Проанализируйте полученные результаты.
64
Каждый цикл while
необходимо заключать в фигурные скобки, так
как содержится как минимум
два оператора —
один выполняемый
оператор и модификатор.
Цикл do..while
Другой пример циклической структуры
в JavaScript — это цикл do..while. Он похож на инвертированную версию цикла while, описанную
на стр. 62–63 Цикл do..while используется тогда, когда известно, что цикл необходимо запустить хотя бы
один раз. Его синтаксис выглядит так:
do
{
операторы-на-выполнение
модификатор
}
while( условие )
В скобках после ключевого слова while указывается
условие или выражение, логическое значение которого проверяется каждый раз после захода в цикл.
Операторы, которые должны выполняться при каждой итерации, заключаются в фигурные скобки
вместе с оператором, который изменяет значение
в условии. Поэтому в определенный момент в результате вернется значение false, и цикл завершится.
Пока результат равен true, операторы будут выполняться на каждой итерации цикла.
Если на первой итерации условие принимает значение false, цикл немедленно завершается, поэтому
операторы, указанные в фигурных скобках, выполняются только один раз. Цикл do..while иногда называют
циклом с постусловием, так как в отличие от предыдущих циклов он вначале исполняет команды, а затем проверяет заданное условие.
Цикл do..while рекомендуется использовать только
в том случае, если
операторы необходимо выполнить
хотя бы один раз.
65
Цикл do..while можно принудительно заставить выполнять итерации определенное количество раз,
аналогично циклу for, используя переменную счетчика в качестве условия проверки и увеличивая ее
значение на каждой итерации. Например, структура цикла do while для выполнения набора операторов
100 раз может выглядеть следующим образом:
let i = 0
do
{
операторы-на-выполнение
i++
}
while ( i < 100 )
Переменная счетчика увеличивается на каждой итерации до тех пор, пока ее значение не достигнет
100, после чего в результате вернется значение false,
и цикл завершится.
z
1
Создайте HTML-документ с самовызывающейся функцией. Объявите и проинициализируйте переменную счетчика цикла.
let i = 2
do.html
Управляющие конструкции в JavaScript
z
2
z
66
3
Вставьте структуру цикла do..while, которая
будет выполнять итерации и при каждой итерации выводить на экран значение счетчика
цикла, пока не превысит значения 1000.
do
{
i *= 2
console.log( 'Multiplied Number: ' + i )
}
while( i < 1000 )
Сохраните HTML-документ, затем откройте
его в браузере и запустите консоль. Проанализируйте полученные результаты.
Обратите внимание, что окончательное значение
превышает предельное значение
условия, так как
оно записывается на выходе перед
выполнением проверки.
Выход из циклов
Оператор break прерывает выполнение текущего цикла при обнаружении заданного условия.
В циклах он обычно используется для немедленного
выхода, когда в зависимости от каких-либо условий
требуется завершить выполнение цикла.
Если оператор break используется в цикле, вложенном во внешний цикл, блок операторов выполняется
во внешнем цикле.
Оператор continue прерывает выполнение итерации
текущего или отмеченного цикла и продолжает его
выполнение на следующей итерации.
Если оператор continue используется в цикле, вложенном во внешний цикл, блок операторов выполняется на следующей итерации внутреннего цикла.
z
1
z
2
3
let i = 0
let j = 0
break.html
Добавьте цикл for, содержащий внутренний
вложенный цикл for.
for ( i = 1 ; i < 3 ; i++ )
{
console.log( 'Outer Loop: ' + i )
for ( j = 1 ; j < 4 ; j++ )
{
// Здесь будет ваш код.
console.log( '\tInner Loop: ' + j )
}
}
Сохраните HTML-документ, затем откройте его в браузере и запустите консоль. Проанализируйте полученные результаты — две
итерации внешнего цикла и три итерации
внутреннего цикла.
67
z
Создайте HTML-документ с самовызывающейся функцией. Объявите и проинициализируйте переменную счетчика цикла.
В данном случае
escape-последовательность \t используется для
перемещения позиции печати
к следующей позиции горизонтальной табуляции.
В контексте оператора switch оператор break обычно используется
в конце каждого
блока для его завершения.
Управляющие конструкции в JavaScript
z
4
Во внутренний цикл вставьте операторы,
чтобы пропустить его итерацию и выйти
из внешнего цикла.
if( ( i === 1 ) && ( j === 2 ) ) {
console.log( '\tSkipped: ' + j )
continue
}
z
Сохраните HTML-документ, затем откройте
его в браузере и запустите консоль. Проанализируйте полученные результаты — выход
из цикла.
Оператор break
удобно использовать, когда в определенной ситуации необходимо
выйти из цикла.
Обработка ошибок
В JavaScript существует конструкция try..catch, позволяющая обрабатывать ошибки (исключения). Операторы, которые должны быть выполнены, внутри блока
try..catch заключаются в фигурные скобки, а исключения передаются в качестве аргумента в следующий
блок catch. Конструкция try..catch может содержать секцию finally, содержащую операторы, которые должны
выполняться после обработки ошибок.
JavaScript имеет встроенный объект ошибки, который
предоставляет информацию при ее возникновении.
JavaScript распознает следующие ошибки: Error, EvalError,
InternalError, RangeError, ReferenceError, SyntaxError, TypeError
и URIError. Они могут быть автоматически созданы и переданы в блок catch с помощью ключевого слова new
и конструктора, а затем переданы при использовании
ключевого слова throw.
Каждый объект ошибки имеет два свойства: name
и message, позволяющие устанавливать или возвращать
сообщение об ошибке.
В качестве альтернативы для идентификации ошибки строка может быть передана в блок catch с помощью оператора throw. Вы можете генерировать
ошибки (исключения). Исключения могут быть
строкой, числом, логическим значением или объектом JavaScript.
1
Создайте HTML-документ с самовызывающейся функцией. Объявите и проинициализируйте переменную.
69
z
catch.html
z
2
let day = 32
Для распознавания недопустимых целочисленных значений вставьте блок try.
try
{
if( day > 31 )
{
throw new RangeError( 'Day Cannot Exceed 31' )
}
if( day < 1 )
{
throw 'invalid'
}
z
3
}
Для обработки недопустимых целочисленных
значений к блоку try добавьте блок catch.
Управляющие конструкции в JavaScript
z
4
z
70
5
Чтобы обнаружить автоматическую ошибку
ReferenceError, удалите или закомментируйте объявление переменной
day, затем сохраните и обновите этот
пример.
z
6
catch( err )
{
if( err === 'invalid' )
{
console.log( 'Variable has invalid value of ' + day )
}
else
{
console.log( err.name + ' Exception: ' +
err.message )
}
}
Для вывода окончательного сообщения
к блоку catch добавьте блок finally.
finally
{
console.log( 'The script has ignored the error…' )
}
Сохраните HTML-документ, затем откройте его в браузере и запустите консоль. Проанализируйте результаты — полученное сообщение об ошибке.
Чтобы увидеть обнаруженную ошибку, измените значение переменной на 0, затем сохраните HTML-документ и обновите страницу
в браузере.
Заключение
zОператор if проверяет условие на наличие
логического значения true или false.
zАльтернативная ветвь, по которой действия
могут быть выполнены при ложном результате,
обозначается ключевым словом else.
zС помощью оператора switch можно сравнить
выражение сразу с несколькими условиями.
zВ блоке switch каждый блок case должен
заканчиваться оператором break, чтобы прервать
выполнение.
zБлок switch может содержать оператор default.
Оператор default выполняется, если ни один
вариант не совпал.
zВ цикле for указывается инициализатор, условие,
zМодификатор — это оператор, который
изменяет значение в условии, поэтому в какойто момент в результате вернется значение false,
и происходит выход из цикла.
zЦиклы while и for проверяют условие перед
выполнением блока операторов.
zЦикл do..while проверяет условие после того, как
блок операторов был выполнен.
zОператор break прерывает выполнение текущего
цикла.
zОператор continue прерывает выполнение
текущей итерации в цикле и продолжает
на следующей итерации.
zСтруктура try..catch используется для обработки
возникающих в сценарии ошибок (исключений).
71
которое должно быть проверено на логическое
значение true или false, и модификатор.
Управляющие конструкции в JavaScript
72
zКаждый объект ошибки имеет два свойства:
и message, позволяющие устанавливать или
возвращать сообщение об ошибке.
name
zВ качестве альтернативы для идентификации
ошибки строка может быть передана в блок catch
с помощью оператора throw.
zКонструкция try..catch может содержать
секцию finally с операторами, которые должны
выполняться после обработки ошибок.
4
Управление
объектами
В этой главе вы научитесь
создавать объекты
и использовать встроенные
объекты JavaScript.
72
Пользовательские объекты
74
Расширенные функции
76
Встроенные объекты
79
Создание массивов
81
Обход элементов в цикле
84
Методы управления
элементами в массиве
86
Сортировка элементов
массива
88
Получение даты
90
Получение календаря
93
Получение времени
95
Установка даты и времени
97
Сопоставление текста
с шаблоном
100
Заключение
Управление объектами
Пользовательские
объекты
Объекты реального мира окружают нас повсюду,
и каждый из них имеет атрибуты и модель поведения, которые мы можем описать:
zАтрибуты — это особенности, характеризующие
объект.
zПоведение — это действия, которые могут
выполняться над объектом или которые может
выполнять сам объект.
74
Например, объект автомобиль можно описать с помощью атрибутов «марка» и «модель», а также модель поведения «ускорение» и «торможение».
Эти элементы могут быть представлены в JavaScript
с помощью пользовательского объекта car, содержащего свойства make и model, а также методы accelerate(
) и brake( ).
Значения присваиваются объекту в виде разделенного запятыми списка пар name: value (ɢɦɹ: ɡɧɚɱɟɧɢɟ), ɡɚɤɥɸɱɟɧɧɨɝɨ ɜ ɮɢɝɭɪɧɵɟ ɫɤɨɛɤɢ { }, например:
Пробелы игнорируются в списке
пар name: value
(имя: значение),
но не забывайте
эти пары разделять
запятыми.
let car = { make: 'Jeep' , model: 'Wrangler' ,
accelerate: function ( ) { return this.model + ' drives away' } ,
brake: function ( ) {return this.make + ' pulls up' }
}
Доступ к свойству объекта можно получить двумя
способами: с помощью точечной записи objectName.
propertyName или objectName[‘propertyName’]
Методы объекта могут быть вызваны с помощью точечной нотации objectName.methodName( ).
Ключевое слово this относится к объекту, к которому принадлежит. В нашем примере оно относится
к объекту car, поэтому, используя запись this.model,
мы ссылаемся на свойство car.model, а this.make —
на свойство car.make.
z
1
Создайте HTML-документ с самовызывающейся функцией. Объявите и проинициализируйте переменную, содержащую определение объекта.
object.html
z
2
3
z
4
z
5
z
6
Для определения свойств объекта вставьте
следующие операторы.
make: 'Jeep' ,
model: 'Wrangler' ,
Для определения методов объекта вставьте
следующие операторы.
Для вывода строки, содержащей значения
свойств объекта, добавьте после символа закрывающей фигурной скобки } следующий
оператор.
console.log( 'Car is a ' + car.make + ' ' + car[ 'model' ] )
Для вызова каждого метода объекта добавьте
следующие операторы.
console.log( car.accelerate( ) )
console.log( car.brake( ) )
Сохраните HTML-документ, затем откройте его в браузере и запустите консоль. Проанализируйте полученные
Для вызова метода
необходимо добавить круглые скобки ( ). В противном
случае метод вернет определение
функции.
Управление объектами
результаты — значения свойств объекта
и возвращаемые методами строки.
Расширенные функции
Пользовательские объекты могут быть в любое время легко расширены и изменены. Для этого нужно
всего лишь назначить новое значение с помощью точечной нотации, например: имяОбъекта.имяСвойства.
76
Специальный цикл for in проходит через все перечисляемые свойства объекта, по каждому отдельному
элементу и имеет следующий синтаксис:
for ( свойство in имяОбъекта ) { console.log( свойство ) }
Чтобы на каждой итерации ссылаться на значение каждого свойства, его имя следует указать после имени объекта в квадратных скобках, например:
имяОбъекта[ cвойства ].
z
1
extend.html
Создайте HTML-документ с самовызывающейся функцией. Объявите и проинициализируйте переменную, которая точно воссоздает объект из предыдущего примера.
let property, car = {
make: 'Jeep' ,
model: 'Wrangler' ,
accelerate: function ( ) {
return this.model + ' drives away' },
brake: function ( ) {
return this.make + ' pulls up' }
}
z
2
z
3
4
z
5
z
6
for( property in car ) {
console.log( property + ': ' + car[ property ] )
}
Сохраните HTML-документ, затем откройте
его в браузере и запустите консоль. Проанализируйте полученные результаты — ключи
и значения объекта.
Фактически в этом
примере свойству
может быть присвоено любое допустимое имя.
77
z
Добавьте оператор цикла для перечисления
имен и значений каждого свойства и метода.
Добавьте операторы для присвоения новых
значений двум существующим свойствам
объекта.
car.make = 'Ford'
car.model = 'Bronco'
Для присвоения объекту дополнительных
свойств и методов добавьте следующие операторы.
car.engine = 'V6'
car.start = function ( ) {
return this.make + ' motor is running' }
В соответствии с правилами добавьте к выходным строкам, содержащим значения свойств объекта, следующие операторы.
console.log( '\nCar is a ' + car.make + '
' + car[ 'model' ] )
console.log( 'Engine Type: ' + car.engine )
Чтобы включить в вывод новую строку (разрыв строки), в этом
примере используется escapeпоследовательность \n.
Сохраните HTML-документ, затем откройте
его в браузере и запустите консоль. Проанализируйте полученные результаты — значения свойств расширенного объекта и возвращаемые его методами строки.
78
8
Добавьте операторы для вызова каждого метода объекта.
Встроенные объекты
В таблице ниже перечислены встроенные стандартные объекты JavaScript. Каждый из них, за исключением объекта Math, имеет одноименный конструктор,
который можно использовать для создания объекта
с помощью ключевого слова new. Например, создание объекта Date выглядит так: let now=new Date( ).
Однако не рекомендуется для всех типов объектов использовать ключевое слово new и конструктор,
кроме объектов Error и Date. JavaScript распознает,
какой тип объекта может быть создан с помощью
присвоенного значения, только если это значение
не строка string, число number или логическое значение boolean. Такие типы данных называются примитивами. Они не имеют свойств или методов, поэтому
оператор typeof возвращает для них значения string,
number и boolean, а не object.
Все объекты в JavaScript наследуют свойства и методы из прототипа объекта высокого уровня Object.
prototype. Например, с объектом более низкого
уровня, таким как Date.prototype, это осуществляется методом toLocaleString( ), поэтому, чтобы получить
строку даты в локальном формате, вы можете к объекту Date добавить вызов метода toLocaleString( ).
Объект
String (создается с помощью ключевого слова new)
Number (создается с помощью ключевого слова new)
Boolean (создается с помощью ключевого слова new)
Object — определенный вами объект
Date — используется для работы с датой и временем
Array — используется для хранения упорядоченных коллекций данных
RegExp — создает объект регулярного выражения для сопоставления текста с шаблоном
Math — встроенный объект, хранящий в своих свойствах и методах различные математические константы
и функции
Error — создает объект ошибки
79
Также можно вызывать унаследованные методы для
примитивных строковых (string), числовых (number)
и логических (boolean) значений, так как JavaScript
автоматически вызывает метод из эквивалентного
объекта. Значит, чтобы получить числовую строку
в локальном формате, вы можете к числовому литералу добавить вызов метода toLocaleString( ).
Если вы с самого начала работаете с этой книгой, то уже должны
были изучить объекты String, Number,
Boolean, Error и Object.
Объект Array описан на стр. 81,
объект Date —
на стр. 90,
объект RegExp —
на стр. 99,
а объект Math —
на стр. 106.
Управление объектами
z
1
Создайте HTML-документ с самовызывающейся функцией. Объявите и проинициализируйте три переменные и присвойте им
примитивные литеральные значения.
extend.html
let jsString = 'Text' // неверно — new String( 'Text' ).
z
80
2
Объект Math —
единственный объект JavaScript, который не является
конструктором.
z
3
z
4
z
5
let jsNumber = 125000
// неверно — new
Number( 125000 ).
let jsBoolean = true
// неверно — new
Boolean( true ).
Для создания объектов присвойтеследующие значения.
let jsObject = {firstName: 'Mike' , lastName: 'McGrath' }
let jsDate = new Date( )
let jsArray = [ 1, 2, 3 ]
let jsRegExp = /ineasysteps/i
let jsMath = Math
let jsError = new Error( 'Error!' )
Добавьте операторы для вывода содержимого объекта Date и строки в локальном формате.
console.log( 'Date Object: ' + jsDate )
console.log( 'Locale Date String: ' +
jsDate.toLocaleString( ) )
Добавьте операторы для вывода примитивного числового значения и числовой строки
в локальном формате.
console.log( '\nPrimitive Number: ' + jsNumber )
console.log( 'Locale Number String: ' +
jsNumber.toLocaleString( ) )
Сохраните HTML-документ, затем откройте
его в браузере и запустите консоль. Проанализируйте полученные результаты.
Создание массивов
Объект Array — это встроенный объект JavaScript,
который используется для хранения упорядоченных
коллекций данных (с различными типами данных).
Объекты массивов создаются путем присвоения переменным литеральных значений, указанных в квадратных скобках [] и разделенных запятыми. Синтаксис объекта Array выглядит следующим образом:
В отличие от пользовательских объектов, где
каждое свойство содержит имя, элементы массива
нумеруются автоматически, начиная с нуля. Первому элементу присваивается 0, второму — 1, третьему — 2 и т. д. Эту систему нумерации часто называют «индексом с отсчетом от нуля».
Доступ к элементам массива осуществляется с помощью оператора [ ]. Например, colors[ 0 ] ссылается на значение в первом элементе массива с именем
«colors».
Можно создать пустой массив и позже присвоить значения его элементам, например:
let colors = [ ]
colors[ 0 ] = 'Red'
colors[ 1 ] = 'Green'
colors[ 2 ] = 'Blue'
81
let имя массива = [ значение1 , значение2 , значение3 ]
Управление объектами
Можно создать массив, используя конструктор
Array( ). Однако такой способ использовать нежелательно, так как это может привести к неожиданным
результатам. Например, создание массива, инициализирующего первый элемент:
let jsArray = new Array( 10 )
Все имена встроенных объектов
начинаются с символа верхнего регистра, поэтому
следует различать
«Array» и «array».
Конечно, вы можете ожидать, что jsArray[ 0 ] будет
ссылаться на целочисленное значение 10 первого
элемента, но на самом деле он возвращает
неопределенное значение. Почему? Это аномалия,
которая возникает только тогда, когда вы
указываете один целочисленный аргумент для
конструктора, что заставляет JavaScript создавать
массив из 10 пустых элементов! Создание
массива с помощью jsArray = [ 10 ] не дает такого
эффекта и создает массив с первым элементом,
содержащим целочисленное значение 10, как
и предполагалось.
z
82
1
array.html
z
2
z
3
z
4
Создайте HTML-документ с самовызывающейся функцией, которая начинается с создания массива — неверно.
let jsArray = new Array( 10 )
Для вывода значения первого элемента массива и перечисления массива добавьте следующие операторы.
console.log( jsArray[ 0 ] )
console.log( jsArray )
Для объявления переменной и переменной,
инициализированной массивом, добавьте
следующие операторы.
let month, summer = [ 'June' , 'July' , 'August' ]
Добавьте циклическую структуру для вывода номера индекса и значения каждого
элемента.
z
5
z
6
for ( month in summer )
{
if ( month !== ' ' )
{
console.log( month + ': ' + summer[ month ] )
}
}
Наконец, для вывода значения первого элемента массива и перечисления массива добавьте следующие операторы.
Рекомендуется заключать тело цикла for in в оператор
if. Это гарантирует,
что элемент не пустой.
Сохраните HTML-документ, затем откройте
его в браузере и запустите консоль. Проанализируйте полученные результаты — вывод
содержимого элементов массива.
83
Обход элементов в цикле
Как правило, при работе с массивами используются
циклы. Для заполнения элементов массива значениями можно использовать любой из них. Таким образом
можно заполнить элементы даже очень больших массивов, используя при этом удивительно простой код.
Также их используют для быстрого считывания значений каждого элемента массива и выполнения
каких-либо действий с этим значением.
Управление объектами
Чтобы узнать длину массива, необходимо обратиться
к его свойству length. В результате индексирования с отсчетом от нуля длина массива всегда будет на единицу больше, чем номер индекса последнего элемента,
поэтому его можно легко использовать в условии для
завершения цикла.
z
1
elements.html
z
z
2
84
3
z
4
z
5
этого массива — 11, так как он
состоит из 11 элементов, даже если
нулевой элемент
пустой.
Длина
Создайте HTML-документ с самовызывающейся функцией. Объявите и проинициализируйте три переменные.
let i, result, boolArray = [ ]
Выведите простой заголовок.
console.log( 'Fill Elements…')
Добавьте цикл для заполнения 10 элементов
массива логическими значениями и вывода
их порядковых номеров и каждого сохраненного значения.
for( i = 1; i < 11; i++ )
{
boolArray[ i ] = ( i % 2 === 0 ) ? true : false
console.log( 'Element ' + i + ': ' + boolArray[ i ] )
}
Выведите еще один заголовок и присвойте
переменной пустое строковое значение.
console.log( 'Read Elements…' )
result = ''
Добавьте цикл для присвоения индексных
номеров любых элементов, содержащих значение true.
for( i = 1 ; i < boolArray.length ; i++ )
{
if( boolArray[ i ] ) { result += i + ' | ' }
}
z
6
Выведите строку, чтобы отобразить порядковые номера элементов, содержащих значение true.
console.log( 'True in Elements: ' + result )
z
7
z
8
z
9
10
result = ''
Добавьте цикл для присвоения индексных
номеров любых элементов, содержащих значение false.
for( i = 1 ; i < boolArray.length ; i++ )
{
if( !boolArray[ i ] ) { result += i + ' | ' }
}
Условия для логического значения
не должны включать инструкцию
===true, так как цикл
выполняется автоматически.
Наконец, выведите строку, чтобы отобразить
порядковые номера элементов, содержащих
значение false.
console.log( 'False in Elements: ' + result )
Сохраните HTML-документ, затем откройте
его в браузере и запустите консоль. Проанализируйте полученные результаты — запись
и чтение элементов массива.
85
z
Присвойте строковой переменной пустое
значение.
Управление объектами
86
Методы управления
элементами в массиве
Объекты JavaScript имеют свойства и методы. В дополнение к свойству length у каждого объекта массива имеются методы, которые можно использовать для
управления элементами в массиве. Ниже в таблице
перечислены такие методы и их краткое описание.
Метод join( ) объединяет множество
элементов в одну
строку. Оператор + объединяет
несколько значений элементов.
Метод slice( ) возвращает новый
массив, который
содержит копии
элементов, вырезанные из исходного массива.
Метод
Описание
join( separator )
Объединяет все элементы массива в одну строку и разделяет их запятыми.
pop( )
Удаляет последний элемент из массива и возвращает его значение.
push( value , value )
Добавляет один и более элементов
в конец массива и возвращает новую длину массива.
reverse( )
Обращает порядок следования элементов массива. Первый элемент
становится последним, а последний — первым.
shift( )
Удаляет первый элемент из массива
и возвращает его значение.
slice( begin , end )
Возвращает новый массив, содержащий копию части исходного массива.
sort()
Сортирует элементы массива и возвращает отсортированный массив.
splice( position ,
Изменяет содержимое массива,
удаляя существующие элементы
и/или добавляя новые.
number , value ,
value )
unshift( value , value )
Добавляет один и более элементов
в начало массива и возвращает новую длину массива.
Если значения не определены методами push( ) или
unshift( ), в массив добавляется один пустой элемент.
Чтобы изменить несколько элементов, список значений, разделенных запятыми, может быть указан в методах push( ), unshift( ) и splice( ).
z
1
Создайте HTML-документ с самовызывающейся функцией и объявите массив.
let seasons = [ 'Spring', 'Summer', 'Fall', 'Winter' ]
console.log( 'Elements: ' + seasons )
Извлеките последний элемент из массива.
console.log( 'Popped: ' + seasons.pop( ) )
console.log( 'Elements: ' + seasons )
Верните последний элемент обратно в массив.
console.log( 'Pushed: ' + seasons.push( 'Winter' ) )
console.log( 'Elements: ' + seasons )
Затем выведите только два значения элемента.
console.log( 'Sliced: ' + seasons.slice( 1, 3 ) )
Замените значение в третьем элементе.
console.log( 'Spliced: ' + seasons.splice( 2, 1, 'Autumn' ) )
console.log( 'Elements: ' + seasons )
Чтобы удалить указанное количество
элементов в указанной позиции,
используйте метод
slice( ) без значения замены. Нумерация всех оставшихся элементов,
которые следуют в этом массиве,
автоматически изменится.
Сохраните HTML-документ, затем откройте
его в браузере и запустите консоль. Проанализируйте полученные результаты.
Методы shift()
и unshift() работают аналогично методам pop() и push(),
но с первым элементом, а не с последним. Методы reverse() и sort()
рассматриваются в следующем примере
на стр. 88–89.
87
z
z
z
z
z
z
slice.html
Управление объектами
Сортировка элементов
массива
Иногда возникает необходимость расположить значения элементов массива в определенном порядке.
Метод sort() сортирует элементы массива и возвращает отсортированный массив. При необходимости
можно указать аргумент функции, определяющий
порядок сортировки.
88
Всегда помните,
что при использовании метода sort( )
меняется порядок
значений, хранящихся в элементах
массива.
Если функция сравнения не указана, элементы сортируются путем преобразования их в строки
и сравнения строк в порядке следования кодовых точек Unicode, сравнивая каждый первый символ, затем каждый второй символ и т. д. Если элементы содержат совпадающие строки, различающиеся только
регистром символов, строка с наибольшим количеством символов верхнего регистра получает нижнюю
позицию индекса, а перед ней появляется строка
с меньшим количеством символов верхнего регистра.
Такой вид сортировки подходит для строковых значений, но совершенно не годится для числовых. Например, при сортировке трех значений 30, 100, 20
результат будет 100, 20, 30, так как первые символы
разные, значения сортируются только при их сравнении. Как правило, необходимо, чтобы все числовые значения были отсортированы в порядке возрастания или убывания. Поэтому для определения
порядка сортировки в методе sort() необходимо указать функцию сравнения.
Работа метода
sort( ) по умолчанию эквивалентна
функции сравнения, сравнивающей аргументы x
и y со следующими операторами:
if( x > y ) return 1
else if( x < y ) return -1 else
return 0.
Если функция сравнения указана, элементы массива будут сортироваться в соответствии с ее возвращенным значением. Если первое значение больше
второго, то вернется значение больше 0, и первому значению будет присвоена более высокая позиция индекса. И наоборот, функция сравнения возвращает значение меньше 0, а первому значению
присваивается более низкая позиция индекса. Если
оба значения равны, то в результате возвращается 0,
и позиции элементов остаются неизменными. Когда
все сравнения будут выполнены, элементы расположатся в порядке возрастания значений. При необходимости сортировки элементов по убыванию можно использовать метод reverse(). Он обращает порядок
следования элементов массива.
Если функция сравнения сравнивает числовые значения, то для получения необходимого результата
следует вернуть результат вычитания второго и первого переданного значения.
Создайте HTML-документ с самовызывающейся функцией и объявите два массива.
Управление объектами
z
6
Сохраните HTML-документ, затем откройте его в браузере и запустите консоль. Проанализируйте полученные результаты — отсортированные элементы.
В методе sort( )
функция сравнения
указывается только
по имени. Не используйте закрывающиеся скобки после имени функции
сравнения в аргументе метода sort( ).
90
Получение даты
21
Встроенный объект Date представляет конкретную
дату, время и часовой пояс. Он создается с помощью
оператора new, конструктора объекта Date( ) и присвоения имени переменной. Конструктор Date( ), вызванный без аргументов, создаст объект Date со значением, которое будет соответствовать текущей дате
и времени. Объект Date поддерживает ряд UTC
(универсальных) методов, а также методов локального времени. UTC, также известный как среднее время по Гринвичу (GMT), относится к времени, установленному мировым стандартом времени.
Дата и время в JavaScript в основном определяются как количество миллисекунд, прошедших с 1 января 1970 года 00:00:00 GMT, то есть прошедшего
с начала эпохи UNIX. Это число получается из объекта Date с помощью метода getTime( ) и может быть
вычтено из числа другого объекта Date для вычисления прошедшего периода между двумя точками сценария. Например, для вычисления периода, необходимого для выполнения цикла.
Строковое представление объекта Date можно получить с помощью методов toString( ) или toUTCString( ),
преобразующего дату в строку с использованием часового пояса UTC.
С помощью метода getTimezoneOffset( ) JavaScript может определить, в каком часовом поясе находится пользователь при условии, что в системе корректно настроен локальный часовой пояс. Этот метод
возвращает смещение часового пояса относительно часового пояса UTC в минутах для текущей локали. Расчет выполняется в минутах, а не часах, так
как некоторые часовые пояса смещены с интервалом, отличным от одного часа. Например, Ньюфаундленд, Канада — UTC –3:30 (UTC –2:30 в летнее время).
На стр. 92–98 рассмотрены примеры, демонстрирующие, как
использовать компоненты объекта
Date и его распространенные методы.
z
1
91
Значение смещения часового пояса можно использовать для локальных настроек часовых поясов США,
но для перехода на летнее время их необходимо
скорректировать посредством вычитания 60 (минут).
Далее в примере демонстрируется вызов методов
getMonth( ) и getDate( ) объекта Date для корректировки
значения смещения часового пояса, если летнее время не действует в текущую дату.
Создайте HTML-документ с самовызывающейся функцией. Объявите и проинициализируйте три переменные.
date.html
z
2
z
3
const now = new Date( )
let offset = now.getTimezoneOffset( )
let dst = 60
Добавьте операторы, чтобы установить часовой пояс.
Метод getMonth( ) возвращает месяц
и дату по местному
времени. Нумерация месяцев начинается с нуля. В нашем примере март
находится на позиции 2. Подробнее
об этом см. стр. 93.
Управление объектами
92
Локальный часовой пояс пользователя можно использовать для
перенаправления
браузера на страницу, относящуюся к этому часовому поясу.
Например, пользователей в часовом
поясе Тихого океана можно перенаправить на страницу, содержащую
только дистрибьюторов из Калифорнии. Однако следует учитывать, что
информация о системном времени
может быть легко
изменена пользователем на любое
время, дату или
часовой пояс, поэтому не обязательно сообщать
фактическое местоположение.
Добавьте операторы для вывода информации о дате и времени и приветственное сообщение.
console.log( 'System Time: ' + now.toString( ) )
console.log( 'UTC (GMT) Time: ' + now.toUTCString( ) )
console.log( '\nWelcome to ' + offset + ' Visitors' )
Сохраните HTML-документ, затем откройте
его в браузере и запустите консоль. Проанализируйте полученные результаты.
Получение календаря
Объект Date предоставляет отдельные методы для получения следующих значений: год, месяц, день месяца и день недели.
Метод getFullYear( ) объекта Date возвращает год в виде
четырехзначного числа, например 2025. Метод
getDate( ) объекта Date возвращает день месяца. В первый день месяца возвращается число 1.
Метод
Описание
getFullYear( )
Возвращает год указанной даты по местному времени (yyyy)
getMonth( )
Возвращает месяц указанной даты
по местному времени (0–11)
getDate( )
Возвращает день указанной даты
по местному времени (1–31)
getDay( )
Возвращает день недели указанной даты
по местному времени (0–6).
В зависимости от региональных настроек методы
getMonth( ) и getDay( ) возвращают числовые значения
индекса, которые необходимо преобразовать в названия месяца и дня на местном языке. Такое преобразование легко выполнить для месяцев с помощью
создания массива всех названий месяцев, начиная
с января, а затем используя номер индекса, возвращаемого getMonth( ), для ссылки на соответствующее
название месяца из элемента массива.
93
Аналогичным образом можно выполнить преобразование для дней недели с помощью создания массива
названий всех дней недели, начиная с воскресенья,
а затем с использованием номера индекса, возвращаемого методом getDay( ), для ссылки на соответствующее название дня из элемента массива.
Затем различные компоненты могут быть объединены в строку даты, упорядоченную в соответствии
с необходимым форматом даты для любой локали.
z
1
z
2
Создайте HTML-документ с самовызывающейся функцией. Объявите и проинициализируйте три переменные.
const days = [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ]
const months = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ]
const now = new Date( )
Добавьте операторы для извлечения отдельных компонентов даты с помощью методов
объекта Date.
calendar.html
Управление объектами
z
3
z
4
z
94
5
Нумерация месяцев начинается с нуля (0),
а не с единицы
(1) — так, например, месяцу март
присвоен индекс
[2], а не [3].
z
6
let year = now.getFullYear( )
let month = now.getMonth( )
let dayNumber = now.getDate( )
let dayName = now.getDay( )
Добавьте операторы для преобразования извлеченных номеров индексов в значения названий месяца и дня недели.
month = months[ month ]
dayName = days[ dayName ]
Объедините компоненты даты в строки
даты — в американском и британском форматах.
let usDate = dayName + ', ' + month + ' ' +
dayNumber + ', ' + year
let ukDate = dayName + ', ' +
dayNumber + ' ' + month + ', ' + year
Для вывода каждой строки даты добавьте
следующие операторы.
console.log( 'U.S. Date: ' + usDate )
console.log( 'U.K. Date: ' + ukDate )
Сохраните HTML-документ, затем откройте
его в браузере и запустите консоль. Проанализируйте полученные результаты — форматы записи даты.
Получение времени
Объект JavaScript Date предоставляет отдельные методы для получения следующих значений: часы, минуты, секунды и миллисекунды.
Метод
Описание
getHours( )
Возвращает часы даты по местному
времени (0–23)
getMinutes( )
Возвращает минуты даты по местному времени (0–59)
getSeconds( )
Возвращает секунды даты по местному времени (0–59)
getMilliseconds( )
Возвращает миллисекунды даты
по местному времени (0–999)
Значения могут быть объединены в строку, однако
для улучшения читабельности возникает необходимость добавлять ноль к значениям минут и секунд.
Например, 10:05:02 предпочтительнее 10:5:2.
В зависимости от времени суток (утро, день или вечер) можно добавить аббревиатуры. В случае 12-часового формата времени используются сокращения
AM или PM. Например, 13:00 можно преобразовать
в 1:00 PM.
z
1
95
Метод getHours( ) объекта Date возвращает часы даты
по местному времени в 24-часовом формате в виде
значения в диапазоне 0–23. Методы getMinutes( )
и getSeconds( ) возвращают значение в диапазоне
0–59. Метод getMilliseconds( ) возвращает значение
в диапазоне 0–999.
Значения времени
основаны на системном времени
пользователя, которое может быть
неточным.
Создайте HTML-документ с самовызывающейся функцией. Объявите и проинициализируйте пять переменных.
const now = new Date( )
let hour = now.getHours( )
let minute = now.getMinutes( )
let second = now.getSeconds( )
let millisecond = now.getMilliseconds( )
time.html
Управление объектами
z
2
z
3
96
Объект Date также
предоставляет методы для получения даты и времени по всемирному
координированному времени
(UTC) — например,
методы getUTCMonth( )
и getUTCHours( ).
z
4
z
5
z
6
Для удобочитаемости с помощью следующих
операторов добавьте 0 в значениях минут
и секунд, значение которых меньше10.
if( minute < 10 ) { minute = '0' + minute }
if( second < 10 ) { second = '0' + second }
Объедините все составляющие времени
в строку, затем выведите ее.
let time = 'It is now: ' + hour + ':' + minute + ':' +
second + ' and ' + millisecond + ' milliseconds'
console.log( time )
В зависимости от времени суток выведите
приветствие.
let greeting = 'Good Morning!'
if( hour > 11 ) { greeting = 'Good Afternoon!' }
if( hour > 17 ) { greeting = 'Good Evening!' }
console.log( greeting )
Сохраните HTML-документ, затем откройте
его в браузере и запустите консоль. Проанализируйте полученные результаты — формат
записи времени.
Установка даты
и времени
Конструктор Date( ) может дополнительно указывать
от двух до семи аргументов для установки значений
для каждого из его компонентов, например:
new Date( год, месяц, день, часы, минуты, секунды,
миллисекунды )
Если указаны только год и месяц, соответствующим
компонентам устанавливается единица (1), а остальным — ноль (0).
Объект Date также предоставляет отдельные методы
для установки значений даты и времени:
Метод
Описание
setDate( )
Устанавливает день (1–31)
setFullYear( )
Устанавливает год (yyyy)
setMonth( )
Устанавливает месяц (0–11)
setHours( )
Устанавливает часы (0–23)
setMinutes( )
Устанавливает минуты (0–59)
setSeconds( )
Устанавливает секунды (0–59)
setMilliseconds( )
Устанавливает миллисекунды (0–999)
Метод setMonth( ) устанавливает месяц в диапазоне,
где 0 = январь — 11 = декабрь. При необходимости
с помощью метода setFullYear( )можно установить
месяц и день, используя следующий синтаксис:
date.setFullYear( год , числоМесяца , числоДня )
Метод toString( ) возвращает строковое значение любого объекта
JavaScript.
97
21
Управление объектами
Значения каждого компонента даты и времени могут быть установлены с помощью объекта Date. Кроме того, существуют методы для вывода различных строк, отображающих дату и время. Метод
toString( ) преобразует дату в строковое значение; метод toUTCString( ) преобразует дату в ее эквивалент
в формате UTC; метод toLocaleString( ) отображает
дату в зависимости от используемой локали. Методы
toDateString( ) и toTimeString( ) могут отображать компоненты даты и времени.
z
1
setdate.html
z
98
2
Также существует метод setTime( ),
который устанавливает объект Date
в значение времени, представленным количеством
миллисекунд, прошедших с 1 января 1970 года
00:00:00 по UTC.
Каждый день —
86|400 000 миллисекунд, поэтому setTime(86400000)
устанавливает дату 1 января
1970 года.
z
3
z
4
Создайте HTML-документ с самовызывающейся функцией и создайте объект Date
«4 июля».
const holiday = new Date( 2025, 6, 4 )
console.log( 'Object: ' + holiday )
Чтобы в полдень наступило Рождество, необходимо изменить отдельные компоненты
даты. Для этого добавьте операторы.
holiday.setFullYear( 2028 )
holiday.setMonth( 11 )
holiday.setDate( 25 )
holiday.setHours( 12 )
holiday.setMinutes( 0 )
holiday.setSeconds( 0 )
holiday.setMilliseconds( 0 )
Для вывода измененной даты, времени и эквивалента в формате UTC (GMT) добавьте
следующие операторы.
console.log( 'String: ' + holiday.toString( ) )
console.log( 'UTC: ' + holiday.toUTCString( ) )
Добавьте операторы для вывода измененной даты и времени в формате строк локали,
даты и времени.
console.log( 'Locale: ' + holiday.toLocaleString( ) )
console.log( 'Date: ' + holiday.toDateString( ) )
console.log( 'Time: ' + holiday.toTimeString( ) )
z
5
Сохраните HTML-документ, затем откройте его в браузере и запустите консоль. Проанализируйте полученные результаты — установленные дату и время.
99
Сопоставление текста
с шаблоном
Объект RegExp — это встроенный объект JavaScript,
который создает объект регулярного выражения для
сопоставления текста с шаблоном. Регулярные выражения используются как средство для поиска и замены текста при помощи шаблонов.
Шаблон регулярного выражения может состоять целиком из символьных литералов, заключенных между символами //. Например, регулярное выражение
/wind/ найдет совпадение в строке «windows» —
шаблон строго совпадает со строкой в тексте. Как
правило, шаблон регулярного выражения состоит из набора символьных литералов и специальных
символов или метасимволов.
Для выполнения поиска без учета регистра шаблон может также включать модификатор i после последнего
символа / или модификатор g для выполнения глобального поиска всех совпадений шаблона. Метод test( ) выполняет поиск сопоставления регулярного выражения
Тема регулярных
выражений обширна и выходит
за рамки этой книги. Здесь на тему
регулярных выражений приводятся
лишь краткие сведения.
Управление объектами
100
Диапазон символов [a-z] соответствует только
строчным символам латинского алфавита, а диапазон
[a-z0–9] включает
еще и цифры.
указанной строке. При обнаружении совпадения метод
test( ) возвращает значение true, в противном случае —
false. Метод exec( ) выполняет поиск сопоставления регулярного выражения в указанной строке и возвращает
массив с результатами или значение null. Index — индекс
сопоставления в строке — начинается с нуля.
Специальный
символ
Значение
Пример
.
Любой символ
ja..pt
^
Начало строки
^ja
$
Конец строки
… pt$
*
Повторение фрагмента 0
или более раз
ja*
+
Повторение фрагмента 1
или более раз
ja+
?
Фрагмент либо присутствует, либо отсутствует (0 или 1)
ja?
{}
Множественное повторение
ja{3}
[]
Класс символов
[a-z]
\
Специальная последовательность
\d
|
Фрагмент слева или фрагмент справа
a|b
()
Группировка выражений
(…)
z
1
regexp.html
z
2
z
3
Создайте HTML-документ с самовызывающейся функцией. Объявите и проинициализируйте три переменные.
const system = 'Windows', suite = 'Office' pattern = /ice/i
Добавьте операторы для вывода результатов
поиска.
console.log( 'In ' + system +'? ' + pattern.test( system ) )
console.log(' In ' + suite + '? ' + pattern.test( suite ) )
Добавьте операторы для вывода совпадающего текста и позиции. В противном
случае — сообщение о том, что совпадения не найдены.
z
4
z
5
6
Добавьте операторы для вывода результата
проверки некорректного адреса электронной
почты.
let email = 'mike@example'
const format = /.+\@.+\..+/
console.log( email + ' Valid? ' + format.test( email ) )
Используемое
в этом примере
регулярное выражение проверяет
только самые основные требования
к формату электронной почты.
Сохраните HTML-документ, затем откройте его в браузере и запустите консоль. Проанализируйте полученные результаты — регулярные выражения.
101
z
let result = pattern.exec( suite )
if( result )
{
console.log( 'Found ' + result + ' at ' + result.index )
}
else { console.log( 'No Match Found' ) }
Нумерация индексов в строке начинается с нуля, поэтому четвертый
символ находится
в позиции индекса 3.
Управление объектами
Заключение
zЗначения присваиваются объекту в виде
разделенного запятыми списка name: value (имя:
значение), заключенного в фигурные скобки {}.
zНа значения свойств объекта можно ссылаться
с использованием точечной нотации, или указав
их в квадратных скобках [].
zМетоды объекта вызываются с помощью
добавления после имени круглых скобок ( ).
zКлючевое слово this относится к объекту,
к которому оно принадлежит.
zПользовательские объекты расширяются путем
102
присвоения нового значения с использованием
точечной записи для ссылки на свойство.
zПользовательские объекты могут быть в любое
время легко расширены и изменены. Для
этого нужно лишь назначить новое значение
с помощью точечной нотации.
zЦикл for in используется для перечисления всех
свойств и методов объекта.
zВсе объекты в JavaScript наследуют свойства
и методы из прототипа объекта Object.prototype.
zОбъект Array — это встроенный объект
JavaScript, который используется для
хранения упорядоченных коллекций данных
(с различными типами данных). Элементы
массива нумеруются автоматически, начиная
с нуля.
zОбъекты массивов создаются путем присвоения
переменным литеральных значений, указанных
в квадратных скобках [] и разделенных запятыми.
zДоступ к элементам массива осуществляется
с помощью оператора [].
zЧтобы узнать длину массива, необходимо
обратиться к его свойству length.
zВстроенный объект Date представляет
конкретную дату, время и часовой пояс.
zКонструктор Date( ) может дополнительно
указывать от двух до семи аргументов для
установки значений для каждого из его
компонентов.
zОбъект Date также предоставляет отдельные
методы для установки значений даты и времени.
zОбъект RegExp — это встроенный объект
JavaScript, который создает объект регулярного
выражения для сопоставления текста
с шаблоном.
zМетоды test( ) и exec( ) выполняют поиск
103
сопоставления регулярного выражения
в указанной строке.
5
Работа
с числовыми
и строковыми
типами данных
В этой главе вы
познакомитесь с методами
встроенных объектов Math
и String.
104
Вычисление площади
106
Сравнение чисел
108
Округление чисел
110
Генерация случайных чисел
112
Объединение строк
115
Разбиение строк
117
Поиск символов
119
Обрезка строк
121
Заключение
Работа с числовыми и строковыми типами данных
Вычисление площади
106
Объект Math — встроенный объект JavaScript, хранящий в своих свойствах и методах различные константы и функции. Ниже в таблице приведены константы, их описание и значение.
Все методы объекта Math описаны
на стр. 108.
Константа
Описание
Math.E
Число Эйлера или Непера, основание
натуральных логарифмов, приблизительно равное 2,71828
Math.LN2
Натуральный логарифм из 2, приблизительно равен 0,69315
Math.LN10
Натуральный логарифм из 10, приблизительно равен 2,30259
Math.LOG2E
Двоичный логарифм из Е, приблизительно равен 1,44269
Math.LOG10E
Десятичный логарифм из Е, приблизительно равен 0,43429
Math.PI
Число Пи, приблизительно равно
3,14159
Math.SQRT1_2
Квадратный корень из 0,5, приблизительно равен 0,70711
Math.SQRT2
Квадратный корень из 2, приблизительно равен 1,41421
Нет необходимости создавать экземпляр объекта
Math, так как он присутствует по умолчанию, поэтому
доступ к математическим константам и методам осуществляется через объект Math и с помощью точечной нотации.
Константы этого объекта, как правило, используются
для вычисления каких-либо математических операций. В таблице выше перечислены наиболее распространенные из них.
z
1
z
2
z
3
4
z
5
let radius = 4
console.log( '\nRadius of Circle: ' + radius )
constants.html
Добавьте операторы для выполнения математического расчета и вывода результата.
let area = Math.PI * ( radius * radius )
console.log( '\nArea of Circle: ' + area )
Добавьте операторы для выполнения еще одного математического расчета и вывода результата.
let circumference = 2 * ( Math.PI * radius )
console.log( '\nPerimeter of Circle: ' + circumference )
Добавьте операторы для выполнения окончательного математического расчета и вывода
результата.
107
z
Создайте HTML-документ с самовызывающейся функцией. Объявите и проинициализируйте переменную.
Сохраните HTML-документ, затем откройте
его в браузере и запустите консоль. Проанализируйте полученные результаты — математические расчеты.
Имена констант
объекта Math записываются полностью прописными символами.
Например, Math.PI,
а не Math.pi.
Работа с числовыми и строковыми типами данных
Сравнение чисел
108
Перед вами наиболее распространенные и важные
методы встроенного объекта Math.
Метод
Описание
Math.abs( )
Возвращает абсолютное значение числа
Math.acos( )
Возвращает арккосинус числа
Math.asin( )
Возвращает арксинус числа
Math.atan( )
Возвращает арктангенс числа
Math.atan2( )
Возвращает арктангенс от частного
своих аргументов
Math.ceil( )
Возвращает значение числа, округленное к большему целому
Math.cos( )
Возвращает косинус числа
Math.exp( )
Возвращает Ех, где х — аргумент, а Е —
число Эйлера
Math.floor( )
Возвращает значение числа, округленное к меньшему целому
Math.log( )
Возвращает натуральный логарифм числа
Math.max( )
Возвращает наибольшее число из своих
аргументов
Math.min( )
Возвращает наименьшее число из своих аргументов
Math.pow( )
Возвращает основание в степени экспоненты
Math.random( )
Возвращает псевдослучайное число
Math.round( )
Возвращает значение числа, округленное до ближайшего целого
Math.sin( )
Возвращает синус числа
Math.sqrt( )
Возвращает квадратный корень числа
Math.tan( )
Возвращает тангенс числа
z
1
math.html
Создайте HTML-документ с самовызывающейся функцией. Объявите и проинициализируйте две переменные.
let square = Math.pow( 5, 2 )
let cube = Math.pow( 4, 3 )
Добавьте операторы для изменения полярности каждого числа — положительные числа
должны стать отрицательными.
square *= -1
cube *= -1
Добавьте операторы для вывода наибольшего
и наименьшего значений из двух отрицательных чисел.
console.log( '\nLargest Negative: ' +
Math.max( square, cube ) )
console.log( '\nSmallest Negative: ' +
Math.min( square, cube ) )
109
z
Добавьте операторы для вывода наибольшего и наименьшего значений из двух положительных чисел.
Сохраните HTML-документ, затем откройте
его в браузере и запустите консоль. Проанализируйте полученные результаты — сравнение чисел.
При сравнении
двух отрицательных чисел большее
будет расположено правее, то есть
ближе к началу отсчета (ближе к 0).
Работа с числовыми и строковыми типами данных
Округление чисел
Встроенный объект Math предоставляет три метода округления чисел с плавающей запятой до целых
значений. Каждый метод принимает значение с плавающей запятой в качестве аргумента и возвращает целое число. Метод Math.ceil( ) округляет аргумент
до большего целого. Метод Math.floor( ) округляет аргумент до ближайшего меньшего значения. Метод
Math.round( ) возвращает число, округленное к ближайшему целому.
110
При работе со значениями с плавающей запятой важно понимать несоответствие между компьютерным
математическим стандартом с плавающей запятой,
как определено IEEE (Институт инженеров по электротехнике и электронике), и общепринятой математической точностью. Это связано с тем, что некоторые десятичные числа нельзя точно преобразовать
в двоичную форму. Например, десятичное число 81,66
не может быть точно преобразовано в двоичное, поэтому выражение 81,66*15 в результате возвращает
1224,8999999999999, а не точное значение 1224,9.
Метод Math.round( )
по умолчанию
возвращает число, округленное
к ближайшему
целому, поэтому Math.round( 7.5 )
возвращает число
8, а не 7;
Math.round( -7.5 ) возвращает число –7,
а не –8.
Некоторые языки программирования обеспечивают автоматическое округление для устранения несоответствий с плавающей запятой. Однако в JavaScript
такой метод не используется, поэтому во избежание
ошибочных результатов будьте внимательными, особенно при работе с денежными величинами. Рекомендуется сначала умножить значение с плавающей
запятой на 100, затем выполнить арифметическую
операцию и, наконец, разделить результат на 100, чтобы вернуться к тому же десятичному представлению.
Аналогичную процедуру можно использовать для
ограничения чисел с плавающей запятой до двух десятичных знаков. После умножения значения на 100
можно использовать метод Math.round( ) для округления значения. Затем использовать деление на 100
и в результате вернуть два десятичных знака.
Все математические операции могут быть записаны как отдельные шаги. Также для определения
порядка вычислений можно использовать скобки.
Например, преобразование числа с плавающей запятой в переменной с именем «num» выглядит следующим образом:
num = num * 100
num = Math.round( num )
num /= 100
или
num = ( Math.round( num * 100 ) ) / 100
z
1
z
2
3
z
4
z
5
let bodyTemp = 98.6
Добавьте операторы для вывода ближайших
целых чисел к значению с плавающей запятой.
console.log( 'Ceiling: ' + Math.ceil( bodyTemp ) )
console.log( 'Floor: ' + Math.floor( bodyTemp ) )
console.log( 'Round: ' + Math.round( bodyTemp ) )
Добавьте операторы для вывода числа с плавающей запятой и его преобразованного значения.
console.log( '\nFloat: ' + Math.PI )
console.log( 'Commuted: ' +
( (Math.round ( Math.PI * 100 ) / 100 ) ) )
Сохраните HTML-документ, затем откройте его в браузере и запустите консоль.
round.html
111
z
Создайте HTML-документ с самовызывающейся функцией. Объявите и проинициализируйте переменную.
Работа с числовыми и строковыми типами данных
Проанализируйте полученные результаты —
округление чисел.
Сначала вычисляются выражения во внутренних
скобках.
112
Генерация случайных
чисел
Метод Math.random( ) возвращает псевдослучайное число с плавающей запятой от 0 (включительно) до 1
(но не включая 1). Этот метод можно использовать
для создания различных эффектов веб-страницы, для
которых требуется сгенерированное случайное число.
Умножение случайного числа с плавающей запятой
увеличит его диапазон. Например, умножение на 10
увеличивает диапазон от 0 до 10.
Как правило, полезно округлить случайное число
с помощью метода Math.ceil( ), чтобы диапазон стал
от 1 до 10.
Процесс определения диапазона для случайного числа может быть записан как отдельные шаги. Также для определения порядка вычислений можно
использовать скобки. Например, процесс определения диапазона от 1 до 10 для переменной с именем
«rand» выглядит следующим образом:
let rand = Math.random( )
rand *= 10
rand = Math.ceil( rand )
или
let rand = Math.ceil( Math.random( ) * 10 )
В указанном диапазоне может быть сгенерирован ряд
уникальных случайных чисел. Например, случайный
выбор номеров лотереи в диапазоне от 1 до 59.
z
1
z
2
3
z
4
z
5
let i, rand, temp, nums = [ ]
let str = '\n\nYour Six Lucky Numbers: '
random.html
Добавьте цикл для заполнения элементов
массива от 1 до 59 соответствующими номерами индексов.
for( i = 1 ; i < 60; i++ ) { nums[ i ] = i }
Добавьте цикл для случайного выбора чисел
в элементах массива.
for( i = 1 ; i < 60; i++ )
{
rand = Math.ceil( Math.random( ) * 59 )
temp = nums[ i ]
nums[ i ] = nums[ rand ]
nums[ rand ] = temp
}
Добавьте цикл для добавления списка из шести значений элементов через дефис.
for( i = 1 ; i < 7 ; i++ )
{
str += nums[ i ]
if( i !== 6 ) { str += ' - ' }
}
Добавьте оператор для вывода строковой переменной.
console.log( str )
113
z
Создайте HTML-документ с самовызывающейся функцией. Объявите и проинициализируйте пять переменных.
Шаг 3 содержит
алгоритм, который
перетасовывает
числа и гарантирует, что значения
элементов не повторяются.
Работа с числовыми и строковыми типами данных
114
z
6
Сохраните HTML-документ, затем откройте его в браузере и запустите консоль. Проанализируйте полученные результаты — уникальный набор случайных чисел в указанном
диапазоне при выполнении каждого шага.
В этом примере
случайные числа
находятся в диапазоне от 1 до 59 —
для игры в UK Lotto
или в US New York
Lotto.
Объединение строк
В JavaScript существует объект String, предоставляющий полезные методы для управления строковыми значениями. Однако нет необходимости создавать его экземпляры с помощью ключевого слова
new и конструктора String( ), поскольку его методы можно просто применять к строковым переменным с использованием точечной нотации. Например, метод str.toUpperCase( ) возвращает значение
строки, преобразованное в верхний регистр. Метод
str.toLowerCase( ) возвращает значение строки, преобразованное в нижний регистр.
Существует также свойство length, в котором хранится общее количество символов в строке.
Во многих приведенных ранее примерах для объединения нескольких строк используется оператор
конкатенации +. Также можно использовать метод
concat( ) для добавления одной или нескольких строк,
представленных в виде списка аргументов, разделенных запятыми.
Некоторые разработчики для объединения строк
и переменных используют встроенную функцию
eval( ). Но мы вам этого не советуем. Функция eval( )
напрямую вызывает компилятор JavaScript, чтобы
скомпилировать свой строковый аргумент в оператор JavaScript.
115
z Если строка представляет собой выражение,
функция eval( ) вычислит это выражение —
например, eval('1+1') возвращает значение 2.
z Если строка представляет собой оператор или
последовательность операторов, функция eval( )
выполнит последний оператор — например, код
eval('let num=100; alert(num)') создает диалоговое окно
с предупреждением.
Такое использование функции eval( ) требует больших
затрат на производительность кода. Однако ее можно заменить более современными и эффективными методами. Кроме того, использование функции
eval( ) — это невероятный риск для безопасности.
Злоумышленнику слишком легко запустить какой
угодно код, когда вы используете eval( ). Например,
код eval('while(true); alert( )') вызовет бесконечный цикл,
блокирующий браузер.
Никогда не используйте функцию
eval( ). Существует даже известное
выражение — «eval
can be evil» («eval —
это зло»).
Работа с числовыми и строковыми типами данных
116
z
1
string.html
z
2
z
3
z
4
Создайте HTML-документ с самовызывающейся функцией. Объявите и проинициализируйте три переменные.
let topic = 'JavaScript'
let series = 'in easy steps'
let title = ''
Добавьте операторы для вывода преобразованных версий регистра первых двухзначений строковой переменной.
console.log( topic + ' > ' + topic.toLowerCase( ) )
console.log( series + ' > ' + series.toUpperCase( ) )
Вставьте операторы, чтобы добавить пробел
и вторую строку к первой, затем присвойте
ее третьей переменной и выведите объединенную строку.
title = topic.concat( ' ', series )
console.log( 'Title: ' + title )
Добавьте операторы для вывода длины каждой строки.
console.log( '\n' + topic + ' - Length: ' +
Сохраните HTML-документ, затем откройте
его в браузере и запустите консоль. Проанализируйте полученные результаты.
Разбиение строк
В JavaScript существуют методы, которые позволяют из полной строки скопировать определенную ее
часть. Они рассматривают строку как массив, в котором каждый элемент содержит символ или пробел,
и на него можно ссылаться по позиции индекса. Как
и в случае с массивами, нумерация индекса строки начинается с 0, поэтому первый символ находится в позиции 0.
Метод substring( ) возвращает подстроку строки между
двумя индексами, или от одного индекса и до конца
строки. Первый параметр определяет индекс, с которого производится копирование подстроки из исходной строки. Второй параметр, необязательный, определяет индекс, до которого происходит копирование
подстроки. Затем будут скопированы все символы
между начальной и конечной позициями.
Метод slice( ) позволяет возвратить новый массив,
который содержит копии элементов, вырезанных
из исходного массива.
Иногда бывает полезно копировать фрагменты строки, разделенные определенным символом. Символ-разделитель можно указать в качестве аргумента метода split( ), который позволяет
разбить строки на массив подстрок, используя заданную строку-разделитель для определения места разбиения. Второй параметр, необязательный,
определяет ограничение на количество найденных
На стр. 161 приведен пример, в котором метод split( )
используется для
разделения данных
файлов cookie.
117
Альтернативный способ копирования подстрок, метод substr( ), позволяет извлечь из строки определенное количество символов, начиная с заданного
индекса. Как и substring( ), метод substr( ) может принимать один аргумент для указания позиции индекса, с которого следует начать копирование, и будет копировать все символы после этой позиции
до конца строки. В отличие от substring( ), второй параметр метода substr( ) указывает количество символов, которые будут скопированы из исходной строки.
Метод substr( ) считается проще в использовании, чем
метод substring( ), так
как необходимо
только вычислить
начальную позицию и длину подстроки, а не конечную позицию.
Работа с числовыми и строковыми типами данных
подстрок. Когда этот параметр задан, метод split( )
разбивает строку при каждом возникновении указанного разделителя, но останавливается, когда
количество элементов в массиве достигнет заданного значения.
Ни один из этих методов не изменяет исходную
строку, а просто делает копию ее определенного
фрагмента.
z
1
split.html
z
118
2
Символ обратной
косой черты \ позволяет продолжить текст на следующей строке.
z
3
z
4
Создайте HTML-документ с самовызывающейся функцией. Объявите и проинициализируйте переменную.
let definition = 'JavaScript is the original dialect of \
the ECMAScript standard language.'
Добавьте операторы для присвоения выбранных фрагментов строки второй переменной
и выведите ее значение.
let str = definition.slice( 0, 27 )
str += definition.slice( 62, 70 )
console.log( str )
Добавьте операторы для вывода четырех отдельных фрагментов.
console.log( str.split( ' ', 4 )
Добавьте операторы для присвоения выбранных подстрок исходной строки второй переменной и выведите ее значение.
Сохраните HTML-документ, затем откройте
его в браузере и запустите консоль. Проанализируйте полученные результаты — фрагменты строки.
Чтобы вернуть
массив отдельных
символов, в методе split( ) в качестве разделителя
укажите '' (пустую
строку без пробелов).
Поиск символов
119
В JavaScript существуют методы, позволяющие искать в строке определенный символ или подстроку.
Метод search( ) возвращает позицию первого символа найденной подстроки, в противном случае (если
соответствие не найдено) метод вернет значение –1.
Метод match( ) производит поиск по заданной строке
с использованием регулярного выражения и возвращает массив, содержащий результаты этого поиска.
Если соответствие не будет найдено, то метод match( )
вернет значение null.
Метод indexOf( ) позволяет возвратить индекс искомого элемента в массиве при первом совпадении, или –1,
если элемент не найден. Метод lastIndexOf( ) производит
поиск необходимого элемента с конца строки.
Метод charAt( ) возвращает символ по заданному индексу внутри строки. Метод charCodeAt( ) возвращает Unicode символа по указанному индексу в строке.
И наоборот, в методе fromCharCode( ) в качестве аргументов можно указать одно или несколько символов
Unicode для возврата их строковых значений.
Кроме того, метод replace( ) выполняет внутри строки
поиск с использованием регулярного выражения или
строкового значения и возвращает новую строку, в которой будут заменены найденные значения.
Ключевое слово null не равно нулевому значению,
так как null вообще
не имеет никакого
значения.
1
find.html
z
2
z
3
Используйте двойные кавычки, чтобы
включать символ
кавычки в строку, заключенную
в одинарные кавычки.
z
4
120
Работа с числовыми и строковыми типами данных
z
Значения A-Z верхнего регистра
Unicode — 65–
90, а значения A-Z
нижнего регистра — 97–122.
z
5
z
6
Создайте HTML-документ с самовызывающейся функцией. Объявите и проинициализируйте строковую переменную.
let str = 'JavaScript in easy steps'
Добавьте операторы для вывода результатов
двух поисков строк с учетом регистра.
console.log( '"Script" Search: ' + str.search( 'Script') )
console.log( '"script" Search: ' + str.search( 'script' ) )
Добавьте операторы для вывода результатов
двух совпадений строк с учетом регистра.
console.log( '\n"Script" Match: ' + str.match( 'Script' ) )
console.log( '"script" Match: ' + str.match( 'script' ) )
Добавьте операторы для вывода первой и последней позиции индекса символа, если он
найден в строке.
console.log( '\nindexOf “s": ' + str.indexOf( 's' ) )
console.log( 'indexOf “m": ' + str.indexOf( 'm' ) )
console.log( '\nlastIndexOf “s": ' + str.lastIndexOf( 's' ) )
console.log( 'lastIndexOf “m": ' + str.lastIndexOf( 'm' ) )
Добавьте операторы для вывода первого символа в строке и его значения Unicode, а также четырех символов, указанных в их значениях Unicode.
console.log( '\ncharAt 0: ' + str.charAt( 0 ) )
console.log( 'charCodeAt 0: ' + str.charCodeAt( 0 ) )
console.log( 'fromCharCode: ' +
String.fromCharCode( 74, 97, 118, 97 ) )
Добавьте операторы для вывода исходной
строки и ее измененной версии.
console.log( '\nOriginal: ' + str )
console.log( 'Replaced: ' +
str.replace( 'easy', 'simple' ) )
z
7
Сохраните HTML-документ, затем откройте
его в браузере и запустите консоль. Проанализируйте полученные результаты — фрагменты строки.
Метод replace( ) возвращает измененную версию исходной строки.
При этом исходная
строка не изменяется.
121
Обрезка строк
Метод trim( ) удаляет пробелы из начала и конца
строки. Это особенно полезно для удаления всех
пробелов, отступов или символов новой строки, случайно включенных пользователем.
Вырезав пробелы из строки, вы можете с помощью метода startWith( ) проверить ее первые символы, а с помощью метода endWith( ) — последние. Оба
метода принимают в качестве аргумента символ или
подстроку и ищут совпадение с учетом регистра.
Если совпадение найдено, возвращается значение
true, в противном случае — false.
Доступ к определенному символу осуществляется с помощью указания его позиции индекса в квадратных скобках [] — например, при использовании
Работа с числовыми и строковыми типами данных
записи str[0], осуществляется доступ к первому символу строки в переменной с именем «str».
На стр. 162 приведен пример использования метода split( ) для
удаления пробелов из данных
cookie.
Метод includes( ) позволяет определить, содержит ли
массив искомый элемент. В случае нахождения элемента метод возвращает логическое значение true,
в противном случае –false.
При необходимости создать новую строку, содержащую несколько копий существующей строки, просто
укажите целочисленный аргумент для метода repeat( ).
Метод repeat( ) конструирует и возвращает новую строку, содержащую указанное количество соединенных
вместе копий строки, на которой он был вызван.
z
1
trim.html
z
122
2
z
z
3
4
В качестве альтернативы сопоставление символов
можно выполнить
с помощью оператора равенства,
например str[0]==='L'
z
5
Создайте HTML-документ с самовызывающейся функцией. Объявите и проинициализируйте переменную — со значением, содержащим пробелы по обоим концам строки.
let str = ' Love For All, Hatred For None. '
Добавьте операторы для вывода строки
и проверьте ее начало и конец.
console.log( 'String: ' + str )
console.log( 'Starts With “L" ? ' + str.startsWith( 'L' ) )
console.log( 'Ends With “." ? ' + str.endsWith( '.' ) )
console.log( 'First Letter: ' + str[ 0 ] )
Добавьте операторы для вывода обрезанной
строки и проверьте ее начало и конец.
console.log( 'Trimmed: ' + str )
console.log( 'Starts With “L"? ' + str.startsWith( 'L' ) )
console.log( 'Ends With “."? ' + str.endsWith( '.' ) )
console.log( 'First Letter: ' + str[ 0 ] )
Добавьте операторы, чтобы увидеть подстроки внутри строки.
console.log('\nIncludes “Hat"? '+ str.includes('Hat'))
console.log('Includes “hat"? '+ str.includes('hat'))
Сохраните HTML-документ, затем откройте
его в браузере и запустите консоль. Проанализируйте полученные результаты.
Заключение
z Объект Math предоставляет для использования
математические константы, например Math.PI,
и методы, например Math.max( ).
z Числа с плавающей запятой можно округлить
до ближайшего целого с помощью методов Math.
и Math.round( ).
floor( ), Math.ceil( )
z В JavaScript не используется метод автоматического округления.
123
При использовании этих методов
учитывается регистр.
Работа с числовыми и строковыми типами данных
zВо избежание несоответствий рекомендуется умножить числа с плавающей запятой на 100, выполнить арифметические операции, затем разделить результат на 100.
zМетод Math.random( ) возвращает случайное число
с плавающей запятой в диапазоне от 0 до 1.
zВ результате умножения случайного числа с плавающей запятой на 10 и округления результата с помощью Math.ceil( ) получается диапазон от 1 до 10.
zВ JavaScript существуют полезные методы для
управления строковыми значениями, например
toUpperCase( ) и toLowerCase( ).
zСуществует также свойство length, в котором хранится общее количество символов в строке.
zСтроки можно объединить с помощью оператора
124
конкатенации + или метода concat( ).
zИспользование функции eval( ) — это невероятный риск для безопасности. Никогда не используйте ее!
zАргументы методов slice( ) и substring( ) определяют
начальную и конечную позиции. Аргументы метода substr( ) задают начальную позицию и количество
символов для копирования.
zМетод split( ) разбивает объект String на массив
строк путем разделения строки указанной подстрокой.
zДля поиска символов в строке используются методы search( ), match( ), indexOf( ), lastIndexOf( )
и charAt( ).
zМетод trim( ) удаляет пробелы из начала и конца
строки.
zМетоды startWith( ), endWith( ) и includes( ) выполняют
поиск совпадений с учетом регистра в строке.
zМетоды replace( ) и repeat( ) создают измененные
строки.
6
Открытие
окон и методы
объекта window
В этой главе описываются
и демонстрируются методы
объекта window.
124
Введение в DOM
126
Свойства объекта window
128
Диалоговые окна
130
Прокрутка
133
Всплывающие окна
135
Создание таймера
137
Сведения о браузерах
139
Включение/отключение
функций
142
Расположение
144
История
146
Заключение
Открытие окон и методы объекта window
Введение в DOM
Браузер представляет все компоненты веб-страницы в иерархической древовидной структуре, называемой объектной моделью документа (DOM,
Document Object Model). Каждый компонент отображается под объектом window. Ниже представлена
древовидная структура:
elements[ ]
Элементы, за которыми следуют квадратные скобки,
представляют собой объекты массива, а элементы
в обычных круглых
скобках — это различные типы элементов формы.
options[ ]
Цикл for in используется для перечисления всех
свойств объекта window, предоставляемых браузером. Список будет содержать основные свойства,
общие для всех современных браузеров, а также
дополнительные свойства для определенного браузера.
z
z
1
2
z
3
z
4
Создайте HTML-документ с пустым элементом списка.
Создайте самовызывающуюся функцию. Объявите и проинициализируйте две переменные.
dom.html
const list = document.getElementById( 'props')
let property = null
Добавьте цикл для заполнения списка элементами — свойствами объекта window.
for( property in window )
{
if( property ) { list.innerHTML += '' + property }
}
Сохраните HTML-документ, затем откройте
его в браузере. Проанализируйте полученные результаты — свойства и методы объекта window.
Закрывающие теги
необязательны, поэтому в этом
цикле они не используются.
127
Прокрутите список вниз и проанализируйте все
свойства и методы
window — в нашем
примере 204 элемента. Важные
свойства выделены цветом.
Открытие окон и методы объекта window
Свойства объекта
window
Объект window имеет дочерний объект screen, который
предоставляет свойства, описывающие разрешение
экрана в зависимости от количества пикселей. Общие
размеры экрана можно установить с помощью свойств
window.screen.width и window.screen.height.
Свойства window.screen.availWidth и window.screen.
availHeight возвращают количество пикселей, которые
доступны браузеру по горизонтали и вертикали соответственно.
Свойство window.screen.colorDepth возвращает битовую
глубину цветовой палитры для отображения изображений в битах на пиксель.
z8 бит — Low Color (неинтенсивная окраска,
128
отображает только 256 цветов).
z16 бит — High Color (высококачественный цвет,
отображает 65 536 цветов).
Обратите внимание на стиль написания составных
слов в программировании
camelCase.
z24 бита — True Color (натуральный цвет, отображает миллионы цветов).
z32 бита — Deep Color (насыщенный цвет, отображает гамму из миллиарда или более цветов).
Современные компьютеры для цветного отображения используют 24-битное или 32-битное оборудование. Однако в устаревших компьютерах оборудование 16-битное. Только очень старые компьютеры
и мобильные телефоны для цветного отображения
используют 8-битное оборудование.
Свойство window.screen.pixelDepth возвращает битовую
глубину экрана в пикселях. На современных компьютерах это то же значение, что и значение свойства window.screen.colorDepth. Всегда используйте его
для определения цвета.
В настоящее время некоторые браузеры поддерживают объект window.screen.orientation со свойством
type, которое описывает текущую ориентацию экрана (альбомную или книжную) и указывает, основная
ориентация или неосновная.
Поскольку объект window — глобальный объект, его
имя может быть опущено при ссылке на дочерние
объекты и их свойства. Например, вместо window.
screen.colorDepth можно использовать запись screen.
colorDepth.
z
z
1
2
3
z
4
Создайте самовызывающуюся функцию. Объявите и проинициализируйте шесть переменных.
screen.html
const info = document.getElementById( 'props' )
let width = window.screen.width + 'px'
let height = window.screen.height + 'px'
let availW = window.screen.availWidth + 'px'
let availH = window.screen.availHeight + 'px'
let colors = 'Unknown'
129
z
Создайте HTML-документ с пустым абзацем.
Добавьте операторы, описывающие способности к цветовоспроизведению.
switch(window.screen.colorDepth)
{
case 8 : colors = 'Low Color' ; break
case 16 : colors = 'High Color' ; break
case 24 : colors = 'True Color' ; break
case 32 : colors = 'Deep Color' ; break
}
Сохраните HTML-документ, затем откройте
его в браузере. Проанализируйте полученные
результаты — общие сведения об экране.
Доступная высота на 40 пикселей меньше высоты экрана, так как
высота панели задач рабочего стола составляет
40 пикселей.
130
Диалоговые окна
Существуют три метода, с помощью которых JavaScript
отображает диалоговые сообщения для пользователя. Метод window.alert( ) показывает окно предупреждающего сообщения. Это окно с указанием сообщения
и кнопкой ОК.
Метод window.confirm( ) отображает диалоговое окно
с указанием сообщения, а также кнопок ОК и Cancel
(Отмена). При нажатии любой из кнопок диалоговое окно закрывается. При нажатии на кнопку ОК
возвращается значение true, а при нажатии на кнопку Cancel возвращается значение false.
Метод window.prompt( ) отображает диалоговое окно,
предлагающее пользователю ввести данные. Это диалоговое окно с кнопкой ОК, Cancel и полем для ввода текста. При нажатии любой из них диалоговое
окно закрывается. При нажатии на кнопку ОК возвращается значение в текстовом поле, а при нажатии
на кнопку Cancel возвращается значение null. Второй
аргумент также может быть передан методу window.
prompt( ), чтобы указать содержимое по умолчанию для
текстового поля.
z
1
z
2
z
z
3
4
5
dialogs.html
Затем создайте самовызывающуюся функцию. Объявите и проинициализируйте одну
переменную.
const info = document.getElementById( 'response' )
Добавьте операторы для отображения сообщения в простом диалоговом окне.
window.alert( 'Hello from JavaScript' )
Затем добавьте операторы для запроса решения от пользователя и напишите ответ в текстовом поле.
info.innerHTML = 'Confirm: ' +
window.confirm( 'Go or Stop?' )
Добавьте операторы для запроса ввода текста
от пользователя и запишите ответ в текстовом поле.
info.innerHTML += 'Prompt: ' +
z
6
window.prompt( 'Yes or No?', 'Yes' )
Сохраните HTML-документ, затем откройте
его в браузере. Проанализируйте полученные результаты — диалоговое окно.
131
z
Создайте HTML-документ с пустым абзацем.
Открытие окон и методы объекта window
132
z
7
Для закрытия в каждом диалоговом окне нажмите кнопку ОК. Проанализируйте полученный результат.
В программном коде создания диалогового
окна подтверждения можно использовать оператор if. Например, if
(confirm('OK?')) {…} else
{…}.
Если в программном коде необходимо использовать
ввод текста из диалогового окна запроса, рекомендуется удалить
пробелы с обоих
концов строки —
см. стр. 121.
Прокрутка
Метод scrollBy( ) позволяет прокручивать окно по горизонтали и вертикали, если содержимое выходит
за его пределы. Параметры X и Y указывают смещение в пикселях по горизонтали и вертикали соответственно.
Если содержимое выходит за пределы окна по вертикали, вдоль правого края окна браузера появляется полоса прокрутки. Метод scrollBy( ) прокручивает
страницу на указанное количество пикселей (указано в первом параметре) или до тех пор, пока не достигнет крайнего значения содержимого.
Если содержимое выходит за пределы окна по горизонтали, в нижней части окна браузера появляется
полоса прокрутки. Метод scrollBy( ) будет прокручивать на определенное количество пикселей (указано во втором параметре) или до тех пор, пока не достигнет крайнего значения содержимого.
Существует также метод scrollTo( ), который выполняет прокрутку документа до указанного координатора.
Этот метод принимает два аргумента, определяющих координаты X и Y, до которых должен прокручиваться верхний левый угол окна, если содержимое
выходит за его пределы по горизонтали и вертикали. Это можно использовать для перехода от координат по умолчанию X =0, Y = 0 к заданной позиции.
Например, если данные в браузере отображаются
в табличной форме, в первой ячейке первой строки
в верхнем левом углу окна браузера, метод scrollTo( )
вместо этого может разместить определенную ячейку в верхнем левом углу окна браузера.
Свойство scrollY возвращает количество пикселей,
в которых документ прокручивается по вертикали в данный момент. Это обозначает положение
ползунка на полосе прокрутки в правой части окна
относительно его верхнего угла. Свойство window.
scrollY — это альтернативное имя для более старого свойства window.pageYOffset, которое все еще существует в DOM, и может использоваться для обратной
совместимости вместо window.scrollY.
z
1
133
Объект window имеет свойство scrollX, возвращающее
количество пикселей, в которых документ прокручивается по горизонтали в данный момент. Это обозначает
положение ползунка вдоль полосы прокрутки в нижней части окна относительно его левого угла. Свойство window.scrollX — это альтернативное имя для более
старого свойства window.pageXOffset, которое все еще существует в DOM, и может использоваться для обратной совместимости вместо window.scrollX.
Отрицательные
значения, указанные в качестве параметров в методе
scrollBy( ), прокрутят страницу влево
и вверх.
Эффект от метода
scrollby( ) можно заметить только тогда, когда содержимое выходит
за пределы окна,
так как при этом
появляются полосы
прокрутки.
Создайте HTML-документ с широким пустым абзацем, расположенным слева от окна.
scroll.html
Открытие окон и методы объекта window
z
2
z
3
134
Обратите внимание на использование свойства
элемента clientHeight.
Существует также еще одно полезное свойство
clientWidth.
z
4
z
5
z
6
Затем создайте самовызывающуюся функцию. Объявите и проинициализируйте две
переменные.
const info = document.getElementById( 'info' )
let i = 0
Добавьте цикл для записи столбца из 40 чисел.
for( i = 1; i < 41; i++ )
{
info.innerHTML += ( i + ' ')
}
Затем добавьте операторы для прокрутки окна
на 200 пикселей по горизонтали вправо и вертикально вниз по высоте элемента абзаца.
window.scrollBy( 200, info.clientHeight )
Наконец, вставьте оператор, чтобы добавить
подтверждение положения ползунка в текущем окне.
info.innerHTML += 'scrollX: ' + window.scrollX +
'& scrollY: ' + window.scrollY
Сохраните HTML-документ, затем откройте
его в браузере. Проанализируйте полученные результаты — диалоговое окно с полосой прокрутки.
Всплывающие окна
С помощью метода open( ) можно открыть новое окно
браузера. Для этого необходимо указать три параметра: URL-адрес документа, который будет загружен в новое окно, имя для нового окна и разделенный запятыми список свойств, описанных в таблице
ниже.
Описание
directories
Добавляет панель ссылок
height
Устанавливает высоту области документа
в пикселях
left
Координата экрана окна X
location
Добавляет адресную строку
menubar
Добавляет стандартную строку меню
resizable
Позволяет изменять размер окна
scrollbars
При необходимости включает полосы прокрутки
status
Добавляет строку состояния
toolbar
Добавляет панель кнопок Forward (Вперед)
и Back (Назад)
top
Координата экрана окна Y
width
Устанавливает ширину области документа
в пикселях
При успешном результате метод window.open( ) возвращает новый объект окна и открывает новое
всплывающее окно или в противном случае метод
просто возвращает значение null. Полученный результат должен быть присвоен переменной, которая
может быть впоследствии проверена. Если переменная не равна null, она должна представлять объект
всплывающего окна. Затем с помощью метода close( )
это окно можно закрыть, а используя метод print( ), —
распечатать его содержимое.
Окна также можно расположить на экране, используя координаты осей экрана X и Y в качестве аргументов метода window.moveTo( ). Метод window.moveBy( )
перемещает окно на указанное количество пикселей
относительно его текущих координат.
135
Свойство
Из-за большого
и раздражающего
количества всплывающих окон разработчики браузеров добавили
блокировщики, поэтому использование всплывающих
окон не рекомендуется. Но для общего сведения информация о них
приведена в этой
книге.
Открытие окон и методы объекта window
z
z
z
1
popup.html
2
3
opener.html
z
136
4
Не добавляйте
в строку списка
функций пробелы,
так как это может
привести к сбою
в работе метода
window.open( ).
Pop-up Window
Создайте второй HTML-документ, содержащий заголовок.
Main Window
Затем во втором документе создайте самовызывающуюся функцию, которая создает объект окна.
const popWin = window.open( 'popup.html', 'Popup',
'top=150, left=100, width=350, height=100' )
Сохраните оба HTML-документа, затем откройте второй документ, чтобы увидеть, что
его всплывающее окно заблокировано.
z
Откройте блокировщик всплывающих окон
и разрешите их отображение с этой страницы.
z
Затем обновите окно браузера, чтобы увидеть
всплывающее окно с указанными функциями.
5
6
Обратите внимание, что всплывающее окно не отображает в строке
заголовка указанный «фавикон»
(значок веб-сайта).
Создайте HTML-документ, содержащий заголовок.
Создание таймера
В JavaScript существует метод setTimeout( ), который
многократно оценивает выражение через определенное количество миллисекунд. Если указанное
выражение вызывает функцию, где появляется
оператор window.setTimout( ), создается рекурсивный
цикл, в котором функция повторно выполняется
по истечении указанного периода времени.
Выражение, выполняемое методом setTimeout( ), указывается в качестве его первого аргумента, а период времени — это число, указанное в качестве
второго аргумента. Время выражается в миллисекундах, где 1000 означает одну секунду.
Методы setInterval( ) и clearInterval( ) принимают идентичные аргументы и работают одинаково. Разница
только в том, что время, указанное для setInterval( ),
определяет интервал, в котором выражение должно быть выполнено, независимо от требуемого времени. И наоборот, время, указанное в методе setTimeout( ), определяет период времени между
окончанием одного и началом следующего выполнения. Это означает, что метод setInterval( ) может
попытаться выполнить перекрывающиеся выполнения, если интервал короткий, а время, необходимое для выполнения выражения, слишком велико.
По этой причине рекомендуется использовать метод setTimeout( ).
z
1
Двухминутная задача со значением времени ожидания в 10 минут
запускается каждые 10 минут,
но такая же задача со значением
времени ожидания в 10 минут запускается каждые
12 минут (10+2).
Создайте HTML-документ с пустым абзацем.
timer.html
137
Метод setTimeout( ) возвращает числовое значение,
которое может быть присвоено переменной, чтобы однозначно идентифицировать ожидающий процесс. Это значение указывается в качестве аргумента метода clearTimeout( ) для прерывания цикла
таймера в определенный момент.
2
Дополнительную
информацию о замыканиях можно
найти на стр. 29.
z
3
z
4
138
Открытие окон и методы объекта window
z
Чтобы увидеть значение идентификатора таймера,
можно к функции
таймера добавить
оператор console.
log(timerId).
z
5
Объявите и проинициализируйте переменную с помощью функции, которая возвращает целые числа в порядке убывания.
const count = ( function ( ) {
let num = 10
return (function( ) {return num- } )
})()
Добавьте функцию таймера. Объявите и проинициализируйте три переменные.
function countDown( )
{
const info = document.getElementById( 'info' )
let timerId = null
let num = count( )
// Здесь будет ваш код.
}
Затем добавьте операторы для запроса решения от пользователя и напишите ответ в текстовом поле.
if ( num > 0 )
{
info.innerHTML += ''+ num + ''
timerId = window.setTimeout( countDown , 1000 )
}
else
{
info.innerHTML += 'Lift Off!'
window.clearTimeout( timerId )
}
Добавьте после функционального блока оператор для вызова функции таймера после загрузки страницы.
countDown( )
z
6
Сохраните HTML-документ, затем откройте
его в браузере. Проанализируйте полученные результаты — таймер отсчитывает 10 секунд.
Сведения о браузерах
Cвойство appName возвращает имя браузера, свойство appCodeName возвращает его кодовое имя. С помощью свойства appVersion можно узнать версию
браузера. Свойство appCodeName для любого браузера всегда возвращает значение «Mozilla».
При выполнении запроса к веб-серверу каждый
браузер отправляет кодовое имя браузера и версию в заголовке HTTP с именем «User-Agent». Эту
строку также можно получить из свойства navigator.
userAgent. Свойство navigator.platform возвращает строку, представляющую платформу браузера.
139
Объект window имеет ряд дочерних объектов,
у каждого из которых свои собственные свойства
и методы. Например, свойство window.navigator содержит информацию о веб-браузере. Поскольку
объект window — глобальный объект, его имя может быть опущено при ссылке на дочерние объекты и их свойства. Поэтому его можно просто вызвать, используя запись alert( ). На свойство window.
onload можно сослаться, используя запись onload,
а на объект window.navigator, используя запись
navigator.
Чтобы сделать очевидным происхождение методов
и свойств объекта window, в предыдущих примерах использовался
префикс window. Однако это не рекомендуется. Например, вместо записи
window.onload рекомендуется использовать onload.
Открытие окон и методы объекта window
Ранее большое внимание уделялось коду обнаружения браузера, с помощью которого пытались идентифицировать браузер, используя его свойство navigator.
В настоящее время это считается неэффективным
и рекомендуется использовать концепции обнаружения функций.
Например, запрос о том, поддерживает ли браузер
важный метод addEventListener( ) и современную объектную модель документа.
z
z
1
browser.html
2
z
140
3
z
4
Во всех современных веб-браузерах объект window
включает метод
addEventListener( ). Более подробно
об этом вы узнаете в главе 7.
z
5
z
6
Создайте HTML-документ с пустым списком.
Создайте самовызывающуюся функцию. Проинициализируйте ссылки на переменную.
const list = document.getElementById( 'list' )
Затем добавьте операторы, чтобы извлечь
сведения об используемой версии браузера
и операционной системы.
list.innerHTML += 'Version: ' + navigator.appVersion
list.innerHTML += 'Platform: ' + navigator.platform
Наконец, добавьте операторы, подтверждающие использование современного браузера.
if( window.addEventListener )
{
list.innerHTML += 'This is a modern DOM browser'
}
Сохраните HTML-документ, затем откройте
его в браузере. Проанализируйте полученные
результаты — информацию, содержащую название, версию и платформу браузера.
Включение/отключение
функций
Дочерний объект navigator объекта window содержит
метод javaEnabled( ), возвращающий логическое значение true, если текущий браузер поддерживает Java.
Свойство cookieEnabled возвращает логическое значение true, если в браузере включены файлы cookie.
Также объект navigator содержит дочерние объекты
plugins и mimeTypes. Как и в случае с другими объектами, они имеют свойство length, возвращающее количество элементов.
141
Причина, по которой Google
Chrome и другие
браузеры называют себя Netscape,
Mozilla, относится
к эпохе «браузерных войн». Браузеры должны были
принимать эти названия, чтобы поддерживать все
веб-страницы, загружаемые браузерами Netscape
Mozilla.
Открытие окон и методы объекта window
Содержимое этих
элементов массива
различается в зависимости от поддерживаемых браузером функций.
Каждый элемент массива подключаемых модулей
(плагинов) имеет свойства name и description, содержащие сведения об одной установленной функции
подключаемого модуля. Доступ к их элементам осуществляется с использованием порядкового номера элемента. Например, navigator.plugins[0].name ссылается на свойство name первого элемента в массиве
plugins.
Точно так же каждый элемент массива mimeTypes
имеет свойства type и description, содержащие сведения об одной поддерживаемой функции MIME. Доступ к их элементам осуществляется при использовании порядкового номера элемента. Например,
navigator.mimeTypes[0].type ссылается на свойство type
первого элемента в массиве mimeTypes.
z
z
1
142
enabled.html
2
z
3
z
4
z
5
Создайте HTML-документ с пустым абзацем.
Создайте самовызывающуюся функцию. Объявите и проинициализируйте две переменные.
const info = document.getElementById( 'info' )
let status = ''
Для отображения подтверждающего сообщения в случае включения поддержки Java добавьте операторы.
status = (navigator.javaEnabled( ) ) ? 'Enabled' : 'Disabled'
info.innerHTML += 'Java Support is ' + status + ''
Затем добавьте операторы для отображения
подтверждающего сообщения в случае включения поддержки файлов cookie.
status = ( navigator.cookieEnabled )? 'Enabled' : Disabled'
info.innerHTML += 'Cookie Support is ' + status + ''
Добавьте операторы для записи длины массива подключаемых модулей и примера
элемента.
z
6
7
Наконец добавьте операторы для записи длины массива MIME и примера элемента.
if ( navigator.mimeTypes.length!== 0 )
{
info.innerHTML += 'No. of MIME Types: ' +
navigator.mimeTypes.length
info.innerHTML += 'Example: ' +
navigator.mimeTypes[1].type
info.innerHTML += 'For: ' +
navigator.mimeTypes[1].description
}
Сохраните HTML-документ, затем откройте
его в браузере. Проанализируйте полученные результаты — отображения статуса разрешенных функций.
Вы можете использовать циклы для
записи всех плагинов и содержимого элементов
mimeTypes.
Расположение
Объект location имеет пять свойств, содержащих компоненты полного URL-адреса документа, загруженного в текущий момент в окне браузера. Свойство
location.href можно использовать, чтобы получить полный URL-адрес страницы (протокол, доменное имя,
имя файла и при необходимости привязки URL-адреса). Отдельные компоненты полного адреса содержатся в протоколе location.protocol (http: или
https:), location.host (доменное имя), location.pathname
(путь к файлу) и location.hash (привязки URL-адреса). Назначение нового URL-адреса свойству location
заставит браузер загружать страницу или другой ресурс по новому месту назначения.
z
1
144
location.html
z
2
z
3
z
4
Веб-браузер может загружать файл
любого поддерживаемого MIME
типа — например,
MIME-тип image/
png для всех файлов изображений
PNG.
Создайте HTML-документ с абзацем, содержащим гиперссылку.
Fragment Anchor
Создайте самовызывающуюся функцию. Объявите и проинициализируйте две переменные.
const info = document.getElementById( 'info' )
let jump = confirm( 'Jump to Fragment?' )
Добавьте оператор для изменения местоположения окна при согласии пользователя.
if ( jump )
{
location = location.href + '#frag'
}
Затем добавьте операторы для записи каждого компонента текущего URL-адреса.
info.innerHTML += 'Href: ' + location.href
info.innerHTML += 'Protocol: ' + location.protocol
info.innerHTML += 'Host: ' + location.host
info.innerHTML += 'Path: ' + location.pathname
info.innerHTML += 'Hash: ' + location.hash
z
5
z
6
Сохраните HTML-документ и откройте его
в браузере. Проанализируйте полученные
результаты — диалоговое окно с запросом
на подтверждение изменения URL-адреса.
Нажмите кнопку Cancel (Отмена), чтобы отклонить запрос и увидеть загрузку страницы,
как правило, в ее корневой папке.
Рассмотренное
нами расположение — это страница, находящаяся на веб-сервере
в локальной системе. Если бы страница была расположена на вашем
рабочем столе, протоколом
было бы file:, а значение host отсутствовало бы.
145
z
7
Обновите браузер, затем нажмите кнопку ОК,
чтобы принять запрос и увидеть загрузку страницы в месте расположения ее фрагмента.
Открытие окон и методы объекта window
История
Веб-браузер сохраняет историю URL-адресов текущей сессии в виде массива в дочернем объекте
history. Как и в случае с массивами, объект history имеет свойство length, а также методы back( ) и forward( )
для перемещения между элементами. В качестве альтернативы метод go( ) объекта history принимает положительный или отрицательный целочисленный аргумент, указывающий, на какое количество элементов
перемещаться. Например, history.go(1) выполняет перемещение на один элемент вперед, а history.go(–2) перемещает на два элемента назад.
z
1
page-1.html
page-2.html
page-3.html
z
z
146
2
history.js
3
Чтобы очистить
историю браузера,
в браузере Google
Chrome нажмите
кнопку , затем
выберите пункты
More tools (Дополнительные инструменты), Clear browsing
data (Очистить данные просмотра)
и нажмите кнопку
Clear data (Очистить
данные).
z
4
Создайте три идентичных HTML-документа, содержащих пустой абзац, и вставьте один
и тот же внешний файл сценария.
Создайте самовызывающуюся функцию. Объявите и проинициализируйте переменную.
const info = document.getElementById( 'info' )
Затем добавьте операторы для создания кнопок в абзацах.
info.innerHTML += 'Back'
info.innerHTML += 'Forward'
z
z
5
Сохраните в одной папке HTML-документ
и файл сценария JavaScript, затем очистите
историю браузера.
6
Откройте первую страницу, чтобы увидеть,
что начальная длина истории равна 1.
URL-адреса хранятся в элементах
массива объекта
history в защищенном виде, поэтому их невозможно получить в виде
строк.
z
7
Щелкните ссылку, чтобы загрузить третью
страницу и увидеть, как длина истории увеличивается до 2.
147
z
8
Для возврата на первую страницу нажмите
кнопку Back (Назад). Длина истории останется такой же — 2.
В этом примере
каждый URL-адрес
добавляется в массив history только при переходе
на другую страницу и при нажатии
на ссылку. Методы
back( ), forward( ) и go( )
просто выбирают элемент в history,
поэтому свойство length остается
неизменным.
Открытие окон и методы объекта window
Заключение
zОбъектная модель документа (DOM) — это иерархическая структура для всех компонентов
веб-страницы.
zОбъект window — верхний уровень иерархии
DOM и содержит свойства, описывающие окно
браузера.
zОбъект screen — дочерний объект по отношению
к объекту window и содержит свойства, описывающие размеры экрана и глубину цвета.
zОбъект window содержит методы scrollBy( )
и scrollTo( ), а также свойства scrollX и scrollY, определяющие позицию прокрутки.
zДиалоговые сообщения могут отображаться при
148
использовании методов alert( ), confirm( ) и prompt( ).
zВсплывающее окно создается с помощью метода
и может быть заблокировано блокировщиком всплывающих окон.
open( )
zМетод setTimeout( ) создает таймер, который можно отменить с помощью метода clearTimeout( ).
zОбъект navigator — дочерний объект по отношению
к объекту window и содержит свойства, описывающие версии браузера и серверные платформы.
zОбъект window существует в глобальном пространстве имен, поэтому все его дочерние объекты
не обязательно должны включать префикс window.
zОбнаружение функций используется для идентификации современной модели DOM.
zСвойства navigator.plugins и navigator.mimeTypes представляют собой массивы, содержащие сведения
о поддерживаемых функциях.
zОбъект location — дочерний объект по отношению к объекту window и содержит свойства, описывающие адрес загруженного документа.
zОбъект history — дочерний объект по отношению
к объекту window, содержащий массив посещенных адресов текущей сессии.
zОбъект history содержит методы back( ), forward( )
и go( ), которые используются для перемещения
по страницам в текущей сессии.
149
7
Методы
и свойства
объекта
document
В этой главе вы изучите,
как использовать
в JavaScript свойства
150
Работа с документом
152
Свойства интерфейса
Document
154
Получение элементов
156
Работа с текстом
159
Управление файлами cookie
161
События загрузки
164
Ответ на события мыши
166
Генерация событий
168
Добавление переключателей
170
Добавление элементов
выбора
172
Сброс формы
175
Проверка и отправка формы
177
Заключение
и методы объекта document.
Методы и свойства объекта document
Работа с документом
Объект document — наиболее интересный из всех
дочерних объектов DOM. Он обеспечивает доступ
к HTML-документу.
Объект document определяет ряд свойств, описывающих документ и его расположение.
zСвойство document.title устанавливает или возвращает заголовок текущего HTML-документа.
zСвойство location.href устанавливает или возвращает полный URL-адрес текущей страницы.
zСвойство document.domain возвращает доменное
имя сервера, на котором загружен текущий документ, аналогично значению location.host.
zHTML-документы предоставляют браузеру дату
152
своего создания или последнего изменения в виде
заголовка HTTP, чтобы браузер мог решить, использовать ли кэшированную копию документа
или новый документ. Также дату и время последнего изменения текущего документа можно получить, используя свойство document.lastModified.
zСвойство document.referrer возвращает URL-адрес документа, в который загружен текущий документ. Оно используется, только если пользователь перешел по гиперссылке для загрузки страницы, а не ввел URL-адрес или использовал
какой-либо другой метод.
z
1
info-1..html
z
2
info-1..html
Создайте HTML-документ, содержащий
в основном разделе гиперссылку на второй
(целевой) HTML-документ.
Сохраните HTML-документы в той же папке, затем откройте документ, содержащий
ссылку, в своем браузере.
Дата, содержащаяся в свойстве document.
lastModified, относится только к самому
HTML-документу,
а не к каким-либо
внешним таблицам
стилей или внешним файлам сценариев.
153
z
6
Щелкните гиперссылку, чтобы загрузить второй
HTML-документ в браузере и проанализируйте
полученную информацию о документе.
Показанный здесь
домен — это домен страницы,
расположенной
в локальной системе на веб-сервере. В случае расположения страницы
навашем рабочем столе свойства document.
referrer и document.
domain не имели бы
никаких значений.
Методы и свойства объекта document
154
Свойства интерфейса
Document
Объект document содержит следующие дочерние объекты: forms, images, links, styleSheets и scripts. Каждый
из них — это массив, в котором всякий элемент
представляет компонент документа в том же порядке,
в котором они появляются в HTML-документе. Например, первое изображение, заданное тегом HTML
, представлено как document.images[0]. Это означает, что на его URL-адрес можно ссылаться, используя
запись document.images[0].src, которая определяет путь,
назначенный атрибуту src тега HTML . Новый
URL-адрес в сценарии будет динамически заменять
старое изображение новым.
Обратите внимание на стиль написания прописных
букв в программировании camelCase
в свойстве
styleSheets.
components..html
user.png
bg.png
64|px x 64|px
24|px x
(серые области 100|px
прозрачны)
Массив links в HTML-документе представляет коллекцию всех элементов ; свойство styleSheets —
; а свойство scripts — .
Массив forms представляет коллекцию HTML
со списком всех элементов , содержащихся
в текущем документе. Однако также имеет собственные свойства — массив всех компонентов формы.
Например, доступ к первому компоненту первой
формы в документе HTML можно получить с помощью записи document.forms[0].elements[0].value. Присвоение этому компоненту нового значения в сценарии
динамически заменяет старое значение.
z
1
Создайте HTML-документ, содержащий
форму и пустой список.
Наконец, добавьте операторы, чтобы перечислить два значения атрибутов.
list.innerHTML += 'First Image URL: ' +
document.
images[ 0 ].src
list.innerHTML += 'First Form Element Value: ' +
document.forms[ 0 ].elements[ 0 ].value
Сохраните HTML-документ, затем откройте
его в браузере. Проанализируйте полученные результаты — отображение компонентов
документа в виде списка.
155
z
Для стилизации шрифта и формы добавьте
таблицу стилей.
Методы и свойства объекта document
Элементы массива представляют только соответствующие теги
HTML.
156
Заметьте, что изображения, добавленные в документ согласно правилам стиля, не включаются в массив images; в него входят только те, которые включены с помощью тегов HTML . Поэтому в нашем
примере фоновое изображение формы (bg.png)
не отображается в массиве images. Точно так же правило стиля работает с массивом styleSheets.
Получение элементов
Использование для ссылки на конкретный элемент
точечной нотации предполагает, что разработчик
подсчитает количество компонентов для вычисления
каждой позиции индекса. Это особенно утомительно
для работы с объемными документами, так как возникает риск появления ошибок, а при редактировании HTML-документа может измениться позиция
индекса элемента. Прежде это было необходимо,
но позднее к объекту document было решено добавить три новых метода:
z Метод document.getElementById( ), использовавшийся в предыдущих примерах для добавления содержимого из кода JavaScript, позволяет ссылаться на любой компонент по его значению атрибута
HTML id. Метод getElementById( ) возвращает элемент, имеющий атрибут ID с указанным значением.
zМетод document.getElementsByTagName( ) возвращает коллекцию всех элементов в документе с указанным именем тега в виде объекта
HTMLCollection. Доступ к определенному элементу HTML осуществляется при использовании его порядкового номера.
zМетод document.getElementsByClassName( ) возвращает коллекцию всех элементов в документе с указанным именем класса в виде объекта
HTMLCollection. Доступ к определенному элементу HTML осуществляется с использованием
его порядкового номера.
z
1
Создайте HTML-документ, содержащий два
списка и пустой абзац.
Apple
Almond
Apricot
2
z
3
Создайте самовызывающуюся функцию.
Объявите и проинициализируйте пять переменных.
const info = document.getElementById( 'info' )
const item = document.getElementById( 'country' )
const lists = document.getElementsByTagName( 'ol' )
const fruits =
document.getElementsByClassName( 'fruit' )
let i = 0
Добавьте оператор для описания объекта
элемента и текста, содержащегося в его элементах.
info.innerHTML = item + ' Id: ' +
item.innerText + ''
157
collection..html
Blackberry
Brazil
Banana
z
Обратите внимание на название
двух методов. В названии одного метода присутствует
слово «Elements»
(во множественном числе), а в имени
другого метода —
«Element» (в единственном числе).
Методы и свойства объекта document
z
4
Свойство innerText
устанавливает или
возвращает содержимое указанного
узла и всех его потомков. Свойство
innerHTML устанавливает или возвращает содержимое
HTML (внутренний
HTML) элемента.
Чтобы увидеть разницу, просто измените свойство
innerText на innerHTML .
z
5
z
158
6
Затем добавьте операторы для описания объекта HTMLCollection и текста, содержащегося в его элементах.
info.innerHTML += '' + lists + ' Tags:'
for( i = 0; i < lists.length; i++ ) {
info.innerHTML += ( i + 1 ) + ' of ' + lists.length
info.innerHTML += ': ' + lists[ i ].innerText + ''
}
Наконец, добавьте операторы для описания
второго объекта HTMLCollection и текста,
содержащегося в его элементах.
info.innerHTML += '' + fruits + ' Class:'
for( i = 0; i < fruits.length; i++ ) {
info.innerHTML += ( i + 1 ) + ' of ' + fruits.length
info.innerHTML += ': ' + fruits[ i ].innerText + ''
}
Сохраните HTML-документ, затем откройте
его в браузере. Проанализируйте результаты — значения элементов, полученные разными методами.
Работа с текстом
Как уже рассматривалось в предыдущих примерах,
свойства innerHTML и innerText объекта document могут использоваться для написания текста в существующих элементах. Объект document также содержит
метод write( ), который предоставляет еще один способ записи текста, но он автоматически вызывает
метод document.open( ) для запуска нового документа,
поэтому текущий документ больше не отображается.
Полезным считается то, что метод document.
createElement( ) принимает имя тега в качестве аргумента и создает элемент этого типа. Затем содержимое может быть добавлено к новому элементу посредством присвоения его свойствам innerHTML или
innerText. Новый элемент можно вставить на веб-страницу в существующий, указав его в качестве аргумента метода document.appendChild( ).
Вы также можете динамически записывать атрибуты
в элементы, указав имя и значение атрибута в качестве двух аргументов метода setAttribute( ).
z
1
2
z
3
Top 3 Cities
Tokyo, Japan
New York, USA
Rio de Janeiro, Brazil
Сохраните HTML-документ и откройте его
в браузере, чтобы просмотреть веб-страницу.
Создайте самовызывающуюся функцию.
Объявите и проинициализируйте две переменные в качестве новых элементов списка
и одну ссылку на переменную.
iwrite.html
159
z
Создайте HTML-документ, содержащий заголовок и упорядоченный список из трех
элементов.
Методы и свойства объекта document
z
4
Существующий
элемент можно удалить, указав его в качестве
аргумента метода
document.removeChild( ),
или заменить, указав новые и старые элементы в качестве аргументов
метода document.
replaceChild( ).
z
5
z
160
6
z
7
z
8
Для удаления
атрибута укажите
его имя в качестве
аргумента метода
removeAttribute( ).
Присвойте двум новым элементам текстовое
содержимое.
itemFour.innerText = 'London, England'
itemFive.innerText = 'Cape Town, South Africa'
Вставьте на веб-страницу содержимое нового элемента в качестве дочерних элементов
упорядоченного элемента списка.
document.getElementById( 'list ').
appendChild( itemFour )
document.getElementById( 'list' ).
appendChild( itemFive )
Добавьте к существующему элементу заголовка атрибут, чтобы изменить его цвет
шрифта.
heading.setAttribute( 'style', 'color: Red' )
Наконец, чтобы лучше описать расширенный список, измените заголовок.
heading.innerText = 'Best Five Cities'
Снова сохраните HTML-документ, затем обновите страницу в браузере, чтобы увидеть
новый текст.
Управление файлами
cookie
По соображениям безопасности в JavaScript не предусмотрена запись обычных файлов на жесткий диск
пользователя, но для хранения небольшого количества данных существует запись файлов cookie. Файлы cookie ограничены по размеру и количеству —
до 4 КБ и по 20 файлов соответственно на каждый
веб-сервер. Как правило, данные, хранящиеся
в файле cookie, идентифицируют пользователя для
последующих посещений веб-сайта.
По умолчанию, если дата истечения срока действия
не указана, то он ограничен текущей сессией браузера. Пара expires=date (срок действия=дата) устанавливает дату истечения срока хранения файлов
cookie. Метод toUTCString( ) преобразует дату в строке,
используя часовой пояс UTC. Установка даты истечения срока действия существующего файла cookie
на прошлую дату приведет к его удалению.
Чтобы получить данные из файла cookie, необходимо выполнить некоторые действия со строкой для
возврата Unicode в обычный текст с использованием встроенной функции decodeURI( ). Поэтому%20
снова становится пробелом и будет разделять элементы данных имени и значения. В строке cookie
несколько пар можно разделить, указав символ; в качестве аргумента метода split( ). Точно так же разделяются атрибуты и значения — указывается символ = в качестве аргумента метода split( ). Аналогично
если значение представляет собой список элементов, разделенных запятыми. Чтобы разделить список
Дата истечения срока действия cookie, как
правило, не может быть прочитана JavaScript.
При необходимости добавьте ее
в список значений
cookie.
Длинное число,
используемое для
установки срока действия, — это
количество миллисекунд одного дня.
161
Данные cookie хранятся в свойстве cookie объекта
document в виде одной или нескольких пар key=value
(атрибут=значение), оканчивающихся символом;.
Значение не может содержать пробелов, запятых
или точек с запятой, если оно не передано в качестве аргумента встроенной функции encodeURI( ), которая кодирует строку в формате Unicode — например,%20.
Методы и свойства объекта document
элементов, подобно элементам массива, символ запятой, также можно указать в качестве аргумента.
Полезно создать внешний файл JavaScript, содержащий
служебные функции «сеттер» — для записи и «геттер» — для чтения, которые можно легко вызвать для
хранения и извлечения данных cookie.
z
1
Создайте файл JavaScript с помощью функции установки, которая содержит параметры
для атрибутов, значений и аргументов срока
действия.
cookie.js
z
162
2
Обратите внимание, что в нашем
примере для удаления пробелов
используется метод trim( ).
z
3
cookie.html
function setCookie( key, value, days ) {
const d = new Date( )
d.setTime( d.getTime( ) + ( days * 86400000 ) )
document.cookie = key + '=' + encodeURI( value ) +
'; expires=' + d.toUTCString( ) + ';'
}
Чтобы принять ключевой аргумент, добавьте
функцию «геттер».
function getCookie( key ) {
if( document.cookie )
{
const pairs =
decodeURI( document.cookie ).split( ';' )
let i, name, value
for( i = 0; i < pairs.length ; i++ )
{
name = ( pairs[ i ].split( '=' )[ 0 ]).trim( )
if( name === key ) { value =
pairs[ i ].split( '=' )[ 1 ] }
}
return value
}
}
Создайте HTML-документ, содержащий пустой список, и импортируйте внешний файл
JavaScript.
z
4
В другом элементе скрипта создайте самовызывающуюся функцию, которая устанавливает файл cookie, а затем получает его значения.
setCookie( 'User','Mike McGrath,12345', 7 )
z
5
const list = document.getElementById( 'list' )
let i, value = getCookie( 'User' )
if( value.indexOf( ',' ) )
{
value = value.split( ',' )
}
for( i = 0; i < value.length; i++ )
{
list.innerHTML += '' + value[ i ]
}
События загрузки
Модель DOM позволяет JavaScript реагировать на «события», которые происходят на веб-странице посредством действий разработчиков, предоставляя функции,
которые будут выполняться при наступлении определенного события. Эти функции известны как «обработчики событий»:
z
— срабатывает, когда страница загружается
в браузере.
load
163
Сохраните HTML-документ и файл
JavaScript в одной папке на веб-сервере, затем откройте веб-страницу в своем браузере
и проанализируйте результаты — полученные значения файлов cookie.
Файл cookie можно удалить, установив дату истечения срока его
действия равной
дате, предшествующей текущей
фактической дате.
Методы и свойства объекта document
164
zclick — срабатывает, когда пользователь нажимает
кнопку мыши.
zkeydown — срабатывает, когда пользователь
нажимает клавишу клавиатуры.
zchange — срабатывает, когда пользователь
редактирует поле ввода.
zsubmit — срабатывает, когда пользователь
отправляет HTML-форму.
Также существует
событие выгрузки,
которое запускается, когда пользователь покидает
страницу. Его обработчик событий
может быть присвоен свойству
window.onunload
или может быть
указан в методе
addEventListener( ).
Чтобы отреагировать на событие загрузки, обработчик
событий может быть привязан к свойству onload объекта window, используя следующий синтаксис:
onload=имя-функции
В качестве альтернативы имя события и имя функции обработчика событий можно указать в качестве
аргументов метода addEventListener( ) объекта window.
Имя события должно быть заключено в кавычки, например:
addEventListener( 'load' , имя-функции )
Обработчик события загрузки используется для проверки функций браузера и данных cookie.
z
1
load..html
z
2
Создайте HTML-документ, который содержит абзац со ссылкой на пример файлов
cookie, приведенный на стр. 162, пустой абзац, а также импортирует внешний файл
JavaScript из предыдущего примера.
Link
Затем добавьте обработчик событий, который
будет выполняться при загрузке страницы.
addEventListener( 'load', welcome )
z
3
Чтобы приветствовать пользователя, добавьте
следующий обработчик событий.
z
4
function welcome( ) {
const info = document.getElementById( 'info' )
if( getCookie( 'Name' ) )
{
info.innerHTML = 'Welcome Back, ' +
getCookie( 'Name' )
}
else
{
let name = prompt( 'Please Enter Your Name', 'User' )
setCookie( 'Name', name, 7 )
info.innerHTML = 'Welcome, ' + name
}
}
Второй аргумент
метода prompt( ) —
это входное значение по умолчанию.
Сохраните HTML-документ и откройте его
в браузере — введите свое имя, перейдите
по ссылке и нажмите кнопку возврата.
165
Методы и свойства объекта document
Ответ на события мыши
Обработчики событий, которые выполняются при
нажатии пользователем на определенный объект
в HTML-документе, назначаются путем присвоения
имени функции свойствам объекта onclick и ondblclick.
Эти свойства реагируют на событие «click», которое срабатывает, когда пользователь щелкает кнопку мыши один раз, и событие «dblclick» при двойном
щелчке.
166
Кроме того, свойства объекта onmousedown и onmouseup
могут привязать обработчики событий, которые будут выполняться при нажатии кнопки мыши, вызывая
событие «mousedown», а при отпускании — событие
«mouseup».
Любой видимый
объект в HTML-документе содержит обработчик
событий, поэтому может быть
реализован как
кнопка. Большинство разработчиков предпочитают привязать
обработчик событий, используя метод addEventListener( ),
а не свойство
onclick.
Свойства объекта onmouseover и onmouseout привязывают обработчики событий, которые будут выполняться
при перемещении указателя мыши на элемент, вызывая событие «mouseover», а при перемещении указателя мыши за пределы изображения — «mouseout».
Такие события обычно используются для создания эффекта от наведения курсора, например, для изменения
значения цвета свойства style.background на другое.
В качестве альтернативы имя события и имя функции обработчика событий можно указать в качестве
аргументов метода addEventListener( ). Такой метод используется аналогично методу addEventListener( ) объекта
window, чтобы привязать функцию по имени или указать в качестве второго аргумента.
Когда выполняется событие, объект event передается
встроенной функции обработчика событий. Существует свойство type, которое идентифицирует имя этого
события.
z
1
mouse.html
Создайте HTML-документ, содержащий два
абзаца и кнопку.
Target
Place Mouse Over Target
Click Me
z
2
z
3
4
z
5
( function ( ) {
const box = document.getElementById( 'box' )
const btn = document.getElementById( 'btn' )
// Здесь будет ваш код.
})()
Добавьте операторы, чтобы привязать обработчики событий, которые будут передавать
аргументы второй функции.
box.addEventListener( 'mouseover',
function ( event ) { reactTo( event, 'Red' ) } )
box.addEventListener( 'mouseout',
function ( event ) { reactTo( event, 'Purple' ) } )
box.addEventListener( 'mousedown',
function ( event ) { reactTo( event, 'Green' ) } )
box.addEventListener( 'mouseup',
function ( event ) { reactTo( event, 'Blue' ) } )
btn.addEventListener( 'click',
function ( event ) { reactTo( event, 'Orange' ) } )
Наконец, добавьте вторую функцию для отображения типа события. Затем измените
цвет фона первого абзаца.
function reactTo( event, color ) {
document.getElementById( 'box' ).style. background =
color
document.getElementById( 'info' ).innerText = event.
type
}
Сохраните HTML-документ и откройте его
в браузере. Проанализируйте полученные
результаты — события и реакции на них.
Во избежание
утечки памяти при
удалении объекта,
к которому привязаны обработчики
событий, следует
также удалить его
обработчики событий.
167
z
Создайте самовызывающуюся функцию.
Объявите и проинициализируйте две переменные.
Методы и свойства объекта document
168
Генерация событий
В дополнение к событиям мыши, описанным
на стр. 164–165, существует событие «mousemove»,
которое передает объект события в функциюобработчик со свойствами x и y, определяющими текущие координаты указателя мыши.
Значения Unicode
для общих символов такие же, как
в коде ASCII, где
значения строчных букв a—z равны 65–90, а значения прописных
букв A—Z равны
97–122.
Также существует событие «keydown», срабатывающее
при первом нажатии на клавишу, событие «keypress»,
срабатывающее, когда клавиша нажата, и событие
«keyup», срабатывающее при отпускании клавиши.
Каждое из них передает объект события в функциюобработчик со свойством type, которое идентифицирует
имя события, и свойством keyCode, в котором хранится
числовое значение последней нажатой клавиши.
Числовое значение атрибута — это его значение
Unicode, которое можно указать в качестве аргумента метода String.fromCharCode( ) для преобразования его
в символьное значение.
Обработчики событий могут быть привязаны с помощью свойств onmousemove, onkeydown, onkeypress
и onkeyup или указаны в качестве аргументов метода
addEventListener( ).
z
z
1
values.html
2
Создайте HTML-документ, содержащий пустой абзац.
Создайте самовызывающуюся функцию, которая привязывает обработчик для трех событий и передает аргумент события этой
функции.
(function ( ) {
document.addEventListener( 'keydown',
function ( event ){ reactTo( event ) } )
document.addEventListener( 'keyup',
function ( event ){ reactTo( event ) } )
document.addEventListener( 'mousemove',
function ( event ){ reactTo( event ) } )
})()
z
3
z
4
z
5
6
z
7
function reactTo( event ) {
const info = document.getElementById( 'info' )
// Здесь будет ваш код.
}
Затем добавьте операторы для отображения
значений координат текущего положения
указателя мыши.
if( event.type === 'mousemove ')
{
info.innerHTML =
'Mouse pointer is at X:' + event.x + ' Y:' + event.y
}
Добавьте операторы для отображения значения Unicode клавиши клавиатуры при ее нажатии.
if( event.type === 'keydown' )
{
info.innerHTML += '' + event.type
info.innerHTML += ': ' + event.keyCode
}
Наконец, добавьте операторы для отображения символа этой же клавиши клавиатуры
при ее отпускании.
if( event.type === 'keyup' )
{
info.innerHTML += '' + event.type + ': ' +
String.fromCharCode( event.keyCode ) + ''
}
Сохраните HTML-документ и откройте
его в браузере. Наведите указатель мыши
на окно и проанализируйте, как меняются
значения координат при перемещении указателя мыши.
События keydown
и keyup работают со всеми клавишами клавиатуры. Событие keypress
работает только с буквенноцифровыми клавишами.
169
z
В функции обработчика событий объявите
и проинициализируйте переменную.
Методы и свойства объекта document
Значения координат всегда привязаны к положению окна, даже
если обработчик
событий привязан
к объекту, отличному от объекта
document .
z
8
Нажмите любую клавишу на клавиатуре, чтобы увидеть ее значение Unicode.
170
Добавление
переключателей
Переключатели с зависимой фиксацией или «радиокнопки» представляют собой группы кнопок, из которых можно выбрать только одну. Атрибут name
должен иметь одно и то же значение. Имя группы
переключателей — это имя массива. Доступ к каждому переключателю осуществляется при использовании значения индекса массива.
В отличие от групп переключателей с зависимой фиксацией, группы независимых кнопок или «флажков»
позволяют пользователю выбрать один или несколько
вариантов. Однако, как и в случае с группами переключателей, каждый атрибут name имеет одно и то же
значение. В программном коде имя группы — это
имя массива, в котором доступ к каждой кнопке осуществляется с помощью значения индекса массива.
Переключатели, как и флажки, имеют свойство
checked, которое принимает значение true, если переключатель или флажок выбран. В противном случае свойство checked принимает значение false. Чтобы
проверить свойство checked или какие переключатели или флажки выбраны (отмечены), используется цикл по массиву переключателей или флажков.
Свойство checked принимает значение true, если переключатель или флажок выбран.
z
1
z
2
3
Select Pizza Toppings
Cheese
Ham
Peppers
Создайте самовызывающуюся функцию, которая назначает обработчик событий для события
отправки формы и проверяет один флажок.
(function ( ) {
const form = document.getElementById( 'pizza' )
form.addEventListener( 'submit',
function ( event ) { reactTo( form, event ) } )
form.Top[ 0 ].checked = true
}) ( )
checkbox.html
Если в группе отмечено несколько
флажков, их значения представляются в виде списка,
разделенного запятыми.
Создайте функцию обработчика событий.
Объявите и проинициализируйте три переменные и создайте цикл, чтобы определить
отмеченные флажки.
function reactTo( form, event ) {
let i, ok, summary = ''
for( i = 0; i < form.Top.length ; i++ )
{
if( form.Top[ i ].checked )
{
summary += form.Top[ i ].value + ' '
}
}
// Здесь будет ваш код.
}
При нажатии
кнопки генерируется действие
по умолчанию
для формы, которое заключается
в отправке данных
формы на веб-сервер. Вызов метода
preventDefault( ) останавливает их отправку.
171
z
Создайте HTML-документ, содержащий
форму с группой из трех флажков и кнопкой
отправки.
Методы и свойства объекта document
z
4
z
5
Добавьте операторы для подтверждения выбора и отправьте их на веб-сервер или отмените отправку.
ok = confirm( 'Submit These Choices?\n' + summary )
if( !ok ) { event.preventDefault( ) }
Сохраните HTML-документ на веб-сервере, затем откройте его в браузере. Cделайте
свой выбор и подтвердите отправку.
172
Этот пример запускается на локальном веб-сервере,
который поддерживает серверный скрипт PERL.
Он обрабатывает отправку формы
и предоставляет
ответ веб-браузеру.
JS
echo.pl
Добавление элементов
выбора
Параметры, представленные в объекте раскрывающегося HTML-списка , определены массивом
options[], в котором каждый элемент содержит параметр, указанный тегом HTML . После отправки на веб-сервер значение, присвоенное атрибуту name тега , и значение, присвоенное
атрибуту value тега , отправляются как пара
name=value.
Важно отметить, что объект списка выбора имеет
свойство selectedIndex, содержащее номер индекса выбранного элемента массива options[]. Этот номер также можно использовать для получения значения выбранного параметра.
При изменении пользователем выбранного параметра запускается событие «change». Свойство объекта списка onchange привязывает обработчик событий,
который выполняется при изменении выбранного
параметра. Как вариант, имя события и имя функции обработчика событий можно указать в качестве
аргументов метода addEventListener( ).
z
1
2
z
3
Rome
London
New York
ioptions.html
173
z
Создайте HTML-документ, содержащий список выбора, кнопку отправки и пустой абзац.
Создайте самовызывающуюся функцию, привяжите обработчик событий для отправки
формы и загрузки окна.
(function ( ) {
const list = document.getElementById( 'list' )
list.addEventListener( 'change',
function ( ) { reactTo( list, event ) } )
addEventListener( 'load',
function ( ) {reactTo( list, event ) } )
})()
Добавьте обработчик событий, который будет
отображать выбранное событие и текущий
список в абзаце.
function reactTo( list, event ) {
const info = document.getElementById( 'info' )
Обратите внимание, что атрибут
HTML selected осуществляет выбор
первого элемента
option, доступ к которому определен
как options[ 0 ].
Доступ к выбранной опции осуществляется следующим образом:
document.forms[ 0 ].
elements[ 0 ].options[ 1 ].
value.
z
4
}
Сохраните HTML-документ на веб-сервере
и откройте его в браузере. Затем выберите
вариант и отправьте форму.
174
Методы и свойства объекта document
let index = list.options.selectedIndex
let city = list.options[ index ].value
info.innerHTML = event.type + 'Selected: '
info.innerHTML += city + 'Index: ' + index
JS
echo.pl
Сброс формы
Обработчик событий может быть привязан к свойствам onfocus и onfocusout. Событие «focus» запускается, когда пользователь выбирает текстовое поле,
а событие «focusout» активируется при покидании
этого текстового поля.
Обработчик событий может быть привязан к свойству onreset. Событие onreset происходит при сбросе
формы.
Как и в случае с другими объектами, имя события и имя
функции обработчика событий указывается в качестве
аргументов для текстового поля и метода объекта формы addEventListener( ).
z
1
Создайте HTML-документ, содержащий
форму с текстовым полем, кнопкой сброса
и пустым абзацем.
z
2
Создайте самовызывающуюся функцию, привяжите обработчик для событий текстового поля «focus» и «focusout», события формы
«reset» и события окна «load».
lang.addEventListener( 'focus',
function ( event ) { reactTo( event, info ) } )
lang.addEventListener( 'focusout',
function ( event ) { reactTo( event, info ) } )
form.addEventListener( 'reset',
function ( ) { defaultMessage( info ) } )
addEventListener( 'load',
function ( ) { defaultMessage( info ) } )
})()
3
Чтобы отобразить тип события, привяжите обработчик для событий текстового поля
«focus» и «focusout».
function reactTo( event, info ) {
info.innerHTML = event.type
}
Текстовые поля
также имеют свойство onselect, которому может
быть привязан обработчик событий
для ответа на событие «select»,
срабатывающее,
когда пользователь
выбирает фрагмент текста.
175
(function ( ) {
const form = document.getElementById( 'code' )
const lang = document.getElementById( 'lang' )
const info = document.getElementById( 'info' )
z
reset..html
Методы и свойства объекта document
176
z
4
z
5
z
6
z
7
Для вывода сообщения привяжите событиям загрузки окна и сброса формы следующий
обработчик событий.
function defaultMessage( info ) {
info.innerHTML =
'Please enter your favorite coding language'
}
Сохраните HTML-документ, затем откройте его в браузере. Проанализируйте результат — полученное сообщение.
Выберите текстовое поле и проанализируйте, как сработает событие «focus». Затем введите название вашего любимого языка программирования.
Нажмите клавишу Tab, чтобы переместить
фокус на кнопку Reset (Сброс). Проанализируйте, как сработает событие «focusout».
z
8
Нажмите клавишу Enter (нажмется кнопка Reset (Сброс)), чтобы очистить текстовое
поле и снова увидеть полученное сообщение.
Проверка и отправка
формы
Самый простой уровень проверки формы заключается в проверке наличия текста в поле ввода, чтобы
убедиться в том, что пользователь действительно его
ввел. Если значение равно пустой строке, то есть запись не производилась, функция проверки вызовет
метод event.preventDefault( ), чтобы предотвратить отправку формы.
Более высокий уровень проверки формы заключается в проверке введенной пользователем строки,
чтобы убедиться в том, что она соответствует требованиям. Например, при необходимости ввода адреса электронной почты строка должна содержать символ “@" и как минимум один символ “.". Если хотя бы
один из них отсутствует, строка не будет соответствовать допустимому формату адреса электронной
почты, поэтому функция проверки предотвратит отправку формы.
Доступ к элементу формы осуществляется с помощью указания значения атрибута name в скобках массива elements[].
177
При отправке формы срабатывает событие onsubmit.
В качестве альтернативы имя события «submit»
и имя функции обработчика событий указываются как
аргументы метода addEventListener( ) объекта формы.
Методы и свойства объекта document
z
1
validate.html
z
178
2
z
3
Метод indexOf( ) возвращает индекс
первого вхождения указанного
значения в строковый объект или
значение –1, если
символ не найден. Более подробную информацию можно найти
на стр. 119.
z
4
Создайте HTML-документ, содержащий
форму с двумя текстовыми полями и кнопкой отправки.
Please Enter Your Details
Name:
Email:
Создайте самовызывающуюся функцию. Для
события отправки формы определите следующий обработчик событий.
( function ( ) {
const form = document.getElementById( 'contact' )
form.addEventListener( 'submit' ,
function ( event ) { validate( form, event ) } )
})()
Для проверки введенного текста добавьте обработчик событий.
function validate( form, event ) {
let value = form.elements[ 'Name' ].value
if( value === '' ) {
alert( 'Please Enter Your Name' )
event.preventDefault( ) ; return }
value = form.elements[ 'Email' ].value
if( ( value === '' ) || ( value.indexOf( '@' ) === -1 ) ||
( value.indexOf('.') === -1 ) ) {
alert( 'Please Enter A Valid Email Address' )
event.preventDefault( ) }
}
Сохраните HTML-документ на веб-сервере,
затем откройте его в браузере. Введите свои
данные и отправьте форму.
179
JS
Заключение
zОбъект document содержит следующие свойства, описывающие документ: title, URL, domain,
и referrer.
lastModified
zОбъект document содержит дочерние объекты forms, images, links, styleSheets и scripts. Каждый
из них представляет собой массив компонентов
документа.
echo.pl
Методы и свойства объекта document
zМассив forms — это коллекция HTML со списком всех элементов , содержащихся в текущем документе.
zМетоды getElementById( ), getElementsByTagName( )
и getElementsByClassName( ) позволяют ссылаться
на компоненты HTML-документа.
zСвойства innerHTML и innerText используются для
записи содержимого в существующие элементы.
zМетоды createElement( ), appendChild( ) и setAttribute( )
позволяют добавлять содержимое в документ.
zСвойство cookie содержит пары «key=value»
(атрибут=значение), которые могут хранить небольшой объем данных в системе пользователя.
zФункции encodeURI( ), decodeURI( ), toUTCString( )
и split( ) используются для обработки строк с данными cookie.
zDOM позволяет JavaScript реагировать на такие
180
события, как load, click, keydown, change и submit.
zФункции обработчика событий могут быть привязаны к свойству объекта или определены методом addEventListener( ).
zОбъект event передается в обработчик событий,
а событие идентифицируется по его свойству
event.type.
zСобытие «mousemove» передает объект события
в функцию-обработчик со свойствами x и y, определяющими текущие координаты указателя мыши.
zПереключатели и флажки имеют свойство
checked, которое принимает значение true, если
переключатель или флажок выбран.
zОбъект списка выбора имеет свойство
selectedIndex,
содержащее номер индекса выбранного элемента массива options[].
zПри нажатии кнопки генерируется действие
по умолчанию для формы, которое заключается
в отправке данных формы на веб-сервер. Вызов
метода preventDefault( ) останавливает их отправку.
8
Разработка
веб-приложений
В этой главе вы узнаете, как
создавать веб-приложение,
которое извлекает данные
из онлайн-ресурса.
180
Введение в JSON
182
Промисы
185
Получение данных
187
Разработка интерфейса
190
Заполнение ячеек
в таблице
192
Заполненная таблица
194
Обновление приложений
197
Заключение
Разработка веб-приложений
Введение в JSON
JSON (Нотация объектов JavaScript) — это популярный текстовый формат для хранения и транспортировки данных. Это подмножество JavaScript. Данные
JSON записываются в виде пар key: value (атрибут: значение), разделенных запятыми. Все атрибуты должны иметь тип данных String и заключены
в двойные кавычки. Связанные с этими атрибутами значения должны принадлежать только к одному
из следующих типов данных:
zString (строка) — строки в JSON должны быть
заключены в двойные кавычки.
zNumber (число) — целое число или число
с плавающей запятой.
z Object (объект) — объект JSON.
182
z Array (массив) — массив.
z Boolean (логическое значение) — true (истина)
или false (ложь).
z null — значение null.
Пары key: value (атрибут: значение) должны быть заключены в фигурные скобки, например:
{“name":"Alice","age":21,"city":"New York"}
Также можно легко преобразовать объект JavaScript
в объект JSON, указав его в качестве аргумента метода JSON.stringify( ). И наоборот, можно преобразовать
объект JSON в объект JavaScript, указав его в качестве аргумента метода JSON.parse( ).
Бесплатный валидатор объектов
JSON вы можете найти на сайте
jsonlint.com.
Обычно объекты JSON хранят данные как онлайнресурс в текстовом файле с расширением файла.json.
Следовательно, с веб-сервера сценарий веб-страницы получает данные в формате JSON.
Метод JSON.parse( ) используется для преобразования
объекта JSON в объект JavaScript. Доступ к данным
осуществляется с использованием точечной нотации
или с помощью скобок.
Как JSON, так и XML (расширяемый язык разметки) можно использовать для получения данных
с веб-сервера. Однако предпочтительнее обратиться
к JSON, поскольку вам необходимо перебирать элементы для извлечения данных из формата XML, тогда как метод JSON.parse( ) просто возвращает строку
всех данных.
Важной особенностью считается, что JavaScript извлекает данные из онлайн-ресурсов JSON для использования в веб-приложениях.
z
1
2
z
3
z
4
let obj = { category : 'Fashion',
models : [ { name : 'Alice', age : 21, city : 'New York' } ,
{ name : 'Kelly', age : 23, city : 'Las Vegas' } ] }
Создайте объект JSON и распечатайте его.
let json_obj = JSON.stringify( obj )
console.log( json_obj )
Для сравнения создайте объект JavaScript
и распечатайте его.
let new_obj = JSON.parse( json_obj )
console.log( new_obj )
Наконец, распечатайте выбранные значения,
используя точечную нотацию и квадратные
скобки.
console.log( new_obj[ 'category' ] )
console.log( new_obj.models[ 0 ].name )
console.log( new_obj[ 'models' ][ 1 ][ 'name' ] )
json.html
183
z
Создайте самовызывающуюся функцию, которая создает объект JavaScript, содержащий
строку и массив.
5
Все значения String
объекта JSON заключены в двойные кавычки!
Сохраните HTML-документ, затем откройте
его в веб-браузере. Запустите консоль, чтобы проанализировать сравниваемые объекты.
Для этого выберите пункт Developer Tools
(Инструменты разработчика) => Console
(Консоль).
184
Разработка веб-приложений
z
Промисы
JavaScript — это однопоточный «синхронный» язык.
Значит, в любой момент времени может выполняться только одна операция. По мере выполнения сценария каждая операция добавляется в «стек вызовов», выполняется (в порядке сверху вниз), а затем
удаляется из стека.
Веб-браузеры
имеют несколько
API, включая Fetch
API, который предоставляет интерфейс для получения ресурсов
по сети.
Также существуют функции, которые обрабатываются
API браузера («Интерфейс прикладного программирования»), а не движком JavaScript. Например, метод
setTimeout( ) обрабатывается браузером, поэтому другие операции выполняются после завершения работы
таймера. Когда таймер заканчивает работу, он передает операцию в «очередь обратных вызовов», а затем
(когда она достигает начала очереди) выполняется.
Этот процесс контролируется «циклом с ожиданием
события», который постоянно отслеживает состояние
стека вызовов и очереди обратных вызовов.
Цикл
с ожиданием
события
API
браузера
Стек вызовов
Очередь обратных вызовов
В JavaScript объект Promise (промис) представляет
окончательное завершение или сбой асинхронной
операции и ее результирующее значение. Первый
аргумент (resolve) вызывает успешное исполнение
промиса, второй (reject) отклоняет его.
Каждый объект Promise содержит методы then( )
и catch( ), которые можно применять, используя точечную запись. Метод then( ) обрабатывает результирующее значение синхронной операции, а метод
catch( ) обрабатывает ошибки, если они отклонены.
z
1
Вы можете связать с промисом
несколько вызовов метода then( ),
но только один
из них вызовет
успешное исполнение.
Создайте самовызывающуюся функцию, которая создает объект Promise и будет выполнять одну из двух функций с задержкой
в одну секунду.
json.html
const promise = new Promise( function( resolve, reject )
{
let random = Math.round(Math.random( ) * 10 )
if ( random % 2 === 0 )
{ setTimeout( function( ) { resolve( random ) }, 1000 ) }
else
{ setTimeout( function( ) { reject ( random ) }, 1000 ) }
})
185
Объект Promise создается при помощи ключевого
слова new и конструктора Promise( ). В качестве аргумента он принимает функцию с двумя аргументами,
которые вызывают успешное выполнение промиса
либо отклоняют его.
Разработка веб-приложений
z
2
z
186
3
Обратите внимание, как консоль
предоставляет номер строки промиса и функции,
обработавшей результат.
Добавьте оператор с методами, отображающими состояние промиса и возвращенные
значения.
promise
.then(console.log( promise ) )
.then(function( res ) { console.log( res + ' Is Even' ) } )
.catch(function( err ) { console.log( err + ' Is Odd' ) } )
Сохраните HTML-документ, затем откройте его в браузере. Запустите консоль, чтобы проанализировать выполнение асинхронных операций. Для этого выберите пункт
Developer Tools (Инструменты разработчика) => Console (Консоль).
Получение данных
Веб-браузеры поддерживают Fetch API, которые предоставляют интерфейс для получения ресурсов по сети.
Метод fetch( ) принимает единственный аргумент —
URL-адрес ресурса, который вам необходимо получить.
Метод fetch( ) асинхронный, поэтому другие операции могут выполняться в ожидании получения ресурса. По завершении он возвращает объект Promise,
содержащий ответ (объект HTTPResponse).
Как правило, метод fetch( ) получает ресурс JSON,
и проанализировать его можно с помощью метода json( ) объекта HTTPResponse. Затем возвращенные данные JSON передаются в качестве аргумента
следующему связанному методу промиса, который,
в свою очередь, передает данные JSON в функциюобработчик. Процесс выглядит следующим образом:
Стрелочные функции
Стрелочные функции представляют собой сокращенную версию обычных функций. Они образуются с помощью знака =>. Это позволяет опустить ключевое слово функции, например:
.then( ( response ) => { return response.json( ) } )
Если тело функции содержит только один оператор,
и этот оператор возвращает значение, вы также можете опустить фигурные скобки и ключевое слово
return, например:
.then( ( response ) => response.json( ) )
Параметры могут отображаться в виде списка, разделенного запятыми и заключенного в круглые скобки ( ). Если функция принимает один параметр,
то скобки вокруг него можно опустить, например:
В стрелочных
функциях ключевое слово this
представляет
объект в исходном контексте,
тогда как в обычных ключевое слово this представляет объект, который
вызывает функцию.
Обратите внимание, что стрелочные функции обрабатывают ключевое слово this иначе, чем обычные.
JSON
{}
z
1
Откройте текстовый редактор, например,
в Windows приложение Notepad (Блокнот).
Создайте документ JSON с объектом, содержащим пять пар key: value (атрибут: значение).
weekdays.json
188
z
z
2
Сохраните документ JSON на веб-сервере в папке «htdocs», чтобы он был доступен
по сети.
3
Создайте асинхронный HTTP-запрос, создав
промис, разрешенный посредством получения данных JSON.
Создайте функцию для распечатки данных.
function list( data ) {
const values = Object.values( data )
let i = 0
while( i < values.length ) { console.log( values[ i ] ); i++ }
}
Сохраните HTML-документ и документ JSON. Затем через HTTP откройте веб-страницу и запустите консоль, чтобы
просмотреть полученные данные. Для этого выберите пункт Developer Tools (Инструменты разработчика) => Console (Консоль).
Разработка интерфейса
Теперь приступим к созданию веб-приложения, которое
позволит динамически обновлять данные на веб-странице без ее перезагрузки. Интерфейсом предусмотрена форма ввода и таблица с несколькими пустыми
ячейками. Некоторые ячейки изначально заполняются данными JSON, а другие вычисляются.
1
Создайте HTML-документ с таблицей в основном разделе документа.
Последние комментарии
4 часов 28 минут назад
7 часов 16 минут назад
1 день 17 часов назад
2 дней 2 часов назад
2 дней 7 часов назад
2 дней 9 часов назад