Лабораторні роботи з КМІ / Лабораторна робота № 15

ЛАБОРАТОРНАЯ РОБОТА № 15

Введение в JavaScript

1. Теоретические сведения

JavaScript представляет собой ООР (Object Orientated Programming, объектно-ориентированный язык программирования). Это значит, что с его помощью можно строить небольшие объекты, из которых потом складывается целое. JavaScript не может существовать сам по себе, он должен находиться внутри веб-страницы, а веб-страницу необходимо просматривать в браузере, который понимает язык JavaScript¹.

<SCRIPT LANGUAGE="JavaScript">

Это код HTML, который дает браузеру понять, что с этого места начинается JavaScript.

</SCRIPT>

Этим заканчивается любой JavaScript без исключений.

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

SCRIPT LANGUAGE="JavaScript">

document.write("<FONT COLOR='RED'>Текст красного цвета</FONT>")

</SCRIPT>

Слово DOCUMENT представляет собой object (объект). Слово WRITE, отделенное точкой, называется method (методом объекта). Текст в скобках называется instance (примером метода), он передает то, что происходит, когда метод воздействует на объект.

Текст внутри скобок находится в двойных кавычках и представляет собой простой HTML-код. Внутри двойных кавычек ставятся одинарные (если внутри поставить двойные кавычки, JavaScript решит, что это конец строки, и получится, что только часть текста будет применена к объекту, а это уже ошибка.

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

<SCRIPT LANGUAGE="javascript">

document.write("<FONT COLOR='RED'>Текст красный</FONT><BR>")

document.write("<FONT COLOR='BLUE'>Текст синий</FONT>")

</SCRIPT>

Команда <BR> в конце первого примера нужна, чтобы текст располагался на двух строках.

Теперь рассмотрим такие методы: getDay(), getDate(), getMonth(), getYear(), getHour(), getMinute(), и getSecond() (получитьДень, Число, Месяц, Год, Час, Минуту, Секунду). Для воздействия этим методам нужен объект, но DOCUMENT для этих целей не годится, поэтому нужно использовать новый объект, назовем его, например, Now (сейчас):

Now = new Date();

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

<SCRIPT LANGUAGE="javascript">

Now = new Date();

document.write("Сейчас месяц " + Now.getMonth())

</SCRIPT>

Этот код содержит два объекта – Now и document.

Now – это объект, который представляет new Date() (новую Дату). Дата обязательно должна быть новой, таким способом вы будете получать новую дату каждый раз, когда заходите на страницу или обновляете ее.

Объект document представляет метод write, т.е. то, что будет написано в окне браузера.

Текст в скобках после document.write оформляется таким образом:

1. Текст, что будет виден на странице, должен быть окружен двойными кавычками (одинарные кавычки для кода HTML внутри двойных).

2. Сочетание текста и команд требует знака «плюс» + между элементами.

3. Объект и метод разделены точкой, так что команда «Напечатать месяц» выглядит так: Now.getMonth().

4. Now.getMonth() – это не текст, который должен быть виден на странице, а команда, которая указывает месяц. Поэтому в кавычки она не ставится.

В случае использования нескольких объектов, код будет выглядеть так:

document.write("Сегодня " + Now.getDate() +

"-" + Now.getMonth() + "-" + Now.getFullYear() + ".

Вы зашли на страницу ровно в: " + Now.getHours() +

":" + Now.getMinutes() + " и " + Now.getSeconds() + " секунд.")

ВАЖНО:

1. В двойных кавычках указывается то, что будет видно в окне браузера.

2. Количество пробелов до и после знаков плюс не влияет на видимый результат, поэтому. Если нужны пробелы, следует добавить их в части текста в кавычках, например:

"Сегодня " или " секунд."

3. Строка document не должна прерываться. Здесь она разбита на несколько строк для удобства чтения, но в окне текстового редактора это должна быть одна строка.

ИНТЕРЕСНО:

Если вы обратили внимание, номер месяца на один меньше, чем нужно. Почему? Цифры сообщает JavaScript, a JavaScript считает от нуля, т.е. январь нулевой месяц и так далее. Для правильного счета нужно прибавить 1.

Выполняется это путем введения переменных (var):

1. Присвоить имя команде, которая вызывает время, например, «vremay».

2. Прибавить к ней единицу. Эта новая команда будет называться «vremay1».

Код выглядит так:

<SCRIPT LANGUAGE="javascript">

Now = new Date();

var vremay = Now.getMonth();

var vremay1 = vremay + 1

document.write("Сейчас месяц " + vremay1 + ".");

</SCRIPT>

Если нужно изменить шрифт, следует добавить HTML-код для форматирование текста:

<SCRIPT LANGUAGE="javascript">

Now = new Date();

var vremay = Now.getMonth();

var vremay1 = vremay + 1

document.write("<font color='green'>Сейчас месяц " + vremay1 + ".</font>");

</SCRIPT>

2. Ход работы

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

Фамилия

Имя

Отчество

2. Вывести в окне браузера текущее время в виде: «22 часов 13 минут и 43 секунд». В качестве имени объекта используйте свою фамилию.

3. Повторить пункт 2, но изменить цвет и шрифт выведенного сообщения.

3. Вывести в окне браузера текущую дату в виде: «Текущая дата: 3/5/2013».

3. Содержание отчета

1. Выполнить все пункты задания.

2. Представить коды выполненных операций.

3. Представить результат выполненной работы.

4. Исходные файлы сбросить на сервер \\academy.

4 Задания и вопросы для аттестации

1. Что представляет собой JavaScript?

2. Поясните, что есть объект?

3. В чем заключаются особенности использования двойных и одинарных кавычек?

4. В чем особенность написания строки document?

5. Как выставить пробелы?

6. Почему месяц в JavaScript отображается неверно?

7. Какой есть способ отображения правильной даты?

1 Все коды, рассмотренные в этой и последующих работах тестировались браузерах IE 8 и Mozilla 20.