Уроки JavaScript 27. Двигаем блок стрелками мыши

Рет қаралды 24,131

7 жыл бұрын

⏰ Курс JavaScript 2.0: itgid.info/course/javascript-2
🧠 Чат Telegram c мозголомками : t.me/itgid_info
👇 Разверни для полной информации
💎 Курс Функции в JavaScript: itgid.info/course/function-2021
🧑🏻‍💻 Сайт: itgid.info
😋 Курс Методы массивов: itgid.info/course/arraymethod
Файлы урока: w3.org.ua/jsvideo/videouroki-j...
Facebook: / w3.org.ua
Изучаем нажатие клавиш клавиатуры keyup и keydown

Пікірлер: 115

@nicefellow7929 7 жыл бұрын

Вы даже из ошибок можете сделать урок.Благодаря вам я перестал опасаться консоли))Классные уроки спасибо!

@itgid 7 жыл бұрын

Спасибо - классная идея!

@denisdol935 3 жыл бұрын

Блин это лучший канал по javascript из всех которые я видел на ютуб !

@romankopylov5013 6 жыл бұрын

Здравствуйте! Спасибо за шикарнейшие уроки!!! Информация заходит с полуоборота! С такими преподавателями как Вы, действительно начинаешь любить программирование и понимать "откуда ноги растут" у програмного кода, а не заучивать как стих(как этому учат в школе). Спасибо!

@itgid 6 жыл бұрын

Спасибо. Приятно!

@user-sc7li4gv4f 6 жыл бұрын

подписываюсь под каждым словом

@mihabu2673 5 жыл бұрын

Прошел 27 уроков, и вот, что могу сказать - уроки просто 'Бомба' . Ясно , доступно, понятно. С удовольствием учусь дальше!!!! Спасибо вам огромное за ваш контент.

@itgid 5 жыл бұрын

Согласен, а дальше - еще круче курсы.

@viktardaniliuk1814 6 жыл бұрын

Здравствуйте! Уроки просто супер! Пожалуй единственное, что стоит откорректировать, так это название урока 27. Двигаем блок стрелками МЫШИ :)

@tmc3624 4 жыл бұрын

стрелками МЫШИ'??

@user-vi3ur8bw8k 4 жыл бұрын

Если добавить ещё два направления, будет баг: первое движение будет в противоположную сторону. Чтобы работало корректно, нужно инкримент делать до присваивания значения.

@user-kk2mm2ke7s 4 жыл бұрын

Александр, ВЫ молодец! Материал воспринимается отлично!

@NeedForHeavyMetal 2 жыл бұрын

Спасибо товарищ!

@Max-Eastman 4 жыл бұрын

Спасибо! Полезный урок.

@Vip-kw9id 5 жыл бұрын

Мне очень понравился данный видеоурок, виден профессионализм автора над работой с аудиторией... Даже образовавшуюся ошибку человек грамотно объясняет как найти и понять где возник конфликт в коде Уроки супер

@user-en1bb1qw9w 7 жыл бұрын

Спасибо за уроки, всё очень понятно и доходчиво.

@user-wi1wp9de2i 4 жыл бұрын

Ура,все интереснее и интереснее!

@user-qg9ji2nb8r 6 жыл бұрын

Как всегда отличный урок, большое спс.

@blook1413 7 жыл бұрын

Спасибо, очень информативные уроки

@itgid 7 жыл бұрын

Спасибо. Стараюсь.

@pvestt7584 3 жыл бұрын

Спасибо вам!)

@entity9069 5 жыл бұрын

Супер урок!!!

@ichelsea 4 жыл бұрын

Спасибо!

@user-ic4ng2ym1n 5 жыл бұрын

Крутые уроки спс

@iraklimkhatvari3823 5 жыл бұрын

Я сразу после начала видео, услышав задание, остановил его и решил сделать его самостоятельно и час ломал голову над тем что нельзя создавать переменную с именем top . Теперь смотрю уроки полностью и потом химичу сам.

@WhoAmI-sx6fb 5 жыл бұрын

По вашему примеру влево и вверх движения не происходит

@TheOneeightytwo 6 жыл бұрын

очень хорошо

@SocialFoam 7 жыл бұрын

