Волжскийуниверситет имени В.Н. Татищева
ФакультетИнформатики и телекоммуникаций
Кафедра «Информатикаи системы управления»
Контрольнаяработа
Подисциплине “Webтехнологии”
Группа ИТЗ-512
Студент
Преподаватель
Тольятти
Введение
Internet — глобальнаякомпьютерная сеть, охватывающая весь мир. Если ранее сеть использоваласьисключительно в качестве среды передачи файлов и сообщений электронной почты,то сегодня решаются более сложные задачи распределенного доступа к ресурсам.
На сегодняшний деньвизитной карточкой каждого сервера, является хорошо оформленный web сайт. Сайт т.е. web страница заполняется ссылками наинформацию. Щелкнув по ссылке, пользователь попадает на интересующую его web страницу. Системой работы сссылками, т.е. с гипертекстом, является www — world wide web, переводится на русский язык как “Всемирная Паутина”. Главноеотличие WWW от остальных инструментов для работы с Internet заключается в том,что WWW позволяет работать практически со всеми доступными сейчас на компьютеревидами документов: это могут быть текстовые файлы, иллюстрации, звуковые ивидео ролики, и т.д. Вы перемещаетесь по сети, переходя от одного документа кдругому по ссылкам. Все эти документы написаны на специально разработанном дляэтого языке, который называется HyperText Markup Language (HTML). Он чем-тонапоминает язык, использующийся для написания текстовых документов, только HTMLпроще. Причем, можно использовать не только информацию, предоставляемуюInternet, но и создавать собственные документы. В последнем случае существуетряд практических рекомендаций к их написанию.
1. JavaScript
Java Script — это языкуправления сценарием отображения документа. Все операции, которые можноисполнять в программе на JavaScript, описывают действия над хорошо известными ипонятными объектам — элементами рабочей области программы Netscape Navigator иконтейнерами языка HTML. Рассмотрим наиболее важные команды.
Этот скрипт выводиттекущее время на запущенном компьютере.
var ned;
var a= newArray();
var a2= newArray();
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 ch1(){ var h=0;
if(document.f.checkbox1.checked==true){h=0;}else{h=1;}
if (h!=1){for(i=0; i
else {for(i=0; i
function ch2(){var h2=0;
if(document.f.checkbox2.checked==true){h2=0;}else{h2=1;}
if (h2!=1){for(i=0; i
else {for(i=0; i
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 соответственно:
functionnedel() { if (ned!=1){ned=1;}else{ned=2;} }
now = newDate();
functionprint_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
var datestring= dayname + ', ' + now.getDate() + ' ' + monthName + ', ' + year;
document.write(' '+ datestring + '');}
var timerID =null
vartimerRunning = false
functionstopclock(){
if(timerRunning)
clearTimeout(timerID)
timerRunning =false}
functionstartclock(){
stopclock()
showtime()}
functionshowtime(){
var now = newDate()
var hours =now.getHours()
var minutes =now.getMinutes()
var seconds =now.getSeconds()
var timeValue= "" + ((hours > 12)? hours — 12: hours)
var timeValue1= "" + ((hours
timeValue +=((minutes
timeValue1 +=((minutes
timeValue +=((seconds
timeValue1 +=((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 – способы отображения заднего фона.
Литература
1. Картузов А.В. Программирование на языке JAVA 2002 г.
2. Управлениесценариями просмотра Web-страниц Павел Храмцов, статья из ComputerWorld
3. JavaScript и Navigator3.0 Павел Храмцов, статья из ComputerWorld
4. Язык иархитектура Java Цишевский В.
Приложение1
Главная страница
/>
Страница “сессия”
/>
Страница “Развлечения”
/>
Приложение2
Листинг программы
Главная страница
Pacpucanue
var ned;
var a= newArray();
var a2= newArray();
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 ch1()
{var h=0;
if(document.f.checkbox1.checked==true){h=0;}else{h=1;}
if (h!=1){for(i=0; i
else {for(i=0; i
function ch2()
{var h2=0;
if(document.f.checkbox2.checked==true){h2=0;}else{h2=1;}
if (h2!=1){for(i=0; i
else {for (i=0;i
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»;}}
functionnedel()
{if(ned!=1){ned=1;}else{ned=2;}}
now = newDate();
functionprint_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();
if ( year
var datestring= dayname + ', ' + now.getDate() + ' ' + monthName + ', ' + year;
document.write(' '+ datestring + '');}
var timerID =null
vartimerRunning = false
functionstopclock(){
if(timerRunning)
clearTimeout(timerID)
timerRunning =false}
functionstartclock(){
stopclock()
showtime()}
functionshowtime(){
var now = newDate()
var hours =now.getHours()
var minutes =now.getMinutes()
var seconds =now.getSeconds()
var timeValue= "" + ((hours > 12)? hours — 12: hours)
var timeValue1= "" + ((hours
timeValue +=((minutes
timeValue1 +=((minutes
timeValue +=((seconds
timeValue1 +=((seconds
timeValue +=(hours >= 12)? " P.M.": " A.M."
document.f.face.value= timeValue
document.f.face.value= timeValue1;
timerID =setTimeout(«showtime()»,1000)
timerRunning =true}
:: расписаниегруппы ИС-412
·
понедельник
1.
125
if(ned==1){document.write(a[11]);}else{document.write(a2[11])}
8:30
-
9:50
6.
if(ned==1){document.write(a[36]);}else{document.write(a2[36])}
16:30
-
17:50
·
настройки
скрыть аудитории
скрытьвремя занятий
не выводить дополнительнуюинформацию
Страница “Сессия”
экзамены
12.14.04 СПО(12:00)
16.14.04 Сети(9:30)
зачеты
11.14.04 Технология ПО(10:00)
15.14.04 Сети(10:30)
13.14.04Графика(10:30)
Страница “Развлечения”