При нажатии на imput должна меняться ширина div

psywalker · November 4, 2009

Добрый день.

Что мы имеем:

		
		 <script language="javascript">
				var obj = new Object();

		div = document.getElementById('div');
		input= document.getElementById('input').value;

		obj.test = function(){

			if(input.indexOf('y') ){
				div.style.width = '800';
			}else {
			}
		}
		 </script>

<input type="text" name="input" id="input" value="" />
<input type="button" value="Нажми меня срочно" onclick="obj.test()" />
<div id="div" style="width: 300px;">BLOCK</div>

Задача:

Когда в строке input type="text" появляется буква "y", то принажатии на input type="button" - элемент "div" должен растягиваться до ширины 800px (в данный момент он 300px;);

Вопрос:

Почему этого не происходит и что нужно дописать, чтобы идея работала?

Edited November 4, 2009 by psywalker

s0rr0w · November 4, 2009

1. if(input.indexOf('y') )

Неверное условие. Если y будет стоять на первом месте, то индекс будет 0, а это false. Нужно проверять на неравенство -1, именно таким будет индекс при отсутствии даного символа.

2. div.style.width = '800px'

psywalker · November 4, 2009

1. if(input.indexOf('y') )
Неверное условие. Если y будет стоять на первом месте, то индекс будет 0, а это false. Нужно проверять на неравенство -1, именно таким будет индекс при отсутствии даного символа.
2. div.style.width = '800px'

Спасибо учитель, всё получилось, но только ТОГДА, когда я НЕ ввёл букву 'y' - походу дела ты это и имел ввиду.

Вопрос:

А куда подписать -1 для проверки неравенства?

if( t.indexOf('y') == -1) - пишу так, получается какаята чушь))

Edited November 4, 2009 by psywalker

s0rr0w · November 4, 2009

Абсолютно верно.

Данное условие переводится так: если позиция символа "y" в строке "t" равна -1 (тобишь, символ отсутствует)

Нужно ставить "когда не равна", тогда вместо == используется !=

psywalker · November 4, 2009

Спасибо, помогло. Написал следующее if( t.indexOf !=('y'));

Далее:

Чтобы при повторном нажатии вернуть обратно, пришлось написать так:

		 <script language="javascript">
				var obj = new Object();

		div = document.getElementById('div');
		input= document.getElementById('input').value;
		flug = 1;
		obj.test = function(){

			if( t.indexOf !=('y') && flug == 1){
				div.style.width = '800';
				flug=0;
			}else {
				div.style.width = '300px';
				flug=1;
			}
		}

Тоесть добавил flug=1; Другого выхода не нашёл.

Вопрос:

Правильно ли я сделал, и есть ли другой выход?

s0rr0w · November 4, 2009

Спасибо, помогло. Написал следующее if( t.indexOf !=('y'));

Очень странно. Не должно было

t.indexOf должен выдать код функции

Попробуй сделать вот так alert("a".indexOf)

Потом alert("a".indexOf("a"))

Потом alert("a".indexOf("b"))

Потом alert("a".indexOf("a") == 0)

Потом alert("a".indexOf("a") != 0)

Потом alert("a".indexOf("a") != -1)

Потом alert("a".indexOf("b") == -1)

Правильно ли я сделал, и есть ли другой выход?

Да в принципе правильно. Есть много "но", но это потом придет с опытом :lol:

psywalker · November 4, 2009

Дружище стой, правда сработало именно так, как должно было, когда так написал:

			   var obj = new Object();

		div = document.getElementById('div');
		input= document.getElementById('input').value;
		flug = 1;
		obj.test = function(){

			if( t.indexOf !=('y') && flug == 1){
				div.style.width = '800';
				flug=0;
			}else {
				div.style.width = '300px';
				flug=1;
			}
		}

А вот это не понял, куда писать и зачем?

Попробуй сделать вот так alert("a".indexOf)
Потом alert("a".indexOf("a"))
Потом alert("a".indexOf("b"))
Потом alert("a".indexOf("a") == 0)
Потом alert("a".indexOf("a") != 0)
Потом alert("a".indexOf("a") != -1)
Потом alert("a".indexOf("b") == -1)

Писать после вот этой скобочки, но в самой функции:?

else {

div.style.width = '300px';

flug=1;

}

Вот зацени, самая последняя в коде функция:

http://psywalker.ru/JavaScript/main6.html

Edited November 4, 2009 by psywalker

s0rr0w · November 4, 2009

Дружище стой, правда сработало именно так, как должно было, когда так написал:
if( t.indexOf !=('y') && flug == 1){

t.indexOf даст true, длинна строки "y" > 0, поэтому будет true. Условие true != true даст всегда false

А вот это не понял, куда писать и зачем?

Просто создай новый документ, туда этот код, и запусти.

psywalker · November 4, 2009

Кажется разобрался, посмотри результат:

http://psywalker.ru/JavaScript/main1.html

Означает:

Если в input вписывается 'y'(английская), то срабатывает if, в противном случае else

1) Насчёт alert("a".indexOf) так и не понял, куда его вставлять, покажи плиз на примере

2) И ещё не понял вот это:

1. if(input.indexOf('y') )
Неверное условие. Если y будет стоять на первом месте, то индекс будет 0, а это false. Нужно проверять на неравенство -1, именно таким будет индекс при отсутствии даного символа.

Почему если встретится буква 'y', то индекс будет 0, а не 1? Вот не могу вкурить и всё тут. Вроде бы я пишу: Если(if) встретится буква 'y', то будет выполнятся код в if. Ну вот не могу понять я этой фишки :lol:

Edited November 4, 2009 by psywalker

s0rr0w · November 4, 2009

t.indexOf даст true, длинна строки "y" > 0, поэтому будет true. Условие true != true даст всегда false

Так, загнался. Смешались в кучу кони, люди. Пора опять упорядочивать знания по JS.

t.indexOf даст строку с кодом функции, ("y") даст строку "y". Две строки никогда не будут равны друг другу. Условие даст true

Если в input вписывается 'y'(английская), то срабатывает if, в противном случае else

У тебя не срабатывает это условие. Что бы ты не вписывал, твой код значит соврешенно другое.

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

Нужно мыслить не так, как тебе удобно, а как интерпретатор, и все сразу станет на свои места.

alert("a".indexOf);

alert("a".indexOf("a"));

alert("a".indexOf("b"));

alert("a".indexOf("a") == 0);

alert("a".indexOf("a") != 0);

alert("a".indexOf("a") != -1);

alert("a".indexOf("b") == -1);

</script>

psywalker · November 4, 2009

Так, а вот теперь я уже запутался наглухо, давай так:

if( input.indexOf ('y')) - по мне это означает: Если в строке встретится буква 'y' , то тогда будет выполняться условие в if. Почему нет? И что это означает на самом деле? И где будет выполняться условие, в if или else в таком случае?

Раздел 3.3 Там ясно написано:

3.3. Логические значения:
Числовые и строковые типы данных имеют большое или бесконечное количест
во возможных значений. Логический тип данных, напротив, имеет только два
допустимых логических значения, представленных литералами true и false. Ло
гическое значение говорит об истинности чегото, т. е. о том, является это чтото
истинным или нет.
Логические значения обычно представляют собой результат сравнений, выпол
няемых в JavaScriptпрограммах. Например:
a == 4
Это выражение проверяет, равно ли значение переменной a числу 4. Если да, ре
зультатом этого сравнения будет логическое значение true. Если переменная a не
равна 4, результатом сравнения будет false.
Логические значения обычно используются в управляющих конструкциях
JavaScript. Например, инструкция if/else в JavaScript выполняет одно дейст
вие, если логическое значение равно true, и другое действие, если false. Обычно
сравнение, создающее логическое значение, непосредственно объединяется с ин
струкцией, в которой оно используется. Результат выглядит так:
if (a == 4)
b = b + 1;
else
a = a + 1;
Здесь выполняется проверка, равна ли переменная a числу 4. Если да, к значе
нию переменной b добавляется 1; в противном случае число 1 добавляется к зна
чению переменной a.
Вместо того чтобы интерпретировать два возможных логических значения как
true и false, иногда удобно рассматривать их как «включено» (true) и «выключе
но» (false) или «да» (true) и «нет» (false).

То есть условия:

if (a == 4)

b = b + 1;

else

a = a + 1;

Означают, что: Если a равно 4, то будет выполняться if.

Перевести на наш пример:

if( input.indexOf ('y')) - Если в строке есть буква 'y', то будет выполнятся if

А разве нет???

s0rr0w · November 4, 2009

if( input.indexOf ('y')) - Если в строке есть буква 'y', то будет выполнятся if
А разве нет???

