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. Рекомендовано к ознакомлению.
Похожие материалы:
Отзывов: 43 на «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
Ваші уроки класні, ну прям як в Попова. Тільки у Вас безплатно)
, 30.08.2010 в 18:05
У Попова уроки отстойные (извиняюсь за выражение) и во многих местах с не профессиональным подходом, плюс голос довольно таки нудноватый, что на второй минуте уже хочется в кроватку на мягкую подушечку.
Так что даже и нечего сравнивать… и рядом не лежало.
, 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 — это видс
А так, уроки хорошие. Еще интересно то, что ты ошибаешься иногда во время их создания, а потом исправляешься. И это вообще очень круто, учиться на ошибках. Спасибо, вобщем
, 05.10.2010 в 22:06
Что то не получается с изчезновением текста «Введите емаил»
Документ без названия
function f(){
var mail = document.getElementById(‘mail’);
mail.type = »;
}
, 16.10.2010 в 01:53
Скорее всего из-за того, что пишешь вместо getElementById getElementByld (предпоследняя буква).
, 29.10.2010 в 00:40
А что за адрес сайта, у кот. свойства объектов описаны? Тот, который в видео, etc.
, 22.01.2011 в 16:59
Здравствуй, Андрей.
скажи, а как сделать, чтоб Value не обнулялось каждый раз, а единоразово. если у меня допустим длинный почтовый адреы, я сделал ошибку и мне в середие текста надо ее исправить. если я щелкну- у меня все к чертям сотрется)
, 30.03.2011 в 22:39
А как можно сделать что-бы когда написан ошибочно e-mail или пароль стиль элемента автоматически менялся например на #ff0000(красный цвет)
, 01.08.2011 в 12:54
HTML-файлы со скриптами, демонстрируемые в видео, можно скачать с Deposit Files (.zip, 2 КБайта)
depositfiles.com
Такого файла не существует или он был удален из-за нарушения авторских прав.
, 17.08.2011 в 08:55
Не понятен 2 урок, использование директивы this, три точки все путают, сделайте без 3 точек
, 18.09.2011 в 17:54
а как можна скачать тот справочник с видео?
, 26.12.2011 в 02:38
Snake
помоему бесплатные файлы с дипозита удаляются через два года после того как их выложили (