Главная База знаний "Allbest" Педагогика Разработка методики преподавания факультатива по программированию на языке JavaScript (для старших классов с углубленным изучением информатики)

Разработка методики преподавания факультатива по программированию на языке JavaScript (для старших классов с углубленным изучением информатики)

Психолого-педагогические особенности развития старших школьников и преподавания программирования в старших классах. Тематическое планирование учебного материала. Программа и содержание факультативного курса "Программирование на языке JavaScript".

Рубрика Педагогика
Вид дипломная работа
Язык русский
Дата добавления 27.06.2011
Размер файла 1,0 M

Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже

Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.

Страница:

Логический (булевский) тип данных (boolean). Данные логического типа могут принимать одно из двух значений: true или false. Эти значения записываются без кавычек. Значение true означает истину, значение false - ложь.

Особые типы данных: числа, неопределенные и неопределяемые выражения. К ним относятся числовые значения:

- положительная бесконечность,

- отрицательная бесконечность,

- положительный или отрицательный нуль,

- несуществующее число (not a number - NaN).

Бесконечностью считается значение, превышающее 10308. под несуществующим числом понимается результат бессмысленной математической операции (например, деления на нуль).

Имеются еще два специальных типа данных:

- неопределенный (null),

- неопределяемый (undefined).

Неопределенный тип данных свидетельствует об отсутствии какого бы то ни было значения. Неопределяемый тип данных чаще всего является тем же, что и неопределенный тип данных, или свидетельствует о недочетах сценария.

Метод alert

Данный метод позволяет выводить диалоговое окно с заданным сообщением и кнопкой ОК. Сообщение представляет собой строковый или числовой тип данных, переменную или выражение.

Синтаксис применения метода alert имеет вид:

alert (сообщение);

Пример сценария с использованием метода alert имеет вид:

<html>

<head>

<title>Простая страница</title>

<script language = "JavaScript">

alert("Окно сообщения");

</script>

</head>

</html>

Открыв файл в браузере получим соответствующее окно (рис.1).

Рис.1. Окно предупредительных сообщений, cозданное методом alert в браузере Microsoft Internet Explorer

Метод alert можно использовать для вывода промежуточных и окончательных результатов программ при их отладке. При этом вы можете вывести результат вычисления какого-либо выражения и приостановить дальнейшее выполнение работы программы до тех пор, пока не щелкните на кнопку ОК. При формировании строковых данных для их последующего отображение используются служебные символы: \n - новая строка, \t - табуляция, \f - новая страница, \r - возврат каретки.

Метод confirm

Данный метод позволяет вывести диалоговое окно с сообщением и двумя кнопками - ОК и Отмена (Cancel).

Синтаксис применения метода confirm имеет вид:

сonfirm (сообщение);

Пример сценария с использованием метода confirm имеет вид:

<html>

<head>

<title>Простая страница</title>

<script language=”JavaScript”>

confirm ("Что вы выбираете?");

</script>

</head>

</html>

Открыв файл в браузере получим соответствующее окно (рис.2).

Рис.2. Окно подтверждения, созданное методом confirm в браузере Microsoft Internet Explorer

Данный метод возвращает логическую величину, значение которой зависит от того, на какой из двух кнопок щелкнул пользователь. Если он щелкнул на кнопке ОК, то возвращается значение true; если же он щелкнул на кнопке Отмена, то возвращается значение false. Возвращаемое значение можно обработать в программе и создать эффект интерактивности.

Метод prompt

Данный метод позволяет вывести на экран диалоговое окно с сообщением, а также с текстовым полем, в которое пользователь может ввести данные. В этом окне предусмотрены две кнопки: ОК и Отмена.

Синтаксис применения метода prompt имеет вид:

prompt (сообщение, значение_поля_ввода_данных);

Параметры метода prompt не являются обязательными. Если их не указывать, то будет выведено окно без сообщения, а в поле ввода данных будет выведено значение по умолчанию - undefined. Для того, чтобы не выводилось значение по умолчанию, необходимо поставить в качестве значения второго параметра пустую строку "".

Пример сценария с использованием метода confirm имеет вид:

<html>

<head>

<title>Простая страница</title>

<script language=”JavaScript”>

prompt ("Введите Ваше имя", "");

</script>

</head>

</html>

Открыв файл в браузере получим соответствующее окно (рис.3).

Рис.3. Окно запроса, созданное методом prompt в браузере Microsoft Internet Explorer

Данный метод принимает два параметра: сообщение и значение, которое должно появиться в текстовом поле ввода данных. Если пользователь щелкнет на кнопке ОК, то метод то возвращается значение true; если же он щелкнет на кнопке Отмена, то возвращается значение false. Возвращаемое значение можно обработать в программе и создать эффект интерактивности.

Имена переменных

Переменная - это имя, присваиваемое ячейке памяти компьютера, которая хранит определенные данные во время исполнения сценария, написанного на языке JavaScript. Данные, сохраняемые в переменной, называют значениями этой переменной. Переменная имеет имя - последовательность букв, цифр и символа подчеркивания без пробелов и знаков препинания, начинающаяся обязательно с буквы или символа подчеркивания.

Примеры правильных имен переменных: myFamily, my_adress, _x, tel412.

Примеры неправильных имен переменных: 512group, my adress, tel:412.

Язык JavaScript является регистрозависимым. Это означает, что изменение регистра символов (с прописных на строчные и наоборот) в имени переменной приводит к другой переменной. Например: variable, Variable и variable - различные переменные.

Создание переменных

Создать переменную в сценарии можно следующими способами:

1. С помощью оператора присвоения значений в формате:

имя_переменной = значение

2. С помощью ключевого слова var в формате:

var имя_переменной

В этом случае созданная переменная не имеет никакого значения, но может его получить в дальнейшем с помощью оператора присвоения.

Пример:

var myName

myName = "Иван"

3. С помощью ключевого слова var и оператора присвоения в формате:

var имя_переменной = значение

Пример:

var myName = "Иван"

Строка кода программы с ключевым словом var задает инициализацию переменной и для каждой переменной используется один раз. Тип переменной определяется типом значения, которое она имеет. В отличие от многих других языков программирования, при инициализации переменной не нужно описывать ее тип. Переменная может иметь значения различных типов и неоднократно их изменять.

Одно ключевое слово var можно использовать для инициализации сразу нескольких переменных, как с оператором присвоения, так и без него. При этом переменные и выражения с операторами присвоения разделяются запятыми.

