На этом уроке мы разберем с вами, как можно сделать так что бы HTML страница кроме общей структуры визуального представления, содержала в себе еще некоторую информацию, предназначенную для поисковых систем или других приложений, анализирующих структура документа. С помощью микроданных мы можем сделать так, что бы страница содержала разметку и та же разметка содержала какие то специальные данные. Так же в этом уроке мы с вами изучим как работает функция drag and drop. Как мы можем взять элемент на странице и перенести в другой элемент. Как мы можем сделать что бы какая то часть разметки стала источником данных, а другая часть все таки могла принимать эти данные, используя функцию drag and drop. Ну и последняя часть сегодняшнего урока, это geolocation api. Мы разберем как можно получить информацию о месторасположении пользователя. Какие есть функции, которые повзволяют это сделать и как эти функции работают. Начнем мы урок с темы микроданные. Микроданные это спецификация, которая позволяет в документе хранить дополнительную информацию. HTML разметка, которую видит пользователь может содержать дополнительные семантические единицы. Мы можем в одном HTML коде сделать кроме внешнего представления, с которым взаимодействует пользователь, можем заложить информацию о авторе HTML разметки, о контактных данных компании, которой принадлежит этот сайт. Сведения о продукте, который допустим рекламируется на странице. С помощью микроданных мы можем сделать так, что бы страница была одновременно и структурой, которая предоставляет пользователю контент и какой-то информацией, которая отображается пользователю. Когда мы заполняем документ микроданными, мы должны пользоваться словарями. Мы должны ссылаться на специальную сущность, определяющую какие именно свойства, какие именно элементы мы можем использовать для описания содержимого своего HTML документа. Давайте мы сейчас перейдем к первому примеру, для того что бы было понятнее что такое микроданные и как эти микроданные используются. Заходим в первый пример. В первом документе вы видите, что у нас очень простая структура. Мы определяем параграф, добавляем к параграфу атрибут itemscope. В параграфе создаем 2 спена. Первый - Тим Бернерс Ли, второй Всемирная паутина. Если мы сейчас запустим пример, то ничего особенного не увидим. У нас просто отображается 2 спена- Тим Бернерс-Ли Всемирную паутину. Что сейчас представляет сейчас наша разметка. То есть мы видим, что у нас есть HTML код, с которым взаимодействует пользователь. Но вот эти дополнительные атрибуты определяют данные, которые встроенные в наш HTML код. Атрибут itemscope указывает на то что наш параграф является сущностью, в котором определены некоторые свойства. Свойства, котоыре мы определяем это 15-16 строчка. У нас есть свойство innovator и свойство inovation, изобратель и изобретение. Изобратеталь у нас Тим Бернерс-Ли, изобретение - Всемирную паутину. Когда мы зашли в браузер, мы никаких дополнительных данных не видим. Мы видим просто обычную HTML разметку. Но если на эту страницу зайдет поисковик или будет использоваться другое приложение, которое умеет работать с микроданными. Это другое приложение сможет понять, что кроме этого HTML кода, в разметке спрятана сущность с двумя свойствами: inovator и значение Тим Бернерс Ли и novation со значением Всемирную паутину. Для того что бы посмотреть на этот HTML документ глазами инструмента, который занимается анализом микроданных, можем воспользоваться вот этим инструментом. Видите у нас открывается страница, на которой мы можем указать либо адрес сайта, который хотим анализировать либо вставить свою HTML разметку. Мы берем содержимое нашего документа, возращаемся в браузер и нажимаем просмотреть. Смотрите что нашел браузер. В нашем документе существует одна сущность. Эта сущность состоит из двух свойств: inovator и inovation и Тим Бернерс Ли, Всемирную паутину. На самом деле микроданные не просто так используются в нашем документе. Гугл будет их анализировать для того, что бы особым образом показать информацию в поисковой выдаче. Так как мы сейчас придумали свои собственные свойства, то поисковая выдача неочень такая информативная. Отображается заголовок, который был найден внутри этого документа, отображается адрес нашего сайта и какая то фраза, которая была вытащена из текущего документа. Она вытащена, когда реально будет происходить запрос к такому документу. Сейчас никаких особых данных микроданные не предоставили для поисковика. Сейчас пойдем дальше и посмотрим какие правила есть для создания микроданных. Мы увидим что поисковик сможет извлечть какую то полезную информацию и показать эту информацию ползователю. Это такой пример-введение, детальнее о микроданных вы можете еще почитать о сайте в википедии или на сайтах посвященных HTML5. Сейчас этот пример нужен для того, что бы показать как создать сущность и привязать к этой сущности свойство. В следующем примере мы посмотрим как можно сделать сущность, которая будет пользоваться уже заранее предусмотренным словарем. Давайте перейдем к примеру №2. В этом примере мы продолжим разбор микроданных, но теперь мы посмотрим как можно применить специальные словари, для оформления своих сущностей. На строчке 10 мы определяем элемент section и указываем что этот элемент будет сущностью. То будет не просто сущность, которую мы сами придумали, тип этой сущности определяется атрибутом itemtype. Давайте перейдем по этому адресу и посмотрим что из себя представляет данная страница. Данная страница представляет словарь, в котором содержится информация о том, какие свойства и какие данные в этих свойствах должны присутствовать. Если мы будем прятать сущность person, то для этой сущности мы можем использовать такой ряд свойств. Видите сколько различный значений мы можем привязать к своем HTML разметке. И эти значения будут использоваться самим поисковиками или какими то программами, которые будут анализировать нашу разметку. В HTML коде, если мы захотим создать информацию о человеке, если у нас на странице будет содержаться список рабочих компании например. И нам нужно будет что бы не только отображалась информация о рабочих, но еще и потом можно было программой вытащить все имена рабочих, все ихние контактные данные, email адреса. Вот мы можем использовать микроданные, что бы разметку можно было дополнительно заполнить каким то смыслом. Каждый элемент person может содержать дату рождения, дату смерти, email адрес, фамилию, номер телефона. Любые данные, которые могут быть привязаны к человеку, если мы показываем в HTML разметке его информацию. Так же мы можем посмотреть на другие словари. Если перейти по ссылке - схема, мы можем посмотреть на первой странице самые популярные схемы, но мы можем посмотреть на большой перечень предусмотренных словарей, можем проанализировать. Словарь Radiostation в нем находится информация, которая со словаря localbusiness, который берет информация со словаря organization, который берет информацию со словаря thing. Получается что перечень свойств, который можно привязать к радиостанции очень большой. Если мы в разметке будем хранить что то о радиостанции, мы можем использовать это словарь. На строчке 10, мы сказали что section содержит в себе сущность persion. Строка 13, мы посмотрели какие есть свойства в словаре person и теперь начинаем использовать у себя в разметке. Свойство name, Тим Бернерс Ли. Имя нашего человека, в котором определены микроданные. Строка 14, создаем элемент img и указываем itemprop image. То есть для обьекта person, теперь у нас есть имя, есть фотография. Строка 17 мы создаем вложенный элемент р в section и указываем, что это свойство affilation, к кому относиться этот человек. Указываем что affilation не единая строка с данными, это будет другим обьектом. Мы еще раз указываем itemscope и указываем что свойство в себе будет содержать сущность типа organization. Человек будет относиться к организации. Организацию мы настраиваем на 18-19 строчке. Эта сущность будет состоять из свойства имя и адреса сайта всемирного консорциума. Это 3-е свойство для person. Свойство 4 - adress и его мы тоже хотим задать как сложный обьект. Параграф теперь является сущностью, которая используется как сущность типа postal adress, то есть почтовый адрес. И вот свойство этого почтового адреса. Вот 2 значения, которые привязаны к почтовому адресу. Последнее свойство, которое мы задаем это свойство url. Личная страничка и вот адрес якобы сайта Бернерса-Ли. И давайте сейчас посмотрим как этот код будет анализироваться механизмом гугл поисковика. Вставляем значение, нажимаем посмотреть. Вы видите сколько данных было найдено в нашей разметке. У нас была найдена сущность типа person. В этой сущности находятся свойства name, image, affilation, adress, url. Name, image, url это простые строковые значения. Affilation, adress это значения которые являются другими сущностями. Сущность item 1 описывает affilation, то есть принадлежность к организации и вот свойства, которые у нас есть - имя и адрес сайта. Сущность 2 описывает наш почтовый адрес. Вот информация, которая была спрятана внутри HTML разметки. Обратите внимание что у нас по другому отображается поисковая выдача гуглом. Отображается title документа, видите у нас title использование словаря. Такой же title показывает гугл. Адрес сайта, с которого была скачана эта разметка, а ниже гугл выбрал Кеибридж Массачусетс и Консорциум Всемирной паутины.

