-
MY PROJECTS
-
Recent Posts
- SpringBoot.Making our first starter and autoconfiguration
- Spring. Creating main annotation to start business logic
- Spring.Reading from properties file
- Spring.How to define spring version inside springBoot ?
- SpringBoot App inside Docker
- Kafka.FirstExperience
- Docker.MySql and Lost connection to MySQL server at ‘reading initial communication packet’, system error: 0
- Gradle.Tips
- Spring.AppConfig
- Leetcode.Best-time-to-buy-and-sell-stock
- LeetCode.ClimbStairs.Fibbonacci
- Leetcode.Roman-to-integer
- LeetCode.Palindrome-number
- Java.DesignPatterns.Lightweight
- Java.DesignPatterns.Proxy
- Java.DesignPatterns.Facade
- Java.DesignPatterns.Composite
- Java.DesignPatterns.Bridge
- Java. Strange OOP thing
- Java.Classpath
Categories
- Aptana
- Azure
- C#
- DataSnap
- DBExpress
- Delphi
- Delphi и сети
- Delphi. Язык программирования
- ExtJS
- FastReport
- FireDAC
- FireMonkey
- GIT
- ICS
- IDE
- IIS
- Indy
- InnoSetup
- javascript
- jQuery
- JSON
- LiveBindings
- MSHTML
- MySQL
- PHP
- REST
- Ribbons
- SMS
- SQL инструкции
- SVN
- TRichView
- UniGui
- WebBroker
- WinAPI
- Windows
- Алгоритмы
- Без рубрики
- Деревья
- Ищу ответ
- Компонентостроение
- Мои компоненты
- Начальный уровень
- Обработка исключений
- Парсинг
- Потоки(Threads)
- Регулярные выражения
- Тестирование приложений
Daily Archives: 16.12.2015
JS. Работа со свойствами и методами объектов
В данном посте посмотрим как работать со свойствами объектов – проверять есть ли они, добавлять новые, удалять существующие. Main.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!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> |
EventHandler.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
/** * @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 on JS. Работа со свойствами и методами объектов
JS. Прототипы – с чем их едят и как их создать?
Если методы и свойства объектов повторяются на разных объектах, то можно использовать прототипы для минимизации кода. Вот пример. Main.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!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> |
EventHandler.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
/** * @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 on JS. Прототипы – с чем их едят и как их создать?
JS. Как создать и заполнить массив с помощью объектного конструктора?
Стандартный способ создания массива выглядит так
1 2 3 4 5 |
//создание массива на лету var items=['a','b','c']; //обращение к массиву items[0]=...что-то делаем с нулевым элементом массива |
А вот как можно создать массив при помощи конструктора объектов Main.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!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> |
EventHandler.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/** * @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 on JS. Как создать и заполнить массив с помощью объектного конструктора?
JS. Как создать объект с помощью конструктора и объектного литерала?
Main.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!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> |
EventHandler.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
/** * @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 on JS. Как создать объект с помощью конструктора и объектного литерала?
JS. Как создать объект при помощи конструктора
Main.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!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> |
EventHandler.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
/** * @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 on JS. Как создать объект при помощи конструктора
JS. Простой пример замыкания функции
Говорят, что замыкание это функция плюс её окружение, но что это значит? Давайте разберем на примере. Main.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!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> |
EventHandler.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/** * @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 on JS. Простой пример замыкания функции
JS. Function Expression and Function Declaration
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
var money=true; if (money) {BuyCar(4);BuyHouse(5);} //Function Expression - создаются во время выполнения кода, значит //в коде ими можно пользоваться после объявления var BuyCar=function(num){ for (var i=0;i<num;i++){console.log('I have bought car');} }; //Function Declaration - создаются до выполнения кода function BuyHouse(num){ for (var i=0;i<num;i++){console.log('I have bought House');} } //Вывод - выражение if (money) {BuyCar(4);BuyHouse(5);} //даст ошибку, если вызвано раньше, чем определено BuyCar //так как BuyCar это Function Expression |
Posted in Без рубрики
Comments Off on JS. Function Expression and Function Declaration
JS. Анонимные функции
В некоторых случаях, для лаконичности кода можно использовать анонимные функции. Например,
1 2 3 4 5 6 |
Стандартный вариант (не через анонимную функцию) function init(){alert ('window is loaded');} window.onload=init; // <<Обратите внимание, без круглых скобок Тоже самое через анонимную функцию window.onload=function(){alert('window is loaded');}; |
Posted in Без рубрики
Comments Off on JS. Анонимные функции