Добрый день! Я рад приветствовать вас на курсе JavaScript для профессионалов. Тема урока: свойства объекта window. Работа со строками и регулярными выражениями. В первой части сегодняшнего урока мы рассмотрим несколько объектов, которые доступны через свойства глобального объекта window. Мы рассмотрим объекты location, navigator. Рассмотрим функции позволяющие создавать таймеры и планировать запуск определенного функционала через определенный интервал времени. Во второй части урока мы детальнее рассмотрим методы, которые есть у строковых объектов. Рассмотрим как можно с помощью этих методов манипулировать значениями строковых переменных. И в конце урока мы рассмотри регулярные выражения, рассмотрим как с помощью регулярных выражений можно валидировать строковые данные, как можно производить поиск в строковых значениях и т.д. Начнем урок с таймеров. Мы с вами сейчас рассмотрим способы планирования запуска своих функций. В языке JavaScript есть две возможности запланировать запуск: однократно, через определенный таймаут. Это делается с помощью функции setTimeout() и мы можем запланировать запуск функции многократно через определенный интервал времени. Например, чтобы функция стартовала каждую секунду, вот так делала бесконечно долго. С помощью setInterval() мы можем сделать планирование ежесекундного запуска определенной функции, а с помощью setTimeout() можем запланировать один запуск функции через определенный таймаут. Давайте посмотрим первые примеры работы с таймерами. Для того, чтобы создать таймер мы можем воспользоваться глобальной функцией setTimeout(). На 11 строке запуская функцию setTimeout() мы этой функции должны передать как минимум два параметра: Первый параметр – это то, что мы хотим запустить, то есть та функция, которую мы хотим выполнить через определенный отрезок времени. Второй параметр – это количество миллисекунд, которые должны пройти перед тем, как функция будет запущена. По сути на этой строке мы указываем, что функцию showMessage() нужно запустить через 5 секунд По завершению вызова на 11 строчке. Вы знаете, что в одной секунде 1000 миллисекунд. По этому значение, которое мы указываем вторым параметром – это количество миллисекунд. На 11 строке эта строчка выполнится и браузер продолжит дальнейшую работу и начнет выполнять код, который находится ниже. В нашем случае этого кода нету. Но когда пройдет 5 секунд у браузера сработает таймер и браузер запустит функцию, которая находится на 13 строке. То есть после загрузки документа по истечению 5 секунд у нас отобразится сообщение Hello world. Давайте проверим. Прошло 5 секунд и сообщение отобразилось. Вот это и есть задача функции setTimeout() – запланировать запуск нашей функции через определенный промежуток времени. Эту функцию можно также использовать в другом ключе, мы можем использовать вот такую более короткую запись. Используя setTimeout() первым параметром мы сразу же передаем анонимную функцию, а вторым параметром передаём интервал времени. Вот, код будет работать абсолютно одинаково. Давайте мы сейчас сделаем, что бы запуск произошел через пол секунды, и через пол секунды тоже запустился alert(). По этом у в зависимости от ситуации выбирайте тот способ запуска функции, который наиболее подходящий, наиболее удобный в вашем приложении. Следующая функция, которую мы можем использовать – это setInterval() с ее помощью мы планируем неоднократный запуск функции. Когда загружается текущий документ, мы создаем счетчик, переменную counter со значением 0. Далее определяем функцию с именем count и в эту функцию помещаем код, который увеличивает счетчик, а потом находит в теле документа элемент с id output, то есть вот этот элемент и в innerHTML этого элемента записывает значение переменной counter. То есть вызвали функцию count – счетчик увеличился, увеличенное значение вывелось в документ. Вызвали еще раз функцию count, вызвали счетчик и уже новое значение вывелось в документ. Мы хотим сделать так, чтобы эта функция count у нас бесконечно долго запускалась с определенным интервалом. Для этого на 17 строке мы вызываем функцию setInterval(). В предыдущем примере был setTimeout(), а здесь setInterval() и это означает, что при вызове жатой функции мы передаем такие же параметры: функцию и время, через которое нужно запустить функцию. Но теперь JavaScript будет планировать запуск этой функции не один раз, а неоднократно, много раз. Запустили функцию count, подождали секунду, запустили еще раз, подождали секунду, запустили еще раз и так бесконечно. Давайте проверим. Видите, вот у нас тикает счетчик. Каждую секунду вызывается функция count, увеличивает счетчик, и его новое значение отображает в документе. Но что делать, если мы не хотим, чтобы счетчик тикал вечно. Если мы хотим контролировать этот счетчик в нужный момент времени. В следующих примерах показано, как это можно сделать.

В примере номер три в документе сообщение будет размещено через 5 секунд, а на 25 строке находится ссылка, в которой с помощью псевдопротокола JavaScript мы запускаем функцию cancel(), если мы делаем нажатие. В начале давайте посмотрим, что произойдет, когда документ у нас загрузится. На 8 строке мы обрабатываем событие загрузки окна и при этом, при загрузке окна мы вызываем на объекте window функцию setTimeout(). Вот на самом деле функцию setTimeout() можно вызывать как в предыдущих примерах вот таким способом, так и через глобальный объект window, потому что все функции и все переменные, которые мы создаем, они превращаются в свойства и методы глобального объекта window. По этому мы можем и такой способ использовать с явным указанием, что вызываем функцию на объекте, либо использовать вот такой вот синтаксис. Разницы при этом никакой не будет. Вызывая метод setTimeout() мы указываем, что showMessage() мы хотим запустить через 5 секунд. Любая функция, которая создает таймер, и setTimeout() и setInterval() возвращает нам переменную, возвращает нам объект, который мы записываем в переменную. Вот объект, который находится в этой переменной timer, с его помощью мы можем контролировать этот таймаут, который мы установили на 9 строке. Вот если мы ничего не будем делать, то по прохождении 5 секунд у нас таймаут запустится и сработает showMessage(). Но если мы в течении этих 5 секунд, пока ожидается запуск функции. Если мы нажмем на ссылку отмена и запустим JavaScript функцию cancel(), то в таком случае на строке 18 запускается функция clearTimeout(), которая в качестве параметра принимает объект, полученный при запуске setTimeout(). Вот если в течении 5 секунд выполнить clearTimeout() то браузер отменит работу этого таймера и не будет запускать функцию show message через 5 секунд. Давайте проверим, что будет если мы ничего не делаем. Запускаем пример, ждем 5 секунд и видим, то браузер отображает нам сообщение. Но если мы обновляем страницу и нажимаем на ссылку Отмена. То сколько бы мы уже не ждали, setTimeout() не сработает и отображать сообщение уже не будет. В этом примере мы увидели противоположный метод setTimeout() – метод clearTimeout(), который удаляет запланированный вызов функции. И точно так же у на сеть функция, которая позволяет остановить интервал, остановить бесконечный запуск определенной функции. Давайте мы в начале посмотрим как работает этот пример. Нажав на кнопку Start мы видим, как у нас увеличивается счетчик, нажав на кнопку Stop, счетчик останавливается. Продолжает увеличиваться, останавливается. В этом примере в разметке у нас есть параграф, в котором будет выводится значение счетчика и две кнопки: кнопка startButton и stopButton. Обратите внимание, что здесь мы используем не навязчивый JavaScript код. Если посмотреть на HTML разметку, то мы не может сказать, что где-то существует JavaScript. У нас есть просто элементы с уникальными идентификаторами, а отдельно есть JavaScript код, который находит элементы по идентификатору и начинает выполнять какие-то операции с этими элементами. Давайте посмотрим как у нас работает наш пример. Ну, во-первых, как всегда мы делаем обработчик на загрузку документа, но дополнительно, чтобы было удобней работать с этим документом на строке 26 мы создаем переменную get, в которую записываем функцию, и задача этой функции – принимать идентификатор и возвращать объект, который найден в DOM дереве страницы с помощью document.getElementById() с параметром, который попал сюда в качестве аргумента. То есть получается вот на 27 строке мы извлекаем значение из документа. Но в нашем примере, нам намного проще будет обращаться к документу, нам не нужно будет писать длинную эту фразу document.getElementById(). Мы можем пользоваться просто методом get() для того, чтобы получить значение со страницы. Значит это всего лишь вспомогательная функция. Вот на 7, 8 строчке, когда запускается станица, создается счетчик, далее создается переменная, в которой будет хранится таймер. И на строке 10 создается функция count(). Задача этой функции – найти в документе элемент с id output и в innerHTML этого элемента перезаписать counter. То есть, по сути эта строчка находит параграф на 32 строке и вместо этой черточки подставляет сюда значение счетчика. Изначально значение 0. Далее счетчик увеличивается. Мы хотим сделать так, чтобы эта функция запускалась неоднократно, по этому на 15 строке находим на странице элемент с id startButton, указываем, что добавляем обработчик на нажатие, на событие onClick() и в этом обработчике у нас выполняется вот такая операция. То есть, запускать функцию count() с интервалом в 5 миллисекунд. Нам возвращается объект intervalHandler, записывается в переменную intervalHandler. Объект, который возвращается setInterval() – это таймер, который контролирует запуск функции count, вот получается, что после 16 строки функция count() начинает быстро запускаться, вот и когда мы нажимаем на кнопку Stop – срабатывает обработчик onClick(), в этом обработчике вызывается clearInterval(). Вот для Timeout у нас есть clearTimeout(), а для интервала у нас есть функция clearInterval(), которая тоже принимает в качестве параметра объект, который из себя представляет timer, и заставляет этот объект прекратить неоднократный запуск определенной функции. Вот такой пример, в котором мы увидели, что не только таймауты можно останавливать но и интервалы, они тоже поддерживают остановку. В следующих уроках мы разберём как с помощью функций setTimeout() и setInterval() можно создавать различные интересные эффекты, например, бегущую строку. Также в следующих уроках мы посмотрим как создавать анимацию на основе этих функций. Теперь давайте перейдем ко второй части урока, к объекту location.

Объект location доступен на свойстве document и предоставляет нам информацию о текущем расположении браузера. То есть с помощью location мы можем узнать где мы сейчас находимся, какой адрес текущей страницы и дополнительные сведения об адресе страницы. Если мы сейчас запустим этот пример, то увидим, что у нас браузер отображает много различных значений. Location, protocol, host, pathname, search. Сейчас мы разберемся с вами, что означают вот эти записи в документе. Когда выполняется сценарий текущей страницы, то на 7 строчке не дожидаясь загрузки документа мы в тело документа отображаем document.location. document.location – это весь URL адрес. Вот представьте, что если мы заходим по вот такому адресу, то document.location – это весь текст, который сейчас выделен. Если на интересует протокол, чем мы пользовались http, https, то в таком случае мы можем воспользоваться свойством protocol объекта location. Вот protocol – это будет вот данное значение, которое сейчас выделено в тексте. Если мы хотим узнать доменное имя адреса страницы, то мы можем воспользоваться document.location.host. В host будет находится значение, которое сейчас выделено. edu.cbsystematics.com. Если нас интересует файл, к которому в данный момент времени идет запрос, мы можем воспользоваться свойством pathname. В свойстве pathname будет находится вот это значение. И последнее, то что нас может интересовать – это строке запроса или querry string, то есть параметры, которые передаются на страницу при запросе. Параметры передаются через вот такой код, через знак вопроса и далее уже идут параметры непосредственно с их значениями. Вот сейчас в строке, которую мы выделили находится параметр с именем id и значением 10. Таких параметров может быть достаточно много для одной страницы. Я думаю, что все из вас замечали такие адреса в веб-приложениях. Сейчас мы с вами посмотрим как можно пользоваться этими свойствами, как можно читать их и применять для каких-то своих задач.

Первое, что мы разберем – это способ, как можно парсить те значения, которые передаются через адресную строку. Для чего нужны те значения, которые идут вот после знака вопроса. Какая задача у этих параметров. Представьте, что эта страница info.aspx, задача этой страницы идти в базу данных, брать информацию о определенном пользователе и показывать эту информацию в документе. Вот нам нужно чтобы одна и та же страница показывала информацию о разных пользователях. Как можно сделать чтобы тот же код брал информацию о разных пользователях. Мы должны передать этому коду параметр, подсказать, какой именно пользователь нас интересует. Вот с помощью вот такого синтаксиса мы можем сказать, что если мы заходим вот по такому адресу – это означает, что страница info.aspx должна найти переменную id, взять значение этой переменной – 10 и использовать эту 10 в своих каких-то задачах. Например 10 – это id пользователя, которого нужно вытащить из базы и показать о нем информацию. Вот мы заходим по такому адресу и видим информацию о 10 пользователе. Вписываем информацию, значение 20, видим информацию, которая у нас в таблице находится на 20 строке, и т.д. Получается, что с помощью get параметра мы можем в страницу передать какую-то информацию, чтобы страница могла эту информацию обработать и выдать какой-то интересный нам контент, тот контент, который нас интересует. Давайте посмотрим, как в JavaScript коде можно легко работать с этими параметрами. Дело в том, что этих параметров может быть не одно, а их может быть очень много. Через амперсанд они могут быть перечислены, то есть на страницу может приходить одновременно три, четыре, 10, 15 параметров. Вот как мы можем упростить себе жизнь и сделать легким чтение всех этих параметров, передаваемых при запросе. Во втором примере у нас есть простая функция, задача которой вернуть объект связанный с всеми get параметрами, или параметрами запроса, которые пришли на текущую страницу. Давайте в начале мы запустим пример, чтобы мы видели, как это у нас сработает. Вот сейчас мы зайдем на страницу и передадим два дополнительных параметра. Страница urlParsing ждет от браузера параметр с именем login и параметр с именем password. Вот странице передадим два параметра. Параметр login, параметр password. Сейчас мы в login передадим имя admin, а в password передадим имя qwerty. Ну представьте, что якобы так у нас происходит авторизация в документе. Если от пользователя приходит правильно значение, то страница показывает какой-то контент. Если login и password неправильные, то страница ничего не показывает. Конечно так никто не делает, но просто для примера, для каких-то параметров. Если мы сейчас перейдем по этому адресу, браузер загрузил страницу, он знает о наших get параметрах и мы хотим сейчас JavaScript кодом посмотреть на эти параметры и что-то с ними сделать. В нашем случаем мы просто параметры отобразим в документе. Нажимаем кнопку и видим что login – admin и password qwerty. Получается страница получила доступ к строке запроса, распарсила эту строку запроса и вытащила значение только тех параметров, которые мы передавали. Если мы сейчас здесь поменяем, admin заменим на 1, qwerty заменим на 2, нажмем Перейти и нажмем на кнопку Прочитать, то теперь страница видит другие значения, которые передавались в адресной строке. Вот сейчас во втором примере мы увидим как можно парсить адресную строку и получать get параметры. На строке 46 кнопка, которую мы создали использует в качестве обработчика на нажатие функцию print(). Эта функция выполняет очень простую операцию. Первое, 34 строчка, создается переменная с именем args и в эту переменную записывается возвращаемое значение функции getQuerryString(). Эту функцию мы сейчас разберем, это наша функция. Задача нашей функции создать пустой объект и заполнить этот объект свойствами, которые есть переменными в строке запроса. То есть если мы заходим на текущую страницу с вот таким вот набором get параметров, то это означает, что объект, который создается querryString должен в себе содержать два свойства: свойство login и свойство password. При этом в каждом свойстве будет находится значение, которое соответствует значению параметра. Если мы будем заходить на страницу используя например 4 get параметра, login, password, a, b, то в таком случае в объекте, который нам возвращает функция getQuerryString() будет находится 4 свойства. По свойству на каждый get параметр. Далее на 35 строке мы создаем параграф, новый параграф, который собираемся вывести в документ. 37 строчка – добавляем в innerHTML этого параграфа текст и значение свойства login. Почему мы добавили свойство login? Потому что так работает функция getQuerryString(). Функция назовет свойство в соответствии с именем параметра. И на строке 38 мы точно также считываем значение свойства password. А точнее считываем значение параметра считываемого в запросе. Когда мы настраиваем значение, вложенное в параграф, параграф мы добавляем как дочерний элемент в документ. Берем document.body и как последний элемент у нас параграф добавляется в body после элементы input. Давайте посмотрим что делает функция getQuerryString(), как она работает. Первое что мы делаем при запуске этой функции, создаем пустой объект. То есть в объекте нет никаких наших свойств, никаких наших методов. Теперь строка 12. Мы подготавливаем строку, которую будем парсить. Мы сейчас отдельно разберем все методы, которые есть в строковых переменных, а вот сейчас, то что мы видим на 12 строчке location.search.substring(1). Мы знаем сейчас, что в строке запроса у нас находится вот такой адрес. Вот с помощью substring и параметра 1 мы указываем, что начиная с первого символа и до последнего символа мы возвращаем строку, то есть вырезаем из search строку от первого до последнего. Получается, что после операции на 12 строчке у нас search превращается вот в такое значение, потому что изначально search начинается со знака вопроса. После выполнения substring знак вопроса исчезает. Далее строка 13. Мы строке querry, на этой полученной строке вызываем функцию split и передаем в качестве параметра амперсанд. Задача split – разбить строку на массив, и разбить ее по определенному разделителю. В нашем случае по разделителю амперсанд. После вызова функции split() у нас значение получается вот таким: отдельный элемент массива login=admin, второй элемент password=123. Вот эти элементы массива находятся в массиве pairs. Теперь наша задача каждый из этих элементов превратить в свойство пустого объекта args. Login мы должны использовать как имя свойства, а admin как значение свойства для этого объекта. На 15 строке запускается цикл, который переберет значения массива pairs. На каждой итерации на 17 строке вызывается метод indexOf(“=”). Получается мы получаем индекс вот этого вот знака из элемента массива. Если мы индекс находим, то в переменную pos записывается порядковый номер этого символа в строке. Если символ не существует в строке, то тогда возвращается значение -1, и вот если мы не нашли знак равно, если pos равен -1 мы вызываем continue для того, чтобы перейти к следующему параметру, который передается в адресной строке. Если же pos существует, если мы нашли знак равно, то строка 22 – мы создаем переменную argName. Эта переменная будет содержать то что находится до знака равно, а потом создаем переменную value, которая будет содержать в себе значение, которое находится после знака равно. Чтобы из строки вырезать вот эти значения мы полузуемся функцией substring(). В функцию substring передаем начальный индекс и индекс, на котором мы хотим произвести вырезку, до которого мы хотим произвести вырезку. То есть от нуля до позиции мы извлекаем данные и получаем вот это значение и записываем в argname. А потом на следующей строке мы вызываем substring() и указываем, что мы от позиции +1 хотим вырезать текст до конца строки. То есть позиция – это знак равно, +1 – это следующий символ. Вот от следующего символа и до конца строки вырезаем значение и помещаем его в переменную value. То есть после выполнения двух этих строчек у нас будет известно имя одного параметра, и значение этого параметра. Что нам остается сделать? Это вставить свойство в объект и это свойство инициализировать. Вот на 25 строчке мы обращаемся к пустому объекту args. Обращаемся по индексу с тем значением, которое находится в argname. Вот представьте, что мы делаем такое обращение. Args[“login”], то есть получается мы хотим в свойство login записать значение. Если свойства login у нас нету, оно добавится, если есть – мы его просто поменяем. В нашем случае у нас никакого свойства argname нету, поэтому на строке 25 то имя, которое находится в этой переменной используется для того, чтобы создать свойство, а значение, которое находится в переменной value используется как значение для свойства. И вот здесь мы добавляем одно свойство для объекта args. Переходим на следующую итерацию, берем следующий параметр, точно также его анализируем, берем его имя, берем его значение и добавляем в объект args новое свойство с новым значением. И по завершению этого цикла мы возвращаем объект args, который заполнен свойствами. Давайте еще раз проверим как это будет выглядеть, только попробуем это проверить с помощью отладчика. Откроем debugger, откроем ту строчку, где мы обращаемся к свойству password, поставим здесь breakpoint, немножко поменяем querry string, добавим еще один параметр, или два параметра а и b. Вот мы нажали на Enter для того, чтобы эти параметры загрузил браузер, прочитал их. Теперь если мы нажимаем на Read Querry Parameters… У нас слетел обработчик, еще раз обновляем, нажимаем… И вот мы видим, что обработчик, breakpoint остановил выполнение нашего кода. Мы видим, что сейчас в локальной области видимости доступно несколько переменных. Вот есть переменная args в которой находится объект. Этот объект как раз и заполнялся функцией getQuerryString(). Если мы посмотрим на содержимое этого объекта, то увидим, что в этом объекте есть четыре свойства: а, b, login, password. Свойства в соответствии с значениями параметров, которые попали на страницу. То есть мы вызываем querry string, а дальше нам остается работать с теми свойствами, которые нас интересуют, работать с темы get параметрами, которые попали в документ.

В третьем примере мы посмотрим как можно с помощью свойства locatin заставить браузер перейти по новому адресу. На 8 строчке, после загрузки документа, мы выполняем поиск элемента с id go и вешаем обработчик на событие click. В обработчике у нас будет находится простая функция, которая в document.location записываем адрес того документа, на который мы хотим перенаправить браузер и получается, что если мы запускаем страницу, то видим просто кнопку. Т.к. страница уде загружена, к этой кнопке привязан обработчик. Если мы сейчас кликаем по кнопке, выполняется строка 11, в location записывается новый адрес. Как только браузер видит, что location был изменен, браузер выполняет redirect и переходит по этому новому адресу. Кликнули, видите мы перешли на другую страницу.

Если мы хотим получить информацию о текущем браузере, который загрузил документ и начинает интерпретировать JavaScript код, мы можем воспользоваться свойством navigator. Это свойство называется navigator, потому что изначально создавалось для браузера Netskape Navigator. Но хоть этого браузера уже давно нет, свойство для получения информации о браузере все равно осталось с тем же именем. Для того, чтобы получить все сведения, которое дает это свойство на строке 15 мы запускаем цикл for-in. Мы хотим получить доступ ко всем свойствам, которые есть в объекте navigator. Вы помните, что запуская цикл for-in после ключевого слова in мы указываем объект, свойства которого хотим извлечь. Перед ключевым словом указываем имя, которое на каждой итерации будет содержать имя текущего свойства. На 16 строке мы внутри самого цикла будем инициализировать и конкатенировать в переменную browserInfo значение. Мы на каждой итерации будем брать имя свойства propname, а потом после двоеточия добавлять значения свойства propname. Получается, что свойство, имя свойства мы будем помещать в квадратные скобочки, то есть обращаться к индексу со строковым значением и объект navigator по этому строковому значению будет выдавать нам данные. Вот получается, что по завершению цикла for-in в переменной browserInfo будут находится все свойства и все ихние значения. Давайте посмотрим как это будет выглядеть. Вот у нас отобразился перечень все свойств объекта navigator, например appCodeName – кодовое имя приложения. Например, userAgent – строчка, которую браузер отправляет на сервер, для того, чтобы представится серверу кто он такой. Платформа, на которой выполняется данное приложение. Операционная система и разрядность процессора. Например ниже можно увидеть вот такое свойство как geolocation. C его помощью мы можем получить доступ к глобальному объекту, который выдает информацию о расположении пользователя: широту, долготу и прочие сведения. Вот navigator – это набор свойств и методов, которые позволяют нам из JavaScript кода взаимодействовать с браузером и брать информацию о текущем браузере и возможно как-то управлять поведением самого браузера.

