Использование локального 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. Условия создаются с помощью операторов сравнения и логических операторов.

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

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.