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

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

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

Добавлен: 16.03.2024

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

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


97
1   2   3   4   5   6   7   8   9   10   ...   14

Установка даты
и времени
Конструктор
Date( )
может дополнительно указывать от двух до семи аргументов для установки значений для каждого из его компонентов, например:
new Date(
год, месяц, день, часы, минуты, секунды,
миллисекунды
)
Если указаны только год и месяц, соответствующим компонентам устанавливается единица (1), а осталь- ным — ноль (0).
Объект
Date также предоставляет отдельные методы для установки значений даты и времени:
Метод
Описание setDate( )
Устанавливает день (1–31)
setFullYear( )
Устанавливает год (yyyy)
setMonth( )
Устанавливает месяц (0–11)
setHours( )
Устанавливает часы (0–23)
setMinutes( )
Устанавливает минуты (0–59)
setSeconds( )
Устанавливает секунды (0–59)
setMilliseconds( )
Устанавливает миллисекунды (0–999)
Метод setMonth( ) устанавливает месяц в диапазоне, где 0 = январь — 11 = декабрь. При необходимости с помощью метода setFullYear( )можно установить месяц и день, используя следующий синтаксис:
date.setFullYear(
год , числоМесяца , числоДня )
21
Метод toString( ) воз- вращает строко- вое значение лю- бого объекта
JavaScript.

98
У
правление об ъектами
Значения каждого компонента даты и времени мо- гут быть установлены с помощью объекта
Date
. Кро- ме того, существуют методы для вывода различ- ных строк, отображающих дату и время. Метод toString( )
преобразует дату в строковое значение; ме- тод toUTCString( ) преобразует дату в ее эквивалент в формате UTC; метод toLocaleString( )
отображает дату в зависимости от используемой локали. Методы toDateString( ) и toTimeString( )
могут отображать компо- ненты даты и времени.
z
1
Создайте HTML-документ с самовызыва- ющейся функцией и создайте объект
Date
«4 июля».
const holiday = new Date
(
2025
,
6
,
4
) console.log( '
Object:
' +
holiday
)
z
2
Чтобы в полдень наступило Рождество, необ- ходимо изменить отдельные компоненты даты. Для этого добавьте операторы.
holiday
.setFullYear(
2028
)
holiday
.setMonth(
11
)
holiday
.setDate(
25
)
holiday
.setHours(
12
)
holiday
.setMinutes(
0
)
holiday
.setSeconds(
0
)
holiday
.setMilliseconds(
0
)
z
3
Для вывода измененной даты, времени и эк- вивалента в формате UTC (GMT) добавьте следующие операторы.
console.log( '
String:
' +
holiday
.toString( ) )
console.log( '
UTC:
' + holiday
.toUTCString( ) )
z
4
Добавьте операторы для вывода изменен- ной даты и времени в формате строк локали, даты и времени.
console.log( '
Locale:
' +
holiday
.toLocaleString( ) )
console.log( '
Date:
' +
holiday
.toDateString( ) )
console.log( '
Time:
' +
holiday
.toTimeString( ) )
setdate.html
Также существу- ет метод setTime( )
, который устанав- ливает объект
Date в значение време- ни, представлен- ным количеством миллисекунд, про- шедших с 1 ян- варя 1970 года
00:00:00 по UTC.
Каждый день —
86|400 000 мил- лисекунд, поэто- му setTime(86400000)
устанавлива- ет дату 1 января
1970 года.


