Вопрос 10. Назначение, основные возможности JavaScript, пример программы


Добавил:DMT
Дата создания:30 декабря 2007, 19:18
Дата обновления:30 декабря 2007, 19:18
Просмотров:17292 последний вчера, 8:56
Комментариев: 1
Вопрос 10. Назначение, основные возможности JavaScript, пример программы
up

Комментарии для "Вопрос 10. Назначение, основные возможности JavaScript, пример программы"


Пользователь: wiard
Сообщений: 3
Статус: Незримый
Зарегистрирован:
10 января 2008, 18:42
Был:28 января 2008, 12:52
wiard
smsup 		Дата: 10 января 2008, 20:23 Сообщение № 1
Что такое JavaScript?
JavaScript — это сравнительно новый язык для написания сценариев, разработанный компанией Netscape. При помощи языка JavaScript мы можем создавать интерактивные web-страницы наиболее удобным и эффективным способом. В настоящем практическом пособии приведены примеры, которые, по мнению автора, являются наиболее важными. Они смогут продемонстрировать возможности JavaSript и принципы организации языка. В этом пособии приводятся примеры того, что можно сделать, используя JavaScript, а также, что не менее важно, рассказывается, как это сделать.

JavaScript — это не то же самое, что Java!
Многие люди считают, что язык JavaScript — это то же самое, что язык Java, недаром они носят одинаковые имена. Однако это неверно. Не будем разбираться в существующих различиях, важно лишь помнить, что JavaScript и Java — это разные языки, хотя в них имеется много общего.

События
Событие — это очень важное в программировании на JavaScript понятие. События главным образом порождаются пользователем, являются следствиями его действий. Если пользователь нажимает кнопку мыши, то происходит событие, которое называется Click. Если экранный указатель мыши движется по ссылке HTML-документа, происходит событие MouseOver.
Существует несколько различных событий. Пусть мы хотим, чтобы наша JavaScript программа реагировала на несколько разных событий. Это можно сделать при помощи event-handlers. Например, можно заставить появиться новое всплывающее окно, которое появляется при нажатии кнопки. Появление нового окна будет следствием наступления события Click.
Event-handler, иначе говоря обработчик событий или средство управления событиями, который требуется для организации такого действия, называется опСlick. Это средство управления событиями сообщает компьютеру, какие действия необходимо совершить при наступлении данного события. Ниже приведена простая программа, иллюстрирующая то, как может быть использовано средство опСlick.
<form>
<input type="button" value="щелкни меня" onClick="alert('Ой-ой')">
</form>

Функции
В большинстве программ на JavaScript мы будем пользоваться функциями . Рассмотрим пример и напишем скрипт, который будет выводить текст, причем один и тот же текст будет выводиться три раза. Вот возможный вариант программы: 
Код на HTML
  1.   
  2. <html>    
  3. <script language="JavaScript">    
  4. <!- hide    
  5. document.write("Добро пожаловать!<br>");    
  6. document.write("Это JavaScript!<br>");    
  7. document.write("Добро пожаловать!<br>");    
  8. document.write("Это JavaScript!<br>");    
  9. document.write("Добро пожаловать!<br>");    
  10. document.write("Это JavaScript!<br>");    
  11. // ->    
  12. </script>    
  13. </html>
При использовании обязательна ссылка на http://DMTSoft.ru


Этот скрипт выведет такой текст:

Добро пожаловать!
Это JavaScript!

Этот текст будет выведен три раза. Насколько это эффективно? Можно решить эту задачу более удобным способом. Ниже приводится другой вариант решения задачи. 

Код на HTML
  1. <html>    
  2. <script language="JavaScript">    
  3. <!- hide    
  4. function myFunction() {    
  5. document.write("Добро пожаловать!<br>");    
  6. document.write("Это JavaScript!<br>") ;    
  7. }    
  8. myFunction();    
  9. myFunction() ;    
  10. myFunction() ;    
  11. // ->    
  12. </script>    
  13. </html>  
При использовании обязательна ссылка на http://DMTSoft.ru


Добро пожаловать!
Это JavaScript!
Добро пожаловать!
Это JavaScript!
Добро пожаловать!
Это JavaScript!


В программе этого скрипта мы использовали функцию. Для определения функции нам понадобилось три строчки: 
Код на Javascript
  1. function myFunction() {    
  2. document.write("Добро пожаловать!<br>") ;    
  3. document.write("Это JavaScript!<br>");    
  4. }  
  5.  
При использовании обязательна ссылка на http://DMTSoft.ru

