Основы JS. Особенности работы с объектами - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Основы JS. Особенности работы с объектами, слайд №1

Основы JS. Особенности работы с объектами, слайд №2

Основы JS. Особенности работы с объектами, слайд №3

Основы JS. Особенности работы с объектами, слайд №4

Основы JS. Особенности работы с объектами, слайд №5

Основы JS. Особенности работы с объектами, слайд №6

Основы JS. Особенности работы с объектами, слайд №7

Основы JS. Особенности работы с объектами, слайд №8

Основы JS. Особенности работы с объектами, слайд №9

Основы JS. Особенности работы с объектами, слайд №10

Основы JS. Особенности работы с объектами, слайд №11

Основы JS. Особенности работы с объектами, слайд №12

Основы JS. Особенности работы с объектами, слайд №13

Основы JS. Особенности работы с объектами, слайд №14

Основы JS. Особенности работы с объектами, слайд №15

Основы JS. Особенности работы с объектами, слайд №16

Основы JS. Особенности работы с объектами, слайд №17

Основы JS. Особенности работы с объектами, слайд №18

Основы JS. Особенности работы с объектами, слайд №19

Основы JS. Особенности работы с объектами, слайд №20

Основы JS. Особенности работы с объектами, слайд №21

Основы JS. Особенности работы с объектами, слайд №22

Основы JS. Особенности работы с объектами, слайд №23

Основы JS. Особенности работы с объектами, слайд №24

Основы JS. Особенности работы с объектами, слайд №25

Основы JS. Особенности работы с объектами, слайд №26

Основы JS. Особенности работы с объектами, слайд №27

Основы JS. Особенности работы с объектами, слайд №28

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Основы JS. Особенности работы с объектами. Доклад-сообщение содержит 28 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

Слайд 2

Описание слайда:

Вернемся к объектам Лекция посвящена особенностям работы с объектами, о которых шел разговор на прошлом занятии. Если что-то сложно – стоит обратиться к прошлой лекции

Слайд 3

Описание слайда:

Здравствуй "this"! Для доступа к текущему объекту из метода используется ключевое слово this. Мы помним наш пример cat = {hunger: 100} cat.feed = function () { cat.hunger-=20;//cat ссылается на текущий объект alert('Муррр....') } console.log(cat.hunger); // 100 cat.feed(); //Муррр.... console.log(cat.hunger); // 80

Слайд 4

Описание слайда:

this this this Мы помним наш пример cat = {hunger: 100} cat.feed = function () { this.hunger-=20;//Универсальнее использовать //this, чтобы не привязываться к имени объекта alert('Муррр....') } console.log(cat.hunger); // 100 cat.feed(); //Муррр.... Работает без ошибок console.log(cat.hunger); // 80

Слайд 5

Описание слайда:

Когда без this не обойтись? Объект может быть создан при помощи любой функции – конструктора. !!!В ней мы не знаем имени будущего объекта!!! Напишем функцию-конструктор котов function cat(catname){ this.catname=catname;//Публичное поле this.hunger = 100; this.feed = function(){ this.hunger-=20; alert('Муррр....'); } }

Слайд 6

Описание слайда:

Создадим кота Конструктором становится любая функция, вызванная через new. mycat= new cat('Барсик'); К созданному объекту обращения идут аналогично: console.log(mycat.hunger); mycat.feed(); console.log(mycat.hunger);

Слайд 7

Описание слайда:

Барсик покушал, Бабарсик – нет. mycat= new cat('Барсик'); mysecondcat= new cat('Бабарсик'); console.log(mycat.hunger); // 100 console.log(mysecondcat.hunger); // 100 mycat.feed(); console.log(mycat.hunger); // 80 console.log(mysecondcat.hunger); // 100

Слайд 8

Описание слайда:

Оставим кота и создадим бойца function warrior(myname,startx,starty){ this.x=startx; this.y=starty; this.up = function (){this.y++;} this.down = function (){this.y--;} this.left = function (){this.x--;} this.right = function (){this.x++;} } valera= new warrior('Валера',5,5); valera.up();//5 6 valera.up();//5 7 valera.left();//4 7 console.log('x='+valera.x+' y='+valera.y);

Слайд 9

Описание слайда:

Теперь давайте научим бойца //Сделаем один метод для передвижения function warrior(myname,startx,starty){ this.x=startx; this.y=starty; this.up = function (){this.y++;} this.down = function (){this.y--;} this.left = function (){this.x--;} this.right = function (){this.x++;} this.move = function(command){ this[command]();//Работает, не рекондовано } }

Слайд 10

Описание слайда:

Воспользуемся методом move() valera= new warrior('Валера',5,5); valera.move('up');//5 6 valera.move('up');//5 7 valera.move('left');//4 7 console.log('x='+valera.x+' y='+valera.y);

Слайд 11

Описание слайда:

Но прежние методы работают... valera.up(),valera.down(),valera.left(),valera.right() Они по прежнему работают! Закроем их для пользователя... up = function (){this.y++;} down = function (){this.y--;} left = function (){this.x--;} right = function (){this.x++;} this.move = function(command){ eval( command )();//не рекомендуется //аналогичен up(), где command='up' }

Слайд 12

Описание слайда:

Проверим valera= new warrior('Валера',5,5); valera.move('up');//5 6 ? valera.move('up');//5 7 ? valera.move('left');//4 7 ? console.log('x='+valera.x+' y='+valera.y); // 5 5 Всё сломалось. Что делать? up = function (){this.y++;} down = function (){this.y--;} left = function (){this.x--;} right = function (){this.x++;}

Слайд 13

Описание слайда:

Доступ к объекту из внутреннего метода. call(this) function warrior(myname,startx,starty){ this.x=startx; this.y=starty; up = function (){this.y++;} down = function (){this.y--;} left = function (){this.x--;} right = function (){this.x++;} this.move = function(command){ eval(command).call(this);//аналогично up.call(this) для command= 'up' } }

Слайд 14

Описание слайда:

valera= new warrior('Валера',5,5); valera.move('up');//5 6 valera.move('up');//5 7 valera.move('left');//4 7 console.log('x='+valera.x+' y='+valera.y); Ура! Починили!

Слайд 15

Описание слайда:

.bind(this) function warrior(myname,startx,starty){ this.x=startx; this.y=starty; up = function (){this.y++;}.bind(this); down = function (){this.y--;}.bind(this); left = function (){this.x--;}.bind(this); right = function (){this.x++;}.bind(this); this.move = function(command){ eval(command)();//Вызов без call } }

Слайд 16

Описание слайда:

Слайд 17

Описание слайда:

Мы "забыли" о самом главном Свойства x и y – публичные и доступны извне Параметры вызова (myname,startx,starty) являются приватными и доступны только внутри объекта. Итог – мы можем телепортировать бойца по полю через valera.x=1000; valera.y=500; console.log('x='+valera.x+' y='+valera.y);

Слайд 18

Описание слайда:

Сделаем координаты приватными function warrior(myname,startx,starty){ up = function (){starty++;}; down = function (){starty--;}; left = function (){startx--;}; right = function (){startx++;}; this.move = function(command){ eval(command)();//Работает, не рекондовано } } valera= new warrior('Валера',5,5); valera.move('up');//5 6 valera.move('left');//4 6 console.log('x='+valera.x+' y='+valera.y);//? Почему

Слайд 19

Описание слайда:

Валера, сообщите координаты! function warrior(myname,startx,starty){ up = function (){starty++;}; down = function (){starty--;}; left = function (){startx--;}; right = function (){startx++;}; this.move = function(command){ eval(command)();//Работает, не рекондовано } this.report= function (){ console.log(myname+' докладывает: Мои координаты - x='+startx+' y='+starty); } }

Слайд 20

Описание слайда:

Вот теперь всё как нужно! valera= new warrior('Валера',5,5); valera.move('up');//5 6 valera.move('up');//5 7 valera.move('left');//4 7 valera.report(); //Валера докладывает: Мои координаты - x=4 y=7 //Как сделать, чтобы код ниже делал то же? valera= new warrior('Валера',5,5); valera.move('up').move('up').move('left');//4 7 valera.report();

Слайд 21

Описание слайда:

Getter and Setter Для лучшего контроля изменения приватных полей созданы два брата: Getter – Получает/высчитывает значение Setter – Устанавливает/изменяет значение

Слайд 22

Описание слайда:

Валера, вот твой автомат Валера прошел стройподготовку и самое время снарядить его автоматом function warrior(myname,weapon,maxbullets){ var bullets; // Текущее число патронов } valera = new warrior('Валера','Автомат',300);

Слайд 23

Описание слайда:

Держи патроны! function warrior(myname,weapon,maxbullets){ var bullets=0; // Текущее число патронов this.getbullets = function(amount){//это setter =) if (amountmaxbullets) { console.log('Взял ' +(maxbullets-bullets)+ ' патронов из '+amount); bullets=maxbullets; } else{ bullets+=amount; console.log('Взял '+bullets+' патронов');} } }

Слайд 24

Описание слайда:

Валера, отчитайся this.report = function (){ console.log('У меня '+bullets+' патронов из '+maxbullets); } valera = new warrior('Валера','Автомат',300); valera.report(); valera.getbullets(50); valera.getbullets(270); valera.report();

Слайд 25

Описание слайда:

Задачи 1. Сделайте единый getter-setter: getbullets() - getter сообщает количество патронов getbullets(amount) – берет патроны. (Код можно использовать из прошлого примера) 1.* Расширьте класс воина, чтобы Валера мог: - перезаряжать автомат(если есть чем) - стрелять, пока есть патроны - говорить сколько у него осталось абойм (floor/ceil) на выбор

Слайд 26

Описание слайда:

Задачи 2. Взять объект "Сматфон" у которого заданы поля: имя, память(hdd), память(ram) и список приложений (имя, hdd, ram) из 4 лекции. - Переписать все его поля на приватные. - дать возможность установить карту памяти. - Сделать “перенос” приложений на карту памяти и обратно. * - Возможность достать карту памяти с сохранением работоспособности приложений на внутренней памяти

Слайд 27

Описание слайда:

Задачи 3. Валера в лабиринте Написать класс labirintwarrior, Карта, старт и финиш приходят в конструкторе. - боец может перемещаться и бить мечем перед собой(направление движения/поворота) - боец может отобразить карту в радиусе N=5 от себя (* с отображением в HTML) Карта состоит из 3 типов клеток: - проходимые(корридоры) - разбиваемые(двери/коробки) - непроходимые(стены) Нужно пройти лабиринт

Слайд 28

Описание слайда:

Реализовать объект "автомобиль", для которого прописать не менее 10 методов. Переменные(объем топлива, масла, температура, вместимость багажника или другие – приватные) Хотя бы 3 метода должны вызывать приватные методы внутри себя. * Сделать движение автомобиля по "карте". - Поворот автомобиля на 90 градусов. - Реализовать инерцию с торможением - Реализовать торможение