- JavaScript

Объекты JavaScript и объектная модель документа

В целом объект – это составной тип данных, объединяющий множество значений в общий модуль и позволяющий сохранять и извлекать по запросу значения по их именам.
Ранее мы уже начали знакомство с понятием объекта в javascript.
В javascript есть такое понятие как DOM — Document Object Model — объектная модель веб-страницы (html-страницы).
Теги документа или, как еще говорят, узлы документа — это и есть его объекты.

Давайте рассмотрим на схеме иерархию объектов в JavaScript, и то, на каком месте иерархии находится рассматриваемый в данной теме объект document.

СВОЙСТВА И АТРИБУТЫ ОБЪЕКТА DOCUMENT В JAVASCRIPT

Объект document представляет собой веб-страницу.

Важно: Для обращения к свойствам и методам объекта в javaScript, как и при работе с другими объектами, используется точечная нотация: т.е. сначала пишется сам объект, затем через точку и без пробелов указывается его свойство, атрибут или метод

объект.свойство
объект.атрибут
объект.метод()

Рассмотрим пример:

Пример: пусть в html-документе есть тег

<div id="MyElem" class="small">Мой элемент</div>

и определенный для него стиль css (даже два стиля, второй пригодится для задания):

<style type="text/css">
  .small{
	color:red;
	font-size:small;
  }
  .big{
	color:blue;
	font-size:big;
  }
</style>

Необходимо:

задать новое свойство объекта, присвоить ему значение и вывести;
вывести значение атрибута объекта;
изменить значение атрибута объекта.

Выполним задание по порядку:

Так как это язык javascript, то объекту можно придумать и задать любое свойство с любым значением. Но для начала получим доступ к объекту (о доступе к объекту будет подробно рассказано ниже в данном уроке):

// получаем доступ к объекту по его id
var element = document.getElementById('MyElem');
element.myProperty = 5; // назначаем свойство
alert(element.myProperty); // выводим в диалоговое окно

Следующее задание связано с атрибутом объекта. Атрибут объекта — это атрибуты тега. Т.е. в нашем случаем их два: атрибут class со значением small и атрибут id. Будем работать с атрибутом class.

Теперь добавим javascript-код для вывода значения атрибута нашего объекта. Код должен находиться после основных тегов:

// получаем доступ к объекту по его id
var element = document.getElementById('MyElem');
alert(element.getAttribute('class')); // выводим в диалоговое окно

И последнее задание: изменяем значение атрибута. Для этого у нас заготовлен стиль «big». Заменим значение атрибута class на этот стиль:
// получаем доступ к объекту по его id var element = document.getElementById('MyElem'); element.setAttribute('class','big');
В результате наш элемент станет большего размера и окрасится в синий цвет (класс big).

Теперь подробнее рассмотрим использованные в примере методы для работы с атрибутами.

МЕТОДЫ ДЛЯ РАБОТЫ С АТРИБУТАМИ В JAVASCRIPT

Атрибуты можно добавлять, удалять и изменять. Для этого есть специальные методы:

Добавление атрибута (установление для него нового значения):
setAttribute(attr, value)
Получение значения атрибута:
getAttribute(attr)
Проверка наличия данного атрибута:
hasAttribute(attr)
Удаление атрибута:
removeAttribute(attr)

СВОЙСТВА ЭЛЕМЕНТА BODY

Через объект document можно обратиться к телу документа — тегу body — с его некоторыми полезными свойствами.

Например, у тега body есть два замечательных свойства: ширина и высота клиентского окна:

document.body.clientHeight — высота клиентского окна
document.body.clientWidth — ширина клиентского окна

Но самое главное, как мы уже узнали, это то, что через объект document посредством специальных методов осуществляется доступ ко всем элементам страницы, выраженным тегами.

Важно: При такого рода обращении к тегам страницы скрипт должен находиться в конце дерева элементов, перед закрытием body! Так как к моменту исполнения скрипта все элементы уже должны быть «нарисованы» браузером на экране

Доступ к элементам документа в javaScript

Для доступа к объектам или поиска объектов предусмотрено несколько вариантов:

Поиск по id (или метод getElementById), возвращает конкретный элемент
Поиск по названию тега (или метод getElementsByTagName), возвращает массив элементов
Поиск по атрибуту name (или метод getElementsByName), возвращает массив элементов
Через родительские элементы (получение всех потомков)

Рассмотрим каждый из вариантов подробнее.

Доступ к элементу через его атрибут id

Синтаксис: document.getElementById(id)

Метод getElementById() возвращает сам элемент, который можно затем использовать для доступа к данным

Выполнение:
alert(document.getElementById("cake").value); // возвращает "кол-во тортов"
Можно выполнить то же самое, реализовав обращение к объекту через переменную:
var a=document.getElementById("cake"); alert (a.value); // выведем значение атрибута value, т.е. текст "кол-во тортов"
Доступ к массиву элементов через название тега name и посредством индекса массива

Синтаксис:
document.getElementsByTagName(name);

Метод getElementsByTagName через переменную организует доступ ко всем элементам input(т.е. к массиву элементов input), даже если этот элемент — единственный на странице. Чтобы обратиться к конкретному элементу, например к первому, то указываем его индекс (массив начинается с нулевого индекса):

Выполнение:
var a =document.getElementsByTagName("input"); alert(a[0].value); // возвращает "кол-во тортов"
Доступ к массиву элементов по значению атрибута name
Синтаксис:
document.getElementsByName(name);

Метод getElementsByName("...") возвращает массив объектов, у которых атрибут name равен указанному в качестве параметра метода значению. Если такой элемент только один на странице, то метод все равно возвращает массив (только с одним единственным элементом).
Пример: допустим в документе есть элемент:
<input type="text" name="MyElem" value="1">
Необходимо: вывести значение value данного элемента
Выполнение:
var element = document.getElementsByName('MyElem'); alert(element[0].value);
В данном примере элемент один, но обращение осуществляется к нулевому элементу массива

Важно: Метод работает только с теми элементами, для которых в спецификации явно предусмотрен атрибут name: это теги form, input, a, select, textarea и ряд других, более редких.

Метод document.getElementsByName не будет работать с остальными элементами типа div, p и т.п.

.

Доступ к потомкам родительского элемента

Доступ к потомкам в javascript происходит посредством свойства childNodes. Свойство принадлежит объекту-родителю.
document.getElementById(roditel).childNodes;

Рассмотрим пример, в котором теги изображений помещены в контейнер — тег div. Таким образом, тег div является родителем данных изображений, а сами теги img, соответственно, являются потомками тега div:

<!-- контейнер для изображений -->
<div id= "div_for_img">
	<!-- массив объектов-изображений -->
	<img src="pic1.jpg" /> 
	<img src="pic2.jpg" /> 
	<img src="pic3.jpg" /> 
	<img src="pic4.jpg" />
</div>

Теперь выведем в модальное окно значения элементов массива с потомками, т.е. тегами img:

var myDiv=document.getElementById("div_for_img"); // обращаемся к родителю-контейнеру
var childMas=myDiv.childNodes; // массив потомков
for (var i =0; i < childMas.length;i++ ){
	alert(childMas[i].src);
}

Обратите внимание, что для перебора элементов массива потомков удобно использовать цикл For in. Т.е. в нашем примере получаем цикл:

...
for (var a in childMas){
	alert(childMas[a].src);
}

Другие способы обращения к элементам

Другие способы рассмотрим на примере:

<body>
<form name="f">
 <input type="text" id="t">
 <input type="button" id="b" value="button">
 <select id="s" name="ss">
   <option id="o1">1</option>
   <option id="o2">3</option>
   <option id="o3">4</option>
 </select>
</form>

Доступ:

...
// нежелательные и устаревшие методы доступа к элементам:
    alert(document.forms[0].name); // f
    alert(document.forms[0].elements[0].type); // text
    alert(document.forms[0].elements[2].options[1].id); // o2
    alert(document.f.b.type); // button
    alert(document.f.s.name); // ss
    alert(document.f.s.options[1].id); // o2
 
// предпочтительные методы доступа к элементам
    alert(document.getElementById("t").type); // text
    alert(document.getElementById("s").name); // ss
    alert(document.getElementById("s").options[1].id); // 02
    alert(document.getElementById("o3").text); // 4
...

Выполнение:

<body>
<input type="text" value="Привет!" id="t1"><br>
<input type="button" value="я - кнопка" id="b1">
...

Вариант 1:

    alert(document.getElementById("t1").value);
    document.getElementById("b1").style.backgroundColor = "red";

Вариант 2:

    alert(document.getElementById("t1").getAttribute('value'));
    document.getElementById("b1").style.backgroundColor = "red";

Проверка правильности внесения данных формы

Не осталось ли поле пустым?

Вводимым пользователями данным доверять нельзя. Предполагать, что пользователи при вводе данных будут их проверять, неразумно. Значит необходимо для этого использовать javascript.

Для того, чтобы проверить не осталось ли текстовое поле пустым (например, после заполнения пользователем данных какой-либо анкеты), следует обратиться к свойству value. Если значением свойства является пустая строка (""), значит необходимо как-то оповестить об этом пользователя.

alert(document.getElementById("name").value=="");// true

Т.е, проверка того, осталось ли поле пустым будет выглядеть так:

if(document.getElementById("name").value=="")
{
какие-то действия, например, вывод сообщения с требованием заполнить поле
};

Текст вместо числового значения: функция isNaN

Если поле предполагает введение числового значения, а вместо этого пользователь вводит текст, то необходимо использовать функцию isNaN (с англ. «является ли не числом?»), которая проверяет тип вводимых данных и возвращает true в случае введения текстовых данных вместо числовых.

Т.о. если возвращено true, то необходимо оповестить пользователя о том, чтобы он ввел правильный формат, т.е. число.

alert(isNaN(document.getElementById("minutes").value));// true

Т.е. проверка будет выглядеть следующим образом:

if(isNaN(document.getElementById("minutes").value)){
  оповещение с требованием ввести числовые данные
};

И последнее, если все таки пользователь ввёл в текстовое поле, предназначенное для числа, и число и текст, то при помощи ранее изученной функции javascript parseInt можно вычленить из текста число:

alert(parseInt(document.getElementById("cake").value)); // 10

В коде используются логические операторы javascript для построения сложных условий, пройденные раннее.

