Спонсор: Microsoft
Опубликован: 19.03.2014 | Доступ: свободный | Студентов: 314 / 17 | Длительность: 11:36:00
Специальности: Программист
Практическая работа 5:

Использование JavaScript в мобильных разработках

< Лекция 7 || Практическая работа 5: 123 || Лекция 8 >
Аннотация: На этом занятии разрабатывается Cordova - проект, содержащий простую JavaScript - функцию обработки события.
Ключевые слова: Windows, phone, приложение

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

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

  1. Запустите VS 2012. Выполните следующие команды: Файл -> Создать проект -> Visual C# -> CordovaWP8_3_0_0 -> Solution. Создали проект Solution.
  2. Добавьте в его главную страницу 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">), и тогда будете иметь не текстовую клавиатуру для ввода, а числовую:

    Но, как видите, в числовой отсутствует знак минус, а, значит, нельзя будет установить отрицательные значения коэффициентов.

  3. Создайте новый 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" будет выглядеть так:

< Лекция 7 || Практическая работа 5: 123 || Лекция 8 >
Дмитрий Белов
Дмитрий Белов

Каким образом можно создать точку останова? Например, если в Лекции 8 в примере, который демонстрирует возможность <canvas> для работы с готовыми изображениями (последний в лекции) в цикле
for (i = 0; i < 3; i++) {
for (j = 0; j < 4; j++) {
sx = 300 * i; sy = 350 * j;
contextNow.drawImage(img, sx, sy);}
поставить точку останова, то при запуске отладки проекта точка становится пустой окружностью с сообщением: В настоящий момент попадание в точку останова не произойдет. Нет загруженных символов для этого документа. Как все-таки создать точку останова и пройти по шагам весь код?

Александр Бут-Гусаим
Александр Бут-Гусаим
Россия, Тула
Виктор Ефремов
Виктор Ефремов
Россия