Почитать информацию о том, как гугл использует микроданные вы можете по адресу, который у нас находится в конце примера. На 33 стркое есть ссылка, на которой показаны примеры как добавить микроданные в свой документ и показано обьяснение, указывающее как микроданные будут влиять на поисковую выдачу. Второй пример показал нам что для микроданных мы используем ряд словарей. Эти словари позволяют нам определить какая инофрмация заложена в текущем HTML документе. Теперь давайте перейдем к следующему примеру, в котором разберем атрибуты для пользовательских данных. Микроданные нужны для того что бы предоставить дополнительный контент поисковику. Если же мы хотим создать инфомрацию в документе, которая адресована нашему java script коду, когда мы хотим в дом. элементе хранить информацию, связанную с логикой нашего документа. Микроданные в таком случае будут не совсем корректным решением. Для того что бы хранить данные, связаные с элементом, нам удобнее всего использовать атрибут. В HTML 5 у нас появляется специальный атрибут, который мы должны, добавляя в свою разметку именовать как дата-свое пользовательское имя. Если вы встречаете атрибут с названием даты, вы можете быть уверенны что не стандартный атрибут, это атрибут либо какого-то разработчика, который добавлял в сведения дополнительные данные к элементу, либо атрибут который применяется фреймворком. Например если вы возьмете фреймворк Knockout js. Или если вы будет пользоваться фреймворком, например jquery mobile. Большая часть функционала фреймворка привязывается к вашей разметке благодаря чтению специальных пользовательчких атрибутов. Если вы встречаете вот такого рода атрибуты, как у нас на 9 строчке, это значит, что это атрибуты пользователя. Например к элементу li у нас привязан го, цвет, двигатель. Вы видите, что сейчас у нас в разметке находится список автомобилей и вот к каждому автомобилю, кроме того что пользователь будет видеть информацию, которая находится в самих лист айтемах, но наш код сможет читать данные, которые заожены вот в этих атрибутах. Давайте мы сейчас запустим этот пример. Вот мы видим, что в браузере просто отображается лист-айтем. Если мы посмотрим на исходный код, то мы увидим что в разметке определены атрибуты data-year, data-color и так далее. Но для того что бы анализировать информацию, которая существует в узлах дом-дерева текущего документа, мы можем использовать расишрения. Для каждого браузера у нас есть свои механизмы для анализа дом-дерево. Если вы пользуетесь фаерфоксом, вы можете установить себе расширение, которое называется дом инспектор. Видите как мы можем получить к нему доступ. Вот что из себя представляет дом-инспектор. Видите он показывает текущее дерево. У нас есть HTML, где есть head, body. Вот эти блоки и текст, который вы видите. Почему они не отображаются. У нас перед ul есть перенос на новую строчку и после есть перенос на новую строку. Эти переносы у нас отображаются как просто текстовое содержимое. Внутри ul есть комментарий. Перед комментарием есть перенос, после комментария есть перенос. Есть list item, внутри которого заложен текст. Если мы кликнем по самому list item, то мы увидим информацию о том, какие значения и дополнительные атрибуты были привязаны к элементу. Дом-инспектор это просто удобный механизм для просмотра модели, которую создал браузер. Первый пример показал нам синтаксически, как выглядит определение пользователских атрибутов. Давайте сейчас временно вернемся к презентации и посмотрим на слайд в котором определены правила использования атрибутов данных. Если вы создаете атрибут данных, то имя этого атрибута как минимум должно состоять из одного символа. В имя атрибута не входит префикс data. data- а потом уже идет имя вашего атрибута. Имя атрибута - как минимум 1 символ. Если вы определили атрибут с данными то атрибуту в качестве значения можете присвоить любое знаковое значение. Никаких ограничений не существует. Вот примеры пользовательских атрибутов данных. Data-bind, имя атрибута состоит из одного слова bind. Если вы хотите создать атрибут состоящий из нескольких слов, вы можете использовать вот такой вот синтаксис. Если в HTML коде вы будете использовать вот такие атрибуты, то java script код для чтения и изменения таких атрибутов будет выглядить как показано в конце слайда. Первый вариант, вы можете использовать методы getattribute, setattribute, для того что бы найти значение атрибута и поменять атрибут. Но более удобный вариант это использование свойства dataset. Дает вам возможность обращатся к любым пользовательским атрибутам данных, которые были привязаны к элементу. На слайде е. это элемент который вы нашли на странице и который содержит в себе атрибуты data- и какое то имя. Используя dataset, вы обращаетесь к этим атрибутам но уже не указываете сам префикс data. Если бы элемент е. содержал в себе атрибут data-bind src, вот такой вот участок кода, получил бы доступ к значению data-bind. Такой бы участок кода поменяд значение bind. Давайте посмотрим как выглядит этот код. В 4 примере вы видите, что в документе у нас остается тот же самый тег ul, с теми же атрибутами. Единственное, мы немного изменили атрибут year production, для того что бы увидеть как можно будет читать такое сложное имя в java script коде.

