Рубрики
Без рубрики

Методы окна JavaScript объясняются примерами

Методо местоположение окна Метод окна. Объект окна можно использовать для получения информации на текущем адресе страницы (URL) и перенаправить браузер на новую страницу. Объект Window.Location можно записать без префикса окон, как просто местоположение. Некоторые примеры: window.location.href возвращает HREF (URL)

Автор оригинала: FreeCodeCamp Community Member.

Метод расположения окон

window.location Объект можно использовать для получения информации на текущем адресе страницы (URL) и перенаправить браузер на новую страницу.

window.location Объект можно записать без окно префикс, как только Расположение Отказ

Некоторые примеры:

  • window.location.href Возвращает HREF (URL) текущей страницы
  • window.location.hostName Возвращает доменное имя веб-хоста
  • window.location.host Возвращает как имя хоста и любой связанный порт
  • window.location.Поматы Возвращает путь и имя файла текущей страницы window.location.protocol
  • Возвращает используемый веб-протокол (http: или https:) window.location.assign ()
  • загружает новый документ

Больше информации:

MDN

Окно setInterval метод

SetInterval () Метод вызывает функцию или оценивает выражение при указанных интервалах (в миллисекундах).

setInterval(function(){ 
  alert("Hello");
}, 3000);

SetInterval () Метод продолжит вызывать функцию до ClearInterval () называется, или окно закрыто.

SetInterval () Способ может передавать дополнительные параметры к функции, как показано в примере ниже.

setInterval(function, milliseconds, parameter1, parameter2, parameter3);

Значение идентификатора возвращено SetInterval () используется в качестве параметра для ClearInterval () метод.

Подсказки:

  • 1000 секунд.
  • Для выполнения функции только один раз после указанного количества миллисекунд используйте Setimeout () метод.

Окно Метод Сетрята

Setimeout () Метод устанавливает таймер в миллисекундах, затем вызывает функцию или оценивает выражение, когда заканчивается таймер.

Примечания:

  • Setimeout () использует миллисекунды, а 1000 мс равно 1 секунду
  • Этот метод выполняет только функцию или выражение, которое вы переходите к нему один раз. Используйте SetInterval () Метод, если вам нужно повторить выполнение несколько раз
  • Чтобы остановить функцию или выражение, передаваемое ему, используйте Clearimeout () метод

Синтаксис Setimout () Метод выглядит следующим образом:

setTimeout(function, milliseconds, param1, param2, ...);

Например:

setTimeout(function() { 
  alert("Hello");
}, 3000);

Очень важно помнить о Setimeout () это то, что он выполнен асинхронно:

console.log("A");
setTimeout(function() { console.log("B"); }, 0);
console.log("C");

// The order in the console will be
// A
// C
// B

Порядок консольных журналов, вероятно, не то, что вы ожидали. Чтобы решить эту проблему и убедиться, что ваш код выполнен синхронно, вам просто нужно встроить последнее console.log Заявление в функции:

console.log("A");
setTimeout(function() {
    console.log("B");
    console.log("C");
}, 0);

// The order in the console will be
// A
// B
// C

Метод очистки окна

Clearimeout () Метод используется Остановите таймер, установленный с Setimeout () метод.

    clearTimeout(setTimeout_ID);

Чтобы быть в состоянии использовать Clearimeout () Способ, вы должны использовать глобальную переменную. Смотрите пример ниже

Clearimeout () Метод работает с помощью ID, который возвращается Setimeout () Отказ Из-за этого часто хорошая идея использовать глобальную переменную для хранения Setimeout () Тогда ясно, что при необходимости:

const myTimeout = setTimeout(function, milliseconds);

...

// Later, to clear the timeout
clearTimeout(myTimeout);

Окно ClearInterval Метод

ClearInterval () Метод используется для очистки набора таймера с SetInterval () метод.

clearInterval(setInteval_ID);

Clearimeout () Метод работает с помощью ID, который возвращается SetInterval () Отказ Из-за этого часто хорошая идея использовать глобальную переменную для хранения SetInterval () Тогда ясно, что при необходимости:

const myInterval = setInterval(function, milliseconds);

...

// Later, to clear the timeout
clearInterval(myInterval);

Метод LocalStorage Window

LocalStorage Обеспечивает путь для ваших веб-приложений для хранения пар клавиши/значения локально в браузере пользователя.

До HTML5 и LocalStorage Данные веб-приложения должны были храниться в cookie. Каждый HTTP-запрос включает в себя файлы cookie, и это были когда-то законным методом для хранения данных приложения локально на клиентских устройствах. Однако многие из этих же данных были переданы с помощью файлов cookie, и поскольку они были ограничены примерно на 4 КБ данных, было трудно сохранить все необходимое приложение.

Предел хранения для LocalStorage составляет 10 МБ данных на домен, и он считается более эффективным, потому что информация, хранящаяся в ней, никогда не передается на сервер с каждым запросом.

Типы веб-хранения

LocalStorage Один из двух современных методов для браузеров для хранения данных локально:

  • LocalStorage : Это хранит данные без срока годности. Данные в LocalStorage сохраняется даже когда браузер пользователя закрыт и вновь открывается.
  • SessionStorage : Это похоже на LocalStorage За исключением того, что он хранит данные только для одного сеанса. Эти данные удаляются, как только пользователь закрывает свой браузер.

Методы LocalStorage HTML5

LocalStorage Поставляется с несколькими различными методами JavaScript, с которыми позволяет очень легко работать.

Чтобы установить данные:

localStorage.setItem('Name', 'somevalue');

Чтобы получить некоторые данные из хранения:

localStorage.getItem('Name');

Чтобы удалить или удалить некоторые данные:

localStorage.removeItem('Name');

Чтобы очистить все в хранении (не просто отдельный элемент):

localStorage.clear();

Чтобы получить количество свойств в хранилище:

localStorage.length;

Примечание: все методы выше также работают с SessionStorage Отказ Просто заменить LocalStorage с SessionStorage Отказ

Окно открытый метод

Окно Открыть () Метод используется для открытия нового окна или вкладки браузера, в зависимости от параметров и настроек браузера пользователя. Этот метод обычно используется для всплывающих окон и блокируется по умолчанию во многих современных браузерах.

Синтаксис Открыть () Метод:

const window =  window.open(url, windowName, windowFeatures);

Параметры

  • URL : Строка для ресурса, который вы хотите загрузить.
  • Windowname : Строка, указывающая на целевое имя нового окна или вкладки. Обратите внимание, что это не будет использоваться в качестве заголовка для нового окна/вкладки.
  • оконные лица : Дополнительный запятой список строк функций, таких как размер нового окна, его позиция, независимо от того, следует ли отображать строку меню и так далее.

Пример

let windowObjectReference;
const strWindowFeatures = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes";

function openRequestedPopup() {
  windowObjectReference = window.open("https://www.freecodecamp.org/", "fCC_WindowName", strWindowFeatures);
}

openRequestedPopup();

Приведенный выше код попытается открыть всплывающее окно на страницу посадки FreeCodeCamp.

Метод подтверждения окна

Вы можете использовать Подтвердите Способ просить пользователя дважды проверить решение на веб-странице. Когда вы вызываете этот метод, браузер будет отображать диалоговое окно с двумя вариантами по линиям «ОК» и «Отмена».

Например, скажем, кто-то только что нажал кнопку удаления. Вы можете запустить следующий код:

if (window.confirm("Are you sure you want to delete this item?")) {
  // Delete the item
}

Сообщение «Вы уверены, что хотите удалить этот элемент?» появится в диалоговом окне. Если пользователь нажимает о порядке, метод подтверждения вернет правда И браузер запустит код внутри оператора IF. Если он или она нажимает отменить, метод вернет ложь И больше ничего не произойдет. Это обеспечивает некоторую защиту от кого-то случайного нажатия на удаление.

Оригинал: “https://www.freecodecamp.org/news/javascript-window-methods-explained-with-examples/”

Читайте ещё по теме: