Лабораторная работа №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() предназначена для округления числового значения.

Лабораторная работа №5. Использование готовых библиотек на примере JQuery

Основы jQuery

jQuery — javascript библиотека, состоящая из кроссбраузерных функций — оплеток для манипулирования элементами DOM (DocumentObjectModel — Объектная модель документа). Главный ее принцип это автоматическое применение нужного механизма, в зависимости от браузера.

Для началаработы, необходимо получить новейшую версию библиотеки jquery.Сделать это можно с официального сайта проекта http://jquery.com/.Обращаем внимание, что на официальном сайте лежат две версии библиотеки jQuery: сжатая и девелоперская. Для работы лучше использовать сжатую, а если захочется поэкспериментировать воспользуйтесь второй.

После этого пространство имен javascript, определено таким образом, что обращение к функции $() занято jquery и получить любой элемент документа html в виде объекта, можно выражением $('#objID'). Где objID - ID объекта.

Особенности jQuery

· Поддержка CSS3 селекторов;

· Кроссбраузерность;

· Небольшой размер;

· Очень просто изучить;

· Существенно уменьшает количество кода JavaScript;

· Код сценариев легко читаеться;

· Очень большое количество плагинов;

· На базе фреймворкасозданны библиотеки jQuery UI, jQueryMobile.

Селекторы

Итак, параметром функции$()могут быть указаны селекторы, которые, в свою очередь, являются частью стандарта CSS.

1. * — коллекция всех тегов;

var n = $("*").size() ; // Количество тегов

2. Тег — коллекция всех тегов, имеющих указанное имя

$("р").css("backgroundColor", "red");

// Делаем фон всех абзацев красным

3. #Идентификатор — ссылка на элемент с указанным идентификатором;

$("#myid") .css("backgroundColor", "red") ;

// Делаем фон красным для элемента с id="myid"

Если элементов с одинаковым идентификатором несколько, то будет возвращена ссылка только на первый элемент

4. Тег#Идентификатор — ссылка на элемент с указанным идентификатором, который расположен в определенном теге;

$("p#myid") .css("backgroundColor", "red");

Делаем фон красным для тега P c id="myid"

Если элементов с одинаковым идентификатором несколько, то будет возвращена ссылка только на первый элемент. Если идентификатор находится в другом теге, то он будет проигнорирован.

5. Класс — коллекция элементов, имеющих указанный класс

$(".cls2").css("backgroundColor", "red");

// Делаем фон красным для всех элементов с class="cls2"

6. Тег. Класс — коллекция элементов, имеющих указанный класс в определенном теге

$("p.cls2") .css("backgroundColor", "red") ;

Делаем фон красным для всех P с class="cls2"

Атрибуты jQuery

.attr() -Возвращает или изменяет значение атрибутов у выбранных элементов страницы. Функция имеет четыре варианта использования:

.attr(attrName):string -возвращает значение атрибута attrName у выбранного элемента. Если выбрано несколько элементов, то значение будет взято у первого.

Если элемент не имеет атрибута с таким именем, будет возвращено undefined.

.attr(attrName, value):jQuery Object -атрибутуattrNameбудетприсвоенозначениеvalue, у всехвыбранныхэлементов.

.attr({attrName1:value1, attrName2:value2, ...}):jQueryObject -группеаттрибутовattrName1, attrName2, ... будутприсвоенызначенияvalue1, value2, ..., увсехвыбранныхэлементов.

.attr(attrName, function(index, value)):jQueryObject -Атрибуту attrName будет присвоено значение, возвращенное пользовательской функцией. Если она (функция) ничего не вернет, то атрибут просто останется каким был до этого).

Функция вызывается отдельно, для каждого из выбранных элементов. При вызове ей передаются следующие параметры:

index - позиция элемента в наборе,

value - текущее значение атрибута attrName у элемента.

.removeAttr(name):jQueryobject -Удаляет указанный атрибут из всех элементов присутствующих в наборе.

.val():string,array -Возвращает значение атрибута value у выбранного элемента формы. Если выбрано несколько элементов, то значение будет взято у первого.

.val(newVal) -Атрибуту value будет присвоено значение newVal, у всех выбранных элементов.

.prop() -возвращает или изменяет значение свойств выбранных элементов страницы . Функция имеет четыре варианта использования:

.prop(propName):string -возвращает значение атрибута propName у выбранного элемента.

.prop(propName, value):jQueryobject -во всех выбранных элементах, свойство propName примет значение value.

.prop({propName1:value1, propName2:value2, ...}):jQueryobject -во всех выбранных элементах изменит значения группы свойств propName1, propName2, ... сделав их равными value1, value2, ... соответственно.

.prop(propName, function(index, value)):jQueryobject -свойству propName будет присвоено значение, возвращенное пользовательской функцией.

Class:

.addClass("clName1 clName2 ..."):jQueryObject -добавляет классы clName1, clName2, ... всем выбранным элементам.Если из этих элементов некоторые уже принадлежат каким-то классам, то новый (новые) класс добавится к существующим, а не заменит их.

.addClass(function(index, class)):jQueryObject -добавляет классы, список которых возвращает заданная пользователем функция.Возвращаемое ей значение должно представлять из себя строку, с перечислением добавляемых классов через пробел.Функция вызывается отдельно для каждого из выбранных элементов.

При вызове ей передаются следующие параметры:

index —позиция элемента в наборе,

class —текущий класс(ы) элемента.

.hasClass(className):boolean -проверяет наличие класса className у выбранных элементов страницы. Если хотя бы один из элементов содержит этот класс, то функция вернет true, иначе вернет false.

.removeClass() -удаляет все классы у выбранных элементов.

.removeClass("class1 class2 ...") -удаляет классы class1, class2, ... у выбранных элементов.

.removeClass(function(index, class)) -удаляет классы, список которых возвращает заданная пользователем функция. Возвращаемое ей значение должно представлять из себя строку с перечислением классов через пробел.

.toggleClass(class):jQueryObject -добавляет указанный класс к элементам набора, если такой класс не существует и удаляет этот класс, если он присутствует.