Программирование на языке Java Script

Волжский университет имени В.Н. Татищева

Факультет Информатики и телекоммуникаций

Кафедра «Информатика и системы управления»

Контрольная работа

По дисциплине “Web технологии”

Группа ИТЗ-512

Студент

Преподаватель

Тольятти

Введение

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

На сегодняшний день визитной карточкой каждого сервера, является хорошо оформленный web сайт. Сайт т.е. web страница заполняется ссылками на информацию. Щелкнув по ссылке, пользователь попадает на интересующую его web страницу. Системой работы с ссылками, т.е. с гипертекстом, является www - world wide web, переводится на русский язык как “Всемирная Паутина”. Главное отличие WWW от остальных инструментов для работы с Internet заключается в том, что WWW позволяет работать практически со всеми доступными сейчас на компьютере видами документов: это могут быть текстовые файлы, иллюстрации, звуковые и видео ролики, и т.д. Вы перемещаетесь по сети, переходя от одного документа к другому по ссылкам. Все эти документы написаны на специально разработанном для этого языке, который называется HyperText Markup Language (HTML). Он чем-то напоминает язык, использующийся для написания текстовых документов, только HTML проще. Причем, можно использовать не только информацию, предоставляемую Internet, но и создавать собственные документы. В последнем случае существует ряд практических рекомендаций к их написанию.

1. Java Script

Java Script - это язык управления сценарием отображения документа. Все операции, которые можно исполнять в программе на JavaScript, описывают действия над хорошо известными и понятными объектам - элементами рабочей области программы Netscape Navigator и контейнерами языка HTML. Рассмотрим наиболее важные команды.

Этот скрипт выводит текущее время на запущенном компьютере.

var ned;

var a= new Array();

var a2= new Array();

a[11]='электронный бизнес';

a[12]='сети';

a[13]='';

a[14]='';

a[15]='';

a[16]='';

a[21]='сети';

a[22]='комп. графика';

a[23]='комп. графика';

a[24]='Web - технологии';

a[25]='';

a[26]='';

a[31]='';

a[32]='';

a[33]='СПО';

a[34]='СПО';

a[35]='';

a[36]='';

a[41]='';

a[42]='Технология раз ПП';

a[43]='Технология раз ПП';

a[44]='Web - технологии';

a[45]='';

a[46]='';

a[51]='сети';

a[52]='сети';

a[53]='комп. графика';

a[54]='комп. графика';

a[55]='';

a[56]='';

Объявляем переменную a со значениями <название предметов>, также объявляем переменную ned, которая хранит значении недель (числитель или знаменатель соответственно 1/0):

function cH2() { var h=0;

if (document.f.checkbox1.checked==true){h=0;}else{h=1;}

if (h!=1){for (i=0; i<11*11; i++) {document.all.aud[i].style.color="#EAF2FB";}}

else {for (i=0; i<11*11; i++) {document.all.aud[i].style.color="#666666";}}}

function cH3() {var H3=0;

if (document.f.checkbox2.checked==true){H3=0;}else{H3=1;}

if (H3!=1){for (i=0; i<18*5; i++) {document.all.audv[i].style.color="#EAF2FB";}}

else {for (i=0; i<18*5; i++) {document.all.audv[i].style.color="#666666";}}}

function ch3() {

var h3=0;

if (document.f.checkbox3.checked==true){h3=0;}else{h3=1;}

if (h3!=1){ document.f.help.style.visibility="hidden";}

else {document.f.help.style.visibility="visible";} }

Функции ch1, ch2, ch3 предназначены для изменения стилей для определенных объектов в зависимости от значения переменных h1, h2, h3 соответственно:

function nedel() { if (ned!=1){ned=1;}else{ned=2;} }

now = new Date();

function print_date() {

var day = now.getDay();

var dayname;

if (day==0)dayname="Воскресенье";

if (day==1)dayname="Понедельник";

if (day==2)dayname="Вторник";

if (day==3)dayname="Среда";

if (day==4)dayname="Четверг";

if (day==5)dayname="Пятница";

if (day==6)dayname="Суббота";

var monthNames = new Array("Января", "Февраля", "Марта", "Апреля", "Мая", "Июня", "Июля", "Августа", "Сентября", "Октября", "Ноября", "Декабря");

var month = now.getMonth();

var monthName = monthNames[month];

var year = now.getYear();

Данная функция предназначена для отображения текущей даты. Переменная now хранит текущею дату в общем формате, при объявление переменной day сразу же задается день недели от 0..6. dayname хранит название дня недели в строковом формате, month – текущей месяц, monthName – название месяца, year – текущий год. Последующие функции используютса для вывода текущего времени:

if ( year < 1000 ) year += 1900;

var datestring = dayname + ', ' + now.getDate() + ' ' + monthName + ', ' + year;

document.write('<NOBR> ' + datestring + '</NOBR>');}

<!-- время

var timerID = null

var timerRunning = false

function stopclock(){

if(timerRunning)

clearTimeout(timerID)

timerRunning = false}

function startclock(){

stopclock()

showtime()}

function showtime(){

var now = new Date()

var hours = now.getHours()

var minutes = now.getMinutes()

var seconds = now.getSeconds()

var timeValue = "" + ((hours > 12) ? hours - 12 : hours)

var timeValue1 = "" + ((hours < 10) ? "0" : "") + hours

timeValue += ((minutes < 10) ? ":0" : ":") + minutes

timeValue1 += ((minutes < 10) ? ":0" : ":") + minutes

timeValue += ((seconds < 10) ? ":0" : ":") + seconds

timeValue1 += ((seconds < 10) ? ":0" : ":") + seconds

timeValue += (hours >= 12) ? " P.M." : " A.M."

document.f.face.value = timeValue

document.f.face.value = timeValue1;

timerID = setTimeout("showtime()",1000)

timerRunning = true

2. Таблицы стилей (Cascad Style Sheets)

Каскадные таблицы стилей были предложены w3c(WWW Consorcium) в рамках разработки спецификации HTML. Фактически, в качестве применяемой HTML - разметки они стали доступны только с версий Netscape Navigator 4.0 и Internet Explorer 4.0.

.txtzagalovka {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

font-weight: bold;

color: #FFFFFF;

text-decoration: none;

cursor: default;

text-transform: lowercase;

line-height: 12px;}

.txtraspisan {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

font-weight: normal;

color: #000000;

text-decoration: none;

cursor: default;

line-height: 12px;}

.bgopton {

background-attachment: fixed;

background-image: url(opt.jpg);

background-repeat: no-repeat;

background-position: right bottom;}

body {

background-attachment: fixed;

background-image: url(main.jpg);

background-repeat: no-repeat;

background-position: left bottom;}

.txthelp {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

line-height: 10px;

font-weight: bold;

color: #333333;

text-decoration: none;

border: none;

cursor: default;

background-color: #F5F5F5;

text-align: center;

STYLE>

text-align – выравнивание текста в блоке.

background-color – цвет фона.

cursor – тип курсора при наведение на объект.

border – рамка вокруг объекта.

color – цвет объекта.

font-weight – тип текста.

line-height – высота линии.

font-size – размер шрифта.

font-family – название шрифта.

background-position – позиционирование заднего фона.

background-image – ссылка на объект для заднего фона.

background-repeat – способы отображения заднего фона.

Литература

Картузов А.В. Программирование на языке JAVA 2002 г.

Управление сценариями просмотра Web-страниц Павел Храмцов, статья из ComputerWorld

JavaScript и Navigator 3.0 Павел Храмцов, статья из ComputerWorld

Язык и архитектура Java Цишевский В.

Приложение 1

Главная страница

Страница “сессия”

Страница “Развлечения”

Приложение 2

Листинг программы

Главная страница

<html>

<head>

<title>Pacpucanue</title>

</head>

var ned;

var a= new Array();

var a2= new Array();

a[11]='электронный бизнес';

a[12]='сети';

a[13]='';

a[14]='';

a[15]='';

a[16]='';

a[21]='сети';

a[22]='комп. графика';

a[23]='комп. графика';

a[24]='Web - технологии';

a[25]='';

a[26]='';

a[31]='';

a[32]='';

a[33]='СПО';

a[34]='СПО';

a[35]='';

a[36]='';

a[41]='';

a[42]='Технология раз ПП';

a[43]='Технология раз ПП';

a[44]='Web - технологии';

a[45]='';

a[46]='';

a[51]='сети';

a[52]='сети';

a[53]='комп. графика';

a[54]='комп. графика';

a[55]='';

a[56]='';

a2[11]='электронный бизнес';

a2[12]='сети';

a2[13]='';

a2[14]='';

a2[15]='';

a2[16]='';

a2[21]='сети';

a2[22]='комп. графика';

a2[23]='комп. графика';

a2[24]='Web - технологии';

a2[25]='';

a2[26]='';

a2[31]='';

a2[32]='';

a2[33]='СПО';

a2[34]='СПО';

a2[35]='';

a2[36]='';

a2[41]='';

a2[42]='Технология раз ПП';

a2[43]='Технология раз ПП';

a2[44]='Web - технологии';

a2[45]='';

a2[46]='';

a2[51]='сети';

a2[52]='сети';

a2[53]='сети';

a2[54]='сети';

a2[55]='';

a2[56]='';

function cH2()

{var h=0;

if (document.f.checkbox1.checked==true){h=0;}else{h=1;}

if (h!=1){for (i=0; i<11*11; i++) {document.all.aud[i].style.color="#EAF2FB";}}

else {for (i=0; i<11*11; i++) {document.all.aud[i].style.color="#666666";}}}

function cH3()

{var H3=0;

if (document.f.checkbox2.checked==true){H3=0;}else{H3=1;}

if (H3!=1){for (i=0; i<18*5; i++) {document.all.audv[i].style.color="#EAF2FB";}}

else {for (i=0; i<18*5; i++) {document.all.audv[i].style.color="#666666";}}}

function ch3()

{var h3=0;

if (document.f.checkbox3.checked==true){h3=0;}else{h3=1;}

if (h3!=1){ document.f.help.style.visibility="hidden";}

else {document.f.help.style.visibility="visible";}}

function nedel()

{if (ned!=1){ned=1;}else{ned=2;}}

<!-- дата

now = new Date();

function print_date() {

var day = now.getDay();

var dayname;

if (day==0)dayname="Воскресенье";

if (day==1)dayname="Понедельник";

if (day==2)dayname="Вторник";

if (day==3)dayname="Среда";

if (day==4)dayname="Четверг";

if (day==5)dayname="Пятница";

if (day==6)dayname="Суббота";

var month = now.getMonth();

var monthName = monthNames[month];

var year = now.getYear();

if ( year < 1000 ) year += 1900;

var datestring = dayname + ', ' + now.getDate() + ' ' + monthName + ', ' + year;

document.write('<NOBR> ' + datestring + '</NOBR>');}

<!-- время

var timerID = null

var timerRunning = false

function stopclock(){

if(timerRunning)

clearTimeout(timerID)

timerRunning = false}

function startclock(){

stopclock()

showtime()}

function showtime(){

var now = new Date()

var hours = now.getHours()

var minutes = now.getMinutes()

var seconds = now.getSeconds()

var timeValue = "" + ((hours > 12) ? hours - 12 : hours)

var timeValue1 = "" + ((hours < 10) ? "0" : "") + hours

timeValue += ((minutes < 10) ? ":0" : ":") + minutes

timeValue1 += ((minutes < 10) ? ":0" : ":") + minutes

timeValue += ((seconds < 10) ? ":0" : ":") + seconds

timeValue1 += ((seconds < 10) ? ":0" : ":") + seconds

timeValue += (hours >= 12) ? " P.M." : " A.M."

document.f.face.value = timeValue

document.f.face.value = timeValue1;

timerID = setTimeout("showtime()",1000)

timerRunning = true}

</script>

<tr>

</tr>

<tr>

  :: расписание группы ИС-412</td>

</tr>

<tr>

</tr>

<tr>

<td>

<tr>

</td>

</tr>

</table>

<tr>

<tr>

</tr>

<tr>

<td height="12" valign="top" bgcolor="#7195BD" class="txtnedel"> ·

понедельник</td>

</tr>

<tr>

</tr>

<tr>

<tr>

<td valign="top" bgcolor="#F4F9FD" onMouseOver="javascript:this.style.color='#FF0000';document.f.help.value=a[11];" onMouseOut="javascript:this.style.color='#000000';document.f.help.value='';" title="Название предмета."><script >if (ned==1){document.write(a[11]);}else{document.write(a2[11])}</script>

</td>

</tr>

<tr>

<td>

</td>

</td>

</td>

</tr>

<td>Номер пары.">6. </td>

<td>

<td>Аудитория."> </td>

<td>

<td valign="top" bgcolor="#D6E6F8" onMouseOver="javascript:this.style.color='#FF0000';document.f.help.value=a[36];" onMouseOut="javascript:this.style.color='#000000';document.f.help.value='';" title="Название предмета."><script >if (ned==1){document.write(a[36]);}else{document.write(a2[36])}</script></td>

<td id=audv>Время начала пары.">16:30</td>

<td id=audv>Время окончания пары.">17:50</td>

</tr>

</table></td>

</tr>

<tr>

</tr>

</table></td>

<tr>

</tr>

<tr>

<td height="12" valign="top" bgcolor="#009999" class="txtnedel"> ·

настройки </td>

</tr>

<tr>

</tr>

<tr>

<td>

<tr>

</td>

<td width="91%" class="txtraspisan">скрыть аудитории </td>

</tr>

<tr>

<td>

<td class="txtraspisan">скрыть время занятий</td>

</tr>

<tr>

<td>

<td class="txtraspisan">не выводить дополнительную информацию</td>

</tr>

</table></td>

</tr>

<tr>

</tr>

</table></td>

</tr>

<tr>

</table>

</div>

</layer>

</form>

</body>

</html>

Страница “Сессия”

<html>

<head>

</head>

</script>

<tr>

<td bgcolor="#4673BD" class="txtzagalovka">  экзамены</td>

</tr>

</tr>

<tr>

</tr>

</tr>

<tr>

</tr>

</tr>

</table>

</td>

<td>

</tr>

<tr>

<td bgcolor="#4673BD" class="txtzagalovka">  зачеты</td>

</tr>

</tr>

<tr>

<td class="txtraspisan">  11.14.04 Технология ПО (10:00)</td>

</tr>

</tr>

<tr>

</tr>

</tr>

<tr>

<td class="txtraspisan">  13.14.04 Графика(10:30)</td>

</tr>

</table>

</form>

</body>

</html>

Страница “Развлечения”

<html>

<head>

</head>

<tr>

<td>

</tr>

</form>

</body>

</html>