Браузери надають безліч корисних функцій для роботи з веб-сторінками, що дозволяють значно полегшити взаємодію з користувачем, контролювати елементи сторінки та взаємодіяти з самим браузером. Усі ці функції поділяються на кілька категорій.
Однією з основних груп є функції для взаємодії з користувачем. Вони дозволяють показувати повідомлення, отримувати введення чи підтвердження від користувача, а також виводити помилки або попередження в консоль. Наприклад, функція alert() виводить просте повідомлення, тоді як prompt() запитує у користувача введення, а confirm() дозволяє вибрати між двома варіантами (так чи ні). Також є функції для роботи з консоллю, такі як console.log(), console.error() та console.warn().
Для управління вікнами браузера є кілька функцій, що дозволяють відкривати нові вкладки чи вікна, прокручувати сторінку до певної точки або переміщати вікно на передній план. Функції window.open() і window.close() дозволяють відкривати і закривати вікна, а window.print() викликає діалогове вікно для друку. Також є функції для прокручування сторінки: window.scrollTo() та window.scrollBy().
Таймери дозволяють затримати виконання функції або повторювати її через певний проміжок часу. Це корисно для реалізації затримок або циклічних дій. Для цього використовуються функції setTimeout() для одноразової затримки і setInterval() для повторного виклику. У разі потреби скасувати таймери використовуються функції clearTimeout() і clearInterval().
Функції для роботи з місцезнаходженням дозволяють отримувати і змінювати URL сторінки. Наприклад, location.href повертає поточну адресу, а location.assign() перенаправляє на нову URL-адресу. Існують також функції для перезавантаження сторінки (location.reload()) або заміни поточної сторінки (location.replace()).
Мережеві функції, такі як fetch() і старіший метод XMLHttpRequest(), дозволяють робити запити до серверів. Функція fetch() повертає Promise, що спрощує роботу з асинхронними запитами.
Функції DOM дають змогу взаємодіяти з елементами веб-сторінки, змінювати їх вміст або створювати нові елементи. Наприклад, document.getElementById() дозволяє знайти елемент за його ID, а document.querySelector() вибирає перший елемент, що відповідає заданому селектору.
API зберігання в браузері включає localStorage і sessionStorage, які дозволяють зберігати дані на стороні клієнта. Дані, збережені в localStorage, зберігаються постійно, в той час як sessionStorage обмежується поточною сесією браузера.
Функції екрана і навігатора дозволяють отримувати різноманітну інформацію про пристрій, таку як розміри екрану (window.screen.width, window.screen.height) або інформацію про браузер (navigator.userAgent).
Функції подій дозволяють реагувати на взаємодію з користувачем, наприклад, на кліки миші чи введення з клавіатури. За допомогою addEventListener() можна додавати обробники подій, а removeEventListener() — видаляти їх.
Окрім того, є ще багато інших корисних API, які дозволяють працювати з геолокацією, сповіщеннями, буфером обміну, синтезом мови та перетягуванням елементів на сторінці.
У сукупності ці функції дають змогу створювати динамічні та інтерактивні веб-сторінки, що значно покращують користувацький досвід.
Перекладено з: 🌐JavaScript All Important Browser Functions