Нет. indexOf возвращает индекс буквы в слове. Индекс начинается с 0, а не с 1.

"abc".indexOf("a"); //вернет 0

"abc".indexOf("b"); //вернет 1

"abc".indexOf("c"); //вернет 2

"abc".indexOf("z") вернет -1

Прикол в том, что условие if ( 0 ) вернет false, тобишь ложное

Вот тебе код для проверки

if ( 0 ) alert( "0"); // не будет выполнено, 0 = false

if ( 1 ) alert( "1"); // будет выполнено

if ( -1 ) alert( "-1"); // будет выполнено

Так, теперь складываем все в кучу

if ( 'a'.indexOf('a') ) alert( "Не дождетесь!" );

if ( 'ba'.indexOf('a') ) alert( "Работает!" );

if ( 'ba'.indexOf('z') ) alert( "Тоже работает!" );

Наблюдаем удивительную картину - условие не срабатывает только тогда, когда "а" является первой буквой!

А тебе нужно совершенно другое, чтобы в слове встречалась в любом месте буква y

Чтобы условие стало правильным, нужно чтобы результат работы функции indexOf не был равен -1

if( 'y'.indexOf('y') != -1 ) alert( "y есть" );

if( 'abcdy'.indexOf('y') != -1 ) alert( "y есть" );

if( 'abcd'.indexOf('y') != -1 ) alert( "y нет" );

psywalker · November 4, 2009

ахренеть, ща буду вкуривать, отпишу тада результат

Вопросы:

1)

if ( -1 ) alert( "-1"); // будет выполнено

Почему будет выполнено?

2)

if ( 'ba'.indexOf('z') ) alert( "Тоже работает!" );

Почему работает, если в строке нет буквы 'z'?

3) А почему нельзя написать if( 'abcd'.indexOf('y') != -55 )?

s0rr0w

А вот это уже небольшое продолжение:

Сейчас я пишу:

div.style.width = '800px'; - Таким образом я добираюсь до тега div с атрибутом style у которого ширина 300px;

<div id="div" style=" width: 300px;">BLOCK</div>

А теперь предположим, что у тега div НЕТ атрибута style и его ширина прописана только в CSS, тогда вопрос:

Как мне теперь добраться до тега div и изменить его ширину?

p.s. - Спасибо тебе огромное, теперь у меня появился просвет, это уже плюс

p.s.s. - во походу я тя запарил уже конкретно)))

Edited November 4, 2009 by psywalker

s0rr0w · November 4, 2009

1) Почему будет выполнено?

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

По правилам приведения числа к булеановому виду, 0, -0 и NaN = false. Остальное - true

if можно расшифровать так - если выражение в круглых скобках истинно, то выполнить следующий блок кода.

2) Почему работает, если в строке нет буквы 'z'?

-1 = true. "a".indexOf("z") возвращает -1. Выражение истинно с точки зрения машинной логики if, а не с точки зрения твоей.

3) А почему нельзя написать if( 'abcd'.indexOf('y') != -55 )?

Можно, но тогда условие будет истинным при любых значениях, которые возвращает функция indexOf, потому что ранг значений у нее лежит в диапазоне от -1 до n, где n- позитивное число.

А теперь предположим, что у тега div НЕТ атрибута style и его ширина прописана только в CSS, тогда вопрос:
Как мне теперь добраться до тега div и изменить его ширину?

Если делать через DOM, то там для тебя пока что сложно. Есть решение проще и эффективнее. Присваивай класс этому элементу, который установит принудительную ширину в 800px. Убирая класс, элемент вернет свое старое значение.

p.s.s. - во походу я тя запарил уже конкретно)))

Меня очень трудно запарить.

psywalker · November 4, 2009

ок, в принципе вкурил, очередной вопрос:

Если делать через DOM, то там для тебя пока что сложно. Есть решение проще и эффективнее. Присваивай класс этому элементу, который установит принудительную ширину в 800px. Убирая класс, элемент вернет свое старое значение.

Как убрать класс?

Меня очень трудно запарить.

Ещё не вечер

Edited November 4, 2009 by psywalker

s0rr0w · November 4, 2009

Как убрать класс?

Если он только один, и других не предвидится, то node.className = "", иначе используем replace

psywalker · November 5, 2009

ага, походу я понял так:

1)

Если он только один, и других не предвидится, то node.className = ""