Пример:

var name = "Вася", adress, x = 3.14

Глобальные и локальные переменные

Глобальные переменные - это переменные, объявленные в коде программы на внешнем уровне, т.е. вне определений функции. К глобальным переменным можно обратиться из любого участка кода программы, в том числе и из определений функции.

Локальные переменные - это переменные, определенные внутри тела функции, и они видимы только внутри тела функции. Можно назвать локальную и глобальную переменные одним именем, но они никакого отношения друг к другу иметь не будут.

Пример:

<html>

<head>

<script language = "JavaScript">

var bonus; /* Это глобальная переменная. Она видна во всем файле, а не только в этом блоке.*/

function ShowBonus() {

var sum; // Это локальная переменная, видна только в функции ShowBonus().

bonus = ... // Присвоение значения глобальной переменной.

}

</script>

</head>

<body bgcolor=white text=black>

<script language = "JavaScript">

function CalcBonus() {

var sum; // Это локальная переменная, видна только в функции CalcBonus().

bonus = ... /* Это присвоение значения глобальной переменной. Переменная

видна в этом скриптовом блоке, хотя описана в другом.*/

}

</script>

</body>

</html>

Практическая работа № 1. «Создание сценариев. Ввод и вывод информации в языке JavaScript. Управление данными с помощью переменных»

Упражнения:

1*. Создать шаблон HTML-страницы - текстовый файл, который содержит блок HTML, блок TITLE, блок HEAD, блок SCRIPT, блок BODY.

2*. Напишите сценарий, который позволяет вывести на экран два окна предупредительных сообщений с созданными вами сообщениями.

3*. Напишите сценарий, который позволяет вывести на экран результат следующих вычислений:

х = 5

у = х + 3

4*. Используя готовый сценарий задания № 2, создайте внешний файл .js и подключите его к web-странице.

5*. Напишите сценарий, который позволяет вывести окно подтверждения с созданным вами сообщением. Добавьте к web-странице метод confirm несколько раз и посмотрите, каким будет результат.

6*. Напишите встроенный сценарий, который позволяет вывести на экран окно запросов с созданным вами сообщением. Встроенный сценарий разместить в теге абзаца.

7**. Напишите сценарий, в котором объявляются две переменных, имеющие разный тип данных и на экран выводятся значения переменных.

8*. Найдите ошибки в следующих примерах, ответы сохранить в текстовом файле:

Пример 1:

<html>

<head>

<script language = "JavaScipt">

var msg1 = "Привет!", num1 = 32;

alert(msg11);

alert(num1);

</script>

</head>

</html>

Пример 2:

<html>

<head>

<script language = "JavaScipt">

var msg1 = "Привет!" num1 = 32;

alert(msg1);

alert(num1);

</script>

</head>

</html>

Пример 3:

<html>

<head>

<script language = "JavaScipt">

var 1msg = "Привет!", num 1 = 32;

alert(1msg);

alert(num 1);

</script>

</head>

</html>

9***. Напишите сценарий, который позволяет вывести окно предупредительных сообщений с текстом, введенным в поле ввода окна запросов.

Занятие 3. Использование операторов в языке JavaScript.

Комментарии

Операторы комментария позволяют выделить фрагмент программы, который не обрабатывается интерпретатором, а служит лишь для пояснений содержания программы.

В языке JavaScript допустимы два вида комментария:

1. // - комментарий, располагающийся на одной строке.

2. /*…*/ - комментарий, располагающийся на нескольких строках.

Пример:

1. var х = "Вася" // значение переменной х равно "Вася"

2. x = a /* начальное значение переменной х

в выражении */

Оператор обработки строк

Для обработки строк применяется оператор конкатенации (склеивание), который соединяет две строки, помещая вторую в конец.

Примеры:

х = "Вася" // значение переменной х равно "Вася"

у = "Маша" // значение переменной х равно "Маша"

z = x + " " + y // значение переменной z равно "Вася Маша"

n = "20" + 5 // значение переменной n равно "205"

title = "Java" + "Script" // значение переменной title равно "JavaScript"

Арифметические операторы

Арифметические операторы (Приложение III) в языке JavaScript могут применяться к данным любых типов.

Применяя арифметические операторы к логическим типам данных, интерпретатор переводит логические значения операндов в числовые (true в 1, false в 0), выполняет вычисление и возвращает числовой результат. То же самое происходит, когда один операнд логического типа, а другой - числового типа.

Пример:

true + true // возвращает 2

true + false // возвращает 1

true * true // возвращает 1

true / false // возвращает undefined

true + 5 // возвращает 6

false + 5 // возвращает 5

true * 5 // возвращает 5

true / 5 // возвращает 0.2

Если один операнд строкового типа, а другой - логического, то в случае сложения интерпретатор переводит оба операнда в строковый тип и возвращает строку символов, а в случае других арифметических операторов он переводит оба операнда в числовой тип.

Пример:

"Вася" + true // возвращает "Васяtrue"

"5" + true // возвращает "5true"

"Вася" * true // возвращает NaN

"5" * true // возвращает 5

"5" * false // возвращает 0

"5" / true // возвращает 5

Операторы присвоения

Оператор присвоения обозначается символом "=". Имеются еще пять дополнительных операторов присвоения (Приложение III), сочетающих в себе действия обычного оператора присвоения и арифметических операторов.

Пример:

а = а + 10

а += 10

Оба выражения будут выполнять одинаковые операции, но второе предпочтительнее.

Приоритет операторов:

1. Инкремент (++), декремент (--).

2. Умножение, деление, остаток от деления.

3. Сложение или конкатенация, вычитание.

4. Присваивание.

Операторы сравнения

В программах часто приходится проверять, выполняются какие-либо условия. Проверяемые условия формируются на основе операторов сравнения (Приложение III). Результатом вычисления элементарного выражения, содержащего оператор сравнения и операнды, является логическое значение (true или false). Если условие выполняется, то возвращается true, в противном случае - false.

Сравнить можно числа, строки и логические значения. Сравнение чисел происходит по правилам арифметики, а строк - путем сравнения ASCII - кодов символов, начиная с левого конца строк. Логические значения сравниваются также, как и числа 1 и 0.

Примеры сравнения строк:

"abcd" = = "abc" // возвращает false

"abc" = = "abcd" // возвращает false

