Все для Joomla . Бесплатные шаблоны и расширения.

JavaScript. Продолжение 1

Категория: Программирование Обновлено: 28.04.2019 Опубликовано: 12.02.2019 Печать

Пример 1. Распечатка всех ссылок на странице

for(i=0;i<document.links.length;i++)
document.write(document.links[i].href+"<BR>");



Пример 2. Простейшее динамическое меню

<head>
<script>
var data = new Array(
"Фамилия И.О.",        "253-93-10",        "253-93-12",
"проезд",        "5",            "руб.",
"отчет",        "10:00",        "конф. зал.");
var pic = new Array(
"fio.gif",    "rpho.gif",    "hpho.gif",
"kind.gif",    "sum.gif",    "curr.gif",
"target.gif",    "mtime.gif",    "mplace.gif");
function ShowField(m,i)
{
 document.f.elements[i].value = data[3*m+i];
}

function ShowMenu(menu)
{
 document.f.reset();

  for(i=0;i<3;i++)
  {
   document.images[i+3].src = pic[ 3*menu+i ];
   document.links[i+3].href =
   "javascript:ShowField("+menu+","+i+");void(0);";
  }
}
</script>
</head>
<body onLoad="ShowMenu(0);">
<table border=0 cellspacing=1 cellpadding=0 align=center>
<tr>
<td><a href="javascript:void(0);" onMouseOver="ShowMenu(0);"><img src=addrpho.gif border=0></a></td>
<td><a href="javascript:void(0);" onMouseOver="ShowMenu(1);"><img src=cash.gif    border=0></a></td>
<td><a href="javascript:void(0);" onMouseOver="ShowMenu(2);"><img src=meets.gif   border=0></a></td>
</tr>
<tr>
<td><a href="/"><img src=fio.gif  border=0></a></td>
<td><a href="/"><img src=rpho.gif border=0></a></td>
<td><a href="/"><img src=hpho.gif border=0></a></td>
</tr>
<form name=f >
<th><input value="" size=14></th>
<th><input value="" size=14></th>
<th><input value="" size=14></th>
</form>
</table>

Пример 3. Простейшая динамическая смена изображений

<table border="2" cellpadding="0" cellspacing="0">
<tr>
<td>
<A HREF="javascript:void(0);"
 onMouseover="document.pic1.src='pic1.gif';"
 onMouseout="document.pic1.src='pic1_.gif';">
 <IMG NAME=pic1 src=pic1_.gif BORDER=0></A></td>
<td>
<A HREF="javascript:void(0);"
 onMouseover="document.pic2.src='pic2.gif';"
 onMouseout="document.pic2.src='pic2_.gif';">
 <IMG NAME=pic2 src=pic2_.gif BORDER=0></A></td>
<td>
<A HREF="javascript:void(0);"
 onMouseover="document.pic3.src='pic3.gif';"
 onMouseout="document.pic3.src='pic3_.gif';">
 <IMG NAME=pic3 src=pic3_.gif BORDER=0></A></td>
</tr>
</table>

Пример 4. Простейшие динамические создания новых страниц

<A HREF="javascript:alert('Спасибо!');">Кликните</A>
<A HREF="javascript: 2+8; 5+7;">ссылка</A>
<A HREF="javascript: '<HTML><BODY><H1>Ready!<H1></BODY></HTML>';">Кликните</A>
<A HREF="javascript: document.bgColor='green';">Кликните</A>

Пример 5. Простейшее изменение цвета фона

<A HREF="javascript: document.bgColor='green'; void(0);">Кликните</A>

Пример 6. Подтверждение действия

<A onClick="return confirm('Продолжить?')"
  HREF="http://www./">Перейти на сайт</A>

 

Пример 7. Бесконечный цикл изменения изображений

<SCRIPT>
var i=0;
function movie()
{
 document.i.src='images/crou00'+i+'.gif';
 i++; if(i>4) i=0;
 setTimeout('movie();',500);
}
</SCRIPT>
<BODY onLoad="movie();">
<IMG NAME=i>
</BODY>

Пример 8. Ограниченный цикл изменения изображений

<SCRIPT>
var i=0,
    n=5; // число циклов
function movie()
{
 document.i.src='images/crou00'+i+'.gif';
 i++; if(i>4) { i=0; n--; }
 if(n>0) setTimeout('movie();',500);
}
</SCRIPT>
<BODY onLoad="movie();">
<IMG NAME=i>
</BODY>

Пример 9. Запуск и остановка мультипликации (смены изображений)

<SCRIPT>
var i=0, flag=true;
function movie()
{
 if(flag)
 {
  document.i.src='images/crou00'+i+'.gif';
  i++; if(i>4) i=0;
 }
 setTimeout('movie();',500);
}
</SCRIPT>
<BODY onLoad="movie();">
<FORM>
<INPUT TYPE=button VALUE="Start/Stop"
       onClick="flag = !flag;">
