Тут множество всяких мелочей как улучшить сайт
Мелочи для юнного вебмастера
Страница: 1
Сообщений 1 страница 11 из 11
Поделиться12008-08-30 19:00:34
- Администратор
- Зарегистрирован: 2008-06-12
- Приглашений: 0
- Сообщений: 46
- Уважение: [+1/-0]
- Позитив: [+3/-0]
- Провел на форуме:
1 день 9 часов - Последний визит:
2009-02-08 19:42:40
Поделиться22008-08-30 19:16:20
Я придумал вот что! Тот кто хочет выводить анегдот во фрейм сообщений я щас скажу как это делается:
Заходим в админку, находим пункт Дизайн и нажимаем HTML-Документы
Создаём новый файл anegdot!
Открываем Файл anegdot.html и пишем туда следующее:
Код:
<html>
<head>
<link rel=STYLESHEET type=text/css href=style.css>
</head>
<body>
<body class=anegdot-body>
<script language="JavaScript" src="http://hl2css.z16.ru/anek/indexjs.php"></script>
</body>
</html>
!
P.s. я прописал <body class=anegdot-body> и <link rel=STYLESHEET type=text/css href=style.css> для того чтоб у анегдотов был фон кто хочет фон на анегдоты заходим в Дизайн, стили и прописываем следуюшее:
Код:
.anegdot-body {
background-image:url('адресс_фона');
}
Далее мы заходим в Модерацию и находим там Фильтрация чата и вписываем туда следующее:
Код:
#анегдот^Чтоб вам небыло скучно вот вам анегдот <br><iframe src="anegdot.html" name=iframe frameborder=0 width=200 height=300></iframe>^
P.s.2. Когда выводим анегдот можно писать в чат просто команду "анегдот" он тоже будет выводить анегдоты и без решётки
Приём скрытия/раскрытия отображения любого ХТМЛ
Для скрытия кода пользуемся стилями display:none; (скрыть) и display:block; (раскрыть)
<div id=hide1 style="display:none;">
Тут любой ХТМЛ
</div>
<a href=# onclick="obj=document.getElementById('hide1'); if(obj.style.display=='none') obj.style.display='block'; else obj.style.display='none';">показать/скрыть</a>
А если вам нужен инфомеры то предлагаю свой.Вставте где вам угодень.
вот код
Код:
<script type="text/javascript" src="http://elnet.ucoz.ru/informer/14-1"></script>
Классный текст..... вставлейте во врейм сообщений
---------------------------------------------------------------
<script>
farbbibliothek = new Array();
farbbibliothek[0] = new Array("#FF0000","#FF1100","#FF2200","#FF3300","#FF4400","#FF5500","#FF6600","#FF7700","#FF8800","#FF9900","#FFaa00","#FFbb00","#FFcc00","#FFdd00","#FFee00","#FFff00","#FFee00","#FFdd00","#FFcc00","#FFbb00","#FFaa00","#FF9900","#FF8800","#FF7700","#FF6600","#FF5500","#FF4400","#FF3300","#FF2200","#FF1100");
farbbibliothek[1] = new Array("#00FF00","#000000","#00FF00","#00FF00");
farbbibliothek[2] = new Array("#00FF00","#FF0000","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00");
farbbibliothek[3] = new Array("#FF0000","#FF4000","#FF8000","#FFC000","#FFFF00","#C0FF00","#80FF00","#40FF00","#00FF00","#00FF40","#00FF80","#00FFC0","#00FFFF","#00C0FF","#0080FF","#0040FF","#0000FF","#4000FF","#8000FF","#C000FF","#FF00FF","#FF00C0","#FF0080","#FF0040");
farbbibliothek[4] = new Array("#FF0000","#EE0000","#DD0000","#CC0000","#BB0000","#AA0000","#990000","#880000","#770000","#660000","#550000","#440000","#330000","#220000","#110000","#000000","#110000","#220000","#330000","#440000","#550000","#660000","#770000","#880000","#990000","#AA0000","#BB0000","#CC0000","#DD0000","#EE0000");
farbbibliothek[5] = new Array("#000000","#000000","#000000","#FFFFFF","#FFFFFF","#FFFFFF");
farbbibliothek[6] = new Array("#0000FF","#FFFF00");
/*
0 - Rood-Geel-overgang -Standaard
1 - Matrix-Effect
2 - Scanner
3 - Regenboog-effect
4 - Rood-Zwart-overgang
5 - Zebra
6 - Geel-Blauw-Stroboskoop
*/
farben = farbbibliothek[0]; // Geef hier aan ( met een getal tussen [0] zie voor uitleg hierboven ) welke kleur-overgang gebruiktmoet worden
function farbschrift()
{
for(var i=0 ; i<Buchstabe.length; i++)
{
document.all["a"+i].style.color=farben[i];
}
farbverlauf();
}
function string2array(text)
{
Buchstabe = new Array();
while(farben.length<text.length)
{
farben = farben.concat(farben);
}
k=0;
while(k<=text.length)
{
Buchstabe[k] = text.charAt(k);
k++;
}
}
function divserzeugen()
{
for(var i=0 ; i<Buchstabe.length; i++)
{
document.write("<span id='a"+i+"' class='a"+i+"'>"+Buchstabe[i] + "</span>");
}
farbschrift();
}
var a=1;
function farbverlauf()
{
for(var i=0 ; i<farben.length; i++)
{
farben[i-1]=farben[i];
}
farben[farben.length-1]=farben[-1];
setTimeout("farbschrift()",30);
}
// Zu Demonstrationszwecken*****************
var farbsatz=1;
function farbtauscher()
{
farben = farbbibliothek[farbsatz];
while(farben.length<text.length)
{
farben = farben.concat(farben);
}
farbsatz=Math.floor(Math.random()*(farbbibliothek.length-0.0001));
}
setInterval("farbtauscher()",5000);
//*******************************************
</script>
<p align="center"><font class="modes" size=5> <font face="Verdana"><b>
<script>
text= "www.welcome.mpchat.ru"; //verander hier de tekst
string2array(text);
divserzeugen();
</script>
</b></font>
<br>
</font></p>
<hr>
Астрологический калькулятор
Код:
<meta http-equiv = "content-type" content = "text/html; charset = Windows-1251">
<SCRIPT LANGUAGE="JavaScript">
function signs() {
var start = 1901, birthyear = document.zodiac.year.value, date=document.zodiac.date.value, month=document.zodiac.month.selectedIndex;
with (document.zodiac.sign){
if (month == 1 && date >=20 || month == 2 && date <=18) {value = "Водолей";}
if (month == 1 && date > 31) {value = "Ошибка!";}
if (month == 2 && date >=19 || month == 3 && date <=20) {value = "Рыбы";}
if (month == 2 && date > 29) {value = "Ошибка!";}
if (month == 3 && date >=21 || month == 4 && date <=19) {value = "Овен";}
if (month == 3 && date > 31) {value = "Ошибка!";}
if (month == 4 && date >=20 || month == 5 && date <=20) {value = "Телец";}
if (month == 4 && date > 30) {value = "Ошибка!";}
if (month == 5 && date >=21 || month == 6 && date <=21) {value = "Близнецы";}
if (month == 5 && date > 31) {value = "Ошибка!";}
if (month == 6 && date >=22 || month == 7 && date <=22) {value = "Рак";}
if (month == 6 && date > 30) {value = "Ошибка!";}
if (month == 7 && date >=23 || month == 8 && date <=22) {value = "Лев";}
if (month == 7 && date > 31) {value = "Ошибка!";}
if (month == 8 && date >=23 || month == 9 && date <=22) {value = "Дева";}
if (month == 8 && date > 31) {value = "Ошибка!";}
if (month == 9 && date >=23 || month == 10 && date <=22) {value = "Весы";}
if (month == 9 && date > 30) {value = "Ошибка!";}
if (month == 10 && date >=23 || month == 11 && date <=21) {value = "Скорпион";}
if (month == 10 && date > 31) {value = "Ошибка!";}
if (month == 11 && date >=22 || month == 12 && date <=21) {value = "Стрелец";}
if (month == 11 && date > 30) {value = "Ошибка!";}
if (month == 12 && date >=22 || month == 1 && date <=19) {value = "Козерог";}
if (month == 12 && date > 31) {value = "Ошибка!";}
}
x = (start - birthyear) % 12
with (document.zodiac.csign){
if (x == 1 || x == -11) {value = "Крыса";}
if (x == 0) {value = "Бык";}
if (x == 11 || x == -1) {value = "Тигр";}
if (x == 10 || x == -2) {value = "Кролик";}
if (x == 9 || x == -3) {value = "Дракон";}
if (x == 8 || x == -4) {value ="Змея";}
if (x == 7 || x == -5) {value = "Лошадь";}
if (x == 6 || x == -6) {value = "Овца";}
if (x == 5 || x == -7) {value = "Обезьяна";}
if (x == 4 || x == -8) {value = "Петух";}
if (x == 3 || x == -9) {value = "Собака";}
if (x == 2 || x == -10) {value = "Кабан";}
}}
</script>
<form name="zodiac">
<center>
<table bgcolor="#60d4ff" border="2" bordercolor="#000000" rules="none" cellspacing="0" cellpadding="4">
<tr><td><b><i>Year</i></b></td>
<td><div align="right"><input type="text" size="10" name="year" value="Год" onClick=value=""></div></td>
<td> </td>
<tr><td><b><i>Месяц</i></b></td>
<td><div align="right">
<select name="month">
<option value="x">Месяц</option>
<option value="1">Январь</option>
<option value="2">Февраль</option>
<option value="3">Март</option>
<option value="4">Апрель</option>
<option value="5">Май</option>
<option value="6">Июнь</option>
<option value="7">Июль</option>
<option value="8">Август</option>
<option value="9">Сентябрь</option>
<option value="10">Октябрь</option>
<option value="11">Ноябрь</option>
<option value="12">Декабрь</option>
</select></div></td>
<td> </td></tr>
<tr><td><b><i>День</i></b></td>
<td><div align="right"><input type="text" name="date" value="День" size="3" onClick=value=""></td>
<td><input type="button" value="Расчет" onClick="signs()"></div></td></tr>
<tr><td><b><i>Знак Зодиака:</i></b></td>
<td><div align="right"><input type="text" name="sign" size="12" value="" align="right"></div</td></tr>
<td> </td></tr>
<tr><td><b><i>Восточный календарь:</i></b></td>
<td><div align="right"><input type="text" name="csign" size="12"></div></td>
<td> </td></tr>
</table>
</center>
</form>
Меню сбоку
Код:
<HTML>
<body bgcolor="#FFFFFF" marginwidth="0" marginheight="0">
<!--***** Paste the following two lines directly below the body tag ************************-->
<script language="JavaScript1.2" src="sample1_data.js"></script>
<script language="JavaScript1.2" src="cs_script.js"></script>
<br>
<br>
<!--***** Position your image map and rollovers by pasting the following line anywhere within your HTML page **-->
<script language="JavaScript1.2" src="cs_map.js"></script>
<!--***** Position your content area by pasting the following line anywhere within your HTML page **-->
<script language="JavaScript1.2" src="cs_content.js"></script>
</body>
</HTML>
Поделиться32008-08-30 19:29:28
Язык Java script:
- это обьектно-ориентированный язык, предназначенный для создания приложений в Интернете. Наиболее типичный пример- обработка Анкеты, заполненной пользователем:
проверка правильности входных данных,
выдача на экран сообщений,
переработка данных,
запись в файл,
отправка ответа пользователю,
и другие необходимые операции.
Язык JavaScript является системно-независимым и совместим между всеми типами компьютеров, работающими в Интернет. Программы на языке JavaScript включаются в состав HTML документа и, фактически, этот язык может считаться расширением состава команд HTML. Поэтому для создания программ на JavaScript не требуется никаких дополнительных средств, необходим лишь браузер, поддерживающий JavaScript (Браузеры Netscape Navigator 2.0 и выше или Microsoft Internet Explorer).
Каждая вставка JavaScript в HTML- документе начинается командой <SCRIPT> с необязательным параметром LANGUAGE и заканчивается командой </SCRIPT>.
Например, следующий фрагмент:
<SCRIPT LANGUAGE="JavaScript">
document.write("Первый пример на JavaScript");
</SCRIPT>
Выводит на зкран строку:
Первый пример на JavaScript
JavaScript очень удобен для создания и отладки Web-страниц. Я не собираюсь приводить в данном разделе полное описание языка, я хочу на простейших примерах познакомить начинающих Web-мастеров с основами языка.
Язык JavaScript основан на понятиях: обьект, аттрибут и функция. Обьекты- это, например, текущее окно (Window), текущий документ (document), кнопки (button, checkbox, select и др.), дата (date), обработки данных (number, array, math, string и др.).
Аттрибут обьекта- это входное или выходное данное, например:
- входное- document.lastModified - разработчик получает дату и время последней модификации документа,
- выходное- document.fgColor - разработчик задает цвет текста документа.
Функция выполняет определенные действия, например, document.write(parameter) выводит parameter в текущий документ. Каждый обьект имеет свой набор аттрибутов и функций. Внешне функция отличается от обьекта наличием скобок ().
Кроме функций, принадлежащих обьектам, Вы можете создавать свои функции. Обычно функция создается при необходимости многократного вызова одной и той же последовательности команд. Тогда эта последовательность команд записывается в виде функции, и, вызывая эту функцию, мы тем самым вызываем всю группу команд.
Например, фрагмент:
<SCRIPT LANGUAGE="JavaScript">
function Write3Lines() {
document.write("Строка 1<BR>");
document.write("Строка 2<BR>");
document.write("Строка 3<BR>");
}
for (var ind=0; ind < 4; ind++) {
Write3Lines();
}
</SCRIPT>
Выводит на экран:
Строка 1
Строка 2
Строка 3
Строка 1
Строка 2
Строка 3
Строка 1
Строка 2
Строка 3
Программистам на С все ясно. Для тех, кто не знает С:
Строка for означает следующее:
- Оператор for- оператор цикла, начинающегося символом { и заканчивающегося символом },
- Переменная (var)- счетчик цикла, названная ind,
- При первом выполнении цикла счетчик равен 0 (ind=0),
- Цикл выполняется до тех пор, пока эта переменная не превышает 4 (ind < 4),
- При каждом выполнении цикла его счетчик увеличивается на 1 (ind++).
Предупреждение. Команды <BR> и <P> не являются командами JavaScript, и их применение возможно только внутри литералов , как в вышеприведенных примерах, иначе возникает чертовщина в виде совершенно непонятных ошибок и появления предупреждающих окон JavaScript.
Поделиться42008-08-30 19:32:18
Обьект описывает HTML- документ, выведенный на экран в данный момент. Включает следующие основные функции:
- write - вывод информации в документ,
- writeln - то же с переходом на новую строку,
Основные аттрибуты:
- location - адрес документа, ссылающегося на данный,
- title - получение заголовка документа,
- bgСolor - задает цвет фона,
- fgСolor - задает цвет текста документа,
- linkСolor - задает цвет непосещенных ссылок,
- vlinkСolor - задает цвет посещенных ссылок,
- lastModified - дата и время последней корректировки,
- URL - URL документа, содержащего ссылку на данный документ,
- referrer - URL документа, из которого "браузер" лошел до данного,
- images[] - массив ссылок в документе,
- links[] - массив ссылок в документе,
- anchors[] - массив меток (адресов ссылок) в документе,
- forms[] - массив обьектов Form, по одному для каждого Form,
- images.length - количество обьектов images в документе,
- links.length - количество обьектов links в документе,
- anchors.length - количество обьектов anchors в документе,
- forms.length - количество обьектов images в документе, не работает под MS Internet Explorer.
Команда write:
Выведем на экран простой текст:
<SCRIPT LANGUAGE="JavaScript">
document.write("Текст, выведенный с помощью команды write");
</SCRIPT>
Результат выполнения этих команд:
Текст, выведенный с помощью команды write
Отметим следующее:
- Каждая вставка в JavaScript в HTML-документе начинается командой <SCRIPT> и заканчивается командой </SCRIPT>
- Вывод сообщения осуществляется с помощью команды write обьекта document
- Для обработки текста можно использовать команды HTML, например, для вывода текста жирным шрифтом задайте:
<SCRIPT LANGUAGE="JavaScript">
document.write("<B>Жирный шрифт</I>");
</SCRIPT>
И Вы получите:
Жирный шрифт
- Аналогично, можно вывести курсивный шрифт и с подчеркиванием, изменить размер и цвет текста.
Для вывода графмческого изображения picture.gif зададим команду: <SCRIPT LANGUAGE="JavaScript">
document.write("<B><IMG SRC='picture.gif'></I>");
</SCRIPT>
Обратите внимание, что имя файла задано в одинарных кавычках- для того, чтобы избежать путаницу, действует правило: внутри двойных кавычек пишем одинарные, внутри одинарных- соответственно, двойные.
Изменение цвета текста и фона:
<SCRIPT LANGUAGE="JavaScript">
document.bgColor = "#008000",
document.fgColor = "#FFFFFF",
</SCRIPT>
Устанавливается темно-зеленый цвет фона (008000) и белый цвет текста (FFFFFF).
Вывод заголовка документа:
<SCRIPT LANGUAGE="JavaScript">
document.write(document.title);
</SCRIPT>
Дата последней модификации страницы:
Без указания даты последней корректировки не обходится ни одна уважающая себя страница. В JavaScript эта дата задается следующим образом:
<SCRIPT LANGUAGE="JavaScript">
document.write(document.lastModified);
</SCRIPT>
URL документа, ссылающегося на данный:
<SCRIPT LANGUAGE="JavaScript">
document.write(document.URL);
</SCRIPT>
URL документа, из которого "браузер" дошел до данного:
<SCRIPT LANGUAGE="JavaScript">
document.write(document.referrer);
</SCRIPT>
Массив обьектов Image в данном документе:
Выведем первый обьект Image в данном документе.
<SCRIPT LANGUAGE="JavaScript">
document.write(document.images[1]);
</SCRIPT>
окон JavaScript.
Поделиться52008-08-30 19:35:27
Раздел "Формы" посвящен созданию различных элементов:
- строки,
- кнопки,
- линейки прокрутки, и др.
Дальнейшая задача состоит в обработке этих элементов:
- чтение информации из элементов форм,
- получение информации о нажатии кнопок,
- обработка полученной информации.
Рассмотрим примеры работы с различными элементами Форм.
Получение информации из текстовой строки:
Для определения текстовой строки мы задаем параметр TYPE="TEXT" в операторе INPUT. После заполнения строки пользователь нажимает правой кнокой мыши на какую-либо точку экрана вне поля текста (то есть элемент теряет фокус ввода). При этом управление получает созданная нами функция getname, задаваемая в параметре onBlur. В свою очередь, параметр этой функции this.value содержит значение строки текста. Эту строку в функции getname мы выведем на экран в специальном окне с помощью стандартной функции alert.
И все это выглядит следующим образом:
<SCRIPT LANGUAGE="JavaScript">
function getname(str) { alert(str); } </SCRIPT>
Введите текст:
<FORM>
<INPUT TYPE="TEXT" NAME="name" onBlur="getname(this.value)" VALUE="Введите текст">
</FORM>
Этот фрагмент выполняется следующим образом:
Введите текст:
Боюсь, что программистам все ясно и беэ моих комментариев, а остальных я запутал окончательно. Но я советую разбирать этот пример, пока Вы не поймете, тогда будет легко понять дальнейшее. Данный пример можно упростить, удалив функцию getname, и записав: onBlur="alert(this.value)". Проверьте.
Кроме уже рассмотренного обработчика событий onBlur(), который вызывается, когда TEXT утрачивает фокус ввода, существуют еще два обработчика событий:
- onchange() - вызывается, когда пользователь изменяет значение в элементе TEXT и этот обьект утрачивает фокус ввода,
- onfocus() - вызывается, когда пользователь перемещает фокус ввода с клавиатуры в обьект TEXT.
Вставьте каждый из этих обработчиков событий в вышеприведенный пример вместо onBlur() и проверьте действие программы.
Получение информации из текстового поля:
Этот пример строится на тех же принципах, что и предыдущий.
<SCRIPT LANGUAGE="JavaScript">
function getname(str) {
alert(str);
}
</SCRIPT>
Введите все, что Вы хотите:
<FORM>
<TEXTAREA NAME="name" COLS=30 ROWS=5 WARP=VIRTUAL onBlur="getname(this.value)">
Введите любой текст
</TEXTAREA>
</FORM>
Посмотрите, как он выполняется:
Обработка нажатия кнопок:
Стандартная кнопка задается параметром TYPE="BUTTON" в операторе INPUT. При нажатии кнопки выполняется созданная нами функция, заданная в параметре onclick, то есть onPush().Эта функция выводит текст "HELLO" в новое окно.
Ниже приведен этот пример:
<SCRIPT LANGUAGE="JavaScript">
function onPush() {
alert("HELLO");
}
</SCRIPT>
<FORM>
<INPUT TYPE="BUTTON" NAME="Button1" VALUE="Нажмите" onclick="onPush()">
</FORM>
А теперь нажмите на нижеприведенную кнопку:
Выбор кнопки:
В первом примере данного раздела для указания значения текстового поля мы пользовались аттрибутом this.value, что означает "значение данного элемента". Но мы можем захотеть работать с полем другого элемента. Тогда применим полное имя, имеющее следующий формат:
document...value, где:
Имя-формы - значение параметра name команды form,
Имя-Элемента - значение параметра name команды input.
В данном примере мы обрабатываем форму myForm1, содержащую одно текстовое поле, названное myText и 2 кнопки: Button1 Button2. Для каждой из этих кнопок создана функция, записывающая в текстовое поле сообщение о нажатии "своей" кнопки.
Программа выглядит следующим образом:
<SCRIPT LANGUAGE="JavaScript">
function FirstFunction() {
document.myForm1.myText.value="Вы нажали первую кнопку";
}
function SecondFunction() {
document.myForm1.myText.value="Вы нажали вторую кнопку";
}
</SCRIPT>
<FORM NAME="myForm1">
<INPUT TYPE="TEXT" NAME="myText" SIZE=30 VALUE="Нажмите одну из кнопок">
<INPUT TYPE="BUTTON" NAME="Button1" VALUE="Первая кнопка" onclick="FirstFunction()">
<INPUT TYPE="BUTTON" NAME="Button2" VALUE="Вторая кнопка" onclick="SecondFunction()">
</FORM>
Посмотрите, как она выполняется:
Обработка кнопки отметки:
В форме, названной myForm2, вводим 2 элемента:
- текстовую строку myText, служащую для вывода текстовой информации,
- кнопка отметки- при включении (отключении) символа отметки управление передается пользовательской функции myFunction2.
В этой функции вводится текстовая переменная myString, в которую вначале записывается текст "кнопка". Если кнопка отмечена (то есть в ней присутствует символ "птичка" , то к тексту дописывается слово "отмечена" , иначе - "не отмечена". Полученный текст передается в текстовый элемент формы.
<SCRIPT LANGUAGE="JavaScript">
function myFunction2() {
var myString="Кнопка";
if (document.myForm2.myCheckBox.checked)
myString+=" отмечена";
else
myString+=" не отмечена";
document.myForm2.myText.value = myString;
}
</SCRIPT>
<FORM NAME="myForm2">
<INPUT TYPE="TEXT" NAME="myText" SIZE=30 VALUE="Нажмите кнопку">
<INPUT TYPE="CHECKBOX" NAME="myCheckBox" VALUE="Кнопка отметки" onclick="myFunction2()">
</FORM>
Нажмите несколько раз на кнопку отметки и посмотрите на изменения в текстовой строке.
Работа с меню:
Cписок в форме задается с помощью обьекта SELECT, обработка событий выполняется с помощью следующих параметров:
onChange - вызывается при изменении выбора,
onBlur - вызывается при снятии фокуса с обьекта,
onFocus - вызывается при перемещении фокуса на обьект
Рассмотрите следующий пример и проверьте его выполнение:
&tlSCRIPT LANGUAGE="JavaScript">
function SelectBlur() {
document.myForm7.myText.value="Вы нажали поле вне списка ";
}
function SelectFocus() {
document.myForm7.myText.value="Вы нажали ту же кнопку ";
}
function SelectChange() {
document.myForm7.myText.value="Вы нажали другую кнопку ";
}
&tl/SCRIPT>
&tlFORM NAME="myForm7">
&tlINPUT TYPE="TEXT" NAME="myText" SIZE=20 VALUE="Сюда будем писать доносы">
&tlSELECT NAME="script" MULTIPLE onBlur="SelectBlur()" onFocus="SelectFocus()" onChange="SelectChange()">
&tlOPTION VALUE="town1" SELECTED>Париж
&tlOPTION VALUE="town2">Лондон
&tlOPTION VALUE="town3">Колыма
&tlOPTION VALUE="town4">Хеврон
&tlOPTION VALUE="town5">Марс
&tlOPTION VALUE="town6">Шушенское
&tl/SELECT>
&tl/FORM>
Обработка кнопки Radio:
Для анализа нажатия на кнопку используется функция onClick, как в кнопке Botton. Думаю, Вам будет несложно самим придумать пример работы с кнопкой Radio.
Сброс значений формы:
Обьект Reset обрабатывается аналогично обьекту Button, но используется только для сброса значений формы. Это означает для каждого поля формы сброс в значение, заданное параметром VALUE, или "очистка" поля при отсутствии этого параметра. Проследить нажатие на кнопку Reset можно с помощью параметра onClick(), значение которого инициируется при нажатии кнопки.
Кнопка ввода данных:
Обьект Submit обрабатывается аналогично обьекту Button. При нажатии на кнопку Submit данные формы, содержащей зту кнопку, передаются на сервер. Проследить нажатие на кнопку Submit можно с помощью параметра onClick().
Поделиться62008-08-30 19:37:08
Для получения текущей даты выполните следущую команду:
current_date = new Date();
Например, для вывода текущей даты в документе задайте:
<SCRIPT LANGUAGE="JavaScript">
current_date = new Date();
document.write("Текуща\я дата: " + current_date + ".");
</SCRIPT>
На экране этот блок отображается следующим образом:
Текущая дата: Sat, 30 Aug 2008 18:36:27 GMT+0300.
Важное замечание. "я" следует записывать с обратной косой чертой, т.е. "\я".
В предыдущем примере мы задавали текущую дату. Когда мы задаем конкретную, заранее известную дату, то ее надо указать как параметры в Date. Например, для задания 25 февраля 1997 года выполните следующее:
<SCRIPT LANGUAGE="JavaScript">
current_date = new Date(97,1,25);
document.write("Дата: "+current_date+".");
</SCRIPT>
Получили следующую строку:
Дата: Tue Feb 25 00:00:00 1997.
(Обратите внимание, что месяц нумеруется с 0).
Если Вы хотите задать еще часы, минуты и секунды, то следует добавить соответствующие параметры:
<SCRIPT LANGUAGE="JavaScript">
current_date=new Date(97,1,25,06,25,45);
document.write("Дата: "+current_date+".");
<SCRIPT>
Формируется строка:
Дата: Tue Nov 17 17:15:45 1998.
Теперь возникает желание перейти на свои форматы. Для этого надо выделить отдельные составляющие и сгруппировать их так, как нам хочется. Приведем список функций обьекта Date(), позволяющих получить отдельные составляющие:
Функция Возвращаемое значение Диапазон
getDate() Номер дня в месяце От 1 до 31
getDay() День недели От 0(воскресенье) до 6(суббота)
getHours() Часы От 0 до 23
getMinutes() Минуты От 0 до 59
getMonth() Номер месяца От 0 (январь) до 11 (декабрь)
getSeconds() Секунды От 0 до 59
getTime() Количество миллисекунд, прошедших после 01.01.1970 От 0
Теперь конкретные примеры:
Узнаем текущую дату:
<SCRIPT LANGUAGE="JavaScript">
temp_date=new Date();
day=temp_date.getDate();
month=temp_date.getMonth()+1;
year=temp_date.getYear();
if (day<10) day="0"+day;
if (month<10) month="0"+month;
document.write("Сейчас на календаре " + day + "/" + month + "/" + year + ".");
</SCRIPT>
Получаем на экране:
Сейчас на календаре 30/08/108.
Теперь посмотрим время:
<SCRIPT LANGUAGE="JavaScript">
temp_date = new Date();
hours = temp_date.getHours();
if (hours > 12) {
hours = hours - 12;
am_pm = "после обеда";
}
else {
am_pm = "до обеда";
}
minutes = temp_date.getMinutes();
if (minutes < 10) {
minutes = "0" + minutes;
}
seconds = temp_date.getSeconds();
if (seconds < 10) {
seconds = "0" + seconds;
}
document.write("Сейчас " + hours + " часов " + minutes +
" минут " + seconds + " секунд " + am_pm);
</SCRIPT>
Получаем на экране:
Сейчас 6 часов 36 минут 27 секунд после обеда
Поделиться72008-08-30 19:38:20
При разработке WEB - страницы с использованием JavaScript следует выполнять следующие правила:
Проверьте, правильно ли отображает Ваша страница на Netscape 3 и 4, на Еxplorer 3 и 4. Если работает во всех вышеприведенных браузерах, то проверка закончена, если нет, то:
Определите, с каким браузером работает пользователь.
Заблокируйте с необходимыми извинениями и пояснениями выполнение блоков, не работающих с определенными браузерами.
Данный раздел посвящен вопросу: как определить, с каким браузером работает пользователь. В следующем разделе мы будем пользоваться этой информацией. Обьект Navigator содержит свойства, описывающие используемый Web-браузер. Ниже приводятся основные свойства:
appCodeName задает кодовое название браузера
appName задает имя браузера
appVersion задает полную информацию о версии браузера
Функции:
javaEnabled() проверяет, поддерживает ли текущий браузер язык Java и включен ли этот язык.
parseInt(navigator.appVersion) определет номер версии браузера.
Рассмотрим это на примере:
<SCRIPT LANGUAGE="JavaScript">
document.write("Данные Вашего браузера<BR>");
document.write("Кодовое название браузера- "+navigator.appCodeName+"<BR>");
document.write("Браузер- "+navigator.appName+"<BR>");
document.write("Номер версии браузера- "+navigator.appVersion+"<BR>");
if (navigator.javaEnabled()==1) document.write("Браузер поддерживает JavaScript<BR>");
else
document.write("Браузер не поддерживает JavaScript<BR>");
</SCRIPT>
Данный пример выполняется со следующими результатами:
Данные Вашего браузера
Кодовое название браузера- Mozilla
Браузер- Microsoft Internet Explorer
Номер версии браузера- 4.0 (compatible; MSIE 6.0; Windows NT 5.1)
Браузер поддерживает JavaScript
Я надеюсь, понятно, что информация о Вашем браузере формируется только в вашем компьютере. От меня идет в Ваш компьютер только команда выяснить сведения о Вашем браузере и отобразить их на экране.
Поделиться82008-08-30 19:41:00
В центре экрана Вы видите число 1. Подведите к нему мышку- Вы видите число 2. Уберите мышку- появляется число 1.
Изменять можно не только текущую картинку, но и любую другую. Можно выводить любой текст. Можно вообще выполнять любые действия на экране. При соответствующей фантазии можно творить чудеса. Но... Данный раздел работает только под Netscape Navigator 3.x и Netscape Navigator 4.x, так как Microsoft Internet Explorer не поддерживает функции onMouseOver и onMouseOut.
Ниже приводится текст данной программы:
<SCRIPT LANGUAGE="JavaScript">
netscape=0;
if (navigator.appName=="Netscape" && parseInt(navigator.appVersion)>= 3) {
netscape=1;
change=new Image();
change.src="img/2.gif";
normal=new Image();
normal.src="img/1.gif";
}
function change_image() {
if (netscape==1) document.images[1].src=change.src;
}
function normal_image() {
if (netscape==1) document.images[1].src=normal.src;
}
</SCRIPT>
<A HREF="Home.htm" onMouseOver="change_image();window.status='мышка в картинке';return true" onMouseOut="normal_image();window.status='мышка вне картинки';return true">
<CENTER><IMG SRC="../img/new.gif" BORDER=0 ALT="Кликни здесь!"></A></CENTER>
Работа выполняется следующим образом:
Прежде всего проверяется, что мы работаем в Netscape версии не ниже 3.0.
Определяем 2 обьекта: change и normal и присваиваем им, соответственно, image- файлы 1.GIF и 1.GIF.
Определяем функции:
change_image (Она изменяет image[0], то есть первую картинку раздела на 1.GIF
normal_image (Она изменяет image[0] на 2.GIF
Определяем картинку 2.GIF. Это и есть наша image[0]. Определяем файл home.html (имя в данном случае не играет роли, если не вызывать этот файл, но так как всегда найдутся желающие вызвать, то лучше указать имя текущего HTML- файла.
Здесь определены 2 функции:
onMouseOver (когда мышка выходит из картинки),
onMouseOut (когда мышка входит в картинку).
Когда мышка входит в картинку , вызывается функция change_image.
Она изменяет image[0], и появляется число 1, когда мышка выходит из картинки, вызывается функция normal_image, которая вызывает соответствующий рисунок числа 2.
Поделиться92008-08-30 19:44:40
Подведите мышку к тексту под этим предложением, подождите несколько секунд и Вы получите новое окно размером 200 х 130. (Если Вы используете Netscape 3, окно закроется автоматически, иначе позаботьтесь об его закрытии).
Подведите мышку сюда!
Приведем текст этой программы. Обратите внимание на несколько иную запись javascript:
<A HREF="javascript:" onMouseOver="win1=window.open('ex_4_1.htm','w1','width=200,height=130');return true;" onMouseOut="win1.window.close();return true;">
Подведите мышку сюда!</A>
Функции onMouseOver и onMouseOut мы рассматривали в прошлом параграфе. Рассмотрим открытие нового окна- функцию window.open.
Первый параметр (в нашем случае, это ex_4_1.htm)- URL, то есть адрес документа, который должен быть помещен в новое окно. Если url - пустая строка, то открывается пустое окно. Второй параметр ( в нашем случае это w1 ) - имя нового окна. Используя имя в качестве значения атрибута TARGET команды <A> или <FORM>, можно вывести документы в это окно. Но, в принципе, в большинстве случаев в новом окне командовать парадом будет заданный в нем URL. Третий параметр состоит из следующих возможных числовых значений или флажков:
- width=NNN - ширина окна,
- height=NNN - высота окна,
- toolbar={no,yes} - Панель инструментов браузера,
- location={no,yes} - Поле для ввода URL в браузер,
- directories={no,yes} - Кнопки каталогов,
- status={no,yes} - Строка состояния,
- menubar={no,yes} - Линейка меню браузера,
- scrollbars={no,yes} - Линейки прокрутки.
В строке, содержащей третий параметр, не должно быть пробелов.
Рассмотрим аналогичный пример со всеми "накрутками": <A HREF="javascript:" onMouseOver="win1=window.open ('ex_4_1.htm','w1','width=500,height=300,toolbar=yes,location=yes, directories=yes,status=yes,menubar=yes,scrollbars=yes');return true;" onMouseOut="win1.window.close ();return true;">
Подведите мышку сюда!</A>
Для его выполнения подведите мышку под следующий текст:
Подведите мышку сюда!
Аналогично создается окно с использованием картинок, можно использовать для этой цели и формы, здесь программа еще проще.
Мы рассмотрели функции open и close.
Рассмотрим другие функции обьекта window:
- alert()- Вводит в диалоговое окно простое сообщение. В окне есть кнопка OK.
- confirm()- Отображает в диалоговом окне запрос, требующий ответа "Да" или "Нет". При нажатии кнопки "Да" функция возвращает true, иначе - false.
- prompt(сообщение,[стандартное])- выводит заданное сообщение в диалоговом окне, содержащем также поле ввода текста и три кнопки: OK, Clear и Cancel.
В этом сообщении содержится адресованное пользователю предложение ввести необходимую информацию. Необязательный аргумент [стандартное] представляет собой строку, которая изначально будет отображаться в поле ввода.
Поделиться102008-08-30 20:03:06
Динамическое меню ( управление клавишами )All.
Описание:
Меню автоматически открывается в левой части экрана при нажатии кнопки "Х". И если вы нажмете кнопку "Z" меню автоматически закроется.
Демонстрация:
Нажмите кнопку " X " для открытия меню и " Z " закрытия.
Установка:
Шаг 1: Сначала вставьте, предварительно выделив и скопировав текст в <head> секцию вашей странички :
<style>
<!--
#slidemenubar, #slidemenubar2{position:absolute;left:-155px;width:160px;top:170px;border:1.5px solid green;background-color:lightyellow;layer-background-color:lightyellow;font:bold 12px Verdana;line-height:20px;}-->
</style>
Конфигурация меню:
Для изменения содержания и ссылок меню вам нужно отредактировать значения sitems[] и sitemlinks[] в HTML коде Шага 2.
Для изменения положения меню на страничке, отредактируйте код скопированый в Шаге 1. Вот часть списка который вам нужно отредактировать
top:170px;
border:1.5px solid green;
background-color:lightyellow;
layer-background-color:lightyellow;
font:bold 12px Verdana;
line-height:20px;
Первая строка, положение окна вертикально в пикселях (сейчас 170px и может быть другое). Вторая строка это размер и цвет рамки окружающей меню (измените 1.5px и зеленый на другое). Третья и четвертая строки цвет background меню. Пъятая строка значение фонта меню (измените 12px и Verdana на другой). Последняя строка это растояние между текстом в строках меню.
Меню с ссылки.All
Описание:
Меню всплывающее из ссылки. Наилучшее для презентации веб сайта.
Демонстрация: http://www.dynamic-design.com.ua/develo … ex_4_1.htm
Для просмотра примера ( меню ) в работе вам требуется только нажать здесь
Установка:
Шаг:
Вставте нижеприведенный текст программы в <BODY> тэг вашей странички:
<script language="JavaScript1.2">
/*
Drop Down Menu link Script-
By Dynamic Web Design (wwwdynamic-design.com.ua)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit http://www.dynamic-design.com.ua/develop/
*/
function contentdimension(){
var tempbox=document.all.dropmenu2
if (tempbox.document.readyState=="complete"&&tempbox.document.body.scrollWidth!=0){
tempbox.style.width=tempbox.document.body.scrollWidth
tempbox.style.height=tempbox.document.body.scrollHeight
if (window.scanit)
clearInterval(scanit)
}
}
var indicate=false
var previouscontent=''
if (!document.layers&&!document.all)
event="test"
function showmenu(content,e){
if ((content!=previouscontent)&&content!="")
indicate=true
else
indicate=false
previouscontent=content
if (document.all){
if (document.all.dropmenu2.style.display=="none"||indicate){
document.all.dropmenu2.src=content
document.all.dropmenu2.style.pixelLeft=event.clientX+document.body.scrollLeft+10
document.all.dropmenu2.style.pixelTop=event.clientY+document.body.scrollTop
document.all.dropmenu2.style.display=""
scanit=setInterval("contentdimension()",200)
e.cancelBubble='true'
}
}
else if (document.layers){
if (document.dropmenu.visibility=="hide"||indicate){
document.dropmenu.src=content
document.dropmenu.left=e.pageX+10
document.dropmenu.top=e.pageY
document.dropmenu.visibility="show"
}
else
document.dropmenu.visibility="hide"
}
return false
}
if (document.all)
document.onclick=new Function("document.all.dropmenu2.style.display='none'")
</script>
<script>
var nsie4=(document.layers||document.all)
</script>
<layer id="dropmenu"></layer>
<iframe id="dropmenu2" marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no style="position:absolute;display:none"></iframe>
Далее: для асоциации меню с текстом добавте код в тэг типа:
<a href="alternate.htm" onClick="if (nsie4) return showmenu('ex_4_1.htm',event)">Нажми здесь</a> где "alternate.htm" ссылка для браузеров не поддерживающие скрипты ( NS 3, IE 3), этот скрипт использует вот этот документ сохраните его на диске если будите использовать пример ex_4_1.htm
Важно: то, что тэг target="_top" в файле (ie: ex_4_1.htm) указывает на то, что ссылка открывается в текущем окне , иначе будет открываться в новом окне.
Поделиться112008-08-30 20:16:36
Кнопки навигации.All
Описание:
Кнопки для упрощения навигации. Размещаю пример так как бывают и такие вопросы.
Назад
Установка:
Шаг 1.: Вставьте этот код в нужное место:
<center>
<form>
<input type="button" value=" back (назад)" onclick="history.back(-1)">
</form>
</center>
Установка:
Шаг 2.: Вставьте этот код в нужное место:
Пергрузить страницу
<center>
<form>
<input type="button" value="Reload (Перезагрузить страницу)" onclick="reloadbut()">
<script>function reloadbut(){location.href="ex_139.htm";}</script>
</form>
</center>
Установка:
Шаг 3.: Вставьте этот код в нужное место:
Домой
<center>
<form>
<input TYPE="button" VALUE="Home (домой)" onclick="goHome()">
<script>function goHome(){location.href="http://www.dynamic-design.com.ua";}</script>
</form>
</center>
Открытие нового окна
<center>
<form>
<input TYPE="button" VALUE="New Window (Открытие нового окна)" onclick="NewWindow()">
<script>
function NewWindow(){window.open("../index.html","","height=450,width=600,status=no,location=no,toolbar=no,directories=no,menubar=no");}
</script>
</center>
</form>
Страница: 1