Теперь обратите внимание на скрипт. Когда наша страница загружается, мы находим всеэлементы li на текущей странице. Дальше мы создаем переменную output куда будем записывать информацию для вывода в документ и строка 11, запускаем цикл, в котором начнем перебирать все элементы cars. Наша задача, прочитать значение атрибута color для всех автомобилей, которые заложены в нашем списке. Смотрите как мы это делаем. В переменную output добавляем значение cars по итому индексу. Свойство dataset.color вот это значение мы читаем для всех элементов, которые были найдены на странице. Добавляем значение в output, каждое значение с новой строки, а потом в параграф, который находится в документе выводим все элементы, которые были цыклом получены. Давайте запустим и посмотрим что получилось. Видите, наши значения которые лежат в листайтемах, а вот цвета автомобилей. Если мы будем читать значения из атрибута year production, мы не сможем уже определить такое имя после свойства dataset. Потому что если мы напишем year-production, это будет значить что свойство year из датасета, вычитаем из этого свойства значение элемента production. Нам вариант не подходит. Мы немного поменяем, закомментируем эту строку и раcкомментируем вторую строку. Которая показывает как можно обратится к сложному имени. Если мы обращаемся к имени атрибута данных, которое состоит из двух имен, то мы должны удалить дефисы, а символ идущий после дефиса перенести в верхний регистр. Таким образом мы можем использовать имена атрибутов состоящих из 3-4 слов. Вот year-production, черточку мы удалили и перевели в верхний регистр. Давайте проверим будет ли работать этот код. Видите работает, отображаются все атрибуты, значения всех атрибутов выводятся в тело документа. Цвета всех атрибутов - немножко не подходящая фраза. Вернем код, как он был раньше и теперь давайте перейдем к следующему примеру. В котором рассмотрим как можно сделать код чтения браузерских атрибутов кроссбраузерным. Потому что вы понимаете, атрибут data bind или атрибут data color, все эти атрибуты будут корректно работать в любом браузере, даже в том который не понимает HTML5. Если мы будем работать в браузере, который не понимает HTML5, этот атрибут будет находится в разметке, но в java script коде у нас не будет доступное свойство dataset для доступного чтения этого атрибута. По этому как мы можем сделать код более стабильным. Смотрите на java script код в этом примере. Мы получили массив всех листайтемов. Перебираем этот массив циклом и на каждой итерации 11строка, мы проверяем существует ли свойство dataset, если это свойство undefined, если оно не будет содержатся в элементе массива, то это значит что условие не срабатывает и мы переходим к блоку else. В котором с помощью метода setattribute в data color записываем желтый. data rating удивительный. Первый цикл нам нужен для того что бы поменять все значения атрибутов на странице. Если dataset не найден, пользуемся старым методом, меняем атрибут руками. Если же dataset существует, то вот таким кодом мы задаем значение, берем dataset и по свойству color rating задаем значение. Точно так же работает цикл читающий измененные значения. На каждой итерации проверяем наличие свойств dataset. Если оно есть, читаем dataset colorr, если его нету getattribute datacolor. Давайте проверим, что этот код тоже работоспособный. Вначале цикла мы все поменяли на желтый и проверяем есть ли изменения. Они появились потому что записи у нас стали с новым значением. Если мы посмотрим в инспекторе элементы. Если мы посмотрим на исходный код страницы, в исходном коде наши элементы, видите белый, фиолетовый, красный, синий. HTML разметка, которую сказал браузер нам не покажет те изменения которые были внесени с помощью java script кода. В таких ситуациях и пригодится инспектор, что бы вы видели как изменился элемент из-за сработавшего java script кода в вашем элементе. Первую часть урока, которая посвящена микроданным и пользовательским данным, мы с вами прошли.

