JavaScript
Урок  4
   
     
Урок 1        Eзикът JavaScript е обектно ориентиран т.е. 
Урок 2   можете да използвате предварително дефинирани 
Урок 3 обекти. Всеки обект има разични методи, които 
Урок 5 изпълняват някакви действия. 
Урок 6      В този урок ще се запознаете с основният обект  в  
Урок 7 JavaScript-обекта document и неговите методи. 
Урок 8 Обекта document e  един вид контейнер т.е. чрез 
него може да управлявате всички елементи, които са в текущия документ.  
Гледайте на всички елементи във вашата web-страница като на обекти. За да може да ги управлявате, трябва много добре да разберете йерархията която  е дефинирана за тях  в JavaScript. 
Най-лесно това ще стане с един пример:  
 

 

Пример                                                                 4.1
<html> 
<head> 

</head> 
<body bgcolor=#00fffff> 

<center> 
<img src="Z32.jpg" name="pic1" > 
</center> 

<p> 

<form name="myForm"> 
Какъв модел е колата:  
<input type="text" name="name" value=""><br> 
Пишете ми: 
<input type="text" name="email" value=""><br> 
<input type="button" value="Push me" name="myButton" onClick="alert('BMW')"> 
</form> 
 

<center> 
<img src="Circles.jpg" name="pic4" width=300 height=15 > 
<br> 

<a href="http://www.uni-sofia.bg">Софийски Университет</a> 
</center> 

</body> 
</html>

Натисни отгоре и виж!
Пример1
  

     В тази web-страница има две картинки, една хипервръзка и форма с две текстови полета и един бутон. От "гледна точка" на JavaScript прозореца на браузъра е window-обект/виж в следващия урок/ . В него зареждаме HTML-документ. Тази страница е document-обект. Това означава, че document-обекта представя HTML-документа, който е зареден в момента. Елементи на document-обекта са фона на страницата, цвета на текста , но което е най-важно елементи са и хипервръзките, формите и т.н. 
Тази схема представя йерархията в примера: 

 

Ако искате да се обърнете към първата картина примерно, просто следвате йерархията: 
document.images[0]. 
За достъп до второто текстово поле трябва да напишете:document.forms[0].elements[1] 
Ето как ще изглежда горния пример, ако прибавите бутон, който при натискане ще изведе текста въведен в първото текстово поле: 

  

Пример                                                                                   4.2
 <html> 
<body bgcolor=#00fffff> 

 <center> 
<img src="Z32.jpg"  
name="pic1" > 
</center> 

<p> 

<form name="myForm"> 
Какъв модел е колата:  
<input type="text" name="name"  
value=""><br> 
Пишете ми: 
<input type="text" name="email"  
value=""><br> 
<input type="button" value="Push me"  
name="myButton"  
onClick="alert('BMW')"> 
</form> 
 

<center> 
<img src="Circles.jpg"  
name="pic4"  
width=300 height=15 > 
<br> 

 <a  
 href="http://www.uni-sofia.bg">Софийски  
 Университет</a> 
</center><br> 
<script language="JavaScript"> 
<!-- 
function izwedi(){ 
name=document.forms[0].elements[0]. 
value; 
return (alert(name)) 
} 
//--> 
</script> 
<form> 
<input type="button" 
 value="първо текстово поле"  
onClick="izwedi()"> 
 </form> 
</body> 
</html> 
 

Натисни отгоре и виж!
Пример2
  

   Ако имате много обекти в документа ще ви е трудно да ги цитирате правилно, затова може да се обръщате към тях с имената им. В по горния пример вместо да пишете: 
name=document.forms[0].elements[0].value; 
Може да използвате: 
name= document.myForm.name.value; 
Ето пример за това: 

Ето и кода: 
<form name="myForm"> 
<input type="text" name="input" value="там-ти-ри-рам"> 
<input type="button" value="Здарвей"  
onClick= 
"document.myForm.input.value= 'Как си?!'; ">  
 
 
Ето още един интересен пример, разгледайте го внимателно понеже има нови елементи в него:  
 
 

Пример                                                                                   4.3
<html> 
<head> 
<title>Objects</title> 

<script language="JavaScript"> 
<!-- hide 

function first() { 

  

  alert("The value of the textelement is: " +  
    document.myForm.myText.value); 
} 

function second() { 

   

  var myString= "The checkbox is "; 

   
  if (document.myForm.myCheckbox.checked) myString+= "checked" 
    else myString+= "not checked"; 

  // output string 
  alert(myString); 
} 

// --> 
</script> 
</head> 
<body bgcolor=red> 

<form name="myForm"> 
<input type="text" name="myText"  
value="Heloo"> 
<input type="button" name="button1"  
value="Click me" 
  onClick="first()"> 
<br> 
<input type="checkbox" name="myCheckbox" CHECKED> 
<input type="button" name="button2"  
value="Me too" 
  onClick="second()"> 
</form> 

<p><br><br> 

<script language="JavaScript"> 
<!-- hide 

document.write("The background color is: "); 
document.write(document.bgColor + "<br>"); 

document.write("The text on the second 
button is: "); 
document.write(document.myForm. 
button2.value); 

// --> 
</script> 

</body> 
</html> 
 

Натисни отгоре и виж!
Пример3
  
// не се зарежда правилно на по-старите браузъри!!// 

В следващия пример ще покажа най-често използваните методи на обеката document: 
 

Пример                                                                                   4.4
<html> 
<head> 
<title>Обекта-document</title> 
</head> 
<body> 
<b>Методи на обекта <i>document</i></b><br> 
<Script language="JavaScript"> 
<!--hide 
document.fgColor="red" 
document.bgColor="white" 
document.write("<br>") 
document.vlinkColor="green" 
var x=document.URL  
document.write("URL адреса на документа е",x) 
document.write("<br>") 
document.write("Заглавие:", 
document.title) 
document.write("<br>") 
document.write("Идвате от адрес:",document.referrer) 
//--> 
</script> 
<br> 
<a href="http://www.uni-sofia.bg" >Софийски Университет</a> 
</body> 
</html> 

 

Натисни отгоре и виж!
Пример4
  
Ето и за какво служи всеки  метод : 
document.bgColor-определя цвета на фона 
document.fgColor-определя цвета на текста 
document.vlinkColor-определя цвета на избрана вече хипервръзка  
document.title-изписва заглавието на страницата, което сме задали предварително 
document.URL-изписва интернет адреса на страницата
Урок 1 document.referrer-изписва интернет адреса на 
Урок 2 страницата, от която е била извикана текущата
Урок 3 страница
Урок 5       В следващия урок ще видите свойствата на 
Урок 6 обекта window.
Урок 7  
Урок 8   //Choose View-Encoding:Cyrillic from the menu //