Добавление JavaScript на веб-страницы. Арифметические операторы Цель: Знакомство с основными возможностями языка программирования JavaScript. Основные операции и конструкции для управления потоком вычислений. Типы данных JavaScript добавляется на веб-страницы с помощью тэга <script>. <html> <body> <script type="text/javascript"> //Пишите код здесь </script> </body> </html> Задание 1. Выведите следующие строчки текста на страницу с помощью JavaScript: 1. Лес — часть поверхности Земного шара, покрытая древесными растениями. 2. В настоящее время леса занимают около трети площади суши. 3. Площадь леса в России составляет 8 млн кв.км. С помощью JavaScript команд Вы можете "общаться" с браузером. Например, с помощью команды document.write('Привет!'); Вы можете сообщить браузеру, что хотите вывести на страницу текст "Привет!". С помощью команды alert("Поздравляем!"); Вы можете вывести сообщение в информационном окне. Точка с запятой сообщает браузеру о конце команды. Обратите внимание: в JavaScript необязательно явно указывать точку запятой после каждой команды, так как браузер автоматически подставит ее, если следующая команда будет написана на новой строке. В отличие от HTML JavaScript чувствителен к регистру букв. Арифметические операторы JavaScript Арифметические операторы используются для выполнения арифметических операций над переменными или значениями. В таблице ниже перечислены арифметические операторы доступные в JavaScript (предположим, что x=7). Оператор Описание Пример Результат + Выполняет сложение чисел y=x+10 y=17 - Выполняет вычитание чисел y=x-3 y=4 * Выполняет умножение чисел y=x*4 y=28 / Выполняет деление чисел y=x/2 y=3 % Вычисляет остаток от деления чисел y=x%2 y=1 ++ Увеличивает значение на 1 y=x++ или y=++x y=8 -- Уменьшает значение на 1 y=x-- или y=--x y=6 Сокращенная запись арифметических операторов Для того, чтобы уменьшить размер кода Вы можете использовать сокращенную запись арифметических операций. Условимся что x=4, а y=6: Оператор Сокращенная запись Полная запись Результат += y+=x y=y+x y=10 -= y-=x y=y-x y=2 *= y*=x y=y*x y=24 /= y/=x y=y/x y=1 %= y%=x y=y%x y=2 Пример числового типа <html> <head> <title>Числовой тип</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body> <h1>Числовой тип</h1> <script type="text/javascript"> var x = 7; // Целое число var b = 3.1415; // Вещественное число var c = 5E20; // 5 * 10 ^ 20 var d = 077; // 8-ричная запись! значение 63 var e = 0xFF; // 16-ричная запись! значение 255 // Операции var f; f = x + 10; alert(f); // Сокращенная запись y+= x; x++; x--; </script> // y= y + x; // x = x + 1; // x = x - 1; </body> </html> Задание 2.1. Решите примеры из таблиц, используя пример. Задание 2.2. Найдите значение выражения (35y+25x)/5+232 при x=3, y=20, и значение выражения (188*y/8+25*x/5 - 435)*6 при x=16,y=20 и выведите результат на страницу. Задание2.3: Дано: а=3, b=5. Вычислить и вывести в окно браузера декремент суммы а и b при помощи метода document.writeln(). JavaScript операторы сравнения Операторы сравнения позволяют производить над переменными и значениями различные операции сравнения. В результате выполнения таких операций в зависимости от исхода возвращается true (истина) или false (ложь). В таблице ниже перечислены доступные в JavaScript операторы сравнения (предположим, что x=7): Оператор Описание Пример Результат == Проверяет переменные или значения на равенство. x==7 true === Проверяет переменные или значения на равенство учитывая тип переменной x===7 x==="7" true false != Проверяет различаются ли переменные или значения x!=9 true > Проверяет больше ли переменная или значение стоящее слева, чем стоящее справа x>13 false < Проверяет меньше ли переменная или значение стоящее слева, чем стоящее справа x<13 true >= Проверяет является ли переменная или значение стоящее слева большим или равным стоящему справа x>=13 x>=7 false true <= Проверяет является ли переменная или значение стоящее слева меньшим или равным стоящему справа x<=13 x<=7 true true Логические операторы Логические операторы используются для связки нескольких операторов сравнения. В таблице ниже приведены логические операторы доступные в JavaScript (предположим, что x=2, а y=9): Оператор Значение Пример Результат && И (x==2 && y==9) (x==3 && y==9) true false || ИЛИ (x==2 || y==8) (x==3 || y==9) (x==5 || y==6) true true false ! НЕ !(x==3) true Задание 3. Решите примеры из таблиц Пример логического типа <html> <head> <title>Логический тип</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body> <h1>Логический тип</h1> <script type="text/javascript"> var a = true; var b = false; c = a && b; alert("c = a && b c = a || b; alert("c = a || b c = !a; alert("c = !a </script> // результат false " + c); // результат true " + c); // результат false " + c); </body> </html> Строковые переменные Помимо чисел Вы можете хранить в переменных произвольный текст. Переменные, которые хранят текст называются строковыми переменными. При записи текста в переменную обязательно заключайте его в двойные (") или одинарные кавычки ('). Использование оператора + со строковыми переменными Если оператор + используется со строковыми переменными. Он выполняет объединение строк, хранящиеся в них. Пример3 <html> <body> <script type='text/javascript'> //Запишем значение 'Привет' в переменную ex1 ex1='Привет' ; //Запишем значение 'всем' в переменную ex2 ex2='всем'; /* Соединим значения строковых переменных ex1 и ex2, добавим к ним восклицательный знак и затем запишем результат в переменную ex3 */ ex3=ex1+' '+ex2+'!'; //Выведем содержимое переменной ex3 document.write(ex3); </script> </body> </html> Пример4. <html> <head> <title>JavaScript</title> </head> <body> <h1>Заголовок</h1> <script type="text/javascript"> var name; name = prompt("Введите ваше имя", ""); var s = "<h1>Привет, "+name+"!</h1>"; document.write(s); </script> </body> </html> Результатом сложения строки и числа всегда будет строка Пример 5 <html> <body> <script type='text/javascript'> //Сложение двух чисел var ex1=10+5; document.write(ex1 + '<br />'); //Сложение двух строк var ex2='10'+'5' document.write(ex2 + '<br />'); //Сложение строки и числа var ex3='10'+5; document.write(ex3 + '<br />'); var ex4='5'+10; document.write(ex4); </script> </body> </html>