Использование локального JavaScript - контента на мобильном устройстве

Показывать лекцию целиком

Принципы создания локального JavaScript - контента на мобильном устройстве

В то время как HTML5 остается каркасом мобильных гибридных приложений, интеллектом, оживляющим большинство клиентских виджетов, является JavaScript. Рассмотрим некоторые из основных возможностей JavaScript, которые часто используются непосредственно с элементами HTML5. Этот материал не является руководством по использованию JavaScript и не содержит достаточно информации, чтобы позволить вам начать работать с этим языком, если у вас нет абсолютно никаких знаний другого языка программирования. Но если вы обладаете хоть малейшими знаниями программирования - например, когда-то немного программировали на Visual Basic, освоили основы Pascal или экспериментировали с языком C, тогда эта лекция позволит вам перенести приобретенные навыки в мир JavaScript. Если вам требуется более полная помощь по JavaScript, можете выбрать книгу о JavaScript в HTML5[1,2] или учебный курс ИНТУИТ[3]. Или же прочитайте подробное, но сухое руководство по JavaScript от Mozilla, доступное по адресу[4].

Вставка JavaScript-кода в страницы HTML5

Программы JavaScript размещаются в заголовке HTML-страницы, поскольку эта часть веб-страницы загружается первой, и к тому моменту, когда загрузятся остальные части страницы, уже готова к работе. Эти программы действуют совершенно так же, как сценарии CSS3, и помимо заголовка, могут размещаться и в других частях страницы. Тем не менее, для простоты во всех примерах данной лекции JavaScript-код размещается в заголовке. Например, попробуйте запустить следующую программу (этот пример, как и все следующие из данной лекции, можно отлаживать и тестировать в настольном браузере, эмуляторе мобильного устройства или на реальном устройстве).

<!DOCTYPE HTML>
<html lang="ru">
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <script type="text/javascript">
 document.write("Наша программа заработала!");
 </script>
 <style>
body {
  background-color: #59ee53;
  color:#0C080C;
  font-family:Verdana, Geneva, sans-serif;
 font-size:70px;
 margin-left:100px;/*отступ слева*/
}
 </style>
 <title>Первый JavaScript-код</title>
 </head>
 <body>
 </body>
</html>

Когда вы протестируете эту программу, вы увидите текстовое сообщение и ничего больше:

(рис 11.1)

Пользовательские функции

Функции JavaScript - это пакеты кода, которые запускаются, когда их вызывает html-страница (по требованию). Преимущество функций заключается в том, что с их помощью вы можете вносить изменения в содержимое страницы. Будет хорошей идеей давать функции название, отображающее ее назначение. Например, ниже представлен пример внешней JavaScript-программы, содержащей простую пользовательскую функцию ShowMessage(), содержащую стандартный метод вывода document.write(). Запуск этой пользовательской функции выполняется посредством события onLoad - окончания загрузки страницы. Сохраните и отладьте следующую html-страницу, содержащую программу JavaScript, используя любое имя, например, Simple_1.html:

<html lang="ru">
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <script type="text/javascript">
 function ShowMessage() {
 document.write("Наша функция заработала!");
 }
 </script>
 <title>Первый JavaScript-код</title>
 </head>
 <body onload ="ShowMessage();">
</body>
</html>

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

Перемещение кода JavaScript в файл сценариев

Как и в случае файлов CSS, вы можете создавать и сохранять программы JavaScript в виде внешних текстовых файлов, называемых сценариями.

Файл сценария - это простой текстовый файл с расширением js (обозначающим JavaScript). Код помещается в файл сценариев таким же образом, как и в файл веб-страницы, но без использования элемента <script>. В качестве примера далее приведено полное содержимое файла сценария external.js, содержащего пользовательскую функцию из предыдущего раздела:

function ShowMessage() {
 document.write("Наша функция заработала!");
}

Сохраните эту программу в формате текстового файла, используя имя external.js, выбрав любую папку, вложенную в папку главной страницы (напримр, js). Затем создайте следующую программу HTML5 и сохраните в одной папке с файлом external.js. Ключевую часть данной страницы представляет тег <script>...</script>, который служит для указания используемой программы JavaScript.

