Лекция № 2

Лекция

Тема: «Работа с числами. Строки. Формы и компоненты»

План

1. Работа с числами

2. Функции для расчетов

3. Преобразования типов

4. Работа со строками

5. Формы и ее элементы. Свойства, методы и события

1. Работа с числами

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

Над такими переменными можно выполнять все действия, которые допустимы в языке С: "+", "-", "*", "/", "++", "--", "+=", "-=", "*=", "/=", "%" и т.д. Для применения указанных операций необходимо, чтобы аргумент или аргументы обязательно были числами. В противном случае код скрипта не компилируется и не работает (при этом сообщений об ошибках в окне браузера не выдается).

Существует возможность проверить, является ли аргумент числом. Такая проверка особенно часто используется для полей на форме, в которые пользователь может вводить разнотипную информацию.

Для проверки используется функция вида:

isNaN(значение) - возвращает true, если значение не число; и возвращает false, если значение число.

Пример.

var a;

a=10;

b="Текст";

if (isNaN(a)) - false (число)

if (isNaN(b)) - true (не число)

Каждое число представляет собой объект, который имеет свои свойства и методы. Наиболее используемыми методами являются (с обязательным сохранением регистра символов в написании):

.toFixed(n) - задает точность до n знаков после запятой. Метод выполняется с округлением.

.toPrecision(n) - задает общую ширину без точки. Метод выполняется с округлением, но учитывается только следующая цифра

.toString() - преобразовывает число в текст

Пример.

Пусть имеются переменные.

var a,b;

a=12.547;

b=25.1;

a.toFixed(2) - 12.55

b.toFixed(2) - 25.10

a.toPrecision(3) - 12.5 (округления нет, так как за 5 идет цифра 4)

b.toPrecision(5) - 25.100

a.toString() - число стало текстом

(b.toFixed(2)).toString() - округляем число до 25.10 и конвертируем в текст

2. Функции для расчетов

Для выполнения расчетов в JavaScript существует набор специальных методов, которые являются частью встроенного объекта Math (обратите внимание на регистр первого символа). К таким методам относятся:

Math.abs(x)	модуль числа x
Math.acos(x)	арккосинус числа x
Math.asin(x)	арксинус числа x
Math.atan(x)	арктангенс числа x
Math.ceil(x)	округление вверх числа x
Math.cos(x)	косинус числа x
Math.exp(x)	экспонента от числа x
Math.floor(x)	округление вниз числа x
Math.log(x)	натуральный логарифм числа x
Math.max(x1, x2, . . ., xn)	максимальное из чисел
Math.min(x1, x2, . . ., xn)	минимальное из чисел
Math.pow(x,y)	число x в степени y
Math.random()	случайное число на отрезке от 0 до 1
Math.round(x)	округление числа x
Math.sin(x)	синус числа x
Math.sqrt(x)	корень числа x
Math.tan(x)	тангенс числа x

Кроме методов для разработчика в распоряжении имеется несколько свойств, с помощью которых можно получить значение некоторых математических констант:

Math.E	Константа Эйлера, экспонента, основание натурального логарифма. Приблизительно 2.718
Math.LN2	Натуральный логарифм 2, приблизительно 0.693
Math.LOG2E	Логарифм E по основанию 2, приблизительно 1.442
Math.LOG10E	Логарифм E по основанию 10, приблизительно 0.434
Math.PI	Отношение длины окружности к ее диаметру, число PI, приблизительно 3.14159.
Math.SQRT12	Квадратный корень из 1/2; иначе говоря, 1 поделить на корень из 2, приблизительно 0.707
Math.SQRT2	Квадратный корень из 2, приблизительно 1.414
Math.LN10	Натуральный логарифм 10, приблизительно 2.302

3. Преобразование типов

Как уже говорилось ранее, преобразование типов выполняется "на лету" в соответствии с контекстом команды. Однако, в некоторых случаях нужно явно преобразовать тип. Для этого используется ряд приемов:

- если перед текстовой переменной поставить знак "+", то эта переменная преобразовывается в число, при условии, что ее значение допускает такое преобразование.

Пример.

var a,b

a='10'; //в переменной текст

b=+a; //в переменной число

- если числовую переменную нужно преобразовать в текст, то вызовите для переменной метод .toString(). Пример.

var a,b;

a=10; //в переменной число

b=a.toSgtring(); //в переменной текст

- если нужно программно сформировать некоторый фрагмент кода и "заставить" браузер понять его и выполнить, то такой фрагмент преобразовывают в команду с помощью команды eval(текст).

Пример.

var s;

s='alert("Доброе утро");' //в переменной текст

eval(s); //текст конвертируется в команду и сразу выполняется

4. Работа со строками

Строкой является как переменная, так и фраза, заключенная в одинарные или двойные кавычки. Каждая строка в JavaScript является объектом, у которого есть ряд методов для работы с ним:

.charAt(i) – символ в номером i. Нумерация начинается с 0.

Пример. s="Текст";

s.charAt(0) = "Т"

.charCodeAt(i) - код символа с номером i.

.concat(str1, str2, . . ., strN) - добавляет в тексту указанные строки.

Пример. s="Пример";

s.concat(" текста.") = "Пример текста"

.indexOf(str[,n]) - ищет в строке позицию первого вхождения текста str, начиная с позиции n. Если n не указано, то поиск идет с начала текста. Возвращает номер позиции, с которой найден фрагмент str, иначе - возвращает "-1".

Пример. s="Пример текста".

s.indexOf("Пример") = 0

s.indexOf("текста") = 7

s.indexOf("утро") = -1

.lastIndexOf(str[,n]) - ищет в строке позицию последнего вхождения текста str, начиная с позиции n. Если n не указано, то поиск идет с начала текста. Возвращает номер позиции, с которой найден фрагмент str, иначе - возвращает "-1".

Пример. s="Пример текста".

s.lastIndexOf("е") = 8

s.lastIndexOf("р") = 5

.match(регулярное выражение) - возвращает найденное в строке выражение в соответствии с заданным регулярным выражением. Регулярные выражения будут рассмотрены позже.

Пример.

s='Пример текста с целым (1234) числом';

s.match(/\d\d*/) = 1234. В строке s находится последовательность цифр любой длины. Находится первое совпадение.

.replace(регулярное выражение, новый текст) - находит фрагмент с помощью регулярного выражения и заменяет на новый текст. Результат обязательно должен присваиваться новой переменной.

Пример.

s='Пример текста с целым (1234) числом';

s1=s.replace(/\d\d*/, 'ххх') = 'Пример текста с целым (ххх) числом'. В строке s находится первая последовательность цифр любой длины, заменяется на "ххх". Результат записывается в переменную s1.

.search(регулярное выражение) - возвращает номер позиции, с которой начинается первое найденное в строке выражение в соответствии с заданным регулярным выражением.

Пример.

s='Пример текста с целым (1234) числом';

s.search(/\d\d*/) = 23. В строке s находится позиция начала первой последовательности из цифр.

.slice(a[,b]) - возвращает часть строки, начиная с позиции a и до b-1. Если b не указана, то до конца текста. Если b отрицательное, то означает, сколько символов от конца текста нужно отступить.

Пример. s="Пример текста".

s.slice(0,6) = "Пример"

s.slice(7) = "текста"

s.slice(7,-1) = "текст"

.split(разделитель[,n]) - разбивает текст на массив по разделителю. Если указан параметр n, то разбивается не более чем на n частей, а остальные игнорируются.

Пример. var s="12.5, 13, 45, 90.56, 23.6";
var mas=s.split(",");
mas[0]=12.5; mas[1]=13; mas[2]=45 и т.д.

.substr(a[,b]) - аналогично .slice()

.toLowerCase() - записывает все символы строчными.

Пример. s="Пример текста".

s.toLowerCase = "пример текста"

.toUpperCase() - записывает все символы прописными.

Пример. s="Пример текста".

s.toUpperCase = "ПРИМЕР ТЕКСТА"

Замечание. Все указанные методы не могут изменить саму строку и всегда возвращают новый текстовый объект, который или присваивайте переменной, или используйте в выражениях.

5. Формы и ее элементы. Свойства, методы и события

Одной из основных форм взаимодействия пользователей со страницей является использование форм и компонентов на ней. Используя компоненты формы, пользователь может вводить текст, выбирать разные режимы и параметры работы, генерировать разные события, которые обрабатываются нужными функциями JavaScript.

Работа с формами

По правилам HTML (хотя и не обязательно) все компоненты должны размещаться на формах, которые создаются с помощью тега:

Форма является частью объекта document и для доступа к ней можно использовать два способа:

- по имени формы. Если в теге формы задан атрибут "name=имя", то форма доступна с помощью записи:

document.имя

Пример.

Для доступа к форме можно использовать запись:

document.form1

- по номеру формы на странице. Все формы на станице автоматически помещаются в массив forms, через который можно обращаться к формам так:

document.forms[0] - первая форма

document.forms[1] - вторая форма и т.д.

Как и любой массив, массив forms имеет свойство length - длина массива. Следовательно, в цикле можно пройти по всем формам страницы:

for (var i=0; i<forms.length; i++)

. . . forms[i] . . .

На каждой форме могут размещаться произвольные компоненты, задаваемые тегом <input>. Доступ к таким компонентам возможен по имени (если для компонента задан атрибут "name") или по порядковому номеру на форме через массив elements. При этом все элементы нумеруются слева направо, сверху вниз начиная с 0.

Работа с полями

Текстовое поле создается с помощью тега <input type="text" . . . >.

Для доступа к полю можно использовать или атрибут поля name, или его порядковый номер .

Пример. Пусть на описанной выше форме имеется поле вида:

Предположим, что это поле является первым на форме, следовательно, для доступа к нему можно использовать одну из записей:

document.form1.T1

document.form1.elements[0]

document.forms[0].T1

document.forms[0].elements[0]

Поля имеют свойство value, с помощью которого можно получить доступ к их содержимому.

Пример. Пусть имеется три поля с именами T1, T2, T3. Рассчитать сумму первых двух и записать ответ в третье.

Так как содержимое полей всегда воспринимается как текст, то перед расчетом нужно проверить содержимое поля и, если там число, то нужно конвертировать его содержимое в число.

//в переменные запишем значения полей

var a=document.form1.T1.value; //или document.forms[0].elements[0].value

var b=document.form1.T2.value; //или document.forms[0].elements[1].value

//если в переменных числа

if (!isNaN(a) && !isNaN(b))

//суммируем переменные и записываем ответ в третье поле

//с помощью операции "+" каждая переменная явно конвертируется в число

document.form1.T3.value=+a+(+b); //или document.forms[0].elements[2].value

</script>

Каждое поле имеет методы вида:

.focus() - устанавливает курсор в поле:

.select() - выделяет все содержимое поля.

Также поля имеют ряд событий, основными из которых являются:

onchange() - возникает при вводе или удалении символа в поле;

onfocus() - возникает при получении полем фокуса;

onblur() - возникает при выходе из поля.

Пример. Внесем изменения в предыдущий пример. Сделаем так, чтобы при загрузке страницы курсор автоматически стоял в первом поле на форме.

В разделе head страницы напишем функцию, которая устанавливает курсор в заданное через параметр поле.

function active(param)

{

eval(param).focus();

}

</script>

Чтобы эта функция срабатывала при загрузке страницы, нужно ее вызвать в событии onload тега body. При этом в качестве параметра нужно передать имя поля, в которое нужно поставить курсор. Для этого в тег body добавьте параметр:

Пример. Напишем код, который не позволяет выйти из поля, пока в него не будет введена цифра.

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

function validate(param)