Пользовательские атрибуты часто будут встречаться при работе с различными фреймворками, если вы будете разрабатывать свои фреймворки или свои сложные элементы управления, то скорее всего вам придется столкнутся с использованием атрибутов и использовать их. Первую часть урока мы заканчиваем и переходим ко второй части, которая посвящена использованию операции drag and drop. Давайте запустим пример, что бы мы могли увидеть как работает эта операция. Видите у нас есть элемент желтого цвета, который является перетаскиваемым. Мы можем его захватить и перенести на другой элемент. Это у нас целевой элемент, это источник. Мы можем источник данных перенести на целевой элемент. Переносим, и разметка у нас меняется. Желтый элемент удаляется со своего старого месторасположения и переносится в синий прямоугольник. Вот это и есть операция drag and drop. Она работает в нашем случае единоразово, нам нужно обновится и произвести эту операцию. Обратите внимание, когда мы начинаем перетягивание, у нас вокруг желтого прямоугольника рисуется пунктирная рамка. Когда мы желтый прямоугольник наносим на синий, который является целевым эелементом, у нас появляется красная рамка. Она исчезает, когда мы начинаем двигать по поверхности прямоугольника это связано с нашим java script кодом. Мы не продожаем отрисовывать красную рамку. Давайте сейчас посмотрим, какие изменения в структуре HTML документа нужно произвести, что бы у нас появилась поддержка операции drag and drop. Начнем с HTML кода. Вначале у нас есть несколько стилей. Стиль для источника и стиль для целевого элемента. Источник желтого цвета, целевой элемент синего. Есть какие то настройки размера и курсора, которые мы привязываем к этому элементу. Посмотрите на саму разметку, оба элемента это обычные дивы. Этот див который является сорсом, источником, это целевой див. Обратите внимание, что тот элемент который мы собираемся перетягивать в целевой элемент, он помечен атрибутом drag and drop. Вот это те изменения, которые мы произвели в HTML коде, что бы включить поддержку событий drag and drop. Если вы добавляете draggable для элемента, то вам кроме этого атрибута нужно еще добавить java script код. Без java sript кода перетаскивание работать не будет. Давайте посмотрим что у нас есть в java script коде текущего документа. Во первых при использовании операции drag and drop, у нас есть ряд событий которые мы можем фиксировать на элементах текущего документа. Это события dragstart, которое происходит когда начинается операция перетаскивания. Событие dragend, когда мы закончили операцию перетаскивания и куда то успешно или с ошибкой сбросили элемент. То есть когда мы отпустили источник над целевым элементом, тогда у нас сработает drag end или если мы отпустили источник над какою нибудь другой частью страницы. Dragenter это событие произойдет, когда перетягиваемый элемент попадет на целевой элемент, в который мы хотим перенести данные. Dragleave, это событие произойдет когда мы перетягиваемый обьект вынесем за целевой элемент. Если мы желтный прямоугольник нанесем на синий прямоугольник, сработает событие dragenter. Когда желтый прямоугольник выйдет за синий прямоугоьник, сработает событие dragleave. Когда мы будем желтный прямоугольник перемещать над поверхностью синего, будет запускаться событие dragover. И когда желтый над синим, сработает событие drop. Это перечень событий, которые вам нужно запомнить и научится ими пользоваться. Если вы добавляете к элементу атрибут draggable drop, то это значит что к этому же элементу вам нужно будет добавить обработчик на события dragstart. Потому что элемент draggable и его вы перетягиваете. Вы должны опеределить что происходить, когда вы начинаете перетягивание данных. То есть какие значения, какую информацию вы собираетесь через drag and drop, переносить между элементами. Вот смотрите как мы делаем здесь реализацию java script кода. Во первых мы вешаем обработчик на событие загрузки документа. Работать без загруженого документа нет смысла. Мы не сможем находить элементы в текущем документе. Дальше строка 34, мы создаем переменную source, в которую мы записываем элемент с айдишником source, в текущем документе. Мы указываем, что для этого элемента мы определяем событие dragstart, когда этот элемент начинает перетягиваться. В качестве обработчика события мы используем функцию, эта функция принимает 1 аргумент, в этот аргумент браузере передаст обьект, определяющий события, которые сецчас происходит. Это событие нам важно, потому что с его помощью мы инициируем передачу данных, перетягивание. Стркоа 38, мы указываем что стиль текущего элемента меняется. В source добавляется пунктирная рамка в ширину 3 пикселя. Стркоа 43, для того что бы определить, как меняется курсор с события dragstart, мы используем вот такую строчку. Перечень всех возможных значений вы можете посмотреть по этой ссылке. Давайте првоерим, как работает вот эта часть, изменение пунктирного добавления рамочки и добавления атрибута move. Мы сейчас начинаем перетягивать элемент и вот когда мы элемент перетягиваем, на нем рисуется рамочка, а когда перетягиваем на синий элемент, видите как меняется иконка стрелочки. Появляется пунктирный квадратик. Благодаря строке effectalloved у нас появляется стрелочка move. Информация, которую мы с помощью drag and drop передаем должна быть добавлена отдельно операцией. 47 строчка datatransfer setdata. Это общий эффект, что бы полльзователь понимал что происходит, как информация переносится. А вот уже функция setdata, позволяет вам указать, что именно передается в момент переноса значаний. И вызывая функцию setdata, мы указываем вначалек ключ определенное значение и данные, которые привязаны к этому ключу. Получается что с помощью drag and drop будет передаватся информация, текст и айдишник контрола. По сути с помощью drag and drop в этом примере, мы передаем id элемента source. Того элемента, который мы перетягиваем. Если происходит событие drag and, когда мы завершаем перетягивание данных, отпускаем желтый прямоугольник, то у нас выполняется очень простая операция, мы убераем рамку.