99
z
5
Сохраните HTML-документ, затем открой- те его в браузере и запустите консоль. Проа- нализируйте полученные результаты — уста- новленные дату и время.
Сопоставление текста
с шаблоном
Объект
RegExp
— это встроенный объект JavaScript, который создает объект регулярного выражения для сопоставления текста с шаблоном. Регулярные вы- ражения используются как средство для поиска и за- мены текста при помощи шаблонов.
Шаблон регулярного выражения может состоять це- ликом из символьных литералов, заключенных меж- ду символами
//
. Например, регулярное выражение
/wind/
найдет совпадение в строке «windows» — шаблон строго совпадает со строкой в тексте. Как правило, шаблон регулярного выражения состо- ит из набора символьных литералов и специальных символов или метасимволов.
Для выполнения поиска без учета регистра шаблон мо- жет также включать модификатор i
после последнего символа
/
или модификатор g
для выполнения глобаль- ного поиска всех совпадений шаблона. Метод test( )
вы- полняет поиск сопоставления регулярного выражения
Тема регулярных выражений об- ширна и выходит за рамки этой кни- ги. Здесь на тему регулярных выра- жений приводятся лишь краткие све- дения.

100
У
правление об ъектами указанной строке. При обнаружении совпадения метод test( )
возвращает значение true
, в противном случае — false
. Метод exec( )
выполняет поиск сопоставления ре- гулярного выражения в указанной строке и возвращает массив с результатами или значение null
Index
— индекс сопоставления в строке — начинается с нуля.
Специальный символ
Значение
Пример
Любой символ ja..pt
^
Начало строки
^ja
$
Конец строки
… pt$
*
Повторение фрагмента 0 или более раз ja*
+
Повторение фрагмента 1 или более раз ja+
?
Фрагмент либо присутству- ет, либо отсутствует (0 или 1)
ja?
{}
Множественное повторение ja{3}
[]
Класс символов
[a-z]
\
Специальная последова- тельность
\d
|
Фрагмент слева или фраг- мент справа a|b
( )
Группировка выражений
(…)
z
1
Создайте HTML-документ с самовызываю- щейся функцией. Объявите и проинициали- зируйте три переменные.
const system
= '
Windows
',
suite
= '
Offi ce
'
pattern
=
/ice/i z
2
Добавьте операторы для вывода результатов поиска.
console.log( '
In
' + system
+'
?
' +
pattern
.test( system
) )
console.log('
In
' + suite
+ '
?
' + pattern
.test( suite
) )
z
3
Добавьте операторы для вывода совпа- дающего текста и позиции. В противном случае — сообщение о том, что совпаде- ния не найдены.
regexp.html
Диапазон сим- волов
[a-z]
соот- ветствует только строчным симво- лам латинского ал- фавита, а диапазон
[a-z0–9]
включает еще и цифры.


