ОСНОВНЫЕ ВОЗМОЖНОСТИ JAVASCRIPT

4.1 Цель работы

Изучение способов динамического управления элементами Web-страниц с помощью организации свойств и методов объектов JavaScript.

4.2 Указания к организации самостоятельной работы студентов

Во время выполнения работы необходимо ознакомится с литературой [1 – 3], материалами конспекта лекций и информацией, приведенной в подразделе 4.4.

4.3 Описание программного продукта, используемого для выполнения лабораторной работы

Для выполнения лабораторной работы используется ПЭВМ, операционная система Windows 2007, Web-браузер Internet Explorer / Opera / Google Chrome, текстовый редактор.

4.4 Порядок выполнения работы и указания к ее выполнению

4.4.1 Рассмотрим некоторые основные теоретические положения, необходимые для выполнения данной лабораторной работы

JavaScript – это язык сценариев (scripting language), который может применяться в файлах Web-страниц наряду с HTML, например, для придания Web-страницам свойств диалоговых окон. Эти интерактивные возможности позволяют разработчику динамически управлять элементами Web-страниц. JavaScript можно также применять для изменения элементов Web-страницы при взаимодействии с ней пользователя. Например, можно предусмотреть, чтобы текст, отображаемый в текстовом поле формы, изменялся, когда пользователь щелкает на кнопке. Сценарий JavaScript может выполняться в браузере без каких-либо дополнительных программ.

Классификация объектных моделей JavaScript (рис. 4.1).

Рисунок 4.1 – Классификация объектов JavaScript

1) Объект document – это документ HTML, загруженный в окно браузера. Он содержит в себе объекты, свойства и методы, предназначенные для работы с элементами этого документа HTML, а также для взаимодействия с другими объектами.

Объект document содержит следующие методы:

1 clear() – для очистки текущего документа из окна браузера.

2 close() – заставляет Web-страницу немедленно обновить свое содержимое после использования методов write.

3 write() – записывает текст или HTML-код, переданный как параметр, в текущее место документа.

4 writeLn() – то же самое, что write, но в конце добавляет символ возврата каретки и перевода строки.

Также еще есть (createAttribute(), setAttributeNode, createElement(), elementFromPoint(), getElementById(), getSelection()).)

Кроме методов объекты обладают еще и свойствами. В чем отличие метода от свойства? Свойство (возвращает информацию - это для того, чтобы узнать информацию о каком-то свойстве), а метод (позволяет что-то сделать). Например: Кот Анна. Возраст // Возраст – это свойство.

Или, например: Светофор. Изменить цвет (красный) // Изменить цвет – метод; красный – свойство.

Рассмотрим пример использования метода write (рис. 4.2, а).

document.write("<p>Выведем текст с помощью <strong>JavaScript"</strong></p>");

</SCRIPT>

<p> – строка стала параграфом (перед строкой появляется верхний отступ), <strong> – слово JavaScript будет выделено жирным шрифтом.

а) б)

Рисунок 4.2 – Окно браузера с выведенным текстом

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

Например, document.write("<p>Выведем текст с помощью <strong>\"JavaScript\"</strong></p>"); - это правильная запись.

document.write("<p>Выведем текст с помощью <strong>"JavaScript"</strong></p>"); - это неправильная запись, так как " означает конец предложения, поэтому "</strong></p> уже невиден обработчику кода, а, значит, выведется ошибка (теги <p> и <strong> - это парные теги).

Внимание! Не путать \ (обратный слешь) и /.

Для того, чтобы в тексте кода написать комментарий нужно поставить //, а если комментарий многострочный, то

/*……………..

……………..*/

2) Объект location содержит информацию о местонахождении текущего документа, т.е. его интернет-адрес. Его также можно использовать для перехода на другой документ и перезагрузки текущего документа.

Объект location содержит следующие методы:

1 assign({Адрес}) - загружает документ, адрес которого передан в качестве параметра.

2 reload([true|false]) - перезагружает документ с Web-сервера. Необязательный параметр нужен только для NN: значение true заставляет Web-обозреватель перезагрузить документ с жесткого диска, где он был сохранен ранее, а false (значение по умолчанию) - прямо с Web-сервера.

3 replace({Адрес}) - загружает документ, адерс которого передан в качестве параметра, и заменяет в списке истории Web-обозревателя адрес предыдущего документа адресом нового.