Слова, помещенные между скобок {}, составляют команды, образующие функцию myFunction(). Это значит, что две используемых нами функции document.write() объединяются в одно целое, и они могут быть выполнены совместно при помощи обращения к функции. В нашей программе мы обращаемся к функции три раза, мы три раза написали myFunction() после того, как определили эту функцию. Мы три раза вызвали функцию, т.е. содержание функции будет исполнено три раза.
Это был пример очень простой функции. Функции также можно использовать в сочетании со средствами управления событиями. Рассмотрим пример: 
Код на HTML
  1.   
  2. <html>    
  3. <head>    
  4. <script language="JavaScript">    
  5. <!- hide    
  6. function calculation() {    
  7. var x= 12;    
  8. var y= 5;    
  9. var result- x + y;    
  10. alert (result) ;    
  11. }    
  12. // ->    
  13. </script>    
  14. </head>    
  15. <body>    
  16. <form>    
  17. <input type="button" value-''Будем считать"    
  18. onClick="calculation()">    
  19. </form>    
  20. </body>    
  21. </html>
При использовании обязательна ссылка на http://DMTSoft.ru

Окно броузера и всплывающее окно, содержащее результат функции, описанной
в вышеприведенном скрипте, после нажатия кнопки "Будем считать"


image1


Нажатая кнопка заставляет компьютер выполнить функцию calculation().
Эта функция производит определенные вычисления с переменными x, у и result. Мы можем определить переменные с помощью специального слова var. Переменные могут использоваться для хранения различных величин, например для хранения чисел, текстовых строк и т.д. Строка программы var r e s u l t= x + у; сообщает броузеру, что необходимо создать переменную result и в этой переменной сохранять значение, равное сумме значений переменных х + у ( т . е . 5 + 12). После выполнения этой функции переменная result будет содержать число 17. Команда alert (result) в этом случае эквивалентна команде alert{17). Мы видим всплывающее окно, в котором записано число 17.

Примеры использования языка JavaScript
Часы с текущем временем и днем недели 

