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

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

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

Добавлен: 16.03.2024

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

Скачиваний: 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


61

z
Инициализатор — инструкция, указывающая начальное значение переменной, которая будет использоваться для подсчета количества итераций цикла. Обычно эту переменную счетчика называют просто «i».

z
Условие — выражение, которое при каждой итерации проверяется на логическое значение true
. Если выражение принимает значение true
, выполняются операторы цикла для завершения итерации. Если выражение принимает значение false
, операторы не выполняются, и цикл завершается. Обычно в условии проверяется значение переменной счетчика цикла.

z
Модификатор — оператор, который изменяет значение в условии, поэтому в какой-то момент в результате вернется значение false
. Обычно при этом увеличивается или уменьшается значение переменной счетчика цикла.
Например, структура цикла for при выполнении на- бора операторов сто раз может выглядеть следующим образом:
let i for ( i = 0 ; i < 100 ; i++ ) { операторы-на-выполнение }
В этом случае при каждой итерации переменная счетчика увеличивается, пока ее значение не достиг- нет значения
100
, после чего в результате вернется значение false
, и цикл завершится.
z
1
Создайте HTML-документ с самовызываю- щейся функцией, объявите и проинициали- зируйте переменную счетчика цикла.
let i
=
0
z
2
Вставьте структуру цикла for
, которая будет выполнять 10 итераций и при каждой ите- рации выводить на экран значение счетчика цикла.
for( i
=
1
;
i
<
11
;
i
++ )
Если модифика- тор не позволяет в какой-то момент вернуть значение false
, создается бес- конечный цикл, т. е. цикл будет выпол- няться бесконеч- ное число раз.
for.html

62
У
правляющие к онстр укции в
Ja va
Scrip t
{
console.log( '
Iteration Number:
' +
i
)
}
z
3
Сохраните HTML-документ, затем откройте его в браузере и запустите консоль. Проана- лизируйте полученные результаты — итера- ции цикла.
Цикл
while
Структура цикла for
, описанная на стр. 000, идеаль- на, когда количество требуемых итераций извест- но. В ином случае предпочтительнее использовать структуру цикла while
. Так выглядит его синтаксис:
while(
условие )
{
операторы-на-выполнение
модификатор
}
В скобках после ключевого слова while указывается условие или выражение, логическое значение кото- рого проверяется каждый раз перед заходом в цикл.
Операторы, которые должны выполняться при
Мы рассмотрели обычный цикл for
Существует также специальный цикл for in
, который ис- пользуется для пе- ребора свой ств объекта. На стр. 76 вы можете найти о нем более под- робную информа- цию.


63
каждой итерации, заключаются в фигурные скоб- ки вместе с оператором, который изменяет значение в условии. Поэтому в определенный момент в ре- зультате вернется значение false
, и цикл завершится.
Пока результат равен true
, операторы будут выпол- няться на каждой итерации цикла.
Если на первой итерации условие принимает зна- чение false
, цикл немедленно завершается, поэтому операторы, указанные в фигурных скобках, никог- да не выполняются. Циклы while и циклы for иногда называют циклами предварительного тестирования, поскольку их тестовое условие проверяется до вы- полнения каких-либо операторов.
Цикл while может быть выполнен для определенно- го количества итераций, аналогично циклу for
, ис- пользуя переменную счетчика в качестве условия проверки и увеличения ее значения на каждой ите- рации. Например, структура цикла while для выпол- нения набора операторов 100 раз может выглядеть следующим образом:
let i = 0
while ( i < 100 )
{
операторы-на-выполнение
i++;
}
На каждой итерации переменная счетчика увеличи- вается до тех пор, пока значение не достигнет
100
, после чего результат будет равен false
, и цикл завер- шится.
z
1
Создайте HTML-документ с самовызываю- щейся функцией, объявите и проинициали- зируйте переменную счетчика цикла.
let i
=
10
z
2
Вставьте структуру цикла while
, которая будет выполнять итерации и при каждой итерации выводить на экран значение счетчика цикла, пока не достигнет значения 0.
При отсутствии модификатора в структуре цик- ла while возникнет бесконечный цикл, т. е. цикл будет вы- полняться беско- нечное число раз.
while.html

64
У
правляющие к онстр укции в
Ja va
Scrip t
while( i
>
-1
)
{
console.log( '
Countdown Number:
' +
i
) i
--
}
z
3
Сохраните HTML-документ, затем откройте его в браузере и запустите консоль. Проана- лизируйте полученные результаты.
Цикл
do..while
Другой пример циклической структуры в JavaScript — это цикл do..while
. Он похож на ин- вертированную версию цикла while
, описанную на стр. 62–63 Цикл do..while используется тогда, ког- да известно, что цикл необходимо запустить хотя бы один раз. Его синтаксис выглядит так:
do
{
операторы-на-выполнение
модификатор
}
while(
условие )
Каждый цикл while необходимо за- ключать в фигур- ные скобки, так как содержит- ся как минимум два оператора — один выполняемый оператор и моди- фикатор.

