Инфоурок Другое Другие методич. материалыКомплект лабораторных работ по основам HTML и Jawa Script

Комплект лабораторных работ по основам HTML и Jawa Script

Скачать материал

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

Выбранный для просмотра документ Lab1 (HTML).doc

Лабораторная работа № 1

Основы языка HTML. Создание Web-сайта

1.1.     Создание простейшей Web-страницы.

1)    Запустите текстовый редактор Блокнот:

Пуск → Программы → Стандартные → Блокнот.

2)    Введите следующий текст:

<HTML>

<HEAD>

<TITLE>Заголовок документа</TITLE>

</HEAD>

<BODY>

Содержание

документа

</BODY>

</HTML>

3)    Сохраните этот документ под именем first.htm.

Замечание. Перед сохранением убедитесь, что сброшен флажок «Не показывать расширения» для зарегистрированных типов файлов. В про­тивном случае редактор Блокнот может автоматически добавить в конец имени рас­ширение .txt.

4)    Запустите программу Internet Explorer:

ПускПрограммы → Internet Explorer.

5)    Дайте команду Файл → Открыть. Щелкните на кнопке Обзор и откройте файл first.htm.

6)    Посмотрите, как отображается этот файл - простейший корректный документ HTML. Где отображается содержимое элемента TITLE? Где отображается содер­жимое элемента BODY?

7)    Как отображаются слова «Содержание» и «документа», введенные в двух отдель­ных строчках? Почему? Проверьте, что происходит при уменьшении ширины окна.


1.2.     Изучение приемов форматирования абзацев.

1)    Если это упражнение выполняется не сразу после предыдущего, откройте доку­мент first.htm в программе Блокнот.

2)    Удалите весь текст, находящийся между тегами <BODY> и </BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необхо­димо поместить после тега <BODY>.

3)    Существует шесть уровней заголовков, которые обозначаются H1..H6. Заголовок уровня 1 самый крупный, а уровень 6 обеспечивает самый маленький заголовок. Для заголовков можно использовать атрибут, задающий выравнивание влево (LEFT), по центру (CENTER) или вправо (RIGHT).

4)    Введите заголовок первого уровня, заключив его между тегами <H1> и </H1>.

5)    Введите заголовок второго уровня, заключив его между тегами <H2> и </H2>.

6)    Введите заголовок первого уровня, заключив его между тегами <H3> и </H3>.

7)    Введите заголовок первого уровня, заключив его между тегами <H4> и </H4>.

8)    Введите заголовок первого уровня, заключив его между тегами <H5> и </H5>.

9)    Введите заголовок первого уровня, заключив его между тегами <H6> и </H6>.

10)    Введите отдельный абзац текста, начав его с тега <P>. Пробелы и символы пере­вода строки можно использовать внутри абзаца произвольно.

11)    Введите тег горизонтальной линейки <HR>.

12)    Введите еще один абзац текста, начав его с тега <P>.

13)    Сохраните этот документ под именем paragraph.htm.

14)    Запустите обозреватель Internet Explorer.

15)    Дайте команду Файл →Открыть. Щелкните на кнопке Обзор и откройте файл paragraph.htm.

16)    Посмотрите, как отображается этот файл. Установите соответствие между эле­ментами кода HTML и фрагментами документа, отображаемыми на экране.


1.3.     Создание гиперссылок.

1)    Если это упражнение выполняется не сразу после предыдущего, откройте доку­мент first.htm в программе Блокнот.

2)    Удалите весь текст, находящийся между тегами <BODY> и </BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необхо­димо поместить после тега <BODY>.

3)    Введите фразу: Текст до ссылки.

4)    Введите тег: <А HREF="first.htm">.

5)    Введите фразу: Ссылка.

6)    Введите закрывающий тег </А>.

7)    Введите фразу: Текст после ссылки.

8)         Сохраните документ под именем link.htm.

9)         Запустите обозреватель Internet Explorer.

10)    Дайте команду Файл → Открыть. Щелкните на кнопке Обзор и откройте файл link.htm.

11)    Убедитесь в том, что текст между тегами <А> и </А> выделен как ссылка (цветом и подчеркиванием).

12)    Щелкните на ссылке и убедитесь, что при этом загружается документ, на кото­рый указывает ссылка.

13)    Щелкните на кнопке Назад на панели инструментов, чтобы вернуться к пре­дыдущей странице. Убедитесь, что ссылка теперь считается «просмотренной» и отображается другим цветом.

14)    Снова откройте доку­мент link.htm в программе Блокнот и удалите весь текст, находящийся между тегами <BODY> и </BODY>

15)    После тега <BODY> введите:

<A NAME="TOP"></A>

<P><A rel="nofollow ugc" target="_blank" href="#END">Перейти в конец документа</A>.

16)         Начните новый абзац, вставьте фрагмент текста, а затем введите:

<A NAME="END"></A>

<P><A rel="nofollow ugc" target="_blank" href="#TOP">Перейти в начало документа</A>.

17)    Сохраните документ под тем же именем.

18)    Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов.

19)    Щелкните на каждой из ссылок и убедитесь, что при этом происходит переход в конец или начало документа соответственно.

 

1.4.     Создание изображения и использование его на Web странице

1)    Если это упражнение выполняется не сразу после предыдущего, откройте доку­мент first.htm в программе Блокнот.

2)    Удалите весь текст, находящийся между тегами <BODY> и </BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необхо­димо поместить после тега <BODY>.

3)    В тег <BODY> добавьте атрибут: bgcolor="GREEN".

4)         Введите произвольный текст (протяженностью 4-5 строк) и установите тек­стовый курсор в его начало.

5)         Введите тег <IMG SRC="treug1.gif" ALIGN="BOTTOM">.

6)         Сохраните документ под именем picture.htm.

7)         Запустите обозреватель Internet Explorer.

8)         Дайте команду Файл → Открыть. Щелкните на кнопке Обзор и откройте файл picture.htm. Посмотрите на получившийся документ, обращая особое внимание на изображение.

9)         Вернитесь в программу Блокнот и измените значение атрибута: ALIGN="TOP". Сохраните файл под тем же именем.

10)    Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атри­бутов.

11)    Вернитесь в программу Блокнот и измените значение атрибута: ALIGN="LEFT". Сохраните файл под тем же именем.

12)    Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атри­бутов.

13)    Вернитесь в программу Блокнот и добавьте в тег <IMG> атрибуты: HSPACE=40 VSPACE=20. Сохраните файл под тем же именем.

14)    Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атри­бутов.

15)    Вернитесь в программу Блокнот и измените имя рисунка на treug2.gif". Сохра­ните файл под тем же именем.

16)    Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атри­бутов. В чем различие между двумя рисунками?

 

1.5.     Приемы форматирования текста.

1)         Если это упражнение выполняется не сразу после предыдущего, откройте доку-мент first.htm в программе Блокнот.

2)    Удалите весь текст, находящийся между тегами <BODY> и </BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега <BODY>.

3)    Введите тег <BASEFONT SIZE="5" FACE="Courier" COLOR="RED">. Он задает вывод текста по умолчанию увеличенным шрифтом типа Courier красным цветом.

4)    Введите произвольный абзац текста, который будет выводиться шрифтом, задан­ным по умолчанию. Начните этот абзац с тега <Р>.

5)    Введите теги: <Р> <FONT SIZE="-2" COLOR="GREEN">.

6)    Введите очередной абзац текста, закончив его тегом </FONT>.

7)    В каждом следующем абзаце используйте парные теги:

·     <В> (полу­жирный шрифт);

·     <I> (курсив);

·     <U> (подчеркивание);

·     <S> (вычеркивание);

·     <SUB> (нижний индекс);

·     <SUP> (верхний индекс);

·     <BDO dir="RTL"> Изменение направления текста </BDO>;

·     <MARQUEE behavior="alternate"> Бегущая строка (вправо-влево)</marquee>;

·     <MARQUEE direction="right"> Бегущая строка (вправо) </marquee>

8)    Сохраните полученный документ под именем format.htm.

9)         Запустите обозреватель Internet Explorer.

10)    Дайте команду Файл → Открыть. Щелкните на кнопке Обзор и откройте файл format.htm.

11)    Изучите, как использованные элементы HTML влияют на способ отображения текста.

12)    Вернитесь в программу Блокнот и измените документ так, чтобы элементы, за­дающие форматирование, были вложены друг в друга. Сохраните документ под тем же именем.

13)    Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы.

 


Таблица 1.1. Стандартные цвета

 

Таблица 1.2. Градации красного цвета

 

 

 

 

 

 

 

 

 


Таблица 1.3. Градации зеленого цвета

 

 

 

 

 

 

 

 

 

Таблица 1.4. Градации красного цвета

 

 

 

 

 

 

 

 

 

 

1.6.     Приемы создания списков.

1)    Если это упражнение выполняется не сразу после предыдущего, откройте документ first.htm в программе Блокнот.

2)    Удалите весь текст, находящийся между тегами <BODY> и </BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега <BODY>.

3)    Вставьте в документ тег <OL TYPE="I">, который создает упорядоченный (нуме­рованный) список.

4)    Вставьте в документ элементы списка, предваряя каждый из них тегом <LI>.

5)    В первый тег <LI> вставьте атрибут VALUE=2.

6)    Завершите список при помощи тега </OL>.

7)    Сохраните полученный документ под именем list.htm.

8)    Запустите обозреватель Internet Explorer .

9)    Дайте команду Файл → Открыть. Щелкните на кнопке Обзор и откройте файл list.htm.

10)    Изучите, как упорядоченный список отображается в программе Internet Explorer, обращая особое внимание на способ нумерации, заданный при помощи атрибута  TYPE. Что определяет атрибут VALUE?

11)    Вернитесь в программу Блокнот и установите текстовый курсор после оконча­ния введенного списка.

12)    Вставьте в документ тег <UL TYPE="SQUARE">, который начинает неупорядо­ченный (маркированный) список.

13)    Вставьте в документ элементы списка, предваряя каждый из них тегом <LI>.

14)    Завершите список при помощи тега </UL>. Сохраните документ под тем же именем.

15)    Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы, обратив внимание на способ маркировки, заданный при помощи атрибута TYPE.

16)    Вернитесь в программу Блокнот и установите текстовый курсор после окончания введенного списка.

17)    Вставьте в документ тег <DL>, который начинает список определений.

18)    Вставьте в список определяемые слова, предваряя соответствующие абзацы тегом <DT>.

19)    Вставьте в список соответствующие определения, предваряя их тегом <DD>.

20)    Завершите список при помощи тега </DL>. Сохраните документ под тем же именем.

21)    Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как выглядит при отображении Web-страницы список определений.

 

1.7.     Создание таблиц.

1)    Если это упражнение выполняется не сразу после предыдущего, откройте доку­мент first.htm в программе Блокнот.

2)    Удалите весь текст, находящийся между тегами <BODY> и </BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега <BODY>. В данном упражнении используется список номеров телефонов.

3)    Введите тег <TABLE BORDER="5" WIDTH="100%">.

4)    Введите строку: <CAPTION АLIGN="ТОР">Список телефонов</САРТION>.

5)    Первая строка таблицы должна содержать заголовки столбцов. Определите ее следующим образом:

<TR BGCOLOR="YELLOW" ALIGN="CENTER"> <ТН>Фамилия<ТН>Номер телефона

6)    Определите последующие строки таблицы, предваряя каждую из их тегом <TR> и помещая содержимое каждой ячейки после тега <TD>.

7)    Введите строку: <TR><TD ALIGN="CENTER" COLSPAN="2"> Ha 1-м этаже есть телефон-автомат.

8)    Завершите таблицу тегом </TABLE>.

9)    Сохраните документ под именем table.htm.

10)    Запустите обозреватель Internet Explorer.

11)    Дайте команду Файл → Открыть. Щелкните на кнопке Обзор и откройте файл table.htm.

12)    Изучите, как созданная таблица отображается в программе Internet Explorer. Что определяют атрибуты BORDER, WIDTH, COLSPAN (или ROWSPAN)?

13)    Измените ширину окна обозревателя и установите, как при этом изменяется таблица.

 

1.8.     Создание описания фреймов.

1)    Запустите текстовый редактор Блокнот.

2)    Введите следующий текст:

<HTML>

<HEAD>

<TITLE>Описание фреймов</TITLE>

</HEAD>

<FRAMESET ROWS="60%,*">

<FRAME SRC="table.htm" SCROLLING="YES">

<FRAMESET COLS="35%,65%" NORESIZE>

<FRAME SRC="first.htm"> <FRAME SRC="links.htm"> </FRAMESET>

</HTML>

3)    Сохраните этот документ под именем frames.htm.

4)    Запустите обозреватель Internet Explorer.

5)    Дайте команду Файл → Открыть. Щелкните на кнопке Обзор и откройте файл frames.htm.

6)    Изучите представление нескольких созданных ранее документов, в отдельных фреймах.

7)    Посмотрите, что происходит при изменении ширины окна обозревателя.

8)    Проверьте, можно ли изменить положение границ фреймов методом перетас­кивания при помощи мыши.

9)    Щелкните на ссылке, имеющейся в одном из фреймов, и посмотрите, как будет отображен новый документ.

10)    Щелкните на кнопке Назад на панели инструментов и убедитесь, что возврат к предыдущему документу на нарушает структуру фреймов.

11)    Вернитесь в программу Блокнот и измените структуру и параметры фреймов по своему усмотрению. Сохраните документ под тем же именем.

12)    Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Убедитесь, что измененный вид Web-страницы соответствует замыслу. Если это не так, вернитесь в программу Блокнот, найдите и исправьте ошибки.

 

Исследовательская работа

Задание 1. Исследование методов создания абзацного отступа в документах HTML. Язык HTML не содержит «официальных» средств для создания абзацных отступов. Все браузеры, предназначенные для вывода текста на экран компьютера, выводят текст без отступа, вставляя пустую строку между отдельными абзацами. Создание абзацного отступа, таким образом, требует использования специальных приемов.

1)         Запустите текстовый редактор (например, Блокнот) и начните создание доку­мента HTML. Введите теги структурных элементов и дайте документу заголовок, например Имитация абзацных отступов.

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

3)         Откройте обозреватель Internet Explorer и откройте в нем созданный документ. Отрегулируйте ширину окна программы так, чтобы исследуемый абзац занимал несколько строк. Убедитесь, что он выводится без отступа.

4)         Добавление пробелов. Вернитесь к редактированию документа. Разместите после эталонного абзаца горизонтальную линейку (тег <HR>). Скопируйте эталонный абзац через буфер обмена, поместив копию ниже линейки. Добавьте в начало скопированного абзаца несколько пробелов. Сохраните документ.

5)         Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить. Посмотри­те на добавленный абзац. Объясните, почему создать абзацный отступ таким образом не удается.

6)         Метод элемента списка. Вернитесь к редактированию документа. Разместите после последнего абзаца горизонтальную линейку. Скопируйте эталонный абзац через буфер обмена, поместив копию ниже линейки. Добавьте в начало скопи­рованного абзаца тег <DD>. Сохраните документ.

7)         Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить. Посмот­рите на добавленный абзац. Убедитесь, что появился абзацный отступ. Правильно ли используется код HTML в полученном документе? Можно ли рекомендовать такой метод создания абзацного отступа? Почему?

8)         Метод неразрывных пробелов. Вернитесь к редактированию документа. Размес­тите после последнего абзаца горизонтальную линейку (тег <HR>). Скопируйте эталонный абзац через буфер обмена, поместив копию ниже линейки. Добавьте в начало скопированного абзаца несколько раз комбинацию символов &nbsp;. Сохраните документ.

Комбинации символов, начинающиеся со знака «&» (амперсанд) и заканчивающиеся точкой с запятой, служат в языке HTML для задания символов, которые отсутствуют на клавиатуре или не могут включаться в текст документа согласно спецификации языка HTML (например, «<»). Комбинация &nbsp; задает неразбивающий пробел.

9)         Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить. Посмот­рите на добавленный абзац. Убедитесь, что появился абзацный отступ. Можно ли рекомендовать такой метод создания абзацного отступа? Почему?

10)    Метод предварительно отформатированного текста. Вернитесь к редактирова­нию документа. Разместите после последнего абзаца горизонтальную линейку. Скопируйте эталонный абзац через буфер обмена, поместив копию ниже линей­ки. Добавьте в начало скопированного абзаца тег <PRE>, задающий предвари­тельно отформатированный текст, и несколько пробелов. В конце абзаца добавьте тег </PRE>. Сохраните документ.

11)    Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить. Посмот­рите на добавленный абзац. Убедитесь, что появился абзацный отступ. Обратите внимание на способ обработки пробелов и символов конца строки в предвари­тельно отформатированном тексте. В чем особенность используемого метода? Выскажите свое мнение об использовании этого метода создания абзацного отступа.

12)    Метод невидимого изображения. Вернитесь к редактированию документа. Раз­местите после последнего абзаца горизонтальную линейку. Скопируйте эталон­ный абзац через буфер обмена, поместив копию ниже линейки. Добавьте в начало скопированного абзаца тег <IMG>, укажите используемый файл изображения и задайте отступ по горизонтали в 10 пикселов (HSPACE="10"). Файл изображе­ния должен представлять собой картинку в формате GIF, состоящую из одного пиксела (1х1), заданного прозрачным цветом. Сохраните документ.

13)    Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить. Посмот­рите на добавленный абзац. Убедитесь, что появился абзацный отступ.

14)    Проанализируйте все использованные методы и выскажите свое мнение о прин­ципиальной целесообразности их использования и о том, какой из них наиболее удобен.

Просмотрено: 0%
Просмотрено: 0%
Скачать материал
Скачать материал "Комплект лабораторных работ по основам HTML и Jawa Script"

Методические разработки к Вашему уроку:

Получите новую специальность за 3 месяца

Директор по управлению персоналом

Получите профессию

Методист-разработчик онлайн-курсов

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Выбранный для просмотра документ Lab2 (JS).doc

Лабораторная работа № 2

Знакомство с языком JAVA SCRIPT.

Программирование линейных и ветвящихся алгоритмов

2.1.          Составить и отладить программу для вычисления по указанной формуле. Значения переменных, указанных в правой части, ввести с клавиатуры, результат вывести на экран. Выполнить проверку правильности.

 

Вариант

Задание

Вариант

Задание

1

8

2

9

3

10

4

11

5

12

6

13

7

14


2.2.          Составить и отладить программу для вычисления по указанной формуле, используя методы объекта Math. Значения переменных, указанных в правой части, ввести с клавиатуры, результат вывести на экран.

 

Вариант

Задание

Вариант

Задание

1

8

2

9

3

10

4

11

5

12

6

13

7

14


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

 

Вариант

Задание

Вариант

Задание

1

9

2

10

3

11

4

12

5

13

6

14

7

15

8

16

 

 

17

 

Просмотрено: 0%
Просмотрено: 0%
Скачать материал
Скачать материал "Комплект лабораторных работ по основам HTML и Jawa Script"

Получите профессию

Няня

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Выбранный для просмотра документ Lab3 (JS).doc

Лабораторная работа № 3

Циклы в языке JAVA SCRIPT.

Операторы FOR и WHILE

3.1.          С помощью оператора цикла for напишите скрипты для решения следующих задач:

1.        Найти сумму .

2.        Найти .

3.        Найти сумму первых 100 натуральных чисел, кратных 5.

4.        Найти сумму 10 случайных чисел из диапазона .

5.        Найти сумму 10 случайных четных чисел из диапазона .

6.        Найти пятый член последовательности: , .

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

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

9.        Перевести троичное число из 8 двоек в десятичную систему.

10.   Построить  – значное число, в котором цифра на  месте определяется как последняя цифра число .

11.   Построить  – значное число, в котором цифра на  месте определяется как последняя цифра член последовательности .

12.    Вывести число, все цифры которого удвоены по отношению к данному.

13.   Вывести число, цифры которого следуют в обратном порядке по отношению к данному.

3.2.          Выполнить задание 3.1. с помощью оператора while.

Просмотрено: 0%
Просмотрено: 0%
Скачать материал
Скачать материал "Комплект лабораторных работ по основам HTML и Jawa Script"

Получите профессию

Менеджер по туризму

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Выбранный для просмотра документ Lab4 (JS).doc

Лабораторная работа № 4

Массивы в языке JAVA SCRIPT

Для работы с массивами в языке Java Script используется объект Array.

Создание экземпляра объекта:

1)                  <Имя массива>=new Array () – пустой массив;
2)                  <Имя массива>=new Array (element 1, element 2,..., element N) – массив, состоящий из элементов element 1, element 2, ..., element N.

Экземпляр также создается по умолчанию при таком описании переменной:

var WorkWeek = ["Понедельник", "Вторник", "Среда", "Четверг", "Пятница"];

Эта запись эквивалентна следующей:

var WorkWeek = new Array ("Понедельник", "Вторник", "Среда", "Четверг", "Пятница");

Нумерация элементов массива начинается с нуля. Для доступа к отдельным элементам массива используют конструкцию:

<Имя массива>[индекс]

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

Cвойство

Описание

length

Длина массива (число элементов в массиве).

var set=new Array(0,1,2,3,4,5,6,7,8,9,10);

alert(set.length);

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

Метод

Описание

concat(array)

Возвращает массив, полученный добавлением массива array. Исходный массив не меняется.

Пример:

var set1 = new Array (1,2);

var set2 = new Array (3,4);

var set  = set1.concat(set2);

alert(set1+"\n"+set2+"\n"+set);

Метод concat работает только в браузерах, версия которых выше 3.

reverse()

Изменяет порядок следования элементов массива.

var set = new Array (1,2,3);
set.reverse();

slice(ind1,ind2)
slice(ind1)

Возвращает массив, полученный «вырезанием» из исходного массива части с позиции ind1 по позицию ind2-1, т.е. вырезаются элементы с set[ind1] по set[ind2-1]. Исходный массив не меняется.

·           Если ind2 меньше нуля, то отсчет последнего участника выделения ведется с конца массива. Вырезаются элементы с set[ind1] по set[set.length-ind2-1].

·           Если ind2 опущен, выделение продолжается до конца массива, т.е. вырезаются элементы с set[ind1] по set[set.length-1].

Метод slice работает только в браузерах, версия которых выше 3.

sort(function)

sort()

Сортировка массива. Параметром является имя функции, которая задает правила сравнения двух элементов. Если параметр опущен, элементы сортируются в лексикографическом порядке.

Функция function должна содержать два аргумента и возвращать:

  • отрицательное число, когда первый аргумент считается расположенным левее второго в смысле определяемого порядка;
  • 0, когда аргументы считаются равнозначными в смысле определяемого порядка;
  • положительное число, когда первый аргумент считается правее второго в смысле определяемого порядка.

Пример.

var set = new Array (26,71,9,1);
function Compare(a,b)
{
  return  a-b;
}
set.sort(Compare);
alert(set);

Пример. Составить программу для нахождения максимального элемента.

<script language=JavaScript>

var num = 10;

var a = 1;

var b = 100;

var set = new Array();

for (i=0;i<=num;i++)

set[i]=Math.round(a+(b-a)*Math.random())-50;

var max = a;

for (i=0;i<=num;i++)

if (set[i]>max) max=set[i];

alert ("Массив: "+set+"\n"+" Max="+max);

</script>


Задания для выполнения по вариантам:

1.            Создать массив, содержащий фамилии студентов подгруппы. Удалить из него фамилии студентов, стоящие на нечетных вариантах, подсчитать размер полученного массива и отсортировать его по возрастанию.

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

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

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

5.            Создать массив, состоящий из названий предметов на 4 курсе. Исключить из него предметы, связанные с кафедрой ИПМ. Найти размер полученного массива и отсортировать его по возрастанию.

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

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

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

9.            Создать массив, содержащий фамилии преподавателей кафедры математического анализа. Добавить к нему фамилии преподавателей кафедры ИПМ. Определить размер полученного массива и отсортировать его по убыванию.

