Category Archives: javascript

JS. setTimeout. setInterval Вызов функций с задержкой и интервалом

Posted on 15.12.2015 by Stanislav_Panteleev

Демонстрация методов setTimeout и setInterval Main.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<title>main</title>

	</head>

	<body>

<button id="SetInterval">SetInterval</button>
<button id="SetTimeout">SetTimeout</button>

<script src="EventHandler.js"></script>
<hr>
<div id="mydiv"> </div>
	</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

</head>

<body>

<button id="SetInterval">SetInterval</button>

<button id="SetTimeout">SetTimeout</button>

<hr>

</body>

</html>

EventHandler.js

/**
 * @author Stas
 */

var time; var ON;

function CountDown(){
    if (ON==true){ 
	document.getElementById('mydiv').innerHTML=time+' seconds left';
	if (time!==0){time=time-1;} else
	if (time===0)
	{document.getElementById('mydiv').innerHTML='time is over'; ON=false;}
}
};


function setIntervalDemo(){

time=prompt('What is delay in seconds?','2'); 
ON=true;
setInterval(CountDown,1000);

}



function WriteToDiv(){
document.getElementById('mydiv').innerHTML=
document.getElementById('mydiv').innerHTML+' Its Ready now! Its setTimeoutDemo';
}




function setTimeoutDemo(){

document.getElementById('mydiv').innerHTML='';
time=prompt('What is delay in seconds?','2'); 
document.getElementById('mydiv').innerHTML='Wait... for '+time+' seconds...';
setTimeout(WriteToDiv,time*1000);
//location.reload();
	
}


document.getElementById('SetInterval').onclick=function(){setIntervalDemo();};
document.getElementById('SetTimeout').onclick=function(){setTimeoutDemo();};

/**

* @author Stas

var time; var ON;

function CountDown(){

if (ON==true){

document.getElementById('mydiv').innerHTML=time+' seconds left';

if (time!==0){time=time-1;} else

if (time===0)

{document.getElementById('mydiv').innerHTML='time is over'; ON=false;}

}

};

function setIntervalDemo(){

time=prompt('What is delay in seconds?','2');

ON=true;

setInterval(CountDown,1000);

}

function WriteToDiv(){

document.getElementById('mydiv').innerHTML=

document.getElementById('mydiv').innerHTML+' Its Ready now! Its setTimeoutDemo';

}

function setTimeoutDemo(){

document.getElementById('mydiv').innerHTML='';

time=prompt('What is delay in seconds?','2');

document.getElementById('mydiv').innerHTML='Wait... for '+time+' seconds...';

setTimeout(WriteToDiv,time*1000);

//location.reload();

}

document.getElementById('SetInterval').onclick=function(){setIntervalDemo();};

document.getElementById('SetTimeout').onclick=function(){setTimeoutDemo();};

Posted in javascript, Без рубрики | Comments Off

JS. Обработка некоторых событий. Простой пример

Posted on 15.12.2015 by Stanislav_Panteleev

Файл Main.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<title>main</title>

	</head>

	<body>

<button id="ClickEvent">ClickEvent</button>
<button id="MouseMove">MouseMove</button>
<script src="EventHandler.js"></script>
<hr>
<div id="mydiv"> </div>
	</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

</head>

<body>

<button id="ClickEvent">ClickEvent</button>

<button id="MouseMove">MouseMove</button>

<hr>

</body>

</html>

Файл EventHandler.js

/**
 * @author Stas
 */

var SwitchOn=true;

//Функция для обработки события onclick
function MyClick(){
 if (SwitchOn==true){
 	SwitchOn=false; 	
	document.getElementById('mydiv').innerHTML='This is Text after you clicked';
	}
	else
	{   SwitchOn=true;
		document.getElementById('mydiv').innerHTML='Another Text after your clicked';}
}

//Функция для обработки события onmousemove
function MyMouseMove(){
	 	
	document.getElementById('mydiv').innerHTML='This is mouse move Text';

}

//Функция для обработки события window.onload - сразу после загрузки
//Довольно популярный обработчик и часто называется именно init...
function init(){
	document.getElementById('mydiv').innerHTML='init function on load window has worked correctly';
	
}