</FORM>
<IMG NAME=i>
</BODY>

------------------

<SCRIPT>
var i=0, flag=true, m=null;
function movie()
{
 if(flag)
 {
  document.i.src='images/crou00'+i+'.gif';
  i++; if(i>4) i=0;
 }
 m = setTimeout('movie();',500);
}
</SCRIPT>
<BODY onLoad="movie();">
<IMG NAME=i>
<FORM>
<INPUT TYPE=button VALUE="Start/Stop"
  onClick="flag = !flag;
  if(flag) movie();
  else clearTimeout(m);">
</FORM>
</BODY>

Пример 10. Защита переноса на следующую строку (<PRE>)

Горизонтально
<PRE>
<IMG SRC="horis1.gif"><IMG
     SRC="horis2.gif"><IMG
     SRC="horis3.gif"><IMG
     SRC="horis4.gif">
</PRE>

Вертикально
<PRE>
<IMG SRC=vert.gif WIDTH=27 HEIGHT=21>
<IMG SRC="vert1.gif" WIDTH=103 HEIGHT=21>
<IMG SRC=vert.gif WIDTH=27 HEIGHT=21>
<IMG SRC="vert2.gif" WIDTH=103 HEIGHT=21>
</PRE>

Пример 11. Пункт меню с меняющимся изображением

<A HREF=".htm" onMouseOut="window.status='';"
   onMouseOver="window.status='название ссылки';return true;"><IMG
   SRC="horis1.gif" BORDER=0 ALT="название ссылки"></A>

Пример 12. Простейшее выпадающее меню с изображениями

<SCRIPT>
function submenu(a)
{
 with(document)
 {
  if(a==1)
  {
   item1.src="item_1_yes.gif"; // 1-й пункт активен
   item2.src="item_2_no.gif";  // 2-й пункт неактивен
   subi1.src="item_1_1.gif";   // 1-й пункт вложенного меню 1
   subi2.src="item_1_2.gif";   // 2-й пункт вложенного меню 1
  }
  if(a==2)
  {
   item1.src="item_1_no.gif";  // 2-й пункт активен
   item2.src="item_2_yes.gif"; // 1-й пункт неактивен
   subi1.src="item_2_1.gif";   // 1-й пункт вложенного меню 2
   subi2.src="item_2_2.gif";   // 2-й пункт вложенного меню 2
  }
 }
}
</SCRIPT>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=1>
<TR>
<TD><A HREF="javascript:void(0);" onMouseOver="submenu(1);">
    <IMG BORDER=0 NAME=item1 SRC=item_1_yes.gif></A></TD>
<TD><IMG BORDER=0 NAME=subi1 SRC=item_1_1.gif></TD></TR>
<TR>
<TD><A HREF="javascript:void(0);" onMouseOver="submenu(2);">
    <IMG BORDER=0 NAME=item2 SRC=item_2_no.gif></A></TD>
<TD><IMG BORDER=0 NAME=subi2 SRC=item_1_2.gif></TD></TR>
</TABLE>

 

Пример 13. Управление cookie

Запись имени пользователя на 1 минуту на первой станице
<SCRIPT SRC='cookies.js'></SCRIPT>
<SCRIPT>
setCookie('customername',
          prompt('Введите ваше имя',''),
          TimeAfter(0,0,1)  );
alert('Мы Вас запомнили!');
</SCRIPT>

Чтение имени на второй странице
<SCRIPT SRC='cookies.js'></SCRIPT>
<SCRIPT>
if(existsCookie('customername'))
     alert('Приветствуем Вас, ' +CookieValue('customername')+ '!');
else alert('Извините, мы Вас уже не помним...')
</SCRIPT>

Пример 14. Простейший сценарий

<SCRIPT type="text/javascript">
 document.write
 ("<FONT COLOR='RED'>Это красный текст</FONT><BR>")
 document.write
 ("<FONT COLOR='BLUE'>Это синий текст</FONT>")
</SCRIPT>

Пример 15. Дата

<SCRIPT type="text/javascript">
dothis = new Date()
month = dothis.getMonth()
month = (month * 1) + 1
day = dothis.getDate()
year = dothis.getFullYear()
document.write(" ",month,"/",day,"/",year," ")
</SCRIPT>

 

Пример 16. Вывод точной даты и время посещения страницы

<SCRIPT LANGUAGE="JavaScript">
Now = new Date();
document.write("Сегодня " + Now.getDate()+
"-" + (Now.getMonth()+1) + "-" + Now.getFullYear()
+ ". Вы зашли на Web-страницу ровно в: " + Now.getHours() +
":" + Now.getMinutes() + " и " + Now.getSeconds() +
" секунд.")
</SCRIPT>