Следующий кусок java script кода относится уже к элементу target. Целевому элементу, на который попадают данные через drag and drop. Для этого элемента нам теперь необходимо привязать обработчик на события dragenter. Мы хотим сказать, что когда пользователь начинаем перетягивать какие то данные. Не обязательно у нас будет 1 желттый прямоугольник, который мы можем перенести в определенную область на текущем документе. У нас может быть несколько элементов, которые могут быть источниками данных. Вот мы хотим сказать, что когда пользователь берет какой нибудь источник данных. С этим захваченный источником данных мышка заходит в пределы элемента target. У нас должна произойти вот такая операция. Мы хотим сделать что бы рамка для элемента стала красного цвета, шириной в 3 пикселя. Давайте проверим как это происходит. Мы сейчас берем элемент источник и как только мы зааходим на предели синего прямоугольника, срабатывает событие dragenter и у нас меняется рамочка на красный. Теперь давайте посмотрим что происходит дальше. Если происходит событие dragleave, то есть если вы захватили элемент, зашли внутрь и вышли наружу. В таком случае у нас drag enter сработал, а теперь сработал dragleave. И видите что произошло, у нас исчезла рамочка, потому что мы ее убрали. Дальше строка 69, обработчик который мы обязательно должны добавить и добавить его с определенным поведением. Событие происходит в тот момент, когда мышка с захваченными данными передвигается по нашему синему прямоугольнику, который является таргетом. Большинство барузеров реализовуют событие следующим образом, прекращается операция переноса данных. Если мы уберем этот обработчик и запустим пример. У нас данные теперь не могут быть опущены на синий прямоугольник. Потмоу что по умолчанию браузер считает что большинство элементов, которые находятся на текущей странице не поддерживают dragover, по этому браузер отменяют любые операции которые связаны с событием перетаскивания данных на элемент находящийся на странице. Что же мы делаем в этом обработчике. Для того что бы браузер перестал отменять перенос данных, на строке 74 мы првоерям поддерживает ли браузер функцию preventdefault. Если функция поддерживается, то мы ее вызываем и таким образом просим браузер, что бы он предотвратил дефолтные поведения, которые связаны с событием dragover. И благодаря этой строчке браузер отменяет drag and drop. Он просто будет дальше работать. Для всех других элементв, для текстбоксов, параграфов, для тела страницы, когда у нас зажатый элемент, когда он будет проходить над другими элементами, то событие dragover, не будет приводить ни к какому дополнительному поведению. Но когда событие будет происходить на нашем синем прямоугольнике, то в таком случае мы попросим браузер, что бы он не делал отмены события. Операция drop происходит в тот момент, когда мы находимся над синим прямоугольником и отпускаем клавишу мыши. Точно так же как с событием dragover, событие drop обрабатывается самостоятельно браузером. Для того что бы событие не игнорировалось для прямоугольника, мы делаем проверку и отменяем событие. На строке 47 в браузер мы поместили информацию о том, какие данные мы хотим через drag and drop перенести. Мы сказали, что переносим с ключом текст, значение id элемента. Теперь давайте посмотрим как мы эти данные читаем. На 86 строке мы указываем что хотим при событии drop вытащить ту информацию, которая при событии dragstart была добавлена в браузер. Мы просим по ключу текст найти нам значение и находим тот id, который в пред идущему обработчике был установлен. Теперь строка 88, с помощью document.getElementById мы находим id элемента, который был источником. Из которого данные мы начали переносить. Мы этот элемент записали в переменную elem. А потом на 90 строчке мы берем this, берем target и в target указываем, что мы добавляем дочерний элемент. Добавляем элемент, который с помощью getelementbyid нашли. Браузеры работают таким образом, что они не допускают дублирование элементов в дом модели. Например возьму элемент, который находится вначале body и с помощью какой то функции добавлю как дочерний элемент к какому нибудт тегу, который находится вконце body, то элемент из начала документа удалится и появится в том месте, куда я его добавил. Сейчас на 88 строчке мы получили доступ к этому диву. Но когда мы выполнили операцию на 90 строчке, когда мы сказали что этот див является дочерним элементов дива target. То браузер автоматически удалил див с 100 строки и доавил его в 102. Таким образом произошел перенос данных. Вот такой общий пример показывающий раьоту функции dragdrop. Я рекомендую вам постетить сайт html5rocks. com и найти статью по теме draganddrop. На этом мы заканчиваем вторую часть урока и переходим к третьей чатси - geolocation api. Geolocation api это набор функций браузера, позволяющих определить текущее месторасположение пользователей. Браузер, выдающий информацию о месторасположении пользователя, использууют разные источники. И вот какие из них применяются, вы видите на текущем слайде. В первую очередь, я думаю многие задумались об этом источнике данных, используется ip адрес. Другие варианты источников это gps, mac адрес wi-fi сети или идентификатор сети gsm или cdma. Единственное что gsm и cdma и gps, эти варианты источников данных будут использоваться только в том случае, если браузер мобильный. Если он запускается на мобильном устройстве. Для десктопного браузера такие источники скорее всего будут недоступны. И последний вариант, который мы можем определить это данные, которые определяет пользователь. Если у нас нет возможности получить данные по ip адресу или другим источникам, мы можем получить данные непосредственно у пользователя. Попросить что бы он их ввел в поля вводов. Давайте сечас пройдемся по следующим слайдам и просмотрим основные преимущества и недостатки каждого из подходов. Первый источник данных это ip адрес и его преимущества в том, что в любом случаем мы будем иметь доступ к ip адресу, если мы подключились к сети то у нас есть ip адрес, какой нибудь. Но у ip адреса очень невысокая точность. Потому что браузер может получить информацию не конекретно от ip адреса пользователя, а о ip адресе провайдера, которым пользуется пользователь. Соответственно в таком случае очень невисокая точность. Мы увидим, возможно, даже в нескольких сотнях километров от фактического расположения пользователя будет определено его расположение нашим приложением. По этому ip адрес очень невысок по своей точности. Второй источник данных это gps. Его преимущество это очень высокая точность. Но недостаток это относительно длительный процесс получения данных. Если сравнить другие варианты получения информации о местоположении, то они будут работать быстрее чем gps. Так же gps не всегда будет работать, если мы находимся в помещении. Если у нас недостаточно хорошая связь со спутниками, мы можем так и не получить информацию о месторасположении. Ну и естественно, что gps не везде будет работать, не все мобильные телефони имеют gps модули. По этому не всегда можно положится на этот высокоточный источник данных.

