Przejdź do treści

Aktualizacja

Data aktualizacji strony

Często zdarza się, że internauta wchodzący na jakąś stronę, chciałby wiedzieć, kiedy była ona ostatnio aktualizowana. Dzięki takiej informacji mógłby wywnioskować, czy serwis jest aktualizowany na bieżąco i czy nie znajdzie w nim informacji, które dawno utraciły ważność, co w niektórych przypadkach może być bardzo ważne.

Najprostszym sposobem określenia aktualności strony, jest podanie w widocznym miejscu (np. na samym początku) daty jej ostatniej modyfikacji. Można to zrobić oczywiście wpisując "ręcznie" datę, ale po którejś z kolei aktualizacji możesz zapomnieć o tej czynności, nie mówiąc już o tym, że jest to bardzo uciążliwe - szczególnie w przypadku większej ilości stron. Aby pozbyć się wszystkich tych problemów, wystarczy wstawić na każdą ze stron prościutki "skrypcik" (programik), który automatycznie wypisze datę ostatniej modyfikacji strony.

UWAGA! Skrypt tego typu nie zawsze działa! Informacja o dacie modyfikacji dokumentu pochodzi z nagłówka HTTP wysyłanego przez serwer WWW, na którym znajduje się strona. Ponieważ wysyłanie tych nagłówków nie jest obowiązkowe, często odczytanie prawidłowej daty aktualizacji nie jest możliwe. Informacja ta będzie odczytana na pewno, jeśli strona zostanie załadowana nie z Internetu, ale z lokalnego systemu plików.

Dlatego zawsze po umieszczeniu pliku na serwerze WWW sprawdzaj czy skrypt działa poprawnie! Alternatywą może być skrypt PHP, który będzie działał zawsze (musi być zapisany w pliku z rozszerzeniem *.php - np. index.php), jeżeli tylko serwer obsługuje tego typu skrypty:

<?php echo date('d.m.Y', filemtime($_SERVER['SCRIPT_FILENAME'])); ?>
albo
<?php echo date('Y-m-d H:i:s', filemtime($_SERVER['SCRIPT_FILENAME'])); ?>

Jeżeli natomiast Twój serwer nie obsługuje PHP albo tworzysz stronę w wersji offline, uruchamianą z dysku lokalnego lub np. z płyty CD-ROM albo odpowiedni nagłówek HTTP z datą modyfikacji jest wysyłany przez serwer, możesz posłużyć się skryptem JavaScript. W tym celu najpierw zapisz poniższy kod w dowolnym pliku z rozszerzeniem *.js - np. date.js:

/**
 * @author Sławomir Kokłowski {@link http://www.kurshtml.edu.pl}
 * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!)
 */