{

//если в поле не число или поле пустое

if (isNaN(eval(param).value) || eval(param).value=='')

{

//выдаем сообщение

alert('Можно ввести только число');

//ставим опять курсор в это поле

eval(param).focus();

//выделяем содержимое поля

eval(param).select()

}

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

Пример:

Обратите внимание, что для поля T1 в функции подставляется полное имя этого поля. Аналогично для поля T2.

В подобных ситуациях, когда элемент передает сам себя в функцию, то в Javascript можно в качестве параметра функции использовать стандартное имя "this", которое обозначает текущий элемент.

Наш пример можно записать так:

Работа с кнопками

Кнопка создается тегом <input type="button" . . . > и предназначена для запуска пользователем каких-либо действий с помощью щелчка на ней.

Кнопка имеет одно свойство value - содержит текст надписи на кнопке.

Основным событием для кнопки является событие onclick, возникающее при щелчке на кнопке.

Пример. Пусть на форме имеется массив из 10 полей с именами "T1"-"T10". Напишите функцию, которая рассчитывает сумму всех непустых полей и выводит результат в сообщении alert(). Для универсальности функция будет суммировать любое число полей, задаваемое через параметр.

В тег скрипта добавьте функцию вида:

function sum(param)

{

//вначале сумма 0

var s=0;

//цикл от 1 до последнего элемента

for (var i=1; i<=param; i++)

//если в поле число

if (!isNaN(eval('document.form1.T'+i).value) )

//суммируем его к ответу

s+=+eval('document.form1.T'+i).value;

//выдаем ответ в сообщение

alert('Сумма = '+s);

}

В теге кнопки добавим параметр события onclick с вызовом созданной функции для 10 полей.

Работа с выпадающим списком

Выпадающий список создается с помощью тегов вида:

. . .

</select>

Элемент имеет свойства:

- selectedIndex - номер выбранного элемента (нумерация с 0);

- options[i].text - содержимое элемента с номером i (нумерация с 0)

Если на первой форме имеется список с именем D1, то для получения текста активного элемента используют запись вида:

document.form1.D1.options[document.form1.D1.selectedIndex].text

Основным событием списка является onchange, которое возникает, если пользователь выбрал новый элемент.

Пример. Пусть имеется список D1. Напишите функцию, которая выдает в сообщении alert() текст выбранного пользователем пункта.

В скрипте добавьте функцию вида:

function showList()

{

alert(document.form1.D1.options[document.form1.D1.selectedIndex].text);

}

В теге списка добавьте событие onchange с вызовом данной функции:

Работа с флажками

Флажок создается с помощью тега <input type="checkbox" . . . >. Он имеет основное свойство checked, которое принимает значения true/false, если флажок включен/выключен.

Пример. Пусть на форме имеется флажок с именем "C1". Напишите фрагмент кода, который выполняет разные действия в зависимости от состояния флажка.

if (document.form1.C1.checked)

действие, если включен

else

действие, если выключен;

Работа с переключателями

Переключатели создаются с помощью тега <input type="radio" . . .>. Группа переключателей определяется одинаковым именем name, а различается разными значениями параметра value.

Основным свойством переключателя является checked, которое принимает значение true/false. Однако, определить, какой из переключателей выбран, обычными средствами не возможно.

Пример. Пусть имеется группа переключателей вида:

Если написать код вида:

if (document.form1.R1.checked)

то он не позволит определить активный переключатель, так как все переключатель имеют имя R1, и к какому из них вы обращаетесь не понятно.

Поэтому есть два способа определения активного переключателя.

- распознавание переключателя по номеру элемента на форме.

if (document.form1.elements[n].checked) - где n - это номер нужного переключателя на форме. Его вычисление полностью лежит на разработчике.

- получение массива всех переключателей и нахождения в нем номера выбранного переключателя.

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

Пример.

//получаем массив элементов с именем R1

var radio=document.getElementsByName('R1');

//запускаем цикл по массиву radio

for (var i=0; i<radio.length; i++)

//если очередной переключатель включен

if (radio[i].checked)

{

//запоминаем его номер

var nom=i;

//завершаем работу цикла, дальше можно не продолжать

break;

}

Теперь, проверяя значение переменной nom, можно определить, какой из переключателей включен и выполнить соответствующие операции.

Пример. Пусть имеется форма вида:

Для кнопки написать код, который в зависимости от переключателя рассчитывает результат и отображает его в новом окне размером 250х200.

В теге скрипта напишите функцию для расчета:

function calc()

{

//переменная для результата

var rez;

//получаем массив переключателей

var radio=document.getElementsByName('R1');

//в цикле находим номер выбранного переключателя

for (var i=0; i<radio.length; i++)

if (radio[i].checked)

{

var nom=i;

break;

}

//в зависимости от номера переключателя выполняем расчет

switch (nom)

{

//сумма

case 0: rez=+document.form1.T1.value+(+document.form1.T2.value); break;

//разность

case 1: rez=+document.form1.T1.value-(+document.form1.T2.value); break;

//максимальное

case 2: if (+document.form1.T1.value>=+document.form1.T2.value)

rez=document.form1.T1.value

else

rez=document.form1.T2.value; break;

//среднее

case 3: rez=(+document.form1.T1.value-(+document.form1.T2.value))/2; break;

}

//создаем новое окно

var win=window.open("","win1","height=200,width=250");

//выдаем в новом окне значение переменной rez

win.document.write("<h2 align='center'>Результат: "+rez+"</h2>");

//завершаем вывод

win.document.close();

}

</script>

В тег кнопки добавьте событие onclick с вызовом созданной функции.