Цель: изучить возможности ввода и вывода данных; особенности использования арифметических, логических операторов, операторов сравнения, операторов условного перехода.
Теория
Ввод и вывод данных.
JavaScript был создан в 1995 году как инструмент, предоставляющий веб-дизайнерам возможности программирования. Все современные браузеры имеют поддержку JavaScript. JavaScript встраивается прямо в веб-страницы и исполняется браузером во время их загрузки/
JavaScript добавляется на веб-страницы с помощью тэга <script>. В следующем примере на страницу выводится текст «Я изучаю JavaScript».
<script type="text/javascript">
document.write("Я изучаю JavaScript.");
</script>
JavaScript код также может храниться во внешнем текстовом файле с расширением .js и подключаться к страницам с помощью тэга <script> следующим образом:
<script type="text/javascript" src="ex.js"></script>
JavaScript чувствителен к регистру букв.
В JavaScript существует два вида комментариев: короткие и длинные. Все, что находится после символа // до конца строки, будет являться коротким комментарием. Многострочные комментарии начинаются с /* и заканчиваются */.
В JavaScript предусмотрены три стандартных метода для ввода и вывода данных: alert(), prompt() и confirm().
Методalert() позволяет выводить диалоговое окно (окно оповещения) с заданным сообщением и кнопкой ОК. Используется в случаях, когда необходимо, чтобы пользователь обязательно обратил внимание на определенную информацию.
Метод confirm() позволяет вывести диалоговое окно (окно подтверждения) с сообщением и двумя кнопками – ОК и Отмена (Cancel). Используется в случаях, когда необходимо, чтобы пользователь подтвердил или отклонил что-либо. Если пользователь щелкнул на кнопке ОК, то возвращается значение true; если щелкнул на кнопке Отмена, то возвращается значение false.
Метод prompt() позволяет вывести на экран диалоговое окно (окно запроса) с сообщением, а также с текстовым полем, в которое пользователь может ввести данные. Используются в случаях, когда от пользователя необходимо получить определенную информацию. В этом окне предусмотрены две кнопки: ОК и Отмена (Cancel). В отличие от методов alert() и confirm() данный метод принимает два параметра: сообщение и значение, которое должно появиться в текстовом поле ввода данных по умолчанию.
Пример применения методов для ввода и вывода данных:
<html>
<head>
<script type='text/javascript'>
function fun1() {
alert('Я окно оповещения');
}
function fun2() {
confirm('Я окно подтверждения');
}
function fun3() {
x=prompt('Введите Ваше имя:', 'Имя');
document.write('Здравствуйте, '+ x);
}
</script>
</head>
<body>
<input type='button' value='Окно оповещения' onclick='fun1()' />
<input type='button' value='Окно подтверждения' onclick='fun2()' />
<input type='button' value='Окно запроса' onclick='fun3()' />
</body>
</html>
Типы данных.
Типы данных представлены в таблице 1.
Таблица 1.
Типы данных в Java Script
| Тип данных | Примеры | Описание значений |
| Строковый или символьный (string) | "Привет" "д.т. 123-4567" | Последовательность символов, заключенная в кавычки, двойные или одинарные |
| Числовой (number) | 3.14 -567 +2.5 | Число, последовательность цифр, перед которой может быть указан знак числа (+ или перед положительными числами не обязательно ставить знак «+»; целая и дробная части чисел разделяются точкой. Число записывается без кавычек |
| Логический (булевский, boolean) | true false | true (истина, да) или false (ложь, нет); возможны только два значения |
| Null | Отсутствие какого бы то ни было значения | |
| Объект (object) | Программный объект, определяемый своими свойствами. В частности, массив также является объектом | |
| Функция (function) | Определение функции – программного кода, выполнение которого может возвращать некоторое значение |
Арифметические операторы.
Арифметические операторы используются для выполнения арифметических операций над переменными или значениями.
Таблица 2.
Арифметические операторы
| Оператор | Название | Пример |
| + | Сложение | X + Y |
| - | Вычитание | X – Y |
| * | Умножение | X * Y |
| / | Деление | X / Y |
| % | Деление по модулю | X % Y |
| ++ | Увеличение на 1 | Х++ |
| -- | Уменьшение на 1 | Y-- |
Чтобы уменьшить размер кода, можно использовать сокращенную запись арифметических операций. Например, вместо x= x + y писать x+ = y.
Операторы сравнения
Операторы сравнения представлены в таблице
Таблица 3.
Операторы сравнения
| Оператор | Название | Пример |
| == | Равно | X==Y |
| != | Не равно | X!=Y |
| > | Больше, чем | X>Y |
| >= | Больше или равно | X>=Y |
| < | Меньше, чем | X<Y |
| <= | Меньше или равно | Х <= Y |
Оператор «равно» записывается с помощью двух символов без пробелов между ними.
Логические операторы
Логические данные, обычно получаемые с помощью элементарных выражений, содержащих операторы сравнения, можно объединять в более сложные выражения. Для этого используются логические (булевские) операторы: И (&&), ИЛИ (||), НЕ (!). Выражения с логическими операторами возвращают значение true или false.
Операторы условного перехода
Оператор условного перехода ifпозволяет реализовать структуру условного выражения если ..., то ..., иначе ...
Пример оператора if перехода:
if (sr_ball>=5)
{document.write("Стипендия есть");
}
else
{document.write("Стипендии нету");
}
В фигурных скобках располагается блок кода – несколько выражений. Если в блоке используется одна команда, то фигурные скобки можно не писать.
Оператор Switch(переключатель) удобно использовать, если требуется проверить несколько условий, которые не являются взаимоисключающими.
Пример оператора switch:
switch (sr_ball)
{
case 5: document.write("Стипендия минимальная")
case 6: document.write("Стипендия с коэффициентом 1,2")
case 9: document.write("Стипендия с коэффициентом 1,4")
}
Задания к лабораторной работе № 1
Задание 1. Опробовать работу с модальными окнами alert, prompt, confirm.
Разработать свой диалог с использованием этих команд. Пример диалога:
- вывести приветствие в окне alert “Вас приветствует учебный центр”;
- затем в окне prompt вывести сообщение «Введите имя», а в окне alert вывести сообщение «Добро пожаловать на наши курсы, имя»;
- в окне confirm вывести сообщение "Хотите стать Web-дизайнером?" с альтернативными ответами в окнах alert, если TRUE, то "Учите стили CSS и JavaScript!", если FALSE то "Упускаете время!".
Задание 2. Использование оператора + с числовыми и строковыми переменными.
1) сложить два любых числа (например, 10 и 5). Результат вывести на страницу;
2) сложить две строки (например, “10” и “5”). Результат вывести на страницу;
3) сложить число и строку (например, 22 и “5”). Результат вывести на страницу;
4) сложить строку и число (например, “22” и 5). Результат вывести на страницу;
5) вывод – Результатом сложения строки и числа всегда будет … – вывести в окно.
Задание 3. Найти значение 2-х любых арифметических выражений, записанных на JS с использованием арифметических операций (например, 35y-25x)/5+232 и 8*y/x+5*x/y – 43)*6). Значения x и y задать произвольно, но подобрать такие, чтоб значение одного выражения было намного больше второго. Найти остаток от деления значения одного выражения на значение другого. Вывести результаты на страницу, а также в отдельное окно.
Задание 4. Продемонстрировать использование операторов сравнения (==, !=, >, >=, <, <=) и логических операторов (!, &&, ||).
Введите любое число. Если оно меньше 20 или больше 40 и не равно 15 и делится без остатка на 5, то вывести сообщение «Правильное значение», иначе «Не правильное значение».
Придумайте свой пример с логическими операторами.
Задание 5. Конструкция if..elseif..else.
Ввести 2 числа с клавиатуры. Сравнить их и вывести сообщение на страницу, например “А больше Б”, используя конструкцию if..elseif..else.
Написать свой пример с использованием альтернативного синтаксиса конструкции if..else(условие)?команды1:команды2
Задание 6. Определить, какой сегодня день недели (использовать конструкцию switch case).
Задание 7*. Придумать пример, демонстрирующий обработку исключений с использованием конструкции try … catch.
2.2. Лабораторная работа №2. Функции. Операторы цикла.
Объекты Math, Number
Цель: научиться создавать пользовательские функции на JS, использовать в программах операторы цикла; изучить особенности использования встроенных объектов MathиNumber.
Теория
Функции
Функция представляет собой подпрограмму, которую можно вызвать для выполнения, обратившись к ней по имени. Взаимодействие функции с внешней программой, из которой она была вызвана, происходит путем передачи функции параметров и приема от нее результата вычислений. Функция в JavaScript может и не требовать параметров, а также ничего не возвращать.
В JavaScript есть встроенные функции, которые можно использовать в программах, но код которых нельзя редактировать или посмотреть. Пользователь также может создать свои функции для решения конкретных задач – пользовательские.
Описание функции имеет следующий синтаксис:
function имя_функции(параметры){
код
}
Функция messageWrite() в примере ниже будет выполнена только после нажатия на кнопку. В примере используется событие onclick.
<html>
<head>
<script type='text/javascript'>
// Функция выводит текст на страницу
function messageWrite() {
document.write('Текст выводится на страницу с помощью JavaScript!');
}
</script>
</head>
<body>
<input type='button' value='Нажми на меня' onclick='messageWrite()' />
</body>
</html>
Операторы цикла
Цикл – это блок команд, который может повторно выполняться, пока определенное условие не будет выполнено.
JavaScript поддерживает 3 вида циклов: for, while, do..while.
Оператор for
Цикл for исполняет блок команд, пока заданное условие является истинным. Например,
for (i=1;i<=30;i++) {
document.write (i+'<br />');
}
Оператор while
Цикл while выполняет блок кода, пока заданное условие истинно. Напрмер,
var i=1;
while (i<=30) {
document.write (i+'<br />');
i++;
}
Оператор do-while
Цикл do..while часто называют циклом с постусловием, потому что в отличие от предыдущих циклов он вначале исполняет блок команд и только потом проверяет заданное условие. Если условие истинно, блок команд выполняется еще раз, если условие ложно, цикл завершает исполнение.
В отличие от оператора while в операторе do-while код выполняется хотя бы один раз, независимо от условия. В примере код выполнится один раз, так как условие ложно.
var i=20;
do {
document.write('Ястудент (от лат. studens — усердно работающий, занимающийся) БГТУ');
}
while (i<=3);
Объекты
Объекты представляют собой программные единицы, обладающие некоторыми свойствами. Об объекте можно судить по значениям его свойств и описанию того, как он функционирует.
Встроенные объекты имеют фиксированные названия и свойства. Все свойства этих объектов разделяют на два вида: просто свойства и методы. Свойства аналогичны обычным переменным. Они имеют имена и значения. Некоторые свойства объектов доступны только для чтения, их значения нельзя изменять. Другие свойства доступны и для записи – их значения можно изменять с помощью оператора присваивания. Методы аналогичны функциям, они могут иметь параметры или не иметь их.
Таким образом, объект можно понимать как некоторый контейнер, содержащий переменные-свойства и функции-методы.
Для разработчиков веб-сайтов особенно важны объекты String (обработка строк), Array (массивы), Math (математические формулы и константы) и Date (работа с датами).
Объект Math
Встроенный объект Math позволяет производить математические операции. Чтобы обращаться к свойствам и методам этого объекта его не нужно предварительно создавать (в отличие от остальных встроенных объектов JavaScript).
Свойства объекта Math содержат значения часто используемых математических констант. В примере выводятся на страницу некоторые константы.
//Выведем на страницу число Пи
document.write(Math.PI + '<br />');
//Выведем экспоненту
document.write(Math.E + '<br />');
//Выведем натуральный логарифм 10
document.write(Math.LN10 + '<br />');
//Выведем квадратный корень 2
document.write(Math.SQRT2);
С помощью методов объекта можно производить над числами различные математические операции. Ниже перечислены методы Math:
- аbc(число) – возвращает модуль (абсолютное значение) числа;
- асоs(число) – возвращает арккосинус числа;
- asin(число) – возвращает арксинус числа;
- atan(число) – возвращает арктангенс числа;
- atan2(x, у) – возвращает угол в полярных координатах точки;
- ceil(число) – округляет число вверх до ближайшего целого;
- cos(число) – возвращает косинус числа;
- ехр(число) – возвращает число е в степени число;
- floor(число) – округляет число вниз до ближайшего целого;
- log(число) – возвращает натуральный логарифм числа;
- max(число1, число2) – возвращает большее из 2 чисел;
- min(число1, число2) – возвращает меньшее из 2 чисел;
- pow(число1, число2) – возвращает число1 в степени число2;
- random () – возвращает случайное число между 0 и 1;
- round(число) – округляет число до ближайшего целого;
- sin(число) – возвращает синус числа;
- sqrt(число) – возвращает квадратный корень из числа;
- tan(число) – возвращает тангенс числа.
В примере демонстрируется применение методов объекта Math.Все результаты выводятся на страницу.
<html>
<body>
<script type='text/javascript'>
//Округлим число 25.34 до ближайшего целого
document.write(Math.round(25.34) + '<br />');
//Округлим число 25.88 до ближайшего целого
document.write(Math.round(25.88));
//Выберем из чисел 10 68 35 12 44 максимальное
document.write(Math.max(10,68,35,12,44) + '<br />');
//Выберем из чисел 10 68 35 12 44 минимальное
document.write(Math.min(10,68,35,12,44));
//Возведем 5 в -1 степень
document.write(Math.pow(5,-1));
//Сгенерируем случайное число между 0 и 1
document.write(Math.random() + '<br />');
//Сгенерируем случайное число между 0 и 100 и округлим
document.write(Math.round(Math.random()*100));
</script>
</body>
</html>
Объект Number (Число)
В JavaScript числа могут быть двух типов: целые и с плавающей точкой. Числа можно создавать обычным образом с помощью переменных и оператора присваивания, не прибегая к объекту Number. Однако этот объект обладает некоторыми полезными свойствами и методами, которые иногда могут пригодиться.
Пример создания объекта Number:
x = new Number(‘34.21’).
Методы Number:
- toExponential(количество) – представляет число в экспоненциальной форме, параметр количество – целое число, определяющее, сколько цифр после точки следует указывать.
- toFixed(количество) – представляет число в форме с фиксированным количеством цифр после точки, параметр количество – целое число, определяющее, сколько цифр после точки следует указывать.
- toPrecision(точность) – представляет число с заданным общим количеством значащих цифр. Параметр точность – целое число, определяющее, сколько всего цифр, до и после точки, следует указывать.
- toString([основание]) – возвращает строковое представление числа в системе счисления с указанным основанием. Если параметр не указан, имеется в виду десятеричная система счисления. Этот метод имеют все объекты.
Например, следующий код выведет на страницу число 3.422e+1:
x = new Number(34.215);
x=x.toExponential(3);
document.write(x).
Задания к лабораторной работе №2
Задание 1. Все выполненные задания из предыдущей работы оформить в виде функций. Создать кнопки и запускать задание на выполнение щелчком по соответствующей кнопке. Поработать над оформлением результатов вывода (цвет шрифта, кегль, гарнитура).
Задание 2. Вывести таблицу умножения, а и bввести с клавиатуры. Использовать оператор цикла for.
Таблица 4.
| … | b | ||
| … | 2*b | ||
| … | |||
| a | a*2 | … | a*b |
Применить к ячейкам таблицы свойства форматирования.
Задание 3. Найти площадь круга и длину окружности, радиус меняется от а до b с шагом 0,3. Результаты округлить и вывести в таблице. Использовать оператор цикла do-while.
Таблица 5.
| Радиус | Площадь круга | Длина окружности |
| a | ||
| a+0,3 | ||
| … | ||
| b |
Применить к ячейкам таблицы свойства форматирования.
Задание 4. Создать 2 объекта-числа (Number) – дробное и целое. Применить к каждому из них методы: toExponential, toFixed, toPrecision, toString. Результаты проанализировать, представить в таблице в следующем виде:
Таблица 6.
| Число | Метод | Результат | Описание метода |
| 127.18 | toString(16) | 7f.2e147ae147b | Строковое представление числа в 16-ричной системе счисления |