Федеральное государственное бюджетное образовательное учреждение

высшего профессионального образования

«БАШКИРСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ»

ИЗУЧЕНИЕ ОСНОВ ЯЗЫКА JavaScript

Методические указания

по выполнению лабораторных работ

Уфа

РИЦ БашГУ

2014

Печатается по решению кафедры информационных технологий факультета математики и информационных технологий.

Протокол № 7 от 25.03.2014 г.

Составитель: д.ф.-м.н., профессор Делев В.А.

В методических указаниях изложена технология программирования на языке JavaScript: порядок запуска скриптов, методы ввода и вывода информации, события, арифметические и логические операции. Рассмотрены примеры, даны рекомендации.

Методические указания предназначены для студентов и бакалавров факультета математики и информационных технологий БашГУ, изучающих дисциплины «Современные Web-технологии», «Проектирование в среде Интернет», «Основы Web-программирования», «Основы Web-дизайна» (направления подготовки: 230700 – Прикладная информатика; 010400, 010500, 010501 – Прикладная математика и информатика; 010300 – Фундаментальная информатика и информационные технологии).

Содержание:

Введение 4

Лабораторная работа №1. Порядок запуска скриптов. 8

Лабораторная работа №2. Методы ввода информации. 10

Лабораторная работа №3. Текстовая область textarea и интерактивные формы. 15

Лабораторная работа №4. Методы вывода информации. 20

Лабораторная работа №5. События. 23

Лабораторная работа №6. Арифметические и логические операции. 29

Лабораторная работа №7. Операции со строковыми переменными. 32

Лабораторная работа №8. Математические функции и константы. 34

Лабораторная работа №9. Регулярные циклы. 37

Лабораторная работа №10. Операторы условной передачи управления if-else(cond) и switch(x). 38

Лабораторная работа №11. Создание окон. 42

Лабораторная работа №12. Примеры скриптов. 46

Контрольные вопросы 49

Введение

JavaScript – это объектно-событийный язык сценариев. В этом определении содержатся три ключевых понятия: сценарий, событие и объект.

Сценарий (скрипт, script) – программа, которая расширяет возможности языка HTML. Скрипты обрабатываются (интерпретируется) браузером одновременно с кодом HTML.

Событие – действие пользователя или операционной системы, которое вызывает запуск скрипта (программы). В качестве примера произошедших событий можно назвать: нажатие клавиши на клавиатуре, щелчок мышью, открытие окна браузера, срабатывание таймера.

Объект – контейнер, содержащий данные. Объект обладает свойствами и методами, предназначенными для изменения этих свойств. Сценарии позволяют изменять свойства объекта в соответствии с планом, разработанным дизайнером. Объектами являются: окно браузера (window), Web-страница (document), фрейм (frame), текстовое поле (text), кнопка (button). Часть объектов находятся в состоянии соподчиненности друг к Другу (иерархии). Старшие объекты включают в себя младшие объекты. Например, Web-страница (document) может содержать внутри себя форму (form), которая может быть реализована в виде текстового поля (text).

Свойства – совокупность переменных, которые характеризуют объект, например, ширина и высота окна браузера.

Методы – функции (подпрограммы), которые позволяют изменять свойства объекта (а значит и сам объект). Характерной синтаксической особенностью методов является то, что их имена заканчиваются скобками. Например, open(), close(), write(). Кроме того, имена методов чаще всего являются глаголами, которые указывают на выполняемые действия: открыть, закрыть, написать.

Программистами создано большое число оригинальных скриптов (программ-сценариев обработки каких-либо событий с последующим изменением свойств объектов). Скрипты позволяют создавать разнообразные эффекты и выполнять различные действия, например: изменять цвет и форму кнопки при наведении на нее курсора, определять версию браузера клиента, выводить на экран местное время, изменять цвет фона страницы и т.д. При создании скрипта у программистов имеется большой простор для творчества Можно выбирать разные события, от которых происходит запуск скрипта. Программист самостоятельно определяет, на какой объект будут направлены запанированные им действия.

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

Язык JavaScript существенно отличается от процедурных (алгоритмических) языков. Работа программ, написанных на алгоритмических языках, идет практически непрерывно от момента их запуска до момента завершения. Скрипты – это множество программ, которые работают чаще всего независимо друг от друга и каждая программа запускается автономно при определенных действиях пользователя. По этой причине этот язык иногда называют интерактивным. При отсутствии активных действий пользователя скрипты не будут работать (за исключением, может быть, сценариев, которые запускаются с помощью таймера или в момент полной загрузки Web-страницы). Большую часть времени скрипты «дремлят», ожидая активных действий пользователя.

