Использование 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" будет выглядеть так:

Запустите программу и проверьте ее работоспособность для различных значений корней уравнения, например, решите уравнение x²+x+1=0. Дискриминант этого уравнения отрицательный, поэтому результат работы программы - это сообщение "Действительных корней нет":

Теперь решите уравнение x2-4=0. Оно имеет 2 различных корня: 2 и -2:

Остался только случай с двумя одинаковыми корнями. Проверьте его на примере уравнения x2+2x+1=0:

Всё правильно и в этом случае!

Измените способ обращения к функции Calc(), которая рассчитывает корни. Сделайте это не с помощью значения атрибута onClick для кнопки, а с помощью метода addEventListner().

Для этого удалите из тега кнопки атрибут onClick="Calc()" и добавьте атрибут id="btn".

Далее необходимо добавить следующий скрипт:

<script type="text/javascript">
            document.getElementById("btn").addEventListener("click", Calc, false);
        </script>

В итоге должна получиться следующая разметка:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, 
         maximum-scale=1, minimum-scale=1, width=device-width, 
            height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Main Page</title>
    </head>
    <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 id="btn">Решить</button>
            </p>
        </form>
        <!--Наши скрипты объявляется ниже -->
	 <script src="js/calc.js"></script>
        <script type="text/javascript">
            document.getElementById("btn").addEventListener("click", Calc, false);
        </script>
        <!-- -->
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

Проверьте работоспособность программы:

Страницы:

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

Удалите из "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>

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

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

//Содержимое 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(строка) выведет строку с результатом на экран.

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

В файл index.html добавьте строку, дающую возможность использования функций из файла "calc.js":

<script src="js/calc.js"></script>

Атрибут "src" определяет, где располагается нужный нам JavaScript-файл.

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

Теперь решите уравнение x2-4=0. Оно имеет 2 различных корня: 2 и -2:

Остался только случай с двумя одинаковыми корнями. Проверьте его на примере уравнения x2+2x+1=0:

Всё правильно и в этом случае!

Для этого удалите из тега кнопки атрибут onClick="Calc()" и добавьте атрибут id="btn".

Далее необходимо добавить следующий скрипт:

<script type="text/javascript">
            document.getElementById("btn").addEventListener("click", Calc, false);
        </script>

В итоге должна получиться следующая разметка:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, 
         maximum-scale=1, minimum-scale=1, width=device-width, 
            height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Main Page</title>
    </head>
    <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 id="btn">Решить</button>
            </p>
        </form>
        <!--Наши скрипты объявляется ниже -->
	 <script src="js/calc.js"></script>
        <script type="text/javascript">
            document.getElementById("btn").addEventListener("click", Calc, false);
        </script>
        <!-- -->
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

Проверьте работоспособность программы:

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

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

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

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

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

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

Купить дополнительную попытку

Вы действительно хотите купить ещё одну попытку для прохождения тестирования?

Успешно!

Напишите нам, если у вас есть вопросы

Уважаемые пользователи ИНТУИТ!

Уважаемые пользователи ИНТУИТ!

Добро пожаловать на обновлённый сайт НОУ «ИНТУИТ»!