lec_6
.pdf
Объекты языка JavaScript
объект Array
Объявляется с помощью конструктора new, создающего новый экземпляр объекта Array
Имя_массива= new Array([элемент0, элемент1, …,элементN]) Имя_массива= new Array([длина_массива])
// объявление без инициализации teachers = new Array();
// инициализация 1-го элемента teachers[0] = 'Ivanov';
// инициализация 2-го элемента teachers[1] = 'Sidorov';
// объявление с инициализацией
days = new Array('Monday', 'Tuesday', 'Wednesday');
Методы объекта Массив
сoncat |
Объединяет два массива в один |
join |
Соединяет все элементы массива в одну строку |
pop |
Удаляет последний элемент и возвращает его значение |
push |
Добавляет один или несколько элементов в конец |
|
массива и возвращает последний добавленный элемент |
reverse |
Переставляет элементы массива в обратном порядке |
slice |
Создает сечение массива в виде нового массива |
splice |
Добавляет и/или удаляет элементы из массива |
sort |
Сортирует элементы массива как строки, без |
|
преобразования в строку |
unshift |
Добавляет один или более элементов в начало массива и |
|
возвращает новую длину массива |
arrl=new Array("1-ый","2-ой","3-ий"); arr2 = new Array("Один","Два","Три");
Элементы массива объединяются в строку |
"1-ый, 2-ой, 3-ий" |
s = arrl.join() |
|
Объединение двух массивов в один и сортировка arr1.concat(arr2).sort()
Элементы массива arrl упорядочены в алфавитном порядке arr1.sort()
Необязательный аргумент метода - имя функции Требования для функции:
два аргумента;
числовой результат;
если первый аргумент считается меньшим (большим, равным) чем второй, то функция возвращает отрицательное (положительное, ноль) значение
Пример 1
<script>
function compar(a,b){ if(a < b) return -1; if(a > b) return 1; if(a == b) return 0;
}
function compar2(a,b){ if(a < b) return 1; if(a > b) return -1; if(a == b) return 0;
}
b = new Array(10,6,300,25,18); document.write("<br/><strong>Алфавитный порядок:</strong><br/>"); document.write(b.sort());
document.write("<br/><strong>Числовой порядок. Возрастание:</strong><br/>"); document.write(b.sort(compar));
document.write("<br/><strong>Числовой порядок. Убывание:</strong><br/>"); document.write(b.sort(compar2));
</script>
</body>
Объект Date
Для представления дат
Создается оператором new с помощью конструктора Date.
Синтаксис:
ИмяОбъекта = new Date([параметры]);
Дата хранится в виде числа миллисекунд, прошедших от 1 января 1970 года
Способы инициализации объекта Date: today = new Date()
Xmas = new Date("November 10, 2014 12:10:00") Xmas = new Date(14, 10, 10)
Xmas = new Date(14, 10, 10, 12, 10, 0)
Методы объекта Date
getFullYear() - возвращает год getMonth()- возвращает месяц (0) getDate()- возвращает день getDay()- возвращает день недели getHours()
getMinutes()
getSeconds()
setYear() устанавливает значение года
Пример2
<script>
Now = new Date();
document.write("<br>Сейчас год " + Now.getFullYear()) document.write("<br>Сейчас месяц " + (Now.getMonth()+1)) document.write("<br>Сейчас день " + Now.getDate()) </script>
Пример3
<body>
<script>
var today = new Date()
var hours = today.getHours() var minute = today.getMinutes()
if (minute < 10) minute = '0'+minute var time12 = hours + ':' + minute
document.write('текущее время - ', time12)
</script>
</body>
Пример4
<head>
<title>Смена фона страницы в зависимости от времени суток!</title> <style>
#tag { background-image:url('m1.gif'); color:#000;
}
#nacht { background-image:url('m2.gif'); color:#fff;
}
h1 { text-align:center; font-size:200%"
}
</style>
<script>
theTime = new Date();
theHour = theTime.getHours(); if(theHour>6&&theHour<15){
document.write('<body id=tag>');
}
else{
document.write('<body id=nacht>');
}
</script>
</head>
<body>
<h1 style=>текст разного цвета отображается на разном фоне</h1> </body>
</html>
Объект String
Можно явно создать строковый объект:
имя_объекта = new String(строка);
Параметром конструктора является любая допустимая строка.
Например:
myString = new String("Строка");
Свойство length - длина строки.
Обращение
P = myString.length
Методы |
Возвращает |
|
|
charAt, |
Символ |
charCodeAt |
код символа |
|
Параметр определяет позицию символа в |
|
строке |
indexOf, lastlndexOf |
Возвращает позицию начала или конца в |
|
строке заданной подстроки |
split |
Преобразует строковый объект в массив |
|
строк, разбивая строку на подстроки |
slice |
Получает сечение строки, заданное началом |
|
и концом |
|
Возвращают подмножество строки, |
|
заданное началом и концом |
substring |
Началом и длиной |
substr |
|
toLowerCase, |
Переводят содержимое строк в верхний или |
toUpperCase |
в нижний регистр |
Пример |
|
Стандартные функции верхнего уровня
parseFloat (строка) анализирует значение переданного ей строкового параметра на соответствие представлению вещественного числа в JavaScript.
Если в строке обнаруживается символ, отличный от символов, применяемых для формирования вещественных литералов (знаки + и -, десятичные цифры, точка и символы (е) или (Е)), то она игнорирует оставшуюся часть строки и возвращает то числовое значение, которое ею обнаружено до неправильного символа.
Если первый символ в строке не является цифрой, она возвращает значение "NaN" (Not a Number — не число).
parseInt(строка, [основание]) пытается возвратить целое число по заданному вторым параметром основанию.
Если первый символ в строке не является цифрой, она также возвращает значение "NaN".
number (объект) - преобразуют объект, заданный в качестве параметра в число.
string (объект) - преобразуют объект, заданный в качестве параметра в строку.
isNaN() - возвращает true, если параметр число; false в противном случае.
Обработчики событий
Возможные события. |
|
|
|
Событие |
Применяются |
Когда |
Обработчик события |
|
к объектам |
происходит |
|
|
|
событие |
|
abort |
image |
Пользователь |
onAbort |
|
|
отказывается от |
|
|
|
загрузки |
|
|
|
изображе-ния |
|
blur |
window все |
Потеря объектом |
onBlur |
|
объекты формы |
фокуса |
|
change |
text, textarea, |
Пользователь |
onChange |
|
select |
изменяет |
|
|
|
значение |
|
|
|
элемента |
|
click |
button, radio, |
Щелчок на |
onclick |
|
checkbox, submit, |
элементе формы |
|
|
reset, link |
или связи |
|
dragdrop |
window |
Пользователь |
onDragDrop |
|
|
перетаскивает |
|
|
|
мышью объект в |
|
|
|
окно браузера |
|
Событие |
Применяются |
Когда происходит |
Обработчик |
|
к объектам |
событие |
события |
error |
image, window |
Загрузка |
onError |
|
|
документа или |
|
|
|
изображения |
|
|
|
вызывает ошибку |
|
load |
тело |
Загружается |
onLoad |
|
документа |
документ в |
|
|
|
браузер |
|
focus |
window и все |
Окно или элемент |
onFocus |
|
объекты |
формы получает |
|
|
формы |
фокус |
|
keydown |
document, |
Пользователь |
onKeyDown |
|
image, link, |
нажимает клавишу |
|
|
textarea |
клавиатуры |
|
keypress |
document, |
Пользователь |
onKeypress |
|
image, link, |
удерживает |
|
|
textarea |
нажатой клавишу |
|
|
|
клавиатуры |
|
keyup |
document, |
Пользователь |
оnКеуUp |
|
image, link, |
отпускает клавишу |
|
|
textarea |
клавиатуры |
|
mouse |
document, |
Пользователь |
onMouseDown |
down |
button, link |
нажимает кнопку |
|
|
|
мыши |
|
mouse |
никакой |
Пользователь |
onMouseMove |
move |
|
перемещает |
|
|
|
курсор мыши |
|
mouseout |
area, link |
Пользователь |
onMouseOut |
|
|
перемещает |
|
|
|
курсор из области |
|
|
|
изображения или |
|
|
|
со связи |
|
mouseover |
link |
Пользователь |
onMouseOver |
|
|
перемещает |
|
|
|
курсор над связью |
|
mouseup |
document, |
Пользователь |
onMouseUp |
|
button, link |
отпускает кнопку |
|
|
|
мыши |
|
move |
window |
Пользователь или |
onMove |
|
|
сценарий |
|
|
|
перемещает окно |
|
Событие |
Применяются |
Когда происходит |
Обработчик |
|
к объектам |
событие |
события |
reset |
form |
Пользователь |
onReset |
|
|
нажимает кнопку |
|
|
|
Reset формы |
|
resize |
window |
Пользователь или |
onResize |
|
|
сценарий изменяет |
|
|
|
размеры окна |
|
select |
text, textarea |
Пользователь |
onSelect |
|
|
выбирает поле |
|
|
|
ввода элемента |
|
|
|
формы |
|
submit |
form |
Пользователь |
onSubmit |
|
|
нажимает кнопку |
|
|
|
Submit формы |
|
unload |
тело |
Пользователь |
onUnload |
|
документа |
закрывает |
|
|
|
документ |
|
Вызов процедуры обработки события
ссылка на процедуру обработки события в соответствующем свойстве объекта;
в параметре обработки события тэга соответствующего элемента.
Объекты ЭУ формы
Объект Text |
|
|
Свойства |
Методы |
События |
default |
blur() |
onBlur |
value |
focus() |
onChange |
form |
select() |
onFocus |
name |
|
|
type |
|
|
value |
|
|
Можно изменять только значение свойства value. Типовые задачи:
защита поля от ввода данных пользователем
реакция на изменение значения поля ввода.
Для защиты поля от ввода в него символов применяют метод blur()
CheckBox, Radio
Метод click – программная эмуляция щелчка мыши
Свойства
сhecked – установлен или нет данный ЭУ;
defaultChecked – ЭУ должен быть данный установлен непосредственно после загрузки формы;
value – содержит текст, посылаемый на сервер, при установке ЭУ
Объект Select
Свойства |
Методы |
События |
Form |
Blur() |
OnBlur |
Length |
Click() |
OnChange |
Name |
Focus() |
OnFocus |
Options[] |
|
|
SelectedIndex |
|
|
Type |
|
|
Объект Option |
|
|
Свойства |
Методы |
События |
DefaultSelected |
Нет |
Нет |
Index |
|
|
Selected |
|
|
Text |
|
|
SelectedIndex |
|
|
Value |
|
|
Конструктор для программного создания объект Option:
opt = new Option([ text, [ value, [ defaultSelected, [ selected ] ] ] ]);
text |
строка текста, которая размещается в теге <li> |
|
(<li>текст); |
value |
значение, которое передается серверу; |
defaultSelected |
альтернатива выбрана по умолчанию |
|
(true/false); |
selected |
альтернатива выбрана (true/false) |
Option не имеет свойства name
Свойство length - количество альтернатив, заданных для поля выбора Свойство selectedIndex - возвращает значение выбранного варианта Использование свойство selected - в случае множественного выбора Иначе
свойство selectedIndex
Кнопки
Передача данных на сервер из формы осуществляется по событию Submit Событие происходит:
•нажата кнопка Submit;
•нажата графическая кнопка;
•нажата клавиша Enter в форме из одного поля;
•вызван метод submit().
Кнопка Submit.
Кнопка Submit – это разновидность поля ввода Генерируется событие submit - передача данных на сервер
Использование сценариев в динамических Wеb-страницах
Динамическое редактирование блочных элементов Web-страницы
С помощью функций можно изменять или возвращать содержимое блочных элементов Web-страницы
innerText
innerHTML
innerText - содержит весь текст блочного элемента
innerHTML - содержит не только текст, но и другие элементы HTML
(элементы форматирования, вложенные блочные элементы) Ввод текста непосредственно на Web-страницу
Пример 1
<body>
<script>
function insert_text() { par.style.color="green";
par.innerText="(Цифровая подпись - это ...) "
}
function del_text() { par.innerText=""
}
</script>
<p> Чтобы добавить
<a href= "javascript:insert_text()">цифровую подпись </a>  <span id=par " onclick="del_text()"> </span>
к документам, передаваемым с вашего компьютера, ....
</p>
</body>
Пример 2
<body>
<script> function f1() {
par1.innerHTML="<li>Статья 1.1</li><li>Статья 1.2</li><li>Статья 1.3</li>"
par2.innerHTML=""
par3.innerHTML=""
};
function f2() { par3.innerHTML="" par1.innerHTML=""
par2.innerHTML="<li>Статья 2.1</li><LI >Статья 2.2</li><li>Статья 2.3</li>"
};
function f3() { par1.innerHTML=""
par2.innerHTML=""
par3.innerHTML="<li>Статья 3.1</li><li>Статья 3.2</li>"
};
</script>
<form>
<p onMouseOver="f1()">Группа 1</p> <ul id=par1 ></ul>
<p onMouseOver="f2()">Группа 2</p> <ul id=par2 ></ul>
<p onMouseOver="f3()">Группа 3</p> <ul id=par3 ></ul>
</form>
</body>
Ввод и редактирование кода HTML с помощью сценариев
Метод write языка JavaScript
Особенности использования:
параметры - строка текста, число или вызов функции JavaScript, возвращающей текстовое или числовое значение
каждый последующий вызов write добавляет текст
можно использовать любые теги
строки текста будут добавляться за элементами Web-страницы, созданными ранее в коде HTML.
write можно применять внутри пользовательских функций обработки событий
Динамическое редактирование Web -страницы
createElement() создание элементов Web-страниц document.createElement('p')
document.createElement('table')
document.createElement('td')
и т.д.
appendChild() - добавление этого элемента на Web-страницу.
Пример 6
<body>
<div id='div1'></div>