или

<SCRIPT LANGUAGE="JavaScript">
Now = new Date();
var mpo = Now.getMonth();
var mpo1 = mpo + 1;
document.write("<FONT COLOR='green'>Привет! Сегодня у нас:</FONT>"
+ Now.getDate() + "/"
+ mpo1 + "/"
+ Now.getFullYear() + ".");
</SCRIPT>

 

Пример 17. Обработчики событий для ссылки

<A HREF="http://"
onMouseOver="document.bgColor='pink',
onMouseOver=window.status='Посетите этот сайт';
return true">Щелкните здесь</A>

 

Пример 18. Синтаксис onClick

<A HREF="http://www.mail.ru"
onClick="alert('Посмотреть почту!');">
Щелкните здесь</A>

 

Пример 19. Синтаксис onFocus

<FORM>
<INPUT TYPE="text" SIZE="30"
onFocus="window.status='Текст в строке состояния';">
</FORM>

 

Пример 20. Синтаксис onBlur

<FORM>
<INPUT TYPE="text" SIZE="40"
VALUE="Впишите свое имя и щелкните вне текстового поля"
onBlur="alert('Вы изменили ответ — вы уверены, что он правильный?');">
</FORM>

 

Пример 21. Синтаксис onChange

<FORM>
<INPUT TYPE="text" SIZE="45"
VALUE="Измените текст и щелкните вне поля — затем
проверьте строку состояния"
onChange="window.status='Текст был изменен'">
</FORM>

 

Пример 22. Синтаксис onSubmit

<FORM>
<INPUT TYPE="submit"
onSubmit="parent.location='спасибо.html'";>
</FORM>

 

Пример 23. Простейшая форма взаимодействия с пользователем

<FORM action="">
Name: <INPUT TYPE="text" SIZE="30"
onFocus="window.status='Введите свое имя';">
Что вы предпочитаете:
<INPUT TYPE="checkbox"
onClick="window.status='Вы выбрали шоколад';">
Шоколад
<INPUT TYPE="checkbox"
onClick="window.status='Вы выбрали мороженое';">
Мороженое
<INPUT TYPE="submit"
onClick="alert('Спасибо за участие в опросе');">
</FORM>

 

 

Первая часть (Объявление переменной, Диалоговые элементы, Атрибуты, которые определены для HTML тэгов, Использование кавычек в строковых литералах, Массивы, Коллекции в объектной модели документа, Свойства объекта location, Параметры метода window.open, window.close, Виды кнопок, Таблица умножения, Динамическое изменение содержимого тегов, Выбор цвета текста, Определяется, какая кнопка мыши нажата, Часы в строке статуса, Точное время загрузки страницы, Распечатка - кубы, не превышающие 5000, Возведение в квадрат, Форма prompt, Примеры открытия нового окна, Часы в поле формы, События BODY, Изменение переменной открытого окна, Изменение поля статуса в открытом окне, Цвет и расположение фреймов, Изменение полей формы, Скрытая отправка данных пользователя на сервер, Очистка формы, Проверка пустой строки в отправленной форме, Удаление и добавление вариантов из SELECT, Обработчик onChange при выборе множественных вариантов)
Третья часть (Окно с сообщением и полем ввода (prompt), Свойства объекта "navigator" (браузер), Свойства объекта "document", Свойства объекта "history", Два свойства объекта "location" (адрес), Иерархия объектов, Адрес страницы, с которой пришел пользователь, Дата при загрузке страницы, Диалог при загрузке страницы, События при перемещении указателя мыши и уход со страницы, Новое окно, Конфигурация нового окна)

Четвертая часть (Подтверждение действия, Простейшее математическое вычисление, Изменение изображения при наведении мышью, Выбор цвета фона, Внедрение поиска от глобальной поисковой системы, Количество символов в форме, Генерация случайных чисел от секунд, Условный оператор и диалог с пользователем, Условный оператор и смена фона в зависимости от ответа)

Пятая часть (Простейшее слайд-шоу, Переход на случайный сайт с кнопкой, Цикл угадываний с диалоговым окном и случайным числом, Цикл - распечатка слова определенное количество раз, которое устанавливает пользователь в ходе диалога, Цикл - распечатка слова определенное количество раз, Цикл-счет от одного до 50000 + изменение фона, Цикл-распечатка цифр от одного до пяти, Случайное изображение, Случайная фраза, Угадывание числа до 10)

Для сайтов находящихся на тарифном обслуживании и администрировании работы проводятся без дополнительной оплаты, входят в стоимость тарифа

По всем вопросам обращаться по адресу: Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра. или по телефону (WhatsApp): +7-994-009-32-20

 

Поделиться страницей в социальных сетях:

 

Просмотров: 261

Добавить комментарий

Защитный код
Обновить