Другой вариант источнаика данных, это wi-fi. Преимущество это очень высокая точность, это работа внутри помещений и достаочно быстрое определение месторасположений и быстрота, экономность. Недостаток такого подхода заключается в том, что он плохо будет работать на той территории, где нету wi-fi точек. Как можно определить по wi-fi точке расположение пользователя. Если вы поищете в гугле, поинтересуетесь как определяется месторасположение по вай фаю, то наткнетесь на статьи, которые раскписывают работу гугл автомобилей. Я думаю вы пользуетесь не только гугл картами, есть много различный карт от яндекса, яху. И в принципе во всех картах есть такая функция, как возможность пройтись виртуально по улице ,посмотреть на улицу глазами специального автомобиля, который проезжал по улице и с помощью специальных камер фотографировал местность. Вот эти камеры, которые фотографируют местность, которую они проезжают. Так же эти автомобили анализируют какие wi-fi сети доступны по ходу ихнего движения и запоминают mac адресс сети, в соответствии с текущим расположением. Собирают эту информацию где то в базе данных. Потом, когда мы запускаем свое приложение и пытаемся определить расположение через mac адрес wi-fi роутера, то браузер просто делает обращение к этой базе данных и получает информацию о том, где этот роутер физически установлен. Если база данных не содержит информацию о роутере, то мы не сможем узнать информацию, где находится пользователь делающий запрос о получении месторасположения. Другой вариант использования источника данных это сеть мобильной связи. Преимущество это хорошая точность, работа в помещении, быстрота и экономность. Но недостаток самый большой, это необходимость дополнительного оборудования. Потому что если мы работаем с десктопной версией браузера, то естественно никакая мобильная сеть нам не доступна. И так же не подходит для местности, если мы находимся где нибудь в горах, то мобильная связь скорее всего нам будет не доступна. Последний вариант источника данных, это данные которые были определены пользователем. Данные могут быть достаточно точными, если пользователь их введет правильно, они не требуют никаких затрат по времени. Мы просто должны спросить у пользователя где он находится, получить информацию и начать с ней работать. Пользователь так же может ввести не правильные данные, с большимы погрешностями. Точность расположения, широту и долготу по которым находится пользователь, мы врятли сможем узнать от пользователя. Врятли он обладает такими данными. Рассмотрев общую работу geolocation api мо можем теперь перейти к java script коду и посмотреть как мы можем добавить определене текущего расположения в свои приложения. Первые примеры, которые мы разберем, покажут нам как можно проверить поддержку геолокаций в текущем браузере. Функции геолокации доступны на свойстве geolocation, свойство глобального обьекта window, navigator. Мы обратимся к navigator.geolocation если свойство будет отсутсвовать, если значениt undefined, то браузер не поддерживает geolocation api. Если условие не выполняется, мы переходим на 12 стркоу и выводим сообщение что геолокация не работает. Если же это условие сработает, если geolocation будет содержать обьект, наличие обьекта будет воспринято как истина. И строка 9, условие у нас выполняется, мы увидим что geolocation api работает. Естественно мы можем воспользоватся библиотекой modernizer и воспользоватся теми функциями првоерки, котоыре есть в модернайзере. Давайте запустим приложение и посмотрим, что браузер поддерживает geolocation api.

В следующем примере мы увидим как именно происходит получение информации о текущем располжении. Сейчас у нас в теле документа определена таблица. Табличка в которой находится информация о широте, долготе, точности определения расположения в метрах, нашей высоте относительно уровня моря. Точность определения высоты, курс и скорость. Все эти значения у нас определены в таблице. В каждой таблице находится разяснювальный параграф с id. Мы по этому id будем находить параграфы в документе и в ных выдавать информацию, которую получили от geolocation api. Как только данный документ будет загружен, на строке 78 выполняется вот такая операция. Мы берем navigator, обращаемся к свойству geolocation и на эток обьекте, который мы получаем из этого свойства, вызываем функцию getcurrentposition. Эта функция требует что бы браузер попытался найти текущее расположение. Эта функция работает асинхронно. Она какое то время будет искать наше расположение, а после того как определит его, она получит ошибку. Вызовет либо функцию updatelocation либо handerror. То есть вызывая getcurrentposition мы должны в эту функцию передать две callback функции. Одну на случай упешного завершения поиска месторасположения, вторую на случай ошибки. Если функция updatelocation у нас запустится. Если браузер все таки получит текущее месторасположение. Строка 81, мы локально создаем для себя функцию с именем $. В эту функцию мы записывам операцию documetn/getelementbyid по определенному селектору. Мы сделали эту функцию для упрощения, что бы нам было проще находить параграфы в текущем документе. Что бы записывать в них значения. Теперь смотрите чо мы с этой функцией делаем. С помощью этой функции находим элемент latitude. Этот элемент у нас находится выше, вот он определен параграфом в документе. Мы хотим в этот документ хотим вывести текущие координаты нашего расположения. Смотрите как мы эту широту определяем.