"abcd" = = "abcd" // возвращает true

"abcd" = = " abcd" // возвращает false

"abcd" > " abcd" // возвращает true

"abc" < "abcd" // возвращает true

"235ab" < "abcdxyz" // возвращает true

"235xyz" < "abc" // возвращает true

Логические операторы

Логические операторы выполняют три логические операции: «И» (&&), «ИЛИ» (| |), «НЕ» (!), над операндами и возвращают значение true или false (Приложение III).

Оператор отрицания применяется к одному операнду, изменяя его значение на противоположное.

Примеры:

x = false | | 2*2 = = 4 // значение переменной х равно true

x = 5<2 | | "abcd" <= "xy" // значение переменной х равно true

y = !x // значение переменной y равно false

z = x &&y // значение переменной z равно false

z = x | | y // значение переменной z равно true

Приоритет операторов сравнения и логических операторов:

1. Логическое "НЕ" (!), инкремент (++), декремент (--).

2. Больше (>), меньше (<), больше или равно(>=), меньше или равно (<=).

3. Равно (= =), не равно (!=).

4. Логическое "И"(&&).

5. Логическое "ИЛИ" (| |).

Операторы ветвления

Оператор if

Синтаксис записи оператора:

if (условие) {

код 1

}
else {

код 2

}

Фигурные скобки содержат группу операторов. Определенный участок кода, заключенный в фигурные скобки называется блоком и используется для выделения этого участка кода. В операторе ветвления могут и не присутствовать блочные выражения, если участки кода, содержащиеся между if и else, имеют одно выражение.

Пример:

if (x == 1) {

f = 3;

h = 4;

}

else {

f = 33;

h = 44;

}

Пример:

Выводится диалоговое окно с тем или иным сообщением в зависимости от значения переменной age (возраст).

<script language=”JavaScript”>

var age = prompt("Ваш возраст");

if (age<18) {

alert ("Вы слишком молоды для просмотра этого сайта");

}

else {

alert ("Этот сайт для Вас!");

}

</script>

Оператор "?"

Синтаксис записи оператора:

условие? код 1: код 2

Этот оператор возвращает результат кода 1, если условие истинно, в противном случае - результат кода 2.

Пример:

а = (f == 2)? b:c+2;

Если f равно 2 , выражение поместит в переменную a значение переменной b, в противном случае - значение выражения c + 2.

Оператор switch

Для организации проверки большого количества условий используется оператор switch.

Синтаксис записи оператора:

switch (условие) {

case вариант1:

код 1

break;

case вариант2:

код 2

break;

..........

Case

вариант n:

код n

break;

default:

код, исполняемый для других значений

}

Сначала вычисляется условие, указанное в скобках после ключевого слова switch. Полученное значение сравнивается с первым вариантом. Если они не совпадают, то код этого варианта не выполняется и происходит переход к следующему варианту. Если же значения совпали, то выполняется код, соответствующий этому варианту. При этом, если не указан оператор break, то выполняются коды остальных вариантов, пока не встретится оператор break. Если указан оператор default, то следующий за ним код выполняется, если значение условия не соответствует ни одному из вариантов.

Пример:

<script language="JavaScript">

var a = prompt("Введите число");

switch (a) {

case "1":

alert ("Единица");

break;

case "2":

alert ("Двойка");

break;

case "3":

alert ("Тройка");

break;

}

</script>

Здесь, если значение "а" равно единице, то переменной out присваивается значение "единица". Аналогично - для двойки и тройки. Если "а" имеет другое значение, то переменной out присваивается значение "Другое число", при этом оператор default может отсутствовать, в этом случае действия будут производиться только при выполнении условия.

Операторы цикла

Оператор for

Синтаксис записи оператора:

for (начальное выражение; условие; выражение обновления) {
код

}

Оператор цикла работает следующим образом. Сначала выполняется начальное выражение. Затем проверяется условие. Если оно выполнено, то оператор цикла прекращает работу. В противном случае выполняется код, расположенный в теле оператора for. После этого выполняется выражение обновления. Таким образом заканчивается первый цикл. Далее снова проверяется условие, и все повторяется описанным выше способом.

Пример:

Вычислим значение переменной:

<script language="JavaScript">

var b;

for (i = 1; i < 11; i ++) {

b = i*2 + 1;

}

alert(b);

</script>

Оператор while

Синтаксис записи оператора:

while (условие) {

код

}

При выполнении этого оператора сначала производится проверка условия, указанного в заголовке. Если оно выполняется, то выполняется код в теле оператора цикла. В противном случае код не выполняется. При выполнении кода вычислительный процесс возвращается к заголовку, где снова проверяет условие, и т.д.

Оператор while отличается от оператора for тем, что особенность первого оператора заключается в том, что выражение обновления записывается в теле оператора, а не в заголовке.

Пример:

Вывод целых чисел меньших 10.

<script language=”JavaScript”>

var x = 1;

while (x<10) {

x++

alert(x);

}

</script>

Оператор do . . . while

Синтаксис записи оператора:

do {

код

}

while (условие)

В отличие от оператора while в операторе do …while код выполняется хотя бы один раз. Условие проверяется после выполнения кода. Если оно истинно, то снова выполняется код в теле оператора do. В противном случае работа оператора do…while завершается. В операторе while условие проверяется в первую очередь, до выполнения кода в теле. Если при первом обращении к оператору while условие не выполняется, то код не будет выполнен никогда.

Пример:

<script language=”JavaScript”>

var x = 1;

do {

x++

alert(x);

}

while (x<12)

</script>

Практическая работа № 2. «Использование операторов в сценариях»

Упражнения:

1*. Напишите сценарий, который запрашивает ввод числа. Если в поле ввода не вводится число, то выводится окно предупредительных сообщений с сообщением «Вы ничего не ввели!».

2*. Напишите сценарий, который позволяет вывести на экран окно подтверждений и выводит сообщение о том, какая из кнопок была нажата «ОК» или «Отмена».

3*. Вычислить максимальное значение из трех заданных чисел.

4***. Вычислить минимальное значение из трех заданных чисел.

5*. Отсортировать последовательность из четырех чисел.

6*. Определить по номеру месяца название времени года (сначала c использованием оператора if, затем - оператора switch).

7*. Вывести сумму чисел от 1 до 100 (сначала c использованием оператора for, затем - оператора while).

