Удобная песочница: http://learn.javascript.ru/play

 


Задание :Написать программу на JavaScript для сортировки массива. И определить, при каком количестве элементов сортировка укладывается в 1 секунду. Замер времени можно производить вручную или до и после сортировки создавать объект Date (new Date()) и вызывать для него метод getTime(), возвращающий время в миллисекундах. (времени Date нет!!!)


<!DOCTYPE HTML><html>  <head> </head> 

<body>
 <script>
  function SortArray(arr)      {
   return arr;      }

  var mass = new Array(1,9,7,56,5,45,6,3,-2);
  function compareNumeric(a, b) {       

if (a > b) return 1;        if (a < b) return -1;      }     

mass.sort(compareNumeric);       

document.write(mass); 

 </script>
</body></html>

 


Задание:Составить программу на JavaScript, генерирующую текст таблицы, в которой показываются значения наиболее важных свойств объектов navigator, screen, location.


<!DOCTYPE HTML><html><body>  <table id='table' border=1><tr> <th width=200> Navigator </th> <th width=200> Screen </th> <th width=200> Location </th> </tr>   </table><script>
var tr = document.createElement('tr');tr.id = 'tr';var td1 = document.createElement('td');var td2 = document.createElement('td');var td3 = document.createElement('td');document.getElementById('table').appendChild(tr);td1.innerHTML=

navigator.appName;document.getElementById('tr').appendChild(td1);td2.innerHTML=

screen.width;document.getElementById('tr').appendChild(td2);td3.innerHTML=

location.protocol;document.getElementById('tr').appendChild(td3);
var tr = document.createElement('tr');tr.id = 'tr2';var td1 = document.createElement('td');var td2 = document.createElement('td');var td3 = document.createElement('td');document.getElementById('table').appendChild(tr);td1.innerHTML=

navigator.appVersion;document.getElementById('tr2').appendChild(td1);td2.innerHTML=

screen.height;;document.getElementById('tr2').appendChild(td2);td3.innerHTML=

location.host;document.getElementById('tr2').appendChild(td3);  
var tr = document.createElement('tr');tr.id = 'tr3';var td1 = document.createElement('td');var td2 = document.createElement('td');var td3 = document.createElement('td');document.getElementById('table').appendChild(tr);td1.innerHTML=

navigator.userAgent;document.getElementById('tr3').appendChild(td1);td2.innerHTML='';

document.getElementById('tr3').appendChild(td2);td3.innerHTML=location.hostname;

document.getElementById('tr3').appendChild(td3); 
var tr = document.createElement('tr');tr.id = 'tr4';var td1 = document.createElement('td');var td2 = document.createElement('td');var td3 = document.createElement('td');document.getElementById('table').appendChild(tr);td1.innerHTML=

navigator.appCodeName;document.getElementById('tr4').appendChild(td1);td2.innerHTML='';

document.getElementById('tr4').appendChild(td2);td3.innerHTML=location.port;

document.getElementById('tr4').appendChild(td3); 
var tr = document.createElement('tr');tr.id = 'tr5';var td1 = document.createElement('td');var td2 = document.createElement('td');var td3 = document.createElement('td');document.getElementById('table').appendChild(tr);td1.innerHTML='';

document.getElementById('tr5').appendChild(td1);td2.innerHTML='';

document.getElementById('tr5').appendChild(td2);td3.innerHTML=location.pathname;

document.getElementById('tr5').appendChild(td3); 
var tr = document.createElement('tr');tr.id = 'tr6';var td1 = document.createElement('td');var td2 = document.createElement('td');var td3 = document.createElement('td');document.getElementById('table').appendChild(tr);td1.innerHTML='';

document.getElementById('tr6').appendChild(td1);td2.innerHTML='_';

document.getElementById('tr6').appendChild(td2);td3.innerHTML=location.search ;document.getElementById('tr6').appendChild(td3); 
var tr = document.createElement('tr');tr.id = 'tr7';var td1 = document.createElement('td');var td2 = document.createElement('td');var td3 = document.createElement('td');document.getElementById('table').appendChild(tr);td1.innerHTML=' ';document.getElementById('tr7').appendChild(td1);td2.innerHTML='_ ';document.getElementById('tr7').appendChild(td2);td3.innerHTML=location.hash ;document.getElementById('tr7').appendChild(td3); 
var tr = document.createElement('tr');tr.id = 'tr8';var td1 = document.createElement('td');var td2 = document.createElement('td');var td3 = document.createElement('td');document.getElementById('table').appendChild(tr);td1.innerHTML='';

document.getElementById('tr8').appendChild(td1);td2.innerHTML=' ';document.getElementById('tr8').appendChild(td2);td3.innerHTML=location.href ;document.getElementById('tr8').appendChild(td3); 
</script></body></html>

 

 

 


Задание:

Разместить на странице форму для выбора времени суток, а именно, часов, минут, секунд.

Лучше всего использовать раскрывающиеся списки.

При выборе времени оно должно отображаться как в формате SS:MM:HH (т.е., например, 08:30:00), так и в виде количества секунд (от начала суток) где-либо на странице (проще всего использовать отдельное текстовое поле).

 

<script>  function func(){var a    //a=parseInt(form1.goods3.value)*3600+parseInt(form2.goods1.value)*60+parseInt(form3.goods2.value);    document.getElementById('i4').value=     parseInt(document.getElementById('i1').value)+':'+ parseInt(document.getElementById('i2').value) + ':' +                                                                  parseInt(document.getElementById('i3').value);


    document.getElementById('i5').value= parseInt(document.getElementById('i1').value)*3600+parseInt(document.getElementById('i2').value)*60+                                                                 parseInt(document.getElementById('i3').value)
  }
</script><head>
 </head><body>
  Выберите часы:   <select name="goods3" id=i1 onChange="func()">    <option value="0">0</option>  <option value="1">1</option>  <option value="2">2</option>  <option value="3">3</option>  <option value="4">4</option>  <option value="5">5</option>  <option value="6">6</option>  <option value="7">7</option>  <option value="8">8</option>  <option value="9">9</option>  <option value="10">10</option>  <option value="11">11</option>  <option value="12">12</option>  <option value="13">13</option>  <option value="14">14</option>  <option value="15">15</option>  <option value="16">16</option>  <option value="17">17</option>  <option value="18">18</option>  <option value="19">19</option>  <option value="20">20</option>  <option value="21">21</option>  <option value="22">22</option>  <option value="23">23</option>
  </select>
  <br>  <form2>Выберите минуты:<select name="goods1" id=i2 onChange="func()">  <option value="0">0</option>  <option value="1">1</option>  <option value="2">2</option>  <option value="3">3</option>  <option value="4">4</option>  <option value="5">5</option>  <option value="6">6</option>  <option value="7">7</option>  <option value="8">8</option>  <option value="9">9</option>  <option value="10">10</option>  <option value="11">11</option>  <option value="12">12</option>  <option value="13">13</option>  <option value="14">14</option>  <option value="15">15</option>  <option value="16">16</option>  <option value="17">17</option>  <option value="18">18</option>  <option value="19">19</option>  <option value="20">20</option>  <option value="21">21</option>  <option value="22">22</option>  <option value="23">23</option>  <option value="24">24</option>  <option value="25">25</option>  <option value="26">26</option>  <option value="27">27</option>  <option value="28">28</option>  <option value="29">29</option>  <option value="30">30</option>  <option value="31">31</option>  <option value="32">32</option>  <option value="33">33</option>  <option value="34">34</option>  <option value="35">35</option>  <option value="36">36</option>  <option value="37">37</option>  <option value="38">38</option>  <option value="39">39</option>  <option value="40">40</option>  <option value="41">41</option>  <option value="41">41</option>  <option value="42">42</option>  <option value="43">43</option>  <option value="44">44</option>  <option value="45">45</option>  <option value="46">46</option>  <option value="47">47</option>  <option value="48">48</option>  <option value="49">49</option>  <option value="50">50</option>  <option value="51">51</option>  <option value="52">52</option>  <option value="53">53</option>  <option value="54">54</option>  <option value="55">55</option>  <option value="56">56</option>  <option value="57">57</option>  <option value="58">58</option>  <option value="59">59</option>
</select>  </form2>  <br>  <form3>  Выберите cекунды:<select name="goods2" id=i3 onChange="func()"> <option value="0">0</option>  <option value="1">1</option>  <option value="2">2</option>  <option value="3">3</option>  <option value="4">4</option>  <option value="5">5</option>  <option value="6">6</option>  <option value="7">7</option>  <option value="8">8</option>  <option value="9">9</option>  <option value="10">10</option>  <option value="11">11</option>  <option value="12">12</option>  <option value="13">13</option>  <option value="14">14</option>  <option value="15">15</option>  <option value="16">16</option>  <option value="17">17</option>  <option value="18">18</option>  <option value="19">19</option>  <option value="20">20</option>  <option value="21">21</option>  <option value="22">22</option>  <option value="23">23</option>  <option value="24">24</option>  <option value="25">25</option>  <option value="26">26</option>  <option value="27">27</option>  <option value="28">28</option>  <option value="29">29</option>  <option value="30">30</option>  <option value="31">31</option>  <option value="32">32</option>  <option value="33">33</option>  <option value="34">34</option>  <option value="35">35</option>  <option value="36">36</option>  <option value="37">37</option>  <option value="38">38</option>  <option value="39">39</option>  <option value="40">40</option>  <option value="41">41</option>  <option value="41">41</option>  <option value="42">42</option>  <option value="43">43</option>  <option value="44">44</option>  <option value="45">45</option>  <option value="46">46</option>  <option value="47">47</option>  <option value="48">48</option>  <option value="49">49</option>  <option value="50">50</option>  <option value="51">51</option>  <option value="52">52</option>  <option value="53">53</option>  <option value="54">54</option>  <option value="55">55</option>  <option value="56">56</option>  <option value="57">57</option>  <option value="58">58</option>  <option value="59">59</option></select>  </form3>  <br>  <input type = 'text' id=i4 name='textbox' ><br>  Секунд:  <input type = 'text' id=i5 name='textbox1' ></body>

 


