JavaScript. 20 уроков для начинающих

Урок 2. Выражения и управляющие конструкции 49

2.10. Как набирать JavaScript-код?

Каждое выражение JavaScript обычно записывается на отдельной строке:

const ins = window.prompt('Величина в дюймах', 0);
const cents = ins * 2.54;
window.document.write('<p>', cents, '</p>');

Короткие выражения можно записать в одну строку:

let sum, count; const convert = 2.54;

Между отдельными значениями, именами переменных, операторами, ключевыми
словами и прочими языковыми конструкциями обычно ставятся необязательные
пробелы — так код лучше читается:

const cents = ins * 2.54;

Но их можно не ставить — ради компактности:

const cents=ins*2.54;

Так часто удается значительно уменьшить объем кода.
Вложенность выражений в блоки и другие более сложные выражения отмечается
отступами слева (обычно в 4 пробела):

if (ins != null)
cents = ins * 2.54;

for (i = 1; i <= 10; ++i) {
window.document.write('<tr><td>', i, '</td>');
window.document.write( . . . );

}

Слишком длинные выражения можно переносить по строкам, разрывая строки
в промежутках между языковыми конструкциями. Строки, на которых находятся
оставшиеся части выражения, часто выделяются увеличенными отступами слева:

window.document.write('<td><strong><em>', Math.sqrt(i),
'</em></strong></td></tr>');

2.11. Самостоятельные упражнения

Доработайте сценарий, переводящий величины из дюймов в сантиметры, таким
образом, чтобы он выводил результат в двух абзацах: в первом — величину
в дюймах, а во втором — в сантиметрах.

Дополните выводимую величину в дюймах обозначением единицы измерения:
«дюйм», «дюйма» или «дюймов». Для округления числа используйте языковую
конструкцию Math.floor(<число>), а для выбора нужного обозначения единицы
измерения — выражение выбора. Заодно дополните вывод в сантиметрах обо-
значением единицы измерения — «см.».

У вас должно получиться так (рис. 2.6).

50 Часть I. Начала JavaScript

Рис. 2.6. Ожидаемый результат доработки сценария

Напишите страницу 2.9.1.html с веб-сценарием, который выведет квадратные
корни от чисел 10, 20 . . . 200. Используйте для этого цикл со счетчиком.
Напишите страницу 2.9.2.html со сценарием, который будет запрашивать в цикле
числа, суммировать их, а при вводе числа 0 — выводить на экран среднее ариф-
метическое введенных чисел.

Предметный указатель

$ B

$_FILES 296 beforeprint 110, 187
$_GET 293 beforeunload 110, 187
$_POST 296 beginPath 227
$_SERVER 290 bezierCurveTo 232
blur 156, 157, 186, 187
A body 123
BOM 185
abort 151, 209 Boolean 67
abs 80 bottom 130
acos 81 break 42, 47
acosh 81 bubbles 118
activeElement 124 button 114
add 136, 156
addColorStop 233 C
addEventListener 106, 116
afterprint 110, 187 call 256
AJAX 271 cancellable 121
alert 192 canplay 150
altKey 114, 115 canplaythrough 150
animationend 110, 115 CanvasGradient 233
AnimationEvent 115 CanvasPattern 236
animationiteration 110, 115 CanvasRenderingContext2D 221
animationName 115 cbrt 80
animationstart 110, 115 ceil 80
append 310 change 157
appendChild 142 characterSet 144
apply 254 charAt 70
arc 230 charCode 114
arcTo 230 charCodeAt 71
Arguments 82 checked 156
Array 71 checkValidity 166
asin 81 childElementCount 126
asinh 81 children 126
assign 191 classList 136
atan 81 className 136
atan2 81 clear 212
atanh 81 clearData 214
autocomplete 155, 164 clearInterval 200
availHeight 192 clearRect 222
availWidth 192 clearTimeout 202
click 109

344 Предметный указатель