8*. Найти факториал числа 10.

9*. Напишите сценарий, вычисляющий n!.

10**. Найти пятый член последовательности a1 = 2, an = an-12 + 1.

11**. Перевести двоичное число из 8 единиц в десятичную систему.

12*. Найти сумму цифр числа.

13***. Найти произведение цифр числа.

14*. Найти наибольшую цифру числа.

15***. Найти наименьшую цифру числа.

16*. Найти количество троек в числе.

17**. Вывести цифры числа в обратном порядке.

18**. Удвоить каждую цифру числа.

19**. Напишите сценарий, в котором окно запроса будет появляться на экране до тех пор, пока в текстовое поле не введут текст.

Занятие 4. Использование функций в языке JavaScript.

Функция представляет собой подпрограмму, которую можно вызвать из любого места программы, обратившись к ней по уникальному имени. Как правило, в виде функции оформляется часто используемый фрагмент кода программы, который вызывается когда это необходимо.

Объявление функции

Синтаксис записи:

function имя_функции (список аргументов) {

код

}

Имя_функции подчиняется тем же правилам, что и имена переменных.

Список аргументов представляет собой набор переменных, в которые при вызове функции будут помещены нужные аргументы. Имена этих переменных могут быть любыми (но подчиняться правилам имен переменных), потому что они будут использованы только в теле функции, это формальные аргументы функции. Имена аргументов функции помещаются в скобки и разделяются запятыми.

Вызов функции или ее результата

Для вызова функции используется следующий синтаксис:

имя_функции (список фактических аргументов);

Указывается уникальное имя функции, а в скобках перечисляется список фактических аргументов, т.е. аргументов, над которыми необходимо выполнить соответствующие действия. Для возвращения результата из функции в место вызова, полученного при выполнении функции, применяется оператор return.

Синтаксис записи оператора:

return переменная или выражение;

Здесь переменная или выражение - возвращаемое значение переменной или выражения.

Пример:

function samplefunc(a, b) {

var c;

c = (a + b) / 2;

return c;

}

....

var arg1 = 1, arg2 = 2, result;

result = samplefunc(arg1, arg2);

Здесь сначала была объявлена функция samplefunc, которая возвращает значение переменной "c". Затем эта функция была вызвана в коде программы, и ей были переданы два фактических аргумента, т.е. в коде функции место переменных a и b займут значения переменных arg1 и arg2. В этом и состоит разница между формальными и фактическими аргументами.

Функцию можно вызывать в коде другой функции, только перед этим она должна быть создана. Так же можно присвоить функцию переменной и с ее помощью вызывать эту функцию.

Пример:

varfunc = somefunction;

....

a = varfunc(b, c)

При этом переменная varfunc будет иметь тип "function".

Встроенные функции языка JavaScript

В языке JavaScript имеются встроенные функции (Приложение IV), которые реализуются автоматически и которые можно использовать в программах. Эти функции можно вызвать из любого места программы.

Пример использования встроенной функции eval:

var y = 5; // значение у равно 5

var x = "if (y<10) {y = y + 2}" // значение х равно строке символов

eval (x) // значение у равно 7

Рекурсия

Рекурсия - функция, вызывающая сама себя. При каждом применении рекурсии нужно предусматривать условия выхода из нее, ведь без условий выхода, функция будет вызывать сама себя бесконечно. Но для каждого случая условие выхода из цикла вызовов должно быть свое, т.к. не существует стандартного выхода из такой ситуации.

Пример функции вычисления факториала:

function factorial (n){

if (n == 0)

return 1;

else

return (n * factorial (n - 1)); // вызов функции factorial

}

Данная функция вычисляет факториал числа n. Она вызывает сама себя для получения факториала числа n - 1. При этом в коде функции выполняется проверка условия равенства n нулю; если это условие верно, то возвращается 1, и дальнейших вызовов функции не будет.

Класс Function

Этот класс используется для манипуляции функцией как объектом.

Синтаксис записи объектов класса Function:

имя_функции = new Function ("arg1", "arg2", "arg3", ....,"arg n" "код");

Здесь имя_функции - это имя создаваемой функции; arg 1, arg 2, arg 3, arg n - это аргументы функции; код - это тело создаваемой функции.

При этом способ вызова функции, созданной таким методом, аналогичен способу вызова функции, созданной обычным методом.

При такой форме записи создается функция, такая же как и при обычной процедуре создания функций, но данная функция является так же и объектом класса Function, следовательно к ней применимы свойства и методы класса функций (Приложение V) .

Пример:

var Srectangle;

Srectangle = new Function ("width", "height", "var s = width*height; return s");

Srectangle(2, 3); // возвращает 6

Практическая работа № 3. «Использование функций в сценариях»

Упражнения:

1*. Вычислить площадь прямоугольника.

2*. Используя сценарий, созданный в упражнении № 1, сравнить площади двух прямоугольников.

3*. Найти наибольший общий делитель двух заданных натуральных чисел (использовать алгоритм Евклида).

4***. Найти наименьшее общее кратное двух заданных натуральных чисел.

5*. Определить, являются ли два заданных натуральных числа взаимно простыми.

6*. Определить, принадлежит ли заданное число последовательности чисел Фибоначчи.

7*. Найти среднее арифметическое четырех заданных чисел (использовать встроенную функцию).

8**. Перевести заданное число в заданную систему счисления (использовать встроенную функцию).

9**. Найти наибольший общий делитель двух заданных натуральных чисел рекурсивным методом.

10***. Определить число последовательности чисел Фибоначчи с номером n рекурсивным методом.

Занятие 5. Классы объектов языка JavaScript.

Все объекты делятся на классы:

- встроенные классы объектов- объекты, встроенные в JavaScript;

- пользовательские классы объектов - объекты созданные пользователем;

- внешние классы объектов - объекты, образующие DOM (document object model).

а. Встроенные классы объектов

Обращение к свойствам и методам объекта

Встроенные объекты имеют фиксированные названия. Объекты с именами, совпадающими с их фиксированными названиями, называются статическими. Можно создавать экземпляры статических объектов, присвоив им собственные имена. Экземпляры статических объектов являются объектами в программе, которые наследуют от первых все их свойства и методы. Экземпляры объектов - это частные случаи соответствующих статических объектов.

Для обращения к свойствам объекта используют следующий синтаксис:

имя_объекта.имя_свойства;

