Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
метод_лаб_вэб.doc
Скачиваний:
53
Добавлен:
17.04.2019
Размер:
1.71 Mб
Скачать

Лабораторная работа №8 Основы синтаксиса JavaScript

1. Цель Изучить основы синтаксиса и научиться использовать клиентский язык программирования JavaScript

2. Методические указания

  1. При изучении конструкций языка JavaScript можно использовать любой текстовый редактор. Для получения JavaScript файла, сохраняйте свои изменения как текстовые, для файла используйте расширение *.js, если вы встраиваете скрипт в HTML файл, то сохраняйте свои изменения как текстовые, для файла используйте расширение *.htm или *.html

  2. Более опытные пользователи могут воспользоваться любым специализированным редактором HTML страниц или JavaScript редактором (Macromedia Dreamweaver, HomeSite, FrontPage, AceHTML, Web Development Studio)

  3. Создаваемые файлы необходимо тестировать в основных браузерах Internet Explorer, Mazilla Firefox, Opera.

  4. Отлаженные файлы необходимо сохранять в отдельном каталоге.

  5. По окончанию работы сохраните все созданные файлы на своих носителях.

4. Теоретические сведения

JavaScript - предназначен для написания сценариев для активных HTML-страниц. Язык JavaScript не имеет никакого отношения к языку Java. Java разработан фирмой SUN. JavaScript – фирмой Netscape Communication Corporation. Первоначальное название – LiveScript. После завоевания языком Java всемирной известности LiveScript из коммерческих соображений переименовали в JavaScript.

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

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

Тег <SCRIPT>

Сценарий JavaScript встраивается в HTML-документ с помощью тега <SCRIPT>.

Пример

<HTML>

<HEAD>

<meta http-equiv=Content-Type content="text/html; charset=windows-1251">

</HEAD>

<BODY>

<H1>Начнем?</H1>

<SCRIPT TYPE="text/javascript">

<!--

document.write('Привет!');

//-->

</SCRIPT>

</BODY>

</HTML>

Текст сценария оформляется как комментарий, чтобы не было проблем у посетителей, брaузеры которых не понимают JavaScript. Кроме того к символам, завершающим комментарий добавляется еще два символа “/”, т.к. некоторые браузеры, рассматривает строку, состоящую только из символов “-->”, как ошибочную.

В первом примере для объекта с именем document вызывается метод write. В качестве параметра ему передается текстовая строка “Привет!”. Строка закрывается символом “;”, которым отделяются друг от друга все операторы JavaScript.

Объект document – это HTML-документ, загруженный в окно брaузера. Метод write записывает в тело HTML-документа строку “Привет!”. При этом документ будет выгдядеть так, как будто эта строка находится в нем на месте сценария.

Имейте в виду, что JavaScript различает строчные и прописные буквы. Кроме того символ дефиса в JavaScript распознается как минус, т.е. если фон объекта в HTML-документе задается через свойство background-color, то в JavaScript - через backgroundColor.

Пример

< img src="test.gif" border=0

OnMouseOver="this.style.backgroundColor='red';" OnMouseOut="this.style.backgroundColor='white';">

Переменные в JavaScript

Имя переменной не должно совпадать с зарезервированными ключевыми словами JavaScript.

Все переменные в JavaScript объявляются с помощью ключевого слова var. При объявлении тип переменной не указывается. Этот тип присваивается переменной только тогда, когда ей присваивается какое-либо значение.

Числа в строки интерпретатор JavaScript преобразует автоматически.

Существует три простых типа данных: численные, логические (булевы) и строковые (символьные), а также два состовных типа данных: объекты и массивы.

Условные операторы

В языке JavaScript оператор IF-ELSE имеет следующий синтаксис:

Var Vol = 0;

Var b = false;

if(Vol<2)

{

  b=true;

}

else if(Vol>100)

{

  b=true;

}

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

В языке JavaScript три оператора цикла: for, for-in, while.

Пример оператора FOR

Var n = 20;

for(var i=0; i<n; i++)

{

  Text += ' ';

}

Пример оператора FOR-IN

var sprops=’<H2>Свойства объекта window</H2>’

for(props in window)

sprops+=’<b>’+props+’</b><xmp>’+(‘:’+window[props]).substr(0,90)+’</xmp><br>’;

document.write(sprops)

Пример оператора WHILE

Var i=0;

Var n=20;

while(i<n)

{

  text += ’ ’;

  i++;

}

Кроме этих операторов в организации цикла могут участвовать еще два оператора: break (выход из цикла) и continue (переход на следующий шаг).

Прочие операторы

.

Доступ к полю объекта. ( document.write(Buf); )

[ ]

Индексирование массива ( dim[i] )

( )

Изменение порядка вычислений или передача параметров функции

,

Разделение выражений в многократном вычислении

Объекты JavaScript

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

В языке JavaScript имеется три вида объектов: встроенные объекты, объекты брaузера и объекты, создаваемые программистом.

JavaScript поддерживает следующий набор встроенных объектов: Array, Boolean, Date, Global, Function, Math, Number, String.

Встроенный объект Array. Массивы в JavaScript.

Массив в JavaScript является экземпляром встроенного объекта Array. Нумерация элементов в массиве начинается с нуля. Создать массив можно тремя способами:

var a1 = new Array();

var a2 = new Array(3);

var a3 = new Array('раз','два','три');

a1 - массив, в котором нет ни одного элемента. a2 - массив из трех элементов с неопределенным (undefined) значением. a3 - массив, заданный списком своих элементов.

Число элементов в массиве можно изменить, просто задав значение соответствующего элемента:

a3[5]='шесть';

Типы данных элементов массива в JavaScript могут быть различными:

a3[3]=4; a3[4]=5; a3[7]=false;

Разумеется, необходимо предусмотреть корректную работу с массивом, содержащим элементы с разными типами данных.

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

var myArray = new Array(2);

for (i=0; i<3; i++){

myArray[i] = new Array(2);

}

Так можно создать массив, состоящий из трех строк и трех столбцов.

Свойство объекта Array

length. Число элементов массива.

Методы объекта Array

concat( ). Слияние двух массивов. Через параметр передается имя второго массива: c=a.concat(b); Здесь элементы массива b добавляются к элементам массива a.

join( ). Слияние элементов массива в строку. Через параметр передается разделитель элементов. По умолчанию разделителем служит запятая. s=c.join('; ');

reverse( ). Меняет порядок элементов массива на обратный.

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