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

JavaScript

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

Языковые конструкции JavaScript совпадают с соответствующими средствами C++ и Java

 

Объявление переменной


var selected = "first item";
rating = 512.5;

var k;
var h='Привет!';
var k, h='Привет!';
var t=37, e=2.71828;
var i=5;          alert(typeof(i));
i= new Array();   alert(typeof(i));
i= 3.14;          alert(typeof(i));
i= 'Привет!';     alert(typeof(i));
i= window.open(); alert(typeof(i));

 

Скрипт в Body


<SCRIPT LANGUAGE="JavaScript">
document.write("Проверка сценария JavaScript");
</SCRIPT>

 

Диалоговые элементы


1. Alert. Применяется для уведомления пользователя, работающего с веб-браузером.
alert("сообщение");
2. Confirm. Применяется для выбора пользователем одного из двух вариантов ответа "Да/Нет". Соответственно Confirm возвращает значение true/false.
confirm("вопрос");
3. Prompt. Применяется для ввода пользователем значения. При нажатии "OK" возвращается введенное значение, в случае "Cancel" возвращается значение null.
prompt("вопрос/запрос","значение по умолчанию");

 

Атрибуты, которые определены для HTML тэгов

- onabort - Прерванная загрузка изображения
- onblur - утрата фокуса элементом
- onchange - Изменение содержимого в поле ввода
- onclick - Щелчок мыши на объекте  
- ondblclick - Двойной щелчок мыши на объекте
- onerror - Ошибка при загрузке изображения или документа
- onfocus - Получение фокуса элементом
- onkeydown - Нажатие клавиши
- onkeypress - Клавиша нажата
- onkeyup - Отжатие клавиши
- onload - Завершение загрузки страницы или изображения
- onmousedown - Нажатие кнопки мыши
- onmousemove - Перемещение курсора мыши  
- onmouseout - Смещение курсора мыши с объекта
- onmouseover - Наведение курсора мыши на объект  
- onmouseup - Отжатие кнопки мыши  
- onreset - Кнопка "Reset" нажата  
- onresize - Изменение размера окна  
- onselect - Выделение текста  
- onsubmit - Кнопка "Submit" нажата
- onunload - Уход с веб-страницы

 

Использование кавычек в строковых литералах

document.write("It\'s good to say \"Hello\" to someone!");

результат
It's good to say "Hello" to someone!


Массивы

a = new Array();
// пустой массив (длины 0)
b = new Array(10);
// массив длины 10
c = new Array(10,'Привет');
// массив из двух элементов: числа и строки
d = [5, 'Тест', 2.71828, 'Число e'];
// краткий способ создать массив из 4 элементов

 

Коллекции в объектной модели документа

window.document.forms[4]     // 5-я форма на странице
window.document.forms['mf']  // форма с именем 'mf'
window.document.forms.mf     // форма с именем 'mf'
window.document.mf           // форма с именем 'mf'

window.frames[] Все фреймы - т.е. объекты, отвечающие контейнерам <FRAME>  
document.all[] Все объекты, отвечающие контейнерам внутри контейнера <BODY>  
document.anchors[] Все якоря - т.е. объекты, отвечающие контейнерам <A>  
document.applets[] Все апплеты - т.е. объекты, отвечающие контейнерам <APPLET>  
document.embeds[] Все вложения - т.е. объекты, отвечающие контейнерам <EMBED>  
document.forms[] Все формы - т.е. объекты, отвечающие контейнерам <FORM>  
document.images[] Все картинки - т.е. объекты, отвечающие контейнерам <IMG>  
document.links[] Все ссылки - т.е. объекты, отвечающие контейнерам <A HREF="..."> и <AREA HREF="...">  
document.f.elements[] Все элементы формы с именем f - т.е. объекты, отвечающие контейнерам <INPUT> и <SELECT>  
document.f.s.options[] Все опции (контейнеры <OPTION> ) в контейнере <SELECT NAME=s> в форме <FORM NAME=f>  
navigator.mimeTypes[] Все типы MIME, поддерживаемые браузером (список см. на сайте IANA)
function_name.arguments[] Все аргументы, переданные функции function_name() при вызове

 

Свойства объекта location:

window.location.href     = "http://www.site.ru:80/dir/page.cgi?product=phone&id=3#mark"
window.location.protocol = "http:"
window.location.hostname = "www.site.ru"
window.location.port     = 80
window.location.host     = "www.site.ru:80"
window.location.pathname = "dir/page.cgi"
window.location.search   = "?product=phone&id=3"
window.location.hash     = "#mark"


Параметры метода window.open()