Задание:

Создать страничку, моделирующую работу электронной таблицы по рассчёту балланса. Достаточно одной строки таблицы. В таблице должны быть три столбца: "Остаток на начало месяца", "Приход", "Расход" и "Сумма". Сумма должна пересчитываться автоматически при каждом изменении остальных полей.


<!DOCTYPE HTML><html>  <head> </head>  <body>


     <table id='table' border=1><tr> <th width=200> Остаток </th> <th width=200> Приход </th> <th width=200> Расход </th> <th width=200> Сумма </th> </tr>   </table>

  <script>  var tr = document.createElement('tr');tr.id = 'tr';var td1 = document.createElement('td');var td2 = document.createElement('td');var td3 = document.createElement('td');var td4 = document.createElement('td');  document.getElementById('table').appendChild(tr);td1.innerHTML= "<input type = 'text' id=i1 name='textbox1' onchange=document.getElementById('i4').value=parseInt(document.getElementById('i1').value)+

parseInt(document.getElementById('i2').value)-parseInt(document.getElementById('i5').value)> ";document.getElementById('tr').appendChild(td1);td2.innerHTML="<input type = 'text' id=i2 name='textbox1' onchange=document.getElementById('i4').value=parseInt(document.getElementById('i1').value)+

parseInt(document.getElementById('i2').value) -parseInt(document.getElementById('i5').value)> ";document.getElementById('tr').appendChild(td2);td3.innerHTML="<input type = 'text' id=i5 name='textbox1' onchange=document.getElementById('i4').value=parseInt(document.getElementById('i1').value)+

parseInt(document.getElementById('i2').value)-parseInt(document.getElementById('i5').value)> ";document.getElementById('tr').appendChild(td3);td4.innerHTML= "<input type = 'text' id=i4 name='textbox1' onchange=document.getElementById('i4').value=parseInt(document.getElementById('i1').value)+

parseInt(document.getElementById('i2').value) -parseInt(document.getElementById('i5').value)> "document.getElementById('tr').appendChild(td4);document.getElementById('i1').value=0;

document.getElementById('i2').value=0;document.getElementById('i5').value=0;document.getElementById('i4').value=0;    </script>   </body></html>

 


Задание:

Создать страничку, которая бы являлась некоторым аналогом адресной панели браузера. На этой страничке должна располагаться форма, в текстовом поле которой можно указать адрес дргуой странички. Страничка с указанного адреса (при нажатии кнопки формы с подписью "Go") должна загружаться в отдельном (одном и том же) окне.

 

<html><head><script> 
        function currentPage(s){                link="http://"+s;       window.location.href=s;        }         function newPage(s){                s="http://"+s;                window.open(s, 'new','width=600,height=800,left=0,top=100,screenX=0,screenY=100');        }</script></head><body><form>
  адрес<input type=text id='url' value='ya.ru'>
<input type=button id='i1' value="<<Go!>>" 
onClick="newPage(document.getElementById('url').value)">
</form></body></html>

 

 

 


Задание:Для следующих страничек разберитесь, как работают скрипты и исправьте, где надо, ошибки.

1.

<HTML><P id="p1" STYLE="font-size:16">Text 1.</P><P id="p2">Text 2.</P><SCRIPT>  x=parseInt(document.getElementById('p1').style.fontSize);  y=x+10;  document.getElementById('p2').style.fontSize=y;  </SCRIPT></HTML>

 

2.

<HTML><SCRIPT>x=Math.round(Math.random()*500);  alert(x);s=''+x;y=s.substr(1,2);z=s.substring(1,2);alert(y);  alert(z);  if(y==z) {alert("substr("+x+",1,2) = substring("+x+",1,2) again")} else {alert('rt')}</SCRIPT></HTML>

//вариант второй