3) Объект style поддерживает ряд свойств и методов. Их можно разделить на две группы: задающие стиль документа и относящиеся к самому объекту style.

4) Объект screen служит для доступа к характеристикам видеосистемы компьютера клиента.

5) Объект navigator служит для доступа к самой программе Web-обозревателя. Не путайте его с объектом window, представляющем текущее окно Web-обозревателя, и названием программы Netscape Navigator.

6) Объект window представляет текущее окно Web-обозревателя или отдельный фрейм, если окно разделено на фреймы (рис. 4.3). Примеры использования методов этого объекта рассмотрим позже.

7) Объект layer - доступ к слоям.

8) Объект history представляет интерфейс к списку истории Web-обозревателя, т.е. списку всех Web-страниц, просмотренных пользователем в течение времени, указанного в настройках.

На рисунке 4.3 схематически показана иерархия объектов браузера.

Рисунок 4.3 – Иерархия объекта window

Рассмотрим описание переменных в JavaScript.

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

Переменная – символ или слово, обозначающее некоторое значение.

Рисунок 4.4 – Структура имени переменной

Объявление переменной.

Так как одна и та же переменная может содержать значения различных типов, то при её объявлении тип данных не указывается. Объявление переменной осуществляется при помощи ключевого слова var.

Например, объявим переменную а.

var a;

При помощи одного оператора var можно объявить несколько переменных.

var a, b, c;

Часто объявление переменной совмещают с присвоением ей значения (инициализацией)

var a = 10;

var a = 1, b = 2, c = 3;

Пример 1. Есть переменная a, в начале ее нужно объявить, затем присвоить ей значение 500.

var priсe;

priсe=500;

</SCRIPT>

То есть, присваиваем priсe значение 500, знак равно означает не равно, а присвоить.

Пример 2. Необходимо присвоить переменной текстовое значение Иван и вывести его на экран.

var name = "Иван";

document.write (name); // Выводит на экран

</SCRIPT>

Где "" – означают, что внутри текст.

Правила для имен переменных:

1. Имена переменных могут начинаться с буквы либо со знака $, либо с подчеркивания _. С других символов имя переменной начинаться не может.

2. Имена переменных могут содержать только буквы либо знак $, либо подчеркивание _, но не могут: тире, пробел, знак амперсанта и т.д.

Например.

var my_lesson; // это правильно

varmy-lesson или mylesson // это неправильно так, как в первом есть знак - , а во втором есть пробел в имени.

3. Имя переменной чувствительно к регистру.

Например, Kharkov и kHarkov – это две разные переменные, если в начале указали Kharkov, то дальше в программе нужно обращаться только к Kharkov.

4. Нельзя называть переменную одним из занятых слов (это список зарезервированных слов, которые используются в самом языке программирования, например, function, short, public, null, newи т.д.).

Работа со строками.

Пример 3. Сложение / слияние строковых переменных (рис. 4.5, а и б).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Лаба по JavaScript</title>

</head>

var fam = "Cотник", name = "Лана", otch = "Викторовна";

var fio = fam + name + otch;

document.write(fio);

</Script>

<body>

</body>

</html>

а) б)

Рисунок 4.5 – Пример вывода строковых переменных на экран

На рис. 4.5, а все слова написаны без пробелов между ними, если нужно, чтобы слова были разделены пробелом (рис. 4.5, б), тогда

var fio = fam +” ” + name +” ” + otch;

Пример 4. Добавить к ФИО адрес: пр. Ленина 14 (сложить строки и числа) и вывести на экран (рис. 4.6).

var fam = "Cотник", name = "Лана", otch = "Викторовна";

var fio = fam + " " + name + " " + otch;

document.write(fio);

var myWork = "пр.Ленина", myNumerHouse = 14, myAdress

myAdress = " " + myWork + " " + myNumerHouse;

document.write(myAdress);

</Script>

<body>

</body>

Рисунок 4.6 – Пример вывода на экран строковых и числовых значений переменных

Пример 5. Определить общую сумму заказа яблок (40 яблок по 30 коп.)

var appleCount = 40, priceApple = 30, totalSum;

totalSum = appleCount * priceApple;

document.write(totalSum);

</SCRIPT>

Рассмотрим изменение значений переменных (например, увеличить/уменьшить).

