Органайзер с возможностью записи заметок по дате на языке javascript

Обычно  графические файлы не смешивают  с HTML-текстами, а помещают в отдельный  каталог pic, который является подкаталогом для каталога с программами (html-файлами). Тогда команда вывода графики будет иметь вид: <IMG src=./pic/img.gif>

Атрибут alt = "текст надписи"

Если  браузер не находит картинки в  указанном месте на диске, он вместо нее рисует на экране маленький прямоугольник  и вписывает в него надпись, которая  задана атрибутом alt:

<IMG src=monstr.jpg alt="Страшный зверь">

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

<IMG src=./pic07/cat7.gif alt="А нас и тут неплохо кормят!">

Атрибуты  width = n и height = m

Эти атрибуты задают ширину и высоту (в пикселах) прямоугольника, в который выводится картинка.

Если  атрибуты не заданы, картинка рисуется в естественных размерах.

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

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

Атрибут border = n

Атрибут позволяет задать рамку иллюстрации  толщиной в n пикселов.

При отсутствии атрибута, или при значении n=0 рамка  не рисуется.

Ниже расположены ссылки на испытательные стенды. На них можно проверить работу атрибутов src, alt, width, height, border, как по отдельности, так и в совокупности.

Атрибут align

Этот  атрибут позволяет определять положение  иллюстрации по отношению к соседним элементам документа. Можно использовать следующие значения атрибута:

align=top		вертикальное выравнивание по верхнему краю
align=middle		вертикальное выравнивание по центру
align=bottom		вертикальное выравнивание по нижнему  краю
align=left		горизонтальное выравнивание по левому краю
align=right		горизонтальное выравнивание по правому  краю

В моем органайзере  присутствует картинка. Расположена в верхнем левом углу, с размерами 500*500:

<img src="x_5b25852a.jpg" width=500 height=500 hspace=5 vspace=0 align=left><p>

 Рис.2.

 

Создание cookies в JavaScript

JavaScript поддерживает встроенный объект с именем document.cookie для работы с кукисам. Этот объект хранит все кукисы, доступные для страницы, с которой запущен скрипт.

Для работы с кукисами можно воспользоваться функций SetCookie:

<SCRIPT LANGUAGE="JavaScript">

function setCookie (name, value, expires, path, domain, secure) {

      document.cookie = name + "=" + escape(value) +

        ((expires) ? "; expires=" + expires : "") +

        ((path) ? "; path=" + path : "") +

        ((domain) ? "; domain=" + domain : "") +

        ((secure) ? "; secure" : "");

}

</SCRIPT>

Значения  name и value являются обязательными, а остальные не обязательны. Ниже приведён пример использования этой функции:

<SCRIPT LANGUAGE="JavaScript">

setCookie("foo", "bar", "Mon, 01-Jan-2001 00:00:00 GMT", "/");

</SCRIPT>

Функция SetCookie довольно универсальна, в тех случаях, когда нужно создать много кукисов, либо когда требуется устанавливать параметры на лету.

Для получения  значения кукисов в JavaScript, можно воспользоваться document.cookie. Обычно, document.cookie имеет строку следующего формата:

foo=bar;this=that;somename=somevalue;.....

Эта строка содержит пары имя=значение, разделённые точкой с запятой. Ниже приведена функция getCookie(), которая позволяет осуществить разбор параметров этой строки:

function getCookie(name) {

var cookie = " " + document.cookie;

var search = " " + name + "=";

var setStr = null;

var offset = 0;

var end = 0;

if (cookie.length > 0) {

offset = cookie.indexOf(search);

if (offset != -1) {

offset += search.length;

end = cookie.indexOf(";", offset)

if (end == -1) {

end = cookie.length;

}

setStr = unescape(cookie.substring(offset, end));

}

}

return(setStr);

}

Данный  скрипт представляет собой простой счетчик посещений страницы

function fixDate(date) {

var base = new Date(0)

var skew = base.getTime()

if (skew > 0)

date.setTime(date.getTime() - skew)\

В том месте, где необходимо выводить счетчик  пишется:

<script language="JavaScript"> 
<!-- 
var now = new Date() 
fixDate(now) 
now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000) 
var visits = getCookie("counter") 
if (!visits) 
visits = 1 
else 
visits = parseInt(visits) + 1 
setCookie("counter", visits, now) 
document.write("Вы были здесь " + visits + " раз(а).") 
//--> 
</script>

Результат.

Вы были здесь 1 раз(а).

 

Вывод текущей даты и времени  на странице

Рис. 3.

function getTime() {

// initialize time-related variables with current time settings

var now = new Date()

var hour = now.getHours()

var minute = now.getMinutes()

now = null

var ampm = ""

// validate hour values and set value of ampm

if (hour >= 12) {

hour -= 12

ampm = "PM"

} else

ampm = "AM"

hour = (hour == 0) ? 12 : hour

// add zero digit to a one digit minute

if (minute < 10)

minute = "0" + minute // do not parse this number!

// return time string

return hour + ":" + minute + " " + ampm

}

Функция определения количества дней в месяце

Аргументы: date - содержит год и месяц  
Назначение: Определяет количество дней в месяце  
Возвращает: Количество дней и в случае если функции была передана не дата то Null

