C миру по нитке: киньте че-нить интересное и несложное

[Never]

Нужны интересные примеры на JS. Желательно несложные, так как надо давать их школьникам. Мне тут дали вести у них JS, а практических примерчиков негусто или они неприкольные.

[RXL]

Наташ, у тебя какой-то материал (не код - описательный) уже есть или все надо с нуля делать?

[Never]

ну, план учебный есть, т.е. темы к изучению

[RXL]

Можешь этот планчик кратко изложить, чтобы было понятно, какие примеры там нужны?

[Never]

ага, конечно. Изложу. Чуть позже. Продохнуть до пятницы не могу)

[Never]

1. Циклы и массивы.Функции.
2. Управление содержимым элементов: document.write(), innerText, innerHTML.
3. Управление стилями элементов web-страницы. Управление рисунками и ролловерами. Замена атрибута src.
4. Объект event и его свойства. Практика: Отслеживание положения указателя мыши. Практика: создание всплывающей подсказки с произвольным форматированием.
5. Обработчики событий по умолчанию (стандартные обработчики), запрет вызова стандартного обработчика. Задержки и интервалы. Периодический вызов функций. Практика: бегущая строка.
6. Объект Date. Практика: вывод даты в привычном для пользователя виде. Практика: определение дня недели по введенной дате. Практика: электронные часы.
7. Статические фильтры. Изменение фильтра в результате события. Эффект динамики при помощи периодического вызова функций.
8. Динамические фильтры.
9. Перетаскивание элементов (drag’n’drop)
10. Объект Screen. Свойства экрана. Перемещение по страницам: объекты Location и History
11. Объект Window. Открытие, перемещение и изменение размера окон.

ну собственно- это основное.

[RXL]

1.1. массивы

1.1.1. Создание и инициализация.

Код:

// Древняя и самая формально правильная форма
array = new Array;

// Классическая форма создания массива
array1 = Array(); // Именно с большой буквы!
array2 = Array(1, 2, 3, 4, 5);

// Более удобная форма
array3 = [ 1, 2, 3, 4, 5 ];

1.1.2. Определение размера.

Код:

count = array.length();

1.1.3. Доступ к элементам.

Код:

value = array[0];

1.1.4. Массивы - объекты.

Код:

array = Array();
array['name'] = 'Иванов'; // Индексация строкой.

value = array['name']; // Доступ к значению как к элементу массива.
value = array.name; // Доступ к значению как к члену объекта.

1.2. Циклы. Перебор значений массивов.

1.2.1. while

Код:

array = Array(0, 1, 2, 3, 4);
index = 0;

while (index < 10)
{
    array[index] = 0;
    index++; // Или: index = index + 1;
}

1.2.2. Классический for из Си. Последовательный перебор значений массива по числовому индексу.

Код:

array = Array(0, 1, 2, 3, 4);

for (index = 0; index < 5; index++)
{
    array[index] = 0;
}

1.2.3. for - перебор всех индексов массива

Код:

array = Array(0, 1, 2, 3, 4);
array['name'] = 'Иванов';

for (index in array)
{
    array[index] = 0;
}

1.3. Функции.

Код:

function sum(value1, value2) // Классика жанра.
{
    return value1 + value2;
}

value = sum(1, 2);

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

Код:

var value; // Объявление переменной для будущей инициализации. Значение ее - null.

var value2 = 0; // Объявление с инициализацией.

var array = Array(); // Объявление пустого массива.
// Прежде чем в массив помещать значения, его нужно объявить массивом.

var array = Array(1, 2, 3); // Объявление массива с инициализацией.

Также дать понятие видимости.

Код:

var global_var;

function my_func(arg1, arg2)
{
    var local_var;

    global_var = arg1;
    local_var = arg2;
}

Также, думаю, полезно сказать, что все глобальные переменные на самом деле являются членами объекта window.

Код:

var new_var = 1; // Новая переменная.

new_var++; // Классический доступ.
window.new_var++; //  Альтернативный доступ.

Для чего может пригодится: совпадение имен локальной и глобальной переменных.

Код:

var value = 2;

function my_func(value)
{
    window.value = value;
}

[RXL]

2. Управление содержимым элементов: document.write(), innerText, innerHTML.

Это методы объектов. Первый - только для document, остальные - для любого HTML-объекта.
Все эти способы добавляют что-либо на страницу.

Вообще то, тут сперва надо бы дать понятие дерева объектов и DOM. А может это сложновато сразу...

2.1. document.write()

Пишет в позицию "потока" текущего окна.

Код:

Код:

<div>
<script type="text/javascript>

document.write('some text');

</script>
</div>

Результат:

Код:

<div>
some text
</div>

Код:

Код:

<div>
1
<script type="text/javascript>

function my_func()
{
    document.write('some text');
}
</script>
</div>
<div>
2
<script type="text/javascript>

my_func();

</script>
</div>

Результат:

Код:

<div>
1
</div>
<div>
2
some text
</div>

2.2. Методы innerText и innerHTML.

Сперва надо получить ссылку на объект, в который выводить.
Заклинаю: не давай им способ из M$ DOM - через массив document.all - это очень плохо.
Надо использовать современный W3C DOM - через поиск элемента.

Код:

<div id="id1">1 2 3</div>
<script type="text/javascript">

// Сперва получаем ссылку на объект.
var obj = document.getElementById('id1');

// Замещаем весь нижележащий HTML-код на свой.
obj.innerHTML = '<b>1</b> <i>2</i> <u>3</u>';
</script>

Отличие innerText от innerHTML в том, что первый помещает в нутрь элемента просто текст, а второй - HTML-код. Т.е. в первом случае нет попытки интерпретировать теги и сущности.

[RXL]

Что имеется в виду под "ролловер"?

[Never]

Ром. Ты не понял. Я не просила теорию. Я просила интересные примерчики прикольные на то, чтобы это отработать. Которые были бы хорошо восприняты школьниками. Именно забавные, любопытные и т.п.

[RXL]

Подумаю.

Нужно "готовые к исполнению"? Т.е. готовые страницы с примерами.

[Never]

желательно)

[RXL]

Чую, что это тянет на продолжение
https://club.shelek.ru/view.php?id=3

[Never]

ой, мама! Только крылья расправишь, как сразу найдут во что натыкать носом)))
Рома, надо ли тебя понимать как "я тебе практику, а ты сайту теоретические уроки"?

Да, кстати, если не ошибаюсь, ролловер- это любой объект, который изменяет внешность или поведение при наведении на него мыши.

[RXL]

Да не - я о том, что коли такой материал мутить, то и пользу из него выжать не помешает
Чай не 2-3 вопроса - целый курс.

Загвоздка: что интересно школьникам? Я что-то давно в школе не был - по забыл, однако...
Т.е., в какую сторону уклон? Понятно, что это должно быть цензурно и прилично. Или нужно что-то типичное, как-то - Array('яблоко', 'груша', 'баян') ?

[Never]

та нет. Груши и бояны я и сама придумать могу))По-моему мы зашли в тупик. Объяснить тебе, что я хочу,можно только приведя пример. Но для этого пример надо найти)
"Чтобы продать что-то ненужное надо сначала купить что-то ненужное" (с)
Скажем,хорошо бы что-то вроде остеровских учебников) Я знаю. Я загнула. Но хотя бы в таком направлении. Если массив, так чтобыс его помощтю делалось что-то показательное, пусть и совершенно бесполезное с точки зрения учения программированию.
ну например,в голову пришло, помню, когда меня пытались научить Сишке, было такое задание,задать массивами ноты. Тон, длительность. И чтобы это потом сыграло. У всех был дикий энтузиазм и восторг ( а мы уже были вполне взрослые,заметьте)) А препод наш сказал, что это упражнение нам, как прогерам ни фига не даст. Но сколько было счастья!

[RXL]

Т.е., чтобы было интересно нормальным людям

[Sla]

где-то спер

Код:

<html>
  <head>
    <title>Пятнашки</title>
    <script language="javascript">