10.        Создать массив, содержащий фамилии преподавателей кафедры ИПМ. Исключить из списка ассистентов. Определить размер полученного массива и отсортировать его по возрастанию.

11.        Создать массив, содержащий название столиц Европы. Исключить названия столиц Западной Европы. Определить размер полученного массива и отсортировать его по убыванию.

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

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

Просмотрено: 0%
Просмотрено: 0%
Скачать материал
Скачать материал "Комплект лабораторных работ по основам HTML и Jawa Script"

Получите профессию

Секретарь-администратор

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Выбранный для просмотра документ Lab5 (JS).doc

Лабораторная работа № 5

Создание объектов в Java Script

Способы создания объектов в Java Script

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

Описание функции в Java Script имеет следующий синтаксис:

Function имя функции (параметры)

{

 команды

}

Если требуется, чтобы функция возвращала некоторое значение, то в ее теле используется оператор возврата return.

Пример создания функции:

// Вывод случайного целого числа x из диапазона [a,b]

Function rnd(a,b)

{

 return Math.round(a + (b-a)*Math.random());

}

var x = rnd(1,2);

alert(x);

Пример создания объекта с помощью функции:

Function car (name, model, color)

{

 this.name = name

 this.model = model

 this.color = color

}

Создание конкретного экземпляра объекта:

Mycar = new car(Ока, ВАЗ1111, white)

 

2.       Объекты можно создавать с помощью конструктора new Object().

Пример создания объекта:

Mycar = new Object()

Mycar.name= Ока

Mycar.model = ВАЗ1111

Mycar.color = white

Задания для выполнения по вариантам:

Создать объект с заданными свойствами и определить методы:

1.     Объект – обыкновенная дробь.

Свойства: числитель, знаменатель.

Методы:

а)    сокращение дроби;

б)   перевод дроби в десятичную дробь;

в)    выделение целой части.

2.     Объект – вектор.

Свойства: координаты начала, координаты конца.

Методы:

а)    нахождение проекции вектора на ось ;

б)   нахождение длины вектора;

в)    нахождение модуля вектора.

3.     Объект – комплексное число.

Свойства: действительная и мнимая части.

Методы:

а)    нахождение модуля числа;

б)   нахождение комплексно-сопряженного числа;

в)    запись числа в тригонометрической форме.

4.     Объект – цилиндр.

Свойства: радиус основания, высота.

Методы:

а)    нахождение объема цилиндра;

б)   нахождение площади основания цилиндра;

в)    нахождение площади боковой поверхности цилиндра.

5.     Объект – калькулятор.

Свойства: цифра 0, цифра 1,.., цифра 9.

Методы:

а)    сложить;

б)   вычесть;

в)    умножить;

г)    разделить.

6.     Объект – трапеция.

Свойства: основание 1, основание 2, высота.

Методы:

а)    нахождение средней линии трапеции;

б)   нахождение площади трапеции.

7.     Объект – окружность.

Свойства: координаты центра, радиус.

Методы:

а)    нахождение длины окружности;

б)   нахождение площади круга;

в)    определение положения точки с координатами  и  относительно окружности.

8.     Объект – параллелепипед.

Свойства: сторона 1, сторона 2, сторона 3.

Методы:

а)    нахождение длины диагонали параллелепипеда;

б)   нахождение площади основания;

в)    нахождение объема параллелепипеда.

9.     Объект – треугольник.

Свойства: стороны треугольника.

Методы:

а)    периметр треугольника;

б)   площадь треугольника;

в)    радиус вписанной окружности.

10. Объект – двузначное число.

Свойства: число десятков, число единиц.

Методы:

а)    нахождение числа по его модулю;

б)   разложение числа на простые множители.

11. Объект – целое число из интервала .

Свойства: значение, знак.

Методы:

а)    нахождение модуля числа;

б)   вычисление факториала от модуля числа;

в)    разложение числа на простые множители.

12. Объект – многочлен.

Свойства: коэффициенты , , .

Методы:

а)    нахождение корней многочлена;

б)   разложение многочлена на множители.


Пример (Вариант 12, Primer5 (Object).htm):

<script language=JavaScript>

function polinom(a,b,c)

{

this.x=a;

this.y=b;

this.z=c;

D=this.y*this.y-4*this.x*this.z;

if (D>0)

{

this.koren1=((-1)*this.y+Math.sqrt(D))/(2*this.x);

this.koren2=((-1)*this.y-Math.sqrt(D))/(2*this.x);

this.razl=this.x+"*(x-"+this.koren1+")(x-"+this.koren2+")";

}

else

{

this.koren1=(-1)*this.y/(2*this.x);

this.koren2=this.koren1;

this.razl=this.x+"*(x-"+this.koren1+")^2"

}

}

var a2=1*prompt("Введите коэффициент при 2-й степени x", "1");

var a1=1*prompt("Введите коэффициент при x", "1");

var a0=1*prompt("Введите свободный член", "1");

if ((a1*a1-4*a2*a0)<0) alert("Многочлен не имеет действительных корней");

else

{

var P = new polinom(a2,a1,a0);

alert("Корни многочлена:"+"\n"+"x1="+P.koren1+"\n"+"x2="+P.koren2+"\n"+"Разложение многочлена:"+"\n"+P.razl);

}

</script>

Просмотрено: 0%
Просмотрено: 0%
Скачать материал
Скачать материал "Комплект лабораторных работ по основам HTML и Jawa Script"

Получите профессию

Копирайтер

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Выбранный для просмотра документ Lab6 (Date).doc

Лабораторная работа № 6

Объект Date

Объект Date используется для работы с датой и временем. Для создания экземпляров в языке Java Script используется ключевое слово new:

1) var переменная = new Date();

2) var переменная = new Date(year, month, day);

3) var переменная = new Date(year, month, day, hours, minutes, seconds);

Экземпляр, созданный без использования параметров, содержит текущую дату и время. Параметры year, month, day, hours, minutes, seconds  являются целыми числами и задают соответствующие части даты и времени. Если часы, минуты и секунды не заданы, то они устанавливаются в ноль.

Параметр

Значение

Диапазон

year

год

Например, 2008

month

месяц

0..11 (январь..декабрь)

day

день месяца

1..31

hours

часы

0..23

minutes

минуты

0..59

seconds

секунды

0..59

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

Метод

Описание, пример использования

getYear()

Возвращает год. До 2000 года возвращает только две последние цифры.

var data = new Date();

var y = data.getYear();

alert(y);

setYear(year)

Устанавливает год

var data = new Date();

data.setYear(2000);

var y = data.getYear();

alert(y);

getMonth()

var data = new Date();

var m = data.getMonth();

alert(m);

getMonth(month)

Устанавливает месяц

var data = new Date();

data.setMonth(2);

var m = data.getMonth();

alert(m);

getDate()

Возвращает день месяца

var data = new Date();

var d = data.getDate();

alert(d);

setDate(day)

Устанавливает день месяца

var data = new Date();

data.setDate(5);

var d = data.getDate();

alert(d);

getDay()

Возвращает день недели (0 – воскресенье. 1 – понедельник,…, 6 - суббота)

var data = new Date();

var dn = data.getDay();

alert(dn);

getHours()

Возвращает час

var data = new Date();

var h = data.getHours();

alert(h);

setHours(hours)

Устанавливает час

var data = new Date();

data.setHours(20);

var h = data.getHours();

alert(h);

getMinutes()

Возвращает минуты

var data = new Date();

var mi = data.getMinutes();

alert(mi);

setMinutes(minutes)

Устанавливает минуты

var data = new Date();

data.setMinures(30);

var mi = data.getMinutes();

alert(mi);

 

Рассмотрим несколько простых скриптов с объектом Date.

Пример 1. Текущая дата и время

<SCRIPT language=JavaScript>

var now = new Date();

alert("Сегодн\я:"+now.getDate()+"/"+(now.getMonth()+1)+"/"+now.getYear()+"\n"+"Сейчас:"+now.getHours()+":"+now.getMinutes()+":"+now.getSeconds());

</SCRIPT>

Пример 2. Число дней с начала года

<SCRIPT language=JavaScript>

//Текущая дата

var now = new Date();

//Начало текущего года

var begin = new Date(now.getYear(),0,1);

//Число миллисекунд от начала года

var d=now.getTime()-begin.getTime();

//Число миллисекунд в дне

var msDay=24*60*60*1000;

//Поделим на число миллисекунд в сутках

d/=msDay;

//Показать реультат

alert("Количество дней, пройденных с начала года:

"+Math.round(d));

</SCRIPT>

Задания для выполнения по вариантам:

Используя методы объекта Date вычислить:

1.     Количество дней до следующего дня рождения;

2.     Количество дней от прошедшего дня рождения;

3.     Ближайший год, в котором день рождения приходится на воскресенье;

4.     Количество прожитых человеком дней;

5.     Количество дней, оставшихся до пенсии;

6.     Количество дней до нового года;

7.     Количество дней, оставшихся до окончания университета;

8.     Дату Пасхи в текущем году;

9.     Количество дней между двумя датами;

10. Количество дней до ближайшего юбилея.

Приложение

Алгоритм расчёта даты Пасхи для любого года

В качестве исходных данных используем единственное значение
Year
- год от Рождества Христова

Результатом получим число
Day
и номер месяца
Month (целые числа)

Введем функцию
mod(X, Y)
- остаток от целочисленного деления
X на Y (результат - целое число)

Рассчитаем вспомогательные значения:
A=mod(Year, 19)
B=mod(Year, 4)
С=mod(Year, 7)
D=mod((19*A+15), 30)
E=mod((2*B+4*C+6*D+6), 7)

Если
(D+E) <= 9
то
Month=3 и Day=22+D+E
иначе
Month=4 и Day=D+E-9

Если
Month=4 и Day=26
то
Day=19

Если
E=6 и Day=28
то
Day=18

Дата Пасхи (по старому стилю): Day, Month, Year.

Просмотрено: 0%
Просмотрено: 0%
Скачать материал
Скачать материал "Комплект лабораторных работ по основам HTML и Jawa Script"

Получите профессию

Экскурсовод (гид)

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Выбранный для просмотра документ Lab7 (CSS).doc

Лабораторная работа № 7

Каскадные таблицы стилей

Стили можно определять тремя способами:

1)  Как свойство Style отдельного тега (Стиль для отдельного тега, Teg.htm).

2)  В тегах <STYLE></STYLE> (Стиль для отдельного файла, File.htm).

3)  В отдельном файле (Стиль для нескольких файлов, Files.htm):

Пример 1. Создаем файл prim.css:

H1,H2,H3,H4,H5,H6

{

text-align:right;

color:green;

font-family:"Arial Cyr",Geneva,Helvetica,sans-serif;

}

В HTML-документе прописываем:

<LINK rel=stylesheet type="text/css" href=prim.css>

Задания (Комбинирование стилей):

1.   Создайте документ без css указаний.

2.   Сss указания в отдельном теге: первые два заголовка черным, 3-й красным.

3.   Css указания в head: первые два заголовка синим, 3-й красным.

4.   Css указания в css файле prim.css: первые два заголовка синим, 3-й красным.

5.   Измените код prim.css: первые два заголовка зеленые, 3-й красным.

Классы

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

Пример 2 (Class.htm).

<HTML>

<HEAD>

<TITLE>Классы</TITLE>

<STYLE type="text/css">

<!--

.def

{

color:red

font-size:14pt:

font-family: Helvetica, sans-serif;

border:solid 4pt red;

padding: 6pt;

margin-left: 5%;

margin-right: 5%;

}

-->

</STYLE>

</HEAD>

<BODY bgcolor=white text=black>

<H2>Классы (обычный заголовок)</H2>

<P class=def>

Класс - стилевое определение без привязи к тегу.

<P>

Вместо указания тега записывается имя класса.

<P class=def>

Перед именем класса ставится точка.

</BODY>

</HTML>

Теги DIV и SPAN

Теги DIV и SPAN позволяют выделять отдельные области в документе, задавая им свойства. После DIV браузер переходит на новую строку, а после SPAN не происходит переход.

Пример 3 (Div.htm).

<HTML>

<HEAD>

<TITLE>Тег DIV</TITLE>

<STYLE type="text/css">

    <!--

    .area1

    {

      color:red:

      font-weight:bolder;

      font-size:40pt;background:aqua;

    }

    .area2

    {

      color:maroon;background:#CFB597;

    }

    .area3

    {

      color:blue;background:#C0C0C0;

    }

    -->

    </STYLE>

</HEAD>

<BODY bgcolor=white text=black>

 <DIV class=area1><IMG src=./J26.jpg width=150,height=150> Где </DIV>

 <DIV class=area2>начало того конца,</DIV>

 <DIV class=area3>которым оканчивается начало?</DIV>

</BODY>

</HTML>

Пример 4 (Span.htm).

<HTML>

<HEAD><TITLE>Тег SPAN</TITLE>

<STYLE type="text/css">

<!--

    .area1

    {

      color:red:

      font-weight:bolder;

      font-size:40pt;background:aqua;

    }

    .area2

    {

      color:maroon;background:#CFB597;padding:6pt;

    }

    .area3

    {

      color:blue;background:#C0C0C0;padding:6pt;

    }

    -->

    </STYLE>

</HEAD>

<BODY bgcolor=white text=black>

 <SPAN class=area1><IMG src=./J26.jpg width=150,height=150>Где</SPAN>

 <SPAN class=area2>начало того конца,</SPAN>

 <SPAN class=area3>которым оканчивается начало?</SPAN>

</BODY>

</HTML>

Позиционирование

Пример 5 (AbsPos.htm).

<HTML>

<HEAD><TITLE>Абсолютное позиционирование</TITLE></HEAD>

<BODY bgcolor=white text=black>

<H1>Абсолютное позиционирование</H1>

<P>

В этом примере картинка абсолютно позиционирована.

Она располагается в 100 пикселях по горизонтали и в 50 пикселях

по вертикали от начала документа.

Измените размеры окна и убедитесь, что картинка всегда остается

на прежнем месте.

<IMG src=./nwe317.jpg width=100 height=100 border=0

     alt="Фламинго"

     style="position: absolute;

            left:100px; top:50px;">

</BODY>

</HTML>

Пример 6 (SmeshPos.htm).

<HTML>

<HEAD><TITLE>Смешанное позиционирование</TITLE></HEAD>

<BODY bgcolor=white text=black>

<H1>Смешанное позиционирование</H1>

<P> Таблица относительно позиционирована вправо

  на 50 пикселей.

  Внутри кода таблицы расположена картинка с относительным

  позиционированием вниз на 100 пикселей.

<P><TABLE border=1 cellspacing=0 cellpadding=10

        width=80% bgcolor=#EEE5DB

        style="position:relative; left:50px; top:0px;">

  <TR><TD>

    <P>

     <IMG src=./nwe317.jpg width=100 height=100 border=0

         alt="Котята" align=left hspace=10

         style="position:relative;

                left:0px; top:100px;">

     Тег<TT><B> IMG</B></TT> размещается внутри таблицы.

     Для картинки записано  относительное позиционирование

    вниз на 100 пикселей.<BR clear=left>

   </TD></TR>

</TABLE>

</BODY>

</HTML>

Z-индекс

Использование Z-индекса позволяет указывать в каком слое на экране находится элемент.

Пример 7 (Z-index.htm).

<HTML>

<HEAD><TITLE>Z-index</TITLE></HEAD>

<BODY bgcolor=white text=blue>

 <H1>Z-index</H1>

 <P> Этот текст основной. К нему не приписано никаких стилевых воздействий. Значит, этот текст лежит в нулевой плоскости.

  <IMG src=./Cats.jpg width=100 height=100 border=0

       alt="Котята" align= hspace=10

       style="position:absolute;

              left:120px; top:10px;z-index:-1;">

  <IMG src=./Dog.jpg width=100 height=100 border=0

       alt="Собака" align=left hspace=10

       style="position:absolute;

              left:180px; top:55px;z-index:-2;">