Date.prototype.date = function(format)
{
	for (var i = 0, c = '', returner = '', formats = new Object(); i < format.length; i++)
	{
		c = format.charAt(i);
		if (c == '\\' && i + 1 < format.length) returner += format.charAt(++i);
		else if (typeof formats[c] != 'undefined') returner += formats[c];
		else
		{
			switch (c)
			{
				case 'a':
					formats[c] = this.getHours() < 12 ? 'przed południem' : 'po południu';
					break;
				case 'd':
					var day = this.getDate();
					formats[c] = (day < 10 ? '0' : '') + day;
					break;
				case 'D':
					var days = new Array('Nie', 'Pon', 'Wto', 'Śro', 'Czw', 'Pią', 'Sob');
					formats[c] = days[this.getDay()];
					break;
				case 'E':
					var month = new Array('stycznia', 'lutego', 'marca', 'kwietnia', 'maja', 'czerwca', 'lipca', 'sierpnia', 'września', 'października', 'listopada', 'grudnia');
					formats[c] = month[this.getMonth()];
					break;
				case 'F':
					var month = new Array('Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień');
					formats[c] = month[this.getMonth()];
					break;
				case 'g':
					formats[c] = (this.getHours() - 1) % 12 + 1;
					break;
				case 'G':
					formats[c] = this.getHours();
					break;
				case 'h':
					var hour = (this.getHours() - 1) % 12 + 1;
					formats[c] = (hour < 10 ? '0' : '') + hour;
					break;
				case 'H':
					var hour = this.getHours();
					formats[c] = (hour < 10 ? '0' : '') + hour;
					break;
				case 'i':
					var minute = this.getMinutes();
					formats[c] = (minute < 10 ? '0' : '') + minute;
					break;
				case 'j':
					formats[c] = this.getDate();
					break;
				case 'l':
					var days = new Array('Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota');
					formats[c] = days[this.getDay()];
					break;
				case 'L':
					formats[c] = this.getFullYear() % 400 && (this.getFullYear() % 4 || !(this.getFullYear() % 100)) ? 0 : 1;
					break;
				case 'm':
					var month = this.getMonth() + 1;
					formats[c] = (month < 10 ? '0' : '') + month;
					break;
				case 'M':
					var month = new Array('Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze', 'Lip', 'Sień', 'Wrz', 'Paź', 'Lis', 'Gru');
					formats[c] = month[this.getMonth()];
					break;
				case 'n':
					formats[c] = this.getMonth() + 1;
					break;
				case 'O':
					var O = -this.getTimezoneOffset() / 60;
					if (O < 0)
					{
						var sign = '-';
						O = -O;
					}
					else sign = '+';
					formats[c] = sign + (O < 10 ? '0' : '') + O + '00';
					break;
				case 'r':
					formats[c] = this.date('D, d M Y H:i:s O');
					break;
				case 's':
					var second = this.getSeconds();
					formats[c] = (second < 10 ? '0' : '') + second;
					break;
				case 'S':
					if (this.getDate().toString().search(/(^|[02-9])1$/) != -1) formats[c] = '-wszy';
					else if (this.getDate().toString().search(/(^|[02-9])2$/) != -1) formats[c] = '-gi';
					else if (this.getDate().toString().search(/(^|[02-9])3$/) != -1) formats[c] = '-ci';
					else if (this.getDate().toString().search(/(^|[02-9])[78]$/) != -1) formats[c] = '-my';
					else formats[c] = '-ty';
					break;
				case 't':
					var months = new Array(31, this.getFullYear() % 400 && (this.getFullYear() % 4 || !(this.getFullYear() % 100)) ? 28 : 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
					formats[c] = months[this.getMonth()];
					break;
				case 'U':
					formats[c] = Date.parse(this) / 1000;
					break;
				case 'w':
					formats[c] = this.getDay();
					break;
				case 'W':
					var day = this.getDay() - 1;
					if (day == -1) day = 6;
					formats[c] = Math.round((this.date('z') - day + 6) / 7);
					if (formats[c] == 0)
					{
						var date = new Date(this.getFullYear() - 1, 11, 31, 23, 59, 59);
						day = date.getDay() - 1;
						if (day == -1) day = 6;
						formats[c] = Math.round((date.date('z') - day + 6) / 7);
					}
					else
					{
						var date = new Date(this.getFullYear(), 11, 31, 23, 59, 59);
						day = date.getDay() - 1;
						if (day == -1) day = 6;
						if (day < 3 && this.date('z') >= date.date('z') - day) formats[c] = 1;
					}
					break;
				case 'Y':
					formats[c] = this.getFullYear();
					break;
				case 'y':
					formats[c] = this.getFullYear().toString().substring(2);
					break;
				case 'z':
					var months = new Array(31, this.getFullYear() % 400 && (this.getFullYear() % 4 || !(this.getFullYear() % 100)) ? 28 : 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
					formats[c] = this.getDate();
					for (var j = 0, month = this.getMonth(); j < month; j++) formats[c] += months[j];
					break;
				case 'Z':
					formats[c] = -this.getTimezoneOffset() * 60;
					break;
				default:
					formats[c] = c;
					break;
			}
			returner += formats[c];
		}
	}
	
	return returner;
}

Następnie w treści nagłówkowej dokumentu (wewnątrz <head>...</head>) wstaw jeden raz:

<script type="text/javascript" charset="iso-8859-2" src="date.js"></script>

W wyróżnionym miejscu oczywiście należy podać lokalizację utworzonego wcześniej pliku date.js. Teraz wystarczy wkleić na stronie w wybranym miejscu przykładowy kod:

<script type="text/javascript">
// <![CDATA[
document.write(new Date(document.lastModified).date('d.m.Y'));
// ]]>
</script>

Sposób wyświetlania daty można zmienić, podając w wyróżnionym miejscu inny szablon formatujący datę. Pojedyncze litery w tym tekście odpowiadają specjalnym kodom formatującym. Przykładowo: litera d zostanie zastąpiona dniem miesiąca, m - numerem miesiąca, natomiast Y - rokiem. W związku z tym wpisanie d.m.Y może poskutkować następującym wynikiem na ekranie:

Lista wszystkich możliwych do użycia kodów w szablonie formatującym datę jest następująca:

  • a - "przed południem" lub "po południu"
  • d - dzień miesiąca, 2 cyfry z zerem na początku; tzn. od "01" do "31"
  • D - dzień tygodnia, tekst, 3 litery; np. "Pią"
  • E - miesiąc, tekst, pełna nazwa w dopełniaczu; np. "stycznia"
  • F - miesiąc, tekst, pełna nazwa; np. "Styczeń"
  • g - godzina, format 12-godzinny bez zera na początku; tzn. od "1" do "12"
  • G - godzina, format 24-godzinny bez zera na początku; tzn. od "0" do "23"
  • h - godzina, format 12-godzinny z zerem na początku; tzn. od "01" do "12"
  • H - godzina, format 24-godzinny z zerem na początku; tzn. od "00" do "23"
  • i - minuty; tzn. od "00" do "59"
  • j - dzień miesiąca bez zera na początku; tzn. od "1" do "31"
  • l - (mała litera 'L') dzień tygodnia, tekst, pełna nazwa; np. "Piątek"
  • L - "1" jeśli rok przestępny, "0" w przeciwnym razie
  • m - miesiąc; tzn. "01" to "12"
  • M - miesiąc, tekst, 3 litery; np. "Sty"
  • n - miesiąc bez zera na początku; tzn. "1" to "12"
  • O - różnica w stosunku do czasu Greenwich; np. "+0200"
  • r - data sformatowana; np. "Czw, 21 Gru 2000 16:01:07 +0200"
  • s - sekundy; np. "00" to "59"
  • S - standardowy sufiks liczebnika porządkowego, tzn. "-wszy", "-gi", "-ci" , "-ty" lub "my"
  • t - liczba dni w danym miesiącu; tzn. od "28" do "31"
  • U - liczba sekund od uniksowej Epoki (1 stycznia 1970 00:00:00 GMT)
  • w - dzień tygodnia, liczbowy, tzn. od "0" (Niedziela) do "6" (Sobota)
  • W - numer tygodnia w roku według ISO-8601, przedział od 1 do 53, gdzie tydzień 1 jest pierwszym tygodniem, który ma co najmniej 4 dni w aktualnym roku, przy czym pierwszym dniem tygodnia jest poniedziałek
  • Y - rok, 4 cyfry; np. "1999"
  • y - rok, 2 cyfry; np. "99"
  • z - dzień roku; tzn. od "1" do "365" ("366")
  • Z - ofset strefy czasowej w sekundach (tzn. pomiędzy "-43200" a "43200"). Ofset dla stref czasowych na zachód od UTC (południka zero) jest zawsze ujemny a dla tych na wschód od UTC jest zawsze dodatni.

Aby normalnie wyświetlić na ekranie literę będącą kodem formatującym, należy ją poprzedzić podwójnym znakiem \\. Na przykład po wpisaniu: "\\d" zostanie wyświetlona po prostu litera "d", a nie dzień miesiąca. Ponadto jeśli w szablonie formatującym datę ma się wyświetlić znak \ trzeba go zamienić na cztery takie znaki: "\\\\".

Przykład:

<script type="text/javascript">
// <![CDATA[
document.write(new Date(document.lastModified).date('Y-m-d H:i:s'));
// ]]>
</script>


<script type="text/javascript">
// <![CDATA[
document.write(new Date(document.lastModified).date('l, j E Y, G:i'));
// ]]>
</script>


<script type="text/javascript">
// <![CDATA[
document.write(new Date(document.lastModified).date('jS E Y \\r., \\go\\d\\z. g:i a (\\d\\z\\ień \\roku: z, \\t\\y\\d\\z\\ień \\roku: W)'));
// ]]>
</script>

Aktualna data

Po niewielkiej modyfikacji można wyświetlić na ekranie bieżącą datę, a nie czas aktualizacji strony. Aby to zrobić wystarczy w drugiej części skryptu usunąć wyrażenie: document.lastModified.

Przykład:

<b>Dzisiaj jest:</b>
<script type="text/javascript">
// <![CDATA[
document.write(new Date().date('l, j E Y'));
// ]]>
</script>
Dzisiaj jest:

Nowość

W serwisie WWW przydatne może się okazać zasygnalizowanie użytkownikowi wprowadzonych ostatnio nowości, poprzez umieszczenie w spisie treści (bezpośrednio obok danej pozycji) albo obok daty aktualizacji (na każdej ze stron) specjalnego obrazka lub napisu, wskazującego, że pozycja ta została ostatnio zaktualizowana. W ten sposób użytkownik już podczas przeglądania spisu treści odnajdzie wszystkie nowości. Zaletą użycia skryptu jest to, że nie musimy pamiętać o usunięciu obrazka (napisu) nowości, ponieważ po nadejściu podanego dnia (i godziny), obrazek sam zniknie z ekranu. Potem w dowolnym czasie (np. przy następnej aktualizacji serwisu) wystarczy tylko usunąć zbędny kod, aby niepotrzebnie nie zaśmiecał źródła dokumentu.

Aby zasygnalizować nowość, należy wstawić w treści nagłówkowej dokumentu (wewnętrz <head>...</head>) następujący kod:

<script type="text/javascript">
// <![CDATA[
function nowosc(dzien, miesiac, rok, godzina, minuta, napis, obrazek)
{
	var obrazek_domyslny = 'nowosc.gif';	// lokalizacja obrazka
	var napis_domyslny = 'NOWOŚĆ';	// tekst alternatywny
	
	if (typeof obrazek == 'undefined') obrazek = obrazek_domyslny;
	if (typeof napis == 'undefined') napis = napis_domyslny;
	if (typeof godzina == 'undefined') godzina = 0;
	if (typeof minuta == 'undefined') minuta = 0;
	
	if (new Date(rok, miesiac-1, dzien, godzina, minuta) > new Date()) document.write(obrazek ? '<img src="' + obrazek + '" alt="' + napis + '"' + (napis != '' ? ' title="' + napis + '"' : '') + ' />': napis);
}
// ]]>
</script>

Dla poprawnego działania skryptu, w wyróżnionych miejscach należy wpisać:

nowosc.gif
Domyślna lokalizacja obrazka, który ma zostać wyświetlony dla zasygnalizowania nowości. Nawet jeśli wpiszemy jakąś ścieżkę dostępu, możemy ją później zmienić dla pojedynczych pozycji na stronie. Dlatego podaje się tutaj lokalizację obrazka, który będzie najczęściej używany dla sygnalizowania nowości.
NOWOŚĆ
Domyślny tekst alternatywny, który pojawi się w przypadku,gdy przeglądarka użytkownika nie będzie mogła wyświetlać obrazków oraz dodatkowo po wskazaniu obrazka myszką. Jeśli chcesz zrezygnować z tekstu alternatywnego, nie wpisuj tutaj nic.

Następnie w wybranym miejscu strony wpisujemy:

<script type="text/javascript">
// <![CDATA[
nowosc(rok,miesiąc,dzień);
// ]]>
</script>

gdzie wyróżniony fragment: "rok,miesiąc,dzień", należy zastąpić datą, która podaje, kiedy dana pozycja przestaje już być nowością.

Pierwszą część powyższego kodu należy wstawić na stronie tylko jeden raz (w treści nagłówkowej). Natomiast druga część może pojawić się dowolną ilość razy - w zależności od liczby nowości.

Można również zapisać ten skrypt w osobnym pliku z rozszerzeniem *.js - np. nowosc.js, a następnie w nagłówku dokumentu wpisać tylko:

<script type="text/javascript" src="nowosc.js"></script>

Trzeba jednak wtedy koniecznie pamiętać o usunięciu z niego dwóch pierwszych i dwóch ostatnich linijek!

Przykład:


Możliwe są również inne sposoby wywołania funkcji nowości:

  1. Z podaniem dodatkowo czasu wygaśnięcia nowości:
    <script type="text/javascript">
    // <![CDATA[
    nowosc(rok,miesiąc,dzień, godzina,minuta);
    // ]]>
    </script>

    UWAGA! Zarówno "dzień", "miesiąc" jak i "godzinę" oraz "minutę" nie należy poprzedzać wiodącym zerem, jeśli stanową one liczbę mniejszą od 10. Ponadto "rok" musi być liczbą czterocyfrową. Trzeba również pamiętać, że jako "godzinę" podaje się liczbę z zakresu 0-23. Zapis: nowosc(2003,2,1, 0,4); jest poprawny, natomiast: nowosc(03,02,01, 00,04); - błędny!

  2. Ze zmienionym tekstem alternatywnym:
    <script type="text/javascript">
    // <![CDATA[
    nowosc(rok,miesiąc,dzień, godzina,minuta, 'tekst');
    // ]]>
    </script>

    Pamiętaj, aby treść tekstu alternatywnego objąć w apostrofy oraz aby nie używać już wewnątrz niego apostrofów! Jeżeli chcesz zmienić tekst alternatywny dla wszystkich nowości na stronie, lepiej to zrobić "zbiorczo" w pierwszej części kodu.

  3. Bez tekstu alternatywnego:
    <script type="text/javascript">
    // <![CDATA[
    nowosc(rok,miesiąc,dzień, godzina,minuta, '');
    // ]]>
    </script>

    Przykład:

  4. Ze zmienionym obrazkiem nowości:
    <script type="text/javascript">
    // <![CDATA[
    nowosc(rok,miesiąc,dzień, godzina,minuta, 'tekst', 'lokalizacja obrazka');
    // ]]>
    </script>

    Przykład:

  5. Bez obrazka, ale z napisem wyświetlanym bezpośrednio na stronie:
    <script type="text/javascript">
    // <![CDATA[
    nowosc(rok,miesiąc,dzień, godzina,minuta, 'tekst', '');
    // ]]>
    </script>

    W tym przypadku w treści napisu można dodatkowo użyć znaczników HTML, np. w celu pogrubienia tekstu albo zmiany jego koloru. Można nawet wstawić odsyłacz prowadzący bezpośrednio do strony z nowością.

    Przykład:



System newsów

Dla internautów odwiedzających naszą stronę bardzo przydatna może się okazać lista wprowadzonych ostatnio nowości w całym serwisie wraz z ich opisami. Najczęściej tego typu skrypty nazywa się systemem newsów. Umieszcza się ją zwykle na stronie głównej. Maja taką zaletę w stosunku do daty aktualizacji, że nie trzeba przeglądać wszystkich stron, aby znaleźć te, które były ostatnio modyfikowane (co w przypadku słabego transferu i obszernej witryny może dość długo trwać). Natomiast w odróżnieniu od sygnalizowania nowości, system newsów zbiera w jednym miejscu wszystkie informacje wraz z opisami wprowadzonych zmian. Wystarczy spojrzeć i już można szybko przenieść się do nowych stron, klikając odpowiednie odsyłacze.

Wymagana wiedza:

Aby wprowadzić system newsów, należy skopiować poniższy kod i zapisać go w pliku z rozszerzeniem *.css - np. news.css:

/* Tytuł: */
.news dt {
	font-size: 14px;	/* rozmiar czcionki */
	text-align: left;	/* wyrównanie tekstu: left, right, center, justify */
	padding: 5px;	/* margines wewnątrz */
	border-width: 1px;	/* grubość obramowania */
	border-style: solid;	/* styl obramowania: solid, dashed, dotted, double, groove, ridge, inset, outset */
	border-color: gray; /* kolor obramowania */
	font-weight: bold;
}
.news dt, .news dt a:link, .news dt a:visited {
	background: silver;	/* tło tytułu */
	color: #505050;	/* kolor tytułu */
	text-decoration: none;
}

/* Treść */
.news dd {
	background: white;	/* tło */
	color: black;	/* kolor tekstu */
	font-size: 12px;	/* rozmiar czcionki */
	border-width: 1px;	/* grubość obramowania */
	border-style: solid;	/* styl obramowania: solid, dashed, dotted, double, groove, ridge, inset, outset */
	border-color: gray; /* kolor obramowania */
	border-top-width: 0;
	margin: 0;
	margin-bottom: 20px;
}
.news_content {
	padding: 5px;	/* margines wewnatrz */
	text-align: justify;	/* wyrównanie tekstu: left, right, center, justify */
}

/* Data */
.news_date {
	font-size: 11px;	/* rozmiar czcionki */
	text-align: left;	/* wyrównanie tekstu: left, right, center, justify */
	padding: 5px;
	padding-bottom: 0;
}
.news_date span {
	font-weight: bold;
}

/* Obrazek: */
.news_img {
	float: left;	/* ustawienie: left, right */
	margin-right: 10px;
	margin-bottom: 5px;
	border: 0;
}

/* Więcej... */
.news_more {
	font-size: 11px;
	text-align: right;
	margin-bottom: 5px;
	margin-right: 15px;
}

/* Autor */
.news_author {
	font-size: 11px;	/* rozmiar czcionki */
	text-align: left;	/* wyrównanie tekstu: left, right, center, justify */
	border-top-width: 1px;	/* grubość obramowania */
	border-top-style: dashed;	/* styl obramowania: solid, dashed, dotted, double, groove, ridge, inset, outset */
	border-top-color: gray; /* kolor obramowania */
	padding: 5px;	/* margines wewnatrz */
	clear: both;
}
.news_author span {
	font-weight: bold;
}

Wszystkie ważniejsze linijki zostały opisane. Oczywiście powyższe deklaracje można dołączyć do istniejącego arkusza stylów strony.

Dalej wykonujemy analogiczną czynność z kodem przedstawionym poniżej, jednak tym razem zapisujemy go w pliku z rozszerzeniem *.js - np. news.js:

/**
 * @author Sławomir Kokłowski {@link http://www.kurshtml.edu.pl}
 * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!)
 */

function News(days)
{
	this.config = {

//////////
// Konfiguracja:
'days': 0,	// ilość dni wyświetlania newsów (0 = zawsze)
// Ustawienia domyślne:
'author': '',	// autor
'email': '',	// e-mail	
'img': '',	// obrazek
'width': '',	// szerokość obrazka
'height': '',	// wysokość obrazka
'target': ''	// ramka (target="...")
//////////

	};
	
	this.il_dni = typeof days != 'undefined' ? days : this.config['days'];
	var now = new Date();
	var content = '';
	
	this.dodaj = function(dzien,miesiac,rok, tytul,tresc, adres,ramka, dodal,email, obraz,width,height)
	{
		if (!this.il_dni || (now - new Date(rok, miesiac-1, dzien))/(24*60*60*1000) < this.il_dni)
		{
			if (dzien < 10) dzien = '0' + dzien;
			if (miesiac < 10) miesiac = '0' + miesiac;
			if (typeof dodal == 'undefined') dodal = this.config['author'];
			if (typeof email == 'undefined') email = this.config['email'];
			if (typeof obraz == 'undefined') obraz = this.config['img'];
			if (typeof obraz == 'undefined') width = this.config['width'];
			if (typeof obraz == 'undefined') height = this.config['height'];
			if (typeof ramka == 'undefined') ramka = this.config['target'];
			var link = adres ? new Array('<a ' + (ramka ? ' target="' + ramka + '"' : '') + 'href="' + adres + '">', '</a>') : new Array('', '');
			
			content +=
				'<dt>' + link[0] + tytul + link[1] + '</dt>' +
				'<dd>' +
					'<div class="news_date"><span>Dodano:</span> ' + dzien + '.' + miesiac + '.' + rok + '</div>' +
					'<div class="news_content">' +
						(obraz != '' ? link[0] + '<img src="' + obraz + '" alt="" class="news_img"' + (width ? ' width="' + width + '"' : '') + (height ? ' height="' + height + '"' : '') + ' />' + link[1] : '') +
						tresc +
					'</div>' +
					(adres ? '<div class="news_more">' + link[0] + 'Więcej...' + link[1] + '</div>' : '') +
					(dodal != '' ? '<div class="news_author"><span>' + (email == '' || email.indexOf('@') > 0 ? 'Dodane przez' : 'Źródło')  + ':</span> ' + (email.replace(/(^ +| +$)/g, '') ? '<a href="' + (email.indexOf('@') > 0 ? 'mailto:' : '') + email + '">' + dodal + '</a>' : dodal) + '</div>' : '') +
				'</dd>';
		}
	}
	
	this.wyswietl = function()
	{
		if (content) document.write('<dl class="news">' + content + '</dl>');
	}
}

Na początku można ustawić zmienne konfiguracyjne. Np. aby w naszym serwisie nie "straszyły" kilkumiesięczne "nowości", można ustawić przez ile dni od ich wprowadzenia mają się wyświetlać na liście. Potem co jakiś czas można czyścić kod z przestarzałych nowości, które już się nie wyświetlają. Jeżeli wszystkie lub większość newsów będzie dodawała ta sama osoba, można podać domyślnego autora i ewentualnie e-mail. Dzięki temu nie trzeba będzie już tego robić podczas dodawania pojedynczych nowości do listy. Oczywiście jeżeli wybrane newsy będą dodane np. przez innego autora, wprowadzenie konfiguracji domyślnej w tym nie przeszkadza. Dla takich specjalnych pozycji będzie wystarczyło po prostu podać różniące się dane wprost przy dodawaniu newsów - domyślne ustawienia konfiguracji zostaną dla tych różniących się elementów nadpisane.

Następnie w nagłówku dokumentu (wewnątrz <head>...</head>) wklejamy:

<link rel="Stylesheet" type="text/css" href="news.css" />
<script type="text/javascript" charset="iso-8859-2" src="news.js"></script>

Na koniec pozostało już tylko wstawić w wybranym miejscu strony treści newsów (nowości):

<script type="text/javascript">
// <![CDATA[
var news = new News();

/////
// Dodawanie newsów w postaci:
// news.dodaj(dzień,miesiąc,rok,
//   'Tytuł','Treść newsa...',
//   'adres','ramka',
//   'autor','e-mail',
//   'obrazek',szerokość,wysokość);
/////

//////////
// Dodawanie newsów:
news.dodaj(dzień,miesiąc,rok, 'Tytuł', 'Treść newsa...');
news.dodaj(dzień,miesiąc,rok, 'Tytuł', 'Treść newsa...');
news.dodaj(dzień,miesiąc,rok, 'Tytuł', 'Treść newsa...');
//////////

news.wyswietl();
// ]]>
</script>

Kolejne newsy na liście dobrze jest układać w kolejności odwrotnej, tzn. najnowsze na początku. Dzięki temu ostatnie wiadomości będą widoczne już na pierwszy rzut oka.

UWAGA!
Treść newsów musi się znajdować w jednej linijce, tzn. absolutnie niedozwolone jest przełamywanie wiersza klawiszem Enter. Ponadto treść, tytuł ani inne elementy normalnie nie mogą zawierać znaków: "'" (apostrof), "\" (odwrócony ukośnik). Jeżeli musimy ich użyć, należy poprzedzić je dodatkowym znakiem "\" - np. "\'", "\\". Poza tym tytuły newsów nie mogą zawierać znaczników HTML. Można je natomiast wpisywać bez przeszkód w treści newsów, np. w celu pogrubienia tekstu albo wstawienia dodatkowego odnośnika czy obrazka.

Dodatkowo pamiętaj, że dni i miesiące w datach, których numer porządkowy jest mniejszy od 10, nie należy poprzedzać zerem na początku, natomiast rok musi być liczbą czterocyfrową. Poprawnie: 1,2,2003, niepoprawnie: 01,02,03.

Można przenosić do nowej linii poszczególne parametry newsa, które są rozdzielone przecinkami:

news(dzień,miesiąc,rok,
	'Tytuł', 'Treść newsa...',
	'adres', 'ramka',
	'autor', 'e-mail',
	'obrazek', 50,50);

Istnieje wiele sposobów dodawania kolejnych newsów (można łączyć kilka w tym samym skrypcie):

  • Data, tytuł, treść:
    news(dzień,miesiąc,rok, 'Tytuł','Treść newsa...');
  • Data, tytuł, treść, adres "Więcej..." (lokalizacja podstrony albo adres internetowy):
    news(dzień,miesiąc,rok, 'Tytuł','Treść newsa...', 'adres');
  • Data, tytuł, treść, adres "Więcej...", nazwa ramki (lub '_blank' jeśli chcemy wczytać stronę w nowym oknie):
    news(dzień,miesiąc,rok, 'Tytuł','Treść newsa...', 'adres','ramka');
  • Data, tytuł, treść, adres "Więcej...", nazwa ramki, autor:
    news(dzień,miesiąc,rok, 'Tytuł','Treść newsa...', 'adres','ramka', 'autor');
  • Data, tytuł, treść, adres "Więcej...", nazwa ramki, autor, e-mail autora:
    news(dzień,miesiąc,rok, 'Tytuł','Treść newsa...', 'adres','ramka', 'autor','e-mail');
  • Data, tytuł, treść, adres "Więcej...", nazwa ramki, źródło:
    news(dzień,miesiąc,rok, 'Tytuł','Treść newsa...', 'adres','ramka', 'źródło',' ');
  • Data, tytuł, treść, adres "Więcej...", nazwa ramki, źródło, link do źródła:
    news(dzień,miesiąc,rok, 'Tytuł','Treść newsa...', 'adres','ramka', 'źródło','link');
  • Data, tytuł, treść, adres "Więcej...", nazwa ramki, autor/źródło, e-mail/link, lokalizacja obrazka newsa (jeśli chcemy podać inny niż domyślny - w początkowej konfiguracji):
    news(dzień,miesiąc,rok, 'Tytuł','Treść newsa...', 'adres','ramka', 'autor/źródło','e-mail/link', 'obrazek',50,50);

Aby pominąć jakieś parametry - ponieważ mają się one nie wyświetlać albo odpowiadają nam wartości domyśle wpisane wcześniej w konfiguracji skryptu - należy wpisać zamiast nich liczbę zero (0), a jeśli parametr taki jest objęty w apostrofy, trzeba usunąć jego zawartość pozostawiając tylko dwa apostrofy (''). Jedynie w przypadku podawania źródła zamiast autora, w miejscu e-maila/linka trzeba wpisać spację (' '), jeżeli chcemy pominąć link do źródła. Dzięki temu możemy podać późniejsze parametry, jednocześnie bez określania wcześniejszych, np.:

news(dzień,miesiąc,rok, 'Tytuł','Treść newsa...', 'adres','', '','', 'obrazek',50,50);

Przykład: