ВУЗ: Не указан

Категория: Реферат

Дисциплина: Не указана

Добавлен: 16.03.2024

Просмотров: 144

Скачиваний: 0

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

СОДЕРЖАНИЕ

Логические операторыВ JavaScript существуют три логических оператора.ОператорОписание&&Логическое И||Логическое ИЛИ!Логическое НЕЛогические операторы обычно используются вместе с операндами, имеющими логическое значение true или false, или значениями, которые могут быть в них преобразованы.Оператор логическое И && будет оценивать два опе- ранда и возвращать значение true, если оба операнда истинны, а иначе — false. Это часто используется при условном ветвлении, когда необходимо выполнить раз- личные действия в зависимости от условий.В отличие от логического оператора &&, которому необ- ходимо, чтобы оба операнда были истинными, опера- тор логическое ИЛИ || находит первое истинное зна- чение и возвращает значение true, а иначе — false. Это полезно для выполнения сценариев определенного действия в зависимости от условий.Третий логический оператор — это оператор логиче- ского НЕ!, который сначала приводит аргумент к ло- гическому типу true/false, а затем возвращает проти- воположное значение. Например, если переменная с именем «tog» имеет значение true, то !tog вернет в результате значение false. Это полезно для инвер- тирования значения переменной в последовательных итерациях цикла, например tog=!a. А при каждой ите- рации значение будет меняться на противоположное. Например, включение и выключение светового пе- реключателя.Термин «булев» от- носится к систе- ме логического мышления, разра- ботанной англий- ским математиком Джорджем Булем (1815–1864). 43z1 Создайте HTML-документ с самовызыва- ющейся анонимной функцией, объявите и проинициализируйте три переменные.( function ( ) {let result, yes =true, no =false // Здесь будет ваш код.} ) ( )z2 Добавьте операторы, использующие логиче- ские операторы, и выведите результат.result = yes && yes console.log( 'Are both true? ' + result )result = yes && no console.log( 'Are both still true? ' + result )result = yes || no console.log( 'Are either true? ' + result )result = no || no console.log( 'Are either still true? ' + result )console.log( 'Original value: ' + yes )yes =!yes console.log( 'Toggled value: ' + yes )z3 Сохраните HTML-документ, затем открой- те его в браузере и запустите консоль. Проа- нализируйте вывод — результат выполнения логических операторов.logic.htmlОбратите внима- ние, что выраже- ние false&&false воз- вращает значение false, а не true, как может показаться, действуя по прин- ципу «два заблу- ждения — еще не правда». 44Распространенные операцииУсловный (тернарный) операторВозможно, наиболее полюбившийся оператор созда- теля JavaScript — это условный оператор?:. Он так-же известен как тернарный, то есть состоящий из трех операндов.Первый операнд вычисляется и используется как логическое значение. Если он имеет значе-ние true, то вычисляется и возвращается значение выражения во втором операнде. Если же значение false, то вычисляется и возвращается значение выра- жения в третьем операнде. Вычисляется всегда толь- ко какой-то один из операндов, второй или третий, и никогда оба. Его синтаксис выглядит так:условие ? если-true-выполнить-это : если-false- выполнить-этоЕсли в зависимости от условий требуется выпол- нить несколько действий, каждый указанный опера- тор может быть вызовом функции для выполнения нескольких операторов в каждой из них. Например, вызов функций для выполнения нескольких опера- торов в соответствии с логическим значением пере- менной с именем «fl ag»:fl ag === true ? doThis( ) : doThat( )В этом примере нет необходимости использовать оператор равенства === и ключевое слово true, так как операторы, вычисляющие выражение для ло- гического значения, автоматически выполняют эту проверку. Поэтому пример можно упростить:fl ag ? doThis( ) : doThat( )В качестве альтернативы два оператора, указанные для тернарного оператора, могут присвоить значе- ние переменной в зависимости от условий провер- ки, например:fl ag ? str = 'Go left' : str = 'Go right'Это синтаксически верно, но также можно упростить:str = fl ag ? 'Go left' : 'Go right'Тернарный опе- ратор состоит из трех операндов. Первый предше- ствует символу ?, второй — меж ду символами ? и :, третий — после символа : 45Если в условии проверяется четность числового зна- чения, два оператора могут предоставлять варианты в зависимости от того, четное число или нечетное.z1 Создайте HTML-документ с самовызыва- ющейся анонимной функцией, объявите и проинициализируйте две переменные.( function ( ) {const numOne =8,numTwo =3 // Здесь будет ваш код.} ) ( )z2 Добавьте операторы для вывода строки, обо- значающей количество.let verb = ( numOne !== 1 ) ? ' are ' : ' is 'console.log( 'There' +verb + numOne )z3 Для вывода строк, корректно описывающих четность двух значений переменных, добавь- те следующие операторы.let parity = ( numOne %2 !== 0 ) ? 'Odd' : 'Even'console.log(numOne + 'is ' +parity )parity = ( numTwo %2 !== 0 ) ? 'Odd' : 'Even'console.log(numTwo + 'is ' +parity )z4 Добавьте операторы для вывода строки, сообща- ющей большее из двух значений переменных.let max = ( numOne > numTwo ) ? numOne : numTwo console.log( max + 'is the Greater Number' )z5 Сохраните HTML-документ, затем откройте его в браузере и запустите консоль. Проана- лизируйте результаты вывода.ternary.htmlТернарный опера- тор может возвра- щать значения лю- бого типа данных, будь то строка, число, логическое значение и т. д. 46Распространенные операцииПобитовые операцииПобитовые операторы JavaScript интерпретируют операнды как последовательность из 32 битов (ну- лей и единиц). Каждый бит передает десятичный компонент только в том случае, если он содержит единицу. Компоненты рассматриваются справа на- лево от «младшего значащего бита» (LSB) до «стар- шего значащего бита» (MSB). Ниже представлено двоичное число в восьмибитном представлении — десятичное число 50, что обозначено битами, уста- новленными со значением 1 (2 + 16 + 32 = 50).Биты87654321Десятичное представление128 6432168421Двоичное представление00110010В следующей таблице перечислены все побитовые опе- раторы, используемые в JavaScript.ОператорНазваниеBinary number operation: |Побитовое ИЛИ (OR)Возвращает 1 в тех разрядах, которые хотя бы у одного из операндов были равны 1Пример: 1010 | 0101 = 1111&Побитовое И (AND)Возвращает 1 в тех разрядах, которые у обоих операндов были равны 1Пример: 1010 & 1100 = 1000Побитовое НЕ (NOT)Заменяет каждый бит операн- да на противоположный. Воз- вращает 1, если бит не равен 1, и 0 — если бит равен 1Пример: 1010 = 0101^Побитовое исключаю- щее ИЛИ (XOR)Возвращает 1 в тех позици- ях, которые только у одного из операндов были равны 1Пример: 1010 ^ 0100 = 1110Байт состоит из 8 бит, и каждая половина байта известна как по- лубайт (4 бита). Двоичные числа, представленные в примерах табли- цы, описывают зна- чения, хранящиеся в полубайте.Многие авторы книг по программиро- ванию на JavaScript не дают информа- цию по побитовым операторам. Одна- ко полезно понять, что они из себя представляют и как их можно исполь- зовать. 47ОператорНазваниеBinary number operation:<<Левый сдвигСдвигает двоичное представ- ление числа на некоторое ко- личество разрядов влево, до- бавляя справа нули.Пример: 0010 << 2 = 1000>>Правый сдвиг, перенося- щий знакСдвигает двоичное представ- ление числа на некоторое количество разрядов вправо. Освобождающиеся разряды заполняются знаковым битом.Пример: 1000 >> 2 = 0010>>>Правый сдвиг с за- полнением нулямиСдвигает двоичное представ- ление числа на некоторое количество разрядов вправо. Освобождающиеся разряды заполняются нулями.Пример: 1000 >> 2 = 0010z1 Создайте HTML-документ с самовызыва- ющейся анонимной функцией, объявите и проинициализируйте две переменные.( function ( ) {let numOne =10,numTwo =5 // Здесь будет ваш код.} ) ( )z2 Добавьте операторы для простого вывода строк, подтверждающих начальные значения, хранящиеся в каждой переменной.console.log( 'numOne: ' +numOne )console.log( 'numTwo: ' +numTwo )z3 Добавьте операторы, чтобы с помощью поби- товых операций поменять местами значения, хранящиеся в каждой переменной.numOne = numOne ^ numTwo// 1010 ^ 0101 = 1111 = (десятичное число 15)bitwise.html 48Распространенные операции numTwo = numOne ^ numTwo// 1111 ^ 0101 = 1010 (десятичное число 10)numOne = numOne ^ numTwo// 1111 ^ 1010 = 0101 (десятичное число 5)z4 Добавьте операторы для вывода разрыва строки и строк, чтобы подтвердить оконча- тельные значения, хранящиеся в каждой пе- ременной.console.log( '\n' + 'numOne: ' +numOne )console.log( 'numTwo: ' + numTwo )z5 Сохраните HTML-документ, затем откройте его в браузере и запустите консоль. Проана- лизируйте результаты вывода.Приоритет операторовОператоры JavaScript имеют разные уровни прио- ритета. Приоритет операторов определяет порядок, в котором операторы выполняются. Операторы с бо- лее высоким приоритетом выполняются раньше опе- раторов с более низким приоритетом.В таблице сверху вниз перечислены операторы каж- дого типа в порядке от самого высокого до самого низкого уровня приоритета:Обратите внима- ние, каким обра- зом в нашем при- мере для разрыва строки использу- ется специальная escape- последова- тельность \n. 49ОператорОписание( )Группировка[ ]( )Оператор доступа к объектуОператор доступа к массивуВызов функции++ —Постфиксный инкремент, пост- фиксный декремент++ —! Префиксный инкремент, префикс- ный декрементЛогическое отрицание, побитовое отрицание**Возведение в степень* /%Умножение, деление, остаток от деления+ –Сложение, вычитание<< >> >>>Побитовый сдвиг< <= => >Сравнение=== ==!==!=Строго равно, равно, строго не равно, не равно&Побитовое И^Побитовое исключающее ИЛИ|Побитовое ИЛИ&&Логическое И||Логическое ИЛИ?:Тернарный оператор=+= –= *= /=%=&= ^= |=<<= >>= >>>=Операторы присваивания,Запятая z1 Создайте HTML-документ с самовызываю- щейся анонимной функцией, которая ини- циализирует переменную с результатом раз- группированного выражения и выводит его значение.( function ( ) {let sum =9 + 12 / 3 // Эквивалентно 9 + 4.console.log( 'Ungrouped sum: ' +sum )} ) ( )Оператор [ ] опи- сан в разделе о массивах, на- чиная со стр. 81. Также обрати- те внимание, что оператор.(точка) используется в то- чечной нотации, например console.log( ). Он нужен для доступа к свой- ствам или методам объекта (массива или функции).Пр иор итет precedence.html 50Распространенные операции z2 Сохраните HTML-документ, затем откройте его в браузере и запустите консоль. Проана- лизируйте полученные результаты.Сначала вычисляется деление, так как оператор де- ления имеет более высокий приоритет по срав- нению с оператором сложения, поэтому результат равен 13. Также вы можете определить порядок при- оритета, сгруппировав выражение в круглых скоб- ках, и оно будет вычислено первым, так как опера- тор ( ) имеет самый высокий приоритет.z3 Чтобы установить порядок вычисления, вы мо- жете изменить операторы в функции, и сложе- ние будет вычисляться перед делением.let sum = (9 + 12 ) / 3 // Эквивалентно 21 / 3.console.log( 'Grouped sum: ' + sum )z4 Сохраните HTML-документ, затем откройте его в браузере и запустите консоль. Проана- лизируйте результаты вывода.Для определения порядка вычисле- ний в выражениях рекомендуется ис- пользовать круглые скобки ( ) 51ЗаключениеzФункции parseInt( ) и parseFloat( ) преобразовывают строки в числа. Функции String( ) и toString( )преобразовывают числа в строки.zФункция isNaN( ) определяет, является ли литерал или переменная нечисловым значением NaNzАрифметические операторы выполняют матема- тические операции: сложение +, остаток от деле- ния %, инкремент ++, декремент — и возведение в степень **zЕсли операция используется как постфикс (опе- ратор после операнда), значение операнда воз- вращается, а затем увеличивается или уменьша- ется на единицу. Если используется префиксная форма (оператор перед операндом), значение операнда возвращается увеличенным или умень- шенным на единицу.zОператор = может быть объединен с арифмети- ческим оператором для выполнения арифме ти- ческой операции, а затем присвоения ее резуль- тата.zОператор присваивания += считается наиболее полезным и может использоваться для добавле- ния строки к уже существующей.zОперанды можно сравнивать. Существуют сле- дующие операторы сравнения: строго равно ===, строго не равно !==, больше > или меньше <zКомбинированные операторы сравнения <= и >=возвращают значение true, если оба операнда равны.zОператор логическое И && проверяет два опе- ранда и возвращает true, если оба истинны. Опе- ратор логическое ИЛИ || находит первое истин- ное значение и возвращает значение true, а ина- че — false 52Распространенные операцииzОператор логического HE! сначала приводит ар- гумент к логическому типу true/false, а затем воз- вращает противоположное значение.zТернарный оператор ?: состоит из трех операн- дов. Первый вычисляется и используется как ло- гическое значение. Условие тернарного опера- тора задается в первом операнде. Если он име- ет значение true, то вычисляется и возвраща- ется значение выражения во втором операнде. Если же значение false, то вычисляется и возвра- щается значение выражения в третьем операнде.zПобитовые операторы JavaScript для выполнения двоичной арифметики могут манипулировать от- дельными битами двоичной последовательности.zОператоры JavaScript имеют разные уровни при- оритета. Приоритет операторов определяет поря- док, в котором операторы выполняются.zДля принудительного вычисления определенных частей выражения перед другими используются круглые скобки. В этой главе вы узнаете об управляющих конструкциях в JavaScript, их назначении и правилах использования.Ветвление с помощью оператора ifАльтернативное ветвлениеВетвление с помощью переключателей (оператор switch)Цикл forЦикл whileЦикл do..whileВыход из цикловОбработка ошибокЗаключение52 54 56 58 60 62 64 66 69Управляющие конструкции в JavaScript3 54Управляющие к онстр укции в Ja vaScrip tВетвление с помощью оператора ifИногда возникает необходимость выполнить различ- ные действия в зависимости от условий.В JavaScript проверка определенных условий выпол- няется с помощью ключевого слова if. Условный опе- ратор if реализует выполнение конкретных действий при условии, что некоторое логическое выражение принимает значение true или false. Если результат ра- вен true, выполняется одна инструкция, в противном случае — другая.Необходимо, чтобы проверяемое условие после клю- чевого слова if было заключено в круглые скобки.Синтаксис оператора if выглядит следующим образом:if ( условие ) код выполняется, если условие истинноВыполняемые инструкции могут быть представлены одной стро- кой или блоком кода, заключенными в фигурные скобки.if ( условие ){код выполняется, если условие истиннокод выполняется, если условие истиннокод выполняется, если условие истинно}Оценка условий и выполнение действий в соответ- ствии с их результатом — это настоящий мыслитель- ный процесс. Например, запрограммируем действия, которые вы можете выполнить в летний день:let temperature = readThermometer( )const tolerable =25if ( temperature > tolerable ){turn_on_air-conditioning( )get_a_cool_drink( )stay_in_shade( )}Рекомендуется за- ключать в фигур- ные скобки даже отдельные опера- торы — для сохра- нения согласован- ного стиля. 55Проверка условий эквивалентна следующему син- таксису if( условие === true ). Но поскольку JavaScript автоматически преобразует результат выражения в логическое значение, т. е. выполняет проверку ра- венства для истинного значения, нет необходимости включать в скобки оператор ===true z1 Создайте HTML-документ с самовызываю- щейся функцией, которая начинается с ини- циализации логической переменной.let fl ag = true z2 Вставьте операторы для выполнения условий логического значения переменной.if( !fl ag ){console.log( 'Power is OFF' )}if( fl ag ){console.log( 'Power is ON' )}z3 Вставьте операторы для выполнения условий выражения, сравнивающего два целых числа.if( 7 < 2 ) {console.log( 'Failure' )}if( 7 > 2 ) {console.log( 'Success' )}z4 Сохраните HTML-документ, затем откройте его в браузере и запустите консоль. Проана- лизируйте полученные результаты.if.htmlКод сценария, соз- дающий функци- ональный блок, в нашем приме- ре опущен. Более подробную ин- формацию по соз- данию анонимных самовызывающих- ся функций вы мо- жете прочитать на стр. 24.В этом приме- ре оператор NOT используется для инвертирования проверки условий, чтобы он стал эк- вивалентным if ( fl ag===false ). 56Управляющие к онстр укции в Ja vaScrip t1   2   3   4   5   6   7   8   9   ...   14

Pop-up Window

Main Window

heading">Top 3 Cities

Senderhost" >Main Page Domain: 450" height = “120" src="http://example.com/receiver.html" > Send Message button>z2 Создайте код для отображения домена, на ко- тором размещен этот HTML-документ.document.getElementById( 'host' ).innerText += document.domain z3 Добавьте функцию для отправки сообщения.function sendMsg( ) {const cage = document.getElementById( 'cage' ) .contentWindow cage.postMessage( 'Message Received from: ' + document.domain, 'http://example.com' )}z4 Создайте другой HTML-документ, включаю- щий заголовок, абзац для отображения доме- на документа и пустой абзац, в котором поя- вится полученное сообщение.Receiverhost" >Iframe Page Domain: msg">z5 Создайте код для отображения домена, где размещен второй HTML-документ. Затем добавьте метод document.addEventListener, который присоединяет к документу обработ- чик событий.document.getElementById( 'host' ).innerText += document.domain window.addEventListener( 'message',readMsg )z6 Добавьте функцию для записи полученного сообщения.function readMsg( event ) {if ( event.origin === 'http://localhost' )receiver.htmlБолее подроб- ную информа- цию о связи меж- ду объектами Window вы може- те найти на сайте dev.w3.org/html5/webstorage. 216Написание скрипт ов document .getElementById( 'msg' ).innerText = event.data}z7 Сохраните документы в разных доменах и нажмите кнопку для отправки сообщений между документами.Местоположение пользователейВозможность точно определять географическое по- ложение пользователя поддерживается API геолока- ции HTML. Из соображений конфиденциальности у пользователя запрашивается разрешение на пре- доставление сведений о местоположении для от- правки информации о ближайших точках беспрово- дного доступа и IP-адресе компьютера, например, в службы геолокации Google. Эта служба возвраща- ет приблизительные координаты широты и долготы местонахождения пользователя. Успешно получен- ные координаты могут быть отображены на страни- це и предоставлены службе Google Maps для указа- ния на карте. 217z1 Создайте HTML-документ, содержащий в основной части два абзаца фиксированного размера.msg" style = “width:450px; height:50px" >map" style = “width:450px; height:200px">z2 Добавьте в раздел заголовка документа эле- мент, чтобы получить ключ API для Google Maps.//maps.googleapis.com/maps/ api/<br> js?key=API_KEY <br>“ >z3 В конце раздела тела документа создайте функцию, которая после загрузки HTML-до- кумента ищет местоположение пользователя.function init( ) {if (navigator.geolocation) {document.getElementById( 'msg' ).innerText ='Geolocation service is trying to fi nd you…' navigator.geolocation.getCurrentPosition( success, fail )} else {document.getElementById( 'msg' ).innerText = ' Your browser does not support Geolocation service'}}document.addEventListener( 'DOMContentLoaded', init )z4 Если попытка не удалась, добавьте функ- цию для отображения соответствующего со- общения.function fail( position ) {document.getElementById( 'msg' ).innerText ='Geolocation service cannot fi nd you at this time'}geolocation.htmlВ этом приме- ре объект navigator.geolocation предо- ставляет метод getCurrentPosition( ), ко- торый использует- ся для получения информации о те- кущем положении пользователя. Воз- вращаются широта и долгота его по- зиции или сведе- ния об ошибке. 218Написание скрипт ов z5 Добавьте функцию для отображения полу- ченных координат и карты при успешном выполнении.function success( position ) {const lat = position.coords.latitude const lng = position.coords.longitude document.getElementById( 'msg' ).innerHTML ='Found you at…Latitude: ' +lat + ', Longitude: ' +lng const latlng = new google.maps.LatLng( lat, lng )const options = { zoom:18 , center :latlng , mapTypeId: google.maps.MapTypeId.ROADMAP}const map = new google.maps.Map ( document. getElementById( 'map' ) , options )const marker = new google.maps.Marker( { position:latlng , map: map , title: 'You are here' } )}z6 Сохраните HTML-документ на локаль- ном веб-сервере в папке «htdocs». Затем от- кройте веб-страницу и дайте разрешение на определение вашего местоположения.Более подроб- ную информацию об API геолока- ции вы можете уз- нать на сайте dev.w3.org/geo/api.В первую оче- редь необходимо на сайте cloud.google.com вой ти в облач- ную платформу Google и создать новый проект. За- тем включите в проекте Maps JavaScript API и по- лучите ключ API. Чтобы запустить код, замените API_KEY на шаге 2 сво- им собственным ключом. 219ЗаключениеzТехнология AJAX позволяет обновлять веб- страницы, запрашивая данные с веб-сервера без прерывания других операций.zТекст, полученный посредством объекта XMLHttpRequest, автоматически сохраняется в его свой стве responseText.zSVG-графика, встроенная в документ HTML, имеет объектную модель (DOM). DOM в SVG, как и в HTML, содержит модель событий.zМетод getSVGDocument( ) создает ссылочный объект на документ SVG. Элементы, атрибуты и текст в нем могут быть адресованы через объект SVGDocument.zЭлемент HTML создает на странице область холста растрового изображения, в которой с помощью JavaScript можно создавать фигуры и текст, используя методы и свой ства API Canavas2D.zМетод getContext( ) создает ссылочный объект области холста.zОбъекты веб-хранилища localStorage (для долгосрочного хранения) и sessionStorage (для временного хранения) позволяют хранить данные в браузере.zОбъекты хранилища localStorage и sessionStorage предоставляют одинаковые методы и свой ства. В методе setItem( ) указываются два аргумента, которые должны быть сохранены.zПеремещение пользователем различных элементов страницы поддерживается технологией Drag-and- Drop.zНаиболее важные и необходимые события для создания Drag-and- Drop — это «dragstart», «dragover» и «drop». 220Написание скрипт овzAPI Messaging поддерживает возможность безопасной передачи текстовых сообщений между документами. Это реально даже в случае размещения документов в двух разных доменах.zЧтобы получить сообщение, принимающий документ должен правильно идентифицировать домен, на котором размещен отправляющий документ.zВозможность точно определять географическое положение пользователя поддерживается API геолокации HTML. Из соображений конфиденциальности у пользователя запрашивается разрешение на предоставление сведений о местоположении.zСлужбы геолокации Google возвращают приблизительные координаты широты и долготы пользователя.zУспешно полученные координаты могут быть отображены на странице и предоставлены службе Google Maps для указания на карте. 221Предметный указательAPI (Интерфейс прикладного программирования, Application Programming Interface) 158браузера 158геолокации 184dataTransfer.getData(), метод перемещения объектов 181Dblclick, событие при нажатии кнопки мыши 142ECMAScript 8Fetch API 160IEEE (Институт инженеров по электротехнике и электронике) 94Java 8JavaScript 8JavaScript Object Notation (JSON) (Нотация объектов JavaScript) 8, 156JScript 8LSB (младший значащий бит) 40Messaging API 182MSB (старший значащий бит) 40Ondragover, атрибут 180Ondragstart, атрибут 180Ondrop, атрибут 180URL-адрес 124Web Storage API 178XML (Расширяемый язык разметки) 156XML, Объектная модель документа (DOM)Метод getSVGDocument() 174AАнимация (холст) 176Анонимные функции 20Аргументы функций 18Арифметические операторы+ сложение 13, 30-- декремент 30/ деление 30** возведение в степень 30 ++ инкремент 30 % остаток от деления 30 * умножение 30 - вычитание 13, 30Асинхронные операции 158Асинхронный JavaScript и XML («AJAX») 172Атрибут id 10объекта 64ББлок функции 12, 18ВВеб-приложение 162, 164, 166, 168Внешние файлы JavaScript 9Всплывающие окна 116A–Z 222Предме тный ук аза тельВстроенные элементы, iframe 182Выражения 13Ключевые слова 12Операторы 12Значения 12Выход из цикла 58Вычисление итоговых значений 166ДДанные, свойства управления событиями 182Двоичное число 40Диалоговые окна 112Документ JSON 161, 164ЗЗамыкания 24, 118Запрос HTTP 161, 164Значение null 102ИИерархия, DOM 108Инструкции (операторы) Инструменты разработчика 10Интерфейс 162ККлючевое слово 14–15break в структуре цикла 58в структуре оператора switch 50case 50catch 60const 16, 22continue 58default 50do 56else 48fi nally 60for 52if 46in 66let 13, 22new 78, 158, 172return 18switch 50this 64, 160throw 60try 60typeof 17var 16while 54Коды символов ASCII 144Комментарии // и /* */ 13Конкатенация строк 30Консоль JavaScript 10Конфликт переменных 22Координаты широты и долготы 184ЛЛексическая область видимости 22Литеральные значения 13Логические операторы&& логическое И 36! логическое НЕ 36|| логическое ИЛИ 36Логический тип данныхЗначение false (ложь) 16Значение true (истина) 16Логическое свойство checked 146ММассив elements[] 152options[ ] 148Метод join() 74pop() 74 223push() 74reverse() 74, 76shift() 74slice() 74sort() 74, 76splice() 74unshift() 74Свойство length 72Метасимволы 86Метод 18addEventListener() 120, 140, 182alert() 10, 112clear() 178clearInterval() 118clearTimeout() 118confi rm() 112decodeURI() 138encodeURI() 138fetch() 160, 164getCurrentPosition() 184getElementById() 134getElementsByClassName() 134getElementsByTagName() 134, 172getItem() 178indexOf() 102isNaN() 28json() 160json() 160, 164lastIndexOf() 102log() 10parentNode.removeChild() 181parseFloat() 28parseInt() 28postMessage() 182preventDefault() 147, 152prompt() 112removeAttribute() 137removeItem() 178scrollBy() 114, 128scrollTo() 114setAttribute() 136setInterval() 118setItem() 178setTimeout() 118, 158split() 138String() 28toLocaleString() 68toString() 28, 84toUTCString() 138ННезависимые кнопки или «флажки» 146Немедленно вызываемые функции (IIFE) 20Номера индексов начинаются с нуля 70ООбласть видимостиЗамыкания 25Глобальная 22, 25Локальная 22, 25Обнаружение функции 120Обновление таблицы 168Обработка ошибок 60Объект 68Array 68Boolean 64ConsoleМетод log() 10Context 176Date 78Конструктор Date() 78, 84Метод getDate() 80getDay() 80getFullYear() 80getHours() 82getMilliseconds() 82getMinutes() 82getMonth() 80getSeconds() 82getTime() 78getTimezoneOff set() 78setDate() 84 224Предме тный ук аза тель setFullYear() 84setHours() 84setMilliseconds() 84setMinutes() 84setMonth() 84setSeconds() 84toDateString() 84toLocaleString() 84toString() 78, 84toTimeString() 84toUTCString() 78, 84document 130Дочерний объект anchors 108forms 132Метод appendChild() 136createElement() 136Свойство cookie 138domain 130elements 108Дочерний объект images 132links 132scripts 132styleSheets 132Метод getElementById() 134getElementsByClassName() 134getElementsByTagName() 134open() 136removeChild() 137replaceChild() 137write() 136Свойство lastModifi ed 130referrer 130title 130URL 130errorError 60EvalError 60InternalError 60RangeError 60ReferenceError 60SyntaxError 60TypeError 60URIError 60eventМетод preventDefault() 152Свойство keyCode 144type 144x 144y 144formМассив elements[] 152history 126Метод back() 126forward() 126go() 126Свойство length 126HTMLCollection 134HTTPResponse JSON 156Метод JSON.parse() 156JSON.stringify() 156localStorage 178locationСвойство hash 124host 124href 124pathname 124protocol 124Math 90Константа E 90LN2, константа LN10 90LOG2E, константа LOG10E 90PI 90SQRT1_2, константа SQRT2 90Метод abs() 92acos() 92asin() 92atan() 92 225atan2() 92ceil() 92, 94. 96cos() 92exp() 92fl oor() 92, 94log() 92max() 92min() 92pow() 92random() 92, 96round() 92, 94sin() 92sqrt() 92tan() 92navigator 120, 122Дочерний объект geolocation 184mimeTypes 122plugins 122Метод javaEnabled() 122Свойство appCodeName 120appName 120appVersion 120cookieEnabled 122platform 120userAgent 120Promise 158, 160Метод catch() 158, 160, 164then() 158, 160, 164RegExp 86Метод exec() 86test() 86screenДочерний объект orientationСвойство availHeight 110availWidth 110colorDepth 110height 110type 110width 110sessionStorage 178String 98Метод charAt() 102charCodeAt() 102concat() 98fromCharCode() 102,144indexOf() 102lastIndexOf() 102match() 102replace() 102search() 102slice() 100split() 100, 106substring() 100substr() 100toLowerCase() 98toUpperCase() 98 Свойство length 98SVGDocumentМетод getSVGDocument() 174Узел lastChildМетод replaceWith() 175Свойство wholeText 175window 108, 140Метод addEventListener() 182alert() 10close() 116moveBy() 116moveTo() 116open() 116print() 116XMLHttpRequest 172Метод open() 172send() 172Свойство fi rstChild 172onreadystatechange 172readyState 172responseText 172responseXML 172создание 68Объектная модель документа (DOM) 8, 108 226Предме тный ук аза тельОкно консоли 10Раскрывающийся список constructor 25Округление чисел 94Оператор . 42вызова () 20группировки выражений () 42доступа к массиву 42конкатенации + 17побитовый& | ^ << >> >>> 40 присваивания+= присваивание со сложением 32= присваивание 13, 32/= присваивание с делением 32**= присваивание и возведение в степень 32%= присваивание по модулю 32*= присваивание с умножением 32-= присваивание с вычитанием 32сравнения=== строго равно 34> больше 34>= больше или равно 34!== строго не равно 34< меньше 34<= меньше или равно 34умножения * 19Очередь обратных вызовов 158ППапка htdocs 161Пара key:value (атрибут:значение) 156, 170Переключатели с зависимой фиксацией или «радиокнопки» 146Переменные 13, 16Объявление 16Соглашение по именованию 14Поведение 64Подстрока 100Пользовательские объекты 64, 66Преобразование значений 28Примитивные значения 68Приоритет операций 42Пробел 12, 104Проверка 86Проверка электронного адреса 87, 152Прототип свойства 25РРазрешение экрана 110Раскрывающийся список 148Расширенные объекты 66ССамовызывающаяся функция 20, 24Свойства, объект window 108Свойство API Canavas2D 176clientHeight 115clientWidth 115contentWindow (iframe) 182description 122fi rstChild data 172innerHTML 136innerText 10, 136length 72message, объект error 60name, массив plugins 122name, объект error 60NaN 28onchange 148onclick 142ondblclick 142onfocus 150onfocusout 150onkeydown 144 227onkeypress 144onkeyup 144onload 120, 140onmousedown 142onmousemove 144onmouseout 142onmouseover 142onmouseup 142onreset 150onselect 150onsubmit 152origin 182pageXOff set 114pageYOff set 114scrollX 114scrollY 114selectedIndex 148status 172type 122value 132Символ ; 12Символы Unicode 144Синтаксис 13Синхронизация 158Служба Google Maps 184Службы геолокации Google 184Случайные числа 96Событие DOMContentLoaded 176focus 150focusout 150keydown 144keypress 144keyup 144mousedown 142mousemove 144mouseout 142mouseover 142mouseup 142reset 150нажатия клавиш 142Сопоставление текста с шаблоном 86Сортировка элементов 76Стек вызовов 158Стрелочные функции => 160Структура цикла do 56for 52while 54ТТаймер 158Метод setTimeout() 118, 158Тег noscript 9Теги скрипта 9Тернарный оператор ?: 38Технология Drag-and-Drop 180Тип данных function 16null 16Object 16string 16symbol 16undefi ned 16Точечная нотация 10УУзел, XML 172Условное ветвление 34, 36, 46, 50Условный тернарный оператор ?: 38ФФайлы cookie 138Фигурные скобки { } 12, 18Функция 18Аргументы 18обработчика событий 142Присваивание 20Параметры 18Подъема 20 Самовызывающаяся 20сравнения 76 228Предме тный ук аза тельЦЦикл for in 66, 108-109событий 158ЧЧастные переменные 25Числовой тип данных 16Чувствительность к регистру 13ЭЭлементы массива 70Эпоха, 1 января 1970 года 00:00:00 GMT 78 2291   ...   6   7   8   9   10   11   12   13   14


39
операндами, а затем присваивает результат этой опе- рации первой переменной, и она становится ее новым сохраненным значением.
z
1
Создайте HTML-документ с самовызываю- щейся анонимной функцией, объединяющей две строки.
( function ( ) {
let msg
= '
JavaScript
' ;
msg
+= '
Fun
'
console.log( '
Add & concatenate:
' +
msg
)
// Здесь будет ваш код.
} ) ( )
z
2
Добавьте операторы, использующие для вы- полнения арифметических операций комби- нированные операторы, и выведите результат.
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( '
Multiply & assign integer:
' +
sum
)
sum
=
8
;
sum
/=
4
console.log( '
Divide & assign integer:
' +
sum
)
sum
=
8
;
sum
%=
4
console.log( '
Modulus & assign integer:
' + sum
)
z
3
Сохраните HTML-документ, затем открой- те его в браузере и запустите консоль. Проа- нализируйте вывод — результат выполнения операторов присваивания.
assignment.html

40
Р
аспространенные операции
Операторы сравнения
Ниже в таблице представлены наиболее распростра- ненные в JavaScript операторы сравнения.
Оператор
Описание
===
Строго равно
!==
Строго не равно
>
Больше
<
Меньше
>=
Больше или равно
<=
Меньше или равно
Оператор равенства
===
сравнивает два операн- да и возвращает логическое значение true
(истина) в том случае, если операнды строго равны. В про- тивном случае возвращается логическое значение false
(ложь). Если операнды — одинаковые числа, они равны; если операнды представляют собой стро- ки, содержащие одинаковые символы в одинаковых позициях, они равны; если операнды — логические значения, которые оба принимают значение true или оба принимают значение false
, они равны. Оператор не равно!
==
возвращает значение true
(истина) в том случае, если операнды не равны, используя те же правила, что и для оператора
===
Операторы строго равно и строго не равно полезны при сравнении двух значений для выполнения «ус- ловного ветвления», когда необходимо выполнить различные действия в зависимости от условий.
Оператор больше
>
возвращает значение true в том слу- чае, если значение левого операнда больше, чем пра- вого. Оператор меньше
<
возвращает значение true в том случае, если значение левого операнда меньше, чем правого. При добавлении символа
=
после опера- тора
>
или оператора
<
в результате возвращается зна- чение true еще в том случае, если два операнда равны.
Операторы больше
>
и меньше
<,
как правило, ис- пользуются для проверки значения переменной счетчика в структуре цикла.
> >
Пример использо- вания оператора меньше
< в струк- туре цикла можно найти на стр. 61.
Также существуют стандартные опе- ратор равенства
==
и оператор нера- венства
!=
. Однако они могут привести к непредвиденным результатам. В отли- чие от операторов строгого равен- ства, они не гаран- тируют, что срав- ниваемые значения относятся к одно- му типу данных. На- пример, в результа- те сравнения
25== '25'
возвращается зна- чение true
, а в ре- зультате сравнения
25=== '25'
— false
. Для точных сравнений всегда используй- те трехсимвольные операторы.


41
z
1
Создайте HTML-документ с самовызыва- ющейся анонимной функцией, объявите и проинициализируйте три переменные.
( function ( ) {
let comparison
,
sum
=
8
,
str
= '
JavaScript
'
// Здесь будет ваш код.
} ) ( )
z
2
Добавьте операторы, использующие операто- ры сравнения и выведите результат.
comparison
= str
=== '
JAVASCRIPT
'
console.log( '
String Equality?
' + comparison
)
comparison
= str
=== '
JavaScript
'
console.log( '
String Equality?
' + comparison
)
comparison
= sum
===
8
console.log( '
Number Equality?
' + comparison
)
comparison
= sum
>
5
console.log( '
Greater Than?
' + comparison
)
comparison
= sum
<
5
console.log( '
Less Than?
' + comparison
)
comparison
= sum
<=
8
console.log( '
Less Than or Equal To?
' + comparison
)
z
3
Сохраните HTML-документ, затем открой- те его в браузере и запустите консоль. Проа- нализируйте вывод — результат выполнения операторов сравнения.
comparison.html
JavaScript чувстви- телен к регистру, поэтому регистр символов должен совпадать, что- бы сравниваемые строки были равны.

42
Р
аспространенные операции
1   2   3   4   5   6   7   8   9   ...   14

Логические операторы
В JavaScript существуют три логических оператора.
Оператор
Описание
&&
Логическое И
||
Логическое ИЛИ
!
Логическое НЕ
Логические операторы обычно используются вместе с операндами, имеющими логическое значение true или false
, или значениями, которые могут быть в них преобразованы.
Оператор логическое И
&&
будет оценивать два опе- ранда и возвращать значение true
, если оба операнда истинны, а иначе — false
. Это часто используется при условном ветвлении, когда необходимо выполнить раз- личные действия в зависимости от условий.
В отличие от логического оператора
&&,
которому необ- ходимо, чтобы оба операнда были истинными, опера- тор логическое ИЛИ
||
находит первое истинное зна- чение и возвращает значение true
, а иначе — false
. Это полезно для выполнения сценариев определенного действия в зависимости от условий.
Третий логический оператор — это оператор логиче- ского НЕ!, который сначала приводит аргумент к ло- гическому типу true/false
, а затем возвращает проти- воположное значение. Например, если переменная с именем «tog» имеет значение true
, то
!tog вернет в результате значение false
. Это полезно для инвер- тирования значения переменной в последовательных итерациях цикла, например tog=!a
. А при каждой ите- рации значение будет меняться на противоположное.
Например, включение и выключение светового пе- реключателя.
Термин «булев» от- носится к систе- ме логического мышления, разра- ботанной англий- ским математиком
Джорджем Булем
(1815–1864).

43
z
1
Создайте HTML-документ с самовызыва- ющейся анонимной функцией, объявите и проинициализируйте три переменные.
( function ( ) {
let result
,
yes
=
true,
no
=
false
// Здесь будет ваш код.
} ) ( )
z
2
Добавьте операторы, использующие логиче- ские операторы, и выведите результат.
result
= yes
&& yes console.log( '
Are both true?
' + result
)
result
= yes
&& no console.log( '
Are both still true?
' + result
)
result
= yes
|| no console.log( '
Are either true?
' + result
)
result
= no
|| no console.log( '
Are either still true?
' + result
)
console.log( '
Original value:
' + yes
)
yes
=!
yes console.log( '
Toggled value:
' + yes
)
z
3
Сохраните HTML-документ, затем открой- те его в браузере и запустите консоль. Проа- нализируйте вывод — результат выполнения логических операторов.
logic.html
Обратите внима- ние, что выраже- ние false&&false воз- вращает значение false
, а не true
, как может показаться, действуя по прин- ципу «два заблу- ждения — еще не правда».

44
Р
аспространенные операции
Условный (тернарный)
оператор
Возможно, наиболее полюбившийся оператор созда- теля JavaScript — это условный оператор?:. Он так-
же известен как тернарный, то есть состоящий
из трех операндов.
Первый операнд вычисляется и используется
как логическое значение. Если он имеет значе-
ние
true
, то вычисляется и возвращается значение выражения во втором операнде. Если же значение false
, то вычисляется и возвращается значение выра- жения в третьем операнде. Вычисляется всегда толь- ко какой-то один из операндов, второй или третий, и никогда оба. Его синтаксис выглядит так:
условие ? если-true-выполнить-это : если-false-
выполнить-это
Если в зависимости от условий требуется выпол- нить несколько действий, каждый указанный опера- тор может быть вызовом функции для выполнения нескольких операторов в каждой из них. Например, вызов функций для выполнения нескольких опера- торов в соответствии с логическим значением пере- менной с именем «fl ag»:
fl ag
=== true ? doThis
( ) : doThat
( )
В этом примере нет необходимости использовать оператор равенства
===
и ключевое слово true
, так как операторы, вычисляющие выражение для ло- гического значения, автоматически выполняют эту проверку. Поэтому пример можно упростить:
fl ag
? doThis
( ) : doThat
( )
В качестве альтернативы два оператора, указанные для тернарного оператора, могут присвоить значе- ние переменной в зависимости от условий провер- ки, например:
fl ag
? str
= '
Go left
' : str
= '
Go right
'
Это синтаксически верно, но также можно упростить:
str
=
fl ag
? '
Go left
' : '
Go right
'
Тернарный опе- ратор состоит из трех операндов.
Первый предше- ствует символу
?
, второй — меж ду символами
?
и
:
, третий — после символа
:

45
Если в условии проверяется четность числового зна- чения, два оператора могут предоставлять варианты в зависимости от того, четное число или нечетное.
z
1
Создайте HTML-документ с самовызыва- ющейся анонимной функцией, объявите и проинициализируйте две переменные.
( function ( ) {
const numOne
=
8
,
numTwo
=
3
// Здесь будет ваш код.
} ) ( )
z
2
Добавьте операторы для вывода строки, обо- значающей количество.
let verb
= ( numOne
!==
1
) ? '
are
' : '
is
'
console.log( '
There
' +
verb
+
numOne
)
z
3
Для вывода строк, корректно описывающих четность двух значений переменных, добавь- те следующие операторы.
let parity
= (
numOne
%
2
!==
0
) ? '
Odd'
: '
Even
'
console.log(
numOne
+ '
is
' +
parity
)
parity
= ( numTwo
%
2
!==
0
) ? '
Odd
' : '
Even
'
console.log(
numTwo
+ '
is
' +
parity
)
z
4
Добавьте операторы для вывода строки, сообща- ющей большее из двух значений переменных.
let max
= ( numOne
>
numTwo
) ?
numOne
:
numTwo console.log( max
+ '
is the Greater Number
' )
z
5
Сохраните HTML-документ, затем откройте его в браузере и запустите консоль. Проана- лизируйте результаты вывода.
ternary.html
Тернарный опера- тор может возвра- щать значения лю- бого типа данных, будь то строка, число, логическое значение и т. д.

46
Р
аспространенные операции
Побитовые операции
Побитовые операторы JavaScript интерпретируют операнды как последовательность из 32 битов (ну- лей и единиц). Каждый бит передает десятичный компонент только в том случае, если он содержит единицу. Компоненты рассматриваются справа на- лево от «младшего значащего бита» (LSB) до «стар- шего значащего бита» (MSB). Ниже представлено двоичное число в восьмибитном представлении — десятичное число 50, что обозначено битами, уста- новленными со значением 1 (2 + 16 + 32 = 50).
Биты
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
&
Побитовое
И (AND)
Возвращает
1
в тех разрядах, которые у обоих операндов были равны
1
Пример:
1010
& 1100 = 1000

Побитовое
НЕ (NOT)
Заменяет каждый бит операн- да на противоположный. Воз- вращает
1
, если бит не равен
1
, и
0
— если бит равен
1
Пример:
1010 = 0101
^
Побитовое исключаю- щее ИЛИ
(XOR)
Возвращает
1
в тех позици- ях, которые только у одного из операндов были равны
1
Пример:
1010 ^ 0100 = 1110
Байт состоит из 8 бит, и каждая половина байта известна как по- лубайт (4 бита).
Двоичные числа, представленные в примерах табли- цы, описывают зна- чения, хранящиеся в полубайте.
Многие авторы книг по программиро- ванию на JavaScript не дают информа- цию по побитовым операторам. Одна- ко полезно понять, что они из себя представляют и как их можно исполь- зовать.

47
Оператор
Название
Binary number operation:
<<
Левый сдвиг
Сдвигает двоичное представ- ление числа на некоторое ко- личество разрядов влево, до- бавляя справа нули.
Пример:
0010 << 2 = 1000
>>
Правый сдвиг, перенося- щий знак
Сдвигает двоичное представ- ление числа на некоторое количество разрядов вправо.
Освобождающиеся разряды заполняются знаковым битом.
Пример:
1000 >> 2 = 0010
>>>
Правый сдвиг с за- полнением нулями
Сдвигает двоичное представ- ление числа на некоторое количество разрядов вправо.
Освобождающиеся разряды заполняются нулями.
Пример:
1000 >> 2 = 0010
z
1
Создайте HTML-документ с самовызыва- ющейся анонимной функцией, объявите и проинициализируйте две переменные.
( function ( ) {
let numOne
=
10
,
numTwo
=
5
// Здесь будет ваш код.
} ) ( )
z
2
Добавьте операторы для простого вывода строк, подтверждающих начальные значения, хранящиеся в каждой переменной.
console.log( '
numOne:
' +
numOne
)
console.log( '
numTwo:
' +
numTwo
)
z
3
Добавьте операторы, чтобы с помощью поби- товых операций поменять местами значения, хранящиеся в каждой переменной.
numOne
= numOne
^ numTwo
// 1010 ^ 0101 = 1111 = (десятичное число 15)
bitwise.html

48
Р
аспространенные операции numTwo
= numOne
^ numTwo
// 1111 ^ 0101 = 1010 (десятичное число 10)
numOne
= numOne
^ numTwo
// 1111 ^ 1010 = 0101 (десятичное число 5)
z
4
Добавьте операторы для вывода разрыва строки и строк, чтобы подтвердить оконча- тельные значения, хранящиеся в каждой пе- ременной.
console.log( '
\n
' + '
numOne:
' +
numOne
)
console.log( '
numTwo:
' + numTwo
)
z
5
Сохраните HTML-документ, затем откройте его в браузере и запустите консоль. Проана- лизируйте результаты вывода.
Приоритет операторов
Операторы JavaScript имеют разные уровни прио- ритета. Приоритет операторов определяет порядок, в котором операторы выполняются. Операторы с бо- лее высоким приоритетом выполняются раньше опе- раторов с более низким приоритетом.
В таблице сверху вниз перечислены операторы каж- дого типа в порядке от самого высокого до самого низкого уровня приоритета:
Обратите внима- ние, каким обра- зом в нашем при- мере для разрыва строки использу- ется специальная escape- последова- тельность \n.

49
Оператор
Описание
( )
Группировка
[ ]
( )
Оператор доступа к объекту
Оператор доступа к массиву
Вызов функции
++ —
Постфиксный инкремент, пост- фиксный декремент
++ —
!
Префиксный инкремент, префикс- ный декремент
Логическое отрицание, побитовое отрицание
**
Возведение в степень
* /%
Умножение, деление, остаток от деления
+ –
Сложение, вычитание
<< >> >>>
Побитовый сдвиг
< <= => >
Сравнение
=== ==!==!=
Строго равно, равно, строго не равно, не равно
&
Побитовое И
^
Побитовое исключающее ИЛИ
|
Побитовое ИЛИ
&&
Логическое И
||
Логическое ИЛИ
?:
Тернарный оператор
=
+= –= *= /=%=
&= ^= |=
<<= >>= >>>=
Операторы присваивания
,
Запятая z
1
Создайте HTML-документ с самовызываю- щейся анонимной функцией, которая ини- циализирует переменную с результатом раз- группированного выражения и выводит его значение.
( function ( ) {
let sum
=
9
+
12
/
3
// Эквивалентно 9 + 4.
console.log( '
Ungrouped sum:
' +
sum
)
} ) ( )
Оператор
[ ]
опи- сан в разделе о массивах, на- чиная со стр. 81.
Также обрати- те внимание, что оператор.
(точка) используется в то- чечной нотации, например console.
log( )
. Он нужен для доступа к свой- ствам или методам объекта (массива или функции).
Пр иор итет precedence.html

50
Р
аспространенные операции z
2
Сохраните HTML-документ, затем откройте его в браузере и запустите консоль. Проана- лизируйте полученные результаты.
Сначала вычисляется деление, так как оператор де- ления имеет более высокий приоритет по срав- нению с оператором сложения, поэтому результат равен 13. Также вы можете определить порядок при- оритета, сгруппировав выражение в круглых скоб- ках, и оно будет вычислено первым, так как опера- тор
( ) имеет самый высокий приоритет.
z
3
Чтобы установить порядок вычисления, вы мо- жете изменить операторы в функции, и сложе- ние будет вычисляться перед делением.
let sum
= (
9
+
12
) /
3
// Эквивалентно 21 / 3.
console.log( '
Grouped sum:
'
+ sum
)
z
4
Сохраните HTML-документ, затем откройте его в браузере и запустите консоль. Проана- лизируйте результаты вывода.
Для определения порядка вычисле- ний в выражениях рекомендуется ис- пользовать круглые скобки
( )

51
Заключение

z
Функции parseInt( )
и parseFloat( )
преобразовывают строки в числа. Функции
String( )
и toString( )
преобразовывают числа в строки.

z
Функция isNaN( )
определяет, является ли литерал или переменная нечисловым значением
NaN

z
Арифметические операторы выполняют матема- тические операции: сложение
+
, остаток от деле- ния
%
, инкремент
++
, декремент

и возведение в степень
**

z
Если операция используется как постфикс (опе- ратор после операнда), значение операнда воз- вращается, а затем увеличивается или уменьша- ется на единицу. Если используется префиксная форма (оператор перед операндом), значение операнда возвращается увеличенным или умень- шенным на единицу.

z
Оператор
=
может быть объединен с арифмети- ческим оператором для выполнения арифме ти- ческой операции, а затем присвоения ее резуль- тата.

z
Оператор присваивания
+=
считается наиболее полезным и может использоваться для добавле- ния строки к уже существующей.

z
Операнды можно сравнивать. Существуют сле- дующие операторы сравнения: строго равно
===
, строго не равно !
==
, больше
>
или меньше
<

z
Комбинированные операторы сравнения
<=
и
>=
возвращают значение true
, если оба операнда равны.

z
Оператор логическое И
&&
проверяет два опе- ранда и возвращает true
, если оба истинны. Опе- ратор логическое ИЛИ
||
находит первое истин- ное значение и возвращает значение true
, а ина- че — false

52
Р
аспространенные операции

z
Оператор логического
HE!
сначала приводит ар- гумент к логическому типу true/false
, а затем воз- вращает противоположное значение.

z
Тернарный оператор
?:
состоит из трех операн- дов. Первый вычисляется и используется как ло- гическое значение. Условие тернарного опера- тора задается в первом операнде. Если он име- ет значение true
, то вычисляется и возвраща- ется значение выражения во втором операнде.
Если же значение false
, то вычисляется и возвра- щается значение выражения в третьем операнде.

z
Побитовые операторы JavaScript для выполнения двоичной арифметики могут манипулировать от- дельными битами двоичной последовательности.

z
Операторы JavaScript имеют разные уровни при- оритета. Приоритет операторов определяет поря- док, в котором операторы выполняются.

z
Для принудительного вычисления определенных частей выражения перед другими используются круглые скобки.

В этой главе вы узнаете
об управляющих
конструкциях в JavaScript,
их назначении и правилах
использования.
Ветвление с помощью оператора if
Альтернативное ветвление
Ветвление с помощью переключателей (оператор switch)
Цикл for
Цикл while
Цикл do..while
Выход из циклов
Обработка ошибок
Заключение
52 54 56 58 60 62 64 66 69
Управляющие конструкции в JavaScript
3

54
У
правляющие к онстр укции в
Ja va
Scrip t
Ветвление с помощью
оператора
if
Иногда возникает необходимость выполнить различ- ные действия в зависимости от условий.
В JavaScript проверка определенных условий выпол- няется с помощью ключевого слова if
. Условный опе- ратор if реализует выполнение конкретных действий при условии, что некоторое логическое выражение принимает значение true или false
. Если результат ра- вен true
, выполняется одна инструкция, в противном случае — другая.
Необходимо, чтобы проверяемое условие после клю- чевого слова if было заключено в круглые скобки.
Синтаксис оператора if выглядит следующим образом:
if (
условие ) код выполняется, если условие истинно
Выполняемые инструкции могут быть представлены одной стро- кой или блоком кода, заключенными в фигурные скобки.
if (
условие )
{
код выполняется, если условие истинно
код выполняется, если условие истинно
код выполняется, если условие истинно
}
Оценка условий и выполнение действий в соответ- ствии с их результатом — это настоящий мыслитель- ный процесс. Например, запрограммируем действия, которые вы можете выполнить в летний день:
let temperature
=
readThermometer
( )
const tolerable
=
25
if ( temperature
>
tolerable
)
{
turn_on_air-conditioning
( )
get_a_cool_drink
( )
stay_in_shade
( )
}
Рекомендуется за- ключать в фигур- ные скобки даже отдельные опера- торы — для сохра- нения согласован- ного стиля.

55
Проверка условий эквивалентна следующему син- таксису if( условие === true )
. Но поскольку JavaScript автоматически преобразует результат выражения в логическое значение, т. е. выполняет проверку ра- венства для истинного значения, нет необходимости включать в скобки оператор
===true z
1
Создайте HTML-документ с самовызываю- щейся функцией, которая начинается с ини- циализации логической переменной.
let
fl ag
=
true z
2
Вставьте операторы для выполнения условий логического значения переменной.
if( !
fl ag
)
{
console.log( '
Power is OFF
' )
}
if(
fl ag
)
{
console.log( '
Power is ON
' )
}
z
3
Вставьте операторы для выполнения условий выражения, сравнивающего два целых числа.
if(
7
<
2
)
{
console.log( '
Failure
' )
}
if(
7
>
2
)
{
console.log( '
Success
' )
}
z
4
Сохраните HTML-документ, затем откройте его в браузере и запустите консоль. Проана- лизируйте полученные результаты.
if.html
Код сценария, соз- дающий функци- ональный блок, в нашем приме- ре опущен. Более подробную ин- формацию по соз- данию анонимных самовызывающих- ся функций вы мо- жете прочитать на стр. 24.
В этом приме- ре оператор
NOT
используется для инвертирования проверки условий, чтобы он стал эк- вивалентным if ( fl ag===false ).

56
У
правляющие к онстр укции в
Ja va
Scrip t
1   2   3   4   5   6   7   8   9   ...   14


Альтернативное
ветвление
Оператор if
, который проверяет условие для логиче- ского значения и выполняет свои операторы только тогда, когда результат равен true
, обеспечивает един- ственную ветвь для выполнения действий. Альтерна- тивная ветвь, по которой действия могут быть выпол- нены при ложном результате, обозначается ключевым словом else
После оператора if следует оператор else
, например:
if (
условие ) выполняется, если условие истинно
else
выполняется, если условие ложно
Оператор if else может также выполнять несколько инструкций, если заключить их в фигурные скобки, например:
if (
условие )
{
выполняется, если условие истинно
выполняется, если условие истинно
}
else
{
выполняется, если условие ложно
выполняется, если условие ложно
}
Иногда возникает необходимость проверить несколь- ко вариантов условия. Для этого используется блок else if
, например:
if (
условие )
{
выполняется, если условие истинно
}
else if (
условие )
{
выполняется, если условие истинно
}
Как только усло- вие в операторе if else оказывается равным true
, выпол- няются связанные с ним операторы, затем поток про- должается после оператора if else
— без проверки по- следующих опера- торов else

57
else if (
условие )
{
выполняется, если условие истинно
}
else
{
выполняется, если условие ложно
}
Оператор if else if может многократно проверять пере- менную или условия. Последний блок else срабатывает по умолчанию, когда не выполнено ни одно условие.
z
1
Создайте HTML-документ с самовызываю- щейся функцией, объявите и проинициали- зируйте две переменные.
let
fl ag
=
false const num
=
10
z
2
Для выполнения условий логического значе- ния первой переменной вставьте следующие операторы.
if( !
fl ag
)
{
console.log( '
Power is OFF
' )
}
else
{
console.log( '
Power is ON
' )
}
z
3
Для выполнения условий числового значе- ния второй переменной добавьте следующие операторы.
if( num
===
5
)
{
console.log( '
Number is Five
' )
}
else if( num
===
10
)
{
console.log( '
Number is Ten
' )
}
else.html
Оператор if может содержать блок else
. Он выполня- ется, когда усло- вие ложно. Блок else if использует- ся при необходи- мости проверить несколько вариан- тов условия.

58
У
правляющие к онстр укции в
Ja va
Scrip t
else
{
console.log( '
Number is Neither Five nor Ten
' )
}
z
4
Сохраните HTML-документ, затем открой- те его в браузере и запустите консоль. Про- анализируйте полученные результаты — ус- ловия, которые были выполнены, а которые проигнорированы.
Ветвление с помощью
оператора
switch
Оператор if else подходит для проверки лишь не- скольких условий, однако может стать неудобным при столкновении со множеством условий. В такой ситуации наиболее эффективно использовать опера- тор switch
Оператор switch работает необычным образом. Он сравнивает выражение с вариантами, перечисленны- ми внутри нее, а затем выполняет соответствующие действия. Если совпадение найдено, оператор switch выполнит один или несколько операторов, связан- ных с этим значением, в противном случае он вы- полнит один или несколько операторов, указанных как «операторы по умолчанию».
Оператор switch начинается с заключения выраже- ния, которое необходимо проверить, в круглые скоб- ки после ключевого слова switch
. Затем следуют фи- гурные скобки
{}
, которые содержат возможные


59
совпадения. Каждое значение соответствия следует за ключевым словом case и использует символ дво- еточия: для связывания одного или нескольких вы- полняемых операторов. Необходимо отметить, что каждый случай должен заканчиваться оператором break
, который выполняет выход из блока switch
Опциональный оператор break может располагаться в каждом из случаев, однако он необязателен. В слу- чае отсутствия оператора break выполняются следую- щие операторы из блока switch
Синтаксис оператора switch выглядит таким образом:
switch (выражение)
{
case
значение-1 : операторы, которые выполняются
при нахождении совпадения ; break case
значение-2 : операторы, которые выполняются
при нахождении совпадения ; break case
значение-3 : операторы, которые выполняются
при нахождении совпадения ; break default :
операторы, которые выполняются, если совпа-
дения не найдено
}
Ограничений на количество блоков case
, которые мо- гут быть включены в блок операторов switch
, не суще- ствует. Поэтому его использование — это идеальный вариант, чтобы сопоставить любое из десятков, сотен или даже тысяч различных значений.
z
1
Создайте HTML-документ с самовызываю- щейся функцией, объявите и проинициали- зируйте переменную.
let day z
2
Затем добавьте оператор switch
, чтобы при- своить значение переменной после проверки выражения.
switch(
5

2
)
{
case
1
:
day
= '
Monday
' ; break
Игнорирование оператора break по- зволяет сценарию выполнять опера- торы, связанные с последующими несоответствую- щими значениями блока case switch.html

60
У
правляющие к онстр укции в
Ja va
Scrip t
case
2
:
day
= '
Tuesday
' ; break case
3
:
day
= '
Wednesday
' ; break case
4
:
day
= '
Thursday
' ; break case
5
:
day
= '
Friday
' ; break default : day
= '
Weekend
'
}
z
3
Добавьте оператор для вывода значения, на- значенного оператором case при совпадении.
console.log( '
It is
' + day
)
z
4
Сохраните HTML-документ, затем откройте его в браузере и запустите консоль. Проана- лизируйте полученные результаты.
Цикл
for
Цикл — это структура, содержащая условие и один или несколько операторов, которые повторно вы- полняются, пока выполняется условие. Повторение процесса с целью получения результата называется итерацией. Если условие не выполняется, дальней- шие итерации также игнорируются, и выполнение продолжается со следующего оператора, идущего за структурой цикла.
Цикл for
— наиболее распространенная структура цикла в JavaScript. Он имеет такой синтаксис:
for (
инициализатор ; условие ; модификатор ) { операто-
ры на выполнение }
В скобках после ключевого слова for указываются три выражения, управляющие числом итераций цикла:
Строковые значе- ния, предлагаемые в качестве возмож- ных совпадений в блоке case
, долж- ны быть заключены в кавычки, как и все другие строковые значения.