Мы берем переменную position, эту переменную нам передает в callback функции сам браузер, когда у него получается определить наше месторасположение. Из переменной condition мы извлекаем элемент coords, из обьекта извлекаем свойство latitude. Потом свойство longitude, для того что бы определить долготу. Accuracy - точность, altitude - высота, точность высоты, наше направление и скорость движения. Вот все данные, которые доступны в этом обьекте, мы отображаем в тело документа. Если же у нас произойдет ошибка в момент получения данных о месторасположении, мы запускаем функцию handleerror. И вот что делает эта функция, она принимает обьект ошибки, читает код ошибки. Если код ошибки 0, это значит что при попытке определить месторасположение произошла ошибка и самое сообщение, какая ошибка была получена. Если у нас код ошибки 1, это значит что пользователь запретил получать его текущее месторасположение. Дело в том, что все функции geolocation api обязательно перед запуском спрашивают у пользователя разрешает ли он определить свое месторасположение. То есть функция не может самостоятельно, без подтверждения пользователя, начать искать его текущие данные. Вот если пользователь нажмет на 1 и запретит определить спое месторасположение, у нас вызовется эта часть кода. Функция updatestatus, это небольшой метод который находиться ниже. Фунция, которая принимает строковое значение и меняет текст параграфа с id status, в текущем документе. Так же ошибка может быть связана с невозможностью определения месторасположения и почему эта ошибка произошла. И 3 вариант это истекло доступное время ожидания. На определение месторасположения у нас может быть виделен какой то тайм-аут. Если например в течении 10 секунд, если мы поставим такой тайм-аут. Если в течении этого времени у нас не получается найти свое месторасположение, мы можем получить вот такую ошибку. Давайте запустим пример. Смотрите что происходит. У нас данние сейчас не отображаются. Выполнение нашего сценария подвисло, потому что браузер спрашивает разрешаем ли мы сайту запустить определение текущего месторасположения. Если мы нажимаем allow, то получаем широту, долготу, точность определения нашего расположения. Но так как мы не пользовались gps, то мы не можем определить высоту, точность определения высоты, курс и скорость. Эти параметры будут доступны, если браузер использовал получение сведений о текущем месторасположении. Сейчас, скорее всего, браузер определил месторасположение по wi-fi точке, к которой я подключен. В следующем примере мы посмотрим, как можно получить месторсположение и задать точность, с которой можно сделать поиск данных. На странице у нас находится такая же таблица, как и в прошлом примере, плюс добавляется кнопка, при клике на которую мы будет выполянть определение месторасположения. Так же на строке 36 мы добавляем изоражения, которое изначально спрятано. Это изображение использует loader.gif картинку с анимацием, показывающую процесс получения данных. На 39 стркое мы указываем, что делаем обработчик на нажатие по кнопке get. Получить месторасположение, как только мы по этой кнопке кликаем. Строка 41, мы вызываем функцию showloadstatus. Эта функция определена ниже в этом документе. Она находи по id элемент loader и меняет visibility с hidden на visible. То есть показывает загрузку. Далее мы начинаем настраивать сам запрос к месторасположению Мы вызываем все тот же метод getcurrentposition. Мы в этот метод указываем callback функцию на успешное завершение получения позиции, на ошибку и так же третьим аргументом мы задаем обьект и в этом обьекте у нас находятся дополнительные опциы для получения месторасположения. В эти опции входит свойство enablehighaccuracy, если вы задаете значени true, это значит что вы просите браузер максимально точно определить текущее месторасположение. То есть воспользоваться самым точным механизмом, который даст вам информацию. Дальше вы указываете тайм-аут. Вы говорите, что если в течении 10000 мс у вас не получится получить сведения, то нужно выбросить ошибк, о том что прошел тайм-аут. Как раз в функции handleerror, эту функцию мы смотрели с вами в предидущем примере. Вот у нас есть case 3, который сработает если произойдет превышение тайм-аута. И последний параметр это maximumage 30000. Это значит что если за последние 30 секунд мы уже получали инфомрацию о месторасположенни, то больше мы не будем пытатся получить новую информацию, мы сразу же получим те данные, которые в течении последних 30 секунд были получены. Но если прошло уже больше чем 30 секунд, то тогда мы заново будем делаь запрос и получать сведения о текущем месторасположении.

Функция updatelocation ничем не отличается от предидущей функции. Единственное, табличку мы сделали немного меньше и убрали некоторые свойства, которые браузер не можем определить. Если у нас эта функция завершается, когда она вызывается до конца, на 62 строке мы вызываем функцию hideloadstatus. Например здесь мы showloadstatus вызвали и показали, что у нас идет определение месторасположения. Но как только мы узнали свою текущую позицию и отобразили ее пользователю, мы статус прячем. То же самое у нас прячется статус загрузки. Этот пример по сути такой же как и пред идущий. Давайте запустим пример, для того что бы начать определение месторасположения, нам нужно нажать по кнопке. Так как браузер не сможет найти более точных источников данных чем wi-fi сеть и поиск расположения врятли займет много времени. За какой то короткий промежуток времени у нас получится увидеть лоадер, который находится вконце. Нашли меторасположение очень быстро и лоадер у нас практически был незаметен. Я думаю что если загрузить эту страницу мобильным телефоном. В таком случаем мобильный телефон скорее всего будет пользоваться gps модулем, ну а получение расположения через gps может занять длительный промежуток времени. Тогда анимация будет кстати на этой странице.

Следующий пример показывает, как мы можем получать информацию о текущем расположении, если находимся в движении. Для текущего примера это немножко безсмысленно. Врятли мы возьмем сейчас свой компьютер и начнем бегать по улице, для того что бы смотреть смену в месторасположении. Если мы такое приложение загрузим в мобильный телефон и будем передвигатся, то как раз страница загруженная мобильным браузером, сможет отслеживать изменения в текущем месторасположении. Как можно сделать страницу, которая не разово получает информацию о месторасположении, а постоянно ее обновляет. Посмотрите сейчас на наш пример. Есть 2 кнопки, мы сейчас перенесли таблицу с данными в конец страницы и перед таблицей поставили кнопку с id start. И кнопку с id stop. Когда мы нажмем эту кнопку, мы начнем неприрывний процесс получения информаиции о расположении. Нажав на stop, мы этот процесс остановим. Давайте посмотрим как работает текущая страница. На 8 строке мы првоеряем, если браузер поддерживает функцию addeventlistener. На стркое 9 мы, вызывая эту функцию, на событие load вешаем обработчик. Вы видите что делает обработчик. Он находит эелементы с id start и stop и вешает обработчик на событие click. Если мы кликаем по кнопке start, у нас запускается функция startwatch. Смотрите, что она делает. В переменную watchid записывается обьект, который возвращается функции geolocationwatchposition. Видите, что мы сейчас вызываем другую функцию которая отличается от предидущей. В предидущем примере мы вызывали getcurrentposition. В этом примере мы вызываем watchposition. Функции работают практически одинаково. Настраиваем мы их по одному и тому же принципу. Указываем updatelocation в сдучае успешного определения месторасположения, в случае ошибки и обьект с опциями. Но watchposition возвращает нам еще один обьект. Таймер через который мы будем повторно вызывать операцию определения месторасположения. Мы указываем что maximumage данных, которые мы получили 1000мс. Это значит что данные, которые получены с помощью geolocation api будут считаться устаревшими через 1 секунду. Функция watchposition, должна будет через каждую секунду брать новую инфомрация, пытатся найти новые сведения о нашем месторасположении. Если мы захотим прекратить повторяющиееся действия, нам нужно будет watchid обнулить. Для этого мы должны будем вызвать navigator.geolocationd.clearwatch и в качестве параметра передать тот обьект, который мы получили при вызове функции watchposition. Если мы выполнили эту операцию, мы прекращаем отслеживание текущего меторасположения. Если мы сейчас запустим наш браузер , то изменения производится не будут. Если мы попробуем это приложение запустить на мобильном телефоне, тогда оно будет корректно работать. В следующих примерах мы посмотрим, как можно с пользой использовать информацию, которая была получена с помощью geolocation api. В примере 5 мы увидим, как с помощью координат полученых от пользователя, мы можем отобразить его на гугл картах. Давайте запустим этот пример. Смотрите, отображается мое текущее расположение. При клике на маркере у нас появляется сообщение "скорее всего, это Ваше текущее положение". Отображается так же точность, с которой было определено мое текущее расположение. Давайте посмотрим, как выглядит код отображающий эту карту. В первую очередь нам нужно подключить сценарии дающие доступ к google maps api. На строке 5 мы подключили java script ведущий к коду, который находится на сервере кода. Для того что бы определить место в текущем документе, где будет отображена карта. На 8 строке мы создаем div с id map. 10 строчка - параграф, куда мы будем выводить дополнительное сообщение. На строке 13, первое что мы делаем, это запускаем geolocation текущего браузера. Вызываем функцию getcurrentposition и указываем что если у нас все будет хорошо, надо запустить метод updateposition. Который в качестве параметра принимает информацию от текущем расположении браузера. Дальше строка 17, мы начинаем использовать гугл мапс. Используя функцию конструктор google.maps.latlng создаем специальный обьект, в котором будет содержаться инфомрация о широте и долготе. Создавая этот обьект, нам нужно указать в первом параметре latitude, во втором longitude. Эти два значения мы извлекаем из обьекта, которые дал нам браузер. Получив обьект мы на 18 строчке дополниетльно меняем значение в элементе message. Мы выводим информацию о том что позиция была найдена с такой точностью. Дальше начинаем настраивать саму карту, что бы карта показала наше текущее расположение. Создаем вначале обьект options, который будет использоваться картой, указываем уровень увеличения, указываем относительно какой точки мы будем центрировать карту. 24 строчка, указываем тип карты, указываем roadmap, для того что бы карта содержала в себе дороги, названия улиц. Теперь создаем саму карту. Строка 28. Для создания карты мы вызываем функцию конструктор и в качестве параметра передаем элемент по id map, получается что этот div сейчас превратится в карту. Для того что бы этот div превратился в карту с нашими настройками, вторым параметром передаем обьект options, котоый был создан на 21 строке.