Мы подошли к четвертой части урока, в которой рассмотрим как с помощью JavaScript кода можно создать новые окна и как получить сведения о текущем окне, в котором выполняется сценарий. В первом примере мы рассмотрим как получать информацию о данном окне. В документе на 36 строке в момент, когда документ грузится мы выполняем несколько операций и отображаем информацию о результатах в документ. Используем объект Geometry и вызываем на этом объекте метод getWindowX(), потом getWindowY(), далее getViewportHeight() и getWiewportWidth(). Выполняем вот такие 4 операции и показываем результат в документе. Ну вот посмотрите, что мы видим. Мы видим координату Х и У текущего окна, и видим высоту и ширину вот этой вот видимой области. Если мы сейчас уменьшим документ и обновим страницу, то здесь поменялись значения. Если мы передвинем окно опустим ближе к левому верхнему окну и обновим документ – у нас тоже поменяются координаты. Давайте посмотрим как в коде выглядит добавление сведений о текущем окне. Дело в том, что информация о расположении окна, о высоте и ширине области окна в различных браузерах получается различными способами. По этому, чтобы сделать код более кроссбраузерным мы пользуемся вот таким подходом. Мы создаем вначале пустой объект, а потом в этот объект будем записывать методы в соответствии с функциональностью, которую поддерживает браузер. Вот например на 16 строчке мы проверяем, если у объекта window есть свойство screenLeft, то тогда мы в объект window добавляем getWindowX() и getWindowY() методы. Эти методы будут обращаться к window.screenLeft и window.screenTop. То есть это и есть те свойства, которые дают нам информацию о координате левого верхнего угла окна. Но если screenLeft не существует в объекте window, если браузер не поддерживает такое свойство, то тогда мы проверяем наличие свойства screenX. Если это свойство есть, то тогда 21, 22 строчка в те же самые методы getWindowX() и getWindowY() мы добавляем в объект Geometry, но у них уже по другому реализовано получение координат. Мы берем свойства screenX и screenY. В итоге, после выполнения этих условий у нас в объекте будет метод getWindowX() и getWindowY(), но при этом методы будут по разному работать в соответствии с возможностями текущего браузера. То же самое мы делаем на 25 строчке для свойства innerWidth. C помощью этого свойства мы можем узнать ширину, а с помощью метода innerHeight можем узнать высоту той видимой области, которая сейчас отображается пользователю. Вот если эти свойства есть, то мы используем эти свойства для того, чтобы реализовать функцию помещенную в свойство getViewportWidth(). И в метод getViewportHeight() мы записываем вот такую операцию. Но если innerWidth не поддерживается браузером, то в таком случае мы берем другой подод. Мы обращаемся к документу, documentElement, если это свойство есть, то тогда мы проверяем clientWidth и используем эти операции для того, чтобы реализовать методы getViewportWidth() и getWiewportHeight(). На самом деле здесь не до конца дописанный пример, потому что браузеров намного больше, различных свойств мы тоже можем найти различные вариации для разных браузеров. Получается, что здесь мы должны понять сам подход, что если мы хотим сделать кроссбраузерное приложение, мы можем создать объект и в этот объект добавлять одноименные методы и свойства, но при этом делать так, чтобы те методы работали в соответствии с возможностями текущего браузера. Вот как здесь на строке 17 getWindowWidth() который пользуется screenLeft, а на строке 21 он пользуется свойством screenX. Получается, что здесь у нас код сложный, неудобный, но в итоге там, где мы начнем использовать этот код, код будет достаточно простым и понятным. Мы вызываем один единственный метод, но он срабатывает так, как этого требует текущий браузер, выполняющий этот код.

Во втором примере мы посмотрим как можно получить информацию о разрешении экрана пользователя. Для этих задач в JavaScript есть объект screen. И у этого объекта есть свойства width и height. Сейчас эти свойства мы используем, чтобы сформировать строку, выводящуюся через alert. Посмотрите, как эти свойства срабатывают. Они показывают высоту и ширину текущего экрана.

В третьем примере мы рассмотрим как можно создавать диалоговые окна и как можно манипулировать этими окнами. Если мы запустим третий пример, то увидим, что на странице отображены кнопки Открыть и Закрыть. Нажав на кнопку Открыть у нас появляется новое окошко. Обратите внимание, что скорее всего в ваших браузерах появится специальное окно, в котором браузер спросит, хотите ли вы разрешить вплывающие окна на текущем сайте. Разрешите всплывающие окна, иначе этот документ у вас отдельно не отобразится. Ну и кроме того, что мы можем открыть этот документ, можем и манипулировать, менять его размеры, ширину, высоту, но в нашем примере просто добавляем функцию закрытия нашего документа. Основная страница может как открывать окна, так и закрывать их. Нажмем по второй кнопке. Видите? Документ у нас исчезает. Давайте посмотрим как это реализовано. В теле страницы находится две кнопки Открыть и Закрыть. У кнопок уникальные идентификаторы, к которым будет привязываться JavaScript код. После загрузки документа, мы находим первую кнопку openButton и при нажатии по кнопке запускаем openButtonHandler. А для кнопки closeButton устанавливаем обработчик closeButtonHandler. Функции у нас находятся ниже. Функция openButtonHandler на строке 18 в переменную w, вот в эту переменную записывает то, что вернет метод open(). На объекте window мы вызываем метод open() для того, чтобы создать новое окно и в это новое окно передаем следующие параметры. Первым аргументом мы указываем ту разметку, которая должна будет загрузится в то окно. Window.html – это HTML страничка, находящаяся в нашем проекте. Второй параметр – это имя окна, которое мы создаем, а третий параметр – это набор значений, которыми мы конфигурируем создаваемое окно. Мы можем отображать ширину, высоту, необходимо ли нам отображать статус внизу окна и можем ли мы окно ресайзить, можем ли мы увеличивать или уменьшать размеры окна. Если мы запустим сейчас приложение и откроем новое окно, то увидим, что status bar у нас нету, то есть не отображается он, хотя мы хотели, чтобы отображался он, потому что status мы установили yes. И resizable=no тоже у нас не срабатывает. Окно может двигаться. Эти параметры resizable и status будут работать в том случае, если мы откроем приложение в Internet Explorer. Вот мы открываем новое окно и в этом окне отображается status bar и при этом resize окна не работает. Мы не можем увеличить и уменьшить размеры окна. Для того чтобы закрыть окно, которое ранее было открыто на 22 строке мы пользуемся уже заполненной переменной w проинициализированной. Но вызываем на этой переменной close(). Это приведет к тому, что отдельное окно закрывается при нажатии по кнопке закрыть. Первые примеры этого урока были посвящены работе с окнами и некоторыми свойствами, которые доступны на объекте окон. Мы увидели как работать с таймерами, как работать с навигатором, свойством location, которое указывает где мы сейчас находимся. Теперь мы подходим к примерам, которые связаны с строковыми значениями. Мы сейчас разберем как можно манипулировать строковыми данными. Как из строки вырезать подстроки, как менять значения строковых переменных. А далее рассмотрим что такое регулярные выражения. Пока сконцентрируем внимания на методах, которые есть у строковых объектов.

Первое – посмотрим как можно создавать строки. Ранее мы смотрели в чем разница в различных способах создания строковых значений. На строке 8 и 9 создаются две переменные а и b. Эти переменные инициализируются с помощью строковых литералов. Первый вариант – мы можем использовать литерал взяв его в одинарные кавычки, второй вариант – в двойные кавычки. При этом нет никакой разницы. Оба способа создания строковой переменной будут работать одинаково. В других языках программирования вы знаете, что одинарная кавычка будет использоваться для того, чтобы создать переменную, в которой находится только один символ. В языке JavaScript нет разницы какие кавычки вы будете применять. Но сейчас переменные а и b хранят в себе просто строки. Не объекты а строковые значения. Если мы хотим сделать так, чтобы в переменной хранился объект, в котором хранится текст и какие-то специальные методы, то мы можем использовать конструктор для строковых типов. На 10 строке мы используем new String() с одним параметром и просто String на строчке 11. Оба варианта срабатывают одинаково и на выходе мы получаем объекты, в которых находятся строковые значения. Также, когда мы создаем строковые переменные мы можем использовать Юникод-символы. Для этого нам нужно использовать вот такой синтаксис /u и далее код символа, который нас интересует. Переменная str, которую мы видим на строке будет содержать в себе какой-то необычный символ, отображаемый пользователю. Когда мы создаем строковые переменные, то обычно мы пользуемся подходом, показанным на первой строке, когда мы используем просто литералы. Этот вариант он наиболее удобный. Во-первых нам необходимо написать меньше кода, чтобы создать строковую переменную, а во вторых нам будет проще использовать вместе с этой переменной ключевое слово typeof. Потому что typeof для переменной a будет указывать, что переменная а – это string. А вот typeof для переменной с, которая была создана на 10 строке, будет указывать, что переменная с – это объект. Давайте запустим и проверим. Действительно переменная а у нас типа string, а переменная с типа object. И обратите внимание на первых символ, который отобразился – это и есть символ /u1234. Вот такой символ вывелся. Старайтесь использовать вот такой синтаксис при создании строковых переменных, потому что это дает ряд преимуществ. Но то что будет невозможно сделать при создании переменной через использование литерала – это добавить в эту переменную какое-либо свойство. Если вы попытаетесь написать а.test = 123, то свойство вы добавите. Но на следующей строчке, когда у переменной а вы попытаетесь прочитать свойство test – его там не будет. Поэтому когда мы создаем переменные не как объекты а как значения, то добавлять в них свойства и методы мы не можем. Но в принципе это и хорошо, потому что считается дурным тоном добавлять в стандартные системные типы свои собственные методы и свойства. Но и теперь мы можем подойти к примерам, в которых показано, как можно работать со строковыми значениями, какие есть дополнительные методы упрощающие написание сложных алгоритмов.

На строке 7 создается переменная str. Эта переменная будет просто сроковым значением. В этой переменной находится строка с несколькими словами. На строке 8 мы на переменной str вызываем метод split. Вот обратите внимание, что сама по себе переменная str не является объектом. Это строковое значение. Мы ведь не вызывали ключевое слово new, мы не создавали объект. Мы создали значение. Но интерпретатор, каждый раз, когда мы работаем с простым строковым значением, это простое строковое значение преобразовывается в объект именно на момент вызова этой операции. То есть временно переменная str превращается в объект строкового типа. Далее на этом объекте вызывается метод split. Этот оператор выполняет операции над значениями находящимися в переменной и мы получаем результат. После этого переменная str тот объект, который был временно создан исчезает и мы остаемся обратно со строковым значением. Значит задача метода split() разбить строку на массив по указанному символу. Мы хотим сейчас разбить эту строку на массив по пробелам и в массиве у нас в итоге окажется один, два, три, четыре. Четыре элемента будет находится в массиве substrs. Этот массив мы отобразим на 9 строке и увидим, что все элементы выведутся через перенос на новую строку. Вот строка для тестирования примера. Давайте теперь посмотрим, что происходит дальше. Следующий метод, который мы используем charAt(). C его помощью мы можем получить информацию о символе, который находится в указанном индексе. По индексу 0 в переменной str находится символ “C”. Вот его мы и выводим. Видите? Отображается символ С. charAt(str.length-1) – это символ А. Потому что последний символ в строке – это действительно символ А. Вы также видите, что у строковых переменных есть свойство length, в котором лежит общее количество символов. По сути строка – это массив символов. У каждого символа есть свой порядковый номер начиная с 0. Мы хотим получить доступ к последнему символу. Последний символ будет это размерность массива -1. По этому на 13 строке мы обращаемся к свойству length и отнимаем единицу. Ну а далее выводим результаты вот на экран с помощью document.write(). Следующий метод, который часто мы будем использовать – это метод indexOf(). C его помощью мы можем найти индекс указанного символа. Вызывая indexOf('-') мы получаем индекс первого дефиса, который есть в переменной str. И индекс первого дефиса равен 2. Если мы используем метод lastIndexOf() – это означает что мы находим последний индекс указанного символа. То есть вот находим этот дефис. И получается индекс этого дефиса – 11. Также в JavaScript у строковых объектов есть такие методы как toLowerCase() и toUpperCase(). C их помощью мы можем превратить значение строки в верхний регистр или в нижний регистр. Перевести все символы. Давайте посмотрим какой эффект получился после вызова этих методов. При вызове toLowerCase() все символы стали в нижний регистр, при вызове toUpperCase() все символы стали в верхний регистр. Также обратите внимание, что любые методы, которые мы используем при работе со строками не меняют саму строку. Все методы возвращают новую строку, которая была изменена. По этому если мы на 31 строке выполним вот такую операцию str.toUpperCase(), то на самом деле мы не поменяем переменную str. Мы создадим новое значение. В это значение запишется значение с переменной str переведенной в верхний регистр. И это новое значение будет возвращено методом toUpperCase(). По этому учитывайте это. Если вы хотите произвести изменений в переменной str, то вам нужно вызвать метод, а результат записать либо в другую, либо в ту же переменную, тогда вы получите какой-то эффект. Последние два метода, которые рассматриваются в этом примере очень важные. Мы будем часто их использовать. Это методы subString() и subStr(). C помощью метода subString() мы можем извлечь значение строки по индексам. То есть с большой строки вырезать значение начиная с какого-то индекса и заканчивая каким-то индексом. Вызывая subString() сейчас мы передаем два значения 6, 12. Это означает, что между 6 и 12 символом те символы, которые будут находится они будут вырезаны и записаны в переменную str. Давайте посчитаем где у нас 6 символ. Hello – это 1, 2, 3, 4, 5, 6. Вот пробел перед словом world это 6 символ. Вот после 6 символа мы начинаем вырезать тест из строки str. И вырезать мы его будем до 12 символа. Давайте посчитаем где 12 символ. Если это 6, 7, 8, 9, 10, 11 ,12. То есть знак восклицания – это 12 символ. Пробел – это 6 символ. Вот все, что находится между этими символами мы вырезаем, и получается, что в переменную substr записывается значение world. Другой способ работать со строковыми значениями – это использовать subStr. Суть этого метода, что мы указываем символ с которого мы хотим начать вырезать значения, и указываем длину, сколько именно значений мы хотим вырезать. Мы хотим с седьмого символа вырезать 5 символов. Седьмой символ – это w. 5 символов – это слово world. Поэтому вот этим методом мы вырежем слово world из строчки str, но вырежем немножко другим способом. Если мы посмотрим в браузер, то увидим, что две последних операции мы вырезали слова world из более большой строки. Обязательно запомните эти методы. Потренируйтесь использовать эти методы. Потому что они пригодятся при решении задач связанных со строками. На этом мы заканчиваем примеры использования строковых методов. Сейчас мы перейдем к примерам, в которых разберем, что такое регулярные выражения. Вы увидите, что с помощью регулярных выражений можно решать очень сложные задачи связанные с очень сложной валидацией, с поиском текста и другими операциями, которые связанные с текстом.