clientHeight 128 delete 85
clientWidth 128 deltaMode 114
clientX 114 deltaX 114
clientY 114 deltaY 114
clip 240 dirname 290
ClipboardEvent 115 document 123
close 320 DOM 104
closedir 292 domain 144
closePath 228 DOMRect 130
colorDepth 192 DOMTokenList 136
complete 147 drag 213
concat 76 Drag’n’drop 213
confirm 192 dragend 216
Console 89, 90 dragenter 215
const 27, 41 DragEvent 213
constructor 254 dragleave 215
contains 126, 137 dragover 215
contextmenu 109 dragstart 213
continue 47 drawImage 238
copy 109 drop 216
cos 81 dropEffect 215
cosh 81 duration 148
create 254 durationchange 150
createElement 141
createLinearGradient 233 E
createPattern 236
createRadialGradient 235 E 80
createTextNode 141 echo 288
CSSStyleDeclaration 137 effectAllowed 214
ctrlKey 114, 115 elapsedTime 115
currentSrc 149 elements 164
currentTarget 113 empty 299
currentTime 148 encodeURIComponent 310
customError 168 ended 149, 150
cut 157 endsWith 69
error 147, 209, 210, 319
D eval 61
EvalError 98
data 319 Event 113
Data URL 210 eventPhase 118
dataTransfer 213 EventSource 318
DataTransfer 213 every 74
date 287 exec 178, 179
Date 78 exit 299
dblclick 109 exp 81
defaultChecked 156
defaultMuted 149 F
defaultPlaybackRate 149
defaultPrevented 121 fclose 299
defaultSelected 156 File 207
defaultValue 155 file_exists 295
defineProperty 251, 252 file_get_contents 295

Предметный указатель 345

FileList 207 H
FileReader 208, 210
files 156, 207, 219 hash 191
fill 76, 227, 228 hashchange 110, 115, 187
fillRect 222 HashChangeEvent 115
fillStyle 223, 234 head 123
fillText 224 header 299
filter 74 height 130, 192, 221
find 74 host 190
findIndex 74 hostname 191
firstElementChild 126 href 190
floor 80 HTML API 199, 200
flush 318 HTMLAudioElement 148
focus 156, 157, 186, 187 HTMLBodyElement 123
FocusEvent 157 HTMLCanvasElement 221
focusin 157 HTMLCollection 124
focusout 157 HTMLDocument 123
font 224 HTMLElement 125
fopen 299 HTMLFormElement 164
forEach 74 HTMLHeadElement 123
form 155 HTMLImageElement 147
FormData 309 HTMLInputElement 166, 167
forms 124 HTMLVideoElement 148
fromCharCode 71
Function 67 I
fwrite 299
ignoreCase 181
G images 123
in 86
getBoundingClientRect 130 includes 69, 73
getContext 221 index 156
getData 216 indexOf 70, 73
getdate 288 Infinity 22
getDate 79 innerHeight 185
getDay 79 innerHTML 137
getElementById 124 innerText 129, 138
getElementsByClassName 124 innerWidth 185
getElementsByName 124 input 157
getElementsByTagName 124 insertAdjacentElement 142
getFullYear 79 insertAdjacentHTML 138
getHours 79 insertAdjacentText 139
getItem 212 insertBefore 142
getLineDash 230 instanceof 86
getMilliseconds 79 invalid 157
getMinutes 79 isArray 72
getMonth 79 isEqualNode 130
getSeconds 79 isFinite 61
GET-параметр 293 isInteger 67
global 181 isNaN 61
globalAlpha 239 isSameNode 130
globalCompositeOperation 239 isset 297

346 Предметный указатель

J message 98, 203, 319
min 80
join 76 MIN_VALUE 68
JSON 276, 277 mousedown 109
json_encode 303 mouseenter 109
MouseEvent 113
K mouseleave 109
mousemove 109
key 115 mouseout 109
KeyboardEvent 114 mouseover 109
keydown 109 mouseup 109
keypress 109 move_uploaded_file 298
keyup 109 moveTo 227
multiline 181
L muted 148