Теперь на карте мы хотим поставить маркер, что бы значть где мы находимся. На 31 строке мы создаем обьект marker. Используя функцию конструктор google.maps.marker. Указываем позицию, на какой карте он должен находится и title этого маркера. Так же мы хотим сделать так, что бы этот маркер был кликабельным. При клике у нас отображались сообщения. Сообщение мысоздаем с помощью специального обьекта infowindow. Вызываем функцию конструктор и указываем какое содержимое будет у этого infowindow. Остается сделать так, что бы появился обработчик у этого маркера, что бы при нажати по обработчику, это окошко всплывало. 43 строчка, мы используя прострнство google maps event, вызываем функцию addlistener. И указываем чт ок маркеру мы привязываем на событие клик, функцию которая будет обработчиком и в этой функции мы указываем что infowindow, который был создан выше, мы открываем для определенной карты, напротив определенного маркера. Благодаря вот этой строчке кода у нас появляется операция, которая срабатывает при клике по маркеру. Вот появляется окошко. Title, который мы добавили, это вы видите при наведении на маркер, мы видим всплывающую подсказку, что это мы. вВот такой пример, который показывает использование карт google maps вместе с geolocation api. И последний пример показывает обратную операцию, когда мы вводим адрес свой и по этому адресу получаем координаты. Давайте запустим этот пример. Я вношу адрес по которому сечас нахожусь, на жимаю определить широту и долготу. Получаю информацию, свои координаты. Если взять один из первых наших примеров, то координаты практически совпадают. Давайте посмотрим, как выполняется вот такой вот реверс. На странице у нас находится простая разметка. Есть label и поле ввода с id адресом. Есть кнопка, нажав на которую мы запустим определение. И есть табличка с двумя ячейками широты и долготы. Стркоа 9, мы повесили обработчик, нажатие по кнопке. Первое что мы делаем, то получаем текст который мы ввели в поле ввода. Далее проверяем, если текст у нас есть выполняем определение месторасположения, если текст отсутствует выводим сообщение о том, что мы не ввели текст.

Стркоа 17, мы создаем обьект geocoder. Используя функцию конструктора. Что бы эта функция была доступна, подключаем сценарий, который на 5 строке. Далее, получив обьект строка 20 мы вызываем функцию geocode и в качестве параметра мы передаем обьект, состоящий из 1 свойста adress. Значение, которое находится в обьекте. Далее мы указываем функцию, которая запустится когда geocode получит информацию, когда он обратится к гугл серверам, найдет по адресу координаты. Когда мы получим результат от гугла, у нас запустится эта функция, которая получит параметры. Первый параметр это результат, второй параметр статус, с дополнительными сведениями о результате. Первое, что мы сделаем это проверим статус. Если статус ок, это значит что можно выводить информацию о широте/долготе. Если статус не ок, то это значит что произошла ошибка, в блоке else мы выводим какая ошибка произошла. Если же статус ок, то мы проверяем наличие нулевого элемента в массиве results. Именно в этом элементе находится обьект с координатами. На строке 25 мы используя функцию printlatlong, передаем 2 параметра. Первый - result по 0 индексу, свойство geometry.location.lat. Вот мы получили latitude, longitude. Эти значения бросили в printlocation. Эта функция находится ниже, она очень простая.

Находит элементы по айдишникам на странице и в эти элементы записывает 2 значения, которые были переданы в аргумент. Вот мы увидили, что запустив браузер, нажав на кнопку, координаты отобразились в отдельных ячейках. Вот пример использования geolocation api, когда мы по адресу отображаем широту и долготу пользователя. На этом мы заканчиваем урок. Урок был посвящен таким темам как микроданные и атрибут для хранения пользовательской информации. В этом уроке так же мы рассмотрели функцию браузера draganddrop. Посмотрели как данные с одних элементов на странице перетягивать в другие. И рассмотрели geolocation api, увидели что есть очень простые функции, которыми мы можем получить текущее расположение пользователя, определить его текущие координаты. Спасибо за внимание, до новых встреч.