</BODY></HTML>


Задания для выполнения по вариантам:

Задание 1. Получите красивое визуальное представление вашего документа с помощью задания стилей:

Вариант

Шрифт

Размер

Цвет

Фон

Рамка

Поля

Отступ

1

Academy

Medium

Черный

Подобрать

Подобрать

Подобрать

Подобрать

2

Antiqua

Large

Подобрать

Синий

Подобрать

Подобрать

Подобрать

3

Arial

xx-small

Зеленый

Подобрать

Подобрать

Подобрать

Подобрать

4

Courier

x-small

Подобрать

Голубой

Подобрать

Подобрать

Подобрать

5

Garamond

x-large

Красный

Подобрать

Подобрать

Подобрать

Подобрать

6

New York

xx-large

Подобрать

Серый

Подобрать

Подобрать

Подобрать

7

Parsek

14pt

Желтый

Подобрать

Подобрать

Подобрать

Подобрать

8

Geneva

Small

Сиреневый

Подобрать

Подобрать

Подобрать

Подобрать

9

Tahoma

16pt

Коричневый

Подобрать

Подобрать

Подобрать

Подобрать

10

Book Antiqua

18pt

Подобрать

Малиновый

Подобрать

Подобрать

Подобрать

11

Sylfaen

14pt

Подобрать

Зеленый

Подобрать

Подобрать

Подобрать

12

Comic Sans

Large

Голубой

Подобрать

Подобрать

Подобрать

Подобрать

13

Verdana

16pt

Желтый

Подобрать

Подобрать

Подобрать

Подобрать

 


Задание 2.

1.        Создайте страницу, в которой все абзацы выровнены по левому и правому краям и имеют красную строку в один сантиметр.

2.        Для текстов заголовков и абзацев используйте рубленый шрифт. Сделайте новый стиль p.def. Абзацы этого стиля должны выравниваться по левому и правому краям, иметь отступ слева 2 см и справа 1 см. Расположите на странице обычные абзацы вместе с абзацами р. def.

3.        Определите стили для написания старой и новой цен товара. Старая цена – серого цвета, перечеркнутая. Новая цена – красного цвета, на 50% более крупного кегля, чем остальной текст. Напишите список товаров со старыми и новыми ценами.

4.        Определите два стиля.

·     В первом стиле:

·     Буквы должны печататься коричневым по светло-серому фону.

·     Расстояние между содержимым и рамкой элемента должно составлять 0,5 см.

·     Текст выравнивается по левому и правому краям.

Во втором стиле:

·     Фон бирюзовый.

·     Расстояние между содержимым и рамкой элемента должно составлять 0,5 см.

·     Поля слева и справа от элемента по 1 см.

·     Рубленый шрифт.

Подготовьте документ с двумя разделами. Первый раздел определяется первым стилем, второй – вторым. Второй – раздел должен быть вложен в первый, чтобы было видно наследование. Какие стилевые указания наследу­ются во втором разделе, а какие нет?

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

6.        Подготовьте стиль для абзаца, у которого слева и справа проводится вертикальная черта (на всю высоту абзаца).

7.        Подготовьте стиль абзаца "подложка" (.ground) и стиль "надпись" (.poster). Используя созданные стили, создайте страницу с надписью поверх подложки. Подложка пишется очень крупными буквами мягкого светло серого цвета. Надпись пишется коричневыми буквами обычного размера.

8.        Используя стили, сделайте страницу, в которой текст выводится в две колонки (как в газете). Таблицы при этом не используйте.

9.        Постройте на экране две области с линейками прокрутки и поместите в них информационные элементы.

10.   Используя свойство z-index, постройте на экране несколько перекрывающих друг друга областей.

11.   Подготовьте стиль для абзаца, у которого сверху и снизу проводится горизонтальная черта (на всю высоту абзаца).

12.   Определите стили для написания экзаменов и полученных по ним оценок. Расписание экзаменов – серого цвета. Оценки – красного цвета, на 50% более крупного кегля, чем остальной текст. Напишите список экзаменов и полученных оценок.


Задание 3.

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

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

3.   Стилевое свойство overflow используется для определения того, что случится, если наполнение элемента выйдет за пределы заданной области. Среди предписываемых стандартом значений нормально работает только scroll – содержимое прокручивается. Напишите страничку, которая демонстрирует работу свойства overflow.

4.   Иван Мячиков решил задать для текстового блока на своей странице широкое левое поле (см. страницу "Математики и ювелиры"). Он поместил блок внутрь конструкции

<DIV

style="position:relative;left:100;">

</DIV>

Поле получилось, но текст перестал форматироваться по правой границе окна. Помогите Мячикову исправить положение.

5.   Если у абсолютно позиционированного элемента опущена одна или две координаты, то:

·          Если не задано свойство left, то, левый край элемента будет располагаться справа за элементом-родителем.

·          Если не задано свойство top, то верхний край элемента будет располагаться ниже элемента-родителя. При этом если родитель позиционирован относительно, то элемент будет располагаться по вертикали там, где он располагался бы, если бы вообще не был позиционирован.

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

6.   Если картинку поместить в абзац, то она ведет себя как символ, перемещаясь по экрану за своим местом (при изменении размера окна браузера).

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

7.   DHTMLИспользуя позиционирование, создайте «объемную» надпись из обычного текста (без картинок). Эта надпись должна быть привязана к своему месту в абзаце, подобно обычному слову.

8.   Создать страницу, в которой нечетные цифры идут за своими текстовыми обозначениями, независимо от размеров экрана (один 1, три 3, …)

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

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

11.            Создайте страницу, в которой одна и та же картинка выводится несколько раз со смещением в шашечном порядке.

12.            Создайте страницу, в которой одна и та же картинка выводится несколько раз со смещением вниз и вправо.

 

 

13.            Создайте страницу, в которой одна и та же картинка выводится несколько раз со смещением вниз и вправо.

 

 


Задание 4.

1.        Создайте страничку, на которой по основному тексту «проплывает» небольшой фрагмент другого текста. Алгоритм движения: текст начинает двигаться слева направо; через некоторое время текст «скачком» возвращается в исходное положение слева и все повторяется.

2.        Создайте страничку, на которой по основному тексту «проплывает» небольшой фрагмент другого текста. Алгоритм движения: текст начинает двигаться слева направо; через некоторое время текст меняет направление движения, доходит до исходного положения и все повторяется

3.        Создайте страничку, на которой по основному тексту «проплывает» небольшой фрагмент другого текста. Алгоритм движения: текст должен двигаться по синусоиде вправо и «скачком» возвращаться в исходное положение.

4.        Создайте страничку, на которой по основному тексту «проплывает» небольшой фрагмент другого текста. Алгоритм движения: текст должен двигаться по синусоиде вправо, затем менять направление движения; в исходном положении все повторяется заново.

5.        Создайте страничку, на которой по основному тексту «плавает» небольшой фрагмент другого текста. Управление движением – при помощи экранных кнопок.

6.        Создайте страничку, на которой по основному тексту «плавает» небольшой фрагмент другого текста. Управление движением – при помощи кнопок клавиатуры.

7.        Создайте страничку, на которой по основному тексту можно перетаскивать мышью картинку.

8.        Создайте страничку, на которой кнопку «Нажми меня» преследует курсор мыши.

9.        Создайте страничку, на которой кнопка «Догони меня» убегает от курсора мыши.

10.   Создайте страничку, на которой глазки следят за курсором мыши.

 

 

11.   Создайте страничку, на которой вокруг курсора мыши бегают паучки.

 

 

 

 

12.   Создайте страничку, на которой за курсором мыши остается след.

Просмотрено: 0%
Просмотрено: 0%
Скачать материал
Скачать материал "Комплект лабораторных работ по основам HTML и Jawa Script"

Получите профессию

Интернет-маркетолог

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Выбранный для просмотра документ Lab8 (Forms).doc

Лабораторная работа 8

Объекты браузера языка JAVA SCRIPT. Формы

Иерархия объектов в JavaScript

