Поддержка JavaScript на мобильных устройствах. Отладка javascript на мобильных устройствах

Современные сайты создаются при помощи различных элементов, делающих их интерактивными, наглядными, удобными и красивыми. Если несколько лет назад веб-страницы по большей части представляли собой текст и изображения, то сейчас почти на любом сайте можно найти разнообразные анимации, кнопки, медиа-проигрыватели и другие элементы. За то, чтобы вы могли это все видеть в своем браузере, отвечают модули - небольшие, но очень важные программки, написанные на языках программирования. В частности, это элементы на языке JavaScript и Java. Несмотря на схожесть названий, это разные языки, и они отвечают за разные детали страницы.

Порой у пользователей могут возникать некоторые проблемы с работой JavaScript или Java. Из этой статьи вы узнаете, как включить JavaScript и установить поддержку Java в Яндекс.Браузере.

JavaScript отвечает за отображение на странице скриптов, которые могут носить как важную, так и второстепенную функцию. По умолчанию поддержка JS включена в любом браузере, но она может быть и выключена по разным причинам: случайно самим пользователем, в результате сбоев или из-за вирусов.

Чтобы включить JavaScript в Яндекс.Браузере, выполните следующее:


Вы также можете вместо «Разрешить JavaScript на всех сайтах» выбрать «Управление исключениями» и назначить свой черный или белый список, где JavaScript не будет или будет запускаться.

Установка Java

Чтобы браузер поддерживал работу Java, его сперва нужно установить на свой компьютер. Для этого переходим по ссылке ниже и скачиваем Java-установщик с официального сайта разработчиков.

Установка программы максимальна проста и сводится к тому, что вам нужно выбрать место установки и подождать чуть-чуть, пока ПО будет инсталлировано.

Если вы уже устанавливали Java, проверьте, включен ли соответствующий плагин в браузере. Для этого в адресную строку браузера введите browser://plugins/ и нажмите Enter . В списке плагинов поищите Java(TM) и нажмите на кнопку «Включить» . Обратите внимание, что такого пункта в браузере может и не быть.

После того, как вы включили Java или JavaScript, перезапустите браузер и проверьте, как работает нужная страница с включенными модулями. Мы не рекомендуем их отключать вручную, так как множество сайтов будет отображаться некорректно.

Сейчас сложно найти сайт, построенный на одном языке программирования, обычно используется целый комплекс веб-языков для разработки современного и функционального ресурса. JavaScript для Yandex браузера отвечает за динамические действия, язык отличается способностью выполнять манипуляции асинхронно, то есть без перезагрузки страницы. Любые действия, при которых происходит изменение контента (за исключением видео и игр), выполняются благодаря возможностям JS языка. JavaScript в Яндекс браузере необходимо включить, ведь если он будет отключен, то большинство сайтов перестанут работать, на экране будет показываться ошибка или будет происходит сбой в отображении контента.

Прежде, чем определиться отключить или включить JavaScript в Yandex браузере, важно понять, за что отвечает этот язык программирования. В общем JS является интерактивным языком, обрабатывающим любые действия прямо на странице.

За что отвечает ЯваСкрипт на примерах:

  • Проверка правильности ввода логина и пароля. На стадии регистрации посредством JS подсвечиваются поля, заполненные правильно и неправильно, а также появляются подсказки;
  • Обновление страниц без перезагрузки вкладки. Большинство сайтов при переходе между разделами загружаются полностью, но есть и те, у которых всё происходит моментально, без повторного построения страниц. Ярким примером служит ВК, в котором вкладка музыки, поиск, добавление новостей в ленте и многое другое реализовано на JS;
  • Подключение рекламы. Спорный момент, конечно, реклама мешает, но раньше ожидалось подключение к рекламным серверам и только после этого происходило построение страницы, а сейчас сразу загружается и отображается контент, а реклама подгружается позже. В результате повышается скорость загрузки страниц;
  • Интерактивные меню и изменение стилей элементов. Все встречали сайты, где после определённых действий (кликов, наведения курсора и т. п.) происходили изменения цвета отдельных кнопок, блоков или даже страниц. Силами CSS с псевдоклассом:hover можно настраивать изменение стилей элемента при наведении мыши, но на большее язык не способен, все остальные действия выполняются на JS;
  • Анимация. Обычно это простые анимационные эффекты: перелистывание слайдов, падение дождя или снежинок, развёртывание содержимого определённых блоков;
  • Асинхронная связь с сервером. Является одной из главных причин использования языка, без обновления страницы можем проверить: есть ли пользователь с таким ником, правильно ли введены логин с паролем и т.п. Страница может отправлять запрос и сразу получать ответ с базы данных сервера.

Включить поддержку JavaScript в браузере Яндекс рекомендуем для нормальной работы ресурсов, так как всё большее количество владельцев сайтов отказываются работать с пользователями без JS. Есть и обратная сторона вопроса, Джава Скрипт – это потенциально уязвимый элемент в обозревателе. Его могут использовать мошенники с целью хищения персональных данных или внедрения вируса. Если нужно воспользоваться ресурсом, к которому нет доверия, лучше отключить JS на период использования сайта.

Важно! По умолчанию в полной версии Яндекс обозревателя JS уже включен, то есть на чистом браузере нет необходимости активировать надстройку. В мобильной версии ЯваСкрипт может быть отключён, на платформе iOS заявили об уязвимости языка и отказались от его поддержки.

Как включить JavaScript в Яндексе браузере?

Есть один, но простой способ включить JavaScript в Яндекс браузере, для его реализации потребуется воспользоваться настройками обозревателя.

Процесс активации JavaScript в Яндекс браузере:

Если не получается включить надстройку JavaScript в браузере Яндекс из-за сложностей в её нахождении, можем на странице «Настройки», в правой части окна, в строку «Поиск настроек» ввести «JavaScript». Веб-обозреватель самостоятельно найдёт раздел, где находится настройка и подсветит кнопку, на которую нужно нажать. Перейдя на страницу с настройками листаем вкладку немного вниз и здесь уже можем включить сценарии JavaScript в Яндекс браузере.

Полезно! Часто пользователи, отключающие JS, стремятся изменить настройки и cookie. Выключение куки влечёт к невозможности использовать часть сайтов полностью. Другие ресурсы готовы работать без куки, но доступ к защищённым разделам и аккаунтам окажется недоступным. Любые фильтры и остальные настройки будут слетать. На большинстве веб-сайтов встречается плотное взаимодействие между cookie и JS.

Включить куки и JavaScript в Яндекс браузере можем одинаковым способом: переходим на страницу «Настройки содержимого» , нам нужен первый же раздел, называющийся «Файлы cookie», где устанавливаем «Разрешить сохранение локальных данных». Ниже таким же способом включаем JS.

Как выключить JavaScript в Yandex browser?

Нам не придётся долго искать место, где в Яндекс браузере отключить JavaScript, ведь процедура выполняется в том же окне и месте.

Отключаем ДжаваСкрипт в Яндекс браузере:


Как настроить JS в Яндекс обозревателе?

В Яндекс браузере есть место, где можем посмотреть и изменить настройки JavaScript, а именно указать браузеру должен ли запускаться JS на конкретном сайте. Есть 2 способа персонализации:

  • Создать собственный «чёрный список». Подразумевается, что JS включен на всех ресурсах, за исключением сайтов, занесённых в список;
  • Сформировать «белый список». Если ДжаваСкрипт отключён в обозревателе, можем запустить его для отдельных сайтов, которые не могут обойтись без динамического языка.

Как настроить списки:


Есть ещё легче путь добавить или убрать сайт из списков, не потребуется специально переходить в настройки и копировать URL-адреса сайтов. Найти JavaScript в браузере Яндекс можем прямо в поисковой строке, находясь на любом сайте.

Лёгкий способ управления исключениями:


Почему не работает JavaScript в Яндекс браузере и как бороться?

Есть несколько причин появления проблем с JS:


Интересно! Чтобы визуально увидеть результат работы языка, можем воспользоваться консолью JavaScript в Яндекс браузере. Переходим на любой сайт и делаем клик правой кнопкой мыши, среди опций выбираем «Исследовать элемент». Кликаем на вкладку «Console» и вводим — alert(‘Доброго времени суток’). Должно появиться уведомление поверх вкладки браузера. В панели можем выполнять практически любые действия, но потребуются базовые познания в структуре и способе написания кода.


Несмотря на потенциальную уязвимость технологии, рекомендуем включить JavaScript в Яндекс браузере, иначе использование веб-обозревателя будет сложно назвать комфортным. На опасных сайтах всё же лучше отключать JS.