Код на Javascript
  1.   
  2. <!-- Скрипт выводит часы с текущем временем и днем недели    
  3. <html>    
  4. <head>    
  5. <title>Часы</title>    
  6. <script language="JavaScript">    
  7. dCol='ff0000';//цвет даты    
  8. fCol='0000ff';//лицевой цвет.    
  9. sCol='000000';//секунды    
  10. mCol='000000';//минуты    
  11. hCol='000000';//часы    
  12. ClockHeight=30;    
  13. ClockWidth=30;    
  14. ClockFromMouseY=0;    
  15. ClockFromMouseX=100;    
  16.     
  17. d=new Array("Воскресенье","Понедельник","Вторник","Среда",  
  18. "Четверг","Пятница"," ;Суббота");    
  19. m=new Array("Январь","Февраль","Март","Апрель","Май","Июнь","Июль"  
  20. ,&quo t;Август","Сентябрь","Октябрь","Ноябрь","Декабр");    
  21. date=new Date();    
  22. day=date.getDate();    
  23. year=date.getYear();    
  24. if (year < 2000) year=year+1900;    
  25. TodaysDate=" "+d[date.getDay()]+" "+m[date.getMonth()]+" "+day+" "+year;    
  26. D=TodaysDate.split('');    
  27. H='...';    
  28. H=H.split('');    
  29. M='....';    
  30. M=M.split('');    
  31. S='.....';    
  32. S=S.split('');    
  33. Face='1 2 3 4 5 6 7 8 9 10 11 12';    
  34. font='Arial';    
  35. size=1;    
  36. speed=0.6;    
  37. ns=(document.layers);    
  38. ie=(document.all);    
  39. Face=Face.split(' ');    
  40. n=Face.length;    
  41. a=size*10;    
  42. ymouse=0;    
  43. xmouse=0;    
  44. scrll=0;    
  45. props="<font face="+font+" size="+size+" color="+fCol+"><B>";    
  46. props2="<font face="+font+" size="+size+" color="+dCol+"><B>";    
  47. Split=360/n;    
  48. Dsplit=360/D.length;    
  49. HandHeight=ClockHeight/4.5    
  50. HandWidth=ClockWidth/4.5    
  51. HandY=-7;    
  52. HandX=-2.5;    
  53. scrll=0;    
  54. step=0.06;    
  55. currStep=0;    
  56. y=new Array();x=new Array();Y=new Array();X=new Array();    
  57. for (i=0; i < n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0}    
  58. Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();    
  59. for (i=0; i < D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}    
  60. if (ns){    
  61. for (i=0; i < D.length; i++)    
  62. document.write('<layer name="nsDate'+i+'" top=0 left=0 height='  
  63. +a+' width='+a+'><center>'+props2+D[i]+'</font></center></layer>');    
  64. for (i=0; i < n; i++)    
  65. document.write('<layer name="nsFace'+i+'" top=0 left=0 height='  
  66. +a+' width='+a+'><center>'+props+Face[i]+'</font></center></layer>');    
  67. for (i=0; i < S.length; i++)    
  68. document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15   
  69. height=15><font face=Arial size=3 color='+sCol+'><center><b>  
  70. '+S[i]+'</b></center></font></layer>');    
  71. for (i=0; i < M.length; i++)    
  72. document.write('<layer name=nsMinutes'+i+' top=0 left=0   
  73. width=15 height=15><font face=Arial size=3 color='+mCol+'><center>  
  74. <b>'+M[i]+'</b></center></font></layer>');    
  75. for (i=0; i < H.length; i++)    
  76. document.write('<layer name=nsHours'+i+' top=0 left=0   
  77. width=15 height=15><font face=Arial size=3 color='+hCol+'><center>  
  78. <b>'+H[i]+'</b></center></font></layer>');    
  79. }    
  80. if (ie){    
  81. document.write('<div id="Od" style="position:absolute;  
  82. top:0px;left:0px"><div style="position:relative">');    
  83. for (i=0; i < D.length; i++)    
  84. document.write('<div id="ieDate" style="position:absolute;top:0px;left:0;height:'+a+';  
  85. width:'+a+';text-align:center">'+props2+D[i]+' </B></font></div>');    
  86. document.write('</div></div>');    
  87. document.write('<div id="Of" style="position:absolute;  
  88. top:0px;left:0px"><div style="position:relative">');    
  89. for (i=0; i < n; i++)    
  90. document.write('<div id="ieFace" style="position:absolute;top:0px;left:0;height:'+a+';  
  91. width:'+a+';text-align:center">'+props+Face[i]+ 9;</B></font></div>');    
  92. document.write('</div></div>');    
  93. document.write('<div id="Oh" style="position:absolute;top:0px;left:0px">  
  94. <div style="position:relative">');    
  95. for (i=0; i < H.length; i++)    
  96. document.write('<div id="ieHours" style="position:absolute;width:16px;  
  97. height:16px;font-family:Arial;  
  98. font-size:16px;color:'+hCol+';text-align:center;  
  99. font-weight:bold& quot;>'+H[i]+'</div>');    
  100. document.write('</div></div>');    
  101. document.write('<div id="Om" style="position:absolute;top:0px;left:0px">  
  102. <div style="position:relative">');    
  103. for (i=0; i < M.length; i++)    
  104. document.write('<div id="ieMinutes" style="position:absolute;  
  105. width:16px;height:16px;font-family:Arial;  
  106. font-size:16px;color:'+mCol+';text-align:center;font-weight:bold& quot;>'+M[i]+'</div>');    
  107. document.write('</div></div>')    
  108. document.write('<div id="Os" style="position:absolute;top:0px;left:0px">  
  109. <div style="position:relative">');    
  110. for (i=0; i < S.length; i++)    
  111. document.write('<div id="ieSeconds" style="position:absolute;width:16px;  
  112. height:16px;font-family:Arial;font-size:16px;color:'+sCol+';  
  113. text-align:center;font-weight:bold& quot;>'+S[i]+'</div>');    
  114. document.write('</div></div>')    
  115. }    
  116. (ns)?window.captureEvents(Event.MOUSEMOVE):0;    
  117. function Mouse(evnt){    
  118. ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):  
  119. event.y+ClockFromMouseY;    
  120. xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;    
  121. }    
  122. (ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;    
  123. function ClockAndAssign(){    
  124. time = new Date ();    
  125. secs = time.getSeconds();    
  126. sec = -1.57 + Math.PI * secs/30;    
  127. mins = time.getMinutes();    
  128. min = -1.57 + Math.PI * mins/30;    
  129. hr = time.getHours();    
  130. hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;    
  131. if (ie){    
  132. Od.style.top=window.document.body.scrollTop;    
  133. Of.style.top=window.document.body.scrollTop;    
  134. Oh.style.top=window.document.body.scrollTop;    
  135. Om.style.top=window.document.body.scrollTop;    
  136. Os.style.top=window.document.body.scrollTop;    
  137. }    
  138. for (i=0; i < n; i++){    
  139.  var F=(ns)?document.layers['nsFace'+i]:ieFace[i].style;    
  140.  F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;    
  141.  F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);    
  142.  }    
  143. for (i=0; i < H.length; i++){    
  144.  var HL=(ns)?document.layers['nsHours'+i]:ieHours[i].style;    
  145.  HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;    
  146.  HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);    
  147.  }    
  148. for (i=0; i < M.length; i++){    
  149.  var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style;    
  150.  ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;    
  151.  ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);    
  152.  }    
  153. for (i=0; i < S.length; i++){    
  154.  var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style;    
  155.  SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;    
  156.  SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);    
  157.  }    
  158. for (i=0; i < D.length; i++){    
  159.  var DL=(ns)?document.layers['nsDate'+i]:ieDate[i].style;    
  160.  DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;    
  161.  DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);    
  162.  }    
  163. currStep-=step;    
  164. }    
  165. function Delay(){    
  166. scrll=(ns)?window.pageYOffset:0;    
  167. Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);    
  168. Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);    
  169. for (i=1; i < D.length; i++){    
  170. Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);    
  171. Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);    
  172. }    
  173. y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);    
  174. x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);    
  175. for (i=1; i < n; i++){    
  176. y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);    
  177. x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);    
  178. }    
  179. ClockAndAssign();    
  180. setTimeout('Delay()',20);    
  181. }    
  182. if (ns||ie)window.onload=Delay;    
  183. </script>    
  184. </head>    
  185. <body>    
  186.     
  187. </body>    
  188. </html>
