Для чего if (chr == null) и почему мы пишем if (chr < '0' || chr > '9'), а не if (chr < 0 || chr > 9) и в чем суть?

Question

[olya_097]

1) Для чего if (chr == null)

2) почему мы пишем if (chr < '0' || chr > '9'), а не if (chr < 0 || chr > 9) и в чем суть?

3) для чего данная строка и зачем условие e = e || event;

Введите ваш возраст:
  <input type="text">


  <script>
    document.getElementsByTagName('input')[0].onkeypress = function(e) {

      e = e || event;

      if (e.ctrlKey || e.altKey || e.metaKey) return;

      var chr = getChar(e);

    
      if (chr == null) return;

      if (chr < '0' || chr > '9') {
        return false;
      }

    }

    function getChar(event) {
      if (event.which == null) {
        if (event.keyCode < 32) return null;
        return String.fromCharCode(event.keyCode) // IE
      }

      if (event.which != 0 && event.charCode != 0) {
        if (event.which < 32) return null;
        return String.fromCharCode(event.which) // остальные
      }

      return null; 
    }
  </script>

Comments

[Сергей delphinpro]

e = e || event;

Это дань устаревшим браузерам, в частности IE8 и ниже. Он не передает объект ивента в коллбэк, а вместо этого создает глобальный объект event. Чтобы гарантированно работать с объектом события, используется такая запись.

if (chr < '0' || chr > '9')

В кавычках здесь нет особого смысла. Просто так написали. Все равно при сравнении сработает приведение типов.

[olya_097]

Сергей delphinpro, всмысле в кавычках нету смысла? убираю их и результат при вводе будет другим

Answer 1

[Saboteur]

1) if (chr < '0' || chr > '9') {
проверяется ввод пользователем цифр. То есть проверяются не числа, а символы (character)

2) e = e || event;
если е не пустой (не null), то ничего не происходит, если пустой, то он теперь event

3) if (chr == null)
если символ пустой - то выходим из функции

Comments

[olya_097]

ок
извиняюсь, за глупый вопрос

а почему мы пишем именно if (chr < '0' || chr > '9') ?
а не if (chr < '3' || chr > '6') к примеру

[shmatuan]

olya_097, потому что тут от 0 до 9 цифры?)
if (chr < '3' || chr > '6') - от 3 до 6

[Saboteur]

потому что коды символов идут подряд от 0 до 9.
Проверяется введенный символ на то, что это цифра. Если он за пределами диапазона от 0 до 9, значит это либо буква, либо другой какой-то символ.

if (chr < '3' || chr > '6') к примеру
Сработает, если вы ввели 3,4,5,6. А на другие цифры уже выполнится действие

[olya_097]

Saboteur, а
поняла
тоесть если б в коде было бы if (chr < '3' || chr > '9')
то 0 , 1 и 2 банально бы нельзя было ввести?

[Saboteur]

типа да.

[olya_097]

Saboteur, спасибо

[Stalker_RED]

olya_097, потому что "от нуля до 9" - это любые цифры, а chr < '3' || chr > '6' это только 3,4,5 и 6.

[olya_097]

Stalker_RED, да-да
спасибо

[Stalker_RED]

olya_097, сорри, у меня некоторое время была открыта вкладка, и я писал комментарий как будто он третий в этой ветке, а оказалось что все уже успели разъяснить :)

[olya_097]

Stalker_RED, та всё супер)
спасибо

[olya_097]

Stalker_RED, но кстати
все пишут что if (chr == null) return; лишнее

а if (chr == null) return; и if (chr == null) return false; это ж оно и тоже?

[Сергей delphinpro]

olya_097,

а if (chr == null) return; и if (chr == null) return false; это ж оно и тоже?

Если смотреть отвлеченно от данного примера, то это немного разные возвраты. Первый вернет значение undefined, второй false. Вы можете по разному обрабатывать эти значения. В данном случае тоже возврат false запрещает ввод символа.

[Saboteur]

P.S. Если все супер, то было бы хорошо пометить ответ как решение =)

[olya_097]

Saboteur, да, конечно. так и хотела сделать)
спасибо

Answer 2

[Владимир]

https://learn.javascript.ru/comparison#sravnenie-strok
null < '2' вернет true, для того, чтобы такое сравнение не выполнялось и поставили
if (chr == null) return;

Comments

[olya_097]

так а зачем null < '2' тут

[Владимир]

Для примера, какое условие нужно отсеять

Answer 3

[Azilla]

2) почему мы пишем if (chr < '0' || chr > '9'), а не if (chr < 0 || chr > 9) и в чем суть
Численное преобразование происходит в математических функциях и выражениях, а также при сравнении данных различных типов (кроме сравнений ===, !==)
https://learn.javascript.ru/types-conversion
https://habr.com/company/ruvds/blog/347866/
так что вы правы. Просто в данном случае if (chr < '0' || chr > '9') отработает корректно. Имхо, лучше всё-таки учитывать преобразование различных типов при сравнении.

3) для чего данная строка и зачем условие e = e || event;
e = e || event;
~
e = e || window.event;
если event не был явно определён выше. Т.е. допустим так

var event = new Event('keypress');
document.getElementsByTagName('input')[0].onkeypress = function(e) {
      e = e || event;
...

event == window.event; e!=event;
и код будет работать не совсем корректно.
через window.event также можно получить объект события. (javascript.ru/tutorial/events/properties здесь такой же код используется)
Имхо, опять же, присваивание e = e || event; не нужно и корректно работает только в текущей ситуации. Функция обработчик даже в чистом js всегда с event во входных параметрах. Даже если в функции явно не задана переменная для входящего объекта события, его можно получить через arguments.