НОУ ИНТУИТ | Разработка гибридных приложений для мобильных устройств под Windows Phone. Лекция 5: Использование JavaScript в мобильных разработках

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Опубликован: 19.03.2014 | Уровень: для всех | Доступ: платный

|

Вам нравится? Нравится 13 студентам

| Поделиться |

Поддержать программу

Аннотация: На этом занятии разрабатывается Cordova - проект, содержащий простую JavaScript - функцию обработки события.

Ключевые слова: Windows, phone, приложение

Ход выполнения работы:

Создадим Windows Phone - приложение, находящее действительные корни квадратного уравнения с целыми коэффициентами средствами JavaScript-функции.

Запустите VS 2012. Выполните следующие команды: Файл -> Создать проект -> Visual C# -> CordovaWP8_3_0_0 -> Solution. Создали проект Solution.
Добавьте в его главную страницу index.html форму с тремя полями ввода и кнопкой. В поля ввода пользователь будет вводить коэффициенты уравнения, а по нажатию на кнопку получать результат. Поля ввода реализуйте интерактивным тегом <input>, кнопку - тегом <button>, вложенными в тег <form>. Для создания такой формы:
- Удалите из "index.html" тег <div> с содержимым, этот стандартный тег шаблона не пригодится.
- Добавьте внутрь тега <body> форму следующего содержания:
```
<form name="f">
            <p align="center">
                Коэффициенты уравнения <br>
                A: <Br>
                <input type="text" name="a"><Br> 
                B:<Br>
                <input type="text" name="b"><Br>
                C:<Br>
                <input type="text" name="c"><Br>
                <button>Решить</button>
            </p>
        </form>
```
Код разметки главной страницы будет выглядеть примерно так:

увеличить изображение

Результат запуска проекта:

увеличить изображение

Тип полей ввода можно сделать числовым (например, <input type ="number" name="a">), и тогда будете иметь не текстовую клавиатуру для ввода, а числовую:

увеличить изображение

Но, как видите, в числовой отсутствует знак минус, а, значит, нельзя будет установить отрицательные значения коэффициентов.
Создайте новый JavaScript-файл и добавьте его к проекту. Для создания нового js-файла в обозревателе решений нажмите правой кнопкой мыши на папку www/js : Добавить -> Новый элемент. Выберите " Текстовый файл" и назовите его calc.js. После добавления файла создайте в нем функцию нахождения действительных корней уравнения:
```
//Содержимое calc.js
function Calc() {
    var a, b, c, x1, x2, d;
    a = document.f.a.value;
    b = document.f.b.value;
    c = document.f.c.value;
    d = b * b - 4 * a * c;
    if (d > 0) {
        x1 = (-b + Math.sqrt(d)) / (2 * a);
        x2 = (-b - Math.sqrt(d)) / (2 * a);
        document.write("x1= " + x1 + " x2= " + x2);
    }
    else {
        if (d == 0) {
            x1 = (-b) / (2 * a);
            x2 = x1;
            document.write("x1= " + x1 + " x2= " + x2);
        }
        else {
            if (d < 0) {
                document.write("Действительных корней нет");
            }
        }
    }
}
```
Содержимое файла в окне редактора кода:

увеличить изображение

Рассмотрим содержание функции Calc.
- a,b,c - переменные для введенных посредством <input> коэффициентов;
- x1, x2 - корни уравнения;
- d - дискриминант уравнения;
- document - объект, соответствующий странице
- f - имя формы;
- a - имя тега <input> формы для ввода коэффициента a;
- Функция Math.sqrt(число) возвращает корень числа;
- document.write(строка) выведет строку с результатом на экран.
Теперь необходимо создать событие onClick для кнопки и добавить возможность использовать функцию Calc() со страницы "index.html".

В тег <button> на форме добавьте атрибут onClick="Calc()".

В файл index.html добавьте строку, дающую возможность использования функций из файла "calc.js":
```
<script src="js/calc.js"></script>
```
Атрибут "src" определяет, где располагается нужный нам JavaScript-файл.

Теперь страница "index.html" будет выглядеть так:

увеличить изображение