4367

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

Лекция

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

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

Русский

2012-11-18

43.5 KB

12 чел.

Скриптовой язык программирования 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'; - загрузка картинки


 

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

17390. СОЦИОЛОГИЯ ЭМИЛЯ ДЮРКГЕЙМА 172.5 KB
  Лекция шестаяСОЦИОЛОГИЯ ЭМИЛЯ ДЮРКГЕЙМА Содержание Жизненный путь ученого Интеллектуальные истоки дюркгеймовской социологии Социологизм как философское обоснование социологии В поисках социальной солидарности: от теории разделения труда к теории ...
17391. СОЦИОЛОГИЯ ВИЛЬФРЕДО ПАРЕТО 130.5 KB
  Лекция седьмаяСОЦИОЛОГИЯ ВИЛЬФРЕДО ПАРЕТО Содержание Жизнь и научная деятельность Идейные истоки и особенности мировоззрения Социология как логикоэкспериментальная наука Логические и нелогические действия Осадки и производные Общество как система в
17392. Линия. Пространственные кривые лини 93 KB
  Линия. Пространственные кривые лини В начертательной геометрии кривую линию часто рассматривают как траекторию описанную движущейся точкой. Кривая линия может быть плоской или пространственной. Все точки плоской кривой принадлежат некоторой плоскости. Крив...
17393. Взаимное положение прямых в пространстве 60.5 KB
  Взаимное положение прямых в пространстве. Рассмотрим взаимное положение прямых в пространстве : параллельные прямые пересекающиеся и скрещивающиеся. Параллельные прямые. Параллельные прямые это прямые лежащие в одной плоскости и никогда ...
17394. Плоскость, линии и точки в плоскости 73.5 KB
  Плоскость линии и точки в плоскости. Проецирование элементов определяющих плоскость. При ортогональном проецировании любая плоскость может быть задана на чертеже проекциями трех точек не лежащих на одной прямой ; проекциями прямой и точки не лежащей на данно...
17395. ВЗАИМНОЕ ПОЛОЖЕНИЕ ПРЯМЫХ И ПЛОСКОСТЕЙ 64.5 KB
  ВЗАИМНОЕ ПОЛОЖЕНИЕ ПРЯМЫХ И ПЛОСКОСТЕЙ Прямая параллельная плоскости. Если прямая АВ параллельна прямой лежащей в некоторой плоскости то она параллельна этой плоскости. Если необходимо через заданную точку провести прямую параллельную заданной плоскости необ
17396. ПОВЕРХНОСТИ И ТЕЛА 70.5 KB
  ПОВЕРХНОСТИ И ТЕЛА Все поверхности можно подразделить на графические закон образования которых нам не известен и примером такой поверхности может быть топографическая поверхность Земли и геометрические закон которых известен. Часть пространства ограниченная
17397. ПОВЕРХНОСТИ И ТЕЛА. Циклические поверхности 74.5 KB
  ПОВЕРХНОСТИ И ТЕЛА Циклические поверхности Циклические поверхности могут быть образованы движением в пространстве какой либо окружности постоянного или переменного радиуса при перемещении ее центра по криволинейной направляющей а плоскость окружности ост
17398. Винтовые поверхности 53 KB
  Винтовые поверхности. Винтовой поверхностью называется поверхность которая описывается образующей при ее винтовом движении. Образующие могут быть как кривыми так и прямыми линиями. Прямые линии обычно называются винтовыми параллелями. Расстояние между винтов