Главная Коллекция "Revolution" Программирование, компьютеры и кибернетика Разработка web сайта на основе HTML с использованием JavaScript

Разработка web сайта на основе HTML с использованием JavaScript

Вывод информации с помощью JavaScript. Язык разметки гипертекстовых страниц HTML. Массивы JavaScript и Escape-последовательности. Разработка учебных программ по предмету "WEB программирование". Браузеры Netscape Navigator и Microsoft Internet Explorer.

Рубрика	Программирование, компьютеры и кибернетика
Вид	дипломная работа
Язык	русский
Дата добавления	26.05.2018
Размер файла	2,3 M

посмотреть текст работы

скачать работу можно здесь

полная информация о работе

весь список подобных работ

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

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

Страница:

На производстве применяется метод и средства пожаротушения; применения углекислотных огнетушителей, так как СО₂ не портит оборудование и не проводит электрический ток.

В случае пожара имеются эвакуационные путы: 1) из помещений первого этажа - наружу непосредственно или через коридор, вестибюль, лестничную клетку; 2) из помещений любого этажа - в коридор или проход ведущий к лестничной клетки, или на лестничную клетку, имеющую выход наружу, отдельной от примыкающих коридоров перегородками с дверьми;

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

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

ЗАКЛЮЧЕНИЕ

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

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

В выпускной квалификационной работе разработаны примеры программ для проведение практических занятий по предмету "Web программирования" для студентов направления 5521900-Информатика и информационные технологии.

ЛИТЕРАТУРА

1. Будилов В. А. JavaScript, XML и объективная модель документа : монография. -СПб: Наука и Техника, 2001.-352 c.

2. Николенко Д. В. Практические занятия по JavaScript : для начинающих. -СПб: Наука и техника, 2000.-352 c.

3. Дарнелл Рик. JavaScript: Справочник. -СПб; М.;Харьков: Питер, 2001.-192 c.

4. Леонтьев Б. Web- дизайн : Руководство для пользователя/ Б. Леонтьев. -М.: Познават. кн. плюс, 2001.-320 c.

5. Румянцев Д. Сам себе WEB программист: Практикум создания качеств. WEB-сайта/ Д. Румянцев. -М.: ИНФРА-М, 2001.-207 c.

6. Айзекс А. Dynamic HTML BHV-Санкт-Петербург, 1998

7. Ганчаров А. Самоучитель HTML. Питер, 2000

8. Дарнелл Р. HTML 4 Энциклопедия пользователя. ДиаСофт 1999

9. Денисов Internet Explorer 5. Справочник. Питер, 1999

10. Хоумер А. Dynamic HTML. Справочник. Питер, 1999

11. Петюшкин А.В., HTML. Экспресс-курс. - СПб.: БХВ - Петербург, 2003

12. Кингсли-Хью Э., JavaScript: учебный курс. - СПб.: Питер, 2002

13. www.intuit.ru - Интернет-университет информационных технологий.

14. http://www.robotland.ru/

ПРИЛОЖЕНИЕ

Листинг сайта:

Index.htm

<HTML><HEAD><TITLE>Примеры задач для проведение практических занятий по предмету "Web программирования"</TITLE>

<!--

.style1 {

font-size: medium;

font-weight: bold;

}