Function DaysInMonth(date As Variant) As Variant  
If VarType(D) <> 7 Then  
    DaysInMonth = Null  
Else  
    Select Case Month(D)  
      Case 2  
        If  LeapYear(Year(D)) Then  
          DaysInMonth = 29  
        Else  
          DaysInMonth = 28  
        End If  
      Case 4, 6, 9, 11  
        DaysInMonth = 30  
      Case 1, 3, 5, 7, 8, 10, 12  
        DaysInMonth = 31  
    End Select  
End If  
End Function

 

Так же я  использую функции для вывода месяца, дня недели:

function getMonthName(month)

function getDays(month, year)

 

Рис. 4

Скрипт падающего снега

 Рис. 5.

В тело html-страницы вставляем javascript

<script LANGUAGE="Javascript">

 

var no = 50; // snow number

var speed = 10; // smaller number moves the snow faster

var snowflake = "snow.gif";

 

var ns4up = (document.layers) ? 1 : 0;  // browser sniffer

var ie4up = (document.all) ? 1 : 0;

var dx, xp, yp;    // coordinate and position variables

var am, stx, sty;  // amplitude and step variables

var i, doc_width = 800, doc_height = 600;

if (ns4up) {

doc_width = self.innerWidth;

doc_height = self.innerHeight;

} else if (ie4up) {

doc_width = document.body.clientWidth;

doc_height = document.body.clientHeight;

}

dx = new Array();

xp = new Array();

yp = new Array();

am = new Array();

stx = new Array();

sty = new Array();

for (i = 0; i < no; ++ i) { 

dx[i] = 0;                        // set coordinate variables

xp[i] = Math.random()*(doc_width-50);  // set position variables

yp[i] = Math.random()*doc_height;

am[i] = Math.random()*20;         // set amplitude variables

stx[i] = 0.02 + Math.random()/10; // set step variables

sty[i] = 0.7 + Math.random();     // set step variables

if (ns4up) {                      // set layers

if (i == 0) {

document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");

document.write("top=\"15\" visibility=\"show\"><img src=\"");

document.write(snowflake + "\" border=\"0\"></layer>");

} else {

document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");

document.write("top=\"15\" visibility=\"show\"><img src=\"");

document.write(snowflake + "\" border=\"0\"></layer>");

   }

} else if (ie4up) {

if (i == 0) {

document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");

document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");

document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");

document.write(snowflake + "\" border=\"0\"></div>");

} else {

document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");

document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");

document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");

document.write(snowflake + "\" border=\"0\"></div>");

      }

   }

}

function snowNS() {  // Netscape main animation function

for (i = 0; i < no; ++ i) {  // iterate for every dot

yp[i] += sty[i];

if (yp[i] > doc_height-50) {

xp[i] = Math.random()*(doc_width-am[i]-30);

yp[i] = 0;

stx[i] = 0.02 + Math.random()/10;

sty[i] = 0.7 + Math.random();

doc_width = self.innerWidth;

doc_height = self.innerHeight;

}

dx[i] += stx[i];

document.layers["dot"+i].top = yp[i];

document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);

}

setTimeout("snowNS()", speed);

}

function snowIE() {  // IE main animation function

for (i = 0; i < no; ++ i) {  // iterate for every dot

yp[i] += sty[i];

if (yp[i] > doc_height-50) {

xp[i] = Math.random()*(doc_width-am[i]-30);

yp[i] = 0;

stx[i] = 0.02 + Math.random()/10;

sty[i] = 0.7 + Math.random();

doc_width = document.body.clientWidth;

doc_height = document.body.clientHeight;

}

dx[i] += stx[i];

document.all["dot"+i].style.pixelTop = yp[i];

document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);

}

setTimeout("snowIE()", speed);

}

if (ns4up) {

snowNS();

} else if (ie4up) {

snowIE();

}

</script>

Смена фона страницы

Чтоб  изменять цвет фона страницы в режиме онлайн необходимо воспользоваться кодом:

<form  >

<select size=4 name=clr onChange="document.bgColor=this.options[this.selectedIndex].value">

<option value="red">red

<option value="tan">tan

<option value="blue">blue

<option value="lime">lime

<option value="gold">gold

<option value="black" Selected>black

<option value="white">white

<option value="wheat">wheat

<option value="yellow">yellow

<option value="tomato">tomato

<option value="salmon">salmon

<option value="hotpink">hotpink

<option value="darkred">dark red

<option value="turquoise">turquoise

<option value="chocolate">chocolate

<option value="deeppink">deep pink

<option value="darkkhaki">dark khaki

<option value="cadetblue ">cadet blue

<option value="aquamarine">aquamarine

<option value="springgreen">springgreen

<option value="darkslateblue">dark slate

<option value="darksalmon">dark salmon

<option value="darkgoldenrod">dark goldenrod

</select>

</form>

Рис. 6. 

Графическое представление web-страницы

Рис. 6.

 

 

 

 

 

 

 

 

 

 

 

Заключение

 

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

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

 

Список литературы

 

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

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

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

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

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

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

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

8. http://www.robotland.ru/

 

Приложение 

<html>

<head>

<title>Органайзер</title>

</head>

<body bgcolor="FFCC66">

<font  size=8 color=#191970 face=Bookman Old Style><i><b><p align=right>Мой Органайзер</p></b></i></font>