<HTML><SCRIPT>x=Math.round(Math.random()*500);s=''+x;y=s.substr(1,2);z=s.substring(1,2);  document.write("x=",x,"___y=",y,"___z=",z);if(y==z) {alert("substr("+x+",1,2) = substring("+x+",1,2) again")}else{alert("Не равны")};</SCRIPT></HTML>

 

 


Задание:

Сравните скрипты на страницах 08_3_1.htm, 08_3_2.htm, 08_3_3.htm. Одинаково ли будут вести себя скрипты? Какие из них содержат ошибки? Для скриптов, не содержащих ошибки, определите значение переменной x в конце выполнения скрипта.

 

Ответ: нужно явно задавать функцию, или использовать разные обозначения, поэтому все три варианта неверные, но работает 3-й.


Задание:

Динамическое изменение страницы.

I.

<!DOCTYPE HTML><html><HEAD><script>        function show(i){      if (document.getElementById(i).style.display=='')      {        document.getElementById(i).style.display='none';      }      else {        document.getElementById(i).style.display=''      }}</script></HEAD><BODY>  <div onClick="show('item1')"><h2>Лабораторная 5</h2></div><ol id=item1 style="display:none"><li> <div> Написать программу на JavaScript для сортировки массива. И определить, при каком количестве элементов сортировка укладывается в 1 секунду. Замер времени можно производить вручную или до и после сортировки создавать объект Date (new Date()) и вызывать для него метод getTime(), возвращающий время в миллисекундах.</div>     <br>  <li><div>Составить программу на JavaScript, генерирующую текст таблицы, в которой показываются значения наиболее важных свойств объектов navigator, screen, location.</div>  <br>  </ol>


<div onClick="show('item2')"><h2> Лабораторная 6</h2></div><ol id=item2 style="display:none"> Варианты: <li>Разместить на странице форму для выбора даты.  <div>Даты должны строиться из года, месяца, числа. Год, месяц, число должны выбираться в отдельных элементах, лучше всего в раскрывающихся списках. Месяца должны показываться в виде названий.</div><br><div>При выборе даты она должны отображаться в формате DD.MM.YYYY (т.е., например, 22.10.2008) где-либо на странице (проще всего использовать отдельное текстовое поле).</div><br><li>Разместить на странице форму для выбора времени суток, а именно, часов, минут, секунд.<div>Лучше всего использовать раскрывающиеся списки.</div><br><div>При выборе времени оно должно отображаться как в формате SS:MM:HH (т.е., например, 08:30:00), так и в виде количества секунд (от начала суток) где-либо на странице (проще всего использовать отдельное текстовое поле).</div>  <br>  </ol>
  <div onClick="show('item3')"><h2>Лабораторная 7</h2></div><ol id=item3 style="display:none"><li><div>Создать страничку, моделирующую работу электронной таблицы по рассчёту балланса. Достаточно одной строки таблицы. В таблице должны быть три столбца: "Остаток на начало месяца", "Приход", "Расход" и "Сумма". Сумма должна пересчитываться автоматически при каждом изменении остальных полей.</div><br>  <li><div>Создать страничку, которая бы являлась некоторым аналогом адресной панели браузера. На этой страничке должна располагаться форма, в текстовом поле которой можно указать адрес дргуой странички. Страничка с указанного адреса (при нажатии кнопки формы с подписью "Go") должна загружаться в отдельном (одном и том же) окне.</div>  </ol></BODY></html>

 


***********************************вариант 2

 

<!DOCTYPE HTML><html>  <head> </head>  <body><div onClick="show('lab5')"><h2>Лабораторная 5</h2></div><P id='lab5'>   Язык JavaScript<br><br>  1. Написать программу на JavaScript для сортировки массива. И определить, при каком количестве элементов сортировка укладывается в 1 секунду. Замер времени можно производить вручную или до и после сортировки создавать объект Date (new Date()) и вызывать для него метод getTime(), возвращающий время в миллисекундах.<br>    2.Составить программу на JavaScript, генерирующую текст таблицы, в которой показываются значения наиболее важных свойств объектов navigator, screen, location.    </P>
<div onClick="show('lab6')"><h2>Лабораторная 6</h2></div>    <P id='lab6'>      Формы.<br><br>
Варианты:<br>1. Разместить на странице форму для выбора даты.Даты должны строиться из года, месяца, числа. Год, месяц, число должны выбираться в отдельных элементах, лучше всего в раскрывающихся списках. Месяца должны показываться в виде названий.
При выборе даты она должны отображаться в формате DD.MM.YYYY (т.е., например, 22.10.2008) где-либо на странице (проще всего использовать отдельное текстовое поле).<br><br>
2. Разместить на странице форму для выбора времени суток, а именно, часов, минут, секунд.Лучше всего использовать раскрывающиеся списки.
При выборе времени оно должно отображаться как в формате SS:MM:HH (т.е., например, 08:30:00), так и в виде количества секунд (от начала суток) где-либо на странице (проще всего использовать отдельное текстовое поле).    </P>
<div onClick="show('lab7')"><h2>Лабораторная 7</h2></div><P id='lab7'>    Формы.<br><br>1. Создать страничку, моделирующую работу электронной таблицы по рассчёту балланса. Достаточно одной строки таблицы. В таблице должны быть три столбца: "Остаток на начало месяца", "Приход", "Расход" и "Сумма". Сумма должна пересчитываться автоматически при каждом изменении остальных полей.<br>2. Создать страничку, которая бы являлась некоторым аналогом адресной панели браузера. На этой страничке должна располагаться форма, в текстовом поле которой можно указать адрес дргуой странички. Страничка с указанного адреса (при нажатии кнопки формы с подписью "Go") должна загружаться в отдельном (одном и том же) окне.
    <script>
        function show(i){      if (document.getElementById(i).style.display=='')      {        document.getElementById(i).style.display='none';      }      else {        document.getElementById(i).style.display=''      }}</script>
  </body></html>

 

 

 


Задание:

Динамическое изменение страницы.

II:

 

<TABLE ID=m STYLE="position:absolute;left:0;top:0"><TR><TD>              <P> 1) В нижней части каждого блока разместите кнопочки-изображения для перемещения этого блока на 5 пикселов в соответствующем направлении.</P>
           </TD></TR><TR><TD>   <input type=button  id='right' value="right" Onclick="javascript:document.getElementById('m').style.left=parseInt(document.getElementById('m').style.left)+5"><input type=button id='up' value="up" Onclick="javascript:document.getElementById('m').style.top=parseInt(document.getElementById('m').style.top)-5">
   <input type=button  id='left' value="left" Onclick="javascript:document.getElementById('m').style.left=parseInt(document.getElementById('m').style.left)-5">
<input type=button id='down' value="down" Onclick="javascript:document.getElementById('m').style.top=parseInt(document.getElementById('m').style.top)+5">  </TD></TR></TABLE>
<br><br>

<TABLE ID=m1 STYLE="position:absolute;left:0;top:100"><TR><TD>              <P> 2) В нижней части каждого блока разместите кнопочки-изображения для перемещения этого блока на 5 пикселов в соответствующем направлении.</P>    <IMG SRC=empty.jpg>
           </TD></TR><TR><TD>   <input type=button  id='right' value="right" Onclick="javascript:document.getElementById('m1').style.left=parseInt(document.getElementById('m1').style.left)+5"><input type=button id='up' value="up" Onclick="javascript:document.getElementById('m1').style.top=parseInt(document.getElementById('m1').style.top)-5">
   <input type=button  id='left' value="left" Onclick="javascript:document.getElementById('m1').style.left=parseInt(document.getElementById('m1').style.left)-5">
<input type=button id='down' value="down" Onclick="javascript:document.getElementById('m1').style.top=parseInt(document.getElementById('m1').style.top)+5">  </TD></TR></TABLE>

<TABLE ID=m2 STYLE="position:absolute;left:0;top:350"><TR><TD>  3)  <IMG SRC=empty.jpg>           </TD></TR><TR><TD>   <input type=button  id='right' value="right" Onclick="javascript:document.getElementById('m2').style.left=parseInt(document.getElementById('m2').style.left)+5"><input type=button id='up' value="up" Onclick="javascript:document.getElementById('m2').style.top=parseInt(document.getElementById('m2').style.top)-5">
   <input type=button  id='left' value="left" Onclick="javascript:document.getElementById('m2').style.left=parseInt(document.getElementById('m2').style.left)-5">
<input type=button id='down' value="down" Onclick="javascript:document.getElementById('m2').style.top=parseInt(document.getElementById('m2').style.top)+5">  </TD></TR></TABLE>

<TABLE ID=m4 STYLE="position:absolute;left:0;top:550"><TR><TD>              <P> 4) В нижней части каждого блока разместите кнопочки-изображения для перемещения этого блока на 5 пикселов в соответствующем направлении.</P>             </TD></TR><TR><TD>   <input type=button  id='right' value="right" Onclick="javascript:document.getElementById('m4').style.left=parseInt(document.getElementById('m4').style.left)+5"><input type=button id='up' value="up" Onclick="javascript:document.getElementById('m4').style.top=parseInt(document.getElementById('m4').style.top)-5">
   <input type=button  id='left' value="left" Onclick="javascript:document.getElementById('m4').style.left=parseInt(document.getElementById('m4').style.left)-5">