lastElementChild 126 N
lastEventId 320
lastIndex 179 name 97, 207
lastIndexOf 70, 73 NaN 22
lastModified 144 naturalHeight 147
lastModifiedDate 207 naturalWidth 147
left 130 networkState 149
length 69, 71, 82, 156, 164 new 78
lengthComputable 209 newURL 115
let 25, 27, 41 nextElementSibling 126
lineCap 229 NodeList 124
lineJoin 229 null 83
lineTo 228 Number 67
lineWidth 229
links 124 O
LN10 80
LN2 80 Object 82
load 110, 147, 149, 186, 208, 209 offsetHeight 129
loaded 209 offsetLeft 128
loadeddata 150 offsetParent 128
loadedmetadata 150 offsetTop 128
loadend 209 offsetWidth 128
loadstart 150, 209 offsetX 114
localeCompare 77 offsetY 114
localStorage 212 oldURL 115
Location 190 open 272, 319
log 81, 89 opendir 291
LOG2E 80 options 156
origin 190
M outerHeight 185
outerWidth 185
map 75
match 179, 180 P
Math 80
max 80 pagehide 110, 115, 187
MAX_VALUE 68 pageshow 110, 115, 186
measureText 224

Предметный указатель 347

PageTransitionEvent 115 readdir 291
pageX 113 readyState 149, 209, 273, 319
pageXOffset 186 readystatechange 272
pageY 114 rect 232
pageYOffset 186 reduce 75
parentElement 126 reduceRight 75
parse 277 ReferenceError 97
parseFloat 61 referrer 144
parseInt 61 RegExp 171
paste 157 relatedRatget 114
pathinfo 294 relatedTarget 157
pathname 191 reload 191
patternMismatch 168 remove 136, 156
pause 150 removeChild 143
paused 149 removeEventListener 108, 117
persisted 115 removeItem 212
PHP 286 replace 71, 180, 191
PI 80 replaceChild 143
play 150 reset 164
playbackRate 148 resize 110, 187
playing 150 responseText 273
pop 72 restore 240
port 191 result 208, 209, 210
postMessage 203 return 52
POST-параметр 296 reverse 77
pow 81 right 130
preventDefault 120 rotate 238
previousElementSibling 126 round 80
print 186
progress 150, 209, 210 S
ProgressEvent 209, 210
prompt 192 save 240
propertyName 115 scale 237
protocol 190 screen 191
prototype 247 Screen 191
push 72 screenLeft 185
screenTop 186
Q screenX 114, 186
screenY 114, 186
quadraticCurveTo 231 scripts 124
querySelector 125 scroll 110, 187
querySelectorAll 125 scrollBy 186
scrollHeight 129
R scrollIntoView 130
scrollLeft 129
random 81 scrollTo 186
RangeError 98 scrollTop 129
rangeOverflow 168 scrollWidth 129
rangeUnderflow 167 scrollX 186
ratechange 150 scrollY 186
readAsDataURL 210 search 173, 191
readAsText 208 seeked 150

348 Предметный указатель