Язык JavaScript разработан фирмой Netscape (1995 г.). В противовес этому языку фирма Microsoft создала язык VBScript. Однако язык VBScript поддерживается только браузерами Internet Explorer, поэтому язык JavaScript получил большее распространение в Web-дизайне. Порой этот язык называют межбраузерным, так как он одинаково успешно работает на разных типах браузеров (Internet Explorer, Netscape Navigator, Opera). Язык JavaScript расширяет возможности языка HTML за счет того, что позволяет программно изменять значения атрибутов HTML. При этом происходящие изменения наблюдаются без перезагрузки Web-страницы.

Рассмотрим основные сведения об этом языке. Элементами языка являются:

• Константы.

• Переменные.

• Функции.

• Операторы.

• Выражения.

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

• Целые (десятичные, восьмеричные, шестнадцатеричные).

• С плавающей точкой.

• Строковые.

• Булевы (логические).

Константа null, означающая отсутствие каких-либо значений (другими словами, null – это ничего нет, пусто).

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

Переменные могут быть глобальными и локальными. Локальные переменные действуют только внутри функции, глобальные переменные действуют в рамках всей составленной программы. Однако и глобальные переменные действуют лишь в пределах одной Web-страницы.

Имена переменных должны начинаться с буквы или с символа подчеркивания. В именах допустимо использование арабских цифр. Имена не могут содержать пробелов. Они не должны совпадать с ключевыми (зарезервированными) словами языка JavaScript. Перечень ключевых слов можно найти в различных литературных источниках. Например, в [7].

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

var = vol_sound;

var y 12 = 3.123;

var x = "Alisa";

В приведенном примере объявлены три переменные. Причем для переменных у 12 и х сразу определен их тип (соответственно с плавающей точкой и строковая переменная).

Переменные могут быть сгруппированы в массивы. Массив – это пронумерованный набор переменных, называемых элементами массива. Порядковые номера элементов (переменных) называют индексами.

Функция – логически завершенный фрагмент программы, предназначенный для решения (реализации) определенной задачи. Каждая функция имеет оригинальное (неповторяющееся) имя. Одна и та же функция может быть многократно вызвана в разных местах программы.

Операторы – конструкции, которые определяют, какие действия производятся над константами, переменными, функциями. Операторы бывают следующих типов:

• Присваивания.

• Сравнения.

• Арифметические,

• Инкремента и декремента.

• Битовые.

• Логические.

• Строковые.

• Специальные,

• Управляющие.

• Цикла.

Выражения – набор констант, переменных, функций, соединенных операторами. Каждое выражение в языке JavaScript должно заканчиваться точкой с запятой.

Программа, написанная на языке JavaScript, чаще всего размещается внутри HTML-кода, например, внутри контейнера из тегов head. Границы сценария отмечают при помощи парного тега script. Заметим, что существует возможность разместить код скрипта в отдельном файле. В этом случае можно вызывать один и тот же сценарий на разные HTML-страницы.

Для языка JavaScript важным понятием является «объектная модель». Образно это понятие можно представить так. Существует несколько ящиков, внутри которых лежат матрешки. Чтобы положить записку в нужную матрешку следует открыть соответствующий ящик и все матрешки, которые охватывают выбранную программистом матрешку. Возвращаясь к реальным объектам можно сказать: ящики - это окна браузеров (их может быть открыто несколько). Матрешками являются: документы (Web-страницы), фреймы... Для того чтобы выбрать нужное свойство объекта следует указать полный путь к нему: объект1.объект2.объект3.свойство. Одна из реальных конструкций вложенных объектов может быть такой: win* dow3.document.forma2.textl.value=Proba. Подобная конструкция может использоваться для записи слова "Proba" в текстовое поле с именем textl формы forma2, которые находятся внутри окна window3. По структуре объектная иерархия напоминает файловую систему, в которой фигурируют диски, папки и файлы.

Таким образом, язык JavaScript используется для расширения возможностей языка HTML. Основными понятиями, которыми оперирует язык JavaScript, являются: объекты, события, методы, свойства.

Сценарии, написанные на JavaScript, обладают наибольшей совместимостью со всеми типами браузеров.