1к2с Информационные технологии - КР / МУ к практической работе Основы работы с JavaScript

АПРОБАЦИЯ

Министерство образования и науки Российской Федерации

Саратовский государственный технический университет

Балаковский институт техники, технологии и управления

ОСНОВЫ РАБОТЫ С JAVASCRIPT

Методические указания к выполнению лабораторных и практических работ по дисциплине «Информационные технологии»

для направления «Информационные системы и технологии» всех форм обучения

Одобрено редакционно-издательским советом Балаковского института техники,

технологии и управления

1

БАЛАКОВО

ЦЕЛЬ РАБОТЫ: изучить основы синтаксиса JavaScript.

ОБЩИЕ ПОНЯТИЯ

JavaScript – это язык для написания небольших программ (скриптов),

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

JavaScript – это объектно-ориентированный язык программирования для разработки клиентских и серверных приложений.

Эффекты и правила JavaScript

JavaScript является интерпретируемым языком программирования, который может быть добавлен в HTML код веб-страницы.

Данный язык программирования может быть использован для решения следующих задач:

1. Обеспечение взаимодействия с пользователем. С помощью JavaScript

можно написать код, который будет выполняться в ответ на какое-либо событие.

Например, события генерируемые пользователем – щелчок мыши, генерируемые системой – изменение размера страницы.

2.Динамическое изменение содержания страницы. Код JavaScript может использоваться для динамического изменения содержимого и позиции элементов страницы, в ответ на действия пользователя.

3.Проверка правильности данных. Возможно создать код, который проверяет данные введенные пользователем в поля формы, перед отправкой на сервер для дальнейшей обработки.

JavaScript, как и любые другие языки программирования имеет несколько грамматических правил:

2

1. Использование заглавных букв. JavaScript является регистровым языком,

который чувствителен к использованию заглавных и строчных букв. При написании программ на JavaScript необходимо следить за правильным использованием заглавных и строчных букв.

2.Использование парных скобок. В скриптах на JavaScript, необходимо следить за тем, чтобы открывающиеся и закрывающиеся символы всегда образовывали пару.

3.Использование пробелов. Подобно HTML, JavaScript игнорирует несколько пробелов подряд.

4.Использование комментариев. Строки комментариев добавляют в скрипты для того, чтобы отобразить объяснения и инструкции.

Добавление сценария JavaScript на веб-страницу

Код программы на JavaScript добавляется в HTML документ следующими способами:

1.Добавление операторов непосредственно в документ, используя тег

<SCRIPT>.

2.Установить связь HTML документа с файлом, содержащим код JavaScript.

3.Использовать выражения JavaScript, как значение атрибутов тега HTML.

4.Использовать в качестве инструкций, которые добавляются в любые другие

HTML теги.

Использование тега <SCRIPT>

Для внедрения в HTML-страницу сценариев JavaScript в спецификацию языка HTML был введен тег-контейнер <script>...</script>, внутри которого могут располагаться операторы языка JavaScript. Для того, чтобы браузеры, не поддерживающие этот тег, не выводили текст программы на экран, все, что внутри этого тега, следует помещать внутрь тега комментария <!-- ... -->, как показано ниже:

<script language="JavaScript"> <!--

Использование тега script

3

//--> </script>

В данном случае атрибут тега script - LANGUAGE определяет язык программирования, который браузер должен использовать для интерпретации скрипта. Описав сам язык можно также указать его версию.

Например, <script language="JavaScript1.2">.

Операторы JavaScript отделяются друг от друга символом – точка с запятой

(;). Хорошим стилем программирования является размещение кода скрипта в области заголовка документа, между открывающим и закрывающим тегами

<head> и </head>. В этом случае, код скрипта будет прочитан и распознан перед тем, как отобразится вся страница в окне браузера.

Задание файла с кодом JavaScript

Тег <SCRIPT> имеет параметр SRC, позволяющий связать встраиваемый сценарий с внешним файлом, содержащим программный код на языке JavaScript.

В качестве значения параметра задается полный или относительный URL-адрес ресурса. Задание закрывающего тега </SCRIPT> обязательно, независимо от того,

заданы или нет операторы внутри тега. Следующий фрагмент кода связывает документ HTML с файлом-источником, содержащим некоторый набор функций:

<SCRIPT language="JavaScript" SRC="filename.js"> </SCRIPT>

Внешний файл – это текстовый файл, содержащий код на языке JavaScript, и

имеющий расширение ".js". Данный файл должен содержать только операторы

JavaScript и описание функций

Элементы JavaScript в параметрах тегов HTML

Переменные и выражения JavaScript можно использовать в качестве значений параметров тегов HTML. Эта процедура аналогична процедуре встраивания числовых или символьных примитивов HTML. Элементы JavaScript

также располагаются между амперсандом (&) и точкой с запятой (;), но должны заключаться в фигурные скобки {}, и использоваться только в качестве значений параметров тегов HTML:

4

& {выражение}; где выражение – выполняемые операторы JavaScript.

Использование JavaScript для обработки событий