В языке JavaScript все элементы на web-странице выстраиваются в иерархическую структуру. Каждый элемент предстает в виде объекта. И каждый такой объект может иметь определенные свойства и методы. С точки зрения языка JavaScript окно браузера - это некий объект window. Этот объект также содержит в свою очередь некоторые элементы оформления, такие как строка состояния. Внутри окна мы можем разместить документ HTML. Такая страница является объектом document. Все без исключения объекты HTML являются свойствами объекта document. Примерами объекта HTML являются, к примеру, ссылка или заполняемая форма. На следующем рисунке иллюстрируется иерархия объектов, создаваемая некоторой HTML-страницей.

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

 

<form name="myForm">

 

Сообщение:

<input type="text" name="soob" value="привет"><br>

...

Если, например, Вы хотите знать, какой текст ввел читатель в первый элемент формы, то получить доступ к этому объекту можно так:

document.myForm.soob.value (значение =”привет”)

Доступ к объектам

Объект Checkbox

Отмеченный элемент: Formname. Checkboxname.checked

Пример:

<form name="myForm">

физика <INPUT type=checkbox name=с1 checked>

математика <INPUT type=checkbox name=с2 >

k=myForm.c1.checked (значение k= true)

Объект Select

Номер выбранного элемента списка (начиная с 0):

Formname.selectname.selectedindex

Пример:

<form name="myForm">

Овощи:

<select name=ovo>

<option selected>редис</option >

<option >морковь</option >

</select>

р=myForm.ovo.selectindex(значение р= 0)

g=myForm.ovo.[myForm.ovo.selectindex].text

(значение g=“редис”)

Объект Textarea

Значение в поле: Formname.Textareaname.Value

Пример:

<form name="myForm">

<textarea name="ta">

О себе

</textarea>

q=myForm.ta.value (значение q= “О себе”)

Объект Radio

Отмеченный элемент:

Formname.Radioname[index].checked (index=0,1,…)

Пример:

<form name="myForm">

Вариант I <input type="radio" value="I" name="r1"><br>

Вариант II <input type="radio" value="II" checked name="r1">

s=myForm.r1(1).checked (значение s= true)

Формы

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

Формы размещаются между тегами <FORM></FORM>. HTML-документ может содержать в себе несколько форм, но они не должны находиться одна внутри другой. Тег <FORM> может содержать следующие атрибуты:

ACTION

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

METHOD

Определяет, каким образом данные из формы будут переданы обработчику. Допустимые значения: METHOD=POST и METHOD=GET. Если значение атрибута не установлено, по умолчанию предполагается METHOD=GET.

ENCTYPE

Определяет, каким образом данные из формы будут закодированы для передачи обработчику.

Для внесения информации пользователем в форму используется элемент <INPUT>. Это и есть поля, в которые пользователь вводит информацию. Каждый элемент <INPUT> включает атрибут NAME=имя, определяющий имя данного поля (идентификатор поля). В таблице представлены основные типы, применяемых элементов <INPUT>:

TYPE=text

Определяет окно для ввода строки текста. Может содержать дополнительные атрибуты SIZE=число (ширина окна ввода в символах) и MAXLENGTH=число (максимально допустимая длина вводимой строки в символах):

<INPUT TYPE=text SIZE=20 NAME=User VALUE="LENIN INC">

Определяет окно шириной 20 символов для ввода текста. По умолчанию в окне находится текст LENIN INC, который пользователь может изменить.

TYPE=password

Определяет окно для ввода пароля. Абсолютно аналогичен типу text, только вместо символов вводимого текста показывает на экране звездочки (*):

<INPUT TYPE=password NAME=PW SIZE=20 MAXLENGTH=10>

Определяет окно шириной 20 символов для ввода пароля. Максимально допустимая длина пароля — 10 символов.

TYPE=radio

Определяет радиокнопку. Может содержать дополнительный атрибут CHECKED (показывает, что кнопка отмечена). В группе радиокнопок с одинаковыми именами может быть только одна помеченная радиокнопка:

<INPUT TYPE=radio NAME=Question VALUE="Yes" CHECKED>

Да
<INPUT TYPE=radio NAME=Question VALUE="No">
Нет
<INPUT TYPE=radio NAME=Question VALUE="Possible">
Возможно

Да
Нет
Возможно

Определяет группу из трех радиокнопок, подписанных Yes, No и Possible. Первоначально помечена первая из кнопок. Если пользователь не отметит другую кнопку, обработчику будет передана переменная Question со значением Yes. Если пользователь отметит другую кнопку, обработчику будет передана переменная Question со значением No или Possible.

TYPE=checkbox

Определяет квадрат, в котором можно сделать пометку. Может содержать дополнительный атрибут CHECKED (показывает, что квадрат помечен). В отличие от радиокнопок, в группе квадратов с одинаковыми именами может быть несколько помеченных квадратов:

<INPUT TYPE=checkbox NAME=Comp VALUE="CPU"> Процессоры
<INPUT TYPE=checkbox NAME=Comp VALUE="Video" CHECKED> Видеоадаптеры
<INPUT TYPE=checkbox NAME=Comp VALUE="Scan"> Сканеры
<INPUT TYPE=checkbox NAME=Comp VALUE="Modem" CHECKED> Модемы

Процессоры
Видеоадаптеры
Сканеры
Модемы

Определяет группу из четырех квадратов. Первоначально помечены второй и четвертый квадраты. Если пользователь не произведет изменений, обработчику будут переданы две переменные: Comp=Video и Comp=Modem.

TYPE=hidden

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

<INPUT TYPE=hidden NAME=version VALUE="1.1">

Определяет скрытую переменную version, которая передается обработчику со значением 1.1.

TYPE=submit

Определяет кнопку, при нажатии на которую запускается процесс передачи данных из формы обработчику:

<INPUT TYPE=submit VALUE="Отправить">

TYPE=reset

Определяет кнопку, при нажатии на которую очищаються поля формы. Поскольку при использовании этой кнопки данные обработчику не передаются, кнопка типа reset может и не иметь атрибута name:

<INPUT TYPE=reset VALUE=" Сброс ">

 

БезымянныйЗадание 1. Создайте форму следующего вида:

 

 

 

 

 

Текст документа:

<html>

<head><title>Форма</title>

</head>

<body>

<form method=post action="C:\Program Files">

<center><b>Понравился ли вам этод Web-узел?</center>

<input type=radio name=1>Да!!!

<input type=radio name=1>Нет...

<p><textarea>Пожалуйста, опишите свои впечатления</textarea>

<p><input type=checkbox>Я хочу получать

<select>

<option>Немедленно</option>

<option>Спустя трое суток</option>

<option>Через 20 минут</option>

<option>Никогда</option>

</select> уведомления об изменениях на Web-узле

<p>Адрес моей электронной почты

<input type=text>

<p><input type=submit value="Отправить информацию">

<input type=reset value="Очистить форму">

</form>

</body>

</head>

</html>

Задание для выполнения по вариантам:

Создать форму, содержащую:

·       текстовое поле;

·       кнопку (CommandButton);

·       радиокнопку (OptionButton);

·       флажок (CheckBox);

·       список;

·       рисунок.

на тему:

1.     Объявление в газете;

2.     Контрольная работа по предмету;

3.     Прайс-лист торговой точки;

4.     Объявление о знакомстве;

5.     Расписание поездов (билет);

6.     Листовка предвыборной компании;

7.     Писатель репортажей;

8.     План урока;

9.     Теле(радио)передача;

10. Денежная купюра;

11. Рецензия на дипломную работу;

12. Рекламный листок;

13. Регистрационная карточка.

Примечание: При нажатии кнопки «ГОТОВО», программа должна выдать Web-страницу, содержащую информацию, которую пользователь ввел при заполнении формы.

Просмотрено: 0%
Просмотрено: 0%
Скачать материал
Скачать материал "Комплект лабораторных работ по основам HTML и Jawa Script"

Получите профессию

Методист-разработчик онлайн-курсов

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Выбранный для просмотра документ Lab9 (Filter).doc

Лабораторная работа № 9

Фильтры

Некоторые авторы выделяют фильтры в отдельный класс инструментов оформления HTML-страниц и это, в общем-то, правильно.

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

