Как найти позицию в javascript

In this article, we are given an HTML document and the task is to get the position of any element by using JavaScript. Use the following steps to get the position:

Step 1: Selecting an element: Before finding the position, it is necessary to select the required HTML element. Every element in HTML is structured in a tree-like format known as DOM or Document Object Model. In JavaScript, there is an in-built object called the document object that points to the root of the DOM tree. It means that it is possible to access every component of the web page.
The document object has various methods available to find a particular element within the HTML page. Each of these methods has a parameter that could be used to find the required element. Some of the methods are:

• The getElementsByTagName() Method
• The getElementsByClassName() Method
• The getElementById() Method
• The getElementsByName() Method
• The querySelector() Method
• The querySelectorAll() Method

Step 2: Finding the position of the element: To get the location of any HTML element in the (x, y) coordinate format, there are two document properties that are used:

JavaScript offsetTop Property: It returns the top position in pixels, relative to the top of the parent element. It includes the top position, and margin of the element and the top padding, scrollbar, and border of its parent element.

Example: This example shows the use of the above-explained approach.

Output: 

JavaScript offsetLeft Property: It returns the left position in pixels, relative to the left of the parent element. It includes the left position, and margin of the element and the left padding, scrollbar, and border of its parent element.

Example: This example shows the use of the offsetLeft property.

Output: 

Combining both these properties into one to get the code for calculating the coordinates for an HTML element is given as follows:

Output: 

Last Updated :
25 Jan, 2023

Like Article

Save Article

• Главная

• Инструкции

• JavaScript

• Методы поиска в массивах JavaScript

Поиск в массиве — довольно несложная задача для программиста. На ум сразу приходит перебор через цикл for или бинарный поиск в отсортированном массиве, для элементов которого определены операции «больше» и «меньше». Но, как и любой высокоуровневый язык программирования, JavaScript предлагает разработчику встроенные функции для решения различных задач. В этой статье мы рассмотрим четыре метода поиска в массивах JavaScript: find, includes, indexOf и filter.

indexOf

indexOf — это функция поиска элемента в массиве. Этот метод с помощью перебора ищет искомый объект и возвращает его индекс или «-1», если не находит подходящий.

Синтаксис

Функция имеет такой синтаксис:

Array.indexOf (search element, starting index)

где:

• Array — массив;
• search element — элемент, который мы ищем;
• starting index — индекс, с которого начинаем перебор. Необязательный аргумент, по умолчанию работа функции начинается с индекса “0”, т.е. метод проверяет весь Array. Если starting index больше или равен Array.length, то метод сразу возвращает “-1” и завершает работу. 

Если starting index отрицательный, то JS трактует это как смещение с конца  массива: при starting index = “-1” будет проверен только последний элемент, при “-2” последние два и т.д. 

Практика

Опробуем метод на практике. Запустим такой код и проверим результаты его работы:

let ExampleArray = [1,2,3,1,'5', null, false, NaN,3];
console.log("Позиция единицы", ExampleArray.indexOf(1) );
console.log("Позиция следующей единицы", ExampleArray.indexOf(1,2) );
console.log("Позиция тройки", ExampleArray.indexOf(3) );
console.log("Позиция тройки, если starting index отрицательный", ExampleArray.indexOf(3,-2) );
console.log("Позиция false", ExampleArray.indexOf(false) );
console.log("Позиция 5", ExampleArray.indexOf("5") ); 
console.log("Позиция NaN", ExampleArray.indexOf(NaN));

В результате работы этого кода мы получили такой вывод: 

Позиция единицы 0
Позиция следующей единицы 3
Позиция тройки 2
Позиция тройки, если starting index отрицательный 8
Позиция false 6
Позиция 5 -1
Позиция NaN -1

indexOf осуществляет поиск элемента в массиве слева направо и останавливает свою работу на первом совпавшем. Отчетливо это проявляется в примере с единицей. Для того, чтобы идти справа налево, используйте метод LastIndexOf с аналогичным синтаксисом.