При использовании обязательна ссылка на http://DMTSoft.ru


image2

Скрипт меню 
Код на HTML
  1. <body onload="init()" LINK="#FFFFFF" VLINK="#999999" ALINK="#00FF00">    
  2. <Center>    
  3. <style>    
  4. .menu    
  5.     
  6. {    
  7.     
  8. 	position: absolute;    
  9. 	z-index: 1;    
  10. 	padding:5;    
  11. 	border-width: 1;    
  12. 	border-style: ridge;    
  13. 	background-color: blue;    
  14. 	color: white;    
  15.     
  16. }    
  17. </style>    
  18. <script language="JavaScript">    
  19. var mpos=new Array();    
  20. var mdir=new Array();    
  21. var maxmenus=3;    
  22. var delay=20;    
  23. function do_menu(menu)    
  24. {    
  25. 	for(i=0; i<maxmenus; i++)    
  26. 	{    
  27. 		if(menu!=i && mpos[i]>-122)    
  28. 		{    
  29. 			mdir[i]=-4;    
  30. 			if(mpos[i]>=30)    
  31. 				move_menu(i);    
  32. 		}    
  33. 	}    
  34. 	mdir[menu]=-mdir[menu];    
  35. 	if(mpos[menu]<=-122 || mpos[menu]>=30)    
  36. 		move_menu(menu);    
  37. }    
  38. function move_menu(menu)    
  39. {    
  40. 	mpos[menu]+=mdir[menu];    
  41. 	if(document.layers)    
  42. 		document.layers["menu"+menu].top=mpos[menu];    
  43. 	else    
  44. 		document.all["menu"+menu].style.top=mpos[menu];    
  45. 	if(mpos[menu]>-122 && mpos[menu]<30)    
  46. 		setTimeout("move_menu("+menu+")", delay);    
  47. }    
  48. function init()    
  49. {    
  50. 	for(i=0; i<maxmenus; i++)    
  51. 	{    
  52. 		mpos[i]=-122;    
  53. 		mdir[i]=-4;    
  54. 	}    
  55. }    
  56. </script>    
  57. <div class="menu" style="top:0; left:10; width: 50; z-index:2"><a    
  58. href="javascript:do_menu(0)"><b>    
  59. <p>menu1</b></a> </p>    
  60. </div><div id="menu0" class="menu" style="top:-122; left:10; width: 200;">    
  61. <p>text<br>    
  62. <a href="http://winsoft.tulpar.net">WINsoft</a><br>    
  63. text2<br>    
  64. text3</p>    
  65. </div><div class="menu" style="top:0; left:74; z-index:2; width: 50; background: orange"><a    
  66. href="javascript:do_menu(1)"><b>    
  67. <p>menu2</b></a> </p>    
  68. </div><div id="menu1" class="menu"    
  69. style="top:-122; left:74; width: 200; background: orange">    
  70. <p>text1<br>    
  71. text2<br>    
  72. text3</p>    
  73. </div><div class="menu" style="top:0; left:129; z-index:2; width: 50; background: red"><a    
  74. href="javascript:do_menu(2)"><b>    
  75. <p>menu3</b></a> </p>    
  76. </div><div id="menu2" class="menu" style="top:-122; left:129; width: 200; background: red">    
  77. <p>text1<br>    
  78. text2<br>    
  79. text3<br>    
  80. text4 </p>    
  81. </div>    
  82. </center>    
  83. </body>
При использовании обязательна ссылка на http://DMTSoft.ru


image3