В названии урока ошибка как мне кажется. Двигаем блок стрелками "клавиатуры" вы наверное хотели написать. Курс очень хороший, спасибо!

@waldo_ 7 жыл бұрын

Увидел тему видео,что двигаем стрелками блок.До просмотра урока написал код,в котором можно двигать блок на w,a,s,d.Встретил такую же проблему с переменной top.Но я поступил по-другому,а именно понажимал на кнопку,которая должна изменять эту переменную,затем в консоли попытался вывести этот объект.Но вместо значения переменной top вывелся какой то странный объект. Спасибо,что познакомили с еще одним инструментом веб-разработчика)

@itgid 7 жыл бұрын

Без проблем! Кстати, по chrome dev.tools буду проводить конференцию promo.net.ua/chromedev

@waldo_ 7 жыл бұрын

Front-End разработка с нуля. HTML, CSS, jQuery Ну,думаю инструменты подождут,а вот на адаптивную верстку или препроцессоры в вашем исполнении я бы сходил))

@itgid 7 жыл бұрын

Лучше на адаптивную - она реально окупится быстрее.

@_Fantom_. 4 жыл бұрын

Спасибо за полезный урок! А как сделать управление левой и верхней кнопкой?

@saskirakosyan3788 5 жыл бұрын

Сделайте пожалуйста видео про классов, и прототипное наследование. ? Будет очень полезно.

@user-qb5wl4dn8c 7 жыл бұрын

Доброго времени суток. Спасибо вам за очень понятные урок по JS. Впервые нахожу уроки где все кратко и в тоже время очень понятно. Скажите пожалуйста а вы такие урок по PHP не планируете записывать? Было бы очень здорово!

@itgid 7 жыл бұрын

Посмотрим как пойдет. По PHP очень много уроков.

@user-qb5wl4dn8c 7 жыл бұрын

я у вас видел в плейлистах уроки по созданию интернет магазина там js+php. но я так понимаю это не основы php, хотя я могу ошибаться так как я еще не смотрел эти уроки. Пока что с удовольствием смотрю ваши уроки по JS. Очень нравится подача материала. Успехов вам в дальнейших уроках. Буду рад если появятся урок по основам php для начинающих.

@itgid 7 жыл бұрын

Уровень средний, в частности для создания магазина хватает очень базовых знаний PHP, основная работа идет на Html и jQuery

@user-qb5wl4dn8c 7 жыл бұрын

Добрый день , хотел бы у вас посоветоваться. Подскажите в каком порядке лучше изучать языки веб программирования? На данной момент я более менее изучил HTML и CSS и вот благодаря вашим урокам постепенно начинаю понимать основы JavaScirpt. После JavaScript уже потом изучать Jquery или можно параллельно? А потом уже PHP?

@itgid 7 жыл бұрын

Лучше дойти до конца уроков по JS, а затем на jQuery. У вас тогда будет хорошая база к пониманию принципов работы.

@user-hp5zz4ss6l 7 жыл бұрын

Очень крутые уроки, все понятно! Но хочу сделать вам замечание по поводу качества, сделайте как минимум 480 )

@vladimirjosan6127 7 жыл бұрын

720p есть же)

@itgid 7 жыл бұрын

Видео есть до hd. Просто включите это качество.

@razmikyeritsyan6665 6 жыл бұрын

kruto vse uroki no nujn Reacth i Angular js

@darkdeath1619 7 жыл бұрын

Спасибо за ваши уроки! Не в тему, но не могли бы вы сделать урок по созданию простейших вкладок на js? В интернете, конечно, полно примеров, но они очень громоздкие, много лишнего и непонятного.

@itgid 7 жыл бұрын

Да, конечно сделаю!

@ericraudy 6 жыл бұрын

инкремент left++ в коде нужно поставить выше чем block.style.left = left + 'px'; а то после первого нажатия стрелки сдвига не происходит,т.е. вот так: if(event.key == 'ArrowRight'){ left++; block.style.left = left + 'px'; } или так: if(event.key == 'ArrowRight'){ block.style.left = ++left + 'px'; }

@user-px4ux6jy5z 6 жыл бұрын

У меня всё получается и так и так

@thePlayan1 7 жыл бұрын