Регулярные выражения – это формально язык поиска в тексте. С помощью регулярных выражений мы можем проверять правильность ввода текста, информации по шаблону или производить поиск подстрок в больших строковых значениях. Регулярные выражения основаны на метасимволах. Метасимволы – это специальные ключевые слова, которые используются для поиска определенной категории символов. Мы сейчас с вами разберем какие есть метасимволы и как они используются. Для того, чтобы создать регулярное выражение в JavaScript коде мы можем использовать два подхода. Первых подход – это использование литерала. Второй подход – это функция конструктор. Если мы используем литерал – это означает, что мы в коде пишем два //, между ними указываем текст, который и будет являться регулярным выражением. Вот как в первом варианте. /\d\d\d/. \d – это символ, который заменяется на любую цифру. То есть мы хотим найти в коде три подряд идущие цифры. Вот первый способ, как можно создать регулярное выражение. Вот pattern1 – это регулярное выражение. Регулярное выражение можно создать с помощью конструктора. Пишем new RegExp() и в параметрах передаем строку, которая определяет регулярное выражение. Давайте теперь посмотрим. Мы знаем как создавать регулярные выражения, теперь давайте посмотрим как можно запустить в действие регулярное выражение. В JavaScript есть несколько методов, которые в качестве параметров могут принимать регулярные выражения, и большая часть этих методов была рассмотрена в предыдущем примере связанным со строками. Первый метод, который умеет работать с регулярными выражениями – это метод search(). Его задача искать в тексте индекс указанной подстроки. Вот на строке 9 мы сейчас создаем шаблон, который ищет три цифры. На строке 10 мы на переменной text, которая была выше создана и ей было присвоено значение вызываем метод search() и указываем, что хотим искать в тексте вот этот шаблон, хотим найти три цифры и в переменную firstIndex() получить индекс первой цифры, которую мы найдем. То есть по сути firstIndex() это будет порядковых номер этого первого символа, который был найден по шаблону. Запускаем пример и видим, что 123 начинается по 7 индексу. Значит первый метод, который умеет работать с регулярными выражениями – это метод search(). Он изначально может принимать просто текст. То есть мы можем найти фразу «для». Вот начинается фраза по 11 индексу. Если мы не знаем конкретно что мы ищем. Ищем pattern. Просто ищем три цифры. Находим три цифры – получаем индекс. Следующий метод, который понимает регулярные выражения – это метод replace(). Его задача найти определенную строку и заменить эту строку на другую строку. Представьте, что наша задача – найти в тексте подряд три идущие цифры и удалить их. На строке 10 создается регулярное выражение, которое ищет три цифры. Что означает буква g мы сейчас разберем. Далее на 10 строке мы для переменной text вызываем метод replace(), первым параметром бросаем шаблон, а вторым тот текст, которым нужно его заменить. Нашли три цифры, заменили на ничего. Получается, все цифры будут удалены из текста. Далее метод replace(), когда он произведет изменение значение в этой строковой переменной, он вернет новую измененную переменную. Это значение мы запишем в переменную и выведем на 12 строке. В исходной строке, вы видите, встречаются цифры три раза. Запускаем пример. Видим, что цифр нету. Они были удалены. Если мы возьмём и уберем букву g на строке 10, то в таком случае будет удалена только первая группа цифр 123. Символ g – это дополнительный флаг, который используется для настройки регулярного выражения и он означает, что мы производим глобальный поиск. Это означает, что если мы нашли первое совпадение с регулярным выражением, мы на этом не останавливаемся, мы переходим дальше по тексту и ищем следующее совпадение. То есть буквы g нету – идем до первого совпадения. Если буква g есть – перебираем все значения, пока не закончим анализ всей строки. Также мы можем использовать метод replace() без регулярных выражений. Например если мы хотим заменить все пробелы на нижнее подчеркивание. Вот если вызвать таким способом метод replace() вот что мы получим. Пробелы исчезли, вместо них нижние подчеркивания.

Следующий пример используется для того, чтобы найти совпадения на тот текст, который совпал по регулярному выражению. На строке 8 создается переменная text и в эту переменную записывается значение 1+2=3. На строке 9 мы хотим получить из строки все цифры. Найти все цифры, какими бы они ни были, и записать их в переменную. Для этих целей мы используем метод match(), который вызывается на строковой переменной. И в этот match() мы записываем регулярное выражение. Поиск одного символа цифры. И поиск глобальный. Ищем от начала и до конца всего текста. Задача метода match() произвести поиск и вернуть нам массив. Каждый элемент массива будет совпадать с найденной подстрокой в строке. В случае с переменной text, у нас в переменной три символа, поэтому в итоге мы получим массив на три элемента. И этот элемент будет отдельным символом. Этот элемент мы получили и на 10 строке отобразили. Чтобы убедится в том, что мы действительно получаем массив у нас есть еще второй вариант на 12 строке задается переменная text2, ей присваивается текст, потом мы регулярным выражением указываем, что ищем три подряд идущие цифры, получаем результат в переменную res2 и на 15 строке обращаемся в res2 по нулевому индексу. Других индексов у нас не существует, так как у нас есть одно совпадение и поиск не глобальный. Давайте проверим. Первый раз вывелись все цифры. Второй раз мы получили доступ только к первому совпадению, к первой подстроке.

В пятом примере показан метод split() с помощью которого мы можем разбить строку на подстроки, используя регулярные выражения. До этого метод split() мы использовали передавая в него какое-то конкретное значение, по которому мы собирались производить разбивку. В этом примере мы создаем переменную text, в котором находится много текста, и по сути разделителем в тексте является три цифры. 123, еще раз 123, другие какие-то цифры. То есть получается мы не можем сейчас сделать так, чтобы в метод split() мы передали какое-то конкретное значение, например текст 123, и получили разбиение этой строки на массив, потому что цифры у нас постоянно меняются. Но с помощью регулярного выражения мы можем запустить метод split(), передать в него это регулярное выражение, это сделает так, чтобы этот split() разбил у нас строку на массив по трем подряд идущим цифрам. Не важно какие цифры у нас будут находится в строке изначально. Вы увидите, что изначально был такой вот текст, а на выходе получится такой массив. Все цифры будут удалены. Давайте проверим. Действительно получился массив. Значит, когда мы работаем с регулярными выражениями у нас есть возможность регулярные выражения применить в работе со строками. У строк есть четыре метода, которые принимают регулярные выражения. Это search(), replace(), match() и split(). Также работая с регулярными выражениями мы можем применить методы, которые есть непосредственно в объекте регулярного выражения. Давайте теперь посмотрим следующие примеры, которые покажут, как этими методами можно пользоваться.

Первый метод – это методы exec(). Его работа чем-то напоминает работу метода match(), но если match() возвращает массив, то exec() возвращает одно значение, один объект. Для тестирования этого примера создается переменная test, в которую записывается текст с несколькими цифрами. У нас есть цифра 2 и цифра 6. Мы сейчас хотим запустить регулярное выражение, которое найдет каждую цифру. Регулярные выражения создаются на 11 строке – это глобальное выражение, которое будет искать один символ цифры. На строке 13 создается переменная res, куда будет записываться результат работы метода. И на 14 строчке мы запускаем цикл while, который будет работать до тех пор, пока данное выражение не будет null. Пока значение выражение не null мы выполняем операции и выводим alert() сообщения на экран. Что из себя представляет это выражение. В переменную res мы записываем pattern.exec(). Если в предыдущих примерах мы вызывали методы и передавали в них регулярные выражения, то сейчас мы делаем наоборот. Мы на регулярном выражении вызываем метод и в качестве параметра вызываем текст. Сейчас регулярное выражение будет искать одну цифру. И первая цифра, которая будет найдена, первое совпадение будет записано в переменную res. То есть пока метод exec() может находить подстроки – он возвращает объекты. Как только подстроку не удалось найти – метод exec() возвращает null. Вот если метод exec() вернул нам не null, то мы попадаем в цикл, выводим результат, который мы нашли. В res будет находится первый символ, двойка в начале, а потом мы выведем индекс, по которому эта двойка была найдена и индекс, с которого будет производится поиск следующий. Так как двойка занимает один символ, то следующий поиск будет начинаться по этому символу сразу идущему после двойки. Index – это там, где мы нашли цифру, а lastindex – это где она заканчивается. И как только мы выведем один раз alert() сообщение, мы перейдем на следующую итерацию цикла и вызовем exec() еще раз, но при этом поиск будет производится не после начала строки, а вот с lastindex мы будем искать цифру в этой строчке. Давайте попробуем запустить примеры и посмотреть как это все делается. Первый раз мы нашли двойку по индексу 8, а продолжим поиск по индексу 9. Далее мы нашли 6 по индексу 69, продолжим поиск по 70 индексу. Вот с помощью метода exec() мы можем поэтапно брать подстроки из строки через регулярные выражение и их анализировать. Если мы работали с методом match(), то он сразу вернет массив. Мы не поэтапно будем брать данные из строки, а сразу получим все. Второй метод, который есть у регулярного выражения – это метод test(). Его задача – проверить есть ли строка с регулярным выражением. Если есть – вернуть true, если не совпадает – вернуть false. Эти методы удобно использовать для валидации пользовательского ввода. Например, мы создаем регулярное выражение, которое ищет e-mail адрес мы берем от пользователя текст и проверяем, совпадает и регулярное выражение поиска e-mail адреса с текстом, который ввел пользователь. Если совпадает, то пользователь ввел правильный формат e-mail. Не совпадает – значит пользователь допустил ошибку. И вот как пользоваться этим методом test(). На строке 8 мы задаем шаблон, который ищет три цифры. Дальше создаем переменную, куда записываем Hello World!!! И на 11 строке ставим условие: если проходит тест регулярного выражения и строки, то пишем, что она соответствует, иначе строка не соответствует. Шаблон сейчас ищет три цифры. Input в себе содержит Hello World. Шаблон и переменная input не совпадают, поэтому у нас условие не выполняется и выполняется блок else. Dj втором случае на 18 строке мы в переменную input записываем значение 123, и теперь шаблон совпадает со строковым значением. И соответственно теперь этот тест возвращает нам результат true. Мы попадаем в условие и выводим, что шаблон соответствует. Первый раз Hello world не соответствует шаблону, строка 123 – соответствует шаблону. Во всех примерах, которые мы сейчас посмотрели использовалось очень простое регулярное выражение, которое ищет три цифры. Мы по сути сейчас с вами знаем всего лишь один метасимвол /d. Сейчас мы рассмотрим перечень тех метасимволов, которые мы можем использовать при построении регулярных выражений, а далее рассмотрим несколько заготовок регулярных выражений, которые помогут вам найти e-mail, дату, номер мобильного телефона и многое чего другое. Регулярные выражения мы будем использовать и в других уроках, когда дойдем до темы Валидация пользовательского ввода. Когда мы будем проверять правильность данных введенных в форму. Мы будем с вами иcпользовать regEx.

