| Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате |
| Форум программистов > JavaScript: Общие вопросы > не знаю что делать |
| Автор: Рыжий 6.6.2005, 20:47 | ||
Тема в разделе PHP идет с большим успехом, предлагаю организовать и в JS  Хочу изучить Java Script, может поможете? Давайте задания, мы будем писать скрипты и т.д. Пока что у меня знания базовые, начнем с чего-нибедь легкого, постепенно поднимаясь и совершенствуясь  Ну вы меня поняли  Жду вопрос №1
|
| Автор: Aliance 6.6.2005, 21:09 |
| Начнем с того, что половина знаний - это теория. ИМХО, лучшее обучение - с книжкой. Хорошую литературу мы уже обсуждали. Затем, подумай, кто сюда будет писать: в большинстве своем новички, чтобы получить быстро и бесплатно нужный им скрипт. Но новички наврятли смогут разумно оценить сложность скрипта => он может вполне не попасть под категорию ‘легкий’, с коего ты решил начать. Я не сторониик такой темы, т.к. вместо того, чтобы сделать упорядоченный раздел (вопрос-ответ) мы "сольем" несколько таких тем в одну (эту) => получится хаос. Но раз ты так хочешь и пока эта тема будет жить, давай попробуем. Напиши мне сценарий для rollover изображений. Условия:
Так же каждая существенная строчка (т.е. строчку } не нужно) должна быть закомментирована - описание строчки. Желаю удачи  |
| Автор: Рыжий 6.6.2005, 22:27 | ||||
| ну давай не будем топить корабль, который еще не вышел в море Посмотри в разделе PHP эта тема довольно хорошо прижилась Вот накатал немного, можешь глянуть на rollover:
PS Aliance молодец, не стал сразу грузить Добавлено @ 22:30
А как можно проверить?? Я конечно извеняюсь но  просто не сталкивался еще с этим. |
| Автор: Aliance 6.6.2005, 22:30 | ||
| Хотелось бы функции, которые можно использовать при любом модернизации. Подсказываю, если мне нужно так:
То твоя функция не сработает как ожидалось |
| Автор: Рыжий 6.6.2005, 22:32 |
| не проблема, щас исправим |
| Автор: Aliance 6.6.2005, 22:33 | ||
Т.е. использовать современные методы. Скажем, вместо document.all[] - document.getElementById() и т.п. http://www.w3.org |
| Автор: Рыжий 6.6.2005, 22:49 | ||
Все - исправил, смотри:
|
| Автор: Aliance 6.6.2005, 22:58 |
| Не совсем понял. Сделай еще так: вторым аргументом передай глобальную ссылку This - она укажет на объект. А потом меняй this.src = new_src. Ведь document.images[0] - меняет src только у первой картинки, что не есть гут. |
| Автор: Opik 6.6.2005, 23:30 | ||||
А что, вроде неплохо, присоединюсь, мой вариант.
Альтернативный вариант, определенно заслуживающий внимания.
Однако стандарт XHTML его считает неправильным. Исправил со всеми поправками, для дальнейшего просмотра. |
| Автор: Aliance 6.6.2005, 23:38 | ||
XHTML не прокатит. Вариант Opr намного лучше. Теперь, думаю, все. Вот минусы последнего (лучшего) варианта:
|
| Автор: Opik 6.6.2005, 23:45 | ||||
Aliance
а как правильно?
? |
| Автор: Aliance 6.6.2005, 23:47 | ||
Зачем же столько извратов Зри в корень:
|
| Автор: Opik 6.6.2005, 23:47 |
| Aliance ок, хотел так... но всё же.. ) значит правильно понял, что делаем далее? |
| Автор: Aliance 6.6.2005, 23:58 | ||
скажем, скрытие текста. Задача: иммется надпись Скрыть, и текст внизу. Оба в своих дивах. При нажатии на надпись - текст скривается, а надпись меняется на показать. При нажатии снова - все наоборот Условия:
|
| Автор: Opik 7.6.2005, 00:09 | ||
Aliance
Однако ещё можно через свойство visible вроде, только вот не помню, как точно, и что лучше тоже не знаю, и пользуясь случаем, спрашиваю, что лучше: display, или visible? |
| Автор: Рыжий 7.6.2005, 00:15 |
| Aliance ого, ну ты быстро, после такого легенького сразу на div'ы перешел Opr уменя нет шансов |
| Автор: Aliance 7.6.2005, 00:16 | ||||||||
Правельно так:
Правельно / неправельно - зависит от задачи. Отличия в том, что visibility оставляет место для блока, т.е. как бы блок становится прозрачным, а display - убирает. В большинстве случаев (лично я точно) используется display. Не очень разумно. По крайней мере с моей точки зрения. Подскажу алгоритм. Имеем:
|
| Автор: Opik 7.6.2005, 00:24 | ||
| PHP-Script я тоже немного знаю, верней знаю только то, с чем сталкивался... а это не так много. + форум перечитал )) Добавлено @ 00:25 Aliance
А с моей - универсальней. |
| Автор: Aliance 7.6.2005, 00:27 | ||
Чем же? У тебя вон сколько блоков, а можно все сократить до двух =) |
| Автор: Opik 7.6.2005, 00:31 | ||||
2
|
| Автор: Aliance 7.6.2005, 00:35 | ||||||
Кстати, кому не терпится - задание номер три. Я думал чтоже задать, и вспомнил такую фразу:
Соответственно нужно продвигаться от азов к вершинам. Азы в JavaScript`е это строки. С ними и будет связано следующее задание: Имеется такое:
нужно создать три переменных, чтобы они содержали определенные части строки a: первая: первые три буквы строки a, таким образом получится vin, отсчет идет от первом до третьей буквы. вторая: последние четыре буквы, отсчет от последней до третьей буквы в строке a третья: последние четыре буквы, отсчет от третьей до последней буквы в строке a итог записать так:
Добавлено @ 00:38 Opr sorry  это называется сонный маразм Но у тебя текст 1 и текст 2 разный. А даже если и сделать его одинаковым - то при его большом объеме - html код будет весит вдвое больше |
| Автор: Opik 7.6.2005, 00:40 | ||
Aliance
не вижу смысла его делать одинаковым. |
| Автор: Aliance 7.6.2005, 00:43 |
| Ой, даже так: текст №1 - вообще должен быть пустым. А сам текст должен быть в тексте №2. вот. так будет правельнее  все...ушел спать...а то еще какого-нибудь бреда нанесу Добавлено @ 00:44 Кстати, ты наверное не корректно понял задачу. Смотри на моем сайте решение мое, в новостях ссылка скрыть |
| Автор: Opik 7.6.2005, 00:44 |
| Что-то я третье задание не понял, по-моему ты что то перемутил с описанием, перечитай пож-та. |
| Автор: Aliance 7.6.2005, 00:46 |
| Вырезать часть строки. Даю подсказку - методы substring(), slice() и substr() |
| Автор: Opik 7.6.2005, 00:46 | ||
Aliance
вот в этом и удобство, у тебя он должен быть заведомо пустой, у меня же - может быть и нет, т.е есть выбор показа/скрытия. |
| Автор: Aliance 7.6.2005, 00:48 | ||
А смысл в скрытии тогда? Ты пишешь например:
При нажатии на ссылку смотреть список - блок со списком покупок станет видимым. Те же, кому все равно на то, что я купил и не хотят тратить место - не открывают его :-) имхо так |
| Автор: Opik 7.6.2005, 00:49 | ||
| Aliance повторю - задачу перечитай третью. Добавлено @ 00:51
а если я хочу сделать красиво? т.е добавлю, например картинку. А вдруг она мне где то не нужна? |
| Автор: Рыжий 7.6.2005, 00:52 |
| во превых, сейчас ночь и без 100 грамм 3 задачу не поймешь Во вторых Aliance ну в принципе можеш и написать комментарии, а еще лучше - входные и выходные данные ко всему В третьих Opr ты что себе ник смменил?? |
| Автор: Opik 7.6.2005, 01:01 | ||||
| PHP-Script Я подправил пост с первым решением, подправил чутка. Про третью задачу: думаю что Aliance ошибся немного в её изложении, из-за
.
Я давно уже везде Opik, лишь на Винграде оставался Opr'ом. Да и сайт мой: www.opik.ru |
| Автор: Sardar 7.6.2005, 02:58 |
| Задание по интересней Имеем список наименований, пусть это будут ссылки в скролируемом слое в три столбика. Скролируемый слой это окошко, ставим на релативную позицию и адаём стиль overflow: auto если кто не знает Под окошком область где появялються подсказки, пусть будет тоже скролируемый слой. Подсказка появляеться при наведении мыши на элемент из окошка описанного выше. Другими словами кто видел стандартные инсталяшки, если навести мышь на какой нибудь компонент, то справа или снизу есть подсказка. Код по алгоритму ничем не оличаеться от второго задания Aliance, но на этот раз у нас должен быть полностью маштабируемый код, так как:
Ршение покажу чуть позже Следующим шагом будет добавление чекбоксов к элементам и выбор. Затем все выбранные элементы (не забываем что это не input'ы а ссылки или span'ы ) будем забивать в форму и отсылать на сервер.Затем мы научимся подгружать элементы для окошка из XML файла(который будем генерить на сервере, но на этом не обостряемся). Интерактивной подзагрузки не будет, просто открываем страницу, ждём пока придёт весть XML, даём юзеру выбрать. Последний штрих: переписываем весь код в нормальный обьектный вид. Запускаем, смотрим Где это может применяться? Где угодно, это множественный выбор, например список товаров или писем в почтовом ящике показать можем. С выбранными можно сделать определённое действие(сравнить, удалить и т.п.) Код очень простой, если не осилим, я постепенно выложу Естественно дизайнерских шедевров не пишем, нам нужна суть. Кому не интересно скажите сейчас, что бы я вермя не терял, а то простые "бесполезные" задачи что были выше развивают "теоретические" навыки, но не имеют практического прямого смысла. |
| Автор: Opik 7.6.2005, 03:05 |
| Sardar а ты покажи как они хранятся хотя бы. А то немного непонятно. |
| Автор: Aliance 7.6.2005, 10:18 | ||
Я их всех использовал у себя :-) Это мелочи жизни, без которых нет дизайнерской задумки, так что тут ты не прав Ведь большинство проектов включают себя и менно такой JS, а не сложные вещи Повторю - большинство...  |
| Автор: o.s.a. 7.6.2005, 17:02 | ||
| Я тоже хочу присоединиться, но за таким как Opik мне никак не угнаться. Только закончил писать голосование на ПХП в аналогичной данному топику теме. JS тоже хочу изучать. Sardar - очень интересно, но задание на вид очень объемное, а следовательно непонятное.
Можно немного по-подробнее об этом (как сделать). |
| Автор: Sardar 7.6.2005, 22:41 | ||
Подсказка:
Сверстал за 5 минут, потому в мозилле глючит, слой с подсказкой ведёт себя так как будто он на абсолютной позиции. Это явно бред со стороны ящерообразной  Это что бы вы могли представить что есть что, потом покажу нормальную вёрстку и мой вариант кода. Подсказку можете хранить на ваш выбор, либо в аттрибутах тега либо массивом в JS. В любом случае вёрстка подсказки должна генериться скриптом, никаких заранее отпечатанных скрытых слоёв. |
| Автор: Aliance 7.6.2005, 22:41 | ||
Почему, почему следовательно. Ничего пободного. Объемное неравно сложное. Кроме того, не нужно пугаться сложных заданий. |
| Автор: Рыжий 7.6.2005, 23:44 |
| хм, я тут подумал - предлагаю например opik'y выкладывать код скажем к себе на сайт ну или Sardar'у на PM отправить, ато как только видишь готовое решение - глаза невольно вникают в код а руки тянуться к копировать/ вставить:hehe |
| Автор: Opik 8.6.2005, 01:34 |
| PHP-Script o.s.a. вы меня извините конечно Sardar Т.е подсказка "Профиль пользователя Opik" должна грузится в <div class="description"></div>? или я опять что то не понял? |
| Автор: Sardar 8.6.2005, 02:04 |
| Opik пусть будет так(т.е. аттрибут title). Важна идея генерации слоя с контентом и его показа. Естественно что при втором показе мы слой уже не генерим, а показываем старый. Opik не ищи сложности, задачка пока очень простая, а где инфу брать - это не важно. Мы в будущем хотим содежимое окошка из XML файла брать, там у нас будет спец тег для этого |
| Автор: o.s.a. 8.6.2005, 04:37 | ||
здесь уже есть подсказка (title). правильно? Но почему она не отображается тогда в браузере когда курсор нах-ся над ссылкой? А в <div class="description"></div> (т.е. во 2-ое окошко) должна идти более подробная инфа, чем title="Профиль пользователя Good Boy". Правильно я понял??? |
| Автор: Opik 8.6.2005, 09:45 |
| Sardar просто мне не понять, какую именно инфу показывать... )) |
| Автор: Sardar 8.6.2005, 11:25 |
| Видать не ясно пояснил, звиняюсь В моей вёрстке видим два слоя. В первом у нас инфа (ссылкии с чем угодно), во втором должно появиться описание каждой ссылки. Все запускаем какой нибудь инсталятор, кликаем по опциям, смотрим как (зачастую) справа появляються описания каждой опции. У нас для этого слой description, там появляеться описание в любом удобном для вас виде. Само описание идёт аттрибутом opisanie. Другими словами для теста сделаем пока на аттрибутах, а потом... в прочем не будем забегать вперёд, а то и так не ясно... Кратко: в каждом теге а есть аттрибут opisanie. Содержимое аттрибута нужно показать в слое с className="description" (это слой контейнер), для ваших слоёв придумайте свои классы. Для генерации контента в целях обучения будем пользоваться методами DOM, т.е. никаких innerHTML. Потом когда поймёте механизм (смысл которого: теги не есть текст, а обьекты), перейдём к innerHTML для простоты. Завтра выкладываю подсказку если не решите. Честно, работы ровно на 5 минут, мы только начали, а уже столько вопросов |
| Автор: Рыжий 8.6.2005, 13:57 | ||
НЕт нет не надо, подсказок достаточно - если уж совсем не сможем решить - попросим, а так пока не надо, вот я например почему не решаю?? - Да потому что у меня щас дел по горло - ухожу из дома в 9 приходу в 6 да еще и домашнее задание(я на англ дополнительно хожу - не дай Бог вам решать то что я делаю...) ну и т.д. Просто времени достаточно нету чтобы сесть и все написать, возможно завтра сделаю(ну или седня вечером ) |
| Автор: o.s.a. 8.6.2005, 16:38 | ||||
Может я чего-то не понимаю
тег а:
есть аттрибуты class, href и title, т.е. то, что в title, должно быть выведено в контент description, да? Или же в description писать любое описание, свойственное каждому юзеру? |
| Автор: Sardar 9.6.2005, 00:14 | ||
| PHP-Script, OK, спешить не будем. Я тоже сейчас занят, экзамены o.s.a. вот код:
В аттрибуте opisanie лежит текст подсказки. Для простоты это encodeURIComponent закодированная строка. Для справки: encodeURIComponent кодирует текст в UTF-8 (в JS строки в юникоде), а затем в url. Потому на русские симвлы кодируютьса парами %HH%HH. Раскодируеться это без проблем decodeURIComponent. Достаём текст из аттрибута. Создаём если надо слой, применяем стили и т.п. Для простоты юзаем innerHTML что бы вставить контент, так как парсить текст не имеет смысла. Но от DOM не отмажетесь когда будем брать всю инфу из XML Показываем слой при наводе мышки на линк, скрываем если мышь убрали. |
| Автор: Opik 9.6.2005, 00:26 |
| Sardar А стандарты ругаться будут тут юзать onmouseover нужно?))) Хотя ты говорил нет, по другому я не знаю. |
| Автор: Sardar 9.6.2005, 00:34 | ||||
Это ещё почему?
Да, или есть ещё предложения? В принципе если дико извратиться, то можно заюзать CSS, видел игрушку написанную полностью на стилях Правда в нашем случае по моему не прокатит, верстальщики-вирутозы могут проявить мастерство |
| Автор: Opik 9.6.2005, 00:50 |
| Sardar аля неизвестный параметр, проверено XHTML 1.0 Strict |
| Автор: Sardar 9.6.2005, 01:13 | ||
Я же сказал это временно! Поясняю ещё раз: смысл задания - генерация контента. А где вы будете брать инфу, это уже ваша фантазия. В любом случае после мы будем брать инфу из XML. Другими словами: забей на валидатор, на этой стадии мир не увидит твой код. |
| Автор: Opik 9.6.2005, 03:21 |
| Sardar onmouseover там на каждом линке сделать смогу... и будет тип-топ... или реально одним управится? а ля el.className el.tagName мож ещё что там есть? просто не знаю |
| Автор: Opik 13.6.2005, 16:50 | ||
|
| Автор: o.s.a. 13.6.2005, 16:57 | ||
| Opik я тоже до такого же додумался, только выкладывать почему-то не стал А зачем
|
| Автор: Рыжий 13.6.2005, 17:24 | ||
После того как забираем мышку - слой очищается... |
| Автор: o.s.a. 13.6.2005, 17:38 |
| точно, что-то я впарился а теперь что, Sardar? |
| Автор: Рыжий 13.6.2005, 17:40 | ||
| У меня был такой вариант, послал сардару на PM но без функции onout() Может не получил - молчит как партизан. Кстати вот код:
|
| Автор: Aliance 13.6.2005, 17:41 | ||
Он зант, у него экзамены Не нужно писать в личку, имхо. (пунк 14 правил форума...) |
| Автор: Рыжий 13.6.2005, 19:10 | ||||
ага! понятно, Ну желаю ему УДАЧИ!!!
Прочитал, обалдел, больше так не буду |
| Автор: o.s.a. 9.7.2005, 19:51 | ||
Opik его уже написал. Что дальше??? |