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


 

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

23805. Задачи на умножение 19.2 KB
  Класс: 2 Тип урока: комбинированный Тема: задачи на умножение; ФОУД: фронтальная индивидуальная Технология: традиционная Дидактическая цель: создать условия для отработки навыка замены действий сложения умножением в решении задач; Задачи: 1.Образовательные: 1 совершенствовать навыки устного счета 2 заменять сумму одинаковых слагаемых умножением; 3 отрабатывать умения решать задачи; 4закреплять правила замены суммы одинаковых слагаемых умножением. вычисление с помощью замены умножения сложением назови компоненты по разному прочитай...
23806. Умножение на 0 и 1 17.79 KB
  Рассмотрите записи которые даны на доске под цифрой 1 какое задание я для вас приготовила Что получится учитель записывает ответы на доске ученики в тетради Рассмотрите записи которые даны на доске под цифрой 2 какое задание я для вас приготовила учитель записывает ответы на доске ученики в тетради Посмотрите на записи под цифрой 3. 53 Прочитайте задание к №1. Прочитайте задание к №4. Прочитайте задание к №5.
23807. Вычитание вида 52 – 24 46.5 KB
  Итак сколько денег подал мальчик Запишем. А сколько стоит открытка Как узнать сколько продавец должен дать сдачи Какое действие нужно сделать Что необычного вы заметили связанного с числами в выражении Как называется такое вычисление Объясните мне устно как удобнее нам будет вычислить 5225; Такая запись длинная и неудобная проще записать это столбиком. Что необходимо найти Что нужно знать чтобы найти сколько домов построили в этом году Мы можем это найти Каким арифметическим действием Составим к задаче чертеж....
23808. Прием письменного вычитания в случаях вида 52-24 42.5 KB
  Цель урока: ознакомление с письменным приёмом вычитания двузначных чисел с переходом через десяток. Степанова Компьютер мультимедийный проектор диск с презентацией урока названия этапов урока фотоаппарат Указка мел доска маркеры Для учеников: Тетрадь. По 2 треугольника из бумаги и ножницы листы самооценки Ход урока Орг.
23809. Вычисление результата умножения с помощью сложения 15.1 KB
  актуализация знаний Ребята если мы с вами выполняли решение заменив сложение умножением как вы думаете можно ли сделать наоборот и вычислить умножение заменив его сложением один ученик выходит к доске чтобы показать как нужно будет оформлять в тетради на доске: 34= записываем ниже и вычисляем: 3333=12 записываем ответ в пример с действием умножение. доске. А сейчас отработаем умение сравнивать: К доске выходит один ученик: 55 53 Докажи не вычисляя. кроме примеров какие еще задание на математике мы выполняем На доске: в...
23810. Конкретный смысл действия умножение 16.83 KB
  Образовательные: 1 совершенствовать навыки устного счета 2 заменять сумму одинаковых слагаемых умножением; 3 отрабатывать умения решать составные задач; 4усвоить правила замены суммы одинаковых слагаемых умножением.Развивающие: 1развивать математическую речь 2развивать мыслительные операции 3развивать смекалку 3. По ˙ раз д. фронтальный опрос разложите числа на одинаковые слагаемые доска: 21=7 18=6.
23811. Конкретный смысл действия умножение 17.5 KB
  Образовательные: 1 совершенствовать навыки устного счета 2 заменять сумму одинаковых слагаемых умножением; 3 отрабатывать умения решать составные задачи 2. Чему равно уменьшаемое два ученика придумывают два своих примера и задают любому из учеников Цель: называние элементов выражения действий к доске 2 ученика остальные в тетради замените сумму умножением: 7777777= 771 ученик 5555=54 2уч 777= 3 уч тут возникает проблема можем ли мы заменить действие вычитание умножением запомните что нельзя. Потому что при...
23812. Конкретный смысл действия умножения 20.26 KB
  Почему цель: сколько раз и по сколько раз взяли число 777 7777 444 444 222 888 Вычисли: выходят два ученика Остальные в тетрадях. 27999= 217777= Сколько раз из 27 вычли 9 из 28 вычли 7 Значит сколько раз по 9 содержится в 27 по 7 в 14 Внимательно слушаем Запиши число 2728 через сумму 9 7. запись: 999=27; 7777=21по 9 три раза Итак внимание Сумму какого числа мы находили Сколько раз мы сложили это число запишем Это обозначает что мы взяли по 9 взяли три раза кто нибудь...
23813. Задачи на умножение 16.86 KB
  Класс: 2 Тип урока: комбинированный Тема: задачи на умножение; ФОУД: фронтальная индивидуальная Технология: традиционная Дидактическая цель: создать условия для отработки навыка замены действий сложения умножением в решении задач; Задачи: 1.Образовательные: 1 совершенствовать навыки устного счета 2 заменять сумму одинаковых слагаемых умножением; 3 отрабатывать умения решать задачи; 4закреплять правила замены суммы одинаковых слагаемых умножением. вычисление с помощью замены умножения сложением замени суммой одинаковых слагаемых: 6=...