Проверка кода 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 — проверка и выявление нарушений в стиле кода. Пользователям доступно множество пресетов и готовых конфигураций, которые вы можете сразу же начать использовать, если придерживаетесь такого же кодстайла.
Регулярно проводите технический аудит сайта — это позволит всегда вовремя выявлять ошибки.
(Встроенный) способ в 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>
Ключевой момент — это обработчик события
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() мы проверяем длину логина, и если она меньше
Аналогично, можно проверять абсолютно любые формы. Также не забывайте, что перед отправкой надо целиком проверить ещё раз всю форму. Делается это через 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