.style2 {color: #FFFFFF}

-->

</style>

</HEAD>

<tr>

<p class="style2">Примеры задач для проведение практических занятий </p>

<p class="style2">по предмету "Web программирования" для студентов </p>

<p class="style2">направления 5521900-Информатика и информационные технологии</p>

</div></td>

</tr>

<tr>

</tr>

</table>

<H2>Перечень заданий </H2>

</CENTER>

<p><A

href="pr1.htm">Задание №1. Проверка правильности электронного адреса (по заданному шаблону)</A> </p>

<p><A

href="pr2.htm">Задание №2. Проверка заполнения полей формы (проверка на наличие данных)</A> </p>

<p><A

href="pr3.htm">Задание №3. Пример формы заказа (объединение всех проверок на уровне формы)</A> </p>

<p><A

href="pr4.htm">Задание №4. Фоновая музыка</A> </p>

<p><A

href="pr6.htm">Задание №5. Простая анимация на JavaScript</A> </p>

<p><A

href="pr7.htm">Задание №6-a. Пример таблицы стилей(без использования JavaScript)</A> </p>

<p><A

href="pr8.htm">Задание №6-б. Применение динамических стилей, используя JavaScript</A> </p>

<p><A

href="pr9.htm">Задание №7. Управление слоями, используя JavaScript</A> </p>

<p><A

href="pr10.htm">Задание №8. Создание анимации с помощью DHTML</A> </p>

<p><A

href="begin.htm">Задание №9. ПОИСКОВАЯ СИСТЕМА (написана на JAVASCRIPT)</A></p>

<p><A

href="primer.htm">Дополнительные примеры</A></p>

<BR>  <BR>  <!--

<p><b><font color="#666666"><font size=-1><a href="we.html">о

дизайнерах</a>       

<a href="curs.html">от дизайнеров</a></font></font></b>

<br><b><font size=-1>Copyright</font><font face="Symbol"> У</font><font size=-1>

1999  Бердников И. Ю. & Мосунов Д. Ю.</font></b></center>

--></BODY></HTML>

pr1.htm

<HTML><HEAD><TITLE>Пример "промывки" данных и установления обратной связи</TITLE>

/////////////////////////////////////////////////////////

// Поскольку все верные e-mail адреса содержат

// точку и символ @, эта функция ищет эти

// два символа. Если они обнаружены, e-mail

// адрес считается верным; если нет, пользователя

// приглашают ввести адрес e-mail повторно.

/////////////////////////////////////////////////////////

function isAValidEmail(inputValue) {

var foundAt = false

var foundDot = false

var atPosition = -1

var dotPosition = -1

// Проверить один за другим все символы адреса

// e-mail и выставить флаг когда (и если)

// знак @ и точка обнаружены.

for (var i=0; i<=inputValue.length; i++) {

if (inputValue.charAt(i) == "@" ) {

foundAt = true

atPosition = i

}

else if (inputValue.charAt(i) == ".") {

foundDot = true

dotPosition = i

}

// Если оба символа - @ и точка - обнаружены и

// нужном порядке (символ @ должен идти первым)...

if ((foundAt && foundDot) && (atPosition < dotPosition)) {

// Указан верный формат адреса e-mail

alert("Спасибо за верный ввод адреса e-mail!")

return true

}

else {

// Адрес e-mail неверен

alert("Извините, вы неверно ввели адрес e-mail. Пожалуйста, попробуйте еще раз.")

return false

}

</SCRIPT>

<BODY>

<H1>Пример "промывки" данных и установления обратной связи</H1>

<OL>

<LI>Введите заведомо неверный адрес e-mail (например, такой как <I>XYZ</I>) в поле ввода внизу страницы. Когда закончите, щелкните <B>здесь</B>.

<P></P>

<LI>Затем, введите верный адрес e-mail (такой как <I>emily@emilyv.com</I>) в поле и щелкните <B>здесь</B>. </LI></OL>

<P>

<FORM name=myForm>Адрес E-mail: <BR><INPUT onblur=isAValidEmail(this.value)

size=25 name=emailAddress> </FORM></P></BODY></HTML>

pr2.htm

<HTML><HEAD><TITLE>Пример формы заказа</TITLE>

//////////////////////////////////////////////

// Returns true if a value contains any

// characters; otherwise, returns false.

//////////////////////////////////////////////

function exists(inputValue) {

var aCharExists = false

// Step through the inputValue, using the charAt()

// method to detect non-space characters.

for (var i=0; i<=inputValue.length; i++) {

if (inputValue.charAt(i) != " " && inputValue.charAt(i) != "") {

aCharExists = true

break

}

return aCharExists

}

</SCRIPT>

<BODY>

<H1>Пример формы заказа</H1>Щелкните на поле для ввода, а затем - в любом другом

месте (не вводя никаких данных), чтобы проверить, работает ли функция exists().

<P>

<FORM name=myForm>Имя: <INPUT

onblur="if (!exists(this.value)) { alert('Пожалуйста, введите ваше имя'); }"

size=25 name=firstName>

<P>Фамилия: <INPUT

onblur="if (!exists(this.value)) { alert('Пожалуйста, введите фамилию') }"

size=35 name=lastName> </FORM></P></BODY></HTML>

pr3.htm

<HTML><HEAD><TITLE>Пример формы заявки</TITLE>

<!-- скрыть этот сценарий от броузеров, не поддерживающих JavaScript

////////////////////////////////////////////////////////

// Проверка на наличие нечислового значения.

////////////////////////////////////////////////////////

function isANumber(inputValue){

// Предположим, все в порядке

var result = true

// Если функция parseFloat() возвращает значение

// false, значит на первой позиции находится не

// численное значение

if (!parseFloat(inputValue)) {

result = false

}

// В противном случае, все равно следует проверить

// оставшиеся цифры в inputValue, символ за символом,

// и установить значение result = false, если будет

// найдено любое не численное значение.

else {

for (var i=0; i<inputValue.length; i++) {

if (inputValue.charAt(i) != " ") {

if (!parseFloat(inputValue.charAt(i))) {

result = false

break

}

// Вернуть значение true (inputValue это правильный

// номер) или false (неправильный).

return result

}

////////////////////////////////////////////////////////

// Проверить, содержит ли введенное значение

// символы "@" и "."

////////////////////////////////////////////////////////

function isAValidEmail(inputValue) {

var foundAt = false

var foundDot = false

// Просмотреть значение inputValue в поисках

// символов "@" and "."

for (var i=0; i<=inputValue.length; i++) {

if (inputValue.charAt(i) == "@" ) {

foundAt = true

}

else if (inputValue.charAt(i) == ".") {

foundDot = true

}

// Если найдены оба символа: @ и точка, полагаем,

// что адрес e-mail введен правильно

// в противном случае возвращается

// значение false, чтобы было понятно,

// что адрес e-mail введен неправильно.

if (foundAt && foundDot) {

return true

}

else {

return false

}

///////////////////////////////////////////////////////

// Проверить, чтобы введенное значение содержало

// 10 или более цифр. Используя такой подход,

// пользователи будут вводить номер телефона по

// принятому в США шаблону, например, (123)456-7890,

// или в европейском стиле: 123.456.7890

////////////////////////////////////////////////////////

function isAValidPhoneNumber(inputValue) {

var digitsFound = 0

// Просмотр значения inputValue для определения

// количества содержащихся в нем цифр

for (var i=0; i<=inputValue.length; i++) {

if (isANumber(inputValue.charAt(i))) {

digitsFound++

}

// Если значение inputValue содержит по крайней мере

// 10 цифр, полагаем, что номер введен правильно

if (digitsFound >= 10) {

return true

}

else {

return false

}

////////////////////////////////////////////////////////

// Проверка на наличие символов. (Пробелы

// не считаются.)

////////////////////////////////////////////////////////

function exists(inputValue) {

var aCharExists = false

// Проверка значения inputValue с помощью

// метода charAt() для поиска символов

// (отличных от пробелов).

for (var i=0; i<=inputValue.length; i++) {

if (inputValue.charAt(i) != " " && inputValue.charAt(i) != "") {

aCharExists = true

break

}

return aCharExists

}

////////////////////////////////////////////////////////

// Выполняет проверку полей, которая не может быть

// выполнена до того, как будут введены все данные.

////////////////////////////////////////////////////////

function validateForm() {

var rc = true

// Проверка №1 зависимого поля: проверка выбора категории услуг

////////////////////////////////////////////////////////

// Посетителям следует выбрать один из вариантов,

// чтобы правильно заполнить заявку, в зависимости от

// того, в чем они заинтересованы: услуги по дизайну,

// поддержке или продвижению.

////////////////////////////////////////////////////////

if (!document.quoteForm.designChoice.checked &&

!document.quoteForm.maintChoice.checked &&

!document.quoteForm.promoChoice.checked) {

alert("Пожалуйста, выберите интересующие вас услуги: дизайн, поддержка или продвижение, чтобы мы могли точно выполнить ваш заказ. Спасибо!")

rc = false

}

// Проверка №2 зависимого поля: проверка

// заполнения названия организации, если пользователь

// выбрал параметр "служащий"

////////////////////////////////////////////////////////

// Если посетители являются служащими, следует

// указать название своей организации.

////////////////////////////////////////////////////////

if (document.quoteForm.bizChoice[1].checked) {

if (!document.quoteForm.corpName.value) {

alert("Вы указали, что вы -- служащий; не могли бы вы указать название вашей организации? Спасибо!")

rc = false

}

// Проверка №3 зависимого поля: двойная проверка

// полей для заполнения имени и фамилии

////////////////////////////////////////////////////////

// Посетителям следует указать свое имя и фамилию.

////////////////////////////////////////////////////////

if (!document.quoteForm.firstName.value ||

!document.quoteForm.lastName.value) {

alert("Пожалуйста, укажите ваше полное имя и фамилию. Спасибо!")

rc = false

}

// Проверка №4 зависимого поля: проверка

// заполнения электронного адреса или номера телефона

////////////////////////////////////////////////////////

// Посетителям следует указать адрес e-mail или

// номер телефона.

////////////////////////////////////////////////////////

if (!document.quoteForm.emailChoice.checked &&

!document.quoteForm.phoneChoice.checked) {

alert("Пожалуйста, укажите, как с вами связаться: по электронной почте или телефону. Спасибо!")

rc = false

}

// Проверка №5 зависимого поля: проверка наличия

// адреса e-mail (если пользователь

// выбрал параметр "электронная почта")

////////////////////////////////////////////////////////

// Если посетитель указывает, что он предпочитает

// общение по электронной почте, вывести сообщение,

// если он забудет ввести адрес e-mail

// (то же самое при выборе параметра "телефон")

////////////////////////////////////////////////////////

if (document.quoteForm.emailChoice.checked &&

!isAValidEmail(document.quoteForm.emailAddr.value)) {

alert("Мы не сможем связаться с вами по электронной почте, пока вы не введете свой адрес. Спасибо!")

rc = false

}

else {

if (document.quoteForm.phoneChoice.checked &&

!isAValidPhoneNumber(document.quoteForm.phoneNumber.value)) {

alert("Мы не сможем связаться с вами по телефону, пока вы не введете свой номер (убедитесь, что вы указали свой код). Спасибо!")

rc = false

}

if (rc) {

// Если переменная rc содержит не нулевое

// значение, тогда данные будут переданы!

alert("Спасибо! Мы свяжемся в вами в ближайшее время.")

}

return rc

}

// -->

</SCRIPT>

<BODY>

<H1>Пример формы заявки</H1>

<HR>

<TBODY>

<TR>

<CENTER>Заполните заявку на разработку Web дизайна или продвижения вашего

Web-узла сайта от компании <B>Webmeister</B></CENTER><BR></FONT>

<P><FONT face="Arial, Helvetica, Verdana" size=2>Каждый проект отличается своей индивидуальностью, поэтому мы можем прийти к окончательному соглашению, только если предварительно побеседуем с вами и просмотрим материалы.

<P>Будем благодарны, если вы ответите на некоторые вопросы. Заполните необходимую информацию и щелкните на кнопке "Отправить заявку", и мы свяжемся с вами по электронной почте (или если вы предпочитаете, по телефону) в течении одного рабочего дня. </P></FONT></TD></TR></TBODY></TABLE>

<P>

<HR>

<TBODY>

<TR>

<TD>

<P><B><FONT face=Arial size=2>В каком виде услуг вы заинтересованы?

</FONT></B><FONT face=Arial size=2>(Выберите все, что вам подходит.)

</FONT>

<P><FONT face=Arial size=2>Дизайн Web-сайта <INPUT type=checkbox

value=design name=designChoice>       Поддержка

Web-сайта <INPUT type=checkbox value=maint

name=maintChoice>      Реклама Web-сайта <INPUT

type=checkbox value=promo name=promoChoice> </FONT>

<P><B><FONT face=Arial size=2>Перечислите причины создания Web-сайта.

(Если у вас уже имеется Web-сайт, укажите, в каких целях вы его

используете?) </FONT></B><FONT face="Helvetica, Arial, Verdana" size=2>

<P><B><FONT face=Arial size=2>Вы хотите разместить на своем Web-узле фотографии? </FONT></B><FONT face=Arial size=2><BR>yes <INPUT type=radio

CHECKED value=hasPix name=pixChoice> no <INPUT type=radio value=hasNoPix

name=pixChoice> </FONT>

<P><B><FONT face=Arial size=2>Вы хотите рекламировать/продавать на своем

Web-узле какую-нибудь продукцию? </FONT></B><FONT face=Arial size=2><BR>Да

<INPUT type=radio CHECKED value=hasProducts name=cdChoice> Нет <INPUT

type=radio value=hasNoProducts name=cdChoice> </FONT>

<P><B><FONT face=Arial size=2>У вас собственный бизнес или вы являетесь служащим организации? </FONT></B><FONT face=Arial size=2><BR>Имею свой бизнес <INPUT type=radio CHECKED value=isOwner name=bizChoice> Служащий

<P><B><FONT face=Arial size=2>Если вы работаете в организации, не могли бы вы указать ее название? </FONT></B><FONT face=Arial size=2><INPUT size=25

name=corpName> </FONT>

<P><B><FONT face=Arial size=2>Располагаете ли вы дополнительной информацией, которую нам следует учесть при оформлении вашей заявки?

</FONT></B><FONT face="Helvetica, Arial, Verdana" size=2>

<TABLE>

<TBODY>

<TR>

<TD><B><FONT face=Arial size=2>Ваша фамилия: </FONT></B></TD></TR>

<TR>

<TD><FONT face=Arial size=2><INPUT

onblur="if (!exists(this.value)) { alert('Пожалуйста, введите свое имя'); }"

size=25 name=firstName> </FONT></TD>

<TD><FONT face=Arial size=2><INPUT

onblur="if (!exists(this.value)) { alert('Пожалуйста, введите свою фамилию') }"

size=35 name=lastName> </FONT></TD></TR>

<TR>

<TD colSpan=2><B><FONT face=Arial size=2>Какой способ связи вы

предпочитаете (электронная почта, телефон, или оба)?

</FONT></B></TD></TR>

<TR>

<TD align=right><FONT face=Arial size=2>электронная почта<INPUT

type=checkbox value=email name=emailChoice> </FONT></TD>

</FONT></TD></TR>

<TR>

<TD align=right><FONT face=Arial size=2>телефон <INPUT type=checkbox

value=phone name=phoneChoice> </FONT></TD>

</FONT></TD></TR></TBODY></TABLE><FONT face="Helvetica, Arial, Verdana"

size=2>

<P>

</CENTER></FORM>

<HR>

</FONT></TD></TR></TBODY></TABLE></BODY></HTML>

pr4.htm

<HTML><HEAD><TITLE>Фоновая музыка</TITLE>

<BODY>

<H1>Фоновая музыка</H1>

<P>Эта страница имеет фоновую музыку(для браузеров Explorer 3.0 и выше или

Netscape ).</P>

if (navigator.appName.indexOf("Microsoft") > -1) document.write("<BGSOUND SRC='10.mp3'>");

if (navigator.appVersionName.indexOf("Netscape4") > -1) document.write("<EMBED SRC='10.mp3'>");

</SCRIPT>

</BODY></HTML>

pr6.htm

<HTML><HEAD><TITLE>Простая анимация на JavaScript</TITLE>

var cbox=0;

var nbox=1;

var cimage=0;

var nimage=0;

function preload() {

a1 = new Image();

a1.src = "mouse1.gif";

a2 = new Image();

a2.src = "mouse2.gif";

a3 = new Image();

a3.src = "mouse3.gif";

a4 = new Image();

a4.src = "mouse4.gif";

a5 = new Image();

a5.src = "mouse5.gif";

a6 = new Image();

a6.src = "mouse6.gif";

a7 = new Image();

a7.src = "mouse7.gif";

a8 = new Image();

a8.src = "mouse8.gif";

window.setTimeout("next();",500);

}

function next() {

cimage += 1;

if (cimage > 8) {

cimage = 4;

document.images[cbox].src = "mouse0.gif";

cbox = (cbox + 1) % 5;

nbox = (cbox + 1) % 5;

}

nimage = cimage - 5;

if (nimage <= 0) nimage = 0;

document.images[cbox].src = "mouse" + cimage + ".gif";

document.images[nbox].src = "mouse" + nimage + ".gif";

window.setTimeout("next();",100);

}

</SCRIPT>

<H1>Анимация на JavaScript</H1>

<HR>

<IMG height=100 alt="" src="pr6.files/mouse0.gif" width=100 border=0> <IMG

height=100 alt="" src="pr6.files/mouse0.gif" width=100 border=0> <IMG height=100

alt="" src="pr6.files/mouse0.gif" width=100 border=0> <IMG height=100 alt=""

src="pr6.files/mouse0.gif" width=100 border=0> </CENTER>

<HR>

</BODY></HTML>

pr7.htm

<HTML><HEAD><TITLE>Пример таблицы стилей</TITLE>

<STYLE>BODY {

COLOR: blue

}

P {

MARGIN-LEFT: 20%; MARGIN-RIGHT: 20%; TEXT-ALIGN: center

}

H1 {

COLOR: red

}

H2 {

COLOR: red

}

H3 {

COLOR: red

}

UL {

FONT-WEIGHT: bold; COLOR: green

}

</STYLE>

<BODY>

<H1>Добро пожаловать на нашу страницу</H1>

<P>Заголовок имеет красный цвет, т.к. мы определили заголовки H1-H3 цветом "red". Абзац - синий (blue) см.body. Абзац выровнен по центру и имеет левое и правое поле 20% от его размера. </P>

<P style="COLOR: black">Этот абзац содерхит черный текст. Основной стиль был заменен стилем элемента. Изменен только цвет текста, выравнивание остается то же. </P>

<UL>

<LI>Это маркированный список.

<LI>Текст полужирный, зеленого цвета. Это парметры определнные по умолчанию для таких списков.

<LI style="COLOR: red">Этот элемент имеет красный маркер. Стиль по умолчанию для него изменен.

<LI>Этот пункт со стилем по умолчанию (цвет - зеленый). </LI></UL>

<P>Этот абзац со стилем по умолчанию (цвет - синий).</P></BODY></HTML>

pr8.htm

<HTML><HEAD><TITLE>Управление стилями</TITLE>

<META content="MSHTML 6.00.2900.2876" name=GENERATOR></HEAD><FRAMESET

rows=*,*><FRAME name=topframe src="pr8.files/list17-4r.htm"><FRAME name=botframe

src="pr8.files/list17-5r.htm"></FRAMESET></HTML>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD><TITLE>Изменение стилей JavaScript</TITLE>

<BODY>

<H1>Управление стилями JavaScript</H1>

<HR>

Укажите цвет текста абзаца и заголовка и щелкните на кнопке "Reload" (обновить).

Указанные параметры будут применены к нижнему документу.

<FORM name=form1><B>Цвет тексат абзаца: </B><SELECT name=body> <OPTION

value=red selected>Red</OPTION> <OPTION value=blue>Blue</OPTION> <OPTION

value=green>Green</OPTION> <OPTION value=yellow>Yellow</OPTION> <OPTION

value=black>Black</OPTION></SELECT> <BR><B>Цвет текста заголовка: </B><SELECT

name=heading> <OPTION value=red selected>Red</OPTION> <OPTION

value=blue>Blue</OPTION> <OPTION value=green>Green</OPTION> <OPTION

value=yellow>Yellow</OPTION> <OPTION value=black>Black</OPTION></SELECT> <INPUT onclick=parent.botframe.location.reload(); type=button value=Reload>

</FORM></BODY></HTML>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD><TITLE>Применение динамических стилей, используя JavaScript</TITLE>

if ((navigator.appVersion.charAt(0) == "4")

||(navigator.appVersion.charAt(0) == "5")) {

if (navigator.appName == "Netscape")

browser="netscape";

else if (navigator.appName=="Microsoft Internet Explorer")

browser="ie";

else alert("This document requires a 4.0 or later browser.");

}

i = parent.topframe.document.form1.heading.selectedIndex;

hc = parent.topframe.document.form1.heading.options[i].value;

i = parent.topframe.document.form1.body.selectedIndex;

dc = parent.topframe.document.form1.body.options[i].value;

if (browser=="netscape") {

document.tags.BODY.color = dc;

document.tags.H1.color = hc;

}

if (browser=="ie") {

hc1 = "color:" + hc;

dc1 = "color:" + dc;

document.styleSheets["iestyle"].addRule("H1",hc1);

document.styleSheets["iestyle"].addRule("BODY",dc1);

}

</SCRIPT>

<BODY>

<H1>Это заголовок.

document.write(" " + hc + ".")

</SCRIPT>

</H1>

<P>Это основной текст абзаца.</P>

<P>Это второй абзац.

document.write(" Это основной текст " + dc + ".");

</SCRIPT>

</P></BODY></HTML>

pr9.htm

<HTML><HEAD><TITLE>Управление слоями</TITLE>

function showOrHide(value) {

if (value==0) {

if (document.layers)

document.layers["layer3"].visibility='hide';

else

document.all["layer3"].style.visibility='hidden';

}

else if (value==1) {

if (document.layers)

document.layers["layer3"].visibility='show';

else

document.all["layer3"].style.visibility='visible';

}

</SCRIPT>

<BODY>

<H1>Управление слоями, используя JavaScript</H1>

<P>Этот абзац обычного текста вне слоев.</P>

<DIV id=layer1 style="POSITION: static; BACKGROUND-COLOR: lightgreen">Это статический слой, расположенный поверх основного документа HTML. </DIV>

<P>Этот еще один абзац обычного текста.</P>

<DIV id=layer2

style="LEFT: 400px; WIDTH: 100px; POSITION: absolute; TOP: 200px; HEIGHT: 200px; BACKGROUND-COLOR: yellow">Это первый слой. </DIV>

<DIV id=layer3

style="LEFT: 35px; VISIBILITY: hidden; WIDTH: 50px; POSITION: absolute; TOP: 210px; HEIGHT: 50px; BACKGROUND-COLOR: orange">Этот

слой по умолчанию не отображается. Он отображается с помощью JavaScript. </DIV>

<DIV id=layer4

style="LEFT: 100px; WIDTH: 200px; POSITION: relative; TOP: 100px; HEIGHT: 100px; BACKGROUND-COLOR: lightblue">Это последний слой. Заметим, что слои отображаются так, как мы их определили.

</DIV></BODY></HTML>

pr10.htm

<HTML><HEAD><TITLE>Создание анимации с помощью DHTML</TITLE>

var pos1=-95;

var pos2=-95;

var pos3=-95;

var speed1 = Math.floor(Math.random()*10)+2;

var speed2 = Math.floor(Math.random()*10)+2;

var speed3 = Math.floor(Math.random()*10)+2;

function next() {

pos1 += speed1;

pos2 += speed2;

pos3 += speed3;

if (pos1 > 795) pos1 = -95;

if (pos2 > 795) pos2 = -95;

if (pos3 > 795) pos3 = -95;

if (document.layers) {

document.layers[0].left = pos1;

document.layers[1].left = pos2;

document.layers[2].left = pos3;

}

else {

document.all.mouse1.style.left = pos1;

document.all.mouse2.style.left = pos2;

document.all.mouse3.style.left = pos3;

}

window.setTimeout("next();",10);

}

</SCRIPT>

<H1>Создание анимации с помощью DHTML</H1>

<HR>

<DIV id=mouse1

style="LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 100px; HEIGHT: 100px"><IMG

height=100 alt="" src="pr10.files/mouse5.gif" width=100 border=0> </DIV>

<DIV id=mouse2

style="LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 200px; HEIGHT: 100px"><IMG

height=100 alt="" src="pr10.files/mouse5.gif" width=100 border=0> </DIV>

<DIV id=mouse3

style="LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 300px; HEIGHT: 100px"><IMG

height=100 alt="" src="pr10.files/mouse5.gif" width=100 border=0>

</DIV></BODY></HTML>

Размещено на Allbest.ru

...

Страница:

дипломная работа "Разработка web сайта на основе HTML с использованием JavaScript" скачать

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

Разработка Web-сайта на основе HTML с использованием JavaScript
Язык маркировки гипертекстов HTML, основа создания web-страниц. История спецификаций, каскадные таблицы стилей CSS. Способы определения таблиц стилей (стилевого шаблона). Язык подготовки сценариев JavaScript, его использование. Программный код web сайта.

курсовая работа [26,9 K], добавлен 05.07.2009
Разработка web сайта на основе HTML с использованием JavaScript
История html. Гипертекст. Структура web-страницы. Переход внутри одного документа. Переход к другому документу. Правила синтаксиса. Кодирование символов. Использование символов. Управление цветом. Конструктор документов. Способы определения таблиц стилей.

дипломная работа [911,3 K], добавлен 25.02.2005
Сайт муниципального общеобразовательного учреждения школы №1 города Фролово
Практическая значимость создания сайта. Язык программирования JavaScript. Основные области использования языка JavaScript при создании интерактивных HTML-страниц. Язык программирования PHP. Программная основа сайта. Создание оформления дизайна сайта.

дипломная работа [1,1 M], добавлен 05.03.2013
JavaScript
Назначение и применение JavaScript, общие сведения. Понятие объектной модели применительно к JavaScript. Размещение кода на HTML-странице. URL-схема. Вставка (контейнер SCRIPT, принудительный вызов интерпретатора). Программирование свойств окна браузера.

лекция [517,1 K], добавлен 09.03.2009
Создание индивидуального сайта
Создание индивидуального сайта с использованием языка гипертекстовой разметки HTML и языка скриптов JavaScript. Программные средства, используемые при выполнении работы. Основные средства для создания сайта. Разработка CSS-файла (таблица стилей).

лабораторная работа [31,0 K], добавлен 28.10.2010
Разработка сайта "Ремонт и эксплуатация автомобилей ВАЗ"
Особенности создания сайта "Ремонт и эксплуатация автомобилей ВАЗ" содержащего необходимую информацию поэтапной разборки запчастей, а также устранение неисправностей, написанного с использованием языка гипертекстовой разметки HTML и языка JavaScript.

дипломная работа [10,5 M], добавлен 04.06.2019
Приемы программирования на JavaScript
Изучение создания скриптов на JavaScript. Разработка программы выдачи простого предупреждения по событию Click при выборе гипертекстовой ссылки. Применение контейнера SCRIPT для размещение JavaScript-кода. Получение типа программы просмотра HTML-страниц.

контрольная работа [21,1 K], добавлен 15.02.2010
Создание интерактивных Web-приложений с использованием языка программирования JavaScript
Сравнительная характеристика, возможности и функции языков программирования JavaScript и PHP. Основные области их использования. Разработка интерактивного Web-приложения с применением JavaScript на примере теста по теме "Программирование на языке Delphi".

курсовая работа [19,3 K], добавлен 01.07.2014
Разработка сайта АлтГТУ имени И.И. Ползунова с использованием HTML и Java
Особенности программирования на языке HTML и JavaScript. Основные стили форматирования текста. Анализ основных приемов и методов создания страниц, рисунков, таблиц и гиперссылок. Основные цвета и их коды. Разработка собственного сайта и его презентация.

курсовая работа [61,3 K], добавлен 29.01.2016
Формирование формального определения и написание программы, реализующей работу машины Тьюринга (Javascript)
Изучение методик языка Javascript по формализации и решению поставленной задачи, технологических приемов разработки программ на языке Javascript, HTML, CSS. Формально определение машины Тьюринга, распознающую язык. Ее программная модель, протоколы работы.

курсовая работа [220,7 K], добавлен 03.03.2015
Технология написания клиентских приложений с использованием языка сценариев JavaScript
Базовый синтаксис языка сценариев JavaScript. Создание страниц, включающих в себя программы, которые взаимодействуют с пользователем, управляют браузером и динамически создают HTML-содержимое. Работа с объектами, которые инкапсулируют данные и поведение.

лабораторная работа [58,6 K], добавлен 25.05.2016
Создание сайта "Методический кабинет"
Современные Интернет-технологии, Web-дизайн и браузеры. Язык разметки гипертекстовых страниц HTML. Представление текста и графики на Web-страницах. Правила и этапы создания сайта. Влияние дисплеев на Web-дизайн. Сравнительный анализ HTML-редакторов.

дипломная работа [3,3 M], добавлен 21.06.2013
Средства просмотра WWW-страниц
Средства работы с ресурсами Internet. Программы-интерфейсы – www, Lynx, SlipKnot и I-com. Системы Arena, Netscape и Internet Explorer. Отечественная программа Ariadna. JavaScript - средство создания "оживших" страниц Web. Печать документов Internet.

контрольная работа [22,7 K], добавлен 18.11.2009
Создание интерактивных Web-приложений с использованием языка программирования JavaScript
Исследование возможностей и областей использования языка программирования JavaScript. Сравнительный анализ языков программирования JavaScript и PHP. Разработка интерактивного Web-приложения на примере теста по теме "Программирование на языке Delphi".

практическая работа [26,0 K], добавлен 04.02.2015
XMLHttpRequest (AJAX)
Объект XMLHttpRequest (AJAX): отправка и обработка ответов HTTP-запросов с помощью JavaScript. Методы и свойства объекта, общие для Internet Explorer 5, Mozilla, Netscape 7. Алгоритм выполнения, JavaScript-код. PHP-скрипт получения данных из базы.

лабораторная работа [14,9 K], добавлен 06.06.2009
Web-сайт, Html-программирование, дизайн сайта, front page, macromedia Dreamweaver
Язык разметки гипертекстовых страниц HTML. Обеспечение доступности Web-страницы, представление текста и графики. Основные правила и этапы создания сайта, выбор структуры страницы. Оценка экономической целесообразности использования HTML-редакторов.

дипломная работа [86,7 K], добавлен 25.03.2013
Разработка цикла лабораторных работ по интернет–программированию для студентов непрофильных специальностей
Обзор литературы по темам "JavaScript", "PHP" и "Java". Методические разработки лабораторных работ: документы HTML, фреймы, строка состояния и таймер. Основы синтаксиса и обработка запросов с помощью PHP. Объектно-ориентированное программирование в Java.

дипломная работа [106,2 K], добавлен 14.10.2012
Основы JavaScript
Создание интерактивных веб-страниц. Что такое JavaScript. Полная интеграция с браузером. Мощные средства для создания сетевых соединений. Подключение и выполнение JavaScript. Загрузка данных без перезагрузки страницы. Объекты для работы с мультимедиа.

лекция [16,2 K], добавлен 05.02.2012
Автоматизированное рабочее место заместителя директора по воспитательной работе
Характеристика комплекса технических средств для оснащения рабочего места и программного обеспечения ЭВМ. Разработка приложения для управления автоматизированной информационной системой с помощью сценариев JavaScript, HTML и базы данных MS Access.

дипломная работа [9,6 M], добавлен 26.11.2013
Internet Explorer
Характеристика основных программ-просмотрщиков, используемых пользователями: Мicrоsоft Internet Explorer и Netscape Navigator. Проблемы воспроизведения на Web-страницах разнообразных видов объектов. Основные принципы работы Мicrоsоft Internet Explorer.

реферат [19,3 K], добавлен 22.11.2009

Другие документы, подобные "Разработка web сайта на основе HTML с использованием JavaScript"

весь список подобных работ

скачать работу можно здесь

сколько стоит заказать работу?

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