Вопрос по jQuery, почему не работает скрипт?

[javascript_pupil]

Пытаюсь перейти на использование этой библиотеки, т.к. очень упрощается разработка. Но вот взял простой пример и он не работает. Вот отсюда пример: https://codepen.io/geoffmuskett/pen/uldmJ

Там всего несколько строчек кода:

<script>
var maxLength = 100;
$('textarea').keyup(function() {
  var length = $(this).val().length;
  var length = maxLength-length;
  $('#chars').text(length);
});
</script>

<form>
  
  <!-- remember to markup your forms properly using labels! -->
  <label for="textareaChars">No more than 100 characters</label>

  <textarea id="textareaChars" maxlength="100"></textarea>
  
  <span id="chars">100</span> characters remaining
  
</form>

В примере всё работает, у меня - нет.

Что не так на этой странице, подскажите, пожалуйста: https://www.bratskonline.ru/test.shtml

jQuery там подключается внизу страницы, версия jquery-3.4.1.min.js, в примере тоже "min", только более ранняя.

[laimas]

Либо <script> ниже <form>, либо определять обработчик нужно по событию загрузки страницы https://ruseller.com/jquery.php?id=124

[javascript_pupil]

Поменял их местами, но всё равно не работает.

А не могут там другие javascript конфликтовать с jQuery? Там всякие метрики, счётчики и т.п. есть.

[laimas]

Метрики не имеют к этому отношения, а вот другие библиотеки, например использующие $, могут. Просто поменять местами недостаточно, в таком варианте подключение JQ должно быть всегда вначале. Устанавливайте обработчики по событию загрузки, как по ссылке. И смотрите консоль, там ошибки возможные отражаются.

[javascript_pupil]

Добавил как советуют в stackoverflow:

<form>
  
  <!-- remember to markup your forms properly using labels! -->
  <label for="textareaChars">No more than 100 characters</label>

  <textarea id="textareaChars" maxlength="100"></textarea>
  
  <span id="chars">100</span> characters remaining
  
</form>

<script>
jQuery(document).ready(function($){

var maxLength = 100;
$('textarea').keyup(function() {
  var length = $(this).val().length;
  var length = maxLength-length;
  $('#chars').text(length);

});


});
</script>

Но всё равно не работает. Причём там советуют ставить script в head, а у меня используется bootstrap 4, который рекомендует ставить его вниз страницы. Пробовал оба варианта, всё равно счётчик не считает.

[voraa]

Смотрите консоль, какие ошибки выдает
И jquery и скрипты bootstrap лучше ставить в head.

То, что я сейчас вижу на вашей странице
У вас сначала идет вызов

<form>    <!-- remember to markup your forms properly using labels! -->  <label for="textareaChars">No more than 100 characters</label>  <textarea id="textareaChars" maxlength="100"></textarea>
<span id="chars">100</span> characters remaining  </form><script>jQuery(document).ready(function($){var maxLength = 100;$('textarea').keyup(function() {  var length = $(this).val().length;  var length = maxLength-length;  $('#chars').text(length);});});</script>

А потом где то далеко внизу идет вызов библиотеки jquery, в которой и определяются функции jQuery (и $)
Естественно возникает ошибка
Uncaught ReferenceError: jQuery is not defined

[javascript_pupil]

voraa, на сайте Bootstrap написано:

Place the following <script>s near the end of your pages, right before the closing </body> tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.

У меня так и сделано.

Либо <script> ниже <form>

У меня ниже, но не работает.

либо определять обработчик нужно по событию загрузки страницы

Так ведь сделал же:

jQuery(document).ready(function($){
...
...
});

но не работает. Насколько я понимаю, как-то не так jQuery определён именно в скрипте, а не в конце страницы.

На этой же странице используются функции jQuery, которые и выше в HTML коде и работают прекрасно. Может быть в них проблема? Там тоже есть $. Вот:

$("#prd").click(function() {
...
});

И оно работает. А счётчик нет.

[voraa]

Уясните, как работает браузер.
Он начинает читать текст сверху вниз.
Если он встречает теги html, то он строит дерево dom.
Если встречает link, то загружает его и строит таблицы стилей.
Если встречает <style src=...>, то загружает файл и выполняет его
Если встречает <style>... </style>, то просто выполняет его.
Все строго сверху вниз.
Когда все построено, и скрипты загружены и выполнены, возникает событие 'DOMContentLoaded'. Именно по нему работает функция jquery().ready().
Но, что бы вызвать эту функцию браузер должен знать, что она вообще существует, и как ее выполнять.
Эта функция описана в библиотеки jquery, которую вы вызываете где то в конце
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
До того, как этот файл загрузится и отработает, браузер понятия не имеет, что существует какая то там функция jQuery (или $()).
И любое обращение к ним вызовет ошибку.

По мне, так это дурацкое занятие, размещать скрипты в теле html.
Все скрипты в head.
Те, которые должны вызываться после загрузки - в обработчик DOMContentLoaded

Я не нашел там prd вообще. Ничего не могу сказать.

[laimas]

Все скрипты в head.

Это почему?

[voraa]

Это почему?

Просто потому, что не вижу ни одного преимущества в размещении скриптов в теле html или в конце body.
А когда в одном месте, порядка больше
Конечно, я не буду спорить, есть ситуации, когда чужой скрипт, и он написан так, что не реагирует на события загрузки документа, и тут уж с ним ничего не сделаешь. Но сам я так никогда писать не буду.