Для сравнения искомого и очередного объекта применяется строгое сравнение (===). При использовании строгого сравнения для разных типов данных, но с одинаковым значение, например 5, ‘5’ и “5” JavaScript даёт отрицательный результат, поэтому IndexOf не нашел 5. 

Также стоит помнить, что indexOf некорректно обрабатывает NaN. Так что для работы с этим значением нужно применять остальные методы.

includes

includes не совсем проводит поиск заданного элемента в массиве, а проверяет, есть ли он там вообще. Работает он примерно также как и indexOf. В конце работы includes возвращает «True», если нашел искомый объект, и «False», если нет. Также includes правильно обрабатывает NaN

Синтаксис

includes имеет следующий синтаксис:

Array.includes (search element, starting index)

где: 

• Array — массив;
• search element — элемент, который мы ищем;
• starting index — индекс, с которого начинаем перебор. Необязательный аргумент, по умолчанию работа функции начинается с индекса “0”, т.е. метод проверяет весь Array. Если starting index больше или равен Array.length, то метод сразу возвращает «False» и завершает работу.  

Если starting index отрицательный, то JS трактует это как смещение с конца массива: при starting index = “-1” будет проверен только последний элемент, при “-2” последние два и т.д.  

Практика

Немного изменим код из предыдущего примера и запустим его:

let Example = [1,2,3,1,'5', null, false,NaN, 3];
console.log("Наличие единицы", Example.includes(1) );
console.log("Наличие следующей единицы", Example.includes(1,2) );
console.log("Наличие тройки", Example.includes(3) );
console.log("Наличие тройки, если starting index отрицательный", Example.includes(3,-1) );
console.log("Наличие false", Example.includes(false) );
console.log("Наличие 5", Example.includes(5) ); 
console.log("Наличие NaN", Example.includes(NaN));

Вывод:

Наличие единицы true
Наличие следующей единицы true
Наличие тройки true
Наличие тройки, если starting index отрицательный true
Наличие false true
Наличие 5 false
Наличие NaN true

Для includes отсутствует альтернативная функция, которая проводит поиск по массиву js справа налево, которая, в общем-то, и не очень актуальна.

find

Предположим, что нам нужно найти в массиве некий объект. Но мы хотим найти его не по значению, а по его свойству. Например, поиск числа в массиве со значением между 15 и 20. Как и прежде, мы можем воспользоваться перебором с помощью for, но это не слишком удобно. Для поиска с определенным условием в JavaScript существует метод find.

Синтаксис

Array.find(function(...){
//если элемент соответствует условиям (true), то функция возвращает его  и прекращает работу;
//если ничего не найдено, то возвращает undefined
})

• Array — массив;
• function(…) — функция, которая задает условия.

Практика

Как и в прошлых примерах, напишем небольшой код и опробуем метод:

let ExampleArray = ["Timeweb", 55555, "Cloud", "облачный провайдер", "буквы"];
console.log(ExampleArray.find(element => element.length == 5))

Вывод:

Cloud

В этом примере мы искали строки с длиной в 5 символов. Для числовых типов данных длина не определена, поэтому 55555 не подходит. find находит первый элемент и возвращает его, поэтому «буквы» также не попали в результат работы нашей функции. Для того, чтобы найти несколько элементов, соответствующих некоторому условию, нужно использовать метод filter.

Также не стоит забывать о методе findIndex. Он возвращает индекс подходящего элемента. Или -1, если его нет. В остальном он работает точно также, как и find.

filter

find ищет и возвращает первый попавшийся элемент, соответствующий условиям поиска. Для того, чтобы найти все такие элементы, необходимо использовать метод filter. Результат этой функции — массив (если ничего не найдено, то он будет пустым).

Синтаксис

Array.find(function(...){
//если элемент соответствует условиям (true), то добавляем его к конечному результату и продолжаем перебор;
})

• Array — массив;
• function(…) — функция, которая задает условия.

Практика

