4367
Скриптовой язык программирования JavaScript
Лекция
Информатика, кибернетика и программирование
Скриптовой язык программирования JavaScript Способы функционального применения скриптов 1) гипертекстовая ссылка (схема URL) 2) обработчик события (handler) 3) вставка (элемент SCRIPT). Гипертекстовая ссылка. Применяется в следующих элементах: А...
Русский
2012-11-18
43.5 KB
13 чел.
Способы функционального применения скриптов
1) гипертекстовая ссылка (схема URL);
2) обработчик события (handler);
3) вставка (элемент SCRIPT).
Гипертекстовая ссылка. Применяется в следующих элементах: А (атрибут HREF); IMG (атрибут SRC); FORM (атрибут ACTION).
Вместо URL указывается строчка: JavaScript:КОД_ПРОГРАММЫ
<A HREF="JavaScript:alert('Вы нажали на ссылку')">Ссылка</a>
<FORM ACTION="JavaScript:alert('Подтверждение формы');">
<INPUT TYPE=SUBMIT VALUE="Submit"></FORM>
Обработчик события.
JavaScript-код указывается в качестве значения соответствующего атрибута элемента: OnСОБЫТИЕ=«КОД_ПРОГРАММЫ»
<DIV OnMouseOver="alert('ничего нет')">Здесь ничего нет</DIV>
Вставка.
JavaScript-код помещается в элементе SCRIPT. Обычно в заголовке документа HEAD размещают объявления переменных и функций, а в основной части документа код, который участвует в генерации HTML-страницы
<SCRIPT LANGUAGE="JavaScript">alert('вставка');</SCRIPT>
Обращение к объектам осуществляется в соответствии со структурой объектной модели документа:
ОБЪЕКТ_1.ОБЪЕКТ_2. … .ОБЪЕКТ_N
ОБЪЕКТ_1.ОБЪЕКТ_2. … .ОБЪЕКТ_N.СВОЙСТВО1. …. СВОЙСТВОM
ОБЪЕКТ_1.ОБЪЕКТ_2. … .ОБЪЕКТ_N.МЕТОД
<FORM NAME="Fm1"><INPUT NAME="Txt1" SIZE=30></FORM>
Обращение к объекту:
window.document.forms[0].elements[0]
document.forms[0].elements[0]
document.Fm1.Txt1
Fm1.Txt1
Обращение к свойству объекта:
Fm1.Txt1.style.backgroundColor='red';
document.images[0].style.display='none';
Обращение к методу объекта:
Fm1.Txt1.click(); (НЕВЕРНО: Fm1.Txt1.Click();)
Fm1.submit();
Обращение к объектам по идентификационному имени
<div id=n1>Текст</div>
Обращение к объекту:
document.getElementById("n1")
Обращение к свойствам объекта:
document.getElementById("n1").style.backgroundColor='red';
//изменение цвета фона
document.getElementById("n1").style.display='none';
//изменение видимости объекта
document.getElementById("n1").innerHTML='Другой текст';
//изменение HTML-кода, содержащегося в объекте
Типы и структуры данных
-литералы и переменные;
-массивы, функции и объекты.
Литералы
числовой литерал: 42
числовой литерал: 1.432
числовой литерал: 1.432e+2
строковый литерал: 'Это строковый литерал'
строковый литерал: "Это строковый литерал"
Переменные
Определяются при помощи оператора var
var i;
var i=20;
var w=window.open();
Регистр букв имеет значение. Тип переменной определяется контекстом.Узнать тип переменной можно с помощью функции typeof(ИМЯ_ПЕРЕМЕННОЙ). Результат функции строка 'number', 'string' или 'object'.
alert(typeof(i));
Можно сразу задать переменную без оператора var:
i=10;
При определении переменной оператором var ей присваивается значение null:
var i;
if (i==null) { alert('i is null'); } //сообщение появится
i='';
if (i==null) { alert('i is null'); } //сообщение не появится
i=null;
if (i==null) { alert('i is null'); } //сообщение появится
Массивы
Массивы бывают встроенные (document.images[]) и определенные пользователем.
var a = new Array(); //объявление массива
var b = new Array(10); //объявление массива со значениями
var c = new Array(12.32, "какая-то строчка");
alert(c[1]); //появится сообщение "какая-то строчка", нумерация от 0
c[10]='новая строчка';
alert(c.length); //определение количества элементов (11)
Функции
function f_name(arg1,arg2,...)
{
/* function body */
return result;
}
function add(a, b) {
return a+b;
}
alert(add(10,20)); //появится сообщение «30»
Оператор условия if
if (логическое выражение) оператор1;
[else оператор2;]
if (i==null) { alert('i is null'); } else { alert('i is not null'); }
Оператор цикла while
while (логическое выражение) оператор;
var i=1;
while (i<10) { alert(i); i+=2; }
Оператор цикла for
for (инициализация переменных цикла; условие; модификация переменных цикла)
оператор;
for (var i=0; i<10; i++) { alert(i); }
Определение всех свойств объекта
for(v in ОБЪЕКТ)
{ document.write(v+" : "+typeof(v)+" : "+eval("ОБЪЕКТ."+v)+"<br>"); }
На экране для каждого свойства будет выведено его тип и значение.
eval(строчка) аргумент выполняется как код программы;
eval('ale'+'rt("'+'eval'+'");'); //появится сообщение «eval»
Функции для работы с таймером
ПЕРЕМЕННАЯ=setTimeout('КОД_ПРОГРАММЫ', ВРЕМЯ);
Код программы выполнится через указанное время (в милисекундах).
var t=setTimeout('alert("Таймер")', 1000);
Через 1 секунду появится сообщение «Таймер»
Сброс таймера по имени переменной:
clearTimeout(ПЕРЕМЕННАЯ);
setInterval('КОД_ПРОГРАММЫ', ВРЕМЯ);
Код программы будет выполняться периодически с указанным интервалом (в милисекундах).
setInterval('alert("Таймер")', 1000);
Через каждую секунду будет появляться сообщение «Таймер»
Работа с графическими изображениями
document.images[0] первая картинка документа
document.images[0].src='http://aics.ru/img/logo.gif'; - изменение картинки
var img1=new Image; - создание нового объекта-картинки
img1.src='http://aics.ru/img/logo.gif'; - загрузка картинки
А также другие работы, которые могут Вас заинтересовать | |||
60581. | Бинарные признаки интертипных отношений | 85.5 KB | |
Бурными эмоциями проникнуты отношения активации. Эти отношения больше подходят для неформальных контактов чем для деловых. Активаторы со временем перенапрягают друг друга и если не пойти путем разрядки напряженности то отношения закончатся взрывом. | |||
60582. | Интертипные отношения | 79 KB | |
Отношения могут приобрести характер пульсации. Активационные отношения плохо подходят для будней т. Их предназначение общение по праздникам или вообще в свободное время когда нужно отдыхать а не работать Две дуальные диады встречаясь... | |||
60585. | ФУНКЦИОНАЛЬНЫЙ АНАЛИЗ МАЛЫХ ГРУПП | 55.5 KB | |
Эквифинальные группы выполняют следующие роли: установки на род деятельности ставят цель перед соционом кольца ревизии осуществляют координационноуправляющее воздействие темпераментные группы реализуют цели на практике а квадры дают обратную связь корректируя стратегические цели. Маршал координирует действия Администратора и Мастера а Инспектор подводит итоги и корректирует стратегические цели всей управленческой группы. Маршал задает стратегию маневра Советчик доводит ее до повседневной практики Политик координирует их действия а... | |||
60589. | Диагностика зависания и неисправностей компьютера | 2.75 MB | |
Если контакты погнуты аккуратно разогните их; проверьте правильно ли установлена видеоплата и снова включите дисплей а затем ПК; если дисплей работает нормально в течение процедуры самотестирования POST а при загрузке операционной системы Windows... | |||