Лабораторная работа №4. Использование простейших элементов JavaScript

1. Калькулятор расчета валюты по заданному курсу (рис.1).

Рис. 1. Пример готового калькулятора расчета валюты

Cоздание .htmlстраницы

Для выполнения задания потребуется создать .htmlдокумент и подключить для него .cssфайл.

htmlструктура документа должна выглядеть следующим образом:

<div class="container">

<div class="row">

<div class="col­xs­12">

<h1 class="page­header">Расчеткурса валюты</h1>

</div>

</div>

<div class="row">

<divclass="col­xs­3">

<!­­ Поле: курс по доллару ­­>

</div>

<divclass="col­xs­3">

<!­­ Поле: курс по евро ­­>

</div>

</div>

<div class="row">

<divclass="col­xs­3">

<!­­ Поле: количество рублей ­­>

</div>

</div>

<div class="row">

<divclass="col­xs­6">

<!­­ Блок с результатом и кнопкой ­­>

</div>

</div>

</div>

В htmlкомментарии вида<!­­ комментарий ­­> нужно разместить соответствующиеполя и блоки:

Поле: курс по доллару

Структура данного поля следующая:

<divclass="form­group">

<div class="input­group">

<div class="input­group­addon">1 USD = </div>

<input type="text" class="form­controljs­usd" placeholder="0" value="68">

<div class="input­group­addon">RUB</div>

</div>

</div>

где тег <input> имеет атрибут value . Это само значение поле с которым мы будемработать.

Поле: курс по евро

Данное поле имеет аналогичную структуру с предыдущем полем.

Поле: количество рублей

Структура поля:

<div class="form­group">

<label class=" control­label">Количестворублей:</label>

<input type="text" class="form­controljs­rub" value="1000">

</div>

Блок с результатом и кнопкой

Данный блок имеет следующую html­структуру:

<div class="jumbotron">

<p>~ <span class="count­usd">0</span>долларов</p>

<p>~ <span class="count­eur">0</span>евро</p>

<p><a class="btnbtn­primarybtn­lg" href="#" role="button">Рассчитать</a></p>

</div>

гдеэлементы<spanclass="count­usd">и<spanlass="count­eur">будутизменятьсвои значения в зависимости от расчета .

JavaScript

JavaScript код нужно разместить в тег <script></script> . Сами тег должен быть передзакрытием тега </body>чтобы выбрать значение у поля воспользуемся jQuery­ методом .val() ​Данный методпозволяет забрать у поле его значение . пример первого поля:

vargetUSD = $(".js­usd").val();

В данном пример мы создаем переменную getUSD в которую записываем значениепервого поля.

Нам нужно объявить три переменные :getUSD, getEUR, getRUB. Пример первойпеременной приведеy выше. Остальные переменные выполняются по аналогии меняя только название переменной и класс в $(‘.js­usd’). Соответственно будет три значения: $(".js­usd").val(), $(".js­eur").val(), $(".js­rub").val().

Далее нам нужно событие повешенное на кнопку:

$(".btn").click(function() {

});

Внутрь этого события мы размещаем весь наш javascript код. Сначала идут объявления переменных. После объявления переменных мы делаем наш расчет и подставляем нужно значение.пример первого значения (количество долларов):

$(".count­usd").text((getRUB / getUSD).toFixed(1));

В данном примере мы выбрали элемент <spanclass="count­usd"></span> и поместили в него с помощью jQuery метода text арифметическое значение. Функция .toFixed() предназначена для округления числового значения.