Представим следующую задачу: у нас есть список кубоидов (прямоугольных параллелепипедов) с длинами их граней и нам нужно вывести все кубоиды с определенным объемом. Напишем код, реализующий решение данной задачи:

let ExampleArray = [
  [10, 15, 8],
  [11, 12, 6],
  [5, 20, 1],
  [10, 10, 2],
  [16,2, 4]
  ];
console.log(ExampleArray.filter(element=> element[0]*element[1]*element[2]>300))

 Вывод:

[ [ 10, 15, 8 ],
 [ 11, 12, 6 ] ]

В этом примере мы нашли прямоугольные параллелепипеды с объемом больше 300. В целом, метод filter в JS позволяет реализовывать всевозможные условия для поиска. 

Заключение

В этой статье узнали о методах поиска в JavaScript и научились ими пользоваться. Все перечисленные методы — универсальные инструменты для разработчиков. Но, как и любые универсальные инструменты, они не всегда являются самыми производительными. Так, например, бинарный поиск будет куда эффективнее, чем find и filter.

Array.prototype.indexOf()

Метод indexOf() возвращает первый индекс, по которому данный элемент может быть найден в массиве, или -1, если его нет.

indexOf(searchElement)
indexOf(searchElement, fromIndex)

const array = [2, 9, 9];
array.indexOf(2);     
array.indexOf(7);     
array.indexOf(9, 2);  
array.indexOf(2, -1); 
array.indexOf(2, -3); 

const indices = [];
const array = ['a', 'b', 'a', 'c', 'a', 'd'];
const element = 'a';
let idx = array.indexOf(element);
while (idx !== -1) {
  indices.push(idx);
  idx = array.indexOf(element, idx + 1);
}
console.log(indices);

function updateVegetablesCollection (veggies, veggie) {
  if (veggies.indexOf(veggie) === -1) {
    veggies.push(veggie);
    console.log(`New veggies collection is: ${veggies}`);
  } else {
    console.log(`${veggie} already exists in the veggies collection.`);
  }
}

const veggies = ['potato', 'tomato', 'chillies', 'green-pepper'];

updateVegetablesCollection(veggies, 'spinach');

updateVegetablesCollection(veggies, 'spinach');

Specifications

Browser compatibility

JavaScript

• Array.prototype.groupToMap()

  Экспериментальный:Эта технологияПеред использованием продукции внимательно проверьте таблицу совместимости браузеров.

• Array.prototype.includes()

  Метод includes()определяет,имеет ли массив определенное значение среди своих элементов,возвращая true или false в зависимости от ситуации.

• Array.isArray()

  Метод Array.isArray()определяет,является ли переданное значение проверяемым значением.

• Array.prototype.join()

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

Время на прочтение
6 мин

Количество просмотров 27K

Доброго времени суток, друзья!

В этом небольшом туториале мы вместе с вами выполним три простых задания:

• С помощью Geolocation API и Leaflet.js определим текущее местоположение пользователя и отобразим его на карте
• Реализуем анимированный переход между городами
• Реализуем переключение между адресами с предварительным получением названия объекта и его координат

Код проекта находится здесь.

Поиграть с кодом можно здесь:

Определяем текущее местоположение пользователя

Geolocation API позволяет пользователю предоставлять веб-приложению данные о своем местоположении. В приложении для запроса этих данных используется метод Geolocation.getCurrentPosition(). Данный метод принимает один обязательный и два опциональных параметра: success — функция обратного вызова, получающая объект Position при предоставлении разрешения, error — функция обратного вызова, получающая объект PositionError при отказе в доступе, и options — объект с настройками. Вот как это выглядит в коде:

navigator.geolocation.getCurrentPosition(success, error, {
  // высокая точность
  enableHighAccuracy: true
})

function success({ coords }) {
  // получаем широту и долготу
  const { latitude, longitude } = coords
  const position = [latitude, longitude]
  console.log(position) // [широта, долгота]
}

function error({ message }) {
  console.log(message) // при отказе в доступе получаем PositionError: User denied Geolocation
}

