Форум

Polkan · #1 (**permalink**) 15.06.2011, 21:15

Здравствуйте.
Пишу на php и JS приходится пользоваться только от случая к случаю. Потому знаю его лишь поверхностно. А очень нужно разобраться с одним скриптом.

UPD: см. помогите понять скрипт

Кому не сложно, прошу пояснить ряд моментов:
1. Что значит:

var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; };

Если б вместо $ было имя, я бы подумал, что это анонимная функция. А так сомневаюсь. Или можно использовать $ в качестве имени? И что она возвращает мне тоже не совсем понятно.
2.
Object.extend - это некая имитация механизма наследования?
3.
TransformView.prototype насколько я понял описание прототипа (почитал про это тут в учебнике на сайте), но что значит initialize: ?
4. И (ради чего мне все это нужно) как работает функция Move? Я бы хотел изменить способ смены изображений со сдвигающегося, на затухающе-появляющийся и, насколько смог разобраться, именно эту функцию мне надо переписать. Знаю, что надо действовать css свойством opacity (filter для ie) но ничего пока не получается.

Если кто-то найдет возможность мне ответить, буду рад как можно более подробным комментариям и по всему остальному скрипту. Что-то я вроде понял, но не факт что правильно... темный лес для меня JS...

trikadin · #2 (**permalink**) 15.06.2011, 21:32

1)

var $ = function (id) {
    return "string" == typeof id ? document.getElementById(id) : id;
};

Если типом переменной id является строка, то она находит элемент в dom с таким id и возвращает его самого, в противном случае - возвращает саму переменную (которая, предполагается, является элементом dom).

2-3) Почитайте про ООП вот тут, многое станет понятнее, я думаю.

4) Про прозрачность и плавное её изменение можете почитать тут.

Polkan · #3 (**permalink**) 15.06.2011, 21:52

Спасибо за ответ.
1. Т.е. я так понял $ может быть именем функции.
2-3. Да, я читал этот раздел. но там нет ничего про initialize
4. как сделать прозрачность-то я знаю (opacity + filter). Не понятно как это вкрутить в функцию Move и как она вообще работает

trikadin · #4 (**permalink**) 15.06.2011, 21:59

1) Вы абсолютно правильно поняли.
2-3) Чёрт. Его можно назвать holy_shit - функциональность этого метода не изменится. Просто человек, разрабатывавший это, так его назвал.
4) У вас два варианта: разбираться самому и спрашивать по ходу, либо идти в раздел "Работа". Но не просить "Пожалуйста, объясните мне, как это работает." Вряд ли кто согласится это делать. Хотя, как знать...

Polkan · #5 (**permalink**) 15.06.2011, 22:18

1. отлично
2-3. блин, даже не знаю почему я его выделил в какой-то особенный метод. теперь ясно, спасибо.
4. ну так я выбрал первый вариант

вот и пытаюсь разбираться. просто у меня ощущение, что проблема только в непонимании синтаксиса js, а изменений-то там всего несколько строк нужно.

Можете объяснить, что значат квадратные скобки в выражении this._slider.style[style]? Тот style (переменная), который в скобках - это css свойство которое либо left либо top. Но почему оно пишется в скобках, а не так this._slider.style.style?

trikadin · #6 (**permalink**) 15.06.2011, 22:31

Цитата:

Есть два синтаксиса добавления свойств в объект. Первый - точка, второй - квадратные скобки:
// эквивалентные записи
o.test = 5
o["test"] = 5

Квадратные скобки используются в основном, когда название свойства находится в переменной:
var name = 'test'
o[name] = 5

Здесь имя свойства "test" является ключом в ассоциативном массиве, по которому лежит значение 5.

<...>

Доступ к свойству осуществляется точно так же:
alert(o.test)
alert(o['test'])

Вы невнимательно читали статьи по ООП))

Polkan · #7 (**permalink**) 15.06.2011, 22:54

спасибо. перечитаю их еще раз.

Polkan · #8 (**permalink**) 17.06.2011, 11:14

Скажите, пожалуйста, где ошибка.
почему-то странно работает функция FadeInOut
т.е. работает только первый шаг - увеличение opacity на 0.1
а дальше значение не увеличивается, а консоль пишет "ожидался конец значения, но найдено 0.1. Ошибка при анализе значения opacity. Потерянное объявление"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Hello!</title>
</head>
<body>
<script>
FadeInOut = function() {
  var oThis = this;
  alert(mainobjs[1].style.opacity);
  if (mainobjs[1].style.opacity < 1) {
    mainobjs[1].style.opacity += 0.1;
    var timer = setTimeout(function(){ oThis.FadeInOut(); }, 10);
  }
}

window.onload=function(){
  mainobjs = document.getElementById("idSlider").getElementsByTagName("li");
  for (var i = 0; i < mainobjs.length; i++){
    mainobjs[i].style.opacity = 0;
  }
  FadeInOut();
}
</script>

    <ul class="slider" id="idSlider">
        <li id="li_1"><img src="http://www.multikino.com/img/films/f_4747/fotos/2.jpg" width="500" height="300" border="0" alt="" title=""></li>
        <li id="li_2"><img src="http://www.otterevil.ru/wp-content/uploads/2009/07/Movies_Films_R_RoboCop_010468_.jpg" width="500" height="300" border="0"></li>
        <li id="li_3"><img src="http://www.getthebigpicture.net/storage/pics/09/robocop97.jpg" width="500" height="300" border="0" alt="" title=""></li>
        <li id="li_4"><img src="http://images.mylot.com/userImages/images/postphotos/1033074.jpg" width="500" height="300" border="0" alt="" title=""></li>
    </ul>
</body>
</html>

Polkan · #9 (**permalink**) 17.06.2011, 11:51

если заменить 13 строку так

mainobjs[1].style.opacity = parseInt(mainobjs[1].style.opacity) + 0.2;

то ошибка о потерянном объявлении пропадает,
однако значение opacity все равно не увеличивается

trikadin · #10 (**permalink**) 17.06.2011, 14:01

<div id="div" style="width: 100px; height: 100px; background: #000; opacity: 0.5">Text</div>
<script>
obj=document.getElementById("div");
alert(typeof(obj.style.opacity)); // string
</script>

Соответственно, вам нужно изменить всю функцию, учитывая, что opacity - это строка. И ещё не забудьте, что opacity действует только для самых браузеров: Firefox 4, последние версии гугл хрома и оперы...

Очень неплохая статья по изменению прозрачности вот тут.

Форум

Справочник

Discord чат

Курсы javascript