Лабораторная работа №1
«Знакомство с синтаксисом языка Javascript»
Цели:
1. ознакомиться с синтаксисом языка;
2. иметь представление о методах ввода/вывода информации;
3. знать способы объявления переменных;
4. уметь применять полученные знания на практике.
Способы объявления переменных.
Объявление переменной делается оператором var:
var а;
Переменные бывают трех основных типов:
∙ number - любое число (12; -123; 12.3; 1.23e2)
∙ boolean - принимает всего два значения: правда и ложь ("2+2=4" - true; "2*5=-9" - false)
∙ string - текстовая строка ("Любая фраза")
JavaScript сам определит тип переменной при присвоении ей значения. А присвоить значение можно любым из следующих способов:
<script>
var a=6363;
var s;
s="Это текстовая строка";
YourName=prompt ("Ваше имя", "Вводить здесь");
</script>
Т.е. для объявления переменной не всегда необходимо пользоваться оператором var.
Названием переменной может быть не любая комбинация. Имя переменной должно состоять из латинских букв, цифр, лучше не использовать символы (кроме, символа нижней черты _), нельзя использовать пробелы, имя не должно начинаться с цифры и не должно совпадать с зарезервированным словом JScript.
Упражнение1. Написать программу, которая спрашивала бы у пользователя его имя (например, Маша), а потом говорила «Привет, Маша».
Специальные символы
При выводе информации иногда бывает необходимо вывести и специальные символы. Вот некоторые из них:
\b - возврат
\t - табуляция
\' - одинарные кавычки (апостроф)
\" - двойные кавычки
\\ - обратная косая черта
\000 - вставка любого символа по восьмеричному коду (например: \123)
\x00 - то же самое только по шестнадцатеричному коду ASCII (например: \xAC)
Упражнение 2. Известна такая довольно старая шутка. Вы спрашиваете у вашего друга:
"Где ты больше всего любишь обедать?" (Например, он отвечает "В столовой")
"Твоя любимая еда?" ("Торт")
"Твой любимый музыкальный инструмент?" ("Барабан")
"Твоя любимая геометрическая фигура?" ("Круг")
"Твоя любимая скорость?" ("140 км/ч")
После этого вы рассказываете другу такую историю:
"Вы сидите в столовой. Играет романтическая музыка, горят свечи... Вы кладете в рот кусочек вкуснейшего торта, и вдруг на вас падает барабан, и со скоростью 140 км/ч вы превращаетесь в круг!.."
Осуществите эту шутку в JavaScript. Используйте методы prompt(), alert() и переменные.
«Знакомство с основными операторами»
Цели:
1. ознакомиться с математическими операторами;
2. иметь представление об объектах языка (объект Math);
3. уметь применять полученные знания на практике.
Математические операторы
+ сложение
- вычитание
* умножение
/ деление
% остаток от деления
Реализуйте следующий пример:
<script>
alert (45+56);
alert (45-56);
alert (45*56);
alert (45/56);
alert (56%45);
</script>
Объекты
Объекты позволяют получить дополнительный набор операторов. Начнем с объекта Math. Этот объект предоставляет дополнительный набор математических операторов. Вот наиболее распространенные:
∙ LN2; LN10: LOG2E; LOG10E - различные логарифмы
∙ E; PI - число e и число π соответственно
∙ SQRT2; SQRT1_2 - корень квадратный из двух и 0,5 соответственно
Реализуйте следующий пример:
<script>
alert (Math.Ln10);
a=Math.E;
alert (a);
</script>
∙ sin(); cos(); tan(); asin(); acos(); atan() - синус, косинус, тангенс, арксинус, арккосинус, арктангенс
∙ abs() - модуль числа
∙ sqrt() - квадратный корень числа
∙ pow() - степень числа (в скобках через запятую основание и показатель степени)
∙ exp() - экспонента числа
∙ log() - логарифм числа
∙ random() - псевдослучайное число
∙ round() - округление числа
∙ ceil() - округление по избытку
∙ floor() - округление по недостатку (целая часть от деления двух целых чисел)
∙ max() - максимальное значение из тех чисел, которые через запятую перечислены в скобках
∙ min() - минимальное значение из тех чисел, которые через запятую перечислены в скобках
Упражнение 1. Написать программу, вычисляющую площадь треугольника
Упражнение 2. Math.random() дает псевдослучайное число в диапазоне от 0 до 1. Подумайте, как составить генератор псевдослучайных чисел в диапазоне от 1 до 100.
«Условный оператор»
Цели:
1. ознакомиться с синтаксисом условного оператора;
2. получить навыки работы с операторами if и else.
Существует такой тип переменной как Boolean. Операторы условия работают через него. Т.е. если некоторое выражение или переменная принимает значение true, то идет процесс выполнения определенного набора операторов. А если же false, то выполняется другой набор операторов (или не выполняется ничего).
Для получения булеановских выражений используются специальные операторы сравнения:
== равно (5==5)
< меньше (-1<1)
> больше (1>-2)
<> не равно (1<>2)
>= больше или равно (10>5 5=5)
<= меньше или равно (5<10 10=10)
Логические связки:
!= логическое НЕ (1!=2)
&& логическое И (2>1 && 3>1)
|| логическое ИЛИ (2>1 || 0>1)
Если требуется проверить несколько условий, то каждое, помимо общих скобок, берется в свои, отдельные.
Задание 1. Разработать программу, которая говорила бы пользователю «Спасибо!» только в том случае, если он введет ноль, иначе она будет говорить «Пожалуйста!».
Используйте оператор условия и операторы сравнения.
Задание 2. Разработать программу, которая бы проверяла, чтобы пользователь ввел число четное и не больше 10. Используйте оператор условия, операторы сравнения, логические связки.
«Разработка калькулятора»
Цели:
1. ознакомиться с основными подходами в разработке программ;
2. получить навыки разработки калькулятора.
Основы подхода к программированию на JavaScript.
Идея JavaScript очень проста. Все операции, которые можно исполнять в программе на JavaScript, описывают действия над хорошо известными и понятными объектами, которыми являются элементы рабочей области браузера и контейнеры языка HTML. Собственно, объектная ориентированность JavaScript на этом и кончается. Никаких классов объектов, а тем более, наследования в JavaScript нет. Есть только объекты с набором свойств и набор функций над объектами, которые называются методами. Кроме методов существуют и другие функции, больше похожие на функции из традиционных языков программирования, которые позволяют работать со стандартными математическими типами или управлять процессом выполнения программы. Еще в JavaScript есть события - аналог программных прерываний. Эти события также ориентированы на работу в World Wide Web, например, загрузка страницы в рабочую область Navigator или выбор гипертекстовой ссылки. Используя события, автор гипертекстовой страницы и программы, ее отображающей, может организовать просмотр динамических объектов, например бегущей строки, или управление многооконным интерфейсом.
Для встраивания скриптов в тело HTML-документа используется контейнер SCRIPT. Не все браузеры способны распознавать и исполнять скрипты, поэтому само тело скрипта помещается в контейнер комментария.
Пример
| <html> <head> <!—- <script language="JavaScript"> Код сценария </script> --> </head> <body> Код HTML </body> </html> | Пример встраивания скрипта в тело HTML-документа. |
В этом примере в заголовок документа (контейнер HEAD) включен контейнер SCRIPT. Далее, в тексте страницы определен комментарий, в который включен текст скрипта.
Необходимо запомнить следующие вещи:
1. Поместив сценарий на JavaScript в разделе <head> документа, вы делаете так, что весь сценарий будет загружен до того, как потребуется его выполнить.
2. Код сценария должен быть заключен в теги комментария HTML для того, чтобы старые браузеры, не понимающие JavaScript, не отображали его на экране.
3. Регистр, которым написаны буквы, в JavaScript имеют значение.
Отступление. Для того чтобы можно было обратиться к какому-то объекту, при его описании используется атрибут ID или name, например, <P ID=passage>, теперь к параграфу можно обратиться, используя passage.
Новые понятия
Прежде чем обратиться к объектам, составляющим объектную модель броузера, следует рассмотреть ряд новых понятий, которые мы будем использовать на протяжении ряда следующих занятий.
Объект — совокупность свойств, методов, событий и коллекций, предоставляемая броузером в рамках объектной модели. Все объекты создаются самим броузером, и доступ к ним осуществляется через экземпляр:
Объект. метод событие коллекция свойство.
Свойство — переменная в рамках объекта, которая может использоваться для получения каких-то значений или установки новых. Ряд свойств может быть доступен только для чтения.
Метод — процедура или функция, предоставляемая объектом для выполнения каких-либо действий или управления свойствами объекта.
Событие — какое-либо действие пользователя или момент работы броузера. Для реакции на события создаются обработчики событий.
Коллекция — упорядоченный набор свойств, похожий на массив, доступ к которому осуществляется специальными средствами.
Запуск JavaScript. Что необходимо сделать, чтобы запускать скрипты, написанные на языке JavaScript? Вам понадобится браузер, способный работать с JavaScript - например, Netscape Navigator (начиная с версии 2.0) или Microsoft Internet Explorer (MSIE - начиная с версии 3.0).
События. События и обработчики событий являются очень важной частью для программирования на языке JavaScript. События, главным образом, инициируются теми или иными действиями пользователя. Если он щелкает по некоторой кнопке, происходит событие onClick. Если указатель мыши пересекает какую-либо ссылку гипертекста - происходит событие MouseOver. Существует несколько различных типов событий. Мы можем заставить нашу JavaScript-программу реагировать на некоторые из них. И это может быть выполнено с помощью специальных программ обработки событий. Так, в результате щелчка по кнопке может создаваться выпадающее окно. Это означает, что создание окна должно быть реакцией на событие щелчка - Click. Программа - обработчик событий, которую мы должны использовать в данном случае, называется onClick. И она сообщает компьютеру, что нужно делать, если произойдет данное событие. Приведенный ниже код представляет простой пример программы обработки события onClick:
| <form> <input type="button" value="Щелкни" onClick = "alert('Yo')"> </form> | Пример обработки события: при нажатии на кнопке выводится сообщение «Yo». |
Данный пример имеет несколько новых особенностей: рассмотрим их по порядку. Вы можете здесь видеть, что мы создаем некую форму с кнопкой. Первая новая особенность - onClick="alert('Yo')" в тэге <input>. Как мы уже говорили, этот атрибут определяет, что происходит, когда нажимают на кнопку. Таким образом, если имеет место событие onClick, компьютер должен выполнить вызов alert('Yo'). Обратите внимание, что в этом случае мы даже не пользуемся тэгом <script>. Функция alert() позволяет Вам создавать выпадающие окна. При ее вызове Вы должны в скобках задать некую строку. В нашем случае это 'Yo'. И это как раз будет тот текст, что появится в выпадающем окне. Таким образом, когда Вы щелкаете на кнопке, наш скрипт создает окно, содержащее текст 'Yo'. В этом примере мы написали onClick="alert('Yo')" - то есть мы использовали и двойные, и одинарные кавычки. Если бы мы написали onClick="alert("Yo")", то компьютер не смог бы разобраться в нашем скрипте, поскольку становится неясно, к которой из частей конструкции имеет отношение функция обработки событий onClick, а к которой - нет. Поэтому Вы и вынуждены в данном случае перемежать оба типа кавычек. Не имеет значения, в каком порядке Вы использовали кавычки - сперва двойные, а затем одинарные или наоборот. То есть Вы можете точно так же написать и onClick='alert("Yo")'.
Вы можете использовать в скрипте множество различных типов функций обработки событий. Сведения о некоторых из них мы получим в данном описании, однако не о всех.
Функции. В большинстве наших программ на языке JavaScript мы будем пользоваться функциями. В большинстве случаев функции представляют собой лишь способ связать вместе нескольких команд. Давайте, к примеру, напишем скрипт, печатающий некий текст:
<html>
<script language="JavaScript">
function myFunction()
{
document.write("Добро пожаловать на мою страницу!<br>");
document.write("Это JavaScript!<br>");
}
</script>
<body>
<form>
<input type="button" value="Вызов функции" onClick="myFunction()">
</form>
<body>
</html>
В этом скрипте мы определили некую функцию, состоящую из следующих строк:
function myFunction() {
document.write("Добро пожаловать на мою страницу!<br>");
document.write("Это JavaScript!<br>");
}
Все команды скрипта, что находятся внутри фигурных скобок - {} - принадлежат функции myFunction(). Это означает, что обе команды document.write() теперь связаны воедино и могут быть выполнены при вызове указанной функции. Можно увидеть, что здесь при нажатии на кнопку осуществляется вызов функции myFunction().
Замечание:
8. Опишем функцию с именем znak(c), которая будет запоминать знак операции, первое число и очищать строку. Для этого выше всех функций описать три переменные с именами oper (знак операции), pervoe (первое число), vtoroe (второе число) следующим образом: var oper, pervoe, vtoroe, то есть мы описали переменные, значения которых будет известно во всех функциях. Теперь опишем функцию znak(c), где c – параметр для хранения знака операции. Сначала в переменную oper помещаем значение переменной c, затем, используя функцию eval для преобразования строки в число, в переменную pervoe помещаем значение текстовой строки и очищаем текстовую строку, помещая в нее значение, равное нулю. Обработать событие щелчок по кнопкам со знаками операций, вызвав описанную выше функцию.
9. Опишем функцию chet(), которая будет подсчитывать результат. Сначала переменной vtoroe присвоим значение, хранящееся в текстовой строке (смотри предыдущий пример), затем используя условный оператор можем вычислить результат, например, если знак «+», то условный оператор выглядит следующим образом: if (op = = '+') идентификатор_формы. +second;. Аналогично написать для всех знаков.
10. Сохранить документ и опробовать в действии.
11. Самостоятельно: добавить кнопку, которая бы очищала текстовую строку, кнопочку, которая бы меняла знак числа.