Для совместимости с языками сценариев в некоторые теги HTML были введены специальные параметры обработки возникающих событий. Значениями этих параметров могут быть операторы языка JavaScript. Обычно в качестве значения задается имя функции, которая вызывается, когда происходит соответствующее событие, определяемое параметром обработки события. Имя параметра начинается с приставки on, за которым следует имя самого события.

Например, параметр обработки события click (щелчок кнопкой мыши) будет иметь имя onСlick.

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

Функция или процедура — это именованная последовательность операторов, которая выполняет определенную задачу и может возвращать некоторое значение. Функция определяется оператором function, имеющем следующий синтаксис:

function имя_функции([параметры]) { [операторы JavaScript]

[return значение]

}

Параметры, передаваемые функции, разделяются запятыми.

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

5

осуществлять в теге <HEAD>, так как все определенные в нем операторы сценария интерпретируются до отображения страницы, и, таким образом, будут известны в процессе отображения всей страницы.

ТЕХНОЛОГИЯ ВЫПОЛНЕНИЯ РАБОТЫ

Задание 1. Использование тега <SCRIPT> в документе HTML. <html>

<head>

<title>This is a JavaScript example</title> <script language="JavaScript">

<!--

document.write("Здравствуй мир!");

//--> </script> </head>

<body> Привет! </body>

</html>

Задание 2. В данном примере представлены два файла. Первый файл – test.htm – содержит HTML документ. Второй файл - test.js является текстовым файлом, содержащим только код JavaScript. Оба файла необходимо сохранить в одном каталоге.

1. Создайте HTML документ (test.htm): <html>

<head>

<script src="test.js"> </script> </head>

<body>

<p>Все отлично!

</body>

</html>

6

2. Создайте файл с кодом JavaScript (test.js): document.write("Привет!Как у тебя дела?")

Задание 3. Рассмотрим применение элементов языка программирования

JavaScript для определения ширины горизонтальной линии. Значение ширины линии установлено в 10 пикселов.

<html>

<head>

<script>

var linewidth=10; </script> <body>

<H2> Изучение элементов JavaScript </H2> <HR width="&{linewidth};%" align="left"> </body>

</html>

Задание 4. В следующем примере, событие onClick происходит, когда пользователь выполняет щелчок на элементе формы Button (на кнопке).

<html>

<SCRIPT LANGUAGE="JavaScript"> function greeting ( ) {

alert("Hello!");

}

</SCRIPT>

<BODY>

<FORM>

<INPUT TYPE="button" VALUE="Greeting" onClick="greeting()">

</FORM>

</BODY>

</HTML>

7

Задание 5. Задание функции и ее вызов

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- //Скрыть сценарий от браузеров: не поддерживающих JavaScript function square(number) {

alert("Мне надо вычислить функцию и потом сформировать документ!"); return number * number;

}

//--> </SCRIPT> </HEAD> <BODY>

<P>Начинается отображение страницы, в которую внедрен сценарий вычисления функции</P>

<SCRIPT> <!--

document.write("Значение, которое вычислялось, равно ", square(5), "."); //-->

</SCRIPT> Теперь формирование страницы закончено. </BODY>

В теге <HEAD> задано описание функции square (), которая возвращает квадрат значения своего параметра, а также отображает окно сообщения. Вызов функции осуществляется в сценарии, размещенном в теле HTML-документа. В

этом сценарии используется метод write объекта document для формирования вывода в HTML-страницу.

Задание 6. Следующий пример показывает как можно использовать диалоговые окна, окна сообщений, а также вывести текст в окно браузера.

<HTML>

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

confirm ("Are you sure?");

8

alert ("OK"); document.write("Thank you!"); </SCRIPT>

</HEAD>

</HTML>

ИНДИВИДУАЛЬНЫЕ ЗАДАНИЯ

Индивидуальные задания выдаются преподавателем.

ВОПРОСЫ ДЛЯ САМОКОНТРОЛЯ

1.Дайте понятие JavaScript.

2.Какими способами можно добавить код JavaScript в документ HTML?

3.Перечислите основные грамматические правила языка программирования JavaScript?

4.Дайте понятие функции.

5.Какой тег используется для внедрения сценариев JavaScript на веб-

страницу?

СОДЕРЖАНИЕ ОТЧЕТА

1.Титульный лист

2.Цель работы

3.Коды web-страниц.

4.Полученный результат.

5.Вывод.

ВРЕМЯ, ОТВЕДЕННОЕ НА ВЫПОЛНЕНИЕ РАБОТЫ

Знакомство с основными понятиями – 1 час.

Выполнение индивидуальных заданий – 7 часов.

9

СПИСОК ЛИТЕРАТУРЫ

1. Автоматизированные информационные технологии: учеб. / под ред.

Г.А.Титаренко.- М.: ЮНИТИ, 2005.

2. Автоматизированные информационные технологии в производстве: Учеб-

ник / Под ред. И.Т. Трубилина - М.: СПбГТУ, 2006.

3. Информационные системы : Учебное пособие / Под ред. В.Н. Волковой,

Б.И. Кузина. СПб.: Изд-во СПбГТУ, 2007. - 216 с.

10