Здравствуйте) На данный момент я смотрю 12 ый урок по JS. Скажите пожалуйста после 27 го урока еще будете записывать видео?Очень хотелось бы посмотреть продолжение различные варианты сложные моменты практические примеры) Огромное Спасибо!Сайт w3.org.ua добавил в избранное)

@itgid 7 жыл бұрын

Да будет. Уже есть уроки по событию scroll - для прокрутки, есть комплекс уроков по canvas.

@thePlayan1 7 жыл бұрын

Отлично! Спасибо! Пожалуйста продолжайте не останавливайтесь) Мы будем Вас смотреть с удовольствием и учить JS)

@user-hc3oy1ht7f 5 жыл бұрын

В место top можно bottom

@vladimirjosan6127 7 жыл бұрын

Будет про event scroll? Предлагаю к нему практическое применение с кнопкой вверх.

@itgid 7 жыл бұрын

По scroll будет, а по кнопке - уточните что за урок, сделаю.

@vladimirjosan6127 7 жыл бұрын

Ну раз будет по scroll , то почему бы не сделать кнопку, которая поднимает в самый вверх страницы через scrollTop . Вот это я имею в виду.

@itgid 7 жыл бұрын

Да, хорошая идея! Завтра выложу.

@vladimirjosan6127 7 жыл бұрын

Жду)

@vladimirjosan6127 7 жыл бұрын

Уже сам всё сделал с сохранением прошлой позиции, благодаря всему, что вы меня научили)

@fed4wet 6 жыл бұрын

Отличные уроки! я фанат. Теперь вопрос. Если квадратик изначально позиционируется в центре, то var left = 0 не сработает. Нужно считать позицию left и top квадратика, но используя left = element.style.left - в конечном счете не имеем ничего, т.к. это не число. При таком вводе left = Number(element.style.left) left сразу будет = 0. А вот при такой комбинации будет NaN. Реализация. var left = block.style.left; left = parseInt(left); Прошу дать объяснение этому явлению.

@itgid 6 жыл бұрын

В таком случае лучше делать по другому. Изначально хранить координаты блока и манипулировать ими, а потом отрисовывать. По поводу element.style.left лучше использовать getComputedStyle, но как уже указал это костыль.

@fed4wet 6 жыл бұрын

Front-End разработка с нуля. HTML, CSS, jQuery спасибо. Я изучил немного этот вопрос. Скажу сразу-очень неожиданно для меня,что такое действие не имеет элегантного решения от самих js. Все пишут,что это решается JQuery и есть строка как это делается (я jq ещё не изучил.)getComputedStyle имеет особенность -чаще всего он работает и корректно,но 2-3 раза из 10 на моей машине вместо координаты возвращает значение auto,что уже не парсится никак и тогда координата не срабатывает. Связано с тем,что css и js работают асинхронно и когда js срабатывает первым,то ..увы..получаем auto. А jq обходит это,т.к. имеет возможность работать синхронно. Это что удалось перевести с форумов. Поправьте если не прав. И да,отличная идея хранить все не в css,а в js и передавать в css.Спасибо,ещё раз спасибо за видео. Вы лучший.

@itgid 6 жыл бұрын

Правильно. Также стоит добавить что браузер вычисляет стили которые мы не указали. Поэтому получить их с js иногда тяжело.

@alpha-dzhem 6 жыл бұрын

window.onload или подключение js классическим способом (перед ) не решает проблему?

@nikonbugaichuk6596 7 жыл бұрын

Здравствуйте. Скромный вопрос. А в ближайшем будущем или не в ближайшем, предусматривается уроки по React + Redux. Вы бы спасли весь интернет ?) Реально то чего не хватает?)

@itgid 7 жыл бұрын

Понимаете, это сложный вопрос. Подготовка видеоуроков требует серьезных затрат времени. Чем более узкоспециализированная тема, тем меньше просмотров и соответственно задача просто не окупается. В ближайшее время буду продумывать стратегию развития канала, постараюсь обдумать эту тему.

@ericraudy 6 жыл бұрын

насчет просмотров,тут,как говорится,бабушка надвое, ибо толковых уроков по React,c практическим применением как у Вас, в сети просто нет.

@awenn2015 3 жыл бұрын

AddEventListener не? Не было 4 года назад ?))

@user-bro 5 жыл бұрын

В общем то понятно, сделал самостоятельно, но не смог разобраться как начинает работать одновременное сочетание клавиш - например вниз и вправо. Если нажать прямо одновременно, то идет по диагонали, как и предполагалось. Если же зажать вправо и потом добавить вниз, то почему то действия "вправо" отменится.

@NightWooooolf 6 жыл бұрын

очень странно будет вести себя команда ,если после движения вниз добавить код var right1 = 0; if (event.key="ArrowLeft") { block.style.right = right1 + "px"; right1++; }

@olehpitus5877 5 жыл бұрын

можна зробити навпаки - if(event.key == 'ArrowLeft') { left--; block.style.left = left + 'px'; } І все працює)

@user-px4ux6jy5z 6 жыл бұрын

Будет ли курс по jQuery?

@itgid 6 жыл бұрын

нет, это скучно и для понимания jQuery хватит двухчасов и этого ресурса: www.w3schools.com/jquery/default.asp

@alexvei7299 5 жыл бұрын

урок отличный-одно расстроило-вправо и вниз показали как а в противоположные стороны нет. Пробовал сам, ума не хватило. Что-то не так делаю

@user-ko4vt4ib5m 5 жыл бұрын

Здравствуйте! Подскажите пожалуйста! Если top зарезервированное слово, то и left таким является, но с left все прошло как с переменной , а с top нет. Как можно это понять?

@itgid 5 жыл бұрын

укажите какой участок кода вы имеете ввиду?

@user-ko4vt4ib5m 5 жыл бұрын

if (event.key == 'ArrowRight'){ block.style.left = left +'px'; left++; } if (event.key == 'ArrowDown'){ block.style.top = top1 +'px'; top1++; вот в первом if left прошел как переменная. а ниже if пришлось top1 переменную создавать. У меня долго не получалось квадрат вниз двигать кнопкой , пока в block.style.top не убрал 1.

@andreinechaev7214 5 жыл бұрын

у меня сработало только когда переименовал top в top1

@user-ko4vt4ib5m 5 жыл бұрын

andrei nechaev так я тоже из-за это долго не мог понять в чем проблема

@Mirum_7 6 жыл бұрын

у меня объект вверх и вправо не двигается что делать?

@itgid 6 жыл бұрын

А что пишет консоль?

@martinhovhannisyan6553 5 жыл бұрын

Все стороны сразу не работают, работает только та которую написал сначала, остальные не работают никак.

@Mike37373 6 жыл бұрын

во все стороны и скорость увеличена ещё, но все ровно не понятно почему переменные нельзя назначать как хочется var block = document.getElementById('test'); var top1 = 0; var left = 0; document.onkeydown = function (event){ console.log(event); if (event.key == 'ArrowRight'){ block.style.left = left +'px'; left = left +5; } if (event.key == 'ArrowLeft'){ block.style.left = left +'px'; left = left -5; } if (event.key == 'ArrowUp'){ block.style.top = top1 +'px'; top1 = top1 -5; } if (event.key == 'ArrowDown'){ block.style.top = top1 +'px'; top1 = top1 +5; } } document.onkeyup = function(event){ console.log('отпустили клавишу'); }

@itgid 6 жыл бұрын

что значить "как хочеться?"

@Mike37373 6 жыл бұрын

я имею ввиду, что если например для этого if переменную назвать right, по названию ключа, то программа не будет работать - if (event.key == 'ArrowRight'){ block.style.left = left +'px'; left = left +5; }

@olehpitus5877 5 жыл бұрын

ніяк не міг доперти, як зробити кнопку вліво... так і не зробив окремої кнопки.. просто зробив з правою, але навпаки if(event.key == 'ArrowLeft') { left--; block.style.left = left + 'px'; } Дякую за курс... перший канал, де я лайками розкидався!!! Дуже дякую

@Barrakuda9111 6 жыл бұрын

Как все же дописать скрипт чтобы квадрат перемещался во всех направлениях? Что-то не выходит.

@jeweler2395 6 жыл бұрын

аналогично, только в конце функции if записывать не left++, а left-- top --

@jeweler2395 6 жыл бұрын

ну и конечно заменить код кнопок на ArrowUp и ArrowLeft соответственно