В восьмом примере мы разберем перечень тех метасимволов, которые могут помочь в написании регулярных выражений. Значит сначала мы рассмотрим метасимволы, которые используются для того, чтобы определить категорию символа, которую мы ищем в тексте. Если вы напишете метасимвол \w – это означает, что вы ищете любой алфавитно-цифровой символ. То есть \w это буквы латинского и русского алфавита плюс нижнее подчеркивание и цифры от 0 до 9. Например, если мы напишем шаблон \w\w\w – это будет означать, что это выражение будет подходить например к qwe или q_1. То есть три подряд символа, которые мы можем набрать с клавиатуры, они будут походить под шаблон \w. То есть \w имеет среду word. А если мы напишем \W и W будет с большой буквы, это будет означать, что этот символ не будет являться символом алфавита, нижним подчёркиванием или цифрой. То есть это противоположно \w в нижнем регистре. Если мы используем символ \s в нижнем регистре – это означает, что мы хотим найти любой пробельный символ. То есть табуляцию, пробел, перенос на новую строку, табуляцию вертикальную, все что не является печатным, но находится в тексте, чтобы указать редактору как форматировать текст. Если мы напишем \S в верхнем регистре – это означает, что мы будем искать любой не пробельный символ. То есть это будет любой видимый символ. Точки, запятые, восклицательные символы, буквы, цифры, нижние подчеркивания и т.д. Все что видимое пользователю \S найдет. Если мы используем \d – это любая цифра от 0 до 9. Если мы используем \D – это означает, что мы ищем все, что не является цифрой – буквы, нижние подчеркивания и символы. Если мы используем вот такие метасимволы \v – это вертикальная табуляция. \t – горизонтальная табуляция. \r – перевод каретки. \n перенос строки. \f – перевод страницы. Все эти символы можно заменить использованием метасимвола \s – это любой из перечисленных. Также когда мы создаем регулярные выражения очень часто мы пользуемся наборами символов. Наборы символов – это символы, которые взяты в квадратные скобочки и по сути набор символов определяет из каких символов может состоять фраза. Например если создать такой набор [RrGgBb] – это означает, что мы хотим чтобы у этой позиции находился один из перечисленных в квадратных скобочках символов. То есть регулярка будет совпадать с текстом только в том случае, если мы найдем один из перечисленных здесь символов. Для того, чтобы указать, что мы ищем английский алфавит мы можем указать от a до z. Вот таким способом [a-z]. Можем конечно написать весь алфавит в квадратных скобочках, а можем вот делать такое сокращение. Точно так же можем сделать сокращение для поиска цифр. [0-9]. Ищем от 0 до 9. По сути это эквивалент использования \d. И также когда мы создаем наборы символов мы можем сказать, что ищем все что не водит в набор. Например если написать [^0-9] – это значит что символ, который здесь должен находится может быть всем чем угодно, но не цифрой. Если написать ^ в начале, то это будет означать что мы ищем символы но только не r g b в верхнем и нижнем регистре. Вот если мы создадим такой RegEx [abc]+ - это будет означать, что мы ищем текст, который может состоять из любого количества символов a b и с в любой последовательности. Вот что такое +. Давайте перейдем к следующей части метасимволов. Есть такое понятие как квантор, или квантификатор. С помощью кванторов мы можем указывать сколько раз метасимвол может встречаться в искомом нами тексте. Если мы используем + - это означает одно и более вхождений. Например если мы напишем \d+ - это будет означать, что это регулярное выражение подходит под вот такую строчку, под строчку, в которой есть несколько цифр, под строчку, где есть большее количество цифр. То есть не важно сколько есть цифр, но если цифра одна и более – это означает, что регулярное выражение подходит. Если мы используем вместо + * - это означает 0 и более символов. Например [abc]\d*. Такое регулярное выражение подойдет под фразу a1, b1111, с без цифры. То есть главное, что бы у нас шел один из символов в наборе, а потом 0 или более цифр. Вот если условия эти выполняются, что условие подходит под текст. Все вот эти слова, которые здесь определены, они подходят по данное регулярное выражение. Если мы используем квантификатор ? – это означает 0 или 1 вхождение. Например, если мы сделаем вот такую вот регулярку http[s]? – вот это регулярное выражение у нас подходит как http, так и подходит https. То есть обе фразы будут подходить под регулярное выражение.

Кроме кванторов нам необходимо еще знать что такое интервалы. Интервалы позволяют нам указать сколько точно символов должно находится в строке. Например, если мы напишем \d{3} – это будет означать, что мы ищем ровно три цифры идущие подряд. Если мы на пишем \d{10,20} – это означает, что мы ищем строку в которой находится от 10 до 20 цифр. Вот в таком диапазоне. Если мы пишем \d{10,} – это означает, что мы ищем строку от 10 символов, не меньше. Если мы пишем \d{,10} – это означает, что мы ищем до 10 цифр в тексте. Это интервалы, которые мы можем использовать. Также в регулярных выражения есть якорные символы. Это символ ^, $ и \b. ^ - это начало строки. $ - это конец строки. \b – это граница слова. Например, если мы создадим регулярное выражение \d{3} и с помощью этого регулярного выражения проверим вот такой вот текст: 123text. На самом деле это регулярное выражение подойдет под этот текст, потому что регулярное выражение говорит, что мы должны найти три цифры. Вот они три цифры у нас есть. В регулярном выражении не сказано, что они представлять собой фразу, или полную строчку текста. Вот если мы хотим, чтобы регулярное выражение срабатывало только если 3 цифры представляют из себя отдельное слово, можем написать \b\d{3}\b. В таком случае мы говорим, что три цифры должны быть отделены пробелами от соседнего текста. Вот получается если у нас вот такая будет фраза: 123 text, тогда у нас регулярное выражение сработает. То же самое эти символы. С и помощью можем сказать, что должна строчка начинаться ^\d{3}$ и строчка заканчивается. То есть с помощью вот таких якорных символов мы указываем, что вся строка должна состоять из трех символов. Если это не так, то у нас регулярное выражение не срабатывает. Вот такие якорные символы – начало, конец строки и граница слова. И также при создании регулярных выражений мы можем использовать флаги. Мы уже с вами видели использования флага g – глобальный поиск. Когда мы создаем регулярное выражение, флаг у нас по сути устанавливается по завершению этого регулярного выражения. Если мы здесь пишем /\d/gmi – это означает, что мы все доступные используем флаги языка JavaScript. g – это глобальный поиск, m – это многострочный поиск, i – указание того, что у нас поиск не чувствителен к регистру. То есть и в верхнем и в нижнем регистре буквы для нас будут считаться одинаковыми.

