🗊Презентация Основы 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


Основы JS. Особенности работы с объектами, слайд №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
Описание слайда:
Здравствуй "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
Описание слайда:
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('Муррр....'); } }
Описание слайда:
Когда без 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);
Описание слайда:
Создадим кота Конструктором становится любая функция, вызванная через 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
Описание слайда:
Барсик покушал, Бабарсик – нет. 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);
Описание слайда:
Оставим кота и создадим бойца 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]();//Работает, не рекондовано } }
Описание слайда:
Теперь давайте научим бойца //Сделаем один метод для передвижения 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);
Описание слайда:
Воспользуемся методом 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' }
Описание слайда:
Но прежние методы работают... 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++;}
Описание слайда:
Проверим 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' } }
Описание слайда:
Доступ к объекту из внутреннего метода. 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); Ура! Починили!
Описание слайда:
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 } }
Описание слайда:
.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


var self = this; self – имя переменной Создаем замыкание! function warrior(myname,startx,starty){ this.x=startx; this.y=starty; var self = this; up = function (){self.y++;}; down = function (){self.y--;}; left = function (){self.x--;}; right = function (){self.x++;}; this.move = function(command){ eval(command)();//Работает, не рекондовано } }
Описание слайда:
var self = this; self – имя переменной Создаем замыкание! function warrior(myname,startx,starty){ this.x=startx; this.y=starty; var self = this; up = function (){self.y++;}; down = function (){self.y--;}; left = function (){self.x--;}; right = function (){self.x++;}; this.move = function(command){ eval(command)();//Работает, не рекондовано } }

Слайд 17


Мы "забыли" о самом главном Свойства x и y – публичные и доступны извне Параметры вызова (myname,startx,starty) являются приватными и доступны только внутри объекта. Итог – мы можем телепортировать бойца по полю через valera.x=1000; valera.y=500; console.log('x='+valera.x+' y='+valera.y);
Описание слайда:
Мы "забыли" о самом главном Свойства 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);//? Почему
Описание слайда:
Сделаем координаты приватными 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); } }
Описание слайда:
Валера, сообщите координаты! 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();
Описание слайда:
Вот теперь всё как нужно! 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 – Устанавливает/изменяет значение
Описание слайда:
Getter and Setter Для лучшего контроля изменения приватных полей созданы два брата: Getter – Получает/высчитывает значение Setter – Устанавливает/изменяет значение

Слайд 22


Валера, вот твой автомат Валера прошел стройподготовку и самое время снарядить его автоматом function warrior(myname,weapon,maxbullets){ var bullets; // Текущее число патронов } valera = new warrior('Валера','Автомат',300);
Описание слайда:
Валера, вот твой автомат Валера прошел стройподготовку и самое время снарядить его автоматом 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 (amount<=0) {alert('Дай больше 0!');return;} if (amount+bullets>maxbullets) { console.log('Взял ' +(maxbullets-bullets)+ ' патронов из '+amount); bullets=maxbullets; } else{ bullets+=amount; console.log('Взял '+bullets+' патронов');} } }
Описание слайда:
Держи патроны! function warrior(myname,weapon,maxbullets){ var bullets=0; // Текущее число патронов this.getbullets = function(amount){//это setter =) if (amount<=0) {alert('Дай больше 0!');return;} if (amount+bullets>maxbullets) { 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();
Описание слайда:
Валера, отчитайся 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) на выбор
Описание слайда:
Задачи 1. Сделайте единый getter-setter: getbullets() - getter сообщает количество патронов getbullets(amount) – берет патроны. (Код можно использовать из прошлого примера) 1.* Расширьте класс воина, чтобы Валера мог: - перезаряжать автомат(если есть чем) - стрелять, пока есть патроны - говорить сколько у него осталось абойм (floor/ceil) на выбор

Слайд 26


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

Слайд 27


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

Слайд 28


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

Скачать

Похожие презентации
Mypresentation.ru
Загрузить презентацию