Пример, необходимо увеличить значение переменной а на 16 при этом а=36.

var a = 36;

a = a + 16;

document.write(a);

</Script>

Рисунок 4.7 – Пример вывода числовых значений

a = a + 16; // Всегда сначала считается правая часть выражения, а потом левая, то есть 36+16, а значит а=52.

a = a + 16; можно записать сокращенно, например, а+=16; (то есть, нужно добавить значение 16 к переменной а). Точно также, если нужно уменьшить значение, тогда пишется знак -.

Если необходимо увеличить значение переменной на 1, то пишется а++; Если уменьшить на 1, то а--;.

Работа с текстом и переменными.

Пример 6. Вывести на экран (рис. 4.8) следующий текст: Вы студенты 4 курса, дневной формы обучения. Сейчас у вас 7 семестp. Который будет включать переменные: vidOb = ‘дневной’, kurs = 4, sem = 7.

var vidOb = "дневной", kurs = 4, sem = 7;

document.write("<p> Вы студенты " + kurs + "курса." + vidOb + " формы обучения. Сейчас у вас " + sem + " семестp.</p>");

Рисунок 4.8 – Пример вывода на экран текста и переменных

Циклы в JavaScript. Любой цикл можно разделить на 4 части - инициализацию, тело, итерацию и условие завершения. В Java есть три циклические конструкции: while (с предусловием), do-while (с постусловием) и for (с параметром). Счётчики в циклах обычно обозначают одной буквой, обычно это i. Синтаксис циклов, например, while:

[ инициализация; ]

while ( завершение ) {

тело;

[итерация;] }

Инициализация и итерация необязательны.

Пример 7. Необходимо, чтобы выполнялось условие: счетчик должен быть меньше или равен 10 (рис. 4.9).

var i = 1;

while(i<= 10) {

document.write(i + "<br />");

i=i + 1; // Либо i++

}

Рисунок 4.9 – Пример выполнения цикла

document.write(i + "<br />"); - выводим счетчик на экран и добавляем перенос строки, чтобы каждое число выводилось с новой строки;

i + "<br/>” – это потому, что счетчик соединяем со строкой (поэтому ставим ""), а <br> - разрыв строки.

Подробнее о методах объектов Window. Объект Window – это окно браузера.

Рассмотрим метод Open – позволяет генерировать новое окно:

window.open ()

Может принимать 3 параметра: window.open ("","Модальное окно", "weigth = 400, height = 300"), где 1 – это какую страничку будем загружать в документ, 2 – название окна, 3 – различные опции окна.

Создание модального окна. Модальным называется окно, которое блокирует работу пользователя с родительским приложением до тех пор, пока пользователь это окно не закроет.

Пример 8. Создать новое модальное окно (рис. 4.10) с размерами ширина 400рх, высота 300рх.

window.alert("Новое окно"); или

var newWin = window.open(" "," Модальное окно","width=400, height=300"); // Задаем размеры окна

newWin.document.write("Модальное окно");

Рисунок 4.10 – Новое модальное окно

В примере 8 использован метод window.open() .

Синтаксис: open({Адрес}, {Имя окна}, [{Список свойств окна, разделенных запятыми}])

Открывает новое окно Web-обозревателя, загружает в него документ, адрес которого передан в первом параметре, и присваивает окну имя, переданное во втором параметре.

В третьем параметре может быть передан список свойств окна.

Использование методов prompt и confirm.

Метод prompt – содержит поле для ввода текста и позволяет спросить у пользователя какую-то информацию (рис. 4.11, а). Пример записи: prompt("Вы студент?");

а) б)

в) г)

Рисунок 4.11 – Пример модального окна с вопросом

Пример 9. Вывести модальное окно с любым вопросом, чтобы в поле для ответа высвечивался ответ по умолчанию.

var XNURE = prompt("Вы студент?"); /* Все, что будет введено в поле пользователем, будет помещено в переменную XNURE*/

Для того, чтобы в окне высвечивался ответ по умолчанию (рис. 4.11, б)

var XNURE = prompt("Вы студент?", "Студент"); /* Второй параметр "Студент" будет выведен в поле автоматически. В переменную XNURE помещается то, слово, которое вводиться в строку и будет отображаться во втором модальном окне*/

alert("Мой ответ" + XNURE); // Выводит в новом модальном окне