Недавно возникла у меня необходимость создать небольшое html5 приложение для смартфонов.
Почему html5? Все предельно просто: при наличии мобильной версии, сайт можно за пару дней допилить до необходимого состояния или же написать с нуля (что не так важно) и в дальнейшем заниматься поддержкой только одной версии кода, не распыляясь на различные платформы.

Для сборки приложения я использовал Phonegap (не буду вдаваться в описания тулзы, так как статей на хабре хватает). HTML, javascript вроде был отлажен на десктопе, успешно собран и залит на тестовые смартфоны, однако не все так гладко. В процессе тестирования мне пришлось столкнуться с несколькими глюками свойственными, только конкретным платформам и браузерам (Скажем в android 2.1-2.2 если вставить input с обработчиком какого-либо события в определенное место DOM, баузер будет просто падать и главное тут ничего не поделать, это чисто баг андройда и его браузера, эта проблема «попортила мне не мало крови», так как в начале я не понимал что вообще происходит и грешил на кривой phonegap, пока не подключился дебагером и не посмотрел что там происходит).

Проблема встала довольно реальная, как посмотреть что происходит в мобильном браузере, какие ошибки возникают и когда. На хавбе я нашел решение через window.onerror но по мне такой подход хорош для отлова багов в длительном периоде, когда же у тебя что-то не работает конкретно сейчас, хочется иметь в распоряжении более удобные инструменты

Для отладки html приложения под андройд неплохо подойдет Eclipse (скорей всего вы используете именно его для сборки приложения). Если у вас установлен android sdk и плагин для eclipse (если нет, пройдя по ссылочке это можно исправить), то во вьюшках можно найти logCat, который при подключении к устройству будет выводить все полученную информацию, в том числе и сообщения console.log() выводимые javascript"ом + выводятся все действия производимые с телефоном, это помогает отлаживать если есть какие-то проблемы с обработкой событий.
LogCat можно кстати использовать и без эклипса, это инструмент android sdk, но по мне такой вариант не совсем удобен.