width - число - Ширина окна в пикселах (не менее 100 )
height - число - Высота окна в пикселах (не менее 100 )
left - число - Расстояние от левого края экрана до левой границы окна в пикселах
top - число - Расстояние от верхнего края экрана до верхней границы окна в пикселах
directories - yes / no  - Наличие у окна панели папок (Netscape Navigator)
location - yes / no  - Наличие у окна поля адреса
menubar - yes / no  - Наличие у окна панели меню
resizable - yes / no  - Сможет ли пользователь менять размер окна
scrollbars - yes / no  - Наличие у окна полос прокрутки  
status - yes / no  - Наличие у окна поля статуса
toolbar - yes / no  - Наличие у окна панели инструментов


Метод window.close()

window.close();
self.close();
window.opener.close();

 

Виды кнопок

<FORM>
<INPUT TYPE=button VALUE="Кнопка типа button">
<INPUT TYPE=submit VALUE="Кнопка отправки">
<INPUT TYPE=reset  VALUE="Кнопка сброса">
<INPUT TYPE=image SRC=a.gif> <!-- графическая кнопка -->
</FORM>

 

Пример 1


<SCRIPT LANGUAGE="JavaScript">
var a = 3;
var b = 8;
var c = " попугаев ";

document.write("a+b="); document.write(a + b);
document.write("<BR>");
document.write( "a + с = "); document.write(a+c);
document.write("<BR>");
document.write("c + a = "); document.write (c + a);
document.write ("<BR>");
document.write ("a + b + с = "); document.write(a + b + c);
document.write("<BR>");
document.write("c + a + b = "); document.write(c + a + b);
document.write("<BR>");
</SCRIPT>

 

Пример 2. Таблица умножения


<table>
<script language="JavaScript">
document.write("<tr><td> </td>");
for (i = 1; i < 10; i++) document.write("<td>"+i+" </td>");
document.write("</tr>");
for (i = 1; i < 10; i++)
{
document.write("<tr><td>" + i + " </td>");
for (j = 1; j < 10; j++)
{
document.write("<td bgcolor='#00ffa0'>" + (i*j) + " </td>");}
document.write("</tr>");
}

</script>
</table>

 

Пример 3. Динамическое изменение содержимого тегов

<p id="p1">Hello World!</p>
<script type="text/javascript">
document.getElementById("p1").innerHTML="New text!";
</script>

 

Пример 4. Выбор цвета текста

<div id="c" style="color:blue">Вы выбрали цвет текста: синий</div>
<script language="JavaScript">
// пользователь выбирает цвет текста
var tcolor = prompt("Выберите цвет текста: red, blue, green, yellow, black","black");
// задается текст
document.getElementById("c").innerHTML = "Вы выбрали цвет текста: " + tcolor;
// задается цвет текста
document.getElementById("c").style.color = tcolor;
</script>

 

Пример 5. Определяется, какая кнопка мыши нажата

<head>
    <script language = "javascript">
      function whichButton(event)
       {
        if (event.button == 2)
         {
          alert("Вы щелкнули правой кнопкой мыши!");
         }
        else
         {
          alert("Вы щелкнули левой кнопкой мыши!");
         }
       }
    </script>
  </head>
 
  <body onmousedown="whichButton(event)">
    <p>Щелкните любой кнопкой мыши в любом месте документа</p>
  </body>

 

Пример 6. Часы в строке статуса

<HEAD>
<SCRIPT>
function time_scroll()
{
  var d = new Date();
  window.status = d.getHours()
          + ':' + d.getMinutes()
          + ':' + d.getSeconds();
  setTimeout('time_scroll()',1000);
}
</SCRIPT>
</HEAD>
<BODY onLoad="time_scroll()">
<H1>Часы в строке статуса</H1>
</BODY>
</HTML>


Пример 7. Точное время загрузки страницы

<BODY>
...
<SCRIPT>
d = new Date();
document.write('Момент загрузки страницы: '
+ d.getHours() + ':'
+ d.getMinutes() + ':'
+ d.getSeconds());
</SCRIPT>
...
</BODY>

Пример 8. Распечатка - кубы, не превышающие 5000

Оператор break позволяет досрочно покинуть тело цикла
document.write('Кубы чисел, меньшие 5000:');
for (n=1; n<=100; n++)
{  
 s=Math.pow(n,3);
 if(s>5000) break;

 document.write('<BR>'+n+'<sup>3</sup> = '+s);
}


Пример 9. Вывести кубы чисел от 1 до 100, превышающие 10000

Оператор continue позволяет перейти к следующей итерации цикла, пропустив выполнение всех нижестоящих операторов в теле цикла. Если нам нужно вывести кубы чисел от 1 до 100, превышающие 10000
document.write('Кубы чисел от 1 до 100, большие 10 000:');
for (n=1; n<=100; n++)
{  
 s=Math.pow(n,3);
 if(s <= 10000) continue;

 document.write('<BR>'+n+'<sup>3</sup> = '+s);

 

Пример 10. Возведение в квадрат

<SCRIPT>
function kvadrat(a)
{   return a*a;   }

function SuperPower()
{ var
 N = parseInt(document.f.n.value),
 K = parseInt(document.f.k.value),
 L = R = '';

 for(i=0; i<K; i++)
 {
  L+='kvadrat(';
  R+=')';
 }
 return eval(L+N+R);
}
</SCRIPT>

<FORM NAME=f>
 Введите аргумент (число):
 <INPUT NAME=n><BR>
 Сколько раз возвести его в квадрат?
 <INPUT NAME=k><BR>
 <INPUT TYPE=button value="Возвести" onClick="alert(SuperPower());">
</FORM>

 

Пример 11 Форма prompt()

<FORM NAME=f>
<INPUT TYPE=button VALUE="Открыть окно ввода"
onClick="document.f.e.value=
     window.prompt('Введите сообщение','Сюда');">
<INPUT SIZE=30 NAME=e>
</FORM>


Пример 12 Примеры открытия нового окна

<FORM>
<INPUT TYPE=button VALUE="Простое окно"
 onClick="window.open('', 'test1',
  'directories=no,height=200,location=no,'+
  'menubar=no,resizable=no,scrollbars=no,'+
  'status=no,toolbar=no,width=200');">
<INPUT TYPE=button VALUE="Сложное окно"
 onClick="window.open('', 'test2',
  'directories=yes,height=200,location=yes,'+
  'menubar=yes,resizable=yes,scrollbars=yes,'+
  'status=yes,toolbar=yes,width=200');">
</FORM>

Пример 13. Часы в поле формы

<HTML><HEAD><SCRIPT>
var Chasy_idut=false;
var potok;
function StartClock()
{
  d = new Date();
  document.f.c.value =
   d.getHours()+':'+
   d.getMinutes()+':'+
   d.getSeconds();
  potok = setTimeout('StartClock();',500);
  Chasy_idut=true;
}

function StopClock()
{
  clearTimeout(potok);
  Chasy_idut=false;
}
</SCRIPT></HEAD><BODY>
<FORM NAME=f>
Текущее время:<INPUT NAME=c size=8>
<INPUT TYPE=button VALUE="Запустить" onClick="if(!Chasy_idut) StartClock();">
<INPUT TYPE=button VALUE="Остановить" onClick="if(Chasy_idut) StopClock();">
</FORM></BODY></HTML>

Пример 14. События BODY

<BODY onLoad="alert('Документ полностью загружен.');">
<BODY onUnload="myWin.close();">
<BODY onFocus="alert('Спасибо, что снова вернулись!');">

Пример 15. Изменение переменной открытого окна

<HTML><HEAD>
<SCRIPT>
wid = window.open('','','width=750,height=100,status=yes');
wid.document.open(); R = wid.document.write;
R('<HTML><HEAD><SCRIPT>var t;<\/SCRIPT></HEAD>');
R('<BODY><H1>Новое окно</H1></BODY></HTML>');
wid.document.close();
</SCRIPT>
</HEAD>
<BODY>
<A HREF="javascript:
wid.t=window.prompt('Новое состояние:','');
wid.document.write(wid.t); wid.focus(); void(0);"
>Изменим значение переменной t в новом окне</A>
</BODY></HTML>

Пример 16. Изменение поля статуса в открытом окне

<HTML>
<HEAD>
<SCRIPT>
var wid; // Объявляем глобальную переменную
function okno()
{
  wid = window.open('','okoshko','width=500,height=200');
  wid.document.open(); R = wid.document.write;
  R('<HTML><BODY><H1>Меняем текст в окне-потомке:</H1>');
  R('<FORM NAME=f><INPUT SIZE=40 NAME=t VALUE=Текст>');
  R('</FORM></BODY></HTML>');
  wid.document.close();
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE=button VALUE="Открыть окно примера" onClick="okno()">
<INPUT TYPE=button VALUE="Написать текущее время в поле ввода"
       onClick="window.wid.document.f.t.value=new Date();
                window.wid.focus();">
</BODY>
</HTML>

Пример 17. Цвет и расположение фреймов

<HTML>
<HEAD>
<TITLE>Левый, верх и низ</TITLE>
<SCRIPT>
window.onload=f;
function f()
{
  window.leftframe.document.bgColor='blue';
  window.topframe.document.bgColor='red';
  window.botframe.document.bgColor='green';
}
</SCRIPT>
</HEAD>
  <FRAMESET COLS="50%,*">
    <FRAME NAME=leftframe SRC=left.htm>
   <FRAMESET ROWS="50%,*">
       <FRAME NAME=topframe SRC=top.htm>
       <FRAME NAME=botframe SRC=bottom.htm>
    </FRAMESET>
  </FRAMESET>
</HTML>

 

Пример 18. Изменение полей формы

<FORM NAME=f>
<INPUT NAME=e SIZE=40>
<BR><INPUT TYPE=button VALUE="Ввести текст по имени элемента"
  onClick="document.f.e.value='Текст введен по имени элемента';">
<BR><INPUT TYPE=button VALUE="Ввести текст по индексу элемента"
  onClick="document.f.elements[0].value='Текст введен по индексу элемента';">
<BR><INPUT TYPE=reset VALUE="Очистить">
</FORM>


Пример 19. Скрытая отправка данных пользователя на сервер

<FORM NAME=f ACTION="http:///">
Ваше имя пользователя:<INPUT NAME=query>
</FORM>
<A HREF="javascript:document.f.submit();">Посмотреть</A>

Пример 20. Очистка формы

<FORM NAME=f>
<INPUT VALUE="Значение по умолчанию" SIZE=30>
<INPUT TYPE=button VALUE="Изменим текст в поле ввода"
       onClick="document.f.elements[0].value='Изменили текст';">
</FORM>
<A HREF="javascript:document.f.reset();void(0);">
Установили значение по умолчанию</A>

или
<FORM onReset="javascript: alert('Не дадим восстановить!');return false;">
<INPUT VALUE="Измените этот текст" SIZE=30>
<INPUT TYPE=reset VALUE="Восстановить">
</FORM>

Пример 21. Проверка пустой строки в отправленной форме

<SCRIPT>
function TestBeforeSend()
{
 if(document.f.query.value=='')
 {
   alert('Пустую строку не принимаем!');
   return false;
 }
 else return true;
}
</SCRIPT>

<FORM NAME=f METHOD=post onSubmit="return TestBeforeSend();"
      ACTION="http://www.intuit.ru/rating_students/">
Ваше имя пользователя на intuit:<INPUT NAME=query>
<INPUT TYPE=submit VALUE="Посмотреть рейтинг">
</FORM>

Пример 22. Удаление и добавление вариантов из SELECT

<SCRIPT>
function RestoreOptions()
{
document.f.s.options[0] = new Option('Вариант один','',true,true);
document.f.s.options[1] = new Option('Вариант два');
document.f.s.options[2] = new Option('Вариант три');
return false;
}
</SCRIPT>
<FORM NAME=f onReset="RestoreOptions();">
<SELECT NAME=s>
<OPTION>Первый вариант</OPTION>
<OPTION>Второй вариант</OPTION>
<OPTION>Третий вариант</OPTION>
</SELECT>
<INPUT TYPE=button VALUE="Удалить последний вариант"
      onClick="form.s.options[form.s.length-1]=null;">
<INPUT TYPE=reset VALUE=Reset>
</FORM>

Пример 23. Обработчик onChange при выборе множественных вариантов

<FORM>
Фрукты: <SELECT MULTIPLE
onChange="form.e.value='';
          for(i=0; i<length; i++)
          if(options[i].selected)
          form.e.value += options[i].text+', ';">
<OPTION>яблоко</OPTION>
<OPTION>банан</OPTION>
<OPTION>киви</OPTION>
<OPTION>персик</OPTION>
</SELECT><BR>
Выбраны позиции: <INPUT READONLY SIZE=70 NAME=e>
</FORM>

 
Вторая часть (Распечатка всех ссылок на странице, Простейшее динамическое меню, Простейшая динамическая смена изображений, Простейшие динамические создания новых страниц, Простейшее изменение цвета фона, Подтверждение действия, Бесконечный цикл изменения изображений, Ограниченный цикл изменения изображений, Запуск и остановка мультипликации (смены изображений), Защита переноса на следующую строку (<PRE>), Пункт меню с меняющимся изображением, Простейшее выпадающее меню с изображениями, Управление cookie, Простейший сценарий, Дата, Вывод точной даты и время посещения страницы, Обработчики событий для ссылки, Синтаксис onClick, onFocus, onBlur, onChange, onSubmit, Простейшая форма взаимодействия с пользователем)
Третья часть (Окно с сообщением и полем ввода (prompt), Свойства объекта "navigator" (браузер), Свойства объекта "document", Свойства объекта "history", Два свойства объекта "location" (адрес), Иерархия объектов, Адрес страницы, с которой пришел пользователь, Дата при загрузке страницы, Диалог при загрузке страницы, События при перемещении указателя мыши и уход со страницы, Новое окно, Конфигурация нового окна)

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

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

 

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

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

 

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

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

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

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