Отображаем местоположение пользователя на карте

В качестве карты мы будем использовать Leaflet.js. Данный сервис является альтернативой Google Maps и OpenStreetMap, уступает им по функционалу, но подкупает простотой интерфейса. Создаем разметку, в которой подключаем стили и скрипт карты:

<head>
  <!-- стили карты -->
  <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
      integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
      crossorigin=""
    />
    <!-- скрипт карты -->
    <script
      src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
      integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
      crossorigin=""
    ></script>
    <!-- наши стили -->
    <link rel="stylesheet" href="style.css" />
</head>
<body>
  <!-- контейнер для карты -->
  <div id="map"></div>
  <!-- кнопка для вызова функции -->
  <button id="my_position">My Position</button>
  <!-- наш скрипт-модуль -->
  <script src="script.js" type="module"></script>
</body>

Добавляем минимальные стили (style.css):

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: grid;
  place-content: center;
  place-items: center;
  background-color: rgb(241, 241, 241);
}

#map {
  width: 480px;
  height: 320px;
  border-radius: 4px;
  box-shadow: 0 0 1px #222;
}

button {
  padding: 0.25em 0.75em;
  margin: 1em 0.5em;
  cursor: pointer;
  user-select: none;
}

Создаем модуль map.js следующего содержания:

// создаем локальные переменные для карты и маркера
// каждый модуль имеет собственное пространство имен
let map = null
let marker = null

// функция принимает позицию - массив с широтой и долготой
// и сообщение, отображаемое над маркером (tooltip)
export function getMap(position, tooltip) {
  // если карта не была инициализирована
  if (map === null) {
    // второй аргумент, принимаемый методом setView - это масштаб (zoom)
    map = L.map('map').setView(position, 15)
  } else return

  // что-то типа рекламы
  // без этого карта работать не будет
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution:
      '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map)

  // добавляем маркер с сообщением
  L.marker(position).addTo(map).bindPopup(tooltip).openPopup()
}

Наконец, создаем script.js:

// импортируем функцию
import { getMap } from './map.js'

// находим кнопку и добавляем к ней обработчик
document.getElementById('my_position').onclick = () => {
  navigator.geolocation.getCurrentPosition(success, error, {
    enableHighAccuracy: true
  })
}

function success({ coords }) {
  const { latitude, longitude } = coords
  const currentPosition = [latitude, longitude]
  // вызываем функцию, передавая ей текущую позицию и сообщение
  getMap(currentPosition, 'You are here')
}

function error({ message }) {
  console.log(message)
}

Открываем index.html в браузере, нажимаем на кнопку, предоставляем разрешение на получение данных о местоположении, видим нашу позицию на карте.

Отлично. Двигаемся дальше.

Анимированный переход между городами

Предположим, что у нас имеется объект с тремя городами (Москва, Санкт-Петербург, Екатеринбург) и их координатами (db/cities.json):

{
  "Moscow": {
    "lat": "55.7522200",
    "lon": "37.6155600"
  },
  "Saint-Petersburg": {
    "lat": "59.9386300",
    "lon": "30.3141300"
  },
  "Ekaterinburg": {
    "lat": "56.8519000",
    "lon": "60.6122000"
  }
}

Нам необходимо реализовать плавное переключение между этими городами на карте.

Добавляем в разметку контейнер для городов:

<div id="cities"></div>

Переписываем script.js:

import { getMap } from './map.js'

// получаем контейнер для городов
const $cities = document.getElementById('cities')

;(async () => {
  // получаем объект с городами
  const response = await fetch('./db/cities.json')
  const cities = await response.json()
  // перебираем города
  for (const city in cities) {
    // создаем кнопку
    const $button = document.createElement('button')

    // текстовое содержимое кнопки - название города
    $button.textContent = city

    // получаем широту и долготу
    const { lat, lon } = cities[city]

    // записываем название города, широту и долготу
    // в соответствующие data-атрибуты
    $button.dataset.city = city
    $button.dataset.lat = lat
    $button.dataset.lon = lon

    // добавляем кнопку в контейнер
    $cities.append($button)
  }
})()

