Документ взят из кэша поисковой машины. Адрес оригинального документа : http://www.astro.spbu.ru/staff/afk/Teaching/Seminars/XimFak/Sem11.htm
Дата изменения: Fri Nov 19 16:06:15 2010
Дата индексирования: Tue Oct 2 04:50:16 2012
Кодировка: Windows-1251
Поисковые слова: п п п п п п п п п п п п п п п п п п п п п р п р п п р п п р п п р п п р п п р п п р п п р п п р п п р п п р п п р п п р п п р п п р п п р п
Sem11: JavaScript: Массивы и циклы. Ввод и вывод переменных в текстовом окне
  Изменение размера шрифта

Тема 11 практических занятий: Массивы и циклы. Ввод и вывод переменных в текстовом окне

 

Основы языка HTML и введение в CSS и JavaScript


  + -

ВНИМАНИЕ! На этой странице находятся дополнительные справочные материалы по языку HTML и CSS.

Примечание. Для редактирования HTML файлов используйте встроенный редактор программы File Manager, а не внутренний редактор программы Mozilla!

Подтема 1: Способы задания массивов

1. Откройте страницу ArrLng.htm в браузере Mozilla или посмотрите, как устроен файл ArrLng.htm с помощью встроенного текстового редактора программы File Manager. Проверьте работу Функции определения длины массива. Нажмите кнопку Array length и посмотрите, чему будет равен размер массива.

2. Замените оператор задания массива array1=new Array() на оператор array1=new Array(3). Проверьте работу Функции определения длины массива. Добавьте в операторе задания массива array1=new Array("A","B","C") и проверьте работу Функции определения длины масива.

3. Откройте страницу ArrElem.htm в браузере Mozilla или посмотрите, как устроен этот файл с помощью встроенного текстового редактора программы File Manager. Проверьте работу Функции определения элементов массива. Добавьте в оператор инициализации массива array1=new Array два новых элемента "B" и "C". Проверьте, правильно ли работают функции определения размера массива и определения элементов массива. Добавьте в функцию определения элементов массива вывод новых инициализированных элементов "B" и "C".

4. Ввести операторы инициализации элемента массива в теле процедуры arrelem(): array1[5]='F' и т.д. Добавьте в функцию определения элементов массива вывод новых инициализированных элементов и проверьте работу данной функции.

5. Перенесите операторы инициализации элемента массива в теле процедуры arrelem() из тела процедуры и поставить их сразу после оператора new Array. Посмотреть, что изменилось в работе кнопок определения размера массива и его элементов.

Подтема 2: Циклы в программах JavaScript

1. Откройте страницу PrtElem.htm в браузере и посмотрите, как устроен файл с помощью встроенного текстового редактора программы File Manager. Проверьте работу Программы вывода элементов массива File Manager.

2. Ознакомьтесь с устройством цикла в функции printelem(). Измените операторы присваивания в функции таким образом, чтобы элементы массива разделялись бы запятыми.

3. Добавьте 5 новых элементов в конструктор массива (оператор инициализации) array1. Проверьте работу кнопки Array elements.

4. Добавьте новую целую переменную j. Организуйте цикл в функции printelem() по переменной j таким образом, чтобы элементы массива array1 были бы равны числам от 1 до 10.
Примечание: следует учесть, что индексы массивов и переменная j в цикле начинаются с 0, а не с 1.

5. Заполните массив квадратами целых чисел от 1 до 20. Повторить то же действие для кубов и четвертых степеней чисел. Сохраните исправленную и дополненную вами страницу PrtElem.htm
Примечание: для вычисления степеней чисел можно использовать метод pow объекта Math.
Функция Math.pow(a,b)=ab.

Подтема 3: Ввод параметров в текстовой строке

1. Сделайте копию страницы PrtElem.htm с именем FillPrn.htm. Откройте страницу FillPrn.htm для редактирования в браузере Mozilla или с помощью встроенного текстового редактора программы File Manager.

2. Сделайте копию функции printelem() и измените название оригинала на fillelem(k) и оставьте неизменным название копии fillelem(k). Функция зависит от параметра k - степени целых чисел. Элементы массива array1 должны заполняться по правилу array1[i] = ik. Использовать метод Math.pow(a,k) для возведения числа a в степень k.

3. Ввести в тело документа новую кнопку Fill Array:, обращающуюся к процедуре fillelem(k). Проверить работу кнопок Fill Array: и Print array elements, подставляя разные значения параметра k.

4. Добавить внутри формы form1 текстовое поле ввода индекса k степени натуральных чисел: Index: <input type="text" size=10 name="ind"> с именем ind. Сменить имя функции function fillelem(к) на имя function fillelem(obj). Здесь obj - имя объекта - формального параметра функции. Ввести оператор присваивания индекса k=obj.ind.value;.

5. Сменить обращение к функции fillelem(k) в элементе формы form1 кнопка Fill array на fillelem(form1). Ввести числа 1, 2, 3, ... в текстовое поле ind и проверить работу кнопок Fill array и Print array elements.

6. Ввести в функции fillelem(obj) новую переменную nelem Ввести оператор присваивания индекса nelem=obj.Numb.value;. Добавить внутри формы form1 текстовое поле с именем Numb для ввода числа элементов в массиве степеней натуральных чисел (см. пункт 4). Ввести подходящие числа в поля ввода индекса и числа элементов массива и проверьте работу кнопок заполнения массива и вывода элементов массива.

7. Ввести между кнопками заполнения массива и вывода его элементов кнопку очистки полей формы: <input type="reset" value="Clear">. Проверить ее работу.

Подтема 4: Вывод результата в текстовою строку

1. Добавить внутри формы form1 (после всех кнопок) текстовое поле вывода элементов массива с именем res:
Array: <input type="text" size=100 name="res">.

2. Сменить имя функции function printelem() на имя function printelem(obj1). Здесь obj1 - имя объекта - формального параметра функции. Ввести оператор присваивания значения строки str с элементами массива array1 в текстовое поле res: obj1.res.value=l1+" "+str;.

3. Сменить обращение к функции printelem() в текстовом поле res: printelem()->printelem(). Удалить оператор document.write(l1," ",str); (метод write объекта document) из тела функции.

4. Проверить работу всех кнопок после изменения страницы и функций на ней.

Подтема 5: Добавление элементов массива из тексового поля

1. Откройте страницу AddElem.htm браузере и посмотрите, как устроен файл с помощью встроенного текстового редактора программы File Manager. Проверьте работу Программы вывода элементов массива printelem().

2. Добавить функцию добавления элемента в массив array1:
function addelem(obj)
{ var a=obj.elem1.value; l1=array1.length;
array1[l1]=a; }
внутри тега <SCRIPT>.

3. Добавить текстовое поле ввода нового элемента массива:
Input New Elements:
<input type="text" size=10 name="elem1">.
Добавить кнопку добавления этого элемента к массиву:
<input type="button" value="Add element:" onClick=" addelem(form1)"> .

4. Оформить вывод элементов массива в текстовую строку, как описано в подтеме 4.

Подтема 6: Оформление документов с помощью каскадных таблиц стилей

1. Оформить все созданные вами страницы с JavaScript программами с помощью стилевого файла main.css в папке CSS. Использовать в качестве образца оформления файл Dizain.htm.