Теперь когда мы с вами знаем основные метасимволы давайте посмотрим несколько примеров с шаблонами для проверки распространенных форматов данных. Первый шаблон позволяет проверять, что данные, которые ввел нам пользователь, или которые мы получили, другим каким-то способом, они у нас соответствую формату data. На 8 строке мы создаем регулярное выражение, которое ищет одну или две цифры, помните интервал. Далее, после двух цифр к нас идет символ дефис. Так как у нас это не метасимвол у нас нет в начале слеша, это означает, что это регулярное выражение будет искать именно дефис. Этот символ ни на что не будет заменяться. Потом мы опять ищем один или два символа цифры, потом опять дефис и четыре символа цифры. И вот такой например текст 21-12-1999 – этот текст подходит под регулярное выражение. Мы сейчас делаем проверку. Берем pattern, вызываем на нем метод test() и бросаем текст, который собираемся проверить. Если текст совпадает с pattern, то получаем значение true. Запускаем и проверяем. Первый раз действительно присвоилось значение true. Если мы уберем по цифре 1-1-1999, сохраним и обновим страницу, то мы увидим, что все равно у нас совпадает значение. Но если мы сюда введем символ а и обновим, то мы видим, что теперь регулярное выражение выдало false, потому что не подходит текст по регулярное выражение. Следующее регулярное выражение используется для того, чтобы проверить вот такой формат номера телефона. Так как мы собираемся искать первый символ как символ +, то в регулярном выражении нам приходится этот символ экранировать. Когда мы перед метасимволом ставим backslash – это означает, что мы хотим найти именно + символ, потому что если мы уберем слеш, то это будет означать, что мы пытаемся найти одно или более вхождений предыдущего метасимвола. Соответственно это у нас будет не правильно. То есть мы ищем в начале +, потом ищем 38, потом мы ищем круглую скобочку и закрывающую скобочку. Почему круглые скобочки у нас тоже экранированы? Потому что круглая скобка – это группа, которая находится внутри регулярного выражения. Если вы детальнее будете изучать регулярные выражения, то вы узнаете, что в регулярных выражениях можно создавать что-то похожее на переменные, вот круглые скобки – это можно сказать определение переменной в регулярном выражении. И далее эта переменная будет использоваться. Но мы в этих примерах не разбираем использование групп в шаблонах. По просто запомните, если нам нужно найти открывающую или закрывающую круглые скобки и нужно экранировать. Внутри эти скобок нам нужно найти три цифры. \d{3}. Вот как раз эти три цифры. Далее у нас идет пробел, три цифры, черточка, две цифры, черточка, и две цифры. В соответствии уже с номером абонента. Если взять вот этот текст мы получим в результате true. Действительно у нас текст совпадает с шаблоном. Следующее регулярное выражение вы будете использовать, потому что оно будет принимать любой текст, не обязательно имя, фамилию и отчество. Представьте, что нам нужно проверит имя, фамилию и отчество и проверить обязательно на русском языке. Мы используем вот такие наборы от а до я в нижнем регистре. От А до Я в верхнем регистре и любое количество символов. Это у нас будет допустим фамилия, потом пробел. Такой же набор символов для имени и такой же набор символов для отчества. Иванов Иван Иванович – эта фраза будет подходить по регулярное выражение. Вот она подошла. Следующее регулярное выражение будет использоваться для того, чтобы проверить правильность e-mail адреса. Вот например такого текста в таком формате. В начале мы указываем, что у нас идет граница слова, только сам e-mail адрес должен находится у нас в тексте. Других символов мы не хотим видеть. Далее мы указываем, что у нас не чувствительный к регистру поиск используя флаг i. И само регулярное выражение. Вот набор символов, которые идут до символа @. Имя ящика, вот то что находится до символа @ от a до z, от 0 до 9, точка и нижнее подчеркивание. Вот из этих символов может состоять фраза, которая идет до собачки. После собачки идет фраза от a до z, от 0 до 9, точка и черточка – это уже имя самого доменного имени. Потом у нас идет точка, и обратите внимание, что точку мы экранируем. Пишем \. Потому что если мы напишем просто точка – это означает абсолютно любой символ. Печатный, непечатный, все что угодно. Точка – это любой символ, который может быть в тексте. Если мы ставим \. – это означает, что мы ищем именно точку, потому что после имени, после имени домена у нас должна идти зона. Вот если мы ставим com – то у нас от а до z 3 или 4 раза. То есть ru, com, ua, info – 4 символа. Вот эта часть регулярного выражения отвечает за то что идет после точки, после доменного имени. Ну и вот мы сейчас возьмём проверим. Есть текст e-mail адреса. Этот текст правильный. Но если мы например уберем собачку, тут у нас уже e-mail адрес введен некорректно. Следующее регулярное выражение проверяет чтобы текст был именем файла с расширением html. На 28 строке мы ищем \w+ - любое количество букв, цифр и нижних подчеркиваний, потом указываем, что ищем точку и фразу html. Вот например hello.html – этот текст подходит под регулярное выражение. Мы видим результат, что все хорошо. И последний блок кода показывает, как можно создать регулярное выражение, которое в тексте будет искать адреса сайтов. Вот у нас на 33 строке создается регулярка, которая ищет http и символ s либо есть, либо нету. Нам как бы не обязательно. У нас далее идет двоеточие, два forward slesh, а потом набор символов, из которого будет строится непосредственно адрес. Адрес у нас может состоять из букв, цифр, двоеточий, точек, знаков вопросов, амперсандов и все то, что может находится у нас в адресной строке. Этих символов у нас может быть несколько. И поиск мы будем производить глобальный, потому что мы подразумеваем, что в тексте у нас находиться несколько адресов. Вот наш текст, вот первый адрес в тексте, вот второй адрес в тексте, еще дальше третий адрес с указанием порта – 80. Вот мы сейчас хотим найти все эти адреса и отобразить их в документе. Мы создаем переменную res. Мы запускаем цикл while, который будет работать до тех пор, пока метод exec() не вернет нам значение null. И на каждой итерации мы будет отображать найденный адрес и индекс, на котором этот адрес нашли. Запускаем пример и видим, что наш первый, второй, третий адрес и индексы, по которым адреса расположены в тексте.

На этом мы заканчиваем примеры с регулярными выражениями. На следующих уроках мы еще столкнемся с ними, когда будем изучать валидацию форм. RegEx в web приложениях используются для проверки данных, которые вводит пользователь. Например создавая страницу регистрации вы можете на этой странице с помощью RegEx быстро проверить корректность введенного e-mail адреса, номера телефона, почтового индекса и т.д. Но если вы будете работать с приложениями, которые связаны с обработкой текста, создавать например текстовые редакторы, то регулярные выражения вы будете использовать на порядок больше. Регулярные выражения, которые изучались в JavaScript будут точно так же работать и в других языках программирования. Метасимволы, которые мы рассмотрели на этом уроке пригодятся вам для создания регулярных выражений и в языке C#, в языке Java, Python, Ruby, в любом языке программирования. Конечно в других языках есть свои тонкости, есть свои особенности, но их будет уже на порядок меньше. Сам синтаксис языка везде одинаковый. Например если сравнить регулярные выражения с C# в JavaScript, то в JavaScript у нас есть глобальный поиск с помощью символа g. В языке C# мы глобальный поиск таким способом запустить не сможем. Глобальный поиск там настраивается совсем другими параметрами. На этом мы заканчиваем урок. В этом уроке мы рассмотрели по сути две такие глобальные темы. Мы рассмотрели свойства глобального объекта window? Мы увидели как настраивать таймеры, что такое location, navigator. Непосредственно научились манипулировать окнами, а вторая часть урока была посвящена строкам. Мы узнали некоторые методы, которые доступны на строковых переменных и увидели что такое регулярные выражения. С этими примерами мы еще столкнемся на следующих уроках. Не забывайте делать домашнее задание в описание к этому уроку. На этом у нас сегодня все. Спасибо за внимание. До новых встреч.