65
В скобках после ключевого слова while указывается условие или выражение, логическое значение кото- рого проверяется каждый раз после захода в цикл.
Операторы, которые должны выполняться при ка- ждой итерации, заключаются в фигурные скобки вместе с оператором, который изменяет значение в условии. Поэтому в определенный момент в ре- зультате вернется значение false
, и цикл завершится.
Пока результат равен true
, операторы будут выпол- няться на каждой итерации цикла.
Если на первой итерации условие принимает зна- чение false
, цикл немедленно завершается, поэтому операторы, указанные в фигурных скобках, выполня- ются только один раз. Цикл do..while иногда называют циклом с постусловием, так как в отличие от преды- дущих циклов он вначале исполняет команды, а за- тем проверяет заданное условие.
Цикл do..while можно принудительно заставить вы- полнять итерации определенное количество раз, аналогично циклу for
, используя переменную счет- чика в качестве условия проверки и увеличивая ее значение на каждой итерации. Например, структу- ра цикла do while для выполнения набора операторов
100 раз может выглядеть следующим образом:
let i = 0
do
{
операторы-на-выполнение
i++
}
while ( i < 100 )
Переменная счетчика увеличивается на каждой ите- рации до тех пор, пока ее значение не достигнет
100
, после чего в результате вернется значение false
, и цикл завершится.
z
1
Создайте HTML-документ с самовызываю- щейся функцией. Объявите и проинициали- зируйте переменную счетчика цикла.
let i
=
2
Цикл do..while ре- комендуется ис- пользовать только в том случае, если операторы необ- ходимо выполнить хотя бы один раз.
do.html


66
У
правляющие к онстр укции в
Ja va
Scrip t
z
2
Вставьте структуру цикла do..while
, которая будет выполнять итерации и при каждой ите- рации выводить на экран значение счетчика цикла, пока не превысит значения 1000.
do
{
i
*=
2
console.log( '
Multiplied Number:
' +
i
)
}
while(
i
<
1000
)
z
3
Сохраните HTML-документ, затем откройте его в браузере и запустите консоль. Проана- лизируйте полученные результаты.
Выход из циклов
Оператор break прерывает выполнение текуще- го цикла при обнаружении заданного условия.
В циклах он обычно используется для немедленного выхода, когда в зависимости от каких-либо условий требуется завершить выполнение цикла.
Если оператор break используется в цикле, вложен- ном во внешний цикл, блок операторов выполняется во внешнем цикле.
Обратите внима- ние, что оконча- тельное значение превышает пре- дельное значение условия, так как оно записывает- ся на выходе перед выполнением про- верки.

67
Оператор continue прерывает выполнение итерации текущего или отмеченного цикла и продолжает его выполнение на следующей итерации.
Если оператор continue используется в цикле, вло- женном во внешний цикл, блок операторов выпол- няется на следующей итерации внутреннего цикла.
z
1
Создайте HTML-документ с самовызываю- щейся функцией. Объявите и проинициали- зируйте переменную счетчика цикла.
let i
=
0
let j
=
0
z
2
Добавьте цикл for
, содержащий внутренний вложенный цикл for for ( i
=
1
;
i
<
3
;
i
++ )
{
console.log( '
Outer Loop:
' +
i
)
for ( j =
1
;
j
<
4
;
j
++
)
{
// Здесь будет ваш код.
console.log( '
\tInner Loop:
'
+
j
)
}
}
z
3
Сохраните HTML-документ, затем открой- те его в браузере и запустите консоль. Про- анализируйте полученные результаты — две итерации внешнего цикла и три итерации внутреннего цикла.
В контексте опе- ратора switch опе- ратор break обыч- но используется в конце каждого блока для его за- вершения.
break.html
В данном случае escape- последова- тельность \t ис- пользуется для перемещения по- зиции печати к следующей пози- ции горизонталь- ной табуляции.

68
У
правляющие к онстр укции в
Ja va
Scrip t
z
4
Во внутренний цикл вставьте операторы, чтобы пропустить его итерацию и выйти из внешнего цикла.
if( ( i
===
1
)
&& (
j
===
2
) ) {
console.log( '
\tSkipped:
' +
j
)
continue
}
if( ( i
===
2
)
&& (
j
===
2
) ) {
console.log( '
\tBroken:
' +
j
)
break
}
z
5
Сохраните HTML-документ, затем откройте его в браузере и запустите консоль. Проана- лизируйте полученные результаты — выход из цикла.
Обработка ошибок
В JavaScript существует конструкция try..catch
, позво- ляющая обрабатывать ошибки (исключения). Опера- торы, которые должны быть выполнены, внутри блока try..catch заключаются в фигурные скобки, а исключе- ния передаются в качестве аргумента в следующий блок catch
. Конструкция try..catch может содержать сек- цию
fi nally
, содержащую операторы, которые должны выполняться после обработки ошибок.
Оператор break удобно использо- вать, когда в опре- деленной ситуа- ции необходимо выйти из цикла.