Здесь имя_объекта - это имя объекта, к которому требуется обратиться, а имя_свойства - это имя свойства, к которому требуется обратиться.

Для обращения к свойству объекта, так же можно использовать и другую форму записи:

obj 3 = 9;

Здесь "obj" - имя переменной, хранящей ссылку на экземпляр объекта, "3" - порядковый номер свойства. В этом примере присвоили свойству с порядковым номером "3", объекта "obj", число 9.

Если неизвестен порядковый номер свойства объекта, то можно воспользоваться следующей формой записи:

obj "propety" = 9;

Здесь "obj" - имя переменной, хранящей ссылку на экземпляр объекта, "propety" - имя свойства. В этом примере присвоили свойству с именем "propety", объекта "obj", число 9.

Для обращения к методам объекта используют следующий синтаксис:

имя_объекта.имя_метода (параметры)

Здесь имя_объекта - это имя объекта, к которому требуется обратиться; имя_метода - это имя метода, к которому требуется обратиться; параметры - это параметры метода.

Разрешается обращаться к свойствам и методам внутренних объектов. Для этого используют следующий синтаксис:

внешний_объект.внутренний_объект.свойство/метод

Здесь внешний_объект - это имя переменной, содержащей ссылку на экземпляр внешнего объекта; внутренний_объект - это имя переменной, содержащей ссылку на экземпляр внутреннего объекта; свойство - это свойство внутреннего объекта; метод - это метод внутреннего объекта.

Создание и удаление объекта

Экземпляр класса создается оператором new, после которого указывается класс создаваемого объекта (objClass), а затем ссылка на созданный объект присваивается переменной (obj).

Синтаксис записи оператора:

имя_переменной = new класс_объекта()

Пример:

var obj;

obj = new objClass();

Запись вида "objClass()" называется конструктором. Конструктор - это функция (или метод объекта), позволяющая присвоить первоначальные значения свойствам объекта.

Пример:

obj = new objClass (param1, param2, x + y, 3);

Здесь значения присваиваются свойствам с учетом их номера, т. е. свойству номер один будет присвоено значение param1 и т.д. Но существует запись, позволяющая присвоить значение конкретному свойству, указав его имя, например:

obj = new objClass (prop1: param1, prop2: param2, prop3: x + y);

Здесь рrop1, рrop2, рrop3 - это имена свойств, а param1, param2 - это значения свойств.

Удаление объекта осуществляет оператор delete.

Синтаксис записи оператора:

delete obj;

Операторы для работы с объектами

Оператор in

Данный оператор предназначен для проверки существования заданного свойства или метода у заданного объекта, и возвращает true или false.

Синтаксис записи оператора:

имя_свойства/метода in имя_объекта;

Здесь имя_свойства/метода - это имя заданного свойства или метода, имя_объекта - имя переменной содержащей ссылку на экземпляр объекта.

Оператор instanceof

Данный оператор проверяет, является ли заданный объект экземпляром заданного класса, и возвращает true или false.

Синтаксис записи оператора:

имя_объекта instanceof имя_класса;

Здесь имя объекта - имя переменной содержащей ссылку на экземпляр объекта, имя_класса - имя заданного класса объекта.

Оператор for . . . in

Данный оператор позволяет просмотреть все свойства заданного объекта и выполнить для заданного объекта какие-либо действия.

Синтаксис записи оператора:

for (счетчик in имя_объекта) {

код

}

Здесь счетчик используется для доступа к значениям свойств объекта; имя_ объекта - это имя переменной содержащей ссылку на экземпляр объекта.

Оператор with

Данный оператор сокращает длину записи выражения если используется один объект, над свойствами или методами которого необходимо провести какие-либо действия.

Синтаксис записи оператора:

with (имя_объекта) {

prop1 = 2;

prop2 = 10;

prop3 = 1;

method1;

}

Здесь имя объекта - это имя переменной содержащей ссылку на экземпляр объекта; prop1, prop2, prop3- это имена свойств; method1 - это имя метода; 2, 10, 1 - присвоенные значения.

Класс Object

Все классы языка JavaScript происходят от класса Object, т.е. все они наследуют его свойства и методы (Приложение IV).

Конструктор класса может принимать числовой, логический или символьный тип данных. Если он пропущен, объект не инициализируется никаким значением.

Класс String

Этот класс служит для объектного представления строк и манипуляции этими строками. Конструктор этого объекта принимает один аргумент, который становится начальным значением строки. Если аргумент не задан, то создается пустая строка.

Синтаксис записи объектов класса String:

имя_переменной = new String ("строковое_значение")

Здесь имя_переменной выполняет роль ссылки на строковый объект. Например, выражение mystring = new String("Привет!") создает строковый объект mystring со значением "Привет!".

Для обращения к свойствам и методам строкового объекта используют следующий синтаксис:

String.свойство

String.метод(параметры)

Пример:

var string;

string = new String ("Строка");

Когда используют слово String в качестве имени объекта, это означает, что нас интересуют свойства и методы класса String (Приложение IV), не связанные со свойствами и методами экземпляра класса String.

Класс Number

С помощью этого класса можно представить числовое значение в виде объекта. Его конструктор принимает одно значение, которое станет начальным значением числа.

Синтаксис записи объектов класса Number:

имя_переменной = new Number (число)

Пример:

var a;

a = new Number (123);

Для обращения к свойствам и методам числового объекта используют следующий синтаксис:

Number.свойство

Number.метод(параметры)

Класс Number имеет свой набор свойств и методов (Приложение IV).

Класс Math

Объект этого класса существует в единственном экземпляре и не требует создания. Свойства и методы этого класса объектов (Приложение IV) представляют набор констант и набор логарифмических и тригонометрических функций.

Пример:

var R = 10; // радиус окружности
circus = 2*R*Math.PI; // длина окружности

Для обращения к свойствам и методам числового объекта используют следующий синтаксис:

Math.свойство

Math.метод(параметры)

Класс Date

Этот класс служит для хранения значений даты и времени. Аргументом конструктора этого класса объектов является значение даты в числовом или строковом формате. Если значение представлено в числовом значении, то оно трактуется как число миллисекунд, прошедших с 1 января 1970 года; если оно представлено в строковом формате - конструктор пытается преобразовать его в значение даты по правилам:

если строка имеет формат:

- "месяц/число/год", "месяц.число.год" или "месяц число год" - преобразуется в дату;

