- •JavaScript http://shamansir.github.io/JavaScript-Garden/
- •ПЛАН ЛЕКЦИИ:
- •JavaScript
- •Java Апплеты
- •JavaScript- интерпретатор с элементами объектно-
- ••Скрипты могут находиться в любом месте HTML-документа
- •Главная часть
- •Выражения языка JavaScript
- •Оператор сравнения ?
- •Операции присваивания
- •Операции сравнения
- •Логические операции
- •Базовые операторы зыка JS
- •Операторы комментариев и
- •Операторы циклов
- •Пример вывода в окне браузера горизонтальных линий
- •Цикл while
- •Пример вывода таблицы умножения
- •Выход из цикла - оператор break
- •Пример применения оператора break
- •Продолжение цикла - оператор continue
- •Определение функции
- •Возврат значения функциями - оператор return
- •return для возврата массива
- •Обращение к аргументам функции при помощи массива argunents[ ]
- •Условные операторы - if . . . else
- •Пример. Смена цвета фона в зависимости
- •Создание переменных
- •Оператор this
- •Оператор with
- •Оператор with применяется к встроенному объекту Math языка JS
- •Оператор with применительно к объекту document
- •Вывод.
- •Объектная модель языка. Объекты браузера
- •Методы объектов
- •Свойства объектов языка JavaScript
- •Объекты браузеров
- •Объекты, перечисленные в таблице, создаются автоматически при загрузке документа в браузер
- •Для обращения к методам и свойствам объекта window используют следующие варианты записи:
- •Свойства
- •Методы
- •Обработчики событий
- •пример:• Загрузка страницы
- •Объект document
- ••Объект document удобно использовать для динамического создания HTML-документов.
- •Свойства объекта document
- •Методы объекта document
- •Обработчики событий
- ••С помощью JavaScript программ, а в частности при помощи объекта document, можно создавать
- •Объект location
- •Объект location
- •Свойства
- •Методы и обработчики
- •Объект history
- •Объект history
- •Примеры использования
- •Объект navigator
- •Свойства
- •Выводы
- •Внутренние объекты
- •Внутренние объекты не относятся к
- •Объект array
- ••ОбъектОбъектсодержит информациюDateо дате и времени. Этот объект имеет множество методов, предназначенных для получения
- •Методы.
- •Методы.
- •Разберем пару примеров:
- •Разберем еще один пример. Подобный мы уже разбирали, когда рассматривали условные операторы, просто
- •Объект Math
- •Свойства
- •Методы
- •Методы
- •Обработчиков событий нет для внутренних объектов.
- •Строковые объекты
- •Свойства
- •Методы
- •Метод
- ••indexOf(arg1[,arg2]) Возвращает позицию в строке, где впервые встречается символ - arg1, неябязательный числовой
- •Объекты, соответствующие тегам HTML - 1
- •Рассмотрим пример. Напишем простенькую программку и посмотрим, как будут создаваться объекты HTML. Тоесть,
- •Посмотрим эквивалентную запись на
- ••Поскольку документ может включать несколько таких
- •Имя объекта Краткое описание
- •Имя объекта Краткое описание
- •Объекты, которым соответствует массивы, являются
- •Объект anchor и массив anchors
- ••Как вы успели заметить, обычная схема построения гиперсвязей. Значение location задает имя метки.
- ••Значение anchorText задает текст, который будет отображаться на экране в том месте, где
- •Массив anchors
- •Массив anchors
- •Свойства
- •Объект button
- •Атрибут name задает имя кнопки и в языке JS ему соответствует свойство name
- •Свойства
- •Методы и обработчики событий
- •Приведем простой пример, например, выведем текущую дату и время посредством нажатия кнопки. Будем
- •Объект checkbox
- •Простой контрольный переключатель:
- ••где атрибут name является именем объекта checkbox.
- •К объекту checkbox можно обращаться одним из способов:
- ••К любому элементу формы можно обратиться так же, как к элементу массива elements,
- •Свойства• Если контрольный переключатель включен, свойство checked имеет значение true.
- •Методы и обработчики
- •Массив elements
- •Свойства
- •Пример Создадим пару элементов, например поля
- •Теперь рассмотрим текст этой программы:
- ••Здесь функция перебирает все элементы массива elements заданной формы, в данном примере их
- •Объект form и массив forms
- •Синтаксис:
- ••Атрибут name - строка, определяющая имя формы. Атрибут target задает имя окна, в
- ••Атрибут enctype задает тип кодировки MIME (Multimedia Internet Mail Extensions) для посылаемых данных.
- •Использование массива forms
- •Теперь, если в форме имеется, к примеру, поле ввода, определенное в HTML-теге
- ••Значение свойства length соответствует количеству форм в документе:
- •Свойства
- •Методы
- •Обработчики событий
- •Пример. При нажатии кнопки передачи данных
- •Объекты, соответствующие тегам HTML - 2
- •Массив frames
- ••Для обращения к первому фрейму вы можете использовать выражение parent.frames[0], и соответственно ко
- •Свойства
- •Методы и обработчики событий
- •Скрытый объект
- •HTML-тег имеет синтаксис:
- •Атрибут name задает имя поля и является необязательным. Значение текстового поля указывают при
- •Свойства
- •Пример
- •Значение этого поля можно изменить с помощью оператора следующего вида:
- •Объект image и массив images
- •Для начала приведем
- •Для обращения к свойствам объекта image
- •Перед загрузкой рисунка появляется его рамка, внутри которой отображается строка,
- •Методы и обработчики событий.
- •Объект link и массив links
- ••Атрибут href определяет имя файла, или адрес URL для объекта, который загружается при
- •Масив links
- •Свойства
- •Методы и обработчики событий
- •Пример
- •Модифицирование веб-
- •Текстовое содержимое (узлы) представлено как экземпляр объекта Text. Все объекты, представляющие элементы страницы
- ••Структура HTML-страницы часто изображается в виде генеалогического древа, где одни теги включают в
- •Война браузеров
- •Получение доступа к узлам
- •Прямой доступ
- ••Доступ к нашему элементу мы можем получить по строковому индексу, который совпадает с
- •Доступ с помощью свойств и методов
- •Метод getElementById()
- •Атрибут name
- •Свойства и методы объекта HTMLElement
- •Свойство childNodes
- •В нашем примере первым делом получаем доступ к заголовку h1 с уникальным идентификатором
- •Свойство firstChild
- •Свойство lastChild
- •Свойство parentNode
- •Свойство• Указывает на узел, следующийnextSiblingза текущим. Если элемент последний, то возвращает значение null:
- •Свойство previousSibling
- •Метод hasChildNodes
- •Определение• событий
- •Сразу отметим, что существуют разные модели обработки событий.
- •Встроенные javascript события
- •Привязка через свойства объектов
- •Привязка через свойства объектов
- •Привязка обработчика к событию с помощью функции-слушителя
- •Метод removeEventListener объекта
- •Теперь преобразуем наш код и сделаем так, чтобы работало и в Explorer:
- •Объект Event
- •Предположим, что у нас есть элемент DIV, в котором мы поместили абзац со
- •Теперь присвоим обработчик событию щелчка по ссылке, где пропишем, что никуда переходить нам
- ••Если вы сохраняете сценарий в отдельный файл, который прикрепляете к странице между парным
- •Информация о системе и браузере
Операции сравнения
if mvar <h . . . . . .bgcolor- может интерпретироваться как начало заголовка HTML
!Теги HTML в JS программах недопустимы! 11
Логические операции |
|
|||
И |
&& |
|
Эти операции применимы |
|
ИЛИ|| |
|
только к булевым значениям |
||
|
|
|
||
Например: |
|
|
|
|
bvar1 = true; |
bvar1 || bvar2 |
|
||
bvar2 = false; |
bvar1 && bvar2 |
false |
||
|
if ((bvar1 && bvar2) || bvar3) { |
"Активизировать функцию |
||
|
function1(); |
|
||
|
|
function1(), если обе переменные |
||
|
} |
|
bvar1 и bvar2 содержат значения |
|
|
|
true, или хотя бы bvar3 содержит |
||
|
else { |
|
||
|
|
true, иначе вызвать функцию |
||
|
function2(); |
|
||
|
|
function2 " |
|
|
|
} |
|
|
12 |
|
|
|
|
Базовые операторы зыка JS
•Каждый оператор, если он занимает единственную строку, имеет разграничивающую точку с запятой (;), обозначающую окончание оператора.
•Каждый оператор имеет собственный синтаксис.
•Синтаксис оператора - это набор правил, определяющих обязательные и допустимые для использования в данном операторе значения.
•Значения, присутствие которых является необязательным, при описании синтаксиса принято заключать в квадратные скобки, например [value].
При несоблюдении правил синтаксиса произойдет ошибка компиляции.
13
Операторы комментариев и
примечаний
// Текст комментариев /* Текст комментариев */
Первый комментарий может иметь только одну строку, второй несколько.
Комментарии нужны для пояснений или для временного исключения некоторых фрагментов программы во время отладки.
14
Операторы циклов
for ([инициализация начального значения;] [условие;] [механизм обновления счетчика, шаг]) {
программный блок
}
Оператор For позволяет многократно выполнять операторы в JS-программе. Оператор For может быть использован для выполнения одного или нескольких операторов. Фигурные скобки можно опустить, если тело цикла содержит только
один оператор. Все параметры оператора For являются необязательными и используются для управления процессом выполнения цикла. При применении всех параметров каждую часть нужно отделять точкой с запятой (;).
15
Пример вывода в окне браузера горизонтальных линий
<html> |
|
<head> |
|
<script language ="JavaScript"> |
|
<!-- |
|
function testloop() { |
|
var String1 = '<hr align="center" width="' ; |
|
document.open(); |
|
for (var size = 5; size <= 50; size+=5) |
|
document.writeln (String1+ size+'%">'); |
|
document.close(); |
|
} |
|
//--> |
|
</script> |
|
</head> |
|
<body> |
|
<form> |
|
<input type="button" |
|
value="Test the loop" |
|
onClick="testloop()"> |
|
</form> |
|
</body> |
|
</html> |
16 |
|
Цикл while
while (условие) { программный блок
}
При помощи оператора while можно выполнять один или несколько операторов до тех пор, пока не будет удовлетворено условие.
Если в теле цикла выполняется несколько операторов, их необходимо заключить в фигурные скобки.
17
Пример вывода таблицы умножения
<html>
<head>
<script language ="JavaScript">
function ftable(inum) { var iloop = 1;
document.writeln ("ТАБЛИЦА УМНОЖЕНИЯ ДЛЯ: <b>" + inum + "</b><hr><pre>"); /* в параметрах функции writeln применены теги HTML - это допустимо.
while (iloop <= 10) {
document.writeln(iloop + " x "+ inum + " = " + (iloop*inum)); iloop ++;
}
document.writeln("</pre>");
}
ftable(prompt ("Введите число: ", 10)); </script>
</head>
</html>
18
Выход из цикла - оператор break
Оператор break используется для выхода из
какого-либо цикла, например из цикла for или while.
Выполнение цикла прекращается в той точке, в которой размещен этот оператор, а управление передается следующему оператору, находящемуся непосредственно после цикла.
19
Пример применения оператора break
<html>
<script language ="JavaScript"> function btest() {
var index = 1;
while (index <= 10) {
if (index = = 6) break;
index ++;
}
//После отработки оператора break управление переходит сюда.
} |
|
|
|
|
|
btest(); |
Цикл while будет всегда завершаться |
|
|
|
</script> |
после первых шести итераций, а |
|
|
|
</html> |
значение переменной index никогда не |
|
|
|
достигнет 10-ти |
20 |
|
|
|
|
|
||
|
|
|
|