Каким образом можно создать точку останова? Например, если в Лекции 8 в примере, который демонстрирует возможность <canvas> для работы с готовыми изображениями (последний в лекции) в цикле |
Использование JavaScript в мобильных разработках
Ход выполнения работы:
Создадим 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" будет выглядеть так: