Category Archives: javascript

ExtJS. Классы. Создание и использование класса, изменение свойств и методов экземпляра класса

Posted on 21.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" />

		<!--Подключение библиотеки ExtJS, CSS и нашего скрипта JS-->

<link rel="stylesheet" type="text/css" href="/ExtJS/www/Styles/theme-neptune/resources/theme-neptune-all.css">
<script type="text/javascript" src="/ExtJS/www/ext-all.js"></script>
<script type="text/javascript" src="App.js"></script>
		
	
		
		<title>Main</title>

	</head>

	<body>

	</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>

</body>

</html>

App.js

/**
 * @author Stas
 */

//Создание класса
Ext.define('AnyClassName.AnySubClass.AnySubSubClass.Etc',
// Определение свойств класса
  {name:'Stas',
  surname:'Panteleev',
  sex:'male',
  age:32,
// Определение методов класса
 		getname:function(){
 		alert('Имя '+this.name);
 		},
 		
 		getsurname:function(){
 		alert('Фамилия '+this.surname);
 		}
 }
);

//Создание экземпляра класса
var NewPerson=Ext.create('AnyClassName.AnySubClass.AnySubSubClass.Etc');
//Вызов методов класса
NewPerson.getname();
NewPerson.getsurname();

/**

* @author Stas

//Создание класса

Ext.define('AnyClassName.AnySubClass.AnySubSubClass.Etc',

// Определение свойств класса

{name:'Stas',

surname:'Panteleev',

sex:'male',

age:32,

// Определение методов класса

getname:function(){

alert('Имя '+this.name);

getsurname:function(){

alert('Фамилия '+this.surname);

}

);

//Создание экземпляра класса

var NewPerson=Ext.create('AnyClassName.AnySubClass.AnySubSubClass.Etc');

//Вызов методов класса

NewPerson.getname();

NewPerson.getsurname();

Как изменить свойства экземпляра класса?

//Создание экземпляра класса
var NewPerson=Ext.create('AnyClassName.AnySubClass.AnySubSubClass.Etc');

//Пример изменения свойства класса
NewPerson.name='Stan';

//Вызов методов класса
NewPerson.getname(); // покажет Stan, а не Stanislav
NewPerson.getsurname();

//Создание экземпляра класса

var NewPerson=Ext.create('AnyClassName.AnySubClass.AnySubSubClass.Etc');

//Пример изменения свойства класса

NewPerson.name='Stan';

//Вызов методов класса

NewPerson.getname(); // покажет Stan, а не Stanislav

NewPerson.getsurname();

По аналогии можно менять методы класса.

Posted in ExtJS, javascript | Comments Off

ExtJS. Первое приложение (Hello from ExtJS)

Posted on 18.12.2015 by Stanislav_Panteleev

Что такое ExtJS? Что такое ExtJS? Это довольно мощная библиотека компонентов под JavaScript, на момент написания статьи распространяется компанией Sencha! Последняя версия, опять же на момент написания статьи это 6 версия. Все дальнейшие эксперименты я буду проводить именно с 6 … Continue reading →

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

JS. Работа со свойствами и методами объектов

Posted on 16.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="showproperties">showproperties</button>
<button id="RedefineProperty">RedefineProperty</button>
<button id="AddNewProperty">AddNewProperty</button>
<button id="DeleteProperty">DeleteProperty</button>
<button id="AddMethod">AddMethod</button>
<button id="DeleteMethod">DeleteMethod</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="showproperties">showproperties</button>

<button id="RedefineProperty">RedefineProperty</button>

<button id="AddNewProperty">AddNewProperty</button>

<button id="DeleteProperty">DeleteProperty</button>

<button id="AddMethod">AddMethod</button>

<button id="DeleteMethod">DeleteMethod</button>

<hr>

</body>

</html>

EventHandler.js

/**
 * @author Stas
 */

//Стандартный конструктор объекта
function Dog(name,breed,weight){
	this.name=name;
	this.breed=breed;
	this.weight=weight;
	this.bark=function(){alert(this.name)+'says WOOF!';};
}

//Создаем объект
var fido=new Dog('Fido','Mixed',36);

//Показываем свойства в div
function showproperties(){

//Очистка div
document.getElementById('mydiv').innerHTML='';

	for (var p in fido){
document.getElementById('mydiv').innerHTML=
document.getElementById('mydiv').innerHTML+
p+':'+fido[p]+'<br>';
	}
};

//Добавление свойства
function AddNewProperty(){
	var NewPropertyName=prompt('Type the name of the new property','NewPropertyName');
    var NewPropertyValue=prompt('Type the value of the new property','NewPropertyValue');


for (p in fido){if (p==NewPropertyName){alert('Such Property Exists'); return;}

//
 else
{fido[NewPropertyName]=NewPropertyValue;}

}	
};

//Удаление свойства
function DeleteProperty(){
var DeletePropertyName=
prompt('Type the name of the deleting property','DeletePropertyName');

for (p in fido){if (p==DeletePropertyName)
{delete fido[DeletePropertyName];}
}

	
}

//Проверяем и переопределяем свойства
function RedefineProperty(){
	if (fido.hasOwnProperty('name')){fido.name=prompt('Give a new name','NewFido');};
	showproperties();
};

//Добавление метода
function AddMethod(){
fido.NewMethod=function(){alert('That is demo of new added method');};
showproperties();
fido.NewMethod();
		
}

//Удаление метода
function DeleteMethod(){
	if (fido.hasOwnProperty('NewMethod')){delete fido.NewMethod;};
	showproperties();
	
}

document.getElementById('showproperties').onclick=showproperties;
document.getElementById('RedefineProperty').onclick=RedefineProperty;
document.getElementById('AddNewProperty').onclick=AddNewProperty;
document.getElementById('DeleteProperty').onclick=DeleteProperty;
document.getElementById('AddMethod').onclick=AddMethod;
document.getElementById('DeleteMethod').onclick=DeleteMethod;

/**

* @author Stas

//Стандартный конструктор объекта

function Dog(name,breed,weight){

this.name=name;

this.breed=breed;

this.weight=weight;

this.bark=function(){alert(this.name)+'says WOOF!';};

}

//Создаем объект

var fido=new Dog('Fido','Mixed',36);

//Показываем свойства в div

function showproperties(){

//Очистка div

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

for (var p in fido){

document.getElementById('mydiv').innerHTML=

document.getElementById('mydiv').innerHTML+

p+':'+fido[p]+'<br>';

}

};

//Добавление свойства

function AddNewProperty(){

var NewPropertyName=prompt('Type the name of the new property','NewPropertyName');

var NewPropertyValue=prompt('Type the value of the new property','NewPropertyValue');

for (p in fido){if (p==NewPropertyName){alert('Such Property Exists'); return;}

else

{fido[NewPropertyName]=NewPropertyValue;}

}

};

//Удаление свойства

function DeleteProperty(){

var DeletePropertyName=

prompt('Type the name of the deleting property','DeletePropertyName');

for (p in fido){if (p==DeletePropertyName)

{delete fido[DeletePropertyName];}

}

//Проверяем и переопределяем свойства

function RedefineProperty(){

if (fido.hasOwnProperty('name')){fido.name=prompt('Give a new name','NewFido');};

showproperties();

};

//Добавление метода

function AddMethod(){

fido.NewMethod=function(){alert('That is demo of new added method');};

showproperties();

fido.NewMethod();

}

//Удаление метода

function DeleteMethod(){

if (fido.hasOwnProperty('NewMethod')){delete fido.NewMethod;};

showproperties();

}

document.getElementById('showproperties').onclick=showproperties;

document.getElementById('RedefineProperty').onclick=RedefineProperty;

document.getElementById('AddNewProperty').onclick=AddNewProperty;

document.getElementById('DeleteProperty').onclick=DeleteProperty;

document.getElementById('AddMethod').onclick=AddMethod;

document.getElementById('DeleteMethod').onclick=DeleteMethod;

Posted in javascript | Comments Off

JS. Прототипы – с чем их едят и как их создать?

Posted on 16.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="JustClick">JustClick</button>
<button id="Check Redefined Method">Check Redefined Method</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="JustClick">JustClick</button>

<button id="Check Redefined Method">Check Redefined Method</button>

<hr>

</body>

</html>

EventHandler.js

/**
 * @author Stas
 */

//Стандартный конструктор объекта
function Dog(name,breed,weight){
	this.name=name;
	this.breed=breed;
	this.weight=weight;
}

//Создаем прототип
Dog.prototype.species='Canine'; // Объявили свойство
//Теперь у всех объектов, созданных конструтором Dog будет это свойство

//Далее создаем методы
Dog.prototype.bark=function(){
	if (this.weight>25){
		alert(this.name+'says WOOF');
	} else{
		alert(this.name+'says YIP');
	}
};

Dog.prototype.run=function(){
	alert('Running.....');
};

Dog.prototype.wag=function(){alert('wag');};

// Создадим экземпляр объекта и проверим его свойства и методы
var fido=new Dog('Fido','Mixed',38); // Глобальная переменная.

function result(){
fido.run();
//Очистим div
document.getElementById('mydiv').innerHTML='';

//Перечислим свойства и методы
for (var prop in fido){
	document.getElementById('mydiv').innerHTML=
	document.getElementById('mydiv').innerHTML+
	prop+':'+fido[prop]+'<br>';
}

}

//Как переопределить метод?
function RedefineMethod(){
fido.run=function(){alert('Now i am running in the different method');};
result();
fido.run();
}
//Далее присваиваем обработчики
document.getElementById('JustClick').onclick=result;
document.getElementById('Check Redefined Method').onclick=RedefineMethod;

/**

* @author Stas

//Стандартный конструктор объекта

function Dog(name,breed,weight){

this.name=name;

this.breed=breed;

this.weight=weight;

}

//Создаем прототип

Dog.prototype.species='Canine'; // Объявили свойство

//Теперь у всех объектов, созданных конструтором Dog будет это свойство

//Далее создаем методы

Dog.prototype.bark=function(){

if (this.weight>25){

alert(this.name+'says WOOF');

} else{

alert(this.name+'says YIP');

}

};

Dog.prototype.run=function(){

alert('Running.....');

};

Dog.prototype.wag=function(){alert('wag');};

// Создадим экземпляр объекта и проверим его свойства и методы

var fido=new Dog('Fido','Mixed',38); // Глобальная переменная.

function result(){

fido.run();

//Очистим div

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

//Перечислим свойства и методы

for (var prop in fido){

document.getElementById('mydiv').innerHTML=

document.getElementById('mydiv').innerHTML+

prop+':'+fido[prop]+'<br>';

}

//Как переопределить метод?

function RedefineMethod(){

fido.run=function(){alert('Now i am running in the different method');};

result();

fido.run();

}

//Далее присваиваем обработчики

document.getElementById('JustClick').onclick=result;

document.getElementById('Check Redefined Method').onclick=RedefineMethod;

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

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

Posted on 16.12.2015 by Stanislav_Panteleev

Стандартный способ создания массива выглядит так

//создание массива на лету
var items=['a','b','c'];

//обращение к массиву
items[0]=...что-то делаем с нулевым элементом массива

//создание массива на лету

var items=['a','b','c'];

//обращение к массиву

items[0]=...что-то делаем с нулевым элементом массива

А вот как можно создать массив при помощи конструктора объектов 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="JustClick">JustClick</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="JustClick">JustClick</button>

<hr>

</body>

</html>

EventHandler.js

/**
 * @author Stas
 */

function result(){
    var n=10;
	var a=new Array(n); // собственно создание массива из n элементов
	for (var i=0;i<n;i++){
		a[i]=i;
		document.getElementById('mydiv').innerHTML=
		document.getElementById('mydiv').innerHTML+
		a[i]+'<br>';
	}
}

document.getElementById('JustClick').onclick=result;

/**

* @author Stas

function result(){

var n=10;

var a=new Array(n); // собственно создание массива из n элементов

for (var i=0;i<n;i++){

a[i]=i;

document.getElementById('mydiv').innerHTML=

document.getElementById('mydiv').innerHTML+

a[i]+'<br>';

}

document.getElementById('JustClick').onclick=result;

Posted in javascript | Comments Off

JS. Как создать объект с помощью конструктора и объектного литерала?

Posted on 16.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="JustClick">JustClick</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="JustClick">JustClick</button>

<hr>

</body>

</html>

EventHandler.js

/**
 * @author Stas
 */

// Если по старому, то может быть неудобно из за большого числа параметров
//function Car(make,model,year,color,passengers,convertible,mileage,started){some code...}

//Далее пример того как можно создать объект на основе объектного литерала

//Создание конструктора
function Car(params){
	this.make=params.make;
	this.model=params.model;
	this.year=params.year;
	this.color=params.color;
	this.passengers=params.passengers;
	this.convertible=params.convertible;
	this.mileage=params.mileage;
	this.started=params.started;
}

//Создание объектного литерала
var FiatParams={
	make:"Fiat",
	model:"500",
	year:1957,
	color:"Medium Blue",
	passengers:2,
	convertible:false,
	mileage:88000,
	started:false

};



function result(){
var Fiat=new Car(FiatParams);// Создание объекта с помощью объектного литерала
	
//Далее вывод свойств объекта в div
for (var prop in Fiat){
document.getElementById('mydiv').innerHTML=document.getElementById('mydiv').innerHTML+
		prop+':'+Fiat[prop]+'<br>';
   }
//Как узнать к какому типу принадлежит объект?
if (Fiat instanceof Car){alert('Yes, FIAT instance of Car!!!');}
}

document.getElementById('JustClick').onclick=result;

/**

* @author Stas

// Если по старому, то может быть неудобно из за большого числа параметров

//function Car(make,model,year,color,passengers,convertible,mileage,started){some code...}

//Далее пример того как можно создать объект на основе объектного литерала

//Создание конструктора

function Car(params){

this.make=params.make;

this.model=params.model;

this.year=params.year;

this.color=params.color;

this.passengers=params.passengers;

this.convertible=params.convertible;

this.mileage=params.mileage;

this.started=params.started;

}

//Создание объектного литерала

var FiatParams={

make:"Fiat",

model:"500",

year:1957,

color:"Medium Blue",

passengers:2,

convertible:false,

mileage:88000,

started:false

};

function result(){

var Fiat=new Car(FiatParams);// Создание объекта с помощью объектного литерала

//Далее вывод свойств объекта в div

for (var prop in Fiat){

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

prop+':'+Fiat[prop]+'<br>';

}

//Как узнать к какому типу принадлежит объект?

if (Fiat instanceof Car){alert('Yes, FIAT instance of Car!!!');}

}

document.getElementById('JustClick').onclick=result;

Posted in javascript | Comments Off

JS. Как создать объект при помощи конструктора

Posted on 16.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="JustClick">JustClick</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="JustClick">JustClick</button>

<hr>

</body>

</html>

EventHandler.js

/**
 * @author Stas
 */

//Создание конструктора для объекта

function Dog(name,breed,weight){
	this.name=name;
	this.breed=breed;
	this.weight=weight;
	this.bark=function(){// добавили объекту также метод
		if (this.weight>25){alert(this.name+' says Woof!!!');}
		else{alert(this.name+' says Yip');}
	};
}