Это означает:

node - это имя элемента, например div?

className - это какое то зарезервированное значение, означает класс?

Пишу так: div.className = '.r'; и не получается ничего, почему?

2)

иначе используем replace

replace()
Выполняет операцию поиска и замены с помощью регулярного выражения.

строка.replace(regexp, замена)

Означает, что сначала идёт строка(под ней может быть мой div?), потом через точку вот эта свойство replace, дальше уже в скобочках какой то regexp(что это такое?), а через запятую уже заменяющий класс?

Пишу так: div.replace('#div','.r'); - опять ничё не происходит((

3) Вот тут пример того, что пытаюсь...

http://psywalker.ru/JavaScript/main1.html

Edited November 5, 2009 by psywalker

s0rr0w · November 5, 2009

Это означает:
node - это имя элемента, например div?

Это не имя элемента, это ссылка на элемент. Ты зря полез в DOM, без примитивных, базовых знаний алгоритмики там все для тебя будет темным лесом еще очень долго.

className - это какое то зарезервированное значение, означает класс?

Это не значение, это поле.

var x = 1;

x- название переменной

1 - ее значение

Пишу так: div.className = '.r'; и не получается ничего, почему?

Аналог твоего действия.

Пишу так: div.replace('#div','.r'); - опять ничё не происходит((

У ноды нет такого метода как replace. Он есть у строк. className возвращает строку.

Лучше тебе не лезть в DOM пока, там нужно чуть больше знаний.

Знание языка начинается с переменной.

psywalker · November 5, 2009

s0rr0w

Спасибо тебе огромное в 10 раз, вот что я понял:

1) Нужно писать так: div.className = 'r'; - Я написал и всё заработало

2)

Ты зря полез в DOM, без примитивных, базовых знаний алгоритмики там все для тебя будет темным лесом еще очень долго.

Вот это я понял, забегаю вперёд, это неразумно, понимаю, просто дело в том, что как то уже хотелось пример добить. А вообще я бы хотел прям сначала книжки начать учить, каждое предложение и до конца книги, так как отрывками всё делать будет только хуже для меня, я люблю узнавать изначально каждую мелочь досконально, азы... Единственный минус в книге - это то, что примеры там примитивные слишком, типа a+b и т. д., хотелосьбы что нибудь поинтереснее, вот и придумываю себе всякие задачки

s0rr0w · November 5, 2009

Единственный минус в книге - это то, что примеры там примитивные слишком, типа a+b и т. д., хотелосьбы что нибудь поинтереснее, вот и придумываю себе всякие задачки

Не поверишь, но без a+b не обойтись

Вот тебе пример

var x = 10;

var y = "10"

var z = x + y;

Что получим?

psywalker · November 5, 2009

Не поверишь, но без a+b не обойтись
Вот тебе пример
var x = 10;
var y = "10"
var z = x + y;
Что получим?

получается 1010, неужели это значит, что произошло преобразование числа в строку? Тоесть числа преобразуются в строку а не наоборот?

Great Rash · November 5, 2009

Да. А для преобразования в число есть метод parseInt();

Пример:

var x = 10;
var y = "10"
var z = x + y;
var n = parseInt(z);
var sum = x + parseInt(y);

alert(typeof z + ': ' + z);
alert(typeof n + ': ' + n);
alert(typeof sum + ': ' + sum);

Edited November 5, 2009 by Great Rash

psywalker · November 5, 2009

Секундочку, имеется вопрос:

Цитата из книги:

Оператор + особенный, поскольку дает приоритет строковым операндам перед
числовыми. Как уже отмечалось, если один из операндов оператора + представ
ляет собой строку (или объект), то другой операнд преобразуется в строку (или
оба операнда преобразуются в строки) и операнды конкатенируются, а не скла
дываются. С другой стороны, операторы сравнения выполняют строковое срав
нение, только если оба операнда представляют собой строки. Если только один
операнд – строка, то интерпретатор JavaScript пытается преобразовать ее в чис
ло. Далее следует иллюстрация этих правил:
1 + 2 // Сложение. Результат равен 3.
"1" + "2" // Конкатенация. Результат равен "12".
"1" + 2 // Конкатенация; 2 преобразуется в "2". Результат равен "12".
11 < 3 // Численное сравнение. Результат равен false.
"11" < "3" // Строковое сравнение. Результат равен true.

Я не пойму фразу:

Если только один
операнд – строка, то интерпретатор JavaScript пытается преобразовать ее в чис
ло.

Так в строки или в число? Я запутался окончательно, объясните мне пожалуйста по нашему, что да как

Отдельный вопросы:

1) Что значит typeof ?