Статический фильтр преобразует элемент и после этого он отображается.

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

Фильтры применяются не ко всем элементам, а только к тем, которые определяют прямоугольный блок и не являются окнами.

Перечень элементов, к которым применяются фильтры

Элемент

Условие применения фильтра.

BODY

Всегда

BUTTON

Всегда

DIV

Если заданы ширина и высота или элемент абсолютно позиционирован.

IMG

Всегда

INPUT

Всегда

MARQUEE

Всегда

SPAN

Если заданы ширина и высота или элемент абсолютно позиционирован.

TABLE

Всегда

TD

Всегда

TEXTAREA

Всегда

TH

Всегда

 

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

Формула записи кода при применении визуальных фильтров выглядит следующим образом:

STYLE="filter: Имя_Фильтра(параметр_1=значение_1,

...

параметр_N=значение_N)"

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

Если к элементу применяется несколько фильтров, они задаются в виде списка с пробелом в качестве разделителя.

Список фильтров

Фильтр

Эффект применения и возможные параметры

Alpha

Установка эффекта «прозрачность» на элемент целиком или на указанный градиент. Значение от 0 до 100, где 0 – прозрачно, 100 – не прозрачно.

BlendTrans

Увеличивает или уменьшает контрастность отображения объекта

Blur

Размытие объекта. Возможные параметры:

- Add (добавить размытие со значениями 1 – да и 0 – нет):

- Direction (угол направления размытия со значением от 0 до 315, где шаг равен 45;

- Strength (назначение числа пикселей на квадратный дюйм).

Chroma

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

DropShadow

Эффект сложной тени для элемента. Параметры:

- Color (цвет в RGB);

- OffX (смещение в px по оси X);

- OffY (смещение по оси Y);

- Positive - создание тени по характеру пикселей (значение 1 – для видимых и 0 – для невидимых).

FlipH

Разворачивание элемента по горизонтальной оси.

FlipV

Разворачивание элемента по вертикальной оси.

Glow

Сияющий эффект. Параметры:

- Color (цвет сияния в RGB);

- Strength (концентрация от 0 до 100).

Gray

Перевод элемента в черно-белый цвет.

Invert

Отображение элемента в негативе (инверсия цветов).

Light

Осветление элемента.

Mask

Назначение цвета для выделяемого объекта пользователем, где параметр Color – цвет в RGB.

Shadow

Простая тень для элемента. Параметры:

- Color (цвет в RGB);

- Direction (угол направления тени от 0 до 315 с шагом 45).

Redirect

Преобразует объект в объект DAImage, к которому можно применить все возможности технологии MS DirectAnimation.

RevealTrans

Показывает или скрывает объекты, используя 23 определенных в фильтре перехода

Xrey

Изменяет глубину цвета объекта и после этого отображает его в черно-белых тонах, имитируя рентгеновский снимок объекта

Wave

Эффект волны, можно присваивать следующие параметры:

- Add – добавлять (значение 1) или нет (0);

- Freq - число волн (знач. – целое число);

- LightStrength – амплитуда волн (знач. – от 0 до 100);

- Phase – угловое смещение волн (в %, где 100% = 360 град.);

- Strength – числовое значение интенсивности эффекта.

Общие свойства некоторых фильтров

1.     Каждый фильтр имеет свойство enabled, которое разрешает (значение true) или запрещает (значение false) применение присоединенного к обьекту фильтра.

2.     Свойство strenght фильтров blur, glow и wave определяет интенсивность применения соответствующего фильтра. Оно может принимать значения в пределах от 0 до 255.

3.     Свойство direction фильтров blur и shadow определяет направление, в котором размывается объект или падает тень. Значение этого свойства может задаваться любым числом, как положительным, так и отрицательным и определяет угол, отсчитываемый от вертикали объекта по часовой стрелке с шагом 45 градусов.

4.     Свойство color имеют фильтры, которые воздействуют на цветовую гамму элемента. Это фильтры chroma, dropShadow, glow, mask, shadow. Значение этого свойства задается шестнадцатиричным числом вида #RRGGBB или словом, например red, green и т.д.

Рассмотрим примеры использования фильтра BlendTrans.

Пример 1.

<html>

<body>

<SCRIPT language="JavaScript">

function startTrans()

{

   if (SampleID.filters.blendTrans.status == 0){

       SampleID.filters.blendTrans.Apply();

       SampleID.style.visibility =

            (SampleID.style.visibility == "hidden")?"visible":"hidden";

       SampleID.filters.blendTrans.Play()

   }

}

</SCRIPT>

<div style="position: relative; top:100px; width:357; height:100; background-color:red; color:white; text-align:center;"

 onclick="startTrans()">

<font size=+3>Щелкните на изображении</font>

</div>

<div id=SampleID style="position: relative; width:357; height:100;

background-color:blue; color:yellow; text-align:center; filter:blendTrans(duration=1);

visibility:visible"

 onclick="startTrans()">

 <font size=+3>Щелкните на изображении</font>

</div>

<BR>

<body>

</html>

 

Пример 2.

<HTML>

<HEAD>

<SCRIPT language="JavaScript">

var fRunning = 0

function startTrans()

{

if (fRunning == 0)

{

fRunning = 1

img.filters.blendTrans.Apply();

img.src = "1.jpg";

img.filters.blendTrans.Play()

}

}

</SCRIPT>

<SCRIPT for="img" event="onfilterchange"> fRunning = 0 </SCRIPT>

</HEAD>

<BODY>

<IMG id="img" src="2.jpg"

style="filter:blendTrans(duration=8); width: 400; height: 250;"

onclick="startTrans()">

</BODY>

</HTML>

Задание

Возьмите картинку и примените к ней все возможные фильтры.

Просмотрено: 0%
Просмотрено: 0%
Скачать материал
Скачать материал "Комплект лабораторных работ по основам HTML и Jawa Script"

Получите профессию

Менеджер по туризму

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Получите профессию

Методист-разработчик онлайн-курсов

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Скачать материал

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

6 609 644 материала в базе

Скачать материал

Другие материалы

Вам будут интересны эти курсы:

Оставьте свой комментарий

Авторизуйтесь, чтобы задавать вопросы.

  • Скачать материал
    • 24.11.2016 4322
    • RAR 321.6 кбайт
    • 139 скачиваний
    • Рейтинг: 5 из 5
    • Оцените материал:
  • Настоящий материал опубликован пользователем Плаксо Виктор Александрович. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

    Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.

    Удалить материал
  • Автор материала

    Плаксо Виктор Александрович
    Плаксо Виктор Александрович
    • На сайте: 9 лет и 4 месяца
    • Подписчики: 0
    • Всего просмотров: 116941
    • Всего материалов: 32

Ваша скидка на курсы

40%
Скидка для нового слушателя. Войдите на сайт, чтобы применить скидку к любому курсу
Курсы со скидкой

Курс профессиональной переподготовки

Секретарь-администратор

Секретарь-администратор (делопроизводитель)

500/1000 ч.

Подать заявку О курсе

Курс повышения квалификации

Специалист в области охраны труда

72/180 ч.

от 1750 руб. от 1050 руб.
Подать заявку О курсе

Курс профессиональной переподготовки

Руководство электронной службой архивов, библиотек и информационно-библиотечных центров

Начальник отдела (заведующий отделом) архива

600 ч.

4920 руб. 2950 руб.
Подать заявку О курсе

Курс профессиональной переподготовки

Организация деятельности библиотекаря в профессиональном образовании

Библиотекарь

300/600 ч.

от 7900 руб. от 3950 руб.
Подать заявку О курсе
  • Сейчас обучается 279 человек из 66 регионов

Мини-курс

Основы игровой деятельности дошкольников: роль игр в развитии детей

3 ч.

780 руб. 390 руб.
Подать заявку О курсе

Мини-курс

Современные подходы к духовно-нравственному воспитанию дошкольников

6 ч.

780 руб. 390 руб.
Подать заявку О курсе

Мини-курс

Особенности патриотического воспитания

3 ч.

780 руб. 390 руб.
Подать заявку О курсе
  • Сейчас обучается 20 человек из 12 регионов