Для iphone есть неплохая утилитка weinre , кстати её рекомендуют ребятки из phonegap. Более конктено с ней можно ознакомиться по сылке, но суть такая: вы скачиваете программку, запускаете и она начинает слушать порт компьютера. В код вашего приложения добавляете js, который подгружается запущенного вами сервера, конектится к нему и начинает общаться с приложением. Далее вся отладка происходит по стандартному сценарию в отладчике хрома. который запускает программка, имхо это самый удобный вариант. Краткое пособие по запуску:

  • скачиваем и распаковываем архив
  • устанавливаем
  • идем в папочку ~/.weinre/ (если её нет создаем) там создаем файл server.properties с таким текстом
    boundHost: -all- httpPort: 8081 reuseAddr: true readTimeout: 1 deathTimeout: 5 настройки конечно можно поменять под себя.
  • далее узнаем ip своей машинки и добавляем в наше приложение эта строчка будет подгружать js код для общения с сервером weinre. Соответственно надо чтобы телефон и компьютер были в одной сети и a.b.c заменить на свой ip. Запускаем приложение в телефоне или симулятор и начинаем отлаживать в привычной среде.
  • Мне кажется что можно было бы поэкспериментировать и внедрить выдаваемый ею код в приложение под android, хотя у меня не дошли пока руки покопаться в js для того, чтобы понять, что там используется.

    В заключении хотел бы поведать вам ещё про один интересный способ, недавно наткнулся на него, принцип работы схож с weinre. Есть такой сайтик jsconsole.com , который предоставляет инструмент, с помощью которого можно достучаться до html на удаленном устройстве и получать от туда сообщения через console.log, а также работать с его DOM деревом. Это конечно не полноценный дебагер, как в случае с wienre но простота и доступность способа заставляет обратить на него внимание! На сайте прекрасная документация и пара обучающих видео, так что проблем с использованием ни у кого возникнуть не должно.
    Если в двух словах то вам надо зайти на сайт, вбить команду ":listen", скопировать выданный скрипт в ваш сайт или приложение и вуаля - все работает.

    Это конечно не все возможные варианты, мне попадалось описание и других, но проблематичность их использования заставила исключить их из списка. Если кто-то может дополнить список достойным кандидатом, то я только за! (включу его в статью с копирайтом автора)

    Начиная работать с JavaScript в мобильной среде важно выяснить уровень поддержки этого языка в целом и некоторых функций (в том числе, старых и проверенных временем) в частности.

    Функция обнаружения

    Самый простой способ обнаружить, доступно ли какое-то свойство, API, объект или функция — это сделать запрос при помощи простого оператора if:

    If (object) { // Object available }

    Например:

    If (document.getElementById) { // DOM function available }

    Даже в тех мобильных устройствах, где есть поддержка JavaScript, он вполне может не работать из-за настроек пользователя или компании, если речь о корпоративном подключении (как пример — устройства BlackBerry). Всегда делай и не-JavaScript вариант функционала твоего сайта.

    Стандартные диалоговые окна

    В JavaScript поддерживается определенный перечень стандартных диалоговых окон, которые не очень ценятся при разработке современных декстопных веб-сайтов и часто заменяются на Dynamic HTML или библиотеками UI. В мобильных же веб сайтах стандартные диалоговые окна хорошо подходят для использования (рисунок 8.1).

    Рис. 8.1. Используя стандартные JavaScript диалоги вы получите бесплатный богатый и мультиплатформенный интерфейс, используя элементы управления пользовательского интерфейса от операционной системы

    Список доступных диалоговых окон:

    • alert для отображения сообщения;
    • confirm для получения от пользователя подтверждения действия;
    • prompt для получения от пользователя строки;
    • print для отправки веб-страницы на печать;
    • find для вызова функции поиска в браузере.

    Диалоговое окно find не входит в стандарт, но работает практически во всех не-IE декстопных браузерах. Это диалоговое окно получает три дополнительных параметра: текст, который нужно найти, чувствительность к регистру (boolean) и фложок направления поиска (boolean). В целом нужно избегать использования этого окна в мобильных браузерах. В большинстве их них вообще нет функции поиска.

    Диалоговое окно print несовместимо с мобильными устройствами и браузерами по очевидным причинам, но alert, confirm и prompt вполне работают практически на каждом мобильном телефоне с поддержкой JavaScript (таблица 8.3). При необходимости можешь их спокойно использовать. Использование стандартного диалогового окна всегда быстрее, проще и вызывает меньше всяких проблем, чем применение какого-нибудь другого решения для той же самой задачи.

    Табл. 8.3. Таблица совместимости форматов изображений Браузер/ Платформа alert, confirm, prompt
    Safari Да
    браузер Android Да
    Symbian/S60 Да
    Nokia Series 40 Да
    webOS Да
    BlackBerry Да
    NetFront Да
    Openwave (Myriad) Да
    Internet Explorer Да
    Motorola Internet Browser Да
    Opera Mobile Да
    Opera Mini Да, рендерятся на сервере

    Типичные проблемы с диалоговым окном alert (и с другими окнами тоже) возникают с переводом каретки для многострочного текста и с отображением слишком большого по объему для этого пространства текста. Для решения первой проблемы в декстопном JavaScript применяется специальный символ "n". Есть и другие специальные символы, использование которых следует избегать, например табуляция "t". Давай посмотрим, как обстоят дела с обеими проблемами в мобильных браузерах. В таблице 8.4 информация о поддержке возможности добавления новых строк и большого по объему текста в диалоговые окна, а на рисунке 8.2 показано, как к длинному тексту применяется область прокрутки.

    Рис. 8.2. На некоторых браузерах, большие окна alert имеют полосы прокрутки (или могут прокрчиватся касанием на touch устройствах).

    Табл. 8.4. Таблица поддержки несколькострочных и имеющих полосы прокрутки окон alert Браузер/ Платформа n в окне alert Поддержка прокрутки для длинных текстов
    Safari Да Да, изменяет изменяет внешний вид окна alert с поддержкой прокрутки
    браузер Android Да Прокручивается
    Symbian/S60 Да Прокручивается
    Nokia Series 40 Да Прокручивается
    webOS Нет, показывает одну линию Нет, текст обрезается без прокрутки
    BlackBerry Да Прокручивается
    NetFront Да Автопрокрутка
    Internet Explorer Да Прокручивается
    Motorola Internet Browser Да Прокручивается
    Opera Mobile Да Прокручивается
    Opera Mini Да Прокручивается

    В целях юзабилити, если у устройства есть числовая клавиатура, то лучше использовать ее, а не список с выбором. Помни, что числовая клавиатура используется именно для ввода чисел.

    Запись в документ

    Функция document.write дает возможность динамического создания HTML-кода во время его рендеринга. В 90-е это был очень популярный метод, но сейчас есть много минусов для его применения в современных сайтах. Сегодня больше применяется манипулирование документом при помощи DOM после .

    Если ты в своем скрипте не используешь document.write, то тогда нужно применять атрибут сценария defer="defer". Браузерам с наличием соответствующей поддержки этот атрибут скажет, что не нужно ждать загрузки или выполнения скрипта для продолжения рендеринга документа.

    В мобильной разработке чтобы избежать проблем с выполнением операции document.write, иногда все же лучше не применять DOM (особенно это касается low-end устройств). Из таблицы 8.5 видно, что этот метод все еще работает во многих браузерах.

    Например, чтобы уменьшить начальный вес документа, список выбора года можно создавать динамически. Следующий код показывает как применять эту технику:

    Document Write function createNumericSelect(name, from, to) { var html = ""; for (var i=from; i=0); if (android) { // Do something }

    В таблице 8.6 показано, какие значения возвращаются для каждого браузера. В Таблице мы допускаем, что User Agent будет заменен на ID агента пользователя каждого устройства.

    Табл. 8.6. Таблица поддержки свойств JavaScript объекта navigator Браузер/ Платформа appName appVersion mimeTypes platform
    Safari Netscape 5.0 () Array iPhone, iPod, или iPad
    браузер Android Netscape 5.0 () Array null
    Symbian/S60 Netscape 5.0 () Array S60
    Nokia Series 40 до 6-го выпуска Nokia Empty string Undefined Undefined
    Nokia Series 40 6-й выпуск Netscape 2.0 Undefined Nokia_Series_40
    webOS Netscape 5.0 () Array webOS
    BlackBerry Netscape Array BlackBerry
    NetFront ACCESS Net Front Array Unknown
    Internet Explorer Microsoft IE Mobile Empty string Undefined WinCE
    Motorola Internet Browser Netscape 5.0 Array WiderWeb
    Opera Mobile Opera (Symbian or Windows) Array Symbian or Windows
    Opera Mini Opera Array Pike
    Размер окна

    В JavaScript есть два объекта, которые относятся к размерам: document.documentElement и screen. Первый относится к размеру области просмотра документа, а второй — к экрану устройства в целом. На момент написания этой статьи не было браузера, который бы допускал использование окон по размеру меньше экрана самого устройства. На многих устройствах мы можем применять веб-виджеты для определения своего экрана, но это уже совсем другой способ и мы поговорим о нем позже (Глава 12).

    В устройствах BlackBerry есть глобальная переменная — blackberry — у которой есть два объекта: location и network. location мы рассмотрим позже, а сейчас разберемся со вторым свойством: благодаря network мы можем узнать, каким типом подключения пользуется клиент — WiFi, GPRS, EDGE, CDMA или какой-нибудь другой сетью. В браузере Android (начиная с версии 2.2) есть аналогичное свойство navigator.connection.type.

    У объекта screen есть четыре свойства: width, height, availWidth и availHeight. Последние два характеризуют размер доступного пространства между панелями инструментов в определенной операционной системе. В мобильной разработке это, в принципе, то же самое, что и обычные и .

    Чаще всего данные о размере окна получаются при помощи document.documentElement.clientWidth и document.documentElement.clientHeight.

    Единственный способ изменить значения этих свойств после загрузки страницы — это изменить ориентацию экрана (например, с портретного на альбомный). В таблице 8.7 указаны браузеры, в которых возможно получить данные о размере экрана и окна в мобильном устройстве, а также информация о тех браузерах, где доступно изменение ориентации страницы (портретный/альбомный).

    Табл. 8.7. Screen properties and events compatibility table Браузер/ Платформа Screen size Window size Orientation change
    Safari Да Да onorientationchange и onresize
    браузер Android Да Да onresize
    Symbian/S60 Да, различен в полноэкранном режиме Да onresize
    Nokia Series Нет до 6-го выпуска Нет до 6-го выпуска Нет
    webOS Да Viewport size onresize
    BlackBerry Нет до версии 4.6 Нет document.onresize на некоторых устройствах
    NetFront Да Нет Нет
    Internet Explorer Да Нет Нет
    Motorola Internet Browser Да Да Нет
    Opera Mobile Да Да Нет
    Opera Mini Да Да Нет
    История и управление URL

    В JavaScript для управления историей браузера используются объекты location и history. У объекта location есть несколько свойств, например, href для полного URL и hash для анкоров (часть URL, которая находится после #). Изменение свойства location.href перенаправит браузер на другую страницу (если устройство поддерживает такую возможность). Есть два хороших способа: reload() для перезагрузки той же самой страницы и replace(url) — без новой записи в истории отправляет пользователя на другую страницу.

    Напомню тебе еще раз, что в целях экономии заряда аккумулятора мобильного устройства, нужно стараться меньше использовать JavaScript.

    У объекта history есть несколько не очень нужных свойств и три метода: back(), go(number) и forward(). Метод back() обычно используется для эмуляции кнопки «Назад»:

    Back

    Помни, что мы занимаемся разработкой для мобильных браузеров и иногда пользователь может просматривать сайт в полноэкранном режиме, где в поле зрение не будет вообще никаких браузерных кнопок. Поэтому в мобильных сайтах, в отличие от декстопных, ссылка или кнопка «Назад» гораздо нужнее.

    В таблице 8.8 демонстрируется, что происходит, если попробовать при помощи JavaScript управлять history и location.

    Табл. 8.8. Таблица поддержки редиректа Браузер/ Платформа Поддержка href, replace, reload, и history.back
    Safari Да
    браузер Android Да
    Symbian/S60 Да
    Nokia Series Да
    webOS Да
    BlackBerry Да
    NetFront Да
    Internet Explorer Да
    Motorola Internet Browser Да
    Opera Mobile Да
    Opera Mini Да, reload приводит к новой записи в истории
    Управление окнами

    В JavaScript одна из самых популярных (и одновременно раздражающих) функций — это использование window.open для открытия стандартного pop-up окна. По разным причинам этот метод не очень подходит для мобильных браузеров. Многие браузеры вообще не могут открывать сразу несколько окон (на рисунке 8.3 показан, правда, тот, который может) и мы не можем определить атрибуты для всплывающих окон — каждое окно будет открываться в полный размер (как главное).

    Рис. 8.3. Браузер Android является одним из немногих способных открывать всплывающие окна с подоконным дизайном.

    Связь между основным и pop-up тоже часто работает не совсем корректно. Ну и закрывать всплывающие окна в некоторых браузерах может быть весьма проблематично, ведь они могут воспринимать всплывающее окно как обычное, а window.close работает только в pop-up.

    Поэтому, если есть такая возможность, то не используй pop-up окна. Если же по каким-то особым причинам тебе без этого никак, то делай так, чтобы окно открывалось после (избегай открытия окно по или при помощи таймера и помни, что пользователи некоторых mid- и low-end устройств окно в таком случае не увидят.

    Есть вариант получше: использовать ссылку с ="_blank". На мобильных устройствах результат будет такой же, как и при использовании window.open, а работать будет во всех браузерах. Если в браузере нельзя открывать сразу несколько окон, тогда просто будет заменено текущее.

    В таблице 8.9 показано, как в различных браузерах обстоят дела с обработкой window.open

    Табл. 8.9. Таблица поддержки window.open Браузер/ Платформа window.open behavior
    Safari Работает так же, как _blank. window.close, но пользователь будет перенаправлен на следующее оконо и не вернется к первоначальному.
    браузер Android Да, откроется pop-up окно. Размер окна, заданный тобой проигнорируется.
    Symbian/S60 Открывается в новом окне.
    Nokia Series Открывается в том же окне.
    webOS Открывается в новом card. window.close не работает.
    BlackBerry Открывается в том же окне. До версии 4.6, у пользователя спрашивают, хочет ли он открыть его.
    NetFront
    Internet Explorer Открываются в том же окне. window.close не работает.
    Motorola Internet Browser Открываются в том же окне
    Opera Mobile Открываются в том же окне
    Opera Mini Открываются в том же окне
    Управление при помощи фокуса и прокрутки

    Используя функцию focus, ты можешь задать фокус для каждого кликабельного DOM элемента (или ссылки, формы, кнопки). Лучше всего такой способ применять для элементов форм. Сценарий поведения будет меняться в зависимости от браузера. В некоторых сенсорных устройствах при попадании текстового поля в фокус должна автоматически открываться экранная клавиатура, а в некоторых браузерах с курсор-навигацией, курсор будет перемещен на элемент.

    Если на просматриваемой пользователем странице будут формы (например, страница поиска или контактов), для юзабилити будет лучше, если фокус будет автоматически наводится на первое текстовое поле, что позволит уменьшить количество необходимых для пользователя переходов по странице.

    На некоторых устройствах у глобального объекта window есть фукнция scrollTo, которая принимает два значения — xPosition и yPosition с указанием позиции относительно верхнего левого угла экрана. В некоторых устройствах (например, iPhone) используется scrollTo, который эмулирует скроллинг со стороны пользователя и скрывает панель браузера (эффект такой, как если бы пользователь сам прокручивал при помощи пальцев). Для iPhone-браузеров часто используется такой код, который после события onload автоматически скрывает панель инструментов браузера:

    Window.scrollTo(0, 1);

    На устройствах, где есть необходимая поддержка, эту функцию также можно использовать для создания ссылки для перехода на верх страницы:

    Go to Top

    В таблице 8.10 можешь посмотреть, какие браузеры поддерживают функции focus и scrollTo.

    Табл. 8.10. Поддержка функции focus и scrollTo Браузер/ Платформа focus scrollTo
    Safari Да Да
    браузер Android Да Да
    Symbian/S60 Да Да
    Nokia Series 40 Нет Нет
    webOS Нет Нет
    BlackBerry Нет Нет
    NetFront Нет Да
    Internet Explorer Нет Да
    Motorola Internet Browser Нет Нет
    Opera Mobile Да Нет
    Opera Mini Нет Нет
    Таймеры

    JavaScript предлагает нам два типа таймеров: setTimeout и setInterval. Первый тип таймера применяется единожды, а второй будет выполняться каждые n секунд, пока его действие не будет остановлено при помощи clearInterval.

    Ты можешь использовать таймеры для создания анимации, управления периодом тайм-аута в определенной операции, а также, используя Ajax, таймер можно применять для обновления каждые n секунд информации с сервера.

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

    Первый вопрос, на который ты должен ответить: что происходит с сайтом, когда пользователь переводит фокус на другое приложение (актуально в многозадачных операционных системах) или открывает новое окно или вкладку? Второй момент: что происходит с нашим приложением/сайтом, если телефон переходит в ждущий режим (из-за отсутствия активности пользователя). Скрипт все еще может продолжать выполняться. А это не очень хорошо. Учет таких ситуаций усложняет поведение таймера.

    С таймерами есть еще одна проблема — они выполняются в том же потоке, что и основной скрипт. Если твой скрипт требует слишком много процессорных ресурсов и времени на его обработку (что часто бывает с большими скриптами на low- и mid-end устройствах), то запуск таймеров будет отложен, пока не появятся свободные ресурсы.

    Если для таймера мы будем использовать очень высокую частоту (например, 10 миллисекунд) то у таймера, скорее всего, возникнут проблемы с обработкой действий.

    Помни, что скорость обработки JavaScript во многом зависит от возможностей самого устройства и движка браузера. Даже если разные устройства работают на одной и той же операционной системе, например у Android, время обработки все равно будет отличаться: HTC G1, например, работает намного медленнее, чем Nexus One с процессором в 1-Ghz.

    Давай рассмотрим простой пример и разберемся, что обычно происходит, когда веб-страница переходит в фоновый режим:

    Using Timers var timer = setInterval(timerHit, 200); var q = 0; var lastTime = new Date().getTime(); function timerHit() { q++; var deltaTime = new Date().getTime() - lastTime; document.getElementById("content").innerHTML += q + ": " + deltaTime + "
    "; lastTime = new Date().getTime(); // Generate some random delay var randomNumber = Math.floor(Math.random()*1000)+5000; for (var i=0; i THRESHOLD) { // The app probably just woke up after being asleep. notifyWakeFromSleep(delta/1000); } lastTick_ = now; };

    В методе notifyWakeFromSleep ты можешь принимать решение о своих дальнейших действиях, опираясь на полученные значения параметров, которые скажут тебе, сколько прошло секунд со момента фиксации последнего активного состояния. В зависимости от длительности этого временного промежутка — 10 секунд или 1 день (86 400 секунд) — варианты твоих действий могут отличаться. Например, после перерыва в один день можно показать предупреждение или загрузить анимацию, пока при помощи Ajax загружаются новые результаты.

    Есть еще такая ситуация, когда выход из спящего режима будет для приложения или страницы невозможен. Речь идет о тех случаях, когда оперативная память устройства заполнена, наша страница находится в фоновом режиме и вполне возможно, что, в таком случае, браузер удалит эту страницу и когда пользователь вернется к просмотру — браузер заново загрузит ее с URL.

    Помни, что при выходе из спящего режима документы и скрипты (в том числе и HTML контент и переменные JavaScript) находятся в том же состоянии что были и до этого. В iOS до версии 4.0 нет поддержки многозадачности, но в Safari запоминает и хранит последнее состояние окна, даже когда сам браузер закрыт.

    Изменение заголовка

    В десктопных веб-приложениях довольно распространено динамическое изменение заголовка для предупреждения пользователя, что на странице произошли изменения, когда произошло обновление в приложении Ajax. А еще заголовок может динамически меняться просто в качестве анимации (пожалуйста, не делай так!).

    По некоторым причинам динамическое изменение заголовка не очень хорошая идея для мобильных браузеров:

    • многие браузеры вообще не отображают заголовок;
    • если пользователь одновременно работает с несколькими вкладками, то в фоновом режиме от динамического изменения заголовка не будет никакого толку — страница-то «заморожена»;
    • анимация в заголовке в мобильном браузере может попросту раздражать.
    Регулярные выражения

    Регулярные выражения — отличный способ валидации введенных данных или выполнения других задач. Регулярные выражения были включены в стандарт JavaScript 1.5, но в некоторых low- и mid-end устройствах их алгоритм может не поддерживаться. Тем не менее, как можешь убедиться из таблицы 8.12, эта технология очень хорошо поддерживается в браузерах.

    Табл. 8.12. Поддержка регулярных выражений Браузер/ Платформа Доступность регулярных выражений
    Safari Да
    браузер Android Да
    Symbian/S60 Да
    Nokia Series 40 Да
    webOS Да
    BlackBerry Да
    NetFront Да
    Internet Explorer Да
    Motorola Internet Browser Да
    Opera Mobile Да
    Opera Mini Да

    В разделе на вопрос как включит джава скрипт? заданный автором Евровидение лучший ответ это Настройки браузера. : Включение JavaScript.
    В приведенных ниже инструкциях описывается, как включить поддержку JavaScript в браузере. Если Вашего браузера нет в списке, перейдите в справочный центр этого браузера.
    Internet Explorer (6.0)
    Выберите меню Сервис.
    Выберите Свойства обозревателя.

    Нажмите кнопку Другой.

    Для параметра Активные сценарии установите переключатель в положение Разрешить, после чего нажмите ОК.
    Internet Explorer (7.0)
    Select Сервис > Свойства обозревателя.
    Перейдите на вкладку Безопасность.
    Нажмите кнопку Другой уровень.
    Найдите в списке раздел Сценарии.
    Установите переключатель в положение Разрешить для параметров Активные сценарии и Выполнять сценарии приложений Java.
    Нажмите ОК.
    В окне подтверждения нажмите Да.
    Нажмите ОК. Закройте окно.
    Перезагрузите страницу.
    Mozilla Firefox (1.0)
    Выберите меню Инструменты.
    Выберите Настройки.
    Выберите Содержимое на левой панели.
    Установите флажок Использовать JavaScript и нажмите ОК.
    Mozilla Firefox (2.x)
    Откройте Firefox.
    В меню Инструменты выберите Настройки.
    В окне Настройки перейдите на вкладку Содержимое.

    Нажмите кнопку Дополнительно, чтобы открыть окно Дополнительные параметры JavaScript.
    Установите соответствующие флажки в разделе Разрешить сценариям JavaScript.
    Нажмите ОК.
    Нажмите ОК.
    Apple Safari (1.0)
    Выберите меню Safari.
    Выберите Настройки.
    Выберите Безопасность.
    Установите флажок Использовать JavaScript.
    Помните, что при обновлении браузера или установке новых приложений или исправлений системы безопасности настройки JavaScript могут быть изменены.

    • Сергей Савенков

      какой то “куцый” обзор… как будто спешили куда то