Проверка кода JavaScript: популярные валидаторы
Karina | 10.07.2015
Работая над кодом, очень легко не заметить и пропустить какую-нибудь запятую или скобку. А перечитывать длинный неработающий код в поисках такой ошибки — вообще неблагодарное дело. В этом случае может помочь проверка кода специальными программами-инструментами. Наша подборка посвящена нескольким, особо популярным валидаторам для языка JavaScript.
JSLint
«JSLint will hurt your feelings» — такое предупреждение можно увидеть на сайте валидатора JSLint, созданного в 2002 году Дугласом Крокфордом. И это правда, поскольку очень часто JSLint находит множество ошибок в абсолютно работающем коде. Если вы стремитесь к совершенствованию своего кода и доведению до идеального состояния — воспользуйтесь этим сервисом.
JSHint
JSHint — более удобная и настраиваемая, а также более популярная версия валидатора JSLint. JSHint больше нравится программистам за возможность выбирать настройки и правила для проверки кода, и сопровождается хорошей документацией. Легко интегрируется в редакторы.
ESLint
Этот инструмент также имеет достаточное количество пользовательских правил, которые при этом могут иметь дополнительные настраиваемые параметры. Доступны различные плагины. ESLint легко понятен и имеет множество особенностей, которые отсутствуют в других сервисах.
JSCS
Инструмент JavaScript Code Style отличается от предыдущих тем, что не проверяет код на наличие потенциальных багов и ошибок. Задача JSCS — проверка и выявление нарушений в стиле кода. Пользователям доступно множество пресетов и готовых конфигураций, которые вы можете сразу же начать использовать, если придерживаетесь такого же кодстайла.
Регулярно проводите технический аудит сайта — это позволит всегда вовремя выявлять ошибки.
idg.net.ua
(Встроенный) способ в JavaScript, чтобы проверить, является ли строка допустимым числом
Чтобы проверить, является ли переменная (включая строку) числом, проверьте, не является ли она числом:
Это работает независимо от того, содержит ли переменная строку или число.
isNaN(num) // returns true if the variable does NOT contain a valid number
Примеры
isNaN(123) // false
isNaN('123') // false
isNaN('1e10000') // false (This translates to Infinity, which is a number)
isNaN('foo') // true
isNaN('10px') // true
Конечно, вы можете отрицать это, если вам нужно. Например, чтобы реализовать пример IsNumeric вы дали:
function isNumeric(num){
return !isNaN(num)
}
Чтобы преобразовать строку, содержащую число, в число:
работает только в том случае, если строка содержит только числовые символы, иначе она возвращает NaN.
+num // returns the numeric value of the string, or NaN
// if the string isn't purely numeric characters
Примеры
+'12' // 12 +'12.' // 12 +'12..' // Nan +'.12' // 0.12 +'..12' // Nan +'foo' // NaN +'12px' // NaN
Свободно преобразовать строку в число
полезно для преобразования 12px в 12, например:
parseInt(num) // extracts a numeric value from the
// start of the string, or NaN.
Примеры
parseInt('12') // 12
parseInt('aaa') // NaN
parseInt('12px') // 12
parseInt('foo2') // NaN These last two may be different
parseInt('12a5') // 12 from what you expected to see.
Поплавки
Имейте в виду, что, в отличие от +num, parseInt (как следует из названия) преобразует число с плавающей точкой в целое число, отсекая все после десятичной точки (если вы хотите использовать parseInt() из-за этого поведения, вы, вероятно, лучше использовать другой метод):
+'12.345' // 12.345
parseInt(12.345) // 12
parseInt('12.345') // 12
Пустые строки
Пустые строки могут быть немного нелогичными. +num преобразует пустые строки в ноль, а isNaN() предполагает то же самое:
+'' // 0
isNaN('') // false
Но parseInt() не согласен:
parseInt('') // NaN
qarchive.ru
Справочник javascript: typeof
Вызов typeof возвращает строку, содержащую информацию о типе операнда.
Оператор typeof используется в двух формах:
- typeof operand
- typeof (operand)
Эти формы идентичны: можно использовать скобки, а можно и не использовать — работает одинаково.
Оператор возвращает тип в виде строки, например:
var a = 5 alert(typeof a) // "number" var a = 'test' alert(typeof a) // "string"
Тип typeof возвращается, исходя из следующей таблицы соответствия типам javascript:
| Тип | Результат |
|---|---|
| Undefined | «undefined» |
| Null | «object» |
| Boolean | «boolean» |
| Number | «number» |
| String | «string» |
| Function | «function» |
| Любой другой объект | «object» |
Часто возникают вопросы — почему и зачем таблица именно такая? Ответ простой: потому что так получилось по ходу развития javascript.
В старом javascript-коде можно увидеть применение typeof
if (typeof(var) == "undefined") { ... }
В современном javascript лучше писать:
if (window.var !== undefined) { ... }
или, зачастую, подойдет и просто:
if (window.var) { ... }
P.S. Использовать просто if(var) нельзя, так как доступ к неопределенной переменной вызовет ошибку. Ну а обращение к отсутствующему свойству глобального объекта window всего лишь вернет undefined
Кроме того, оператор typeof используется для полиморфизма. Например, следующая функция получает узел DOM или ID узла и в обоих случаях корректно прячет узел.
function hideNode(node) {
if (typeof node == 'string') {
node = document.getElementById(node)
}
node.style.display = 'none'
}
javascript.ru
Динамическая проверка формы на JavaScript
Вы здесь: Главная — JavaScript — JavaScript Основы — Динамическая проверка формы на JavaScript
Если Вы не хотите мучить своих пользователей лишними перезагрузками страницы и не хотите лишний раз нагружать сервер, то перед отправкой форм на сервер, их надо обязательно проверить через JavaScript. И в этот раз мы обсудим динамическую проверку формы на JavaScript.
Начнём мы с HTML-формы:
<form name="myform" action="#" method="post">
<p>Логин: <input type="text" name="login" onkeyup="check(this.value)" /> <span>Логин введён неправильно</span></p>
</form>Ключевой момент — это обработчик события onkeyup. Событие keyup отвечает за отпускание клавиши. Обратите внимание, что очень часто ставят onkeypress или onkeydown — это неправильно, так как будет происходить отставание на 1 шаг. Рекомендую попробовать поставить, например, onkeypress и проанализировать результат.
JavaScript-код тоже очень простой:
<script type="text/javascript">
function check(login) {
if (login.length < 3) document.getElementById("e_login").style.display = "inline";
else document.getElementById("e_login").style.display = "none";
}
</script>
В функции check() мы проверяем длину логина, и если она меньше 3-х символов, то мы выводим ошибку (делая соответсвующий элемент видимым), иначе прячем это сообщение.
Аналогично, можно проверять абсолютно любые формы. Также не забывайте, что перед отправкой надо целиком проверить ещё раз всю форму. Делается это через onsubmit у тега form. И всегда помните, что проверка формы на JavaScript не отменяет проверку формы в PHP.
-
Создано 07.06.2013 10:03:58 -
Михаил Русаков
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
-
Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>Она выглядит вот так:
-
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>Она выглядит вот так: Как создать свой сайт
- BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]
myrusakov.ru