JavaScript видеоурок #2
Приветствую вас, уважаемый читатель, сегодня я публикую новый видеоурок по JavaScript. Теперь, от вводного словоблудия, которое я все равно считаю необходимым, мы переходим к практике.
Изучать какие-то новые вещи, как мне кажется, интереснее всего на примерах. Поэтому задачу связи элемента HTML-страницы с переменной JavaScript и организацию доступа к свойствам элемента мы будем осваивать на примере доступа к надписи по умолчанию в поле ввода. Т.е., я покажу как написать скрипт, который уберет надпись из поля ввода при клике по нему левой клавишей мыши.
Поставленная задача позволит:
- Освоить метод связи getElementById.
- Попрактиковаться в работе с переменными.
- Получить понимание древовидной (объектно-ориентированной) парадигмы JavaScript. Для пущего понимания я решу еще одну задачу – изменение цвета рамки поля ввода при клике.
- Поставленные задачи решаются двумя путями. Первый путь – это использование функции, что позволит нам изучить синтаксис процесса. Второй – применение директивы this, что, опять таки, позволит нам познакомиться с данной полезной штуковиной.
Видео с сервис YouTube (Часть 1):
Видео с сервиса YouTube (Часть 2):
Видео одной порцией на RuTube:
При желании вы можете скачать видеоурок в лучшем качестве с Deposit Files или с Яндекс.Диска (*.wmv, 38.7 МБайт).
HTML-файлы со скриптами, демонстрируемые в видео, можно скачать с Deposit Files (.zip, 2 КБайта)
Поговорим о постовых. Уважаемые администраторы тематически-близких ресурсов, я с радостью обменяюсь с вами постовыми. Связаться со мной можно через контакты.
В блоге “Записки программиста” опубликован интересный пост – Определение CMS средствами Perl. Рекомендовано к ознакомлению.
Метки: JavaScript видеокурс
Похожие материалы:
Отзывов: 33 на «JavaScript видеоурок #2»
Автор: , 27.11.2009 в 18:21
Урок понравился!, жду продолжения….
Автор: , 27.11.2009 в 20:59
Вот и замечательно. Продолжение следует …
Автор: , 27.11.2009 в 20:22
Да, соглашусь, очень качественно сделан урок. Но я это уже прошел. Мне бы что-нибудь посложнее.
Автор: , 27.11.2009 в 21:00
Рад, что урок понравился. А по поводу посложнее, терпение, будет и посложнее.
Автор: , 27.11.2009 в 20:37
Спасибо за блог.
Скажите, а где лучше покупать рекламу для блога?
Автор: , 27.11.2009 в 21:00
Рекламу для блога, конечно же, лучше всего покупать у меня.
Автор: , 27.11.2009 в 21:52
А кроме вас? = )
Автор: , 28.11.2009 в 20:16
Кроме меня никого нет.
Автор: , 28.11.2009 в 13:24
А когда будет продолжение?)
ЗЫ. соглашусь надо чего нибудть послжожнее нежели функции и ооп
Автор: , 28.11.2009 в 20:16
Продолжение следует…
Подписывайтесь на RSS, чтобы не пропустить
Автор: , 28.11.2009 в 18:12
Очень похож язык на php, даже синтаксис во многом похож. Это хорошо
Автор: , 29.11.2009 в 17:00
Очень лаконично и доступно. Спасибо. Я рад, что нашел Ваш сайт.
Автор: , 29.11.2009 в 20:32
плиз давайте еше )
Автор: , 30.11.2009 в 08:49
Терпение, все будет в свое время.
Автор: , 29.11.2009 в 20:48
Имея знания фреймворка jQuery, понимать нативный JavaScript становится легче =) Спасибо!
Такое пожелание – лучше бы как-то переоформить название сайта, которое в виде “водяного знака”, потому что под него попадает изображение и частично не видно, когда ты рисуешь в нижней части страницы.
Автор: , 30.11.2009 в 08:49
Не задумывался по поводу водяного знака. Попробую что-то изменить, спасибо.
Автор: , 30.11.2009 в 13:39
файлик со скриптами с депозита похоже убрали…
Автор: , 30.11.2009 в 13:43
Саша, спасибо! Еще раз перезалил.
Автор: , 01.12.2009 в 06:05
А можно обработчик события onclick включить в js, чтобы не указывать его в html?
Автор: , 01.12.2009 в 12:47
Можно, вот пример:
document.getElementById(’myElement’).onclick = function() {
alert(’Спасибо’)
}
#input id=”myElement” type=”button” value=”Нажми меня”/#
или так:
function doSomething() {
alert(’Спасибо’)
}
document.getElementById(’button’).onclick = doSomething
Но зачем это нужно? Мне кажется, не стоит усложнять.
Если хотите пользоваться таким методом, то рекомендую ознакомится со статьей (там есть скользкие моменты, непонимание которых может привести к ошибкам):
http://javascript.ru/tutorial/events/intro
Автор: , 01.12.2009 в 20:42
//Но зачем это нужно? Мне кажется, не стоит усложнять.//
Спасибо, но я придерживаюсь мнения, что html все таки должен быть чистым , а в js относить все, что имеет к нему непосредственное отношение
Автор: , 14.12.2009 в 15:27
Андрей отличные видеоуроки.Ваш блог для меня просто находка.Не бросайте это дело.Я думаю у вас будет всё отлично.
Автор: , 14.12.2009 в 15:54
Спасибо, Василий!
Не бросаю
Автор: , 09.03.2010 в 19:59
Точно, жизнь не может быть идеальной
Автор: , 27.03.2010 в 23:42
Ваші уроки класні, ну прям як в Попова. Тільки у Вас безплатно)
Автор: , 31.03.2010 в 10:44
Да, инет – огромен, если и такое даже можно откопать
Автор: , 01.04.2010 в 09:09
Да, уроки классные, спасибо большое Андрей.
Автор: , 10.04.2010 в 18:10
Что за софтинку используете для записи видео? Уже с неделю ищу эту
Автор: , 11.04.2010 в 10:06
Записываю видео в Camtasia Studio
Автор: , 11.05.2010 в 13:56
Продолжаем изучение
Давно ждал материала по жаваскрипту, а потом долго не мог за него засесть 
Автор: , 13.05.2010 в 09:40
В этом уроке надо было давать разные имена для идентификатора и переменной (id=”mail” и var mail). Так для понимания было бы лучше новичкам. А то путаница происходит, одно и то же имя у id и у var. Я долго не мог въехать, потом дошло, что к чему.
Автор: , 13.05.2010 в 09:42
И ещё вопрос по поводу имён:
Можно ли давать имена идентификаторам цифрами? Ну, или начинать цифрой? Например: id=”28exp” и т. п…
Автор: , 13.05.2010 в 21:02
Привет.
У тебя отличные уроки для новичков. Голос тоже хорошо вписывается.
Единственное, что режет слух, это произношение некоторых английских слов.
mail – это мэил
value – это вэйлю
width – это видс
А так, уроки хорошие. Еще интересно то, что ты ошибаешься иногда во время их создания, а потом исправляешься. И это вообще очень круто, учиться на ошибках. Спасибо, вобщем