- "часы:минуты:секунды" или "часы:минуты PM" - преобразуется во время;

- остальной текст считается комментарием.

Синтаксис записи объектов класса Date:

имяОбъектаДаты = new Date (параметры)

Пример:

var clock;

clock = new Date (Год, Месяц, Число, Часы, Минуты, Секунды, Миллисекунды);

Для манипуляций с объектом даты применяется множество методов класса Date, при это используется следующий синтаксис:

переменная = имяОбъектаДаты.(метод)

Класс Date имеет свой набор методов (Приложение IV).

Класс Boolean

Логические величины могут быть представлены в виде объектов при помощи класса Boolean. Конструктор этого класса принимает логическое выражение в виде параметра, а если параметр пропущен, то начальное значение равно true.

Синтаксис записи объектов класса Boolean:

имя_переменной = new Boolean (логическое_значение)

Пример:

var bool;

bool = new Boolean (f == g - 1);

Для обращения к свойствам и методам логического объекта используют следующий синтаксис:

Boolean.свойство

Boolean.метод(параметры)

Класс Boolean имеет свой набор свойств и методов (Приложение IV).

b. Пользовательские классы объектов

Создание класса

1. С помощью конструктора new Object():

имя_объекта = new Object();

имя_объекта.свойство = значение;

2. С помощью функции-конструктора.

Для примера рассмотрим создание класса точки. Для создания собственного класса объектов необходимо определить его конструктор, который определяет значения свойств и методы класса, имя которого автоматически становится именем класса.

Определение свойств и методов объекта

Свойства и методы объекта задаются в теле функции-конструктора объекта с помощью операторов присвоения. При этом имена переменных-свойств записываются с ключевым словом this: this.переменная.

Синтаксис записи функции-конструктора объекта:

function Point (x, y, color) {

this.x = x;

this.y = y;

this.color = color;

}

После написания вышеприведенного кода можно создать объект класса Point через обычную процедуру создания объектов, т. е. с помощью оператора new.

Синтаксис записи объекта класса Point:

var somepoint;

somepoint=new Point(100, 50, "black");

Необходимо помнить, что свойства класса могут содержать указатели на функцию. В качестве примера приведен код, определяющий функцию метода, с помощью которой можно будет определять, попадают ли заданные координаты точки в некоторые пределы и который соответственно будет возвращать true или false:

function PointLim () {

if (this.x > 0 && this.x < 400){

return (this.y > 0 && this.y < 200);

}

else return false;

}

Для определения метода в объекте, необходимо переопределить функцию-конструктор объекта:

function Point(x, y, color){

this.x = x;

this.y = y;

this.color = color;

this.PointLim = PointLim;

}

Фактически, последняя строка вышеприведенного кода делает функцию PointLim частью объекта.

Если пользователь не задал значение одного из свойств объектов, то можно при его создании определить значения свойств по умолчанию с помощью логического оператора ИЛИ в функции-конструктора объекта:

function Point (x, y, color){

this.x = x | | 100;

this.y = y | | 50;

this.color = color | | "black";

this.PointLim = PointLim;

}

Таким образом, если значение не задано, то возвращается значение, стоящее справа от логического оператора ИЛИ.

Использование прототипов

Для примера, если мы создадим объект somePoint класса Point, а затем добавим в него новое свойство radius с помощью инициализатора, то это новое свойство будет относиться только к этому объекту, а не ко всему классу Point (т.е. если мы создадим новый объект этого класса, то в нем нельзя будет использовать свойство radius):

var somePoint;

SomePoint = new Point ();

somePoint.radius = 0.5;

Для того, чтобы включить новое свойство в класс объекта, необходимо использовать прототип. Прототип - это своего рода ссылка на класс объекта. У всех классов JavaScript есть свойство prototype, указывающее на их прототип. С помощью прототипа можно изменять классы объектов, добавив им новые свойства и методы.

Синтаксис записи прототипа:

имя_класса.prototype.имя_свойства = значение;

Здесь имя_свойства - имя добавляемого свойства класса объекта.

Код программы будет представлен в следующем виде:

var somePoint;

somePoint = new Point ();

Point.prototype.radius = 0.5;

Данная запись не устанавливает значение по умолчанию для всего класса, а значение свойства radius будет равно 0.5 только для объекта somePoint.

Наследование классов объектов

Наследование классов объектов заключается в том, что новый созданный класс объекта может унаследовать свойства какого-либо другого уже существующего класса объектов, при этом не уничтожая его и имея свои свойства, т.е. в программе можно использовать уже два класса: старый класс (родитель) и класс, унаследовавший свойства и методы родителя.

Рассмотрим создание класса ColoredPoint, который унаследует свойства ранее созданного нами класса Point.

function ColoredPoint (x, y, color, radius, edgeColor) {

this.base = Point;

this.base (x, y, color);

this.radius = radius || 0.5;

this.edgeColor = edgeColor || "red";

}

ColoredPoint.prototype = new Point;

Сначала создается конструктор нового класса, среди свойств которого перечисляются все свойства нового объекта. Далее устанавливается новое свойство base, которому присваивается ссылка на конструктор класса родителя, в приведенном примере это класс Point. Затем вызывается конструктор родителя и ему передаются требуемые параметры, т.е. имена свойств, которые необходимо унаследовать, и только после этого инициализируются новые свойства класса ColoredPoint. Последняя строка кода задает родителя для вновь созданного класса, и помещается вне тела конструктора.

с. Внешние классы объектов

Объектная модель браузера и документа

Браузер разбивает web-страницу в соответствии с определенной иерархией (рис. 4).

Рис. 4. Объектная модель

В языке JavaScript иерархия объектов начинается с класса объектов Window. К этому классу объектов относятся объект window и объект frames. Объект window ассоциируется с окном браузера, а объект frames с окнами внутри окна браузера. Для обращения к любому объекту или его свойству указывают полное или частичное имя этого объекта или свойства объекта, начиная с имени объекта старшего в иерархии, в который данный объект входит.

Пример:

window.document.location

window.document.images[0].src // в квадратных скобках указывается номер элемента

Использование событий

Наступление события может быть вызвано каким-либо действием пользователя или возникновением какого-либо условия внутри системы. В языке JavaScript события можно сравнить с совокупностью свойств и методов. Событие - это свойство, которому присваивается ссылка на функцию, которая выполняется при наступлении определенного действия.

