4367

Скриптовой язык программирования JavaScript

Лекция

Информатика, кибернетика и программирование

Скриптовой язык программирования JavaScript Способы функционального применения скриптов 1) гипертекстовая ссылка (схема URL) 2) обработчик события (handler) 3) вставка (элемент SCRIPT). Гипертекстовая ссылка. Применяется в следующих элементах: А...

Русский

2012-11-18

43.5 KB

13 чел.

Скриптовой язык программирования JavaScript

Способы функционального применения скриптов

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'; - загрузка картинки


 

А также другие работы, которые могут Вас заинтересовать

50270. РОЛЬ СПИННОГО МОЗГА В РЕГУЛЯЦИИ ДВИГАТЕЛЬНОЙ ФУНКЦИИ ОРГАНИЗМА 150.22 KB
  Проводниковая функция спинного мозга возникает как функция аппарата двусторонних связей с головным мозгом и базируется на материальной основе белого вещества спинного мозга. При развитии белого вещества дорзальные (задние) канатики выполняют функцию чувствительного проведения, вентральные
50271. Роль среднего и заднего мозга в регуляции опорно-двигательного аппарата 242 KB
  Второй и последующий уровни регуляции работы опорно-двигательного аппарата являются надсегментарными (сравнить с сегментарным уровнем – спинным мозгом – посегментно замыкающиеся дуги спинальных двигательных рефлексов).
50272. РОЛЬ МОЗЖЕЧКА И СТРУКТУР ПЕРЕДНЕГО МОЗГА В РЕГУЛЯЦИИ ДВИГАТЕЛЬНЫХ ФУНКЦИЙ 2 MB
  Зернистый слой состоит из клеток-зерен и клеток Гольджи. Клетки-зерна – единственные возбуждающие нейроны коры мозжечка. Аксоны клеток-зерен уходят к молекулярному слою, образуя там Т-образные разветвления и контактируя с параллельными волокнами.
50273. ФИЗИОЛОГИЯ ПЕРЕДНЕГО МОЗГА И ЕГО УЧАСТИЕ В РЕГУЛЯЦИИ МЫШЕЧНОГО ТОНУСА И ДВИЖЕНИЯ 278 KB
  Стриопаллидарная система – это система, обеспечивающая сложные поведенческие акты, а у человека – и психофизиологические реакции. Стриопаллидарная система является последней подкорковой инстанцией, ближайшей подкоркой, частью конечного мозга, обеспечивающей связи ассоциативной и моторной коры.
50274. ГУМОРАЛЬНАЯ РЕГУЛЯЦИЯ ВИСЦЕРАЛЬНЫХ ФУНКЦИЙ. РОЛЬ ГОРМОНОВ В РЕГУЛЯЦИИ 356.5 KB
  Взаимодействие функций организма как целостной системы достигается за счет деятельности его механизмов регуляции. Нарушение этих механизмов ведет к рассогласованию функций, к дезадаптации организма, т.е. к развитию различных патологических состояний.
50275. РЕГУЛЯЦИЯ ВИСЦЕРАЛЬНЫХ ФУНКЦИЙ ОРГАНИЗМА. ФИЗИОЛОГИЯ АВТОНОМНОЙ НЕРВНОЙ СИСТЕМЫ 104 KB
  Разгружают ЦНС от переработки дополнительной информации; Объективизируют регуляцию внутренних органов, обеспечивают местные механизмы регуляции висцеральных функций (интрамуральный ганглий сердца – цетр кардиокардиальных рефлексов); Надежность регуляции внутренних органов.
50276. ОБЩАЯ ФИЗИОЛОГИЯ СЕНСОРНЫХ СИСТЕМ. ФИЗИОЛОГИЯ АНАЛИЗАТОРОВ 182.5 KB
  ЦНС получает информацию о внешнем мире и внутреннем состоянии организма от специализированных к восприятию раздражений органов рецепции. Многие органы рецепции называют органами чувств потому, что в результате их раздражения и поступления от них импульсов в кору больших полушарий головного мозга
50277. ФИЗИОЛОГИЯ БОЛИ 161.5 KB
  Соматическая: поверхностная (кожа) и глубокая (мышцы, суставы, связки, кости). Висцеральная – во внутренних органах (воспаление, деструкция, дискинезия, нарушение кровоснабжения); Проекционная (фантомная). Отраженная (зоны Захарьина-Геда)
50278. Промежуточный мозг 64.5 KB
  Анатомически промежуточный мозг (diencephalon) является отделом мозгового ствола. Однако, в отличие от среднего и продолговатого мозга, промежуточный мозг в эмбриогенезе формируется вместе с большими полушариями из переднего мозгового пузыря.