Как вызывать функции JavaScript в HTML?

Оффтоп javascript
1

Привет всем! Я новичок в веб-разработке и пытаюсь разобраться, как правильно вызывать функции JavaScript в HTML. У меня есть простой код, который рисует квадратик на канвасе:

<canvas id="myCanvas" width="200" height="200"></canvas>
<script src="script.js"></script>

function drawSquare() {
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'red';
  ctx.fillRect(50, 50, 100, 100);
}

window.onload = drawSquare;

Я знаю, что можно использовать window.onload, но есть ли другие способы вызвать эту функцию? Можно ли как-то вызвать ее прямо из HTML? И вообще, какие есть лучшие практики для вызова JavaScript-функций в HTML? Буду благодарен за любые советы и объяснения!

2

согласен с другими, что лучше разделять логику и разметку. но хочу добавить еще один способ - можно использовать модули js. Просто добавь type=“module” к тегу script:

<script type="module" src="script.js"></script>

а в самом скрипте экспортируй функцию:

export function drawSquare() {
  // твой код
}

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

3

Как senior фронтендер, советую разделять логику и разметку. Вместо window.onload используй DOMContentLoaded - он срабатывает раньше. Вот пример:

document.addEventListener('DOMContentLoaded', () => {
  drawSquare();
  // Тут можно вызывать и другие функции
});

Такой подход позволяет держать JS-логику отдельно от HTML, что упрощает поддержку кода. Плюс, можно добавлять несколько обработчиков на одно событие, в отличие от window.onload.

4

Можно вызвать функцию напрямую из HTML, используя атрибут onclick. Например: Нарисовать квадрат. Но это не лучшая практика. Лучше добавлять обработчики событий в JS: document.getElementById(‘myButton’).addEventListener(‘click’, drawSquare). Так код будет чище и легче поддерживать. А еще можно использовать DOMContentLoaded вместо window.onload - он сработает быстрее.