Запитання та відповіді на співбесіді з JavaScript

JavaScript (JS) це найпопулярніша полегшена мова сценаріїв і компільована мова програмування. Він був розроблений Брендан Айх у 1995 році . Він добре відомий як мова сценаріїв для веб-сторінок, мобільних програм, веб-серверів і багатьох інших. Це важлива мова для початківців інтерфейсних і бек-енд розробників. деякі посади вимагають від людей вільного володіння JavaScript. Він використовується провідними ІТ-компаніями, такими як Evernote, LinkedIn, Microsoft, Opera, NASA , і Мета через його маніпуляції DOM, асинхронний JavaScript, обробку помилок і фреймворки JavaScript, у яких він може використовуватися. Отже, щоб потрапити в ці компанії, вам потрібно виконати ці Найпопулярніші запитання щодо співбесіди щодо JavaScript що може змусити вас здаватися експертом перед рекрутерами.

У цій статті ми надамо Топ Питання та відповіді на співбесіді з JavaScript спеціально для обох першокласники і досвідчений професіонали з досвідом 3, 5 та 8 років. Тут ми охоплюємо все, в тому числі Основні концепції JavaScript , функції ES6+, маніпуляції з DOM, асинхронний JavaScript, обробка помилок, фреймворки та бібліотеки JavaScript тощо, які, безперечно, допоможуть вам зламати наступну співбесіду на JavaScript.

Запитання та відповіді на інтерв’ю JavaScript (2024)

Щоб підготувати вас до співбесіди, ми підготували 50 найпопулярніших запитань на співбесіді щодо JavaScript початківець, середній та досвідчений які ви обов’язково повинні пройти, щоб потрапити до провідних МНК.

Перш ніж продовжити навчання Питання та відповіді на співбесіді з JavaScript , спочатку вивчаємо повну Підручник з JavaScript .

Зміст

Запитання для співбесіди з JavaScript для першокурсників

Давайте обговоримо деякі поширені запитання, які вам слід підготувати для співбесіди. Ці запитання будуть корисними для проходження інтерв’ю спеціально для ролі розробки інтерфейсу.

1. Які відмінності між Java і JavaScript?

JavaScript — це мова сценаріїв на стороні клієнта, а Java — мова об’єктно-орієнтованого програмування. Обидва вони повністю відрізняються один від одного.

  • JavaScript : Це полегшена мова програмування (мова сценаріїв) для розробки інтерактивних веб-сторінок. Він може вставляти динамічний текст в елементи HTML. JavaScript також відомий як мова браузера.
  • Java : Java є однією з найпопулярніших мов програмування. Це об’єктно-орієнтована мова програмування та має платформу віртуальної машини, яка дозволяє створювати скомпільовані програми, які працюють майже на кожній платформі. Пообіцяла Java, напишіть один раз, запустіть будь-де.

2. Що таке типи даних JavaScript?

У JavaScript є три основні типи даних.

  • Примітивний
    • Числа
    • рядки
    • Логічний
    • символ
  • Тривіальний
    • Невизначено
    • Нуль
  • Композитний

3. Який символ використовується для коментарів у JavaScript?

Коментарі перешкоджають виконанню операторів. Коментарі ігноруються, поки компілятор виконує код. Існує два типи символів для представлення коментарів у JavaScript:

  • Подвійна коса риска: Він відомий як однорядковий коментар.
// Single line comment 
  • Коса лінія із зірочкою: Він відомий як багаторядковий коментар.
/* Multi-line comments ... */ 

4. Яким буде результат 3+2+7″?

Тут 3 і 2 поводяться як ціле число, а 7 поводиться як рядок. Отже, 3 плюс 2 буде 5. Тоді результат буде 5+7″ = 57.

5. Яке використання функції isNaN?

Функція number isNan визначає, чи передане значення є NaN (не числом) і має тип Number. У JavaScript значення NaN вважається типом числа. Він повертає true, якщо аргумент не є числом, інакше повертає false.

6. Що швидше в сценаріях JavaScript і ASP?

JavaScript швидший порівняно зі сценарієм ASP. JavaScript — це мова сценаріїв на стороні клієнта, її виконання не залежить від сервера. Сценарій ASP — це мова сценаріїв на стороні сервера, яка завжди залежить від сервера.

7. Що таке негативна нескінченність?

Від'ємна нескінченність є постійним значенням, що представляє найменше доступне значення. Це означає, що жодне інше число не є меншим за це значення. Його можна згенерувати за допомогою саморобної функції або за допомогою арифметичної операції. JavaScript показує значення NEGATIVE_INFINITY як -Infinity.

8. Чи можна розбити код JavaScript на кілька рядків?

Так, можна розбити код JavaScript на кілька рядків у операторі рядка. Його можна зламати за допомогою зворотна коса риска '' .
Наприклад:

document.write('A Online Computer Science Portal for Geeks') 

JavaScript уникає рядка зламу коду, що не бажано.

