Daily Archives: 14.12.2015

JS. Некоторые примеры работы с DOM

Posted on 14.12.2015 by Stanislav_Panteleev

В данном примере 3 кнопки – возврат к исходному контенту тега div, замена контента и замена атрибутов элемента HTML (меняется цвет элемента HTML) 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>some examples with DOM</title>

	</head>

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

	</body>
</html>

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

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

<head>

<title>some examples with DOM</title>

</head>

<body>

<button id="initialsettings">initialsettings</button>

<button id="changecontent">changecontent</button>

<button id="changeattributes">changeattributes</button>

</body>

</html>

somescript.js

/**
 * @author Panteleev Stas
 */

function initialsettings1(){
document.getElementById('divid').innerHTML='Some content in div';
}

function changecontent(){
document.getElementById('divid').innerHTML=prompt('Enter new content','');
}

function changeattributes(){
document.getElementById('divid').setAttribute("style","color:red");

}

document.getElementById('initialsettings').onclick=function(){ initialsettings1();};
document.getElementById('changecontent').onclick=function(){ changecontent();};
document.getElementById('changeattributes').onclick=function(){ changeattributes();};

/**

* @author Panteleev Stas

function initialsettings1(){

document.getElementById('divid').innerHTML='Some content in div';

}

function changecontent(){

document.getElementById('divid').innerHTML=prompt('Enter new content','');

}

function changeattributes(){

document.getElementById('divid').setAttribute("style","color:red");

}

document.getElementById('initialsettings').onclick=function(){ initialsettings1();};

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

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

Posted in Без рубрики | 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

Daily Archives: 14.12.2015

JS. Некоторые примеры работы с DOM

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

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

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

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

MY PROJECTS

Recent Posts

Categories