// Собственно создание объекта...
function CreateRex(){
	var Rex=new Dog('Rex','Mixed',38); // Вот так, одной строчкой создаем объект...
	//Далее просто выводим его свойства в div
        for (var prop in Rex){
		document.getElementById('mydiv').innerHTML=document.getElementById('mydiv').innerHTML+
		prop+':'+Rex[prop]+'<br>';
	}
	
	//А также вызываем метод объекта
        Rex.bark();
}

//ну и назначаем обработчик
document.getElementById('JustClick').onclick=CreateRex;

/**

* @author Stas

//Создание конструктора для объекта

function Dog(name,breed,weight){

this.name=name;

this.breed=breed;

this.weight=weight;

this.bark=function(){// добавили объекту также метод

if (this.weight>25){alert(this.name+' says Woof!!!');}

else{alert(this.name+' says Yip');}

};

}

// Собственно создание объекта...

function CreateRex(){

var Rex=new Dog('Rex','Mixed',38); // Вот так, одной строчкой создаем объект...

//Далее просто выводим его свойства в div

for (var prop in Rex){

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

prop+':'+Rex[prop]+'<br>';

}

//А также вызываем метод объекта

Rex.bark();

}

//ну и назначаем обработчик

document.getElementById('JustClick').onclick=CreateRex;

Posted in javascript | Comments Off

JS. Простой пример замыкания функции

Posted on 16.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="JustClick">JustClick</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="JustClick">JustClick</button>

<hr>

</body>

</html>

EventHandler.js

/**
 * @author Stas
 */

var SomeVar='GlobalVar'; //Объявим глоб. переменную

function ExternalFunction(){
	var SomeVar='LocalVar'; // Локальную с таким же именем
	
	function InternalFunction(){
		return SomeVar; // Выведет LocalVar
	}
	return InternalFunction();
	
}

function myresult(){
var result=ExternalFunction();
alert(result);
}


document.getElementById('JustClick').onclick=myresult;

/**

* @author Stas

var SomeVar='GlobalVar'; //Объявим глоб. переменную

function ExternalFunction(){

var SomeVar='LocalVar'; // Локальную с таким же именем

function InternalFunction(){

return SomeVar; // Выведет LocalVar

}

return InternalFunction();

}

function myresult(){

var result=ExternalFunction();

alert(result);

}

document.getElementById('JustClick').onclick=myresult;

Итак, главная интрига данного кода – какую переменную выведет alert(result) – глобальную или локальную? Правильный ответ – локальную. Обратите внимание … Continue reading →

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="CheckPassengers">CheckPassengers</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="CheckPassengers">CheckPassengers</button>

<hr>

</body>

</html>

Примечание. Когда мы используем функцию внутри другой функции в качестве параметра, то должны писать её без круглых скобок, хотя её фактическая реализация со скобками. То есть, например вот так

Somefunction(Anotherfunction); //<<Так сработает

1	Somefunction(Anotherfunction); //<<Так сработает

а не так

Somefunction(Anotherfunction(parameter1,parameter2));// <<Так не сработает

1	Somefunction(Anotherfunction(parameter1,parameter2));// <<Так не сработает

Файл EventHandler.js

/**
 * @author Stas
 */
// Создадим массив объектов
var passengers = [  { name: "Jane Doloop", paid: true, ticket: "coach" },
					{ name: "Dr. Evel", paid: true, ticket: "firstclass" },
					{ name: "Sue Property", paid: true, ticket: "firstclass" },
					{ name: "John Funcall", paid: true, ticket: "premium" } ];

//В эту функцию будем подставлять другие, вместо параметра test					
function processPassengers(passengers, test) {
	for (var i = 0; i < passengers.length; i++) {
		if (test(passengers[i])) {
			return false;
		}
	}
	return true;
}

//Доп. функция. Проверим есть ли местер зло в списке?
function checkNoFlyList(passenger) {
	if (passenger.name === "Dr. Evel") return true;
}

//Доп. функция. Проверим все ли оплатили?
function checkNotPaid(passenger) {
	if (passenger.paid==false) return true;
}


function Integration(){
	//Проверка на доктора зло
	if (processPassengers(passengers,checkNoFlyList)){
		document.getElementById('mydiv').innerHTML='На борту нет доктора зло';
		
	} else {document.getElementById('mydiv').innerHTML='На борту есть доктор зло';}
	
	//Проверка на оплату
	if (processPassengers(passengers,checkNotPaid)){
		document.getElementById('mydiv').innerHTML=document.getElementById('mydiv').innerHTML+'<br>'+'Все оплатили';
	} else
	{document.getElementById('mydiv').innerHTML=document.getElementById('mydiv').innerHTML+'<br>'+'Кто-то не оплатил';}
	
	
};
					
document.getElementById('CheckPassengers').onclick=function(){Integration();};

/**

* @author Stas

// Создадим массив объектов

var passengers = [ { name: "Jane Doloop", paid: true, ticket: "coach" },

{ name: "Dr. Evel", paid: true, ticket: "firstclass" },

{ name: "Sue Property", paid: true, ticket: "firstclass" },

{ name: "John Funcall", paid: true, ticket: "premium" } ];

//В эту функцию будем подставлять другие, вместо параметра test

function processPassengers(passengers, test) {

for (var i = 0; i < passengers.length; i++) {

if (test(passengers[i])) {

return false;

}

return true;

}

//Доп. функция. Проверим есть ли местер зло в списке?

function checkNoFlyList(passenger) {

if (passenger.name === "Dr. Evel") return true;

}

//Доп. функция. Проверим все ли оплатили?

function checkNotPaid(passenger) {

if (passenger.paid==false) return true;

}

function Integration(){

//Проверка на доктора зло

if (processPassengers(passengers,checkNoFlyList)){

document.getElementById('mydiv').innerHTML='На борту нет доктора зло';

} else {document.getElementById('mydiv').innerHTML='На борту есть доктор зло';}

//Проверка на оплату

if (processPassengers(passengers,checkNotPaid)){

document.getElementById('mydiv').innerHTML=document.getElementById('mydiv').innerHTML+'<br>'+'Все оплатили';

} else

{document.getElementById('mydiv').innerHTML=document.getElementById('mydiv').innerHTML+'<br>'+'Кто-то не оплатил';}

};

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

… Continue reading →

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="mybutoon">mybutoon</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="mybutoon">mybutoon</button>

<hr>

</body>

</html>

Файл EventHandler.js

/**
 * @author Panteleev Stanislav
 */


function SaySomething(anyfunctionname) {
	var phrase=anyfunctionname('Aloha');
	alert (phrase);
}

function MyTranslator(word){
	if (word==='Hello') return 'Hello';
	if (word='Aloha') return 'Hello'; 
}

function Integration(){
	SaySomething(MyTranslator);//<<Здесь функция внутри функции
}

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

/**

* @author Panteleev Stanislav

function SaySomething(anyfunctionname) {

var phrase=anyfunctionname('Aloha');

alert (phrase);

}

function MyTranslator(word){

if (word==='Hello') return 'Hello';

if (word='Aloha') return 'Hello';

}

function Integration(){

SaySomething(MyTranslator);//<<Здесь функция внутри функции

}

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

Posted in javascript | Comments Off

Category Archives: javascript

ExtJS. Классы. Создание и использование класса, изменение свойств и методов экземпляра класса

ExtJS. Первое приложение (Hello from ExtJS)

JS. Работа со свойствами и методами объектов

JS. Прототипы – с чем их едят и как их создать?

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

JS. Как создать объект с помощью конструктора и объектного литерала?

JS. Как создать объект при помощи конструктора

JS. Простой пример замыкания функции

JS. Как использовать функцию внутри функции в качестве параметра.

JS. Как использовать функцию внутри функции?

MY PROJECTS

Recent Posts

Categories