seeking 149, 150 strokeStyle 223, 234
select 156, 157 strokeText 224
selected 156 style 137
selectedIndex 156 submit 164
selectionEnd 155 substr 70
selectionStart 155 substring 70
send 273, 309 suspend 150
sessionStorage 212 SyntaxError 97
setCustomValidity 165
setData 213 T
setDate 79
setFullYear 79 tagName 129
setHours 79 tan 81
setInterval 200 tanh 81
setItem 212 target 113
setLineDash 229 terminate 204
setMilliseconds 79 test 173
setMinutes 79 Text 141, 156
setMonth 79 textAlign 224
setRequestHeader 311 textBaseline 224
setSeconds 79 textContent 129, 138
setTimeout 201 TextMetrics 224
shadowBlur 223 this 106, 107, 245
shadowColor 223 throw 98
shadowOffsetX 223 time 287
shadowOffsetY 223 timeupdate 150
shift 72 title 144
shiftKey 114, 115 toExponential 68
sin 80 toFixed 68
sinh 81 toggle 136
size 207 toLocaleDateString 79
slice 76 toLocaleLowerCase 69
some 74 toLocaleString 79
sort 76 toLocaleTimeString 79
source 181 toLocaleUpperCase 69
splice 72 toLowerCase 69
split 71, 181 tooLong 167
sqrt 80 top 130
SQRT1_2 80 toPrecision 68
SQRT2 80 toString 67
stalled 151 total 209
startsWith 69 toUpperCase 69
status 273 transitionend 109, 115
statusText 273 TransitionEvent 115
stepDown 156 translate 237
stepMismatch 168 trim 69
stepUp 156 trunc 80
stopPropagation 118 type 113, 207
Storage 212 TypeError 97
String 69 typeMismatch 167
stroke 227 typeof 29
strokeRect 222

Предметный указатель 349

U W

undefined 29 waiting 150
unlink 300 wheel 109, 114
unshift 72 WheelEvent 114
URIError 98 which 114, 115
URL 144 width 130, 192, 221, 224
willValidate 167
V Window 123, 185
Worker 202
valid 167 write 139
validationMessage 166 writeln 139
validity 167
ValidityState 167 X
value 155
valueMissing 167 x 130
var 27, 41 XAMPP 329
videoHeight 148 ◊ панель управления 334
videoWidth 148 XML 271
volume 148 XMLHttpRequest 272
volumechange 150
Y
А
y 130
Атрибут тега
◊ draggable 213 Веб-приложение
◊ height 221 ◊ клиентское 160
◊ id 104 ◊ серверное 160, 285
◊ pattern 182 Веб-сайт: сверхдинамический 274
◊ script 35 Веб-служба 302
◊ src 60 Веб-страница
◊ width 221 ◊ по умолчанию 292
◊ серверная 289
Б Веб-сценарий 35
◊ внешний 60
Библиотека 60 ◊ внутренний 35
Блок 40 Возврат результата 20
Бэкенд 302 Возобновление 95
Временна´я отметка 78
В ◊ в стиле UNIX 287
Выражение 35
Валидация 165 ◊ блочное 40
Вариант 175 ◊ выбора 41
◊ условное 38
◊ условное в сокращенной форме 39
◊ условное множественное 39
Выход из функции 94

350 Предметный указатель

Г Конкатенация 23
Консоль 17, 89
Геттер 251 Константа 27
Градиент 233 Конструктор 245
◊ линейный 233 Контекст исполнения 127
◊ радиальный 235 Кривая Безье 231
Графическая закраска 236 ◊ квадратическая 231
Графический контекст 221 ◊ кубическая 231
Группа 177
Л
Д
Лайтбокс 258
Декремент 28 Литерал
◊ регулярного выражения 171
Ж ◊ строковый 22, 287
Лог 336
Журнал 336 Логическое
◊ И 24
З ◊ ИЛИ 24, 56
◊ НЕ 24
Заголовок 299 ◊ отрицание 24
Замыкание 266 ◊ сложение 24, 56
Застревание в кеше 338 ◊ умножение 24

И М

Имя Маршрутизация 309
◊ класса 66 Маска 240
◊ переменной 24, 287 Массив 61
◊ события 105 ◊ ассоциативный 288
◊ функции 51 ◊ вложенный 63
Индекс 61 ◊ внешний 63
Инициализация 261 ◊ размер 61
Инкремент 28 ◊ элемент 61
Инспектор DOM 95 Межпоточное сообщение 203
Исключение 96 Метасимвол 173
◊ обработка 97 Метод 66
◊ обработчик 97 ◊ переопределение 255
◊ статический 67, 257
К Модификатор 171