Синтаксис использования события:

имя_объекта.имя_события = имя_функции

Здесь имя_объекта - это объект, для которого происходит событие; имя_события - это имя события, которое используется; имя_функции - это имя функции без скобок "()".

Привязать какую-либо функцию к событию можно и в HTML-коде, используя следующий синтаксис:

<элемент_страницы событие="функция|выражение">

Пример:

window.onload = mouve;

<body onload = "mouve()">

Данные строки кода выполняют одно и то же действие: вызывают функцию mouve при окончании загрузки страницы.

Для каждого объекта объектной модели браузера и документа происходят свои события (Приложение VI).

Порядок событий onmouse

Здесь представлена последовательность выполнения событий.

События мыши, для которых не требуется щелчок любой кнопки мыши, происходят в следующем порядке:

1) onmouseover.

2) оnmousemove.

3) onmouseout.

Cобытия мыши, связанные с нажатием кнопки мыши, происходят в следующем порядке:

1) onmousedown.

2) onmouseup.

3) onclick.

4) ondblclick.

Объект event

Объект event содержит информацию о том, какое событие произошло, какой элемент должен на него реагировать. Например, вместе с событием onclick передаются координаты курсора мыши и номер кнопки, нажатой пользователем. Для того, чтобы сценарий смог получить доступ к этим данным, предусмотрен объект event. Объект event имеет набор свойств (Приложение VI).

Прохождение событий

При выполнении определенного действия, вызванное им событие передается для обработки элементу, над которым совершили действие, а затем его родителю. И каждый объект может по-своему обработать это событие. Другими словами: каждое событие передается вверх по объектной иерархии.

Рассмотрим пример:

<html>

<head>

<title>События 2</title>

<style>

#obj {background-color:gray;

left:20; top:20; position: absolute;

width:200; height:100;}

#pic {left:30; top:30; position:absolute}

</style>

<script>

function picClick() {

window.alert("Рисунок!!!");

}

function objClick() {

window.alert("Элемент страницы!!!");

}

function pageClick() {

window.alert("Страница!!!");

}

</script>

</head>

<body onclick = "pageClick();">

<div id = "obj" onclick = "objClick();">

<img src = "hlplogo.gif" id = "pic" onclick = "picClick();">

</div>

</body>

</html>

Здесь при щелчке на белом фоне появляется одно окно предупреждения для тела документа; при щелчке на сером фоне - два: для тела документа и для элемента страницы; при щелчке на рисунке последовательно появляются три предупреждения: для рисунка, элемента страницы и тела документа. Это происходит как раз из-за того, что событие, которое вызвал щелчок на рисунке, передалось сначала элементу страницы а затем и телу документа, которые так же обработали его и вывели результат.

Для того, чтобы избежать передачи событий по иерархии нужно присвоить свойству cancelBubble объекта event значение true. Чтобы осуществить подобное в вышеприведенном примере, необходимо изменить сценарий следующим образом:

<script>

function picClick(){

window.alert("Рисунок!!!");

window.event.cancelBubble=true;

}
function objClick(){

window.alert("Элемент страницы!!!");

window.event.cancelBubble=true;

}

function pageClick(){

window.alert("Страница!!!");

window.event.cancelBubble=true;

}

</script>

Пример:

Здесь представлен пример реализации движения элемента за курсором мыши.

<html>

<head>

<script>

var timeID, x, y, ix, iy;

function coord(){

x=window.event.clientX;

y=window.event.clientY;

}

function imMove(){

if(x>=ix){

if(x-ix>4)

ix+=4;

else

ix=x;

}

else{

if(ix-x>4)

ix-=4;

else

ix=x;}

if(y>=iy){

if(y-iy>4)

iy+=4;

else

iy=y;

}

else{

if(iy-y>4)

iy-=4;

else

iy=y;}

im.style.pixelLeft=ix-im.style.pixelWidth;

im.style.pixelTop=iy;

}

function setUp(){

timeID=window.setInterval("imMove()", 50);

}

</script>

</head>

<body onload="setUp();" onMouseMove="coord();">

<div style="position:absolute;top:0;left:0;width:20;" id="im">

<h1>M</h1>

</div>

</body>

</html>

Объект window

Объект window позволяет управлять текущим окном и получить доступ ко всем его свойствам, а так же позволяет управлять фреймами, которые могут содержаться в окне. Объект window имеет набор свойств, методов и событий (Приложение VI).

Объект document

Объект document является центральным в иерархической объектной модели и представляет всю информацию о HTML-документе с помощью коллекций и свойств. Он также представляет множество методов и событий для работы с документами (Приложение VI).

Объект location

Объект location содержит информацию об URL-адресе (и его компонентах) текущей страницы, а также методы, позволяющие обновлять страницы (Приложение VI).

Например, если вы загрузили страниц с адресом http://www.piter.com, то значением location.href будет эта строка.

Присваивая свойству href новое значение, мы можем изменять показываемую в браузере страницу, например:

window.location.href = http://www.rambler.ru

Объект history

Объект history содержит информацию об адресах страниц, которые браузер посетил во время текущего сеанса. Мы можем передвигаться по этому списку с помощью сценария и загружать соответствующие страницы. Объект history имеет набор свойств и методов (Приложение VI).

В следующем примере загружается первая страница, а затем загружается пятая страница, причем предварительно проверяется, существует ли она в списке уже посещенных страниц:

window.history.go(1)

if (window.history.length > 4)

window.history.go(5)

Метод history.go(-1) эквивалентен history.back(), а метод window.history.go(1) эквивалентен методу history.forward().

Объект navigator

Объект navigator содержит информацию о производителе браузера, его версии и возможностях. Объект navigator представляет информацию о браузере с помощью коллекций, свойств и методов (Приложение VI).

Практическая работа № 4. «Использование объектов в сценариях»

Упражнения:

1*. Определить существует ли метод write() у объекта document.

2*. Вычислить количество повторений символов в строке.

3*. Вывести все префиксы заданного слова.

4**. Преобразовать символы введенной строки в верхний регистр.

5*. Создать объект класса Number и, применив к нему все методы данного класса, посмотрите, каким будет результат.

6*. Вычислить площадь треугольника (с помощью объекта Math).

7**. Вычислить объем сферы и округлить результат (с помощью объекта Math).

8*. Вывести наибольшее из трех заданных чисел (с помощью объекта Math и оператора with).