<input type=button id='down' value="down" Onclick="javascript:document.getElementById('m4').style.top=parseInt(document.getElementById('m4').style.top)+5">  </TD></TR></TABLE>


Задание:

Создать страничку, позволяющую пользователю менять свойства стилей для отдельных абзацев на странице. Выбор абзаца должен происходить щелчком мышки. Выбор свойства - из раскрывающегося списка. Сделать возможным по крайней мере три свойства стилей - размер шрифта, цвет текста, гарнитуру шрифта. При выборе свойства в первом раскрывающемся списке, должен показываться соответствующий второй раскрывающийся список, содержащий возможные значения свойства.

Изменение второго списка при выборе элемента первого реализовать двумя разными способами:

  1. Заготовить различные варианты второго списка и делать видимым то один, то другой из этих списков.

<html><HEAD><script>  var element
        function show(){      if (document.form0.number0.value=='1')      { a=1;b=2;c=3;d=4;e=5;f=6;      }
      if (document.form0.number0.value=='2')      {a=2;b=1;c=3;d=5;e=4;f=6;      }      
      if (document.form0.number0.value=='3')      {a=3;b=2;c=1;d=6;e=5;f=4;      }       document.getElementById(a).style.display='';       document.getElementById(b).style.display='none';       document.getElementById(c).style.display='none';       document.getElementById(d).style.display='';       document.getElementById(e).style.display='none';       document.getElementById(f).style.display='none';    }
  function pressAnyKey(i){    element=i;      document.getElementById(0).style.display='';      document.getElementById(7).style.display='';    }
  function pressAnyCol(){      var par = document.getElementById(element);                switch (document.getElementById('col').value){                        case 'red': par.style.color='red'                                 break;                        case 'green': par.style.color='green'                                 break;                        case 'blue': par.style.color='blue'                                 break;                        default: par.style.color='black';                }          }
  function pressAnyFont(){   var par = document.getElementById(element);                switch (document.getElementById('font').value){                        case '10': par.style.fontSize=10;                                 break;                        case '13': par.style.fontSize=13;                                break;                                        case '16': par.style.fontSize=16;                    break;                       case '20': par.style.fontSize=20;                                 break;            default: par.style.fontSize=10;                 }          }

  function pressAnyFontFam(){   var par = document.getElementById(element);                switch (document.getElementById('fontfam').value){                        case 'Arial': par.style.fontFamily = "Arial";                                break;            case 'Times New Roma': par.style.fontFamily = "Times New Roman";                    break;                default: par.style.fontFamily = "Times New Roman";                 }          }


</script></HEAD><BODY>
  <table>

  <TR>   <form name = 'form0' >          <TD id=0 style="display:none"> Свойство:</TD>           <TD>     <select id=7 name = 'number0' style="display:none" onMouseUp="show()">      <option value = '0' style="display:none"> </option>        <option value = '1'>Размер</option>            <option value = '2'>Цвет</option>            <option value = '3'>Шрифт</option>    </select>          </TD>   </form>  </TR>
    <TR>   <form name = 'form1' >          <TD style="display:none" id=1> Размер:</TD>           <TD style="display:none" id=4>     <select name = 'number1' id = 'font' onChange="pressAnyFont()" >        <option value = '10'>10</option>            <option value = '13'>13</option>            <option value = '16'>16</option>      <option value = '20'>20</option>            </select>          </TD>   </form>  </TR>
  <TR>  <form name = 'form2'  >          <TD style="display:none" id=2> Цвет:</TD>         <TD style="display:none" id=5>             <select name = 'number2' id=col onChange="pressAnyCol()">          <option value = 'fff' style="display:none"> </option>        <option value = 'black'>черный</option>        <option value = 'red'>красный</option>            <option value = 'green'>зеленый</option>            <option value = 'blue'>синий</option>            </select>          </TD>           </form>    </TR>
    <TR>    <form name = 'form3'>    <TD style="display:none" id=3> Тип шрифта:</TD>     <TD style="display:none" id=6>             <select name = 'number3' id=fontfam onChange="pressAnyFontFam()" >          <option value = 'hjh' style="display:none"> </option>            <option value = 'Arial'>Arial</option>            <option value = 'Times New Roma'>Times New Roman</option>               </select>  </TD>   </form>  </TR>
  </table>


  <p id=item1 onClick="pressAnyKey('item1')" >Кросс-доменный скриптинг - общее название для случая, когда страницы с одного домена производят запрос на другой.
Он бывает полезен как для связи сервисов от различных поставщиков, так и для общения разнородных ресурсов в рамках одного общего домена второго уровня.  </p>

