Начал изучать язык программирования javascript. Изучаю его не по книгам, а сразу на практике, то есть придумываю себе задания и делаю их. И вот всего за несколько дней изучения языка пришлось столкнуться с некоторыми проблемами и с некоторыми интересными фактами в javascript, о чём сегодня хочу поведать.
Самый короткий способ определения браузера IE
Все проблемы с javascript возникали у меня практически пока только с браузером Internet Explorer. Поэтому важно для IE писать отдельный обработчик или отдельную функцию. На хабре нашел самый короткий способ определения IE. Для этого необходимо всего-лишь задать следующую переменную:
IE = '\v'=='v'
Чтобы понять как использовать эту переменную, покажу на примере:
<script type="text/javascript"> var IE = '\v'=='v'; if (IE) { // здесь обработчик под IE } </script>
В чём смысл сравнения '\v'=='v'
также оговаривался на хабре.
maxshopen: По стандарту слэш перед символом, игнорируется, если это не escape-последовательность. Поэтому \x и x — одно и тоже, а вот \v — это вертикальная табуляция. IE видимо её не поддерживает, отсюда и различие.
Метод innerHTML и табличные элементы в IE
Данный метод предназначен для динамического добавления в объект html-текста, то есть теги будут обрабатываться, а не выводиться обычным текстом.
К сожалению, если мы попробуем добавить что-то подобное:
document.getElementsByTagName('tbody')[0].innerHTML += '<tr><td>Первая ячейка</td><td>Вторая ячейка</td><td>Третья ячейка</td></tr>'
и запустить это в Internet Explorer, мы получим текст вида Первая ячейкаВторая ячейкаТретья ячейка
. Всё это потому, что в IE невозможно создавать ячейки и строки таблицы через innerHTML. Из мануала Microsoft:
...The property is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR...
Обхода этой ошибки пока я не знаю (по-моему, вообще нету обхода), поэтому советую не использовать табличную вёрстку при планировании работы с javascript.
Создание поля через javascript и реакция IE
Для создания обычного поля input в любом браузере используют примерно такой код:
var newinput = document.createElement('input') newinput.type = 'text' newinput.name = 'unknown' document.getElementsByTagName('form')[0].appendChild(newinput)
Если во всех браузерах ошибок не возникнет, то в IE новое поле не появится. Всё дело в том, что в IE невозможно задать имя (а возможно и любые атрибуты?) и тип динамически созданного поля.
Для обхода этой проблемы я как-раз таки и искал способ определения браузера IE. Для создания подобного поля в IE используют такой код:
var newinput = document.createElement('<input type="text" name="unknown" />') document.getElementsByTagName('form')[0].appendChild(newinput)
При попытке запуска последнего кода в Google Chrome выдается ошибка. Полагаю, что в других нормальных браузерах подобная реакция будет.
Изменение типа поля на file
Существует такая проблема, встречаемая на всех браузерах. Допустим на странице расположено поле типа file. С помощью команды
document.getElementsByTagName('input')[0].type = 'text'
можно изменить тип поля на text. Обратную же операцию совершить невозможно.
Обходил эту проблему я так. Удалял существующее поле и заново динамически создавал новое поле уже с типом file. Достаточно нудный способ, конечно, может кто знает по-лучше способ?
В общем говоря, во многих языках есть свои подводные камни и ошибки, но в javascript как-то много всего сразу наплыло. Интересно что дальше будет, много ли таких косяков с ним имеется?
Важный этап жизни проектов - раскрутка сайтов - должен производится профессионалами. Использовать возможность аутсорсинга умно и выгодно.