2) z + ': ' + z - Что значит знак ':' между z+ и почему знак '+' пишется после z, а не после кавычки?

Edited November 5, 2009 by psywalker

Great Rash · November 5, 2009

Это утверждение относится к сравнению (">", "<"), а не к сложению ("+"). Не вырывай предложения из контекста и читай внимательней

С другой стороны, операторы сравнения выполняют строковое срав
нение, только если оба операнда представляют собой строки. Если только один
операнд – строка, то интерпретатор JavaScript пытается преобразовать ее в чис
ло.

1)

typeof возвращает тип переменной, бывает ситуация когда необходимо узнать какого типа переменная тебе поступила, тогда и помогает typeof.

Возвращает:

string -строка

int (или integer) - целое число

float - число с плавающей точкой (типа 12.567)

object - объект (например DOM-нода)

может и еще чего есть, не помню...

Пример ситуации когда пригождается typeof:

if (typeof z == 'string') { // если тип переменной строка
	var div = document.getElementById(z); // тогда находим на странице див, у которого id равен этой строке
} else if (typeof z == 'object') { // иначе, если тип переменной объект, то присваиваем переменной сам объект
	var div = z;
}

// дальше работаем с полученным дивом
div.className = 'myclass';

2)

это просто двоеточие, я написал это для удобства.

Например z = 5, а я хочу посмотреть тип переменной и ее значение, если я напишу alert(typeof z + z);, то увижу на экране "int5" - читать не удобно. Поэтому проще написать так: alert(typeof z + ' ' + z);, тогда на экране получим "int 5" (с пробелом), а совсем удобно написать с двоеточием: alert(typeof z + ': ' + z); - ("int: 5"). Можно к примеру написать равно: alert(typeof z + ' = ' + z); - ("int = 5")

Edited November 5, 2009 by Great Rash

Searcher · November 5, 2009

Откуда строка про преобразование в число? Без контекста не совсем понятно...

1) typeof

2) z+':'+z это и есть конкатенация, тут 3 оператора: переменная z, строка ':' и опять переменная z, я не понял, зачем ты пытался это перемешать?

psywalker · November 5, 2009

Great Rash

Спасибо, я кажется понял, щас напишу, поправь меня если я не прав:

1)

var x = 10;
var y = "10"
var z = x + y;
var n = parseInt(z);
var sum = x + parseInt(y);
alert(typeof z + ': ' + z);
alert(typeof n + ': ' + n);
alert(typeof sum + ': ' + sum);
}

1.1. alert(typeof z + ': ' + z); - Мы получаем строку 1010, так как складываем число и строку 10, а следовательно получаем преобразование числа в стоку?

1.2. alert(typeof n + ': ' + n); - Тут мы уже получаем число 1010, так как выше мы вот этой записью var n = parseInt(z); сделали преобразование переменной 'z' в число? Но тогда вопрос: А почему в таком случае мы получили Число 1010, а не 20, ведь я полагаю, что раз мы преобразовали переменную 'z' в число, то они должны были сложится?

1.3. alert(typeof sum + ': ' + sum); - тут мы получили Число 20, так как выше мы переобразовали переменную 'y' в число, и засунули всю эту хрень в переменную 'sum' а следовательно у нас получилось два числа, которые сложились 10+10 и в сумме получили 20?

2)

2)
это просто двоеточие, я написал это для удобства.
Например z = 5, а я хочу посмотреть тип переменной и ее значение, если я напишу alert(typeof z + z);, то увижу на экране "int5" - читать не удобно. Поэтому проще написать так: alert(typeof z + ' ' + z);, тогда на экране получим "int 5" (с пробелом), а совсем удобно написать с двоеточием: alert(typeof z + ': ' + z); - ("int: 5"). Можно к примеру написать равно: alert(typeof z + ' = ' + z); - ("int = 5")

Так, я понял, но вопрос:

2.1. А почему обязательно писать оператор + вместе с Каждой переменной, почему бы не написать просто его один раз, например: (typeof z' = ' + z);?

Sign In

При нажатии на imput должна меняться ширина div

Question

Link to comment

Share on other sites

31 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information