Новым понятием для вас является вызов функции в качестве обработчика события кнопки:
onclick="placeOrder();"
По щелчку на кнопке будет вызываться функция placeOrder()


Событие onLoad. Свойства 
высоты и ширины объекта в javaScript

Для выполнения следующего примера нам понадобится 
новое понятие — событие.
В 
нашем случае событие — это реакция 
программы на действие пользователя (щелчок мышью по 
кнопке, уменьшение мышкой окна браузера, ввод текста с клавиатуры и т.д.). С 
помощью программы у нас есть возможность отреагировать на любые действия 
пользователя.
Рассмотрим 
одно из самых распространенных событий — onload — 
которое происходит при загрузке 
документа (когда пользователь своими действиями 
вызвал загрузку веб-страницы).
Рассмотрим 
пример использования события javascript onload для 
изменения ширины и высоты элемента.
Пример: Добавить 
на страницу изображение и при помощи javascript при наступлении события загрузки 
страницы сделать ширину изображения соответствующей ширине окна браузера
 


  
  
    function resizeImg(){
	var myImg=document.getElementById("img1");
	myImg.style.width=document.body.clientWidth;
}
...


  
  
    <body onload="resizeImg()" >
<img src="1.jpg" id="img1">
В 
примере основные действия происходят в функции resizeImg():
переменная myImg ассоциирована 
с тегом img — 
картинкой, свойство которой width — 
ширина — меняется в самой функции.

Вызов 
функции происходит по загрузке страницы в событии onload тела 
документа (тело — body — 
главный элемент, поэтому загрузка страницы — это событие, относящееся к телу). 

 


  
  
    var allImg=document...; // получаем массив изображений
for (var i=0; i < allImg.length; i++){
    allImg[i].....; // меняем свойство width
    ...; // меняем свойство height
    ...; // меняем border
}

Событие onclick javaScript 
и три способа обработки событий
Событие onClick происходит 
во время одинарного щелчка кнопкой мыши. Обработать событие, т.е. 
отреагировать на него посредством скрипта, можно тремя способами. Рассмотрим 
их:
Пример: По 
щелчку на кнопке вывести диалоговое окно с сообщением «Ура!»


 


  
  Через 
  свойство объекта с использованием пользовательской функции: 
  Скрипт:
  
  
    
    
      function message() {
		alert("Ура!");
	}
  html-код:
  
  
    
    
      <body>
<form>
<input type="button" name= "myButton" onclick="message()" value="Щелкни!">
</form>
  В данном примере в 
  html-коде мы видим кнопку. У кнопки присутствует 
  атрибут onclick («по щелчку»), в значении которого стоит 
  вызов функции с названием message(). 
  Это пользовательская функция, описанная выше в скрипте. В самой функции 
  выводится диалоговое окно, что и задано согласно заданию.
  Скрипт при такой обработке события обычно находится в 
  области headдокумента
  

   


  
  
Через 
  атрибут тега: 
  
  
    
    
      <body>
<form name="myForm">
<input type="button" name="myButton" value="Щелкни!" 
	onclick="javascript: alert('Ура!')">
</form>
  Это упрощенный вариант 
  обработки события, он подходит только для небольшого кода, когда необходимо 
  выполнить один-два оператора. Иначе код будет плохочитаемым.
В качестве атрибута кнопки 
  указывается onclick («по щелчку»), а в качестве значения 
  пишется скрипт из операторов с указанием на каком языке он написан (javascript:). 
  В нашем случае оператор для вывода модального окна со 
  словом «Ура!»
  
Через 
  регистрацию функции-обработчика в качестве свойства элемента: 
  html-код:
  
  
    
    
      <form name="myForm">
<input type="button" value="Щелкни!" id="myButton">
</form>
  Скрипт:
  
  
    
    
      document.myForm.myButton.onclick = message; 
function message() {
	alert('Ура!');
}
  В html-коде здесь 
  присутствует кнопка с атрибутом id, 
  который необходим для обращения к кнопке через скрипт.
  В 
  скрипте, который обязательно 
  находится ниже дерева элементов (можно перед 
  закрытием тега body), 
  находится обращение к кнопке (document.myForm.myButton), 
  для которой назначается обработчик события onclick со 
  значением ссылки на функцию. 
  Обращение к кнопке может быть организовано через 
  атрибут id (document.getElementById('myButton').onclick 
  = message;)
  Скобки после названия 
  функции message не 
  ставятся. В данном случае это именно ссылка на 
  функцию, иначе, при использовании скобок, функция была бы вызвана, а не 
  назначена в качестве обработчика событий.
  Именно такой способ 
  обработки событий максимально приближен к тому, который происходит, например, 
  в ОС windows.

 

 =>> 

События onMouseOver и 
onMouseOut
Событие 
наступает при наведении (onMouseOver) 
на объект и при выведении (onMouseOut) 
за пределы объекта курсора мыши.
Назначение 
обработчика событий осуществляется точно таким же образом, как и в 
случае с событием 
onclick.
Форма: идентификация формы, 
события
Для 
идентификации формы и ее элементов через javaScript можно воспользоваться двумя 
атрибутами: name и id.

  В 
  случае, когда мы используем javaScript для динамичности и интерактивности 
  веб-страниц, но, при этом отправлять данные с формы на сервер не требуется, то 
  для идентификации используется атрибут id. 

  
Атрибут name необходим 
  для того, чтобы отправить форму на сервер.
 

Атрибуты формы:

  
  
    action (англ. 
      «действие»)
Файл на сервере с кодом для 
      отработки отосланных данных
    http://labs.org.ru/javascript-1/
  
    enctype (англ. 
      «тип кодировки»)
    text/plain (обычный 
      текст)
application/x-www-dorm-urlencoded (для 
      метода Post отправки формы)
multipart/form-data (для 
      метода Post, если прикрепляются файлы)
  
    method (метод 
      отправки данных)
    post
get
Пример:


  
  
    <form name="myForm" action="file.php" method="post" enctype="text/plain">

  В 
  атрибуте action указывается 
  серверный файл со скриптом, ответственным за основную обработку данных, 
  пересылаемых из формы. Обычно код этого файла пишется на серверном языке 
  программирования, например, на языке php или perl. 
  
Атрибут enctype указывает 
  на тип передаваемой на сервер информации, если это просто текстовые данные 
  — text/plain, 
  если с формой отсылаются файлы, то следует указать multipart/form-data. 

  
Атрибут method указывает 
  и определяет форму передачи данных. Подробно мы на этом останавливаться не 
  будем, однако следует сказать, что для более надежной передачи следует указать 
  метод post


Пример: Создать 
несколько различных элементов управления формы, данные из формы предполагается 
отсылать на сервер

 

 



  
  
    <form name="f_name" method="get" action="javascript:void(0);">
 <input name="i_name" size="30" type="text" value="текст">
 <textarea name="mess"></textarea>
 <input type="checkbox" name="chName" id="chId" value="yes" />да
 <input type="radio" name="rName" id="rId" value="yes" />да
 <input type="file" name="fName" id="fId" />
 <input type="password" name="pName" id="pId" />
 <input type="hidden" name="hName" id="hId"  value=“hid"/> 
 <select name="sName" id="sId" multiple="multiple" >
   <option name="opt1Name" id="opt1Id" value="1">text1
   <option name="opt2Name" id="opt2Id" value="2">text2
 </select>
</form>
При 
щелчке на кнопке submit данные 
на сервер будут пересылаться в форме переменная=значения в 
следующем формате:
i_name 
= текст
mess 
= ""
chName= 
yes
rName 
= yes
fName 
= путь файла
pName 
= ""
hName= 
hid
sName=1 
или 2
О том, как правильно располагать 
элементы управления на форме с точки зрения юзэбилити, можно прочитать статью на 
сайте tproger по сслыке1 и ссылке2.
ИДЕНТИФИКАЦИЯ ФОРМЫ В 
JAVASCRIPT
Пример обращения в javaScript 
к форме:

Пример: Создать 
форму с двумя элементами типа radio (переключатели) 
и кнопкой отправки формы на сервер (submit). 
Получить доступ в скрипте к форме


 



  
  
    <form name="f1" id="f">
Ваш пол:<br>
<input type="radio" name="r1" id="id1">м<br>
<input type="radio" name="r1" id="id2">ж<br>
<input type="submit">
</form>
</body>
скрипт:


  
  
    document.forms[0].
document.getElementById("f1").
МЕТОДЫ ФОРМЫ
Submit() ~ 
использование кнопки submit
Reset() ~ 
использование кнопки reset

    
Метод submit() формы 
  применяется для отправки формы из JavaScript-программы
  
Пример того как можно в 
javascript отправить форму по щелчку на гиперссылке:

Пример: Создать 
форму с текстовым полем. После формы расположить гиперссылку, по щелчку на 
которой отсылать данные формы на сервер


 



  
  
    <form name="s" method="post" action= 
"javascript:window.alert('данные подтверждены'); void(0);">
	<input type="text" size="1">
</form>
 
<a href="javascript:document.s.submit();">Отослать</a>
— void(0) — 
отмена пересылки данных на сервер
— при 
нажатии на ссылку происходит переход к выполнению action
СОБЫТИЕ 
JAVASCRIPT ONSUBMIT И ONRESET
Рассмотрим 
использование событий на примерах:
Пример: Перед 
отправкой формы на сервер необходимо отобразить простое сообщение для 
пользователя с просьбой подтвердить заполнение формы заказа

 

Скрипт: 




  
  
    …
function confirmOrder() { 
confirm ('Вы подтверждаете заказ?') ; 
}
…


  
  
    <!-- функция confirmOrder() вызывается в качестве значения атрибута onsubmit формы -->
<form action="script.php" method="post" onsubmit="confirmOrder()"> 
<input type="submit" value="ok" />
</form>
В 
следующем примере происходит регистрация 
функции-обработчика в качестве свойства элемента:
Пример: При 
очистке формы (элемент reset) 
выдавать диалоговое окно для подтверждения очистки. Выполнить в виде скрипта с 
ссылкой на функцию


 



  
  
    <form action="process.cgi" id="f1" method="post">
<input type="text" value="John" />
<input type="reset" value="cancel" /> 
</form>
Скрипт:


  
  
    document.getElementById("f1").onreset=function()
 {
   confirm ('Вы уверены, что хотите очистить форму?') ;  
 };
В 
скрипте происходит обращение к форме (f1) 
и в качестве ее свойства указывается функция-обработчик
Объект text: свойства и 
события


  
  
    <form name="f1">
Ваше имя:<br>
<input type="text" name="yourName" id="t1">
</form>
Текстовое 
поле идентифицируется тремя способами:


  
  
    1
2
3

    document.getElementById('t1').value="Имя";
document.f1.yourName.value="Имя";
document.f1.elements[0].value="Имя";
Первый 
способ является предпочтительным.

  Свойства:
name — 
  соответствует атрибуту name
id — 
  соответствует атрибуту id
value — 
  соответствует текущему значению объекта input т.е. 
  текущему содержимому области текста;
type — 
  для данного объекта всегда содержит значение «text»
Событие onсhange генерируется 
когда текст изменен и фокус переходит на другой объект

Пример: Имеется 
html-страница с двумя текстовыми полями. Необходимо в обработку 
события onсhange первого 
поля добавить вызов функции, которая во второе текстовое поле помещает текст из 
первого текстового поля


 

Выполнение:


  Первый 
  способ: Назначение функций — обработчиков событий 
  Скрипт:
  
  
    
    
      <script type="text/javascript">
function myFunc() {
 document.getElementById("second").value = document.getElementById("first").value;
}
</script>
  
  
    
    
      <body>
<input type='text' id='first' onchange='myFunc()'>
<input type="text" id='second'>
  
Второй 
  способ: скрипт в значении атрибута 
  
  
    
    
      <input type='text' id='first' 
onchange='javascript: document.getElementById("second").value=document.getElementById("first").value;'>
<input type="text" id='second'>
Скрипт:


  
  
    function check(){
 if(...) {...}
 else {...}
 }
html-код:


  
  
    <body>
<form action="" method="get" name="my">
Сколько бит в 1 байте?
<input type="text" id="answer" size="3"><br>
<input name="b1" type="button" onClick="..." value="Проверить">
</form>
СОБЫТИЕ 
JAVASCRIPT НАЖАТИЕ КЛАВИШИ — ONKEYPRESS
Нажатие 
клавиши на клавиатуре можно зафиксировать с помощью 
события onkeypress. 
Код конкретной нажатой клавиши может быть идентифицирован с помощью 
объекта window.event.keyCode

Пример: При 
вводе текста в текстовое поле проверять, нажата ли клавиша «d». Если нажата, заменять текст в текстовом 
поле на «нажата d». 
Использовать событие javaScript onkeypress 


Замечание: буква d имеет 
код 100



 


  
  
    <input id="txt1" onkeypress="if(window.event.keyCode=='100') document.getElementById('txt1').value='нажата d'">

Служебное слово в javaScript 
this
this в 
javascript заменяет обращение к текущему объекту. Текущим объектом в данном 
случае является объект, в котором описан код.
Рассмотрим пример использования в 
javascript this:
Пример: По 
щелчку на текстовом поле выводить в нем слово «hello».



 

Выполнение:

  
  
  
    
    
      <input type="text" onclick="this.value='hello'">
  

  
  
    
    
      function sayHello(a){
  a.value="hello";
}
...
  
  
    
    
      ...
<input type="text" onclick="sayHello(this)">
...
В 
примере по щелчку на текстовое поле вызывается функция sayHello(), 
параметром которой является слово this, 
т.е. в качестве параметра передается сам объект — текстовое поле. В функции же 
задается значение свойства value для 
переданного параметра.
События объекта (тега) 
body onLoad и onUnload

  Обработчик 
  события onload прекрасно 
  подходит для инициализации всех остальных событий. 
  
Данное 
  событие добавляется в тег body: 
  
  
    
    
      <body onload="myFunction()">
  
Аналогичное 
  событие есть для инициализации функций при закрытии документа — 
  событие onUnload. 
  Событие вызывается тогда, когда пользователь закрывает окно браузера или окно 
  конкретной веб-страницы. 
  
Вместо onUnload сегодня 
  можно использовать onBeforeUnload 

  
Вывод 
  сообщений при использовании onUnload сегодня 
  работает только в браузере IE
Рассмотрим 
пример двух вариантов использования события onload в 
javascript:
Пример: По 
загрузке документа поместить в текстовое поле сообщение «Добрый день!» (запускать 
функцию)
 

Выполнение:


  
  Скрипт:
  
  
    
    
          function printText() {
        document.getElementById("txt1").value = "Добрый день!";
    }
  HTML-код:
  
  
    
    
      <body onload="printText()">
<form name="myForm">
<input id="txt1" type="text" name="input" value="">
  Таким образом, при 
  загрузке веб-страницы браузером произойдет вызов 
  функции printText(), 
  которая выведет в текстовое окно текст «Добрый день!»
  

  Скрипт:
  
  
    
    
      window.onload= function() {
        document.getElementById("txt1").value = "Добрый день!";
    }
  
  
    
    
      <body>
<form name="myForm">
<input id="txt1" type="text" name="input" value="">
В 
данном случае код полностью реализован в скрипте. Результат будет 
аналогичен.
Событие onfocus в 
javascript: получение фокуса

  Событие onfocus происходит, 
  когда элемент управления получает фокус, т.е. курсор устанавливается в 
  объект.

Пример: Необходимо, 
чтобы содержимое текстового поля и поля для ввода (textarea) выделялось при 
получении этими элементами фокуса. 

Выделение происходит при 
помощи метода select() самих 
объектов:
объект.select()


 

Выполнение:

Будем 
использовать служебное слово this:


  
  
    …
function selectContents (Obj) { 
	Obj.select() ; 
}
…


  
  
    <body>
<input type="text" size="30" onfocus="selectContents(this)"> 
<textarea rows="3" cols="50" onfocus="selectContents(this)"> 
</textarea>
В 
примере оба объекта (textarea и input) 
имеют событие onfocus, 
которое вызывает функцию selectContents(). 
В качестве параметра функции передается сам объект (на это указывает служебное 
слово this). В функции вызывается метод select для 
выделения объекта.
Событие onblur в 
javascript: потеря фокуса

  Событие onblur происходит 
  при потере объектом фокуса. Т.е. когда курсор только что размещался на/в 
  объекте, а теперь помещается на/в другой объект.
 

Пример: Создать 
функцию проверки заполнения полей (пустое ли), которая вызывается для любого 
поля при наступлении события onblur (вызывается 
функция с параметром)


 

Выполнение:

Скрипт:


  
  
    1
2
3
4
5
6
7
8
9

    function validateNonEmpty(inputField) {
	// Проверка на наличие текста
	if (inputField.value.length == 0) {
		// Сообщаем пользователю, что данные не введены
		alert("Заполните поле.");
		return false;
	}
return true;
}
HTML-код:


  
  
    <form name="f1">
Ваше имя:<br>
<input type="text" id="t1" onblur="validateNonEmpty(this)">
<input type="text" id="t2" onblur="validateNonEmpty(this)">
<input type="text" id="t3" onblur="validateNonEmpty(this)">
<input type="text" id="t4" onblur="validateNonEmpty(this)">
Объект canvas

  Для 
  рисования в javascript прежде всего необходимо добавить объект canvas, который 
  имитирует «холст» художника. Данный объект поддерживается всеми браузерами 
  современных версий, но некоторые устаревшие версии не поддерживают его. 
  Значением атрибута id также уместно назначить «canvas»: 
  
  
    
    
      <canvas id="canvas" width="150" height="150">
</canvas>
  
Размеры 
  канваса по умолчанию: 300 px × 150 px (width × height), но можно устанавливать 
  произвольные размеры. 
  
Для 
  canvas желательно установить какой-либо стиль (css), добавив, например, рамку, 
  или задав задний фон. 
  
Кроме 
  того, объект может служить контейнером других объектов (например, изображений) 
  и текста: 
  
  
    
    
      <canvas id="canvas" width="150" height="150">
  current stock price: $3.15 + 0.15
</canvas>
  
Главным методом объекта 
  canvas является метод getContext(), который используется для 
  получения основных функций рисования. У метода один параметр, указывающий на 
  поддержку типа графики (2d или 3d). 
  
Добавим 
  javascript-код с обращением к объекту canvas и установкой поддержки 
  2d-графики: 
  
  
    
    
      var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ПРОВЕРКА ПОДДЕРЖКИ 
CANVAS

  Далее 
  добавим javascript-код с обращением к объекту canvas и проверкой поддержки его 
  браузером: 
  
  
    
    
      var canvas = document.getElementById('canvas');
if(canvas.getContext){
   var ctx = canvas.getContext('2d');
   // работа с канвасом
} else{
   // код, не поддерживающий канвас
}
  
Рассмотрим 
  код полностью: 
  
  
  
    
    
      <!DOCTYPE html>
<html>
  <head>
    <title>Canvas</title>
    <script type="text/javascript">
      function draw() {
        var canvas = document.getElementById('canvas');
        if (canvas.getContext) {
          var ctx = canvas.getContext('2d');
        }
      }
  
  
    
    
          </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
 
  <body onload="draw();">
    <canvas id="canvas" width="150" height="150"></canvas>
  </body>
</html>

 


  
  
    ...
function draw() {
      var canvas = document.getElementById('canvas');
      if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
 
        ctx.fillStyle = 'rgb(200, 0, 0)';
        ctx.fillRect(10, 10, 50, 50);
 
        ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
        ctx.fillRect(30, 30, 50, 50);
      }
    }
...
РИСОВАНИЕ ФИГУР (ПРИМИТИВОВ)

  Отсчет 
  координатной плоскости находится в левом верхнем углу объекта canvas: 
  
  
Canvas 
  поддерживает рисование только одной фигуры — прямоугольника. Остальные фигуры 
  могут получиться из прямых и точек. 
  
Рисование 
  прямоугольника: 
  
Залитый 
  цветом прямоугольник: 
  fillRect(x, y, width, height)
  
Прямоугольный 
  контур: 
  strokeRect(x, y, width, height)
  
Очистка 
  прямоугольной области (прозрачный прямоугольник): 
  clearRect(x, y, width, height)
  

  ВЫБОР 
  ЦВЕТА В CANVAS
  Для выбора цвета 
  заливки используется метод:
  
В 
  системе RGB без указания уровня прозрачности: 
  fillStyle = ‘rgb(0-255, 0-255, 0-255)’;
  
В 
  системе RGB с указанием уровня прозрачности: 
  fillStyle = ‘rgba(0-255, 0-255, 0-255, 0.1-0.9)’;
  
В 
  качестве заливки по умолчанию стоит черный цвет.

Пример:Нарисовать 
красный полупрозрачный квадрат 40 х 40, начиная с нулевой координаты.

 Рисование путей в canvas

  Путь 
  представляет собой набор точек, соединенных прямыми линиями или кривыми. Линии 
  могут быть разной ширины, кривизны и цвета 
  
Рассмотрим 
  этапы построения путей и функции рисования путей в 
  javascript canvas:

  1. 
  Создание пути. Когда путь создан остальные команды уже работают над созданным 
  путем: 
  beginPath()
  
  
    
    
      void ctx.beginPath();
  
2. 
  Выбор метода построения пути (кривая, прямая, кривая безье) или переход в 
  новую точку: 
  
переход 
  в новую точку с указанными координатами: 
  CanvasRenderingContext2D.moveTo()
  
  
    
    
      void ctx.moveTo(x, y);
  
соединение 
  прямой линией последней использованной координатой с точкой x, y: 
  CanvasRenderingContext2D.lineTo()
  
  
    
    
      void ctx.lineTo(x, y);
  
добавление 
  кубической кривой безье (требуется три точки: первые две (cp1x, cp1y, cp2x, 
  cp2y) — контрольные, последняя — конец линии; начальной точкой является 
  последняя указанная точка, или точка, к которой перешли командой moveTo()) 
  CanvasRenderingContext2D.bezierCurveTo()
  
  
    
    
      void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
  
добавление 
  квадратичной кривой безье (cpx — координата х контрольной точки, cpy — 
  координата y контрольной точки): 
  CanvasRenderingContext2D.quadraticCurveTo()
  
  
    
    
      void ctx.quadraticCurveTo(cpx, cpy, x, y);
  
добавление 
  дуги с центром в точке x и y и 
  радиусом r с 
  позиции startAngle до endAngle(по умолчанию движение дуги по 
  часовой стрелке) 
  CanvasRenderingContext2D.arc()
  
  
    
    
      void ctx.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);
  
добавление 
  дуги, соединенной с предыдущей точкой прямой линией: 
  CanvasRenderingContext2D.arcTo()
  
  
    
    
      void ctx.arcTo(x1, y1, x2, y2, radius);
  
добавление 
  эллипса к пути с центром в точке x и y и радиусом radiusX и radiusY с началом 
  в startAngle и окончанием 
  в endAngle: 
  CanvasRenderingContext2D.ellipse()
  
  
    
    
      void ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
  
создание 
  прямоугольного пути: 
  CanvasRenderingContext2D.rect()
  
  
    
    
      void ctx.rect(x, y, width, height);
  
3. 
  Конец пути — соединением прямой линией предпоследней точки с начальной точкой 
  пути 
  closePath()
  
  
    
    
      void ctx.closePath();
  
4. 
  Рисование пути: 
  stroke()
  
  
    
    
      void ctx.stroke();
void ctx.stroke(path);
  
5. 
  Закраска внутренней области пути: 
  fill()
  
  
    
    
      void ctx.fill();
void ctx.fill(path);

Событие javascript onresize объекта window

window.onresize = … ;

Событие onresize объекта window ответственно за изменение размеров окна браузера. Поэтому событие и принадлежит объекту окно — window.

Поскольку среди элементов html нету тега, отождествленного с окном браузера, то обработать в javascript событие onresize можно при помощи присваивания функции свойству объекта window.

Рассмотрим на примере:

Пример: Написать скрипт, который при изменении размера окна вызывает сообщение «Размер окна изменен!»

Скрипт:

    window.onresize = message;
    function message() {
        alert("Размер окна изменен!");
    }

либо так:

window.onresize = function message() {alert("Размер окна изменен!");}

HTML-код:

<body>пожалуйста, измените размер этого окна.

Объект javascript выпадающий список — select

Объект select — выпадающий список — предоставляет список значений для выбора. Выбор может быть как одного пункта, так и нескольких пунктов сразу. Это сложный объект, обращение к которому в скрипте происходит и как к объекту select, и как к его пункту option.

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

length — количество пунктов списка
name — атрибут name
options[] — массив пунктов
selectedIndex — индекс выбранного пункта option
defaultSelected — выбранный пункт option по умолчанию
selected — выбранный пункт

Получить значение выпадающего списка (select) в javascript можно через свойство value. Но есть и другие способы.

Рассмотрим пример:

Пример: Разместить выпадающий список из трех пунктов — гороов: Москва, Санкт-Петербург, другой. По щелчку на кнопке получить значение свойства value выбранного option (пункта) списка и вывести его на экран

HTML-код:

<form name="f1">
Город:<br>
<select name="town" id="s1">
  <option value="msk" >Москва</option>
  <option value="spb">Санкт-Петербург</option>
  <option value="other">другой</option>
</select>
<input type="button" onclick="f()" value="ok">
</form>

Идентификация значения списка:

function f(){
var a=document.getElementById('s1').value;
alert(a);
}

Скрипт:

function check()
{ 
  document.getElementById('t1').value= ...;
}

HTML-код:

<input type="text" id="t1">
<br>
<select id="menu1" onchange="...">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

Рассмотрим пример использования свойства объекта select — selectedIndex — выбранный пункт option:

Автозавод: 
<select name="s0" onChange="form.elements[1].value=selectedIndex;">
	<option>ГАЗ
	<option>ВАЗ
</select>
Выбрали индекс: 
<input type="text" size="1" maxlength="1">
</form>

В данном примере при изменении пункта меню генерируется событие onChange. В качестве значения атрибута onChange выполняется скрипт: происходит обращение к текстовому полю через массив элементов формы (текстовое поле — это первый элемент массива, т.к. 0-й элемент — это выпадающий список select). В качестве значения текстового поля указывается номер выбранного пункта списка (selectedIndex).

ОБЪЕКТ JAVASCRIPT OPTION — ПУНКТ МЕНЮ

Пункт меню select в javascript — option — рассматривается как отдельный объект со своими свойствами:

text — строка текста, которая размещается в контейнере LI
value — значение, которое передается серверу при выборе альтернативы, связанной с объектом OPTION
selected — альтернатива выбрана(true/false)

Доступ к конкретному пункту меню происходит через коллекцию (массив) options:

<form name="f1">
<select name="s1">
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
</select>

Скрипт доступа к первому пункту выпадающего меню (нулевой элемент массива options):

document.f1.s1.options[0]. ...

Рассмотрим пример использования свойства text объекта option:

<form>
<select id="s1" onChange="document.getElementById('t1').value= document.getElementById('s1').options[document.getElementById('s1').selectedIndex].text;">
  <option>ГАЗ
  <option>ВАЗ
</select>
<input type="text" id="t1">
</form>

Рассмотрим еще одно решение с использованием списка множественного выбора:

Пример: При изменении списка множественного выбора в текстовое окно выводить индексы выбранных альтернатив
(установить для списка атрибут multiple)

<form>
Набор канцелярских товаров:
<select onChange="form.elements[1].value='';
for(i=0;i<6;i++) if(form.elements[0].options[i].selected==true)
form.elements[1].value = form.elements[1].value+i;" multiple>
	<option>Карандаши
	<option>Авторучки
	<option>Линейки
	<option>Тетради
	<option>Стерки
	<option>Кнопки
</select>
Выбраны позиции:
<input name="s1" size="7" maxlength="7">
</form>

Свойства outerHTML и innerHTML в javaScript

innerHTML в javaScript — это директива для формирования или замены содержимого какого-либо элемента.
Рассмотрим выполненный пример:

Пример: По щелчку на абзац (тег p) изменять содержимый текст данного тега

<p onclick="this.innerHTML='измененный текст'">изменяемое содержимое</p>

outerHTML в javaScript — это директива для формирования или замены содержимого какого-либо элемента вместе с самим элементом.
Пример:

Пример: По щелчку на абзац (тег p) изменять содержимый текст данного тега и выполнять центрирование текста в нем

<p onclick="this.outerHTML='<p align=center>измененный текст</p>'">изменяемое содержимое</p>

`action` (англ. «действие») Файл на сервере с кодом для отработки отосланных данных	http://labs.org.ru/javascript-1/
`enctype` (англ. «тип кодировки»)	text/plain (обычный текст) application/x-www-dorm-urlencoded (для метода Post отправки формы) multipart/form-data (для метода Post, если прикрепляются файлы)
`method` (метод отправки данных)	post get

JavaScript

Объекты JavaScript и объектная модель документа

СВОЙСТВА И АТРИБУТЫ ОБЪЕКТА DOCUMENT В JAVASCRIPT

МЕТОДЫ ДЛЯ РАБОТЫ С АТРИБУТАМИ В JAVASCRIPT

СВОЙСТВА ЭЛЕМЕНТА BODY

Доступ к элементам документа в javaScript

Проверка правильности внесения данных формы

Событие onLoad. Свойства высоты и ширины объекта в javaScript

Событие onclick javaScript и три способа обработки событий

События onMouseOver и onMouseOut

Форма: идентификация формы, события

ИДЕНТИФИКАЦИЯ ФОРМЫ В JAVASCRIPT

МЕТОДЫ ФОРМЫ

СОБЫТИЕ JAVASCRIPT ONSUBMIT И ONRESET

Объект text: свойства и события

СОБЫТИЕ JAVASCRIPT НАЖАТИЕ КЛАВИШИ — ONKEYPRESS

Служебное слово в javaScript this

События объекта (тега) body onLoad и onUnload

Событие onfocus в javascript: получение фокуса

Событие onblur в javascript: потеря фокуса

Объект canvas

ПРОВЕРКА ПОДДЕРЖКИ CANVAS

РИСОВАНИЕ ФИГУР (ПРИМИТИВОВ)

Событие javascript onresize объекта window

Объект javascript выпадающий список — select

ОБЪЕКТ JAVASCRIPT OPTION — ПУНКТ МЕНЮ

Свойства outerHTML и innerHTML в javaScript

Меню