<!DOCTYPE HTML>
<html lang="ru">
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <script src="js/external.js"></script>
 <title>Первый JavaScript-код</title>
 </head>
 <body onload ="ShowMessage();">
</body>
</html>

Когда браузер обнаружит блок сценария <script src="js/external.js"></script>, он запросит файл "js/external.js" и будет рассматривать содержащийся в нем код, как будто бы тот находится в html-странице. Это означает, что функцию showMessage () можно вызывать точно таким же образом, как мы это делали ранее, событием onLoad.

Запустив страницу, вы увидите, что использование данного метода представляет собой тоже самое, что и внедрение текста в сценарий HTML-страницы.

Несколько основных структур языка JavaScript

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

Переменные

Все языки программирования имеют понятие переменных - именованных контейнеров, используемых для хранения информации в памяти. В JavaScript переменные создаются с помощью ключевого слова var, за которым следует имя переменной. Это единственный способ создания переменных в JavaScript. Вот пример создания переменной myMessage: var myMessage;

Имена переменных в JavaScript чувствительные к регистру, таким образом, переменная myMessage - и MyMessage - различные переменные. При попытке использовать первую вместо второй или наоборот в лучшем случае будет выдано сообщение об ошибке, а в худшем, более частом, случае в странице произойдет какая-либо странная ошибка.

Данные сохраняются в переменной посредством знака равенства (=), который копирует данные из правой его части в переменную, указанную в левой части равенства. Далее приведен пример объявления переменной и присвоения ей текстового значения (которое в программировании называется строкой):

var myMessage = "Это текстовое значение";

Эту переменную потом можно использовать в коде.

Значение null

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

Типы данных для переменных

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

Это означает, что можно взять переменную myMessage, которая содержит текстовую строку, и присвоить ей числовое значение:

myMessage =27.3;

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

var = inputElement.value;

Но если не соблюдать должной осторожности, можно случайно сохранить в этой переменной не содержимое объекта, а сам объект:

var = inputElement;

Арифметические операции

Простая возможность присваивать переменным значения вряд ли объясняла бы надобность в них. По- настоящему полезными переменные делает возможность выполнять над ними операции, модифицирующие содержащиеся в них данные. Например, с переменными можно применять арифметические операторы для выполнения математических вычислений:

const RADCON=Math.PI/180;
var myNumber = (10 + 5) * RADCON / 5;

С помощью операторов можно также конкатенировать несколько текстовых строк в одну длинную строку. Для этого используется оператор "плюс" (+):

var firstName = "Иван";
var lastName = "Шашеро";
var fullName = firstName + " " + lastName;

Условные переходы

Все условные операторы начинаются с условия: выражения, значение которого может быть true или false. Условия создаются с помощью операторов сравнения и логических операторов.


Оператор	Описание
==	Равно
! =	Не равно
!	Not ( этот унарный оператор изменяет значение своего операнда на противоположное, т. е. с истины на ложь и наоборот)
<	Меньше
>	Больше
<=	Меньше или равно
>=	Больше или равно
	Логическое "И". Вычисляется, только если значения обоих операндов равны true (истина). Если значение первого операнда равно false (ложь), значение второго операнда не вычисляется
\|\|	Логическое "Или". Вычисляется, если значение любого из операндов равно true. Если значение первого операнда равно true, значение второго операнда не вычисляется

Пример простого сравнения:

myNumber < 100

Чтобы это сравнение превратить в условие, его надо использовать в операторе условного перехода if. Чтобы оценить несколько условий, одно за другим, используется несколько блоков if. Но если среди нескольких условий нужно выбрать одно, игнорируя прочие, к оператору if добавляется ключевое слово else. Вот пример кода[5], содержащего такой оператор условного перехода:

if(envir=="WindowsPhone7" || (envir=="(WindowsPhone8")
  {
    showNow="Images/li1WebDeveloper.gif";
  }
  else
  {
    showNow="Images/WebDeveloper.gif";
  }

Циклы

Цикл - это основной инструмент программирования, позволяющий повторно исполнять блок кода. Основным циклом в языке JavaScript является цикл for, который имеет встроенный счетчик. Большинство языков программирования имеет свои версии этой управляющей структуры.

При создании цикла for устанавливается начальное значение счетчика, конечное значение и шаг инкремента после каждого прохода. Вот пример цикла for:

for (var i = 0; i < 5; i++){
  // Этот код исполняется пять раз
  alert("Номер прохода цикла =" + i); 
}

В заголовке цикла в круглых скобках указываются данные счетчика. Сначала создается переменная счетчика и ей присваивается значение 0: var i = 0. Потом указывается конечное значение счетчика, т.е. условие для завершения цикла: i < 5. Если условие не удовлетворяется, например значение i равно 5, цикл завершается, и код внутри больше не исполняется. Последнее выражение: i++ - увеличивает значение переменной счетчика на единицу при каждом проходе цикла.

Массивы

Цикл естественно сочетается с массивом - структурой данных, в которой сохраняется несколько значений. Массивы JavaScript обладают высшей степенью гибкости. В отличие от других языков программирования, при объявлении массива в JavaScript его размер не указывается. Массив создается с помощью ключевого слова var, за которым следует имя массива:

var colorList = [];

Значения последовательным элементам массива присваиваются посредством метода add () объекта массива:

colorList.add("blue"); colorList.add("green");   colorList.add("red");

Можно также присвоить значение определенному элементу массива. Если данный элемент не существует, он создается автоматически:

colorList[3] = "magenta";

Можно извлекать значения из конкретных элементов массива, присваивая их обычным переменным:

var color = colorList[3];

Следует иметь в виду, что в JavaScript счет ведется с нуля: номер первого элемента массива равен 0, второго - 1 и т. д.

Элементы массива можно обрабатывать, используя цикл for:

for (var i = 0; i < colorList.length; i++) {
  alert(" Очередной цвет: " + colorList[i]); }

Этот код обрабатывает элементы массива от первого (ячейка с номером 0) до последнего (номер которого определяется посредством свойства массива length, которое возвращает общее количество элементов массива). Код отображает значение каждого элемента массива в окне сообщений, хотя, несомненно, можно было бы придумать более практичное применение.

Использование цикла for для обработки массивов является одним из основных методов в JavaScript. Пример такого цикла в программе:

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
 var i;
 fruit = new Array();
 fruit[0] = "малина";
 fruit[1] = "персики";
 fruit[2] = "яблоки";
 fruit[3] = "сливы";
 fruit[4] = "ананасы";
 fruit[5] = "бананы";
 for (i = 0; i<fruit.length; i++) {
 document.write(fruit[i] + "<br>");
 }
</script>
<style>
body {
  background-color: #59ee53;
  color:#0C080C;
  font-family:Verdana, Geneva, sans-serif;
 font-size:55px;
 margin-left:100px;/*отступ слева*/
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Массив фрукты-ягоды</title>
</head>
 <body></body>
</html>

Результат тестирования кода в эмуляторе мобильного устройства:

(рис 11.2)

Объекты

В синтаксисе JavaScript широко представлены подходы объектно-ориентированного программирования. Прежде всего, данный язык позволяет использовать уже существующие готовые программные объекты, принадлежащие браузеру (Window, Screen, History, Location, Navigator) или html - странице (Document, Event, Image, Link, Meta). Кроме того, в нем нередко используются созданные пользователем собственные объекты. Работу с готовыми объектами мы рассмотрим в следующей лекции, а здесь выполним анализ примера с пользовательским объектом. Текст небольшой html-страницы, содержащей такой пользовательский объект:

<!DOCTYPE HTML>
<html lang = "ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type ="text/javascript">
 AddingMachine = new Object();
 // Свойства объекта
 AddingMachine.firstNumber = 4;
 AddingMachine.secondNumber = 66;
 // Метод объекта
 AddingMachine.total = function () {
 document.write(this.firstNumber + this.secondNumber);
 }
 // Запускаем метод!
 AddingMachine.total();
</script>
<style>
body {
  background-color: #59ee53;
  color:#0C080C;
  font-family:Verdana, Geneva, sans-serif;
 font-size:55px;
 margin-left:100px;/*отступ слева*/
}
</style>
<title>Пользовательский объект</title>
</head>
 <body> - Это результат <br />
 работы нашего объекта
 </body>
</html>

Если вы знакомы с основами объектно-ориентированного программирования, то должны знать, что такое свойства и методы. Если же нет, то свойства можно представить как прикрепленные к объекту данные, а методы, как встроенные в объект функции. В первой строке программы (после тега <script>) объявляется объект с именем AddingMachine:

AddingMachine=new Object();

Далее создаются свойства объекта с придуманными именами firstNumber и secondNumber, которым присваиваются значения. Затем создается метод объекта total, выполняющий сложение значений двух свойств и их вывод с помощью стандартного объекта document. Ключевое слово this является ссылкой на объект AddingMachine. Обратите внимание, что у функции function() нет имени - она анонимная. Результат тестирования программы в эмуляторе:

(рис 11.3)

События в JavaScript

Действительная мощь совместного использования JavaScript и НТML5 проявляется, когда для выполнения сценария программа ожидает определенных действий пользователя. Например, вы можете запустить программу JavaScript, когда пользователь выполнит щелчок по определенной ссылке. Помимо пользователя, инициатором событий может выступать и система. Например, к числу системных относится событие load, которое срабатывает после полной загрузки документа. В подобных случаях следует использовать обработчик события HTML5. При этом страница сможет распознать некоторое действие (или событие - events), для определения которого используется встроенная функция. HTML5 позволяет распознавать множество событий. Некоторые из них происходят автоматически - как, например, событие окончания загрузки страницы. Другие события происходят, когда пользователи выполняют некоторые действия (касание, ввод данных). Примеры событий HTML5:

onchange	onclick	ondbleclick	ondrag	ondragend
ondragenter	ondragleave	ondragover	ondragstart	ondrop
onkeydown	onkeypress	onkeyup	onmousedown	onmousemove
onmouseout	onmouseover	onmouseup	onmousewheel	onpause
onplay	onplaying	onprogress	onloadstart	onload

Чтобы эффективно использовать события, нужно знать, какие события поддерживаются в JavaScript. Кроме того, нужно знать, какие события с какими элементами HTML5 работают. Далее перечислены наиболее часто используемые события и элементы HTML, к которым они применимы. Более полное справочное руководство находится по адресу[6].


Название события	Срабатывает	Применимо
onClick	При щелчке (касании) по элементу	Практически ко всем элементам
onMouseOver	При наведении указателя (пальца, стилуса) на элемент	Практически ко всем элементам
onMouseOut	Когда указатель убирается с элемента	Практически ко всем элементам
onFocus	При получении фокуса элементом (т. е. при выделении элемента пальцем, стилусом).	<select>, <input>, <textarea>, <a>, <button>
onBlur	Когда элемент теряет фокус	<select>, <input>, <textarea>, <a>, <button>
onChange	При изменении значения элемента ввода. В случае текстового поля срабатывает только после перехода на другой элемент	<select>, <input type="text">, <textarea>
onError	При ошибке загрузки изображения (обычно по причине неправильного URL)	<img>
onLoad	По окончанию загрузки новой страницы или объекта, такого, как изображение	<img>, <body>
onUnload	Когда браузер выгружает страницу. Это обычно происходит при переходе на новый URL в строке адреса или по ссылке. Срабатывание происходит до того, как браузер загрузит новую страницу	<body>

Событие onClick используемся в разработках чаще всего. При создании мобильных приложений приходится выполнить тестирование, чтобы определить, где лучше применить данное событие. На устройствах с сенсорным интерфейсом поведение также будет простым: каждое касание (пальцем или стилусом) передается как щелчок по экрану. Технология множественного касания реализуется нестандартными событиями ontouchstart, ontouchmove, ontouchend, ontouchcancel.

Обработчики событий. Обработчик как свойство элемента

Каким образом код связывается с событием элемента? В HTML5 это можно сделать двумя способами: можно зарегистрировать обработчик событий как свойство элемента или использовать новый стандартный метод addEventListener(). Рассмотрим старый, традиционный способ задания обработчика, используя свойства элемента, над которым пользователь выполняет действие.

Для этого необходимое событие нужно добавить в элемент в качестве атрибута, а в качестве значения этого атрибута указать требуемую функцию. Таким образом, если мы хотим связать определенный код с событием onLoad элемента <body>, то можем это сделать так:

<body onload ="ShowMessage();">

В данном случае для элемента body используется обработчик события onLoad, который запускает функцию JavaScript ShowMessage(). Функция, вызываемая в ответ на срабатывание события, и называется обработчиком события.

Названия обработчиков событий составляют добавлением префикса on к названию события. Например, имя обработчика события click - onclick.

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

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
 body, #Rezult {
  background-color: #9bf3f1;
  color:#0C080C;
  font-family:Verdana, Geneva, sans-serif;
 font-size:55px;
 margin-left:30px;/*отступ слева*/
}
p {
  font-family:Verdana, Geneva, sans-serif;
  color:#FF0;
  background-color:#00F;
  font-size:44px;
  text-align:center;
  font-weight:bold;
}
</style>
<script type="text/javascript">
 
 function showArticle() {
 var myObject = document.getElementById("Rezult");
 myObject.innerHTML = "Вы выполнили щелчок по тексту";
 }
 function showHeader() {
 var myObject = document.getElementById("Rezult");
 myObject.innerHTML = "Вы выполнили щелчок по заголовку";
 }
 function showP() {
 var myObject = document.getElementById("Rezult");
 myObject.innerHTML = "Вы выполнили щелчок по синему абзацу <P>";
 }
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Обработчик события OnClick в любом элементе</title>
</head>

<body>
<article>
 <header onClick="showHeader()">
 <h3>Это ЗАГОЛОВОК</h3>
 </header>
 <p onClick="showP()">Выполните щелчок по этому абзацу</p>
 <section onClick="showArticle()">
 Это обычный текст в контейнере section. Щелкните здесь и посмотрите, что произойдет. 
 </section>
 <p id ="Rezult"></p>
</article>
</body>
</html>

В каждой из функций программы создается пользовательский объект myObject, позволяющий манипулировать тегом страницы с id="Rezult", модифицируя его содержание в соответствии с событием. Результат тестирования программы для трех разных событий, вызывающих ее разные функции: onClick="showHeader()", onClick="showP(), onClick="showArticle() приводится ниже.

(рис 11.4)

Обработка событий методом addEventListner()

Использование метода addEventListener() - это идеальная техника, к тому же стандартизированная в спецификации HTML5. Данный метод принимает три аргумента: тип события, исполняемую функцию и булево значение (значение логического типа). Синтаксис метода addEventListener() иллюстрируется в следующем примере разметки, содержащей JavaScript - код:

<!DOCTYPE html> 
<html> 
 <head>
<title>Создаем слушателя</title> 
<script type="text/javascript">
function show() {
 document.getElementById("my_p").innerHTML = "Ты щелкнул и изменил портрет!";
 document.getElementById("my_img").src = "images/woman.png";
}
function clickme(){
 var pelement = document.getElementById('my_p'); 
 pelement.addEventListener('click', show, false);
}
window.addEventListener("load", clickme, false);
</script>
</head> 
<body>
<p id ="my_p" style ="font-size: 60px">Щелкни здесь</p>
<img id ="my_img" src ="images/girl.png" />
</body> 
</html>

Здесь два использования метода addEventListener():

pelement.addEventListener('click', show, false);
  window.addEventListener("load", clickme, false);

Первый атрибут в обоих случаях - это имя события (click - щелчок, load - загрузка страницы). Второй - функция, которая будет исполняться при наступлении события (show, clickme) . Это может быть ссылка на функцию (как в нашем случае) или просто анонимная функция (не имеющая имени). Третий атрибут, принимающий значение true или false, указывает, каким образом срабатывают множественные события. В функции clickme() мы присвоили ссылку на элемент переменной под названием pelement, а затем, используя эту переменную, добавили прослушиватель для события click этого элемента (тег <p>). Результат использования методов addEventListener() в данном коде:

(рис 11.5)

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

Занятие пройдено

Предыдущее занятие Занятие пройдено Следующее занятие

Вернуться к учебному плану