// обрабатываем нажатие кнопки
$cities.addEventListener('click', ({ target }) => {
  // нас интересует только нажатие кнопки
  if (target.tagName !== 'BUTTON') return

  // получаем название города, широту и долготу из data-атрибутов
  const { city, lat, lon } = target.dataset
  const position = [lat, lon]
  // вызываем функцию, передавая ей позицию и название города
  getMap(position, city)
})

Также немного изменим map.js:

let map = null
let marker = null

export function getMap(position, tooltip) {
  if (map === null) {
    map = L.map('map').setView(position, 15)
  } else {
    // перемещение к следующей позиции
    map.flyTo(position)
  }

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution:
      '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map)

  // удаление предыдущего маркера
  if (marker) {
    map.removeLayer(marker)
  }
  marker = new L.Marker(position).addTo(map).bindPopup(tooltip).openPopup()
}

Открываем index.html. При нажатии первой кнопки сразу получаем позицию и название города. При нажатии второй и последующих кнопок плавно перемещаемся между городами.

Плавное переключением между адресами

Предположим, что у нас имеются три объекта с названиями и адресами (db/addresses.json):

{
  "Театр драмы": "Октябрьская площадь, 2",
  "Театр оперы и балета": "Проспект Ленина, 46А",
  "Коляда-Театр": "Проспект Ленина, 97"
}

Нам необходимо реализовать переключение между этими объектами на карте. Но как нам это сделать без координат? Никак. Следовательно, нам каким-то образом нужно эти координаты получить. Для этого воспользуемся сервисом Nominatim от OpenStreetMap. О том, как правильно сформировать строку запроса, смотрите здесь. Я продемонстрирую лишь один из возможных вариантов.

Итак, создаем в разметке контейнер для адресов:

<div id="addresses"></div>

Переписываем script.js:

// получаем контейнер для адресов
const $addresses = document.getElementById('addresses')

;(async () => {
  // названия и адреса объектов
  const response = await fetch('./db/addresses.json')
  const addresses = await response.json()

  // для каждого места
  for (const place in addresses) {
    // создаем кнопку
    const $button = document.createElement('button')

    $button.textContent = place

    // получаем адрес
    const address = addresses[place]

    // формируем строку запроса
    const query = address.replace(
      /([А-ЯЁа-яё]+)s([А-ЯЁа-яё]+),s([0-9А-ЯЁа-яё]+)/,
      '$3+$1+$2,+Екатеринбург'
    )
    // получаем, например, 2+Октябрьская+площадь,+Екатеринбург

    // записываем данные в соответствующие data-атрибуты
    $button.dataset.address = address
    $button.dataset.query = query

    $addresses.append($button)
  }
})()

// обрабатываем нажатие кнопки
$addresses.addEventListener('click', async ({ target }) => {
  if (target.tagName !== 'BUTTON') return

  // получаем данные из data-атрибутов
  const { address, query } = target.dataset

  // получаем ответ от сервиса
  const response = await fetch(
    `https://nominatim.openstreetmap.org/search?q=${query}&format=json&limit=1`
  )
  // format - формат данных, limit - количество объектов с данными

  // парсим ответ, извлекая нужные сведения
  const { display_name, lat, lon } = (await response.json())[0]

  // редактриуем название объекта
  const name = display_name.match(/[А-ЯЁа-яёs(«-»)]+/)[0]

  const position = [lat, lon]

  // формируем сообщение
  const tooltip = `${name}<br>${address}`

  // вызываем функцию
  getMap(position, tooltip)
})

Открываем index.html. При нажатии первой кнопки сразу получаем позицию и название театра. При нажатии второй и последующих кнопок плавно перемещаемся между театрами.

Круто. Все работает, как ожидается.

На этом позвольте откланяться. Надеюсь, вы нашли для себя что-нибудь интересное. Благодарю за внимание и хорошего дня.