101
let result
= pattern.
exec(
suite
)
if( result
)
{
console.log( '
Found
' +
result
+ ' at
' +
result
.index )
}
else { console.log( '
No Match Found
' ) }
z
4
Добавьте операторы для вывода результата проверки некорректного адреса электронной почты.
let email
= '
mike@example
'
const format
=
/.+\@.+\..+/
console.log(
email
+ '
Valid?
' + format
.test(
email
) )
z
5
Добавьте операторы для исправления адреса и вывода результата проверки.
email
+= '
.com
'
console.log( email
+ '
Valid?
' + format
.test( email
) )
z
6
Сохраните HTML-документ, затем открой- те его в браузере и запустите консоль. Проа- нализируйте полученные результаты — регу- лярные выражения.
Используемое в этом примере регулярное выра- жение проверяет только самые ос- новные требования к формату элек- тронной почты.
Нумерация индек- сов в строке начи- нается с нуля, по- этому четвертый символ находится в позиции индек- са 3.

102
У
правление об ъектами
Заключение

z
Значения присваиваются объекту в виде разделенного запятыми списка name: value
(имя: значение), заключенного в фигурные скобки
{}

z
На значения свой ств объекта можно ссылаться с использованием точечной нотации, или указав их в квадратных скобках
[]

z
Методы объекта вызываются с помощью добавления после имени круглых скобок
( )

z
Ключевое слово this относится к объекту, к которому оно принадлежит.

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

z
Пользовательские объекты могут быть в любое время легко расширены и изменены. Для этого нужно лишь назначить новое значение с помощью точечной нотации.

z
Цикл for in используется для перечисления всех свой ств и методов объекта.

z
Все объекты в JavaScript наследуют свой ства и методы из прототипа объекта
Object.prototype

z
Объект
Array
— это встроенный объект
JavaScript, который используется для хранения упорядоченных коллекций данных
(с различными типами данных). Элементы массива нумеруются автоматически, начиная с нуля.

z
Объекты массивов создаются путем присвоения переменным литеральных значений, указанных в квадратных скобках
[]
и разделенных запятыми.

z
Доступ к элементам массива осуществляется с помощью оператора
[]

103

z
Чтобы узнать длину массива, необходимо обратиться к его свой ству length

z
Встроенный объект
Date представляет конкретную дату, время и часовой пояс.

z
Конструктор
Date( )
может дополнительно указывать от двух до семи аргументов для установки значений для каждого из его компонентов.

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

z
Объект
RegExp
— это встроенный объект
JavaScript, который создает объект регулярного выражения для сопоставления текста с шаблоном.

z
Методы test( )
и exec( )
выполняют поиск сопоставления регулярного выражения в указанной строке.


В этой главе вы
познакомитесь с методами
встроенных объектов Math
и String.
Вычисление площади
Сравнение чисел
Округление чисел
Генерация случайных чисел
Объединение строк
Разбиение строк
Поиск символов
Обрезка строк
Заключение
104 106 108 110 112 115 117 119 121
Работа с числовыми и строковыми типами данных
5

106
Р
або та с числовыми и строк овыми типами данных
Вычисление площади
Объект
Math
— встроенный объект JavaScript, хра- нящий в своих свой ствах и методах различные кон- станты и функции. Ниже в таблице приведены кон- станты, их описание и значение.
Константа
Описание
Math.E
Число Эйлера или Непера, основание натуральных логарифмов, приблизитель- но равное 2,71828
Math.LN2
Натуральный логарифм из 2, приблизи- тельно равен 0,69315
Math.LN10
Натуральный логарифм из 10, приблизи- тельно равен 2,30259
Math.LOG2E
Двоичный логарифм из Е, приблизитель- но равен 1,44269
Math.LOG10E
Десятичный логарифм из Е, приблизи- тельно равен 0,43429
Math.PI
Число Пи, приблизительно равно
3,14159
Math.SQRT1_2
Квадратный корень из 0,5, приблизи- тельно равен 0,70711
Math.SQRT2
Квадратный корень из 2, приблизитель- но равен 1,41421
Нет необходимости создавать экземпляр объекта
Math
, так как он присутствует по умолчанию, поэтому доступ к математическим константам и методам осу- ществляется через объект
Math и с помощью точеч- ной нотации.
Константы этого объекта, как правило, используются для вычисления каких-либо математических опера- ций. В таблице выше перечислены наиболее распро- страненные из них.
Все методы объ- екта
Math описаны на стр. 108.

107
z
1
Создайте HTML-документ с самовызываю- щейся функцией. Объявите и проинициали- зируйте переменную.
let radius
=
4
console.log( '
\nRadius of Circle:
' + radius
)
z
2
Добавьте операторы для выполнения матема- тического расчета и вывода результата.
let area
= Math.PI * ( radius
*
radius
)
console.log( '
\nArea of Circle:
' +
area
)
z
3
Добавьте операторы для выполнения еще од- ного математического расчета и вывода ре- зультата.
let circumference
=
2
* ( Math.PI *
radius
)
console.log( '
\nPerimeter of Circle:
' + circumference
)
z
4
Добавьте операторы для выполнения оконча- тельного математического расчета и вывода результата.
let cube
= (
radius
*
radius
*
radius
)
let volume
= ( (
4 / 3
) * Math.PI) *
cube console.log('
\nVolume of Sphere:
' +
volume
)
z
5
Сохраните HTML-документ, затем откройте его в браузере и запустите консоль. Проана- лизируйте полученные результаты — мате- матические расчеты.
constants.html
Имена констант объекта
Math за- писываются пол- ностью пропис- ными символами.
Например,
Math.PI
, а не
Math.pi