let gfg= 10, GFG = 5, Geeks = gfg + GFG; 

9. Яка компанія розробила JavaScript?

Netscape розробив JavaScript і був створений Бренденом Айхом у 1995 році.

10. Що таке неоголошені та невизначені змінні?

  • Невизначено : Це відбувається, коли змінній оголошено, що їй не присвоєно жодного значення. Undefined не є ключовим словом.
  • Незадекларований : Це відбувається, коли ми намагаємося отримати доступ до будь-якої змінної, яка не була ініціалізована або оголошена раніше за допомогою ключового слова var або const. Якщо ми використовуємо оператор typeof щоб отримати значення змінної undeclare, ми зіткнемося з помилкою виконання з поверненим значенням як undefined. Область дії змінних undeclare завжди глобальна.

одинадцять. Напишіть код JavaScript для динамічного додавання нових елементів.

html
      Заголовок документа> голова> <body>  <button onclick='create()'>Натисніть тут! кнопка> <script>функція create() { let geeks = document.createElement('geeks');  geeks.textContent = 'Geeksforgeeks';  geeks.setAttribute('клас', 'примітка');  document.body.appendChild(geeks);  } script> body> html> </pre>  </code>  <h3> <span>12. </span>  <b>  <strong>Що таке глобальні змінні? Як оголошуються ці змінні та які проблеми з ними пов’язані? </strong>  </b>  </h3> <p dir='ltr'> <span>На відміну від цього, глобальні змінні - це змінні, які визначають поза функціями. Ці змінні мають глобальну область видимості, тому їх можна використовувати будь-якою функцією, не передаючи їх функції як параметри. </span> </p>  <p dir='ltr'>  <b>  <strong>приклад: </strong>  </b>  <span>  </span> </p>javascript <code>  <pre>let petName = 'Rocky'; //Global Variable myFunction(); function myFunction() {  document.getElementById('geeks').innerHTML  = typeof petName + '- ' +  'My pet name is ' + petName; } document.getElementById('Geeks')  .innerHTML = typeof petName + '- ' +  'My pet name is ' + petName; </pre>  </code>  <p dir='ltr'> <span>Важко налагоджувати та тестувати код, який покладається на глобальні змінні. </span> </p>  <h3> <span>13. </span>  <b>  <strong>Що ви маєте на увазі під NULL у JavaScript? </strong>  </b>  </h3> <p dir='ltr'> <span>Значення NULL означає відсутність значення або відсутність об’єкта. Він відомий як порожнє значення/об’єкт. </span> </p>  <h3> <span>14. </span>  <b>  <strong>Як видалити значення властивостей? </strong>  </b>  </h3> <p dir='ltr'>  <span>  </span>  <span>The </span>   <b>  <strong>видалити ключове слово </strong>  </b>   <span>видаляє всю властивість і всі значення одночасно, наприклад </span> </p>  <pre>let gfg={Course: 'DSA', Duration:30}; delete gfg.Course; </pre> <h3> <span>п'ятнадцять. </span>  <b>  <strong>Що таке ящик підказок? </strong>  </b>  </h3> <p dir='ltr'> <span>Вікно підказок — це діалогове вікно з додатковим повідомленням, яке пропонує користувачеві ввести текст. Його часто використовують, якщо користувач хоче ввести значення перед входом на сторінку. Він повертає рядок, що містить текст, введений користувачем, або null. </span> </p>  <h3> <span>16. </span>  <b>  <strong>Що таке ключове слово «this» у JavaScript? </strong>  </b>  </h3> <p dir='ltr'> <span>Функції в JavaScript є важливими об’єктами. Як і об’єкти, його можна призначати змінним, передавати іншим функціям і повертати з функцій. І, як і об’єкти, вони мають власні властивості. «this» зберігає поточний контекст виконання програми JavaScript. Таким чином, коли воно використовується всередині функції, значення «this» змінюватиметься залежно від того, як функція визначена, як вона викликається та контексту виконання за замовчуванням. </span> </p>  <h3> <span>17. </span>  <b>  <strong>Поясніть роботу таймерів у JavaScript. Також з’ясуйте недоліки використання таймера, якщо такі є. </strong>  </b>  </h3> <p dir='ltr'> <span>Таймер виконує певний код у певний час або будь-яку невелику кількість повторюваного коду, щоб зробити це, вам потрібно використовувати функції </span>   <b>  <strong>setTimout </strong>  </b>  <span>, </span>  <b>  <strong>setInterval, </strong>  </b>  <span>  </span>  <span>і </span>   <b>  <strong>clearInterval </strong>  </b>   <span>. Якщо код JavaScript встановлює таймер на 2 хвилини, а коли час закінчиться, на сторінці відобразиться сповіщення. The </span>  <b>  <strong>setTimeout() </strong>  </b>  <span>метод викликає функцію або обчислює вираз через задану кількість мілісекунд. </span> </p>  <h3> <span>18. </span>  <b>  <strong>Яка різниця між ViewState і SessionState? </strong>  </b>  </h3> <ul> <li value='1'>  <b>  <strong>ViewState: </strong>  </b>  <span>Це стосується окремої сторінки в сеансі. </span> </li> <li value='2'>  <b>  <strong>SessionState: </strong>  </b>  <span>Це залежить від користувача, який може отримати доступ до всіх даних на веб-сторінках. </span> </li> </ul> <h3> <span>19. </span>  <b>  <strong>Як подати форму за допомогою JavaScript? </strong>  </b>  </h3> <p dir='ltr'> <span>Ви можете використовувати </span>   <b>  <strong>document.form[0].submit() </strong>  </b>  <span>  </span>  <span>метод надсилання форми в JavaScript. </span> </p>  <h3> <span>двадцять. </span>  <b>  <strong>Чи підтримує JavaScript автоматичне перетворення типів? </strong>  </b>  <span>  </span> </h3> <p dir='ltr'> <span>Так, JavaScript підтримує автоматичне перетворення типів. </span> </p>  <h2 id='javascript-intermediate-interview-questions'> <span>Запитання для співбесіди на рівні JavaScript Intermediate </span> </h2> <h3> <span>21. Що таке циклічні структури в JavaScript? </span> </h3> <ul> <li value='1'>   <b>  <strong>цикл while </strong>  </b>   <b>  <strong>: </strong>  </b>  <span>Цикл while — це оператор потоку керування, який дозволяє багаторазово виконувати код на основі заданої логічної умови. Цикл while можна розглядати як повторюваний оператор if. </span> </li> <li value='2'>  <a href='/javascript-loop'>  <b>  <strong>для циклу </strong>  </b>  </a>  <b>  <strong>: </strong>  </b>  <span>Цикл for забезпечує стислий спосіб запису структури циклу. На відміну від циклу while, інструкція for використовує ініціалізацію, умову та приріст/зменшення в одному рядку, таким чином забезпечуючи коротшу структуру циклу, яку легко налагодити. </span> </li> <li value='3'>   <b>  <strong>робити поки </strong>  </b>   <b>  <strong>: </strong>  </b>  <span>Цикл do-while подібний до циклу while з тією лише різницею, що він перевіряє умову після виконання операторів, і тому є прикладом циклу керування виходом. </span> </li> </ul> <h3> <span>22. Як можна змінити стиль/клас елемента? </span> </h3> <p dir='ltr'> <span>Змінити стиль/клас елемента можна двома способами. Ми використовуємо </span>  <a href='/html-dom-getelementbyid-method'> <span>метод document.getElementByID </span> </a>  </p>  <pre>document.getElementById('myText').style.fontSize = '16px; </pre> <pre>document.getElementById('myText').className = 'class'; </pre> <h3> <span>23. Поясніть, як читати та писати файл за допомогою JavaScript? </span> </h3> <ul> <li value='1'> <span>The </span>   <b>  <strong>readFile() </strong>  </b>   <span>функції використовуються для операції читання. </span> </li> </ul> <pre>readFile( Path, Options, Callback) </pre> <ul> <li value='1'> <span>The </span>   <b>  <strong>writeFile() </strong>  </b>   <span>Функції використовуються для операції запису. </span> </li> </ul> <pre>writeFile( Path, Data, Callback) </pre> <h3> <span>24. Що називається введенням змінних у JavaScript? </span> </h3> <p dir='ltr'> <span>The </span>  <b>  <strong>типізація змінної </strong>  </b>  <span>це тип змінної, який використовується для зберігання числа та використання цієї ж змінної для призначення рядка. </span> </p>  <pre>Geeks = 42; Geeks = 'techcodeview.com'; </pre> <h3> <span>25. Як перетворити рядок будь-якої основи на ціле число в JavaScript? </span> </h3> <p dir='ltr'> <span>У JavaScript функція parseInt() використовується для перетворення рядка в ціле число. Ця функція повертає ціле число base, яке вказано у другому аргументі функції parseInt(). Функція parseInt() повертає Nan (не число), якщо рядок не містить числа. </span> </p>  <h3> <span>26. Поясніть, як визначити операційну систему на клієнтській машині? </span> </h3> <p dir='ltr'> <span>Щоб визначити операційну систему на клієнтській машині, можна просто використати властивість navigator.appVersion або navigator.userAgent. Властивість Navigator appVersion є властивістю лише для читання, і вона повертає рядок, який представляє інформацію про версію браузера. </span> </p>  <h3> <span>27. Які типи спливаючих вікон доступні в JavaScript? </span> </h3> <p dir='ltr'> <span>У JavaScript є три типи спливаючих вікон. </span> </p>  <ul> <li value='1'>   <b>  <strong>Попередження </strong>  </b>   </li> <li value='2'>   <b>  <strong>Підтвердити </strong>  </b>   </li> <li value='3'>   <b>  <strong>Підкажіть </strong>  </b>   </li> </ul> <h3> <span>28. Яка різниця між вікном попередження та вікном підтвердження? </span> </h3> <p dir='ltr'> <span>У вікні сповіщень відображатиметься лише одна кнопка, яка є кнопкою OK. Він використовується для інформування користувача про угоду, яку необхідно погодити. Але у вікні підтвердження відображаються дві кнопки «ОК» і «Скасувати», де користувач може прийняти рішення чи ні. </span> </p>  <h3> <span>29. Який недолік використання innerHTML у JavaScript? </span> </h3> <p dir='ltr'> <span>Є багато недоліків використання </span>  <span>innerHTML </span>  <span>у JavaScript, оскільки вміст буде замінено всюди. Якщо ви використовуєте += як innerHTML = innerHTML + ‘html’, старий вміст буде замінено на HTML. Він зберігає обробники подій, прикріплені до будь-яких елементів DOM. </span> </p>  <h3> <span>30. Яке використання void(0)? </span> </h3> <p dir='ltr'> <span>The </span>  <a href='/what-does-javascript' rel='noreferrer noopener'> <span>порожній(0) </span> </a>  <span>використовується для виклику іншого методу без оновлення сторінки під час виклику параметра нуль. </span> </p>  <blockquote> <p dir='ltr'> <span>Для подальшого читання перегляньте нашу спеціальну статтю про </span>   <b>  <strong>Запитання для співбесіди з Javascript середнього рівня </strong>  </b>   <span>. Всередині ви знайдете понад 20 запитань із детальними відповідями. </span> </p>  </blockquote> <h2 id='javascript-interview-questions-for-experienced'> <span>Запитання для співбесіди з JavaScript для досвідчених </span> </h2> <h3> <span>31. </span>  <b>  <strong>Що таке «строгий» режим у JavaScript і як його можна ввімкнути? </strong>  </b>  </h3> <p dir='ltr'> <span>Строгий режим — це нова функція в ECMAScript 5, яка дозволяє помістити програму або функцію в суворий робочий контекст. Цей суворий контекст запобігає виконанню певних дій і створює більше винятків. Інструкція use strict вказує браузеру використовувати режим Strict, який є скороченим і безпечнішим набором функцій JavaScript. </span> </p>  <h3> <span>32. </span>  <b>  <strong>Як отримати статус CheckBox? </strong>  </b>  </h3> <p dir='ltr'> <span>Властивість прапорця DOM Input використовується для встановлення або повернення статусу позначеного поля прапорця. Ця властивість використовується для відображення атрибута HTML Checked. </span> </p>  <pre>document.getElementById('GFG').checked; </pre> <p dir='ltr'> <span>Якщо прапорець позначено, він повертає значення True. </span> </p>  <h3> <span>33. </span>  <b>  <strong>Як пояснити закриття в JavaScript і коли це використовувати? </strong>  </b>  </h3> <p dir='ltr'> <span>Закриття створюється, коли дочірня функція зберігає середовище батьківської області навіть після того, як батьківська функція вже виконана. Closure — це локально оголошена змінна, пов’язана з функцією. Закриття забезпечить кращий контроль над кодом при їх використанні. </span> </p>Javascript <code>  <pre>// Explanation of closure  function foo() {   let b = 1;   function inner() {   return b;   }   return inner;  }  let get_func_inner = foo();  console.log(get_func_inner());  console.log(get_func_inner());  console.log(get_func_inner()); </pre>  </code>  <h3> <span>3. 4. </span>  <b>  <strong>Яка різниця між методами call() і apply()? </strong>  </b>  </h3> <p dir='ltr'> <span>Обидва методи використовуються в різних ситуаціях </span> </p>  <ul> <li value='1'>  <b>  <strong>метод call(): </strong>  </b>  <span>Він викликає метод, беручи об’єкт власника як аргумент. Ключове слово this відноситься до «власника» функції або об’єкта, якому вона належить. Ми можемо викликати метод, який можна використовувати для різних об’єктів. </span> </li> <li value='2'>  <b>  <strong>Метод apply(): </strong>  </b>  <span>Метод apply() використовується для написання методів, які можна використовувати для різних об’єктів. Вона відрізняється від функції call(), оскільки приймає аргументи у вигляді масиву. </span> </li> </ul> <h3> <span>35. </span>  <b>  <strong>Як націлити певний кадр із гіперпосилання в JavaScript? </strong>  </b>  </h3> <p dir='ltr'> <span>Це можна зробити за допомогою </span>  <b>  <strong>мета </strong>  </b>  <span>атрибут у гіперпосиланні. Люблю </span> </p>  <pre> New Page </pre> <h3> <span>36. </span>  <b>  <strong>Напишіть помилки, які відображаються в JavaScript? </strong>  </b>  </h3> <p dir='ltr'> <span>У JavaScript є три різні типи помилок. </span> </p>  <ul> <li value='1'>  <b>  <strong>Синтаксична помилка: </strong>  </b>  <span>Синтаксична помилка — це помилка в синтаксисі послідовності символів або токенів, які призначені для запису певною мовою програмування. </span> </li> <li value='2'>  <b>  <strong>Логічна помилка: </strong>  </b>  <span>Це найскладніша помилка для відстеження, оскільки це помилка в логічній частині кодування або логічна помилка є помилкою в програмі, яка спричиняє неправильну роботу та ненормальне завершення роботи. </span> </li> <li value='3'>  <b>  <strong>Помилка виконання: </strong>  </b>  <span>Помилка виконання — це помилка, яка виникає під час виконання програми, також відома як виняток. </span> </li> </ul> <h3> <span>37. </span>  <b>  <strong>Яка різниця між JavaScript і Jscript? </strong>  </b>  </h3> <p dir='ltr'>  <b>  <strong>JavaScript </strong>  </b>  </p>  <ul> <li value='1'> <span>Це мова сценаріїв, розроблена Netscape. </span> </li> <li value='2'> <span>Він використовується для розробки клієнтських і серверних програм. </span> </li> <li value='3'> <span>Він повністю не залежить від мови Java. </span> </li> </ul> <p dir='ltr'>  <b>  <strong>Jscript </strong>  </b>  </p>  <ul> <li value='1'> <span>Це мова сценаріїв, розроблена Microsoft. </span> </li> <li value='2'> <span>Він використовується для розробки активного онлайн-контенту для всесвітньої мережі. </span> </li> </ul> <h3> <span>38. </span>  <b>  <strong>Що робить </strong>  </b>  <span>  </span>  <i>  <b>  <strong>var myArray = [[]]; </strong>  </b>  </i>  <b>  <strong>заява заявляє? </strong>  </b>  </h3> <p dir='ltr'> <span>У JavaScript цей оператор використовується для оголошення двовимірного масиву. </span> </p>  <h3>  <b>  <strong>39. Скількома способами можна отримати доступ до елемента HTML у коді JavaScript? </strong>  </b>  </h3> <p dir='ltr'> <span>Існує чотири можливі способи доступу до елементів HTML у JavaScript: </span> </p>  <ul> <li value='1'>  <a href='/html-dom-getelementbyid-method'>  <b>  <strong>Метод getElementById(): </strong>  </b>  </a>  <span>Він використовується для отримання елемента за його ідентифікатором. </span> </li> <li value='2'>   <b>  <strong>Метод getElementsByClass(): </strong>  </b>   <span>Він використовується для отримання всіх елементів, які мають задане ім’я класу. </span> </li> <li value='3'>   <b>  <strong>Метод getElementsByTagName(): </strong>  </b>   <span>Він використовується для отримання всіх елементів, які мають вказане ім’я тегу. </span> </li> <li value='4'>   <b>  <strong>Метод querySelector(): </strong>  </b>   <span>Ця функція приймає селектор стилю CSS і повертає перший вибраний елемент. </span> </li> </ul> <h3>  <b>  <strong>40. Яка різниця між innerHTML і innerText? </strong>  </b>  </h3> <p dir='ltr'> <span>Властивість innerText встановлює або повертає текстовий вміст як звичайний текст зазначеного вузла та всіх його нащадків, тоді як властивість innerHTML встановлює або повертає звичайний текст або вміст HTML в елементах. На відміну від innerText, внутрішній HTML дозволяє працювати з форматованим текстом HTML і не кодує та декодує текст автоматично. </span> </p>  <h3>  <b>  <strong>41. Що таке спливаюча подія в JavaScript? </strong>  </b>  </h3> <p dir='ltr'> <span>Розглянемо ситуацію, коли елемент присутній всередині іншого елемента, і обидва вони обробляють подію. Коли подія відбувається під час кипіння, внутрішній елемент обробляє подію спочатку, потім зовнішній і так далі. </span> </p>  <blockquote> <p dir='ltr'> <span>Для подальшого читання перегляньте нашу спеціальну статтю про </span>   <b>  <strong>Запитання для співбесіди з розширеним Javascript </strong>  </b>   <span>. Усередині ви знайдете понад 20 запитань із детальними відповідями. </span> </p>  </blockquote>  <br>  <br>
                     </div>

                     <!-- Article Footer with Prominent Share Buttons -->
                     <div class="px-6 md:px-8 py-8 bg-slate-50 dark:bg-slate-900/50 border-t border-slate-200 dark:border-slate-700/50">
                          <div class="flex flex-col sm:flex-row items-center justify-between gap-6">
                              <h4 class="text-base font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wide flex items-center gap-2">
                                 <i class="fa fa-share-alt text-tech-500"> </i>
                                Поділитися                              </h4>
                             
                              <div class="flex flex-wrap justify-center gap-3">
                                 <!-- Twitter -->
                                 <a href="https://twitter.com/intent/tweet?text=Запитання та відповіді на співбесіді з JavaScript&url=https://www.techcodeview.com/uk/javascript-interview-questions" 
                                   target="_blank" rel="noopener noreferrer" 
                                   class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#1DA1F2]/10 text-[#1DA1F2] hover:bg-[#1DA1F2] hover:text-white transition-all duration-300 font-bold text-sm">
                                     <i class="fa fa-twitter text-lg"> </i>
                                     <span class="hidden sm:inline">Twitter </span>
                                 </a>

                                 <!-- Facebook -->
                                 <a href="https://www.facebook.com/sharer/sharer.php?u=https://www.techcodeview.com/uk/javascript-interview-questions" 
                                   target="_blank" rel="noopener noreferrer"
                                   class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#4267B2]/10 text-[#4267B2] hover:bg-[#4267B2] hover:text-white transition-all duration-300 font-bold text-sm">
                                     <i class="fa fa-facebook text-lg"> </i>
                                     <span class="hidden sm:inline">Facebook </span>
                                 </a>
                                
                                 <!-- LinkedIn -->
                                 <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.techcodeview.com/uk/javascript-interview-questions&title=Запитання та відповіді на співбесіді з JavaScript" 
                                   target="_blank" rel="noopener noreferrer"
                                   class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#0077b5]/10 text-[#0077b5] hover:bg-[#0077b5] hover:text-white transition-all duration-300 font-bold text-sm">
                                     <i class="fa fa-linkedin text-lg"> </i>
                                     <span class="hidden sm:inline">LinkedIn </span>
                                 </a>
                              </div>
                          </div>
                     </div>
                </article>

                <!-- Comments Placeholder / Random Articles -->
                <div class="mt-8 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-6 md:p-8 shadow-sm">
                     <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 uppercase tracking-wide border-b border-slate-200 dark:border-slate-700 pb-2">
                        Вам Може Сподобатися                     </h3>
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                         <div class="group">
                              <a href="/uk/how-get-36-act-math-1311462" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
                                 <img loading="lazy" src="https://techcodeview.com/img/blog/74/how-get-36-act-math.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Як отримати 36 балів з математики ACT: 8 стратегій від ідеального бомбардира" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                              </a>
                              <h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
                                 <a href="/uk/how-get-36-act-math-1311462">Як отримати 36 балів з математики ACT: 8 стратегій від ідеального бомбардира </a>
                              </h4>
                         </div> <div class="group">
                              <a href="/uk/good-sat-scores-ivy-league-plus-edition-1311530" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
                                 <img loading="lazy" src="https://techcodeview.com/img/blog/45/good-sat-scores-ivy-league-plus-edition.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Хороші результати SAT: Ivy League Plus Edition" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                              </a>
                              <h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
                                 <a href="/uk/good-sat-scores-ivy-league-plus-edition-1311530">Хороші результати SAT: Ivy League Plus Edition </a>
                              </h4>
                         </div>
                     </div>
                </div>
             </div>

             <!-- SECONDARY COLUMN (SIDEBAR) -->
             <!-- Aside Column -->
 <div class="lg:col-span-4 space-y-8">
	
	 <!-- Best Articles Widget -->
	 <div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 shadow-sm">
		 <div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
			 <h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide flex items-center">
                 <span class="mr-2 h-2 w-2 rounded-full bg-tech-500"> </span>
                Кращі Статті             </h2>
		 </div>
		
		 <!-- Owl Carousel Preserved Container -->
		 <div id="owl-carousel-3" class="owl-carousel owl-theme center-owl-nav">
			 <!-- ARTICLE -->
			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
					 <a href="/uk/advanced-master-theorem">
						 <img src="https://techcodeview.com/img/it-problems-solutions/08/advanced-master-theorem.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Удосконалена головна теорема для повторень розділяй і володарюй" class="w-full h-full object-cover">
					 </a>
				 </div>
				 <div class="flex-1 min-w-0">
					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                         <a href="/uk/advanced-master-theorem" class="hover:text-tech-500 transition-colors line-clamp-3">Удосконалена головна теорема для повторень розділяй і володарюй </a>
                     </h4>
				 </div>
			 </article>
			 <!-- /ARTICLE --> <!-- ARTICLE -->
			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
					 <a href="/uk/multidimensional-arrays-java">
						 <img src="https://techcodeview.com/img/picked/94/multidimensional-arrays-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Багатовимірні масиви в Java" class="w-full h-full object-cover">
					 </a>
				 </div>
				 <div class="flex-1 min-w-0">
					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                         <a href="/uk/multidimensional-arrays-java" class="hover:text-tech-500 transition-colors line-clamp-3">Багатовимірні масиви в Java </a>
                     </h4>
				 </div>
			 </article>
			 <!-- /ARTICLE --> <!-- ARTICLE -->
			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
					 <a href="/uk/scripting-vs-programming-difference-between-scripting">
						 <img src="https://techcodeview.com/img/differences/43/scripting-vs-programming-difference-between-scripting.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Сценарії Vs. Програмування | Різниця між сценаріями та програмуванням" class="w-full h-full object-cover">
					 </a>
				 </div>
				 <div class="flex-1 min-w-0">
					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                         <a href="/uk/scripting-vs-programming-difference-between-scripting" class="hover:text-tech-500 transition-colors line-clamp-3">Сценарії Vs. Програмування | Різниця між сценаріями та програмуванням </a>
                     </h4>
				 </div>
			 </article>
			 <!-- /ARTICLE --> <!-- ARTICLE -->
			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
					 <a href="/uk/process-vs-thread-difference-between-process">
						 <img src="https://techcodeview.com/img/differences/25/process-vs-thread-difference-between-process.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Процес Vs. Тема | Різниця між процесом і потоком" class="w-full h-full object-cover">
					 </a>
				 </div>
				 <div class="flex-1 min-w-0">
					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                         <a href="/uk/process-vs-thread-difference-between-process" class="hover:text-tech-500 transition-colors line-clamp-3">Процес Vs. Тема | Різниця між процесом і потоком </a>
                     </h4>
				 </div>
			 </article>
			 <!-- /ARTICLE --> <!-- ARTICLE -->
			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
					 <a href="/uk/how-find-correlation-coefficient-excel">
						 <img src="https://techcodeview.com/img/picked/75/how-find-correlation-coefficient-excel.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Як знайти коефіцієнт кореляції в Excel?" class="w-full h-full object-cover">
					 </a>
				 </div>
				 <div class="flex-1 min-w-0">
					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                         <a href="/uk/how-find-correlation-coefficient-excel" class="hover:text-tech-500 transition-colors line-clamp-3">Як знайти коефіцієнт кореляції в Excel? </a>
                     </h4>
				 </div>
			 </article>
			 <!-- /ARTICLE --> <!-- ARTICLE -->
			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
					 <a href="/uk/fingers-names-english-hand">
						 <img src="https://techcodeview.com/img/english-word-play/09/fingers-names-english-hand.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Назви пальців англійською (руки та ноги) гінді із зображеннями" class="w-full h-full object-cover">
					 </a>
				 </div>
				 <div class="flex-1 min-w-0">
					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                         <a href="/uk/fingers-names-english-hand" class="hover:text-tech-500 transition-colors line-clamp-3">Назви пальців англійською (руки та ноги) гінді із зображеннями </a>
                     </h4>
				 </div>
			 </article>
			 <!-- /ARTICLE --> <!-- ARTICLE -->
			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
					 <a href="/uk/chmod-command-linux-unix-with-examples">
						 <img src="https://techcodeview.com/img/linux-tutorial/27/chmod-command-linux-unix-with-examples.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Команда Chmod у Linux/Unix із прикладами" class="w-full h-full object-cover">
					 </a>
				 </div>
				 <div class="flex-1 min-w-0">
					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                         <a href="/uk/chmod-command-linux-unix-with-examples" class="hover:text-tech-500 transition-colors line-clamp-3">Команда Chmod у Linux/Unix із прикладами </a>
                     </h4>
				 </div>
			 </article>
			 <!-- /ARTICLE --> <!-- ARTICLE -->
			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
					 <a href="/uk/difference-between-kindle">
						 <img src="https://techcodeview.com/img/differences/52/difference-between-kindle.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Різниця між Kindle і Paperback" class="w-full h-full object-cover">
					 </a>
				 </div>
				 <div class="flex-1 min-w-0">
					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                         <a href="/uk/difference-between-kindle" class="hover:text-tech-500 transition-colors line-clamp-3">Різниця між Kindle і Paperback </a>
                     </h4>
				 </div>
			 </article>
			 <!-- /ARTICLE --> <!-- ARTICLE -->
			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
					 <a href="/uk/serialization-deserialization-java">
						 <img src="https://techcodeview.com/img/java-serialization/17/serialization-deserialization-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Серіалізація та десеріалізація в Java" class="w-full h-full object-cover">
					 </a>
				 </div>
				 <div class="flex-1 min-w-0">
					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                         <a href="/uk/serialization-deserialization-java" class="hover:text-tech-500 transition-colors line-clamp-3">Серіалізація та десеріалізація в Java </a>
                     </h4>
				 </div>
			 </article>
			 <!-- /ARTICLE --> <!-- ARTICLE -->
			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
					 <a href="/uk/data-structure-types">
						 <img src="https://techcodeview.com/img/dsa-blogs/16/data-structure-types.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Типи структури даних, класифікації та застосування" class="w-full h-full object-cover">
					 </a>
				 </div>
				 <div class="flex-1 min-w-0">
					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                         <a href="/uk/data-structure-types" class="hover:text-tech-500 transition-colors line-clamp-3">Типи структури даних, класифікації та застосування </a>
                     </h4>
				 </div>
			 </article>
			 <!-- /ARTICLE -->
		 </div>
		

         <!-- Categories -->
		 <div class="mt-8 mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
			 <h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Категорія </h2>
		 </div>
		 <div class="flex flex-wrap gap-2">
             <a href="/uk/blog/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
                Блог
             </a> <a href="/uk/java-conversion/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
                Перетворення Java
             </a> <a href="/uk/maths/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
                Математика
             </a> <a href="/uk/java-collections/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
                Колекції Java
             </a> <a href="/uk/differences/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
                Відмінності
             </a> <a href="/uk/java-string/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
                Рядок Java
             </a>
         </div>

         <!-- Interesting Articles Widget -->
		 <div class="mt-8">
			 <div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
				 <h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Цікаві Статті </h2>
			 </div>
			
			 <div id="owl-carousel-4" class="owl-carousel owl-theme">
				 <!-- ARTICLE -->
				 <article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
					 <div class="absolute inset-0">
						 <img src="https://techcodeview.com/img/blog/92/how-win-coca-cola-scholarship.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Як виграти стипендію Coca Cola" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                         <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
					 </div>
					 <div class="absolute bottom-0 left-0 p-4">
						 <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/uk/blog/">Блог </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/uk/how-win-coca-cola-scholarship-131660">Як виграти стипендію Coca Cola </a> </h4>
					 </div>
				 </article>
				 <!-- /ARTICLE --> <!-- ARTICLE -->
				 <article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
					 <div class="absolute inset-0">
						 <img src="https://techcodeview.com/img/graph/19/minimum-product-spanning-tree.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Мінімальне охоплююче дерево продукту" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                         <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
					 </div>
					 <div class="absolute bottom-0 left-0 p-4">
						 <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/uk/graph/">Графік </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/uk/minimum-product-spanning-tree">Мінімальне охоплююче дерево продукту </a> </h4>
					 </div>
				 </article>
				 <!-- /ARTICLE --> <!-- ARTICLE -->
				 <article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
					 <div class="absolute inset-0">
						 <img src="https://techcodeview.com/img/blog/08/what-are-easiest-colleges-get-into.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="До яких коледжів найпростіше вступити? Список 100+ шкіл" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                         <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
					 </div>
					 <div class="absolute bottom-0 left-0 p-4">
						 <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/uk/blog/">Блог </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/uk/what-are-easiest-colleges-get-into-1311624">До яких коледжів найпростіше вступити? Список 100+ шкіл </a> </h4>
					 </div>
				 </article>
				 <!-- /ARTICLE --> <!-- ARTICLE -->
				 <article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
					 <div class="absolute inset-0">
						 <img src="https://techcodeview.com/img/strings/36/converting-decimal-number-lying-between-1-to-3999-to-roman-numerals.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Перетворення десяткового числа, що лежить від 1 до 3999, на римські цифри" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                         <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
					 </div>
					 <div class="absolute bottom-0 left-0 p-4">
						 <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/uk/strings/">Струни </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/uk/converting-decimal-number-lying-between-1-to-3999-to-roman-numerals">Перетворення десяткового числа, що лежить від 1 до 3999, на римські цифри </a> </h4>
					 </div>
				 </article>
				 <!-- /ARTICLE --> <!-- ARTICLE -->
				 <article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
					 <div class="absolute inset-0">
						 <img src="https://techcodeview.com/img/misc/35/navigableset-in-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="NavigableSet в Java" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                         <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
					 </div>
					 <div class="absolute bottom-0 left-0 p-4">
						 <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/uk/misc/">Різне </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/uk/navigableset-in-java">NavigableSet в Java </a> </h4>
					 </div>
				 </article>
				 <!-- /ARTICLE --> <!-- ARTICLE -->
				 <article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
					 <div class="absolute inset-0">
						 <img src="https://techcodeview.com/img/windows-tutorial/39/how-clear-cache-windows-10.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Як очистити кеш в Windows 10?" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                         <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
					 </div>
					 <div class="absolute bottom-0 left-0 p-4">
						 <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/uk/windows-tutorial/">Підручник Windows </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/uk/how-clear-cache-windows-10">Як очистити кеш в Windows 10? </a> </h4>
					 </div>
				 </article>
				 <!-- /ARTICLE -->
			 </div>
		 </div>
	 </div>
 </div>
 <!-- /Aside Column -->         </div>
        </div>
     </div>

 <footer class="site-footer">
         <div class="container">
             <span class="footer-links">
                Copyright ©2026 Всі Права Захищені | 
                 <a href="//www.techcodeview.com/de/">techcodeview.com </a> | 
                 <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Відмова Від Відповідальності </a> | 
                 <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Про Нас </a> | 
                 <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Політика Конфіденційності </a> 
             </span>
         </div>
     </footer>
 
     <script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"> </script>
     <script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"> </script>    
     <script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"> </script>     
	 <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"> </script>
	 <script>
    !function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
        #toTopBtn {
            position: fixed; bottom: 25px; right: 25px; z-index: 9999; opacity: 0; visibility: hidden; background-color: #0ea5e9; color: white; border: none; border-radius: 8px; width: 50px; height: 50px; font-size: 24px; cursor: pointer; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        }
        #toTopBtn:hover { background-color: #0284c7; }
    `,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
     </script>
 </body>
 </html>