9***. Вывести наименьшее из трех заданных чисел (с помощью объекта Math и оператора with).

10**. Вывести случайное целое число, лежащее в промежутке от нуля до ста.

11*. Вывести текущее время в формате чч:мм:сс.

13*. Вывести год, месяц, число и день недели.

14***. Вывести дату и время посещения web-страницы.

15*. Создать класс «Сотрудник», который содержит следующие сведения о сотрудниках фирмы: имя, отдел, телефон, зарплата. Создать два объекта класса «Сотрудник». Добавить свойство «фамилия» первому сотруднику, свойство «отчество» второму сотруднику. Вывести: 1) имя, телефон, фамилию первого сотрудника, 2) отдел, зарплату, отчество второго сотрудника.

16*. Напишите функцию вывода сообщения и осуществите вызов функции с помощью события onload в теге <body>.

17***. Напишите сценарий, который после нажатия клавиши Alt, Ctrl, Shift на клавиатуре выводит соответствующее сообщение о том, какая клавиша была нажата.

18*. Напишите сценарий, в котором после нажатия на соответствующую кнопку осуществляется открытие нового окна, закрытие нового окна ( использовать событие onclick).

19*. Напишите сценарий, в котором после наведения на ссылку появляется текст в строке состояния окна браузера.

20***. Напишите сценарий, который по нажатию соответствующей кнопки осуществляет смену фона web-страницы.

21*. Напишите сценарий, который запрашивает Ваше имя и с помощью метода write() выводит Ваше имя в тексте три раза.

22***. Напишите сценарий, который запрашивает URL-адрес страницы и осуществляется переход на заданную web-страницу.

23*. Напишите сценарий, который реализует гиперссылки «Назад» и «Вперед».

24***. Напишите сценарий, который выводит название браузера.

Занятие 6. Использование массивов в языке JavaScript.

Определение массива

Для определения массива используется следующий синтаксис:

var имя_массива;

имя_массива = [ индекс_элемента1, индекс_элемента2, . . . , индекс элемента n ];

Здесь имя_массива - это имя массива, который мы определяем; индекс_элемента1, индекс_элемента2, . . . , индекс элемента n - это порядковые номера элементов массива, разделяются запятыми. Нумерация элементов массива начинается с нуля, поэтому первый элемент имеет индекс 0, а последний - на единицу меньший, чем длина_массива - количество элементов массива.

Пример:

var massive;

massive = [1, 2, 3, 4];

При этом в записи вида:

massive = [1, 2, ,4];

Третий элемент останется неопределенным, а в записи вида:

massive = [1, 2, 3, 4];

massive[7] = 9;

Будут созданы четыре новых элемента, а восьмой будет равен 9.

Для обращения к элементам массива используется следующий синтаксис:

massive[n];

Здесь massive - имя_массива, n - индекс_элемента.

Класс Array

Массив можно представить в виде объекта, при этом конструктору этого объекта передается один или несколько параметров. Если передается один параметр числового типа, создается массив, содержащий соответствующее количество неопределенных элементов. Если передается несколько параметров или один параметр несовместимого типа, эти параметры используются как элементы массива, при этом несколько параметров перечисляются через запятую. Если параметры не заданы, то создается массив нулевой длины (без элементов).

Синтаксис записи объектов класса Array:

имя_переменной = new Array (параметры)

Доступ к элементам такого массива осуществляется так же, как и к элементам обычного массива.

Пример:

var earth;

earth = new Array ("Планета", "24 часа", 6378, 365.25);

earth[0] = "Планета";

earth[1] = "24 часа";

earth[2] = 6378;

earth[3] = 365.25;

Для обращения к свойствам и методам класса Array используют следующий синтаксис:

Array.свойство

Array.метод(параметры)

Класс Array имеет свой набор свойств и методов (Приложение IV).

Многомерные массивы

Массивы, рассмотренные выше, являются одномерными. Их можно представить в виде таблицы из одного столбца. Однако элементы массива могут содержать данные различных типов, в том числе и объекты, а значит и массивы. Если в качестве элементов некоторого одномерного массива создать массивы, то получится двухмерный массив. Обращение к элементам многомерного массива происходит в соответствии со следующим синтаксисом:

имя_массива [индекс_уровня1] [индекс_уровня2] . . . [индекс_уровняn]

Пример:

Создание массива опций меню.

menu = new Array();

menu[0] = new Array("Меню 1.1", "Меню 1.2", "Меню 1.3");

menu[1] = new Array("Меню 2.1", "Меню 2.2");

menu[2] = new Array("Меню 3.1", "Меню 3.2", "Меню 3.3", "Меню 3.4");

Чтобы обратиться ко 2-ой опции 3-го подменю используется следующий синтаксис:

menu [2] [1] // значение равно "Меню 3.2"

Усложним конструкцию так, чтобы она содержала не только названия опций подменю, но и названия опций главного меню:

menu = new Array();

menu[0] = new Array("Меню 1", "Меню 2", "Меню 3");

menu[1] = new Array();

menu[1][0] = new Array("Меню 1.1", "Меню 1.2", "Меню 1.3");

menu[1][1]= new Array("Меню 2.1", "Меню 2.2");

menu[1][2] = new Array("Меню 3.1", "Меню 3.2", "Меню 3.3", "Меню 3.4");

Примеры обращений к элементам массива:

menu[0][1] // значение равно "Меню 2"

menu[0][2] // значение равно "Меню 3"

menu[1][1][0] // значение равно "Меню 2.1"

menu[1][2][3] // значение равно "Меню 3.2"

Практическая работа № 5. «Использование массивов в сценариях»

Упражнения:

1*. По номеру дня недели вывести его название.

2*. Вычислить сумму всех элементов массива.

3*. Определить максимальный элемент массива (осуществить запрос чисел).

4***. Определить минимальный элемент массива (осуществить запрос чисел).

5**. Осуществить перестановку элементов массива таким образом, что сначала будут располагаться все отрицательные элементы, а затем все положительные.

6**. Объединить два массива с упорядочиванием результата.

Страница:


Подобные документы

Работы в архивах красиво оформлены согласно требованиям ВУЗов и содержат рисунки, диаграммы, формулы и т.д.
PPT, PPTX и PDF-файлы представлены только в архивах.
Рекомендуем скачать работу.

© 2000 — 2023, ООО «Олбест» Все права защищены