Создание объекта в функции
Создадим objects.js в папке Scripts нашего проекта
|
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 |
//Создание простого объекта внутри функции 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(); }; |
Здесь у нас пример создания автомобиля fiat и подключение обработчика onclick, но этот способ подключения обработчика у меня не срабатывал. Поэтому я попробовал onclick тега самой кнопки, и этот способ дал результат.
Теперь подключим его в представление
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> .center { margin: auto } </style> <h2>JsObjectExample</h2> <div class="center"> <!-- <input id="MyButtonID" type="button" value="Create fiat" onclick="CreateFiat()" /> --> <input id="MyButtonID" type="button" value="Create fiat" /> </div> <script src='@Url.Content("~/Scripts/objects.js")' type="text/javascript"></script> |
Внимание ! Чтобы срабатывала строчка
|
1 |
document.getElementById('MyButtonID').onclick = function () { CreateFiat(); }; |
скрипт должен быть подключен после кнопки!
Также напишем простейший метод контроллера
|
1 2 3 4 5 6 |
public ActionResult JsObjectExample() { ViewBag.Message = "Your contact page."; return View(); } |
Создание объекта через конструктор
Допишем в наш objects.js такой код
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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); for (var prop in Rex) { document.getElementById('dogDiv').innerHTML = document.getElementById('dogDiv').innerHTML + prop + ':' + Rex[prop] + '<br>'; } Rex.bark(); } |
В представление добавим такой код
|
1 2 3 4 5 6 7 |
<div class="center"> <input id="MyButtonID" type="button" value="Create Rex" onclick="CreateRex()" /> </div> <div id="dogDiv"> </div> |
Получим такой результат