<p id=item2 onClick="pressAnyKey('item2')">  Создать страничку, позволяющую пользователю менять свойства стилей для отдельных абзацев на странице. Выбор абзаца должен происходить щелчком мышки. Выбор свойства - из раскрывающегося списка. Сделать возможным по крайней мере три свойства стилей - размер шрифта, цвет текста, гарнитуру шрифта. При выборе свойства в первом раскрывающемся списке, должен показываться соответствующий второй раскрывающийся список, содержащий возможные значения свойства.  </p>


  <p id=item3  onClick="pressAnyKey('item3')">В свое время приходилось реализовывать кучу drag and drop'ов под самым разным соусом.
Эта статья представляет собой учебник-выжимку о том, как организовать drag'n'drop в javascript, начиная от основ и заканчивая готовым фреймворком.    </p>


</BODY>
</html>


 

Менять содержимое воторого списка с помощью изменения свойства innerHTML.

Аналогично, используя innerHTML (см.описание на сайте)

 


Задание:

Динамическое изменение таблиц стилей. (переделать поиск с помощью substr() )

<!DOCTYPE HTML><html>  <head> </head>  <style>       da.fam { font-weight:bold; margin-right:2px;}     da.name {font-size: 14pt; color:green}    da.otch {font-size: 13pt; color:blue}    da.god {font-weight:bold; color:red}    da.gr {text-decoration:underline; font-style:italic; color:#FF5556}    da.sex {font-weight:bold; color:purple}    da.city {color:#22F56F}    da.sr {font-size:15pt}  </style>    <body><OL id='spisok'>  <li ><da class="fam">Иванов </da><da class="name">Василий  </da> <da class="otch"> Андреевич </da><da class="god">17 лет </da> <da class="gr" value=2131> 2131 </da><da class="sex"> М </da><da class="city"> Ленина,3  </da><da class="sr"> 3  </da>        <li ><da class="fam">Петров </da><da class="name">Георгий </da><da class="otch">Алексеевич </da><da class="god">13 лет </da><da class="gr" value=2331> 2331 </da><da class="sex"> М </da><da class="city"> Пушкина,12  </da><da class="sr"> 3,4  </da>      <li ><da class="fam">Сиджов </da><da class="name">Руслан </da><da class="otch">Вячеславович </da><da class="god">22 лет </da><da class="gr" value=2232> 2232 </da><da class="sex"> М </da><da class="city"> Гоголя,1  </da><da class="sr"> 4 </da>      <li ><da class="fam">Кузнецов </da><da class="name">Леонид </da><da class="otch">Петрович </da><da class="god">35 лет </da><da class="gr" value=2134> 2134 </da><da class="sex"> М </da><da class="city"> Баумана,32  </da><da class="sr"> 4,2  </da>      <li ><da class="fam">Потапов </da><da class="name">Феофан </da><da class="otch">Анатольевич </da><da class="god">46 лет </da><da class="gr" value=2321> 2321 </da><da class="sex"> М </da><da class="city"> 1 июля,3  </da><da class="sr"> 3,4  </da></OL>        <input type="checkbox" id=0 onClick="reload('0')" checked > Фамилия <br>    <input type="checkbox"  id=1 onClick="reload('1')" checked> Имя <br>    <input type="checkbox" id=2 onClick="reload('2')" checked>Отчество<br>    <input type="checkbox" id=3 onClick="reload('3')" checked>Возраст<br>    <input type="checkbox" id=4 onClick="reload('4')" checked>Группа<br>    <input type="checkbox"  id=5 onClick="reload('5')" checked>Пол<br>    <input type="checkbox" id=6 onClick="reload('6')" checked>Адрес<br>    <input type="checkbox" id=7 onClick="reload('7')" checked>Ср.балл<br>        <SELECT name="option" id=option>      <OPTION style="display:none"></OPTION>      <OPTION value=fam>Фамилия</OPTION>      <OPTION value=name>Имя</OPTION>      <OPTION value=otch>Отчество</OPTION>      <OPTION value=age>Возраст</OPTION>      <OPTION value=gr>Группа</OPTION>      <OPTION value=sex>Пол</OPTION>      <OPTION value=city>Адрес</OPTION>      <OPTION value=sr>Ср. балл</OPTION>    </SELECT>    <input type=text oninput="changeValue=this.value">    <input type=button value="Фильтр" onClick="filt()">    <script>       var changeValue='';       function reload(st){   if (document.getElementById(st).checked==false) {document.styleSheets[0].cssRules[st].style.display = 'none'; }else {document.styleSheets[0].cssRules[st].style.display = ''; }     }                function filt(){        if(changeValue!=''){      for (i = 1; i < 6; i++) { document.getElementById('spisok').childNodes[i].style.display='none';      }        if (document.getElementById('option').value=='name'){        if(changeValue=='Василий'){ document.getElementById('spisok').childNodes[1].style.display='';                 }          if(changeValue=='Георгий'){ document.getElementById('spisok').childNodes[2].style.display='';                 }          if(changeValue=='Руслан'){ document.getElementById('spisok').childNodes[3].style.display='';                 }          if(changeValue=='Леонид'){ document.getElementById('spisok').childNodes[4].style.display='';                 }          if(changeValue=='Феофан'){ document.getElementById('spisok').childNodes[5].style.display='';                 }        }        if (document.getElementById('option').value=='fam'){        if(changeValue=='Иванов'){ document.getElementById('spisok').childNodes[1].style.display='';                 }          if(changeValue=='Петров'){ document.getElementById('spisok').childNodes[2].style.display='';                 }          if(changeValue=='Сиджов'){ document.getElementById('spisok').childNodes[3].style.display='';                 }          if(changeValue=='Кузнецов'){ document.getElementById('spisok').childNodes[4].style.display='';                 }          if(changeValue=='Потапов'){ document.getElementById('spisok').childNodes[5].style.display='';                 }        }        if (document.getElementById('option').value=='otch'){                  if(changeValue=='Андреевич'){ document.getElementById('spisok').childNodes[1].style.display='';                 }          if(changeValue=='Алексеевич'){ document.getElementById('spisok').childNodes[2].style.display='';                 }          if(changeValue=='Вячеславович'){ document.getElementById('spisok').childNodes[3].style.display='';                 }          if(changeValue=='Петрович'){ document.getElementById('spisok').childNodes[4].style.display='';                 }          if(changeValue=='Анатольевич'){ document.getElementById('spisok').childNodes[5].style.display='';                 }                  }        if (document.getElementById('option').value=='age'){        if(changeValue=='17'){ document.getElementById('spisok').childNodes[1].style.display='';                 }          if(changeValue=='13'){ document.getElementById('spisok').childNodes[2].style.display='';                 }          if(changeValue=='22'){ document.getElementById('spisok').childNodes[3].style.display='';                 }          if(changeValue=='35'){ document.getElementById('spisok').childNodes[4].style.display='';                 }          if(changeValue=='46'){ document.getElementById('spisok').childNodes[5].style.display='';                 }                            }        if (document.getElementById('option').value=='gr'){        if(changeValue=='2131'){ document.getElementById('spisok').childNodes[1].style.display='';                 }          if(changeValue=='2331'){ document.getElementById('spisok').childNodes[2].style.display='';                 }          if(changeValue=='2232'){ document.getElementById('spisok').childNodes[3].style.display='';                 }          if(changeValue=='2134'){ document.getElementById('spisok').childNodes[4].style.display='';                 }          if(changeValue=='2321'){ document.getElementById('spisok').childNodes[5].style.display='';                 }        }                  if (document.getElementById('option').value=='sex'){        if(changeValue=='М'){              for (i = 1; i < 6; i++) {document.getElementById('spisok').childNodes[i].style.display='';                   }          }                         }        if (document.getElementById('option').value=='city'){        if(changeValue=='Ленина,3'){ document.getElementById('spisok').childNodes[1].style.display='';                 }          if(changeValue=='Пушкина,12'){ document.getElementById('spisok').childNodes[2].style.display='';                 }          if(changeValue=='Гоголя,1'){ document.getElementById('spisok').childNodes[3].style.display='';                 }          if(changeValue=='Баумана,32'){ document.getElementById('spisok').childNodes[4].style.display='';                 }          if(changeValue=='1 июля,3'){ document.getElementById('spisok').childNodes[5].style.display='';                 }        }        if (document.getElementById('option').value=='sr'){        if(changeValue=='3'){ document.getElementById('spisok').childNodes[1].style.display='';                 }          if(changeValue=='3,4'){ document.getElementById('spisok').childNodes[2].style.display='';                 }          if(changeValue=='4'){ document.getElementById('spisok').childNodes[3].style.display='';                 }          if(changeValue=='4,2'){ document.getElementById('spisok').childNodes[4].style.display='';                 }          if(changeValue=='3,4'){ document.getElementById('spisok').childNodes[5].style.display='';                 }         }        }        else{        for (i = 1; i < 6; i++) { document.getElementById('spisok').childNodes[i].style.display='';      }        }                          }                </script>  </body></html> 

 


 

SSI: (распаковать в .../home/)

zad1 - 1 задание

zad2 - 2 ззадание

threepart - 3 задание

 

SSI
home.rar
Заархивированные данные 3.5 KB

13 и 15 лабораторные (xml  и ajax)

 

13 и 15
home1.rar
Заархивированные данные 8.8 KB

eTXT