<!--
      str_vict="Вы это сделали";
      function zamen(n){
        var n2 ;
        for ( var i=0; 16>i; ++i ){
          if (document.images[i].name=="16"){n2=i;}
        }
       if ((n-n2==4) || (n2-n==4) || ((n-n2==1)&&(Math.floor(n/4)==Math.floor(n2/4))) || ((n2-n==1)&&(Math.floor(n/4)==Math.floor(n2/4))) ){
          document.images[n2].src = document.images[n].name+".gif";
          document.i ages[n].src = "16.gif";
          document.images[n2].name = document.images[n].name;
          document.images[n].name = "16";
       }
       n2=0
       for ( var i=0; 13>i; ++i ){
        if (document.images[i].name==i+1){n2=++n2;}
       }
       if ((n2==13) && (document.images[15].name==16)) {alert(str_vict);zan();}
      }
      function zan(){
        var p1 = new Image();
        var p2 = new Image();
        var imgs_ = new Image();
        var name_;
        for ( var i=0; 50>i; ++i ){
          p1 = Math.floor(Math.random()*16);
          p2 = Math.floor(Math.random()*16);
          imgs_ = document.images[p1].src;
          document.images[p1].src = document.images[p2].src;
          document.images[p2].src = imgs_;
          name_ = document.images[p1].name;
          document.images[p1].name = document.images[p2].name;
          document.images[p2].name = name_;
        }
      }
//-->
    </script>
  </head>
  <body>
    <table border="2" align="center">
     <tr>
      <td>
       <img src="1.gif" onclick="zamen(0)" name="1" width="50" height="50">
       <img src="2.gif" onclick="zamen(1)" name="2" width="50" height="50">
       <img src="3.gif" onclick="zamen(2)" name="3" width="50" height="50">
       <img src="4.gif" onclick="zamen(3)" name="4" width="50" height="50">
       <br>
       <img src="5.gif" onclick="zamen(4)" name="5" width="50" height="50">
       <img src="6.gif" onclick="zamen(5)" name="6" width="50" height="50">
       <img src="7.gif" onclick="zamen(6)" name="7" width="50" height="50">
       <img src="8.gif" onclick="zamen(7)" name="8" width="50" height="50">
       <br>
       <img src="9.gif" onclick="zamen(8)" name="9" width="50" height="50">
       <img src="10.gif" onclick="zamen(9)" name="10" width="50" height="50">
       <img src="11.gif" onclick="zamen(10)" name="11" width="50" height="50">
       <img src="12.gif" onclick="zamen(11)" name="12" width="50" height="50">
       <br>
       <img src="13.gif" onclick="zamen(12)" name="13" width="50" height="50">
       <img src="14.gif" onclick="zamen(13)" name="14" width="50" height="50">
       <img src="15.gif" onclick="zamen(14)" name="15" width="50" height="50">
       <img src="16.gif" onclick="zamen(15)" name="16" width="50" height="50">
      <br>
     </td>
    </tr>
   </table>
   <br>
   <center>
     <input onclick="zan()" style="font-weight: bold" type="button" value=" Новая игра ">
   </center>
  </body>
</html>

по титлу понятно что делает

кстати у нее ошибка в алгоритме


upd по просьбе уважаемых админов  - переформатировал

[Never]

Отлично! ) Первый пример пришел, спасибо, Сла. Надеюсь будет продолжение)

[RXL]

Sla, Never, а какие он пункты покрывает?

[Sla]

циклы, массивы

[RXL]

Буду знать, чтоб не пересекаться.
А вообще, текст надо правильно сформатировать, чтобы читался лучше и не показывал пример, как не надо делать.

[Sla]

я скопипастил - ленивый я

[RXL]

n2 = ++n2;

Прусь...

[Sla]

м-да... это контрольный выстрел

[RXL]

Это пипец, а не пятнашки. Картинок нет - не понятно, как выглядеть будет, но для обучения я бы такое не рекомендовал - надо переписывать.

Сформатировал и исправил несуразности, но код все равно не рабочий.

Код:

<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=windows-1251">
		<title>Пятнашки</title>
		<script type="text/javascript">

function zamen(n)
{
	var n2 ;

	for (var i = 0; i < 16; i++)
		if (document.images[i].name == '16')
			n2 = i;

	if ((Math.abs(n - n2) == 4) || ((Math.abs(n - n2) == 1) && (Math.floor(n / 4) == Math.floor(n2 / 4))))
	{
		document.images[n2].src = document.images[n].name + '.gif';
		document.images[n].src = '16.gif';
		document.images[n2].name = document.images[n].name;
		document.images[n].name = '16';
	}

	n2 = 0;

	for (var i = 0; i < 13; i++)
		if (document.images[i].name == (i + 1))
			n2++;

	if ((n2 == 13) && (document.images[15].name == 16))
	{
		alert("Вы это сделали");
		zan();
	}
}