69
JavaScript имеет встроенный объект ошибки, который предоставляет информацию при ее возникновении.
JavaScript распознает следующие ошибки:
Error
,
EvalError
,
InternalError
,
RangeError
,
ReferenceError
,
SyntaxError
,
TypeError и
URIError
. Они могут быть автоматически созданы и пе- реданы в блок catch с помощью ключевого слова new и конструктора, а затем переданы при использовании ключевого слова throw
Каждый объект ошибки имеет два свой ства: name и message
, позволяющие устанавливать или возвращать сообщение об ошибке.
В качестве альтернативы для идентификации ошиб- ки строка может быть передана в блок catch с по- мощью оператора throw
. Вы можете генерировать ошибки (исключения). Исключения могут быть строкой, числом, логическим значением или объек- том JavaScript.
z
1
Создайте HTML-документ с самовызываю- щейся функцией. Объявите и проинициали- зируйте переменную.
let day
=
32
z
2
Для распознавания недопустимых целочис- ленных значений вставьте блок try try
{
if( day
>
31
)
{
throw new RangeError( '
Day Cannot Exceed 31
'
)
}
if( day
<
1
)
{
throw '
invalid
'
}
}
z
3
Для обработки недопустимых целочисленных значений к блоку try добавьте блок catch catch.html

70
У
правляющие к онстр укции в
Ja va
Scrip t
catch( err
)
{
if( err
=== '
invalid
' )
{
console.log( '
Variable has invalid value of
' + day
)
}
else
{
console.log( err
.name + '
Exception:
' + err
.message )
}
}
z
4
Для вывода окончательного сообщения к блоку catch добавьте блок
fi nally
fi nally
{
console.log( '
The script has ignored the error…
' )
}
z
5
Сохраните HTML-документ, затем открой- те его в браузере и запустите консоль. Проа- нализируйте результаты — полученное сооб- щение об ошибке.
z
6
Чтобы увидеть обнаруженную ошибку, изме- ните значение переменной на 0, затем сохра- ните HTML-документ и обновите страницу в браузере.
Чтобы обнару- жить автомати- ческую ошибку
ReferenceError
, удали- те или закоммен- тируйте объявле- ние переменной day
, затем сохрани- те и обновите этот пример.

71
1   2   3   4   5   6   7   8   9   ...   14

Заключение

z
Оператор if проверяет условие на наличие логического значения true или false

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

z
С помощью оператора switch можно сравнить выражение сразу с несколькими условиями.

z
В блоке switch каждый блок case должен заканчиваться оператором break
, чтобы прервать выполнение.

z
Блок switch может содержать оператор default
Оператор default выполняется, если ни один вариант не совпал.

z
В цикле for указывается инициализатор, условие, которое должно быть проверено на логическое значение true или false
, и модификатор.

z
Модификатор — это оператор, который изменяет значение в условии, поэтому в какой- то момент в результате вернется значение false
, и происходит выход из цикла.

z
Циклы while и for проверяют условие перед выполнением блока операторов.

z
Цикл do..while проверяет условие после того, как блок операторов был выполнен.

z
Оператор break прерывает выполнение текущего цикла.

z
Оператор continue прерывает выполнение текущей итерации в цикле и продолжает на следующей итерации.

z
Структура try..catch используется для обработки возникающих в сценарии ошибок (исключений).

72
У
правляющие к онстр укции в
Ja va
Scrip t

z
Каждый объект ошибки имеет два свой ства: name и message
, позволяющие устанавливать или возвращать сообщение об ошибке.

z
В качестве альтернативы для идентификации ошибки строка может быть передана в блок catch с помощью оператора throw

z
Конструкция try..catch может содержать секцию
fi nally с операторами, которые должны выполняться после обработки ошибок.

В этой главе вы научитесь
создавать объекты
и использовать встроенные
объекты JavaScript.
Пользовательские объекты
Расширенные функции
Встроенные объекты
Создание массивов
Обход элементов в цикле
Методы управления элементами в массиве
Сортировка элементов массива
Получение даты
Получение календаря
Получение времени
Установка даты и времени
Сопоставление текста с шаблоном
Заключение
72 74 76 79 81 84 86 88 90 93 95 97 100
Управление объектами
4

74
У
правление об ъектами
Пользовательские
объекты
Объекты реального мира окружают нас повсюду, и каждый из них имеет атрибуты и модель поведе- ния, которые мы можем описать:

z
Атрибуты — это особенности, характеризующие объект.

z
Поведение — это действия, которые могут выполняться над объектом или которые может выполнять сам объект.
Например, объект автомобиль можно описать с по- мощью атрибутов «марка» и «модель», а также мо- дель поведения «ускорение» и «торможение».
Эти элементы могут быть представлены в JavaScript с помощью пользовательского объекта car
, содержа- щего свой ства make и model
, а также методы accelerate(
)
и brake( )
Значения присваиваются объекту в виде разделенно- го запятыми списка пар 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( )
Пробелы игнори- руются в списке пар name: value
(имя: значение), но не забывайте эти пары разделять запятыми.