Лабораторная работа 1 Основные положения
 Скачать 368.4 Kb.
|
|
Лабораторный курс по языку программирования JavaScript Содержание 1 Основные положения 2 Функция и обработка событий 3 Организация ветвлений в программах 4 Методы в JavaScript 5 Переключатели 6 Флажки 7 Списки 8 Фреймы 9 Повторяющиеся вычисления - циклы 10 Обработка и представление дат 11 Работа со строками 12 Массивы и методы работы с ними 13 Формы 14 Объект Image http://los-serega.narod.ru/JavaScript/start.html Лабораторная работа №1 Основные положения Программа (сценарий) на языке JavaScript представляет собой последовательность операторов с "точкой с запятой" ( ; ) между ними. Если каждый оператор размещается на одной строке, то разделитель можно не писать. Один оператор может располагаться на нескольких строках. В программах на JavaScript можно использовать комментарии. Для того чтобы задать комментарий, располагающийся на одной строке, достаточно перед его текстом поставить две косые черты (//). Если же поясняющий текст занимает несколько строк, то его следует заключать между символами /* и */. В JavaScript строчные и прописные буквы алфавита считаются разными символами. Любой язык программирования оперирует с постоянными и переменными величинами. В JavaScript это литералы и переменные. Опр.: Простейшие данные, с которыми может оперировать программа, называются литералами. Литералы не могут изменяться. Литералы целого типа могут быть заданы в десятичном (по основанию 10), шестнадцатеричном (по основанию 16) или восьмеричном (по основанию 8) представлении. Шестнадцатеричные числа включают цифры 0-9 и буквы а, b, с, d, e, f. Шестнадцатеричные числа записываются с символами 0х перед числом, например, 0x25, 0xa1,0xff. Запись вещественного литерала отличается от записи вещественного числа в математике тем, что вместо запятой, отделяющей целую часть от дробной, указывается точка, например, 123.34, -22.56. Кроме того, для записи вещественных чисел можно использовать так называемую экспоненциальную форму. Кроме целых и вещественных значений в языке JavaScript могут встречаться так называемые логические значения. Существуют только два логических значения: истина и ложь. Первое представляется литералом true, второе - false. В некоторых реализациях JavaScript может быть использована единица в качестве true, и ноль в качестве false. Строковый литерал представляется последовательностью символов, заключенной в одинарные или двойные кавычки. Примером строкового литерала может быть строка "результат" или 'результат'. Опр.: Элемент, используемый для хранения данных, называется переменной. Тип переменной зависит от хранимых в ней данных, при изменении типа данных меняется тип переменной. Определить переменную можно с помощью оператора var, например: var test1. В данном случае тип переменной test1 не определен и станет известен только после присвоения переменной некоторого значения. Оператор var можно использовать и для инициализации переменной, например, конструкцией var test2=276 определяется переменная test2 и ей присваивается значение 276. Значение переменной изменяется в результате выполнения оператора присваивания. Оператор присваивания может быть использован в любом месте программы и способен изменить не только значение, но и тип переменной. Оператор присваивания выглядит так: а=b, где а - переменная, которой мы хотим задать некоторое значение; b - выражение, определяющее новое значение переменной. Пусть в сценарии описаны следующие переменные var n=3725 var x=2.75 var p=true var s="Выполнение завершено" n и x имеют тип number, тип переменной р - логический, переменная s имеет тип string. В JavaScript определен тип function для всех стандартных функций и функций, определяемых пользователем. Объекты JavaScript имеют тип данных object. Переменные типа object часто называют просто объектами, они могут хранить объекты. Опр.: Выражения строятся из литералов, переменных, знаков операций, скобок. В зависимости от типа вычисленного значения выражения можно разделить на арифметические, логические и строковые. Арифметические выражения получаются при выполнении операций, перечисленных в табл.1. Операции отношения применимы к операндам любого типа. Результат операции - логическое значение true, если сравнение верно, и false - в противном случае. Приоритет операций определяет порядок, в котором выполняются операции в выражении. В табл.2 перечислены рассмотренные операции в порядке убывания приоритетов. Сценарии, написанные на языке JavaScript, могут располагаться непосредственно в HTML-документе между тегами . Одним из параметров тега Документ может содержать несколько тегов Конец формирования страницы, содержащей сценарий Лабораторная работа №2 Функция и обработка события Основным элементом языка JavaScript является функция. Описание функции имеет вид function F (V) {S}, где F - идентификатор функции, задающий имя, по которому можно обращаться к функции; V - список параметров функции, разделяемых запятыми; S - тело функции, в нем задаются действия, которые нужно выполнить, чтобы получить результат. Необязательный оператор return определяет возвращаемое функцией значение. Обычно все определения и функции задаются в разделе Пример сценария со значениями из формы Вычисление площади квадрата Лабораторная работа №3 Организация ветвлений в программах При составлении программы часто необходимо выполнение различных действий в зависимости от результатов проверки некоторых условий. Для организации ветвлений можно воспользоваться условным оператором, который имеет вид: if В {S1} else {S2} где B - выражение логического типа; S1 и S2 - операторы. Выполнение условного оператора осуществляется следующим образом. Вычисляется значение выражения B. Если оно истинно, то выполняются операторы S1, если ложно - операторы S2. Если последовательность операторов S1 или S2 состоит лишь из одного оператора, то фигурные скобки можно опустить. Возможна сокращенная форма условного оператора: if В {S} где B - выражение логического типа; S - последовательность операторов. Выполнение краткого условного оператора осуществляется так: вычисляется значение выражения B, если оно истинно, то выполняются операторы S. Пример 1. Нахождение максимального значения Для трех заданных значений а, b, с необходимо написать сценарий, определяющий максимальное значение. Поступим следующим образом. Сначала максимальным значением m будем считать значение а, далее значение b сравним с максимальным. Если окажется, что b больше m, то максимальным становится b. И, наконец, значение c сравнивается с максимальным значением из предыдущих значений а и b. Если c больше m, то максимальным становится c. Оператор присваивания obj.res.value=m обеспечивает запись вычисленного максимального значения в соответствующее поле формы. Функция Number (s) преобразует объект s, заданный в качестве параметра, в число. Полностью сценарий может быть записан так, как представлено в листинге 1. Листинг 1. Вычисление максимального значения из трех заданных Вычисление максимального значения3. Напишите программу, которая определяет, можно ли построить треугольник с заданными длинами сторон. 4. Точка на плоскости задается своими координатами. Определите, какой из четвертей прямоугольной системы координат принадлежит заданная точка. Лабораторная работа №4 Методы в JavaScript Во время интерпретации HTML-документа браузером создаются объекты JavaScript. Свойства объектов определяются параметрами тегов языка HTML. Структура документа отражается в иерархической структуре объектов, соответствующих HTML-тегам. Родителем всех объектов является объект windows, расположенный на самом верхнем уровне иерархии, он представляет окно браузера и создается при запуске браузера. Для того чтобы открыть новое окно в сценарии JavaScript и отобразить в нем новый документ, применяется метод open, для закрытия окна можно воспользоваться методом close. Метод alert объекта windows отображает диалоговое окно с текстом, переданным методу в качестве параметра. Данный метод используется в случаях проверки правильности вводимых данных с помощью формы. Свойства объекта windows относятся ко всему окну, в котором отображается документ. Подчиненными объектами (или объектами нижнего уровня) являются объекты document, history, location, frame. Свойства объекта history представляют адреса ранее загружаемых HTML-страниц. Свойства объекта location связаны с URL-адресом отображаемого документа, объекта frame - со специальным способом представления данных. Свойства объекта document определяются содержимым самого документа: шрифт, цвет фона, формы, изображения и т. д. Объект document в зависимости от своего содержимого может иметь объекты, являющиеся для него подчиненными или дочерними. В частности подчиненными для объекта document являются объекты form, image, link, area и др. Иерархическая структура объектов представлена на рис.1 Для каждой страницы создается один объект document, некоторые его свойства соответствуют параметрам тега : bgColor, fgcolor, linkcolor, alinkcolor, vlinkColor. Методы write и writeln записывают в документ текст, задаваемый параметром. Если документ содержит изображения, то доступ к объекту, определяющему изображение, можно получить с помощью переменной, указанной в параметре name тега Рассмотрим примеры, в которых используются различные свойства объектов. Для встраивания изображений в HTML-документ служит тег параметра width определяет ширину изображения, значение параметра height - высоту изображения. Значения параметров ширины и высоты могут не совпадать с истинными размерами изображений, тогда при загрузке изображения автоматически выполняется перемасштабирование. Изображение можно поместить в рамку. Для этого используется параметр border. Значением параметра должно быть число, определяющее толщину рамки в пикселях. По умолчанию рамка вокруг изображения отсутствует, если только изображение не является ссылкой. Параметр alt определяет альтернативный текст. При наведении курсора мыши на изображение появляется комментарий. Пример 1. Перестановка изображений Напишем сценарий, который реализует обмен рисунков в документе. Пусть в документе расположено три изображения, пронумерованных от 1 до 3. В текстовых полях указываются номера рисунков, которые необходимо поменять местами. Требуется, чтобы после нажатия кнопки Обменять изображения переместились на нужные места. Сначала проверим, правильно ли заданы номера изображений, если это не так, то выдадим сообщение. Переменная z служит для запоминания адреса первого графического изображения. Доступ к изображению с номером r1 производится с помощью конструкции document.images[r1-1]. Для того чтобы на место изображения с номером r1 поместить изображение с номером r2, требуется выполнить оператор присваивания: document.images[r1-1].src=document.images[r2-1].src И, наконец, на место изображения с номером r2 помещается изображение, которое ранее было на месте с номером r1, и адрес которого запомнили в переменной z: document.images[r2-1].src=z Приведем полностью документ со сценарием (листинг 1). Листинг 1. Перестановка изображений с помощью сценария
|