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

JavaScript

Категория: Программирование Обновлено: 12.02.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>

 

Следующая часть -->>>

 

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

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

 

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

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

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

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