Home Explore Help
Sign In
Sheva77
/
homework
Watch 1
Star 2
Fork 0
Files Issues 1 Pull Requests 0 Wiki
Tree: 64e0541cea
Branches Tags
homework
/
tehno_lab
/
lab_4js.htm

lab_4js.htm 27 KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519 
  1. <HTML>
    2. 

  2. <HEAD>
    3. 

  3. <TITLE>Лабораторная работа 13 (4 JavaScript): Позиционирование и движение
    4. 

  4. элементов на Web-странице</TITLE>
    5. 

  5. <LINK REL=STYLESHEET TYPE="text/css" HREF="heads.css">
    6. 

  6. </HEAD>
    7. 

  7. <BODY>
    8. 

  8. <H1> ЛАБОРАТОРНАЯ РАБОТА № 13 (4 JavaScript)</H1>
    9. 

  9. <H2> <SPAN CLASS="beg" >Тема: </SPAN>Позиционирование и движение элементов на 
    10. 

  10. Web-странице</H2>
    11. 

  11. <H2> <SPAN CLASS="beg" >Цель: </SPAN>
    12. 

  12. Изучение средств и возможностей языка JavaScript для позиционирования и 
    13. 

  13. организации движения элементов на Web-странице</H2>
    14. 

  14. <A NAME="beg"></A>
    15. 

  15. <H3>ОГЛАВЛЕНИЕ</H3> 
    16. 

  16. <A CLASS="com" HREF="#1">1 Позиционирование элементов на Web-странице<BR>
    17. 

  17. <A CLASS="com" HREF="#2">2 Организация движения объектов на Web-странице<BR>
    18. 

  18. <A CLASS="com" HREF="#2.1">2.1 Изменение координат элемента с помощью 
    19. 

  19. циклического  процесса<BR>
    20. 

  20. <A CLASS="com" HREF="#2.2">2.2 Изменение координат элемента по событиям мышки<BR>
    21. 

  21. <A CLASS="com" HREF="#2.3">2.3 Перетаскивание элементов<BR>
    22. 

  22. <A CLASS="com" HREF="#3">3 Свойства и методы объекта Math<BR>
    23. 

  23. <A CLASS="com" HREF="#prim1">Пример 1<BR>
    24. 

  24. <A CLASS="com" HREF="#prim2">Пример 2<BR>
    25. 

  25. <A CLASS="com" HREF="#prim3">Пример 3<BR>
    26. 

  26. <A CLASS="com" HREF="#ind">Индивидуальные задания </SPAN><BR>
    27. 

  27. <A NAME="1"></A>
    28. 

  28. <H4>1 Позиционирование элементов на Web-странице</H4>
    29. 

  29. <P>Режим позиционирования элемента Web-страницы, т.е. размещения его на экране, задается с 
    30. 

  30. помощью свойства CSS <SPAN  CLASS="svoj">position</SPAN>, которое имеет 
    31. 

  31. следующие значения:
    32. 

  32. <UL CLASS="list">
    33. 

  33. <LI>static - положение элемента на экране задается браузером в соответствии с 
    34. 

  34. тем местом, которое элемент занимает в HTML-документе (значение задано по 
    35. 

  35. умолчанию, не использует координаты элемента и поэтому не может быть выбрано 
    36. 

  36. для организации движения элемента);
    37. 

  37. <LI>relative - положение элемента на экране задается с помощью координат 
    38. 

  38. относительно того места на экране, куда браузер поместил бы элемент в режиме 
    39. 

  39. static;
    40. 

  40. <LI>absolute - положение элемента на экране задается с помощью его координат 
    41. 

  41. относительно родителя.
    42. 

  42. </UL>
    43. 

  43. <P>При использовании режима позиционирования <SPAN CLASS="svoj">absolute</SPAN>, 
    44. 

  44. положение элемента на экране может быть задано с помощью таких свойств CSS:
    45. 

  45. <UL CLASS="list">
    46. 

  46. <LI>left - задает или возвращает горизонтальную позицию левой границы элемента 
    47. 

  47. относительно родителя (если родителем является тэг &lt;BODY&gt;, то относительно 
    48. 

  48. левой границы окна браузера);
    49. 

  49. <LI>top - задает или возвращает вертикальную позицию верхней границы элемента 
    50. 

  50. относительно родителя (если родителем является тэг &lt;BODY&gt;, то относительно 
    51. 

  51. верхней границы окна браузера);
    52. 

  52. <LI>right - задает или возвращает горизонтальную позицию правой границы элемента 
    53. 

  53. относительно родителя (если родителем является тэг &lt;BODY&gt;, то относительно 
    54. 

  54. правой границы окна браузера);
    55. 

  55. <LI>bottom - задает или возвращает вертикальную позицию нижней границы элемента 
    56. 

  56. относительно родителя (если родителем является тэг &lt;BODY&gt;, то относительно 
    57. 

  57. нижней границы окна браузера).
    58. 

  58. </UL>
    59. 

  59. <P>Если для одного элемента заданы оба свойства: 
    60. 

  60. <SPAN CLASS="svoj">left</SPAN> и <SPAN CLASS="svoj">right</SPAN>, то свойство 
    61. 

  61. <SPAN CLASS="svoj">right</SPAN> игнорируется. При совместном задании свойств 
    62. 

  62. <SPAN CLASS="svoj">top</SPAN> и <SPAN CLASS="svoj">bottom</SPAN> предпочтение 
    63. 

  63. отдается свойству <SPAN CLASS="svoj">top</SPAN>.<BR>
    64. 

  64. <SPAN CLASS="txt_abz">Значения </SPAN>свойств <SPAN CLASS="svoj">left</SPAN>, 
    65. 

  65. <SPAN CLASS="svoj">top</SPAN>, <SPAN CLASS="svoj">right</SPAN> и 
    66. 

  66. <SPAN CLASS="svoj">bottom</SPAN> могут быть заданы:
    67. 

  67. <UL CLASS="list">
    68. 

  68. <LI>в абсолютных единицах:
    69. 

  69. <UL CLASS="list2">
    70. 

  70. <LI>&nbsp;pt - в пунктах (1/72 дюйма);
    71. 

  71. <LI>&nbsp;px - в пикселях;
    72. 

  72. <LI>&nbsp;mm - в мм;
    73. 

  73. <LI>&nbsp;cm - в см;
    74. 

  74. <LI>&nbsp;in  - в дюймах.
    75. 

  75. </UL>
    76. 

  76. <LI>в процентах от ширины родителя;
    77. 

  77. <LI>предопределенным значением auto, которое задается по умолчанию и указывает 
    78. 

  78. на то, что элемент позиционируется браузером.
    79. 

  79. </UL>
    80. 

  80. <P>Если единицы измерения не указаны, то подразумевается, что они заданы в 
    81. 

  81. пикселях.<BR>
    82. 

  82. <SPAN CLASS="txt_abz">Ниже </SPAN>приведен пример рисунка, расположенного в 200 
    83. 

  83. пикседях от левой границы экрана и в 100 пикселях от верхней границы экрана:<BR><BR>
    84. 

  84. <SPAN CLASS="html">&lt;IMG NAME="imgs" SRC="fish.gif" STYLE="position:absolute;
    85. 

  85. left:200;top:100">
    86. 

  86. <P>Если попытаться сдвинуть этот рисунок на экране на 50 пикселей вправо с 
    87. 

  87. помощью выражения<BR><BR>
    88. 

  88. <SPAN CLASS="html">imgs.style.left+=50,
    89. 

  89. <P CLASS="ba">то это приведет к возникновению ошибки "Недопустимый аргумент" из-за того, 
    90. 

  90. что свойство <SPAN CLASS="svoj">left</SPAN> возвращает значение не в виде числа 
    91. 

  91. 200, а в виде строки "200px".<BR>
    92. 

  92. <SPAN CLASS="txt_abz">Поэтому </SPAN>надо или воспользоваться функцией 
    93. 

  93. <SPAN CLASS="svoj">parseInt()</SPAN>, которая возвращает только число:<BR><BR>
    94. 

  94. <SPAN CLASS="html">imgs.style.left=parseInt(imgs.style.left)+50,
    95. 

  95. <P CLASS="ba">или вместо свойств <SPAN CLASS="svoj">left</SPAN>,
    96. 

  96. <SPAN CLASS="svoj">top</SPAN>, <SPAN CLASS="svoj">right</SPAN> и 
    97. 

  97. <SPAN CLASS="svoj">bottom</SPAN> применять свойства:
    98. 

  98. <UL CLASS="list">
    99. 

  99. <LI>pixelLeft - задает или возвращает численное значение горизонтальной позиции левой 
    100. 

  100. границы элемента в пикселях;
    101. 

  101. <LI>pixelTop - задает или возвращает численное значение вертикальной позиции верхней 
    102. 

  102. границы элемента в пикселях;
    103. 

  103. <LI>pixelRight - задает или возвращает численное значение горизонтальной позиции 
    104. 

  104. правой границы элемента в пикселях;
    105. 

  105. <LI>pixelBottom - задает или возвращает численное значение вертикальной позиции 
    106. 

  106. нижней границы элемента в пикселях.
    107. 

  107. </UL>
    108. 

  108. <P>В нашем примере вместо свойства <SPAN CLASS="svoj">left</SPAN> необходимо 
    109. 

  109. использовать свойство <SPAN CLASS="svoj">pixelLeft</SPAN>:<BR><BR>
    110. 

  110. <SPAN CLASS="html">imgs.style.pixelLeft+=50;
    111. 

  111. <P>Если же координаты элемента заданы в других единицах измерения, необходимо 
    112. 

  112. использовать свойства:
    113. 

  113. <UL CLASS="list">
    114. 

  114. <LI>posLeft - задает или возвращает численное значение горизонтальной позиции левой 
    115. 

  115. границы элемента в единицах измерения, заданных свойством left;
    116. 

  116. <LI>posTop - задает или возвращает численное значение вертикальной позиции верхней 
    117. 

  117. границы элемента в единицах измерения, заданных свойством top;
    118. 

  118. <LI>posRight - задает или возвращает численное значение горизонтальной позиции 
    119. 

  119. правой границы элемента в единицах измерения, заданных свойством right;
    120. 

  120. <LI>posBottom - задает или возвращает численное значение вертикальной позиции 
    121. 

  121. нижней границы элемента в единицах измерения, заданных свойством bottom.
    122. 

  122. </UL>
    123. 

  123. <A NAME="2"></A>
    124. 

  124. <TABLE WIDTH=70%  ALIGN=CENTER BORDER=0>
    125. 

  125. <TR><TD ALIGN=right>
    126. 

  126. <A CLASS="out" HREF="#beg">Оглавление</A>
    127. 

  127. </TABLE>
    128. 

  128. <H4>2 Организация движения объектов на Web-странице</H4>
    129. 

  129. <P>Движение элемента на Web-странице осуществляется путем изменения значений 
    130. 

  130. свойств, задающих его координаты.<BR>
    131. 

  131. <SPAN CLASS="txt_abz">Изменение </SPAN>координат элемента может быть 
    132. 

  132. реализовано:
    133. 

  133. <UL CLASS="list">
    134. 

  134. <LI>путем программно организованного циклического процесса (см. <A CLASS="pri" 
    135. 

  135. HREF=#prim1>пример № 1</A></SPAN>);
    136. 

  136. <LI>по событиям мышки (см. <A CLASS="pri" HREF=#prim2>пример № 2</A></SPAN>);
    137. 

  137. <LI>путем"привязки" элемента к курсору мышки, т.е. путем задания координат 
    138. 

  138. элемента, равнымы координатам курсора мышки (см. <A CLASS="pri" 
    139. 

  139. HREF=#prim3>пример № 3</A></SPAN>);
    140. 

  140. <LI>по событиям клавиатуры (см. описание лаб. работы № 5 "Работа с клавиатурой").
    141. 

  141. </UL>
    142. 

  142. <A NAME="2.1"></A>
    143. 

  143. <TABLE WIDTH=70%  ALIGN=CENTER BORDER=0>
    144. 

  144. <TR><TD ALIGN=right>
    145. 

  145. <A CLASS="out" HREF="#beg">Оглавление</A>
    146. 

  146. </TABLE>
    147. 

  147. <H4 CLASS="pod">2.1 Изменение координат элемента с помощью циклического 
    148. 

  148. процесса</H4>
    149. 

  149. <P>Для организации циклического процесса могут быть использованы следующие методы 
    150. 

  150. объекта <SPAN CLASS="svoj">window</SPAN>:
    151. 

  151. <UL CLASS="list">
    152. 

  152. <LI><SPAN STYLE="font:bold italic 5.5mm;color:#000070">setTimeout("функция или 
    153. 

  153. выражение", интервал [,список аргументов функции, разделенных запятыми])</SPAN>: 
    154. 

  154. вычисляет значение выражения или вызывает функцию по истечению заданного 
    155. 

  155. интервала (в миллисекундах), если до этого не был вызван метод <SPAN 
    156. 

  156. STYLE="font:bold italic 5.5mm;color:#000070">clearTimeout()</SPAN>, может 
    157. 

  157. передавать в функцию заданные в списке аргументы, возвращает указатель на 
    158. 

  158. объект таймера, который может быть использован в методе <SPAN STYLE="font:bold 
    159. 

  159. italic 5.5mm;color:#000070">clearTimeout()</SPAN> для остановки и уничтожения 
    160. 

  160. таймера;
    161. 

  161. <LI><SPAN STYLE="font:bold italic 5.5mm;color:#000070">clearTimeout(таймер)</SPAN>: 
    162. 

  162. останавливает таймер, установленный методом <SPAN STYLE="font:bold italic 5.5mm;
    163. 

  163. color:#000070">setTimeout()</SPAN>;
    164. 

  164. <LI><SPAN STYLE="font:bold italic 5.5mm;color:#000070">setInterval("функция или 
    165. 

  165. выражение", интервал [,список аргументов функции, разделенных запятыми])</SPAN>: вычисляет значение выражения или вызывает функцию каждый 
    166. 

  166. раз по истечению данного интервала (в миллисекундах), если до этого не был 
    167. 

  167. вызван метод <SPAN STYLE="font:bold italic 5.5mm;color:#000070">clearTimeout()</SPAN>, 
    168. 

  168. может передавать в функцию заданные в списке аргументы, возвращает указатель на 
    169. 

  169. объект таймера, который может быть использован в методе <SPAN STYLE="font:bold 
    170. 

  170. italic 5.5mm;color:#000070">clearTimeout()</SPAN> для остановки и уничтожения 
    171. 

  171. таймера;
    172. 

  172. <LI><SPAN STYLE="font:bold italic 5.5mm;color:#000070">clearInterval(таймер)</SPAN>: 
    173. 

  173. останавливает таймер, установленный методом <SPAN STYLE="font:bold italic 5.5mm;color:
    174. 

  174. #000070">setInterval()</SPAN>.
    175. 

  175. </UL>
    176. 

  176. <P>Использование метода <SPAN CLASS="svoj">setTimeout()</SPAN> для организации 
    177. 

  177. движения элемента показано в <A CLASS="pri" HREF=#prim1>примере № 1</A>, где 
    178. 

  178. реализовано движение элемента Web-страницы - буквы Z, заданной с помощью тэга 
    179. 

  179. &lt;P&gt;, по траектории в виде синусоиды ():
    180. 

  180. <A NAME="prim1"></A><BR>
    181. 

  181. <TABLE WIDTH=70%  ALIGN=CENTER BORDER=0>
    182. 

  182. <TR><TD ALIGN=right>
    183. 

  183. <A CLASS="out" HREF="#beg">Оглавление</A>
    184. 

  184. </TABLE>
    185. 

  185. <P><A CLASS="out" HREF="js_pr4-1.htm">Пример 1</A><BR><BR>
    186. 

  186. 

  187. <SPAN CLASS="html">&lt;HTML&gt;<BR>
    188. 

  188. <SPAN CLASS="html">&lt;HEAD&gt;<BR>
    189. 

  189. <SPAN CLASS="html">&lt;TITLE&gt;Изменение координат элемента с помощью циклического процесса&lt;/TITLE&gt;<BR>
    190. 

  190. <SPAN CLASS="html">&lt;SCRIPT&gt;<BR>
    191. 

  191. <SPAN CLASS="html">x=0; y=100; dx=0; dy=0;<BR>
    192. 

  192. <SPAN CLASS="html">function f(x) { return 60*Math.sin(x*Math.PI/180);}<BR>
    193. 

  193. <SPAN CLASS="html">function moveTxt()<BR>
    194. 

  194. <SPAN CLASS="html">{<BR>
    195. 

  195. <SPAN CLASS="html">if ((z.style.pixelLeft&lt;document.body.clientWidth-30)
    196. 

  196. && (z.style.pixelTop&gt;30))<BR>
    197. 

  197. <SPAN CLASS="html">{<BR>
    198. 

  198. <SPAN CLASS="html">z.style.left=x+dx;<BR>
    199. 

  199. <SPAN CLASS="html">z.style.top=y+dy-f(x+dx);<BR>           
    200. 

  200. <SPAN CLASS="html">dx+=20;<BR>
    201. 

  201. <SPAN CLASS="html">dy+=7;<BR>
    202. 

  202. <SPAN CLASS="html">setTimeout("moveTxt()",125);<BR>
    203. 

  203. <SPAN CLASS="html">}<BR>
    204. 

  204. <SPAN CLASS="html">}<BR>
    205. 

  205. <SPAN CLASS="html">&lt;/SCRIPT&gt;<BR>
    206. 

  206. <SPAN CLASS="html">&lt;/HEAD&gt;<BR>
    207. 

  207. <SPAN CLASS="html">&lt;BODY&gt;<BR> 
    208. 

  208. <SPAN CLASS="html">&lt;P ID="z" STYLE="color:blue;font:8mm;
    209. 

  209. position:absolute;left:0;top:100"<BR>
    210. 

  210. <SPAN CLASS="html_par">onClick="moveTxt()"&gt;Z&lt;/P&gt;<BR>
    211. 

  211. <SPAN CLASS="html">&lt;/BODY&gt;<BR>
    212. 

  212. <SPAN CLASS="html">&lt;/HTML&gt;<BR>
    213. 

  213. <P>В примере 1 с помощью функции <SPAN CLASS="svoj">f(x)</SPAN> реализовано
    214. 

  214. движение объекта справа налево и сверху вниз по синусоиде
    215. 

  215. <SPAN CLASS="svoj">y=60sin(x)</SPAN>. Поскольку траектория указана в виде
    216. 

  216. тригометрической функции, для ее задания был использован объект
    217. 

  217. <SPAN CLASS="svoj">Math</SPAN>, свойства и методы которого описаны в разделе 3.
    218. 

  218. При этом было выполнено преобразование аргумента функции
    219. 

  219. <SPAN CLASS="svoj">sin(x)</SPAN> из градусов в радианы. Направление и скорость
    220. 

  220. движения объекта зависит от величины и знака приращений его координат
    221. 

  221. <SPAN CLASS="svoj">dx</SPAN> и <SPAN CLASS="svoj">dy</SPAN>. На скорость
    222. 

  222. движения также влияет промежуток времени, через который эти приращения
    223. 

  223. происходят (2-й параметр метода <SPAN CLASS="svoj">setTimeout()</SPAN>).<BR>
    224. 

  224. <SPAN CLASS="txt_abz">Выбор </SPAN>амплитуды и скорости движения в примере 1
    225. 

  225. осуществлен из соображений наглядности.<BR>
    226. 

  226. <SPAN CLASS="txt_abz">По </SPAN>щелчку мышки по букве Z вызывается функция 
    227. 

  227. <SPAN CLASS="svoj">moveTxt()</SPAN>, которая осуществляет движение этого элемента
    228. 

  228. из точки окна браузера с координатами: <SPAN CLASS="svoj">left=0; 
    229. 

  229. top=100</SPAN> путем задания приращений его координатам 
    230. 

  230. <SPAN CLASS="svoj">left</SPAN> и <SPAN CLASS="svoj">top</SPAN>:<BR><BR>
    231. 

  231. <SPAN CLASS="html">z.style.left=x+dx;<BR>
    232. 

  232. <SPAN CLASS="html">z.style.top=y+dy-f(x+dx);<BR>
    233. 

  233. <P CLASS="ba">до тех пор, пока он не приблизится к границам окна браузера
    234. 

  234. (граница не достигается, чтобы буква Z оставалась в области полной видимости).<BR>
    235. 

  235. <SPAN CLASS="txt_abz">Значения левой и нижней границы </SPAN> окна браузера
    236. 

  236. определяются с помощью свойств тэга &lt;BODY&gt; <SPAN CLASS="svoj">clientWidth </SPAN> и 
    237. 

  237. <SPAN CLASS="svoj">clientHeight</SPAN>. Эти свойства могут быть использованы
    238. 

  238. для определения размеров любых элементов Web-страницы, которые имеют ширину и 
    239. 

  239. высоту.<BR>
    240. 

  240. <SPAN CLASS="txt_abz">При </SPAN>использовании альтернативных методов 
    241. 

  241. <SPAN CLASS="svoj">setInterval()</SPAN> и 
    242. 

  242. <SPAN CLASS="svoj">clearInterval()</SPAN> описание функции 
    243. 

  243. <SPAN CLASS="svoj">moveTxt()</SPAN> необходимо несколько изменить:<BR><BR>
    244. 

  244. <SPAN CLASS="html">function moveTxt()<BR>
    245. 

  245. <SPAN CLASS="html">{<BR>
    246. 

  246. <SPAN CLASS="html">if ((z.style.pixelLeft&lt;document.body.clientWidth-30)
    247. 

  247. && (z.style.pixelTop&gt;30))<BR>
    248. 

  248. <SPAN CLASS="html">{<BR>
    249. 

  249. <SPAN CLASS="html">z.style.left=x+dx;<BR>
    250. 

  250. <SPAN CLASS="html">z.style.top=y+dy-f(x+dx);<BR>           
    251. 

  251. <SPAN CLASS="html">dx+=20;<BR>
    252. 

  252. <SPAN CLASS="html">dy+=7;<BR>
    253. 

  253. <SPAN CLASS="html">}<BR>
    254. 

  254. <SPAN CLASS="html">else clearInterval(timer);<BR>
    255. 

  255. <SPAN CLASS="html">}<BR>
    256. 

  256. <P>Кроме того, вызов функции <SPAN CLASS="svoj">moveTxt()</SPAN> в этом случае 
    257. 

  257. следует выполнять так:<BR><BR>
    258. 

  258. <SPAN CLASS="html_par">onClick="timer=setInterval('moveTxt()',125);"
    259. 

  259. <P>
    260. 

  260. <A NAME="2.2"></A>
    261. 

  261. <TABLE WIDTH=70%  ALIGN=CENTER BORDER=0>
    262. 

  262. <TR><TD ALIGN=right>
    263. 

  263. <A CLASS="out" HREF="#beg">Оглавление</A>
    264. 

  264. </TABLE>
    265. 

  265. <H4 CLASS="pod">2.2 Изменение координат элемента по событиям мышки</H4>
    266. 

  266. <P>Движение элемента Web-страницы по экрану кроме рассмотренного выше способа 
    267. 

  267. изменения его координат с помощью программно организованного циклического 
    268. 

  268. процесса, может осуществить сам пользователь Web-сайта с помощью мышки.<BR>
    269. 

  269. <SPAN CLASS="txt_abz">В </SPAN><A CLASS="pri" HREF=#prim2>примере № 2</A> 
    270. 

  270. описана функция <SPAN CLASS="svoj">runRef()</SPAN>, которая каждый раз при 
    271. 

  271. достижении указателем мышки ссылки <I STYLE="color:red"><U>Ссылка</U></I> или 
    272. 

  272. при движении указателя мышки по ссылке выполняет приращения координат этого 
    273. 

  273. элемента, реализуя эффект "убегающей" от пользователя ссылки. Все его попытки 
    274. 

  274. щелкнуть по ссылке, чтобы загрузить новую страницу 
    275. 

  275. (<SPAN CLASS="svoj">js_1.htm</SPAN>), оказываются безрезультатными.<BR>
    276. 

  276. <SPAN CLASS="txt_abz">С </SPAN>помощью переменных <SPAN CLASS="svoj">dx</SPAN>
    277. 

  277. и <SPAN CLASS="svoj">dy</SPAN>, которые меняют свой знак на противоложный при 
    278. 

  278. достижении соответственно вертикальных или горизонтальных границ окна браузера, 
    279. 

  279. реализовано отражение ссылки при движении по экрану от его границ.<BR>
    280. 

  280. <SPAN CLASS="txt_abz">Вызов </SPAN>функции <SPAN CLASS="svoj">runRef()</SPAN> 
    281. 

  281. как по событию <SPAN CLASS="svoj">Mousemove</SPAN>, так и по событию 
    282. 

  282. <SPAN CLASS="svoj">Mouseover</SPAN> обеспечивает более надежную защиту ссылки 
    283. 

  283. от щелчка мышки.
    284. 

  284. <A NAME="prim2"></A><BR>
    285. 

  285. <TABLE WIDTH=70%  ALIGN=CENTER BORDER=0>
    286. 

  286. <TR><TD ALIGN=right>
    287. 

  287. <A CLASS="out" HREF="#beg">Оглавление</A>
    288. 

  288. </TABLE>
    289. 

  289. <P><A CLASS="out" HREF="js_pr4-2.htm">Пример 2</A><BR><BR>
    290. 

  290. 

  291. <SPAN CLASS="html">&lt;HTML&gt;<BR>
    292. 

  292. <SPAN CLASS="html">&lt;HEAD&gt;<BR>
    293. 

  293. <SPAN CLASS="html">&lt;TITLE&gt;Организация движения элементов Web-страницы с помощью <BR>
    294. 

  294. <SPAN CLASS="html">мышки &lt;/TITLE&gt;<BR>
    295. 

  295. <SPAN CLASS="html">&lt;SCRIPT&gt;<BR>
    296. 

  296. <SPAN CLASS="html">dx=10; dy=10;<BR>
    297. 

  297. <SPAN CLASS="html">function runRef()<BR>
    298. 

  298. <SPAN CLASS="html">{<BR>
    299. 

  299. <SPAN CLASS="html">if  ((parseInt(m.style.left)<25) || <BR>
    300. 

  300. <SPAN CLASS="html_par">(parseInt(m.style.left)>document.body.clientWidth-25)) dx=-dx;<BR>    
    301. 

  301. <SPAN CLASS="html">if  ((m.style.posTop<25) || <BR>
    302. 

  302. <SPAN CLASS="html_par">(m.style.posTop>document.body.clientHeight-25)) dy=-dy;<BR> 
    303. 

  303. <SPAN CLASS="html"> m.style.pixelLeft+=dx;<BR>
    304. 

  304. <SPAN CLASS="html">m.style.pixelTop+=dy;<BR>
    305. 

  305. <SPAN CLASS="html">}<BR>
    306. 

  306. <SPAN CLASS="html">&lt;/SCRIPT&gt;<BR>
    307. 

  307. <SPAN CLASS="html">&lt;/HEAD&gt;<BR>
    308. 

  308. <SPAN CLASS="html">&lt;BODY"&gt;<BR>
    309. 

  309. <SPAN CLASS="html">&lt;A NAME="m" HREF="js_1.htm"<BR> 
    310. 

  310. <SPAN CLASS="html_par">STYLE="position:absolute;left:100;top:100;color:red"<BR>
    311. 

  311. <SPAN CLASS="html_par">onMousemove="runRef()"<BR>
    312. 

  312. <SPAN CLASS="html_par">onMouseover="runRef()"&gt;
    313. 

  313. <SPAN CLASS="htmlp">Ссылка
    314. 

  314. <SPAN CLASS="htmlba">&lt;/A&gt;<BR>
    315. 

  315. <SPAN CLASS="html">&lt;/BODY&gt;<BR>
    316. 

  316. <SPAN CLASS="html">&lt;/HTML&gt;<BR>
    317. 

  317. 

  318. <A NAME="2.3"></A>
    319. 

  319. <TABLE WIDTH=70%  ALIGN=CENTER BORDER=0>
    320. 

  320. <TR><TD ALIGN=right>
    321. 

  321. <A CLASS="out" HREF="#beg">Оглавление</A>
    322. 

  322. </TABLE>
    323. 

  323. <H4 CLASS="pod">2.3 Перетаскивание элементов</H4>
    324. 

  324. <P>Перетаскивание элементов Web-страницы с помощью мышки реализуется путем 
    325. 

  325. присваивания текущим координатам перемещаемого элемента текущих координат мышки. 
    326. 

  326. Доступ к координатам мышки можно осуществить, используя такие свойства объекта 
    327. 

  327. <SPAN CLASS="svoj">event</SPAN>:
    328. 

  328. <UL CLASS="list">
    329. 

  329. <LI><SPAN STYLE="font:bold italic 5.5mm;color:#000070">clientX</SPAN> - 
    330. 

  330. возвращает горизонтальную координату курсора мышки относительно клиенткой 
    331. 

  331. части окна (без учета рамок, заголовка, строки меню, панели инстументов и 
    332. 

  332. строки состояния);
    333. 

  333. <LI><SPAN STYLE="font:bold italic 5.5mm;color:#000070">clientY</SPAN> - 
    334. 

  334. возвращает вертикальную координату курсора мышки относительно клиенткой части 
    335. 

  335. окна (без учета рамок, заголовка, строки меню, панели инстументов и строки 
    336. 

  336. состояния);
    337. 

  337. <LI><SPAN STYLE="font:bold italic 5.5mm;color:#000070">offsetX</SPAN> - 
    338. 

  338. возвращает горизонтальную координату курсора мышки относительно элемента 
    339. 

  339. страницы, вызвавшего это событие;
    340. 

  340. <LI><SPAN STYLE="font:bold italic 5.5mm;color:#000070">offsetY</SPAN> - 
    341. 

  341. возвращает вертикальную координату курсора мышки относительно элемента 
    342. 

  342. страницы, вызвавшего это событие;
    343. 

  343. <LI><SPAN STYLE="font:bold italic 5.5mm;color:#000070">screenX</SPAN> - 
    344. 

  344. возвращает горизонтальную координату курсора мышки относительно экрана;
    345. 

  345. <LI><SPAN STYLE="font:bold italic 5.5mm;color:#000070">screenY</SPAN> - 
    346. 

  346. возвращает вертикальную координату курсора мышки относительно экрана;
    347. 

  347. <LI><SPAN STYLE="font:bold italic 5.5mm;color:#000070">x</SPAN> - возвращает 
    348. 

  348. горизонтальную координату курсора мышки относительно родительского элемента;
    349. 

  349. <LI><SPAN STYLE="font:bold italic 5.5mm;color:#000070">y</SPAN> - возвращает 
    350. 

  350. вертикальную координату курсора мышки относительно родительского элемента.
    351. 

  351. </UL>
    352. 

  352. <P>В <A CLASS="pri" HREF=#prim3>примере № 3</A> создается Web-страница, 
    353. 

  353. содержащая три элемента - рисунок и два слова "ТЕКСТ" одинакового размера, но 
    354. 

  354. разных цветов.  
    355. 

  355. 

  356. <A NAME="prim3"></A><BR>
    357. 

  357. <TABLE WIDTH=70%  ALIGN=CENTER BORDER=0>
    358. 

  358. <TR><TD ALIGN=right>
    359. 

  359. <A CLASS="out" HREF="#beg">Оглавление</A>
    360. 

  360. </TABLE>
    361. 

  361. <P><A CLASS="out" HREF="js_pr4-3.htm">Пример 3</A><BR><BR>
    362. 

  362. <SPAN CLASS="html">&lt;HTML&gt;<BR>
    363. 

  363. <SPAN CLASS="html">&lt;HEAD&gt;<BR>
    364. 

  364. <SPAN CLASS="html">&lt;TITLE&gt;Перетаскивание элементов Web-страницы&lt;/TITLE&gt;<BR>
    365. 

  365. <SPAN CLASS="html">&lt;SCRIPT&gt;<BR>
    366. 

  366. <SPAN CLASS="html">var n=0; l=0;<BR>
    367. 

  367. <SPAN CLASS="html">function drag()<BR>
    368. 

  368. <SPAN CLASS="html">{<BR>
    369. 

  369. <SPAN CLASS="html">with (document.all(n).style)<BR>
    370. 

  370. <SPAN CLASS="html">{<BR>
    371. 

  371. <SPAN CLASS="html">position="absolute";<BR>
    372. 

  372. <SPAN CLASS="html">/* window.status= "n="+n+" z-index="+l+" left="+pixelLeft+" 
    373. 

  373. top="+pixelTop+<BR>
    374. 

  374. <SPAN CLASS="html">" x="+event.x+" y="+event.y; */<BR>
    375. 

  375. <SPAN CLASS="html">left=event.x;<BR>
    376. 

  376. <SPAN CLASS="html">top=event.y;<BR>
    377. 

  377. <SPAN CLASS="html">zIndex=l;<BR>
    378. 

  378. <SPAN CLASS="html">}<BR>
    379. 

  379. <SPAN CLASS="html">}<BR>
    380. 

  380. <SPAN CLASS="html">&lt;/SCRIPT&gt;<BR>
    381. 

  381. <SPAN CLASS="html">&lt;/HEAD&gt;<BR>
    382. 

  382. <SPAN CLASS="html">&lt;BODY onClick="n=event.srcElement.sourceIndex;"<BR>
    383. 

  383. <SPAN CLASS="html_par">onContextmenu="if(l==2) l=0; else l++;return false"<BR>
    384. 

  384. <SPAN CLASS="html_par">onMousemove="drag()"><BR>
    385. 

  385. <SPAN CLASS="html">&lt;IMG SRC="fish.gif" &gt;<BR>
    386. 

  386. <SPAN CLASS="html">&lt;P STYLE="color:#0FF;font:8mm"&gt;TEXT1<BR>
    387. 

  387. <SPAN CLASS="html">&lt;P STYLE="color:#F0F;font:8mm"&gt;TEXT2<BR>
    388. 

  388. <SPAN CLASS="html">&lt;/BODY&gt;<BR>
    389. 

  389. <SPAN CLASS="html">&lt;/HTML&gt;<BR>
    390. 

  390. <P>При щелчке мышки по любому из этих объектов (по событию 
    391. 

  391. <SPAN CLASS="svoj">Click</SPAN>) для отмеченного объекта устанавливается режим
    392. 

  392. перетаскивания: в переменную <SPAN CLASS="svoj">n</SPAN> заносится порядковый
    393. 

  393. номер этого элемента Web-страницы, например, для рисунка: n=5, для первого
    394. 

  394. текста: n=6, для второго: n=7 (при щелчке по свободному пространству окна
    395. 

  395. браузера n принимает значение 4 - номер тэга BODY).<BR>
    396. 

  396. <SPAN CLASS="txt_abz">Режим </SPAN>перетаскивания отмеченного объекта
    397. 

  397. реализуется путем вызова при движении мышки (по событию 
    398. 

  398. <SPAN CLASS="svoj">Mousemove</SPAN>) функции 
    399. 

  399. <SPAN CLASS="svoj">drag()</SPAN>, которая выполняет следующие действия:
    400. 

  400. <UL CLASS="list">
    401. 

  401. <LI>устанавливает для объекта с номером n абсолютное позиционирование;
    402. 

  402. <LI>присваивает горизонтальной и вертикальной координатам этого объекта
    403. 

  403. соответственно горизонтальную и вертикальную координату указателя мышкки,
    404. 

  404. что позволяет ему перемещаться за движущейся мышкой;
    405. 

  405. <LI>устанавливает для объекта текущее значение свойства
    406. 

  406. <SPAN CLASS="svoj">z-index</SPAN>, заданное в переменной l.
    407. 

  407. </UL>
    408. 

  408. <P>При щелчке правой кнопкой мышки (по событию 
    409. 

  409. <SPAN CLASS="svoj">Contextmenu</SPAN>) циклически меняется значение переменной
    410. 

  410. l (0,1,2,0,...), задающей текущее значение свойства
    411. 

  411. <SPAN CLASS="svoj">z-index</SPAN>, что позволяет любому объекту при задании 
    412. 

  412. соответствующего значения или перекрывать другие объкты Web-страницы, или
    413. 

  413. располагаться под ними.<BR>
    414. 

  414. <SPAN CLASS="txt_abz">Для </SPAN>отмены режима перетаскивания отмеченного объекта
    415. 

  415. необходимо повторно щелчкнуть мышкой. При этом в переменную
    416. 

  416. <SPAN CLASS="svoj">n</SPAN> заносится номер уже нового объекта - того, который
    417. 

  417. в момент щелчка находился под перетаскиваемым объектом. Это связано с тем, что
    418. 

  418. при движении координаты указателя мышки на пиксел опережают координаты самого
    419. 

  419. объекта. В этом случае для нового объекта устанавливается режим перетаскивания   
    420. 

  420. (если только этим объектом не является тэг BODY).<BR>
    421. 

  421. <SPAN CLASS="txt_abz">Добавим</SPAN>, что закомментированные строки функции
    422. 

  422. <SPAN CLASS="svoj">drag()</SPAN> были использованы при отладке программы для вывода
    423. 

  423. в поле статуса окна браузера значений таких контрольных данных: номер,
    424. 

  424. <SPAN CLASS="svoj">z-index</SPAN> и координаты перетаскиваемого объекта, а
    425. 

  425. также координаты мышки.
    426. 

  426. <A NAME="3"></A>
    427. 

  427. <TABLE WIDTH=70%  ALIGN=CENTER BORDER=0>
    428. 

  428. <TR><TD ALIGN=right>
    429. 

  429. <A CLASS="out" HREF="#beg">Оглавление</A>
    430. 

  430. </TABLE>
    431. 

  431. <H4>3 Свойства и методы объекта Math</H4>
    432. 

  432. <P>Объект <SPAN CLASS="svoj">Math</SPAN> позволяет программистам использовать
    433. 

  433. математические константы и функции при написании программ на JavaScript.
    434. 

  434. Имеет следующие свойства:
    435. 

  435. <UL CLASS="list">
    436. 

  436. <LI>E - возвращает константу Эйлера (e);
    437. 

  437. <LI>LN10 - возвращает значение ln 10;
    438. 

  438. <LI>LN2 - возвращает значение ln2;
    439. 

  439. <LI>LOG10E - возвращает значение lg e;
    440. 

  440. <LI>LOG2E - возвращает значение log<SUB>2</SUB>e;
    441. 

  441. <LI>PI - возвращает значение 3,14159...
    442. 

  442. </UL>
    443. 

  443. <P CLASS="ba">и методы:
    444. 

  444. <UL CLASS="list">
    445. 

  445. <LI>abs(число) - возвращает абсолютное значение аргумента;
    446. 

  446. <LI>acos(число) - возвращает арккосинус аргумента в радианах;
    447. 

  447. <LI>asin(число) - возвращает арксинус аргумента в радианах;
    448. 

  448. <LI>atan(число) - возвращает арктангенс аргумента в радианах;
    449. 

  449. <LI>atan2(x, y) - возвращает угол в радианах между горизонтальной осью и
    450. 

  450. прямой проведенной через начало координат и точку с координатми x, y;
    451. 

  451. <LI>ceil(число) - возвращает ближайшее целое число, большее или равное аргументу;
    452. 

  452. <LI>cos(число) - возвращает косинус аргумента в радианах;
    453. 

  453. <LI>exp(число) - возвращает значение e<SUP>число</SUP>;
    454. 

  454. <LI>floor(число) - возвращает ближайшее целое число, меньше аргумента или равное ему;
    455. 

  455. <LI>log(число) - возвращает натуральный логарифм аргумента;
    456. 

  456. <LI>max(список аргументов, разделенный запятыми) - возвращает максимальный из
    457. 

  457. аргументов; если не задан ни один аргумент возвращает значение NEGATIVE
    458. 

  458. INFINITY ("минус бесконечность"); если один из аргументов равен NaN (Not
    459. 

  459. a Number - "не число"),  возвращается NaN;
    460. 

  460. <LI>min(список аргументов, разделенный запятыми) - возвращает минимальный из
    461. 

  461. аргументов; если не задан ни один аргумент возвращает значение POSITIVE
    462. 

  462. INFINITY ("плюс бесконечность"); если один из аргументов равен NaN,
    463. 

  463. возвращается NaN;
    464. 

  464. <LI>pow(основание, порядок) - возвращает значение основание<SUP>порядок</SUP>;
    465. 

  465. <LI>random() - возвращает псевдослучайное число от 0 включительно до 1
    466. 

  466. исключительно;
    467. 

  467. <LI>round(число) - возвращает значение оргумента, округленное до ближайшего
    468. 

  468. целого;
    469. 

  469. <LI>sin(число) - возвращает синус аргумента в радианах;
    470. 

  470. <LI>sqrt(число) - возвращает квадратный корень от аргумента;
    471. 

  471. <LI>tan(число) - возвращает тангенс аргумента в радианах.
    472. 

  472. </UL>
    473. 

  473. <A NAME="ind"></A>
    474. 

  474. <TABLE WIDTH=70%  ALIGN=CENTER BORDER=0>
    475. 

  475. <TR><TD ALIGN=right>
    476. 

  476. <A CLASS="out" HREF="#beg">Оглавление</A>
    477. 

  477. </TABLE>
    478. 

  478. <H4>Индивидуальные задания </H4>
    479. 

  479. <P>На языке JavaScript разработать программные средства, выполняющие следующие действия:<BR><BR>
    480. 

  480. <UL CLASS="list">
    481. 

  481. <LI>по событию 1 отметить указанный в таблице объект, изменив одно или несколько
    482. 

  482. его свойств;
    483. 

  483. <LI> по событию 2 осуществить движение этого объекта из заданной точки (x,y)
    484. 

  484. экрана по траектории, заданной функцией f(x) и направлением ("куда") в соответствии с
    485. 

  485. указанным режимом:
    486. 

  486. <UL CLASS="list2">
    487. 

  487. <LI>1 - до достижения границ окна браузера;
    488. 

  488. <LI>2 - до достижения границ окна браузера после однократного отражения; 
    489. 

  489. <LI>2 - непрерывное движение с многократными отражениями от границ окна
    490. 

  490. браузера.
    491. 

  491. надо выполнять с отражением от границ окна браузера.
    492. 

  492. </UL>
    493. 

  493. <LI>амплитуду и скорость движения выбирать из соображения наглядности.
    494. 

  494. </UL>
    495. 

  495. <P> <table border=1 align=center width="100%" style="font:5mm;color:#00a">
    496. 

  496. <tr><th rowspan=2>№<th rowspan=2>Объект<th colspan=4>Параметры движения
    497. 

  497. <th colspan=2>События
    498. 

  498. <tr><th>(x,y)<th>f(x)<th>Куда<th>Режим<th>1<th>2
    499. 

  499. <tr><td>1<td>Слово<td>X=0;Y=450<td>2x+5<td>Вправо/вверх<td>3<td>Click<td>Click
    500. 

  500. <tr><td>2<td>Рисунок<td>X=300;Y=400<td>25cos(x)<td>Вверх<td>2<td>Click<td>Contextmenu
    501. 

  501. <tr><td>3<td>Ссылка<td>X=450;Y=220<td>40sin(3x)<td>Влево<td>2<td>Click<td>Mouseover
    502. 

  502. <tr><td>4<td>Таблица<td>X=600;Y=400<td>x*x/500<td>Влево/вверх<td>3<td>Click><td>Mousemove
    503. 

  503. <tr><td>5<td>Буква<td>X=200;Y=0<td>exp(x/100)<td>Вниз<td>2<td>Dblclick<td>Dblclick
    504. 

  504. <tr><td>6<td>Рисунок<td>X=10;Y=300<td>30log(x+10)<td>Вправо<td>2<td>Dblclick<td>Contextmenu
    505. 

  505. <tr><td>7<td>Ссылка<td>X=600;Y=200<td>10tan(x)<td>Влево<td>2<td>Dblclick<td>Mouseover
    506. 

  506. <tr><td>8<td>Слово<td>X=50;Y=50<td>0.001x*x+x<td>Вправо/вниз<td>3<td>Dblclick<td>Mousemove
    507. 

  507. <tr><td>9<td>Кнопка <td>X=500;Y=5<td>60sin(x*x)<td>Влево/вниз<td>1<td>Contextmenu<td>Contextmenu
    508. 

  508. <tr><td>10<td>Буква<td>X=250;Y=450<td>25cos(2x+1)<td>Вверх<td>2<td>Contextmenu<td>Click
    509. 

  509. <tr><td>11<td>Кнопка<td>X=350;Y=0<td>0.5exp(x/250)<td>Вниз<td>2<td>Contextmenu<td>Dblclick
    510. 

  510. <tr><td>12<td>Ссылка <td>X=75;Y=175<td>50log(x+5)-50<td>Вправо<td>3<td>Contextmenu<td>Mouseover
    511. 

  511. <tr><td>13<td>Форма<td>X=20;Y=420<td>0.2x+45<td>Вправо/вверх<td>3<td>Contextmenu<td>Mousemove
    512. 

  512. <tr><td>14<td>Список OL<td>X=550;Y=20<td>-2.5x+15<td>Влево/вниз<td>1<td>Mouseover<td>Click
    513. 

  513. <tr><td>15<td>Число<td>X=650;Y=510<td>1000/(x+25)<td>Влево/вверх<td>1<td>Mouseover<td>Dblclick
    514. 

  514. <tr><td>16<td>IFRAME<td>X=20;Y=80<td>x*x*x/(x*x+125))<td>Вправо/вниз<td>3<td>Mouseover<td>Contextmenu
    515. 

  515. <tr><td>17<td>Список UL<td>X=20;Y=330<td>x<sup>0.75</sup>-15<td>Вправо<td>2<td>Mouseover<td>Mouseout
    516. 

  516. <tr><td>18<td>radio<td>X=620;Y=280<td>x<sup>1.05</sup>-x<td>Влево<td>2<td>Mousemove<td>Click
    517. 

  517. <tr><td>19<td>checkbox<td>X=20;Y=440<td>x<sup>0.5</sup>-50<td>Вправо/вверх<td>3<td>Mousemove<td>Dblclick
    518. 

  518. <tr><td>20<td>SELECT<td>X=580;Y=590<td>(x*x+x+10)<sup>0.5</sup><td>Влево/вверх<td>2<td>Mousemove<td>Contextmenu
    519. 

  519. </table>
    520.