//Назначаем обработчики через присваивание
document.getElementById('ClickEvent').onclick=MyClick;
document.getElementById('MouseMove').onmousemove=MyMouseMove;
window.onload=init;

/**
// ДРУГОЙ ВАРИАНТ. Назначаем обработчики через анонимные функции
document.getElementById('ClickEvent').onclick=function(){MyClick();};

document.getElementById('MouseMove').onmousemove=function(){MyMouseMove();};

window.onload=function(){init();};
*/

/**

* @author Stas

var SwitchOn=true;

//Функция для обработки события onclick

function MyClick(){

if (SwitchOn==true){

SwitchOn=false;

document.getElementById('mydiv').innerHTML='This is Text after you clicked';

}

else

{ SwitchOn=true;

document.getElementById('mydiv').innerHTML='Another Text after your clicked';}

}

//Функция для обработки события onmousemove

function MyMouseMove(){

document.getElementById('mydiv').innerHTML='This is mouse move Text';

}

//Функция для обработки события window.onload - сразу после загрузки

//Довольно популярный обработчик и часто называется именно init...

function init(){

document.getElementById('mydiv').innerHTML='init function on load window has worked correctly';

}

//Назначаем обработчики через присваивание

document.getElementById('ClickEvent').onclick=MyClick;

document.getElementById('MouseMove').onmousemove=MyMouseMove;

window.onload=init;

/**

// ДРУГОЙ ВАРИАНТ. Назначаем обработчики через анонимные функции

document.getElementById('ClickEvent').onclick=function(){MyClick();};

document.getElementById('MouseMove').onmousemove=function(){MyMouseMove();};

window.onload=function(){init();};

Как узнать какие обработчики у элементов? Я пользуюсь на данный момент Aptana Studio 3 – довольно хорошая IDE. Приведу пример, как можно посмотреть какие обработчики есть у элементов? Например, нам нужен обработчик для … Continue reading →

Posted in javascript | Comments Off

JS. Как добавить информацию на странице без перезагрузки?

Posted on 14.12.2015 by Stanislav_Panteleev

Создаем на сервере 2 файла main.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<title>main</title>

	</head>

	<body>
	
	<button id="mybuttonid">Please press me</button>
	<!--ссылку на скрипт надо ставить после кнопки -->
	<script src="somescript.js"></script> 	
	<div id="divid"><hr></div>

	</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

</head>

<body>

<button id="mybuttonid">Please press me</button>

</body>

</html>

somescript.js

function myfunction(){
	 
document.getElementById('divid').innerHTML=document.getElementById('divid').innerHTML+
'some content added to the page below'+'<br>';
}

document.getElementById('mybuttonid').onclick=function(){ myfunction();};

function myfunction(){

document.getElementById('divid').innerHTML=document.getElementById('divid').innerHTML+

'some content added to the page below'+'<br>';

}

document.getElementById('mybuttonid').onclick=function(){ myfunction();};

Далее тестируем… При открытии main.html жмем на кнопку…

Posted in javascript | Comments Off

Как вывести все свойства объекта на страницу?

Posted on 14.12.2015 by Stanislav_Panteleev

Пример создания простого объекта во внешнем JS файле и вызов его по кнопке Файл main.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<title>ObjectsExamle</title>
	</head>
	<body>

<button id="MyButtonID">Start</button>
<script src="objects.js"></script>

	</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>ObjectsExamle</title>

</head>

<body>

<button id="MyButtonID">Start</button>

</body>

</html>

Файл objects.js

//Создание простого объекта внутри функции

function CreateFiat(){

 var fiat={
	make:"Fiat",
	model:"500",
	year:1957,
	color:"Medium Blue",
	passengers:2,
	convertible:false,
	mileage:88000,
	started:false,
//Далее пошли методы объекта
	start:function(){
		this.started=true; 
// слово this необходимо, потому что мы вызываем свойство started оъекта fiat	
	},
	stop:function(){
		this.started=false;
	},
	drive:function(){
		if (this.started==true){alert('zoom zoom');}
		else if (this.started==false){alert('You need to start an engine');}
	}
};

//Выводим свойства и методы объекта
for (var prop in fiat){document.write(prop+':'+fiat[prop]+'<br>');}
	
}

// Ставим обработчик на кнопку, чтобы скрипт срабатывал только при нажатии
document.getElementById('MyButtonID').onclick=function(){CreateFiat();};

//Создание простого объекта внутри функции

function CreateFiat(){

var fiat={

make:"Fiat",

model:"500",

year:1957,

color:"Medium Blue",

passengers:2,

convertible:false,

mileage:88000,

started:false,

//Далее пошли методы объекта

start:function(){

this.started=true;

// слово this необходимо, потому что мы вызываем свойство started оъекта fiat

stop:function(){

this.started=false;

drive:function(){

if (this.started==true){alert('zoom zoom');}

else if (this.started==false){alert('You need to start an engine');}

}

};

//Выводим свойства и методы объекта

for (var prop in fiat){document.write(prop+':'+fiat[prop]+'<br>');}

}

// Ставим обработчик на кнопку, чтобы скрипт срабатывал только при нажатии

document.getElementById('MyButtonID').onclick=function(){CreateFiat();};

Posted in javascript | Comments Off

JS. Объекты. Создание простого объекта и вызов по кнопке из внешнего файла

Posted on 14.12.2015 by Stanislav_Panteleev

Пример создания простого объекта во внешнем JS файле и вызов его по кнопке Файл main.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<title>ObjectsExamle</title>
	</head>
	<body>

<button id="MyButtonID">Start</button>
<script src="objects.js"></script>

	</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>ObjectsExamle</title>

</head>

<body>

<button id="MyButtonID">Start</button>

</body>

</html>

Файл objects.js

//Создание простого объекта внутри функции

function CreateFiat(){

 var fiat={
	make:"Fiat",
	model:"500",
	year:1957,
	color:"Medium Blue",
	passengers:2,
	convertible:false,
	mileage:88000,
	started:false,
//Далее пошли методы объекта
	start:function(){
		this.started=true; 
// слово this необходимо, потому что мы вызываем свойство started оъекта fiat	
	},
	stop:function(){
		this.started=false;
	},
	drive:function(){
		if (this.started==true){alert('zoom zoom');}
		else if (this.started==false){alert('You need to start an engine');}
	}
};

//Тестируем методы объекта
fiat.start();
fiat.drive();
	
}

// Ставим обработчик на кнопку, чтобы скрипт срабатывал только при нажатии
document.getElementById('MyButtonID').onclick=function(){CreateFiat();};

//Создание простого объекта внутри функции

function CreateFiat(){

var fiat={

make:"Fiat",

model:"500",

year:1957,

color:"Medium Blue",

passengers:2,

convertible:false,

mileage:88000,

started:false,

//Далее пошли методы объекта

start:function(){

this.started=true;

// слово this необходимо, потому что мы вызываем свойство started оъекта fiat

stop:function(){

this.started=false;

drive:function(){

if (this.started==true){alert('zoom zoom');}

else if (this.started==false){alert('You need to start an engine');}

}

};

//Тестируем методы объекта

fiat.start();

fiat.drive();

}

// Ставим обработчик на кнопку, чтобы скрипт срабатывал только при нажатии

document.getElementById('MyButtonID').onclick=function(){CreateFiat();};

Если все нормально – должно выскочить сообщение zoom-zoom

Posted in javascript | Comments Off

JS. Как запустить JS из внешнего файла по кнопке?

Posted on 14.12.2015 by Stanislav_Panteleev

Простой практический вопрос о том как запустить JS из внешнего файла по кнопке. Пусть у нас есть основной HTML файл с кнопкой, с определенным ID

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<title>ObjectsExamle</title>
	</head>

	<body>
<button id="MyButtonID">Start</button>
<script src="SomeExternalJSFile.js"></script>
</script>

	</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>ObjectsExamle</title>

</head>

<body>

<button id="MyButtonID">Start</button>

</script>

</body>

</html>

Пусть у нас есть некоторый скрипт во внешнем файле SomeExternalJSFile.js, в котором мы будем искать … Continue reading →

Posted in javascript | Comments Off

JS. Массивы. Сортировка

Posted on 13.12.2015 by Stanislav_Panteleev

Сортировка чисел по возрастанию и убыванию

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>ArraySort</title>
		<meta name="author" content="Stas" />
		<!-- Date: 2015-12-13 -->
	</head>
	<body>
<script>
document.write('<p>Below you can see array of random numbers</p>');


var array=[]; var i; 


for (i=0;i<10;i++){array[i]=Math.floor(Math.random()*9);document.write(array[i]+'<br>'); }



function AscSort(){

function AscCompareNumeric(a, b) {
  if (a > b) return 1;
  if (a < b) return -1;
}

document.write('<p>Now it is Sorted!</p>');		
	array.sort(AscCompareNumeric);
	for (i=0;i<10;i++){document.write(array[i]+'<br>'); }
}


function DescSort(){

function DescCompareNumeric(a, b) {
  if (a > b) return -1;
  if (a < b) return +1;
}

document.write('<p>Now it is Sorted!</p>');	
	array.sort(DescCompareNumeric);
	for (i=0;i<10;i++){document.write(array[i]+'<br>'); }
}

</script>

<button onclick="AscSort()">AscSort (сортировка по возрастанию)</button>
<button onclick="DescSort()">DescSort (сортировка по убыванию)</button>
	</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<head>

<title>ArraySort</title>

</head>

<body>

document.write('<p>Below you can see array of random numbers</p>');

var array=[]; var i;

for (i=0;i<10;i++){array[i]=Math.floor(Math.random()*9);document.write(array[i]+'<br>'); }

function AscSort(){

function AscCompareNumeric(a, b) {

if (a > b) return 1;

if (a < b) return -1;

}

document.write('<p>Now it is Sorted!</p>');

array.sort(AscCompareNumeric);

for (i=0;i<10;i++){document.write(array[i]+'<br>'); }

}

function DescSort(){

function DescCompareNumeric(a, b) {

if (a > b) return -1;

if (a < b) return +1;

}

document.write('<p>Now it is Sorted!</p>');

array.sort(DescCompareNumeric);

for (i=0;i<10;i++){document.write(array[i]+'<br>'); }

}

</script>

<button onclick="AscSort()">AscSort (сортировка по возрастанию)</button>

<button onclick="DescSort()">DescSort (сортировка по убыванию)</button>

</body>

</html>

Posted in javascript | Comments Off

JS. Морской бой. Упрощенная версия

Posted on 12.12.2015 by Stanislav_Panteleev

Восстановил пример со своими вариациями из книги издательства O’Reilly Пример достаточно тривиальный, но мне, как человеку, который закрепляет свои навыки после изучения теории – самое то. На сервере издательства не нашел готового варианта упрощенной версии Морского Боя, поэтому пришлось поработать … Continue reading →

Posted in javascript, Без рубрики | Comments Off

JS. Пишем в консоль

Posted on 12.12.2015 by Stanislav_Panteleev

Пишем в консоль…

<html>
<head>
<!--Включаем юникод кодировку, чтобы программа понимала русский -->
<meta name="http-equiv" content="Content-type:text/html" charset="UTF-8">
</head>

<body>

<script>
document.write('Open console. F12');
var message='This is message for log. Believe?';
console.log(message);
</script>

</body>	
</html>

<html>

<head>

</head>

<body>

document.write('Open console. F12');

var message='This is message for log. Believe?';

console.log(message);

</script>

</body>

</html>

Posted in javascript, Без рубрики | Comments Off

JS. Как запустить JS под WordPress?

Posted on 12.12.2015 by Stanislav_Panteleev

Известно, что WP блокирует запуск JS в постах – оно и понятно и правильно. Но вот что делать тем, кому JS на своих страницах все-таки необходим? В сети много примеров как это обойти – некоторые довольно сложные – нужно копаться … Continue reading →

Posted in javascript | Comments Off

Category Archives: javascript

JS. setTimeout. setInterval Вызов функций с задержкой и интервалом

JS. Обработка некоторых событий. Простой пример

JS. Как добавить информацию на странице без перезагрузки?

Как вывести все свойства объекта на страницу?

JS. Объекты. Создание простого объекта и вызов по кнопке из внешнего файла

JS. Как запустить JS из внешнего файла по кнопке?

JS. Массивы. Сортировка

JS. Морской бой. Упрощенная версия

JS. Пишем в консоль

JS. Как запустить JS под WordPress?

MY PROJECTS

Recent Posts

Categories