function zan()
{
	var p1 = new Image();
	var p2 = new Image();
	var imgs_ = new Image();
	var name_;

	for (var i = 0; i < 50; i++)
	{
		p1 = Math.floor(Math.random() * 16);
		p2 = Math.floor(Math.random() * 16);

		imgs_ = document.images[p1].src;
		document.images[p1].src = document.images[p2].src;
		document.images[p2].src = imgs_;

		name_ = document.images[p1].name;
		document.images[p1].name = document.images[p2].name;
		document.images[p2].name = name_;
	}
}

		</script>
	</head>
	<body>
		<center>
			<table border="2" align="center">
				<tr>
					<td>
						<img src="1.gif" onclick="zamen(0);" name="1" width="50" height="50">
						<img src="2.gif" onclick="zamen(1);" name="2" width="50" height="50">
						<img src="3.gif" onclick="zamen(2);" name="3" width="50" height="50">
						<img src="4.gif" onclick="zamen(3);" name="4" width="50" height="50">
						<br>
						<img src="5.gif" onclick="zamen(4);" name="5" width="50" height="50">
						<img src="6.gif" onclick="zamen(5);" name="6" width="50" height="50">
						<img src="7.gif" onclick="zamen(6);" name="7" width="50" height="50">
						<img src="8.gif" onclick="zamen(7);" name="8" width="50" height="50">
						<br>
						<img src="9.gif" onclick="zamen(8);" name="9" width="50" height="50">
						<img src="10.gif" onclick="zamen(9);" name="10" width="50" height="50">
						<img src="11.gif" onclick="zamen(10);" name="11" width="50" height="50">
						<img src="12.gif" onclick="zamen(11);" name="12" width="50" height="50">
						<br>
						<img src="13.gif" onclick="zamen(12);" name="13" width="50" height="50">
						<img src="14.gif" onclick="zamen(13);" name="14" width="50" height="50">
						<img src="15.gif" onclick="zamen(14);" name="15" width="50" height="50">
						<img src="16.gif" onclick="zamen(15);" name="16" width="50" height="50">
						<br>
					</td>
				</tr>
			</table>
			<br>
			<form>
				<input type="button" value="Новая игра" onclick="zan();" style="font-weight: bold">
			</form>
		</center>
	</body>
</html>

[Sla]

Рома! Не поверишь! Работатет! Ща картинки поищу
h**p://slasoft.kharkov.ua/15/15.html
ps я его еще и валидным сделал

[RXL]

Sla, шайтан

Все понятно: т.к. картинок у меня не было, а первая "раздача" совпадает с условием конца игры, то нажимая на любую финку я сразу получал конец игры. Потому и решил, что там есть изъян.

[Finch]

Вот скрипт формочки кадендаря. Довольно сырой, но рабочий

Код:

<html>
<head>
   <TITLE>Calendar</TITLE>
   <script language="JavaScript" type="text/javascript">
      
      function IsLeap(year)
      {
         if ((year % 4 !=0) || ((year % 100 == 0) && (year % 400 != 0))) return false;
         else return true;
      }
      
      function MaxDay(month, year)
      {
         var days = [31,28,31,30,31,30,31,31,30,31,30,31];
         var res=0;
         if ((month>=1) && (month <=12)) 
         {
            res=days[month-1];
            if ((month == 2) && IsLeap(year)) res++;
         }
         return res;
      }
      
      function CalculateFirstDay(month, year)
      {
         var days =     [31, 28, 31, 30,  31,  30,  31,  31,  30,  31,  30,  31];
         var daycount = [ 0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334];
         var pref= Math.abs(year % 400);

         // Count of day for First of January
         var countDay=5+pref*365;
         for (var i=0; i<pref; i++)
         {
            if (IsLeap(i)) countDay++;
         }
         countDay+=daycount[month-1];
         if (IsLeap(year) && (month >2) ) countDay++;
         var res = countDay % 7;
         return res;
      }
      
      function SetInput(ref_str, ref_input, day, month, year)
      {
         var div = document.getElementById(ref_str);
         var txt='';
            if (month<10) txt="0";
            txt+=month+"/";
            if (day<10) txt+="0";
            txt+=day +"/" + year;
            document.getElementById(ref_input).value=txt;
            div.style.display = "none";
      }
      
      function Fill(ref_str,month,year,ref_input)
      {
         var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
         var line=0;
         var day=1- CalculateFirstDay(month, year);
         var maxDay=MaxDay(month,year);
         var count=0;
         var index=0;
         var txt;
         var div = document.getElementById(ref_str);
         txt="<table border='1' cellpadding='2' cellspacing='0' class='tableTable'>";
         txt+="<tr><td colspan='4'style='border-right-width:0'>";
         txt+="<span align='left' class='cl'";
         txt+="onmousedown = Fill(";
         var tempMonth=month-1;
         var tempYear = year;
         if (tempMonth == 0) 
         {
            tempMonth=12;
            tempYear--;
         }
         txt+="'"+ref_str + "'," + tempMonth + ','+tempYear+',"'+ref_input+'");';
         txt+="><</span>";
         txt+="<span width='60%'>&nbsp;"+months[month-1]+"&nbsp;</span>";
         
         txt+="<span align='left' class='cl'";
         txt+="onmousedown = Fill(";
         tempMonth=month+1;
         tempYear = year;
         if (tempMonth == 13) 
         {
            tempMonth=1;
            tempYear++;
         }
         txt+="'"+ref_str + "'," + tempMonth + ','+tempYear+',"'+ref_input+'");';
         txt+=">></span>";
         txt+="</td><td colspan='3' style='border-left-width:0'>";
         txt+="<span align='right' class='cl' onmousedown='Fill(";
         txt+='"'+ref_str + '",' + month + "," + (year-1) + ',"'+ref_input +'"'+");'><</span>";
         txt+="<span align='right'>&nbsp;"+year+"&nbsp;</span>";
         txt+="<span align='right' class='cl' onmousedown='Fill(";
         txt+='"'+ref_str + '",'+month+"," + (year+1) +',"'+ref_input +'"'+ ");'>></span>";
         
         
         txt+="</td></tr>"
         txt+="<tr class='ceilTable'><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td><td>Sun</td></tr>";
         var stat=0;
         while (stat!=3)
         {
            if (count == 0) txt+="<tr>";
            txt += "<td align='right' valign = 'center'>";
            if ((day>=1) && (day<=maxDay))
            {
               txt +="<span class='cl' onmousedown='SetInput(";
               txt+='"' + ref_str + '","' +ref_input + '",' +day + "," + month + "," + year + ");'>";
               stat=1;
               txt+= day;
               txt += "</span>";
               if (day == maxDay) stat = 2;
            }
            else 
            {
               txt+="&nbsp;";
               if (day>1) stat=2;
            }
            txt+= "</td>";
            count ++;
            day++;
            if (count == 7)
            {
               if (stat==2) stat=3;
               txt+= "</tr>";
               count=0;
            }
         }
         txt+="</table>";
         div.innerHTML=txt;
                                
         
      }
      
      function ChangeDisplay(ref_str, ref_input)
      {
         var d = new Date();
         var days = [31,28,31,30,31,30,31,31,30,31,30,31];
         var year=d.getFullYear();
         var month=d.getMonth()+1;
         var leap=1;
         var date_parts = null;
         var inp = document.getElementById(ref_input);
         var date=inp.value;
         
         //US Long Date
         date_parts = date.match(/^(\d{1,2})[./-](\d{1,2})[./-](\d{4})$/);
         if (date_parts) 
         {
             month = Math.floor(date_parts[1]);
             year = Math.floor(date_parts[3]); 
         }
         var div = document.getElementById(ref_str);
         if (div.style.display == "none") 
         {
            div.style.display = "block";
            div.style.position="fixed";
            div.style.left= inp.style.left;
            var qt=12;
            div.style.top = inp.style.top+ inp.style.bottom;
            
            Fill(ref_str,month,year, ref_input);
         }
         else
         {
            div.style.display = "none";
            
         }
      }
   </script>
   <style>
      .cl
      {
        cursor: pointer;
         
      }
      .ceilTable
      {
         background: blue;
         color: white;
      }
      .tableTable
      {
        background:white;
      }
   </style>
</head>
<BODY>
   <span>&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="Inptext" readonly="true" value=""></span><span onmousedown ="ChangeDisplay('divCal','Inptext');" class="cl"><font color="blue"><u>V</u></font></span>
   <div id="divCal" style="display:none;z-index:1000;"></div>
   <div >
   
</div>
</BODY>
</html>

[Sla]

Практика: создание всплывающей подсказки с произвольным форматированием.

http://webmasters.by/articles/web-programming/72-create-simple-tooltips-with-css-and-jquery.html