Квантификатор 175 Н
Кеш 338
Класс 66 Наследование 83, 253
◊ базовый 83 Нулевая ссылка 83
◊ производный 83
Ключ 288 О
Ключевая точка 233
Коллекция 82 Обработчик события 105, 107, 139
Комментарий 48 ◊ по умолчанию 119
Компонент 261 ◊ привязка 106, 108
◊ невидимый 280 ◊ удаление 108

Предметный указатель 351

Обратная ссылка 177 Поиск
Объект 65 ◊ без учета регистра 172
◊ служебный 82 ◊ глобальный 179
◊ текущий 66 ◊ жадный режим 176
Объектная нотация 82 ◊ многострочный 180
Окружность ◊ обычный 178
◊ конечная 235 ◊ щедрый режим 177
◊ начальная 235 Поток 202
Операнд 20 ◊ основной 202
Оператор 20 ◊ фоновый 202
◊ арифметический 21, 28 Преобразование 237
◊ бинарный 21 ◊ типов 30
◊ возврата результата 52 Приоритет оператора 21
◊ вывода 288 Присваивание 25
◊ вызова функции 53 Прототип 246
◊ генерирования исключения 98 Прохождение 116
◊ доступа к элементу массива 62, 66, 70, 82
◊ доступа к элементу объекта 65 Р
◊ комбинированного присваивания 26
◊ конкатенации строк 23, 289 Регулярное выражение 171
◊ логический 24 Рекурсия 57
◊ объявления переменных 25, 27 ◊ бесконечная 58
◊ получения типа 29
◊ прерывания 42, 47 С

прохода 47 Свойство 65, 252
◊ принадлежности классу 86 ◊ динамическое 251, 252
◊ присваивания 25 ◊ добавленное 85
◊ проверки существования свойства 86 ◊ статическое 68, 256
◊ создания объекта 78 Серверное сообщение 317
◊ сравнения 23 Сеттер 251
◊ тернарный 28 Слайдер 103
◊ удаления свойства 85 Событие 105
◊ унарный 21, 28 ◊ всплывающее 116
◊ условный 28 ◊ источник 113
Отладчик 90 ◊ невсплывающее 117
Состояние холста 240
П Стек вызовов 58
Строгий режим 48
Параметр функции 51 Строка 20, 22
◊ необязательный 55 Суперкласс 83
Переменная 24
◊ глобальная 54 Т
◊ локальная 54
◊ обращение 26 Таймер
◊ объявление 25, 27, 41, 287 ◊ однократный 201
Перетаскивание 213 ◊ периодический 199
◊ источник 213 Тег
◊ приемник 213 ◊ ?php 287
Перо 227 ◊ canvas 221
Подквантификатор 177 ◊ script 35
Подкласс 83
Поднабор 174

352 Предметный указатель

Тип данных 20 Хранилище 212
◊ значащий 84 ◊ постоянное 212
◊ логический 20 ◊ сессионное 212
◊ неопределенный 29
◊ объектный 63, 83 Ц
◊ ссылочный 84
◊ строковый 20 Цикл 43
◊ функциональный 60 ◊ итерация 43
◊ числовой 20 ◊ по свойствам 87
Точка останова 90, 92, 95 ◊ проход 43
Трассировка 90 ◊ с постусловием 47
◊ с предусловием 46
У ◊ со счетчиком 43
◊ счетчик 43, 46
Унарный минус 28 ◊ условный 43
Условие 23
Ч
Ф
Число 20
Фаза 116 ◊ вещественное 20
◊ всплытия 116 ◊ с плавающей точкой 20
◊ источника 115, 116
◊ погружения 116 Ш
Файл веб-сценария 60
◊ привязка 60 Шаг
Фреймворк 325 ◊ с заходом 93
Фронтенд 301 ◊ с обходом 94
Функция 51
◊ анонимная 58 Э
◊ вложенная 54
◊ встроенная 61 Элемент веб-страницы: базовый 261
◊ вызов 52, 53
◊ именованная 58 Я
◊ объявление 51
◊ стрелка 59, 107 Якорь 104

Х

Хеш 288
Холст 221