Пользователь может оставить значение – студент в поле для ввода ответа, иначе, необходимо ввести свой вариант ответа, например, нет (рис. 4.11, в), тогда ответ будет помещен в 2-ое модальное окно (рис. 4.11, г).

Метод confirm. Выводит на экран окно предупреждения с текстом, переданным в качестве параметра, предлагающее пользователю сделать выбор. Если пользователь нажмет Ок, возвращается true, если Отмена - false. Например, confirm ("Вы работаете в ХИРЭ?");

Пример 10. Вывести новое окно с любым вопросом (рис. 4.12, а), на который можно ответить да либо нет, при этом, если нажать на кнопку «Ок» в родительском окне будет выведена одна фраза-заключение (рис. 4.12, б), а при нажатии на «Отмена» - другая (рис. 4.12, в).

var answer = confirm ("Вы работаете в ХИРЭ?");

if (answer) {

document.write("Допустим работаю");}

else {

document.write("Значит Вы студент");

}

</Script>

а) б) в)

Рисунок 4.12 – Пример использования метода confirm

var answer = confirm ("Вы работаете в ХИРЭ?"); /* помещается в переменную answer тот вариант ответа, который, методом нажатия выберет пользователь.

Метод confirm работает так, что по умолчанию, если выполняется условие, то возвращается значение true, а если нет, то false, то есть при нажатии «Ок», значение true и т.д.*/

В примере 10 использовался оператор условия If.

Синтаксис у него следующий:

if B {S1} else {S2}

где B - выражение логического типа, а S1 и S2 - операторы. Работает это так: вычисляется значение выражения B, если оно истинно, то выполняется оператор S1, если оно ложно, то выполняется оператор S2. Строку else {S2} можно опустить.

Пример 11. Вывести запрос сколько лет пользователю, какой сейчас год и вывести в цикле информацию о том, сколько ему лет было за прошлые года, каждый год с новой строки (рис. 4.13).

var age = prompt ("Сколько сейчас Вам лет ");

var year = prompt ("Какой сейчас год?");

while(age > 0) {

document.write ("<br>" + "В " + year + "Вам было" +" " + age + "лет" + "<br />");

age--; // Либо age = age - 1; То есть, уменьшение возраста на 1, если age > 0.

year--; // Либо year = year - 1; То есть, уменьшение года на 1, если age > 0.

}

Рисунок 4.13 – Пример выполнения цикла

Рассмотрим функции function в JavaScript.

Пример 12. Есть функция, в качестве переменных - два числа. Необходимо узнать сумму этих двух чисел. Результат вывести на экран рис. 4.14.

function summa (number1, number2) {

var itog = number1 + number2;

document.write ("<br>" + "Cумма двух переданных чисел:" + itog);

}

summa (30, 58);

Рисунок 4.14 – Пример выполнения функции сложения двух

числовых значений

Рассмотрим слои в JavaScript.

Пример 13. Вывести на экран 3 ссылки на слои. При нажатии на первую ссылку появляется слой 1 с текстом, при нажатии на 2-ую ссылку – слой 2 и т.д. При условии, что все слои будут отображаться на 20 рх от родительского слоя и 160 рх от левого края родительского слоя, и место не пропускается для слоя 2 и 3 (рис. 4.15, а, б).

<HTML>

<HEAD>

div {

position: absolute;

top: 20; //

left: 160;

visibility: hidden;

}

</STYLE>

<!--

function show(d)

{

div1.style.visibility='hidden';

div2.style.visibility='hidden';

div3.style.visibility='hidden';

d.style.visibility='visible';

}

//-->

</SCRIPT>

</HEAD>

<BODY>

<a href="javascript:void(0)" onClick="show(div1);">показать слой 1</a><br>

<a href="javascript:void(0)" onClick="show(div2);">показать слой 2</a><br>

<a href="javascript:void(0)" onClick="show(div3);">показать слой 3</a><br>

<h3>Слой номер один</h3>

Некоторый текст, на слое расположенный. Его можно скрыть и показать. Текст может содержать несколько строк.

</div>

<h3>Слой номер два</h3>

Содержит свой текст. Если показывается, то текст на других слоях не виден.

</div>

<h3>Слой номер три</h3>

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

</div>

</BODY>

</HTML>

<6 7 8 91011 12 >

Дата добавления: 2015-03-14; просмотров: 1023;