С наступающим Новым годом! Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/6: Рейтинг темы: голосов - 6, средняя оценка - 5.00
HellyRom
0 / 0 / 0
Регистрация: 19.12.2013
Сообщений: 10
1

JavaScript, добавить-функцию к классу строк, используя прототип

19.12.2013, 17:02. Просмотров 1195. Ответов 16
Метки нет (Все метки)

Помогите, пожалуйста...

Написать скрипт, в котором добавить к стандартному классу строк
функцию, реализующую удаление лишних пробелов (если между словами
более одного пробела - оставлять только один). Для проверки работы
функции создайте страницу с двумя текстовыми полями для исходного
текста и результата.
Вызов скрипта осуществить по нажатию кнопки.
(прим. - для добавления функции к классу строк используйте прототип)

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html;
charset=utf-8">
<title>Лаб4, 7 вар</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h1>Удаление пробелов</h1>
<form>
Введите текст:
<br><textarea id ="firstspace" rows="10" cols="45"></textarea><br>
Исправленный текст:
<br><textarea id ="secondspace" rows="10" cols="45"></textarea><br>
 
<input type="button" value="Исправить" onClick="copypast()" />
 
<script type="text/javascript">
function copypast()
{
 
var text = document.getElementById('firstspace');
text = text.replace(/^\s+/, "").replace(/\s+$/, "");
document.getElementById('secondspace').value = text.value;
 
}
 
</script>
</body>
</html>
Правильно ли ввожу данные из текстового поля в текст? просто она даже без прототипа не работает...
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
19.12.2013, 17:02
Ответы с готовыми решениями:

Прототип - не получается вызвать функцию
Здравствуйте написал функцию так, но когда вызываю так, Layer._close();, пишет,...

Добавить ф-цию в прототип, которая модифицирует объект, для которого она была вызвана
Здравствуйте! Название темы длинное получилось, надеюсь на примере будет...

Обработка строк тега span по классу
Всем привет! Помогите пжл, завтра надо сдать проект, а я ерундой маюсь( Поиск...

Можно ли как нибудь найти элемент ПО КЛАССУ (он такой один) и добавить ID?
как искать по ID и менять свойства я понял. Но ID у нужного элемента просто...

JavaScript+JQuery! Как повесить функцию обновления страницы на эту же нажатую кнопку, которая имеет другую функцию?
я понимаю что звучит очень странно, НО! по пунктам: 1. есть кнопка С функцией...

16
philin
Иллюзионист
153 / 152 / 27
Регистрация: 02.10.2013
Сообщений: 330
19.12.2013, 17:20 2
Цитата Сообщение от HellyRom Посмотреть сообщение
var text = document.getElementById('firstspace');
Отладкой пользуетесь? Хотя бы alert() или console.log(). Сразу бы увидели, что получаете весь элемент из DOM, а не его value
Javascript
1
2
3
var text = document.getElementById('firstspace').value;
text = text.replace(/^\s+/, "").replace(/\s+$/, "");
document.getElementById('secondspace').value = text;
Ну и само удаление еще нужно сделать + расширить String.prototype
1
HellyRom
0 / 0 / 0
Регистрация: 19.12.2013
Сообщений: 10
19.12.2013, 17:27  [ТС] 3
(прим. - для добавления функции к классу строк используйте прототип)


а что тут имеется в виду?
0
philin
Иллюзионист
153 / 152 / 27
Регистрация: 02.10.2013
Сообщений: 330
19.12.2013, 17:52 4
С прототипами и наследованием в JS не знакомы?
Вкратце: у каждого объекта (а в JS практически все — объект) есть прототип - нечто вроде родителя. Например, строка. Для строк доступен метод replace. Причем, даже в виде "abc".replace('a', 'b'). Метод существует именно у прототипа типа данных String, а не у каждого конкретной строки. Он один, общий для всех, доступен каждому "потомку".
Вас и просят добавить метод замены в прототип. Чтобы применять можно было к любой текстовой переменной. Написать my_text.trim_spases(), к примеру, и получить my_text без лишних пробелов

Да, как использовать. К прототипу можно обратиться как String.prototype. Добавить метод - как для любого объекта, например:
Javascript
1
2
String.prototype.add_123 = function(){return "123"+this}
"456".add_123(); // получим "123456"
1
Razip
267 / 267 / 109
Регистрация: 22.08.2013
Сообщений: 905
19.12.2013, 17:53 5
Javascript
1
2
3
string.prototype.copypast = function(value){
//что-то делаем
}
Как-то так.
1
HellyRom
0 / 0 / 0
Регистрация: 19.12.2013
Сообщений: 10
19.12.2013, 18:08  [ТС] 6
Javascript
1
2
3
4
5
6
string.prototype.copypast = function()
{
var text = document.getElementById('firstspace').value;
text = text.replace(/^\s+/, "").replace(/\s+$/, "");
document.getElementById('secondspace').value = text;
}
Так??? А, и тогда,когда я буду вызывать скрипт...
HTML5
1
<input type="button" value="Исправить" onClick="copypast()" />
я copypast() оставляю? или же мне надо указывать еще что-то?
0
philin
Иллюзионист
153 / 152 / 27
Регистрация: 02.10.2013
Сообщений: 330
19.12.2013, 18:20 7
Не совсем. Даже совсем не. Смотрите, просят расширить прототип для String. Это значит, что для любой строки нужно иметь возможность поставить после нее точку, написать имя метода и получить новые данные (смотрите мой пример. Строку, для которой вызвали функцию, можно получить в this).
Это одна задача. Вторая - эту функцию протестировать на конкретном примере. Т.е. функций должно быть две. Одна - расширение прототипа, вторая - использование для конкретной задачи.
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
String.prototype.replace_spaces = function(){
    // тут берем строку в this и возвращаем измененную копию через return
    // здесь не привязываемся вообще ни к чему. Есть только this, текущая строка
    // опять же - смотрите мой пример
}
 
function copypast(){
    // а вот эта функция уже использует replace_spaces для конкретных данных
    var text = document.getElementById('firstspace').value;
    text = text.replace_spaces(); // вот и применили
    document.getElementById('secondspace').value = text;
}
Ну и уж сделайте удаление лишних пробелов
1
HellyRom
0 / 0 / 0
Регистрация: 19.12.2013
Сообщений: 10
19.12.2013, 18:34  [ТС] 8
Пытаюсь вот пока разобраться с пробелами между словами... (в задании надо лишние между)

получается пока какая-то ерунда...

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html;
charset=utf-8">
<title>Лаб4, 7 вар</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h1>Удаление лишних пробелов</h1>
<form>
Введите текст:
<br><textarea id ="firstspace" rows="10" cols="45"></textarea><br>
Исправленный текст:
<br><textarea id ="secondspace" rows="10" cols="45"></textarea><br>
 
<input type="button" value="Исправить" onClick="copypast()" />
 
<script type="text/javascript">
function copypast()
{
var text = document.getElementById('firstspace').value;
var count = (text.split(' ').length);
var myArray = new Array();
b = text.split(" ");
for (i=0;i<count;i++)
{
if (b[i] != " ")
myArray[i] = b[i];
else if (b[i]== " " && b[i+1]!=" ")
myArray[i] = b[i];
}
//alert(myArray.join(' '));
//text = text.replace(/^\s+/, "").replace(/\s+$/, "");
document.getElementById('secondspace').value = myArray;
}
 
</script>
</body>
</html>
так ли я сравниваю с пробелом? Вы меня извините, у нас курс сокращенный, за семестр дали perl, html, javascript, а считают одной дисциплиной... лекции раз в 2 недели, а лабы делать надо...

Добавлено через 11 минут
Цитата Сообщение от philin Посмотреть сообщение
String.prototype.replace_spaces = function(){
* * // тут берем строку в this и возвращаем измененную копию через return
* * // здесь не привязываемся вообще ни к чему. Есть только this, текущая строка
* * // опять же - смотрите мой пример
}
Получается, здесь я пишу удаление лишних пробелов, а при вызове (переменная.функция), функция, написанная как прототип,удалит в переменной, содержащей строку, лишние пробелы?
0
philin
Иллюзионист
153 / 152 / 27
Регистрация: 02.10.2013
Сообщений: 330
19.12.2013, 18:48 9
Зависит от того, как написать метод. Можно редактировать this - тогда переменная изменит значение. Можно создать копию this, изменить ее и вернуть как результат работы функции.
Javascript
1
2
3
4
5
String.prototype.f1 = function(){this+="def"} // тут редактируем саму переменную
String.prototype.f2 = function(){ return this+"def"} // а тут просто отдаем новое значение
var str1 = "abc", str2 = "abc";
s1 = str1.f1(); // в str1 будет "abcdef" (this изменили), в s1 будет null (функция ничего не вернула)
s2 = str2.f2(); // в str1 будет "abc" (this не меняли), в s1 будет "abcdef" (это вернули с return)
1
HellyRom
0 / 0 / 0
Регистрация: 19.12.2013
Сообщений: 10
19.12.2013, 18:59  [ТС] 10
Тяжеловато мне понять это, но спасибо вам большое...
Можно еще пару вопросов?
Я переменную text преобразую в массив... с помощью split()? И могу ли сравнить b[i] с пробелом таким образом, как b[i] == " "?
0
philin
Иллюзионист
153 / 152 / 27
Регистрация: 02.10.2013
Сообщений: 330
19.12.2013, 19:13 11
Да, в массив, указав разделителем пробел. Если плохо понятно - откройте панель разработчика, переключитесь на консоль и введите, например
Javascript
1
"123 45  678 fsdfsdf      df".split(' ');
Консоль сразу покажет результат - ["123", "45", "", "678", "fsdfsdf", "", "", "", "", "", "df"]
Пустые строки, видно? Не пробелы, каждый пробел распознан как разделитель между элементами
1
HellyRom
0 / 0 / 0
Регистрация: 19.12.2013
Сообщений: 10
19.12.2013, 19:38  [ТС] 12
Javascript
1
2
3
4
if (b[i] != " ")
myArray[i] = b[i];
else if (b[i]== " " && b[i+1]!=" ")
myArray[i] = b[i];
значит, так проверять нельзя?
0
philin
Иллюзионист
153 / 152 / 27
Регистрация: 02.10.2013
Сообщений: 330
19.12.2013, 19:45 13
Можно, конечно. Просто проверять не на равенство одному пробелу, а на пустоту. Ну или сравнивать с пустой строкой. Как видно из примера выше — ни одного элемента, содержащего только пробел, точно не будет)
1
HellyRom
0 / 0 / 0
Регистрация: 19.12.2013
Сообщений: 10
19.12.2013, 21:25  [ТС] 14
Спасибо большое, вроде бы разобралась

Добавлено через 40 минут
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var a;
//a = undefined;
var j = 0;
for (var i = 0; i < b.length; i++)
{
    if (b[i] != a)
    {
        myArray[j] = b[i];
        j++;
    }
    else  if ((b[i] == a) && (b[i+1]!= a))
        {
            myArray[j] = b[i];
            j++;
        }
};
var ttext = myArray.join(' ');
document.getElementById('secondspace').value =  ttext;

Я снова где-то ошиблась? но почему-то не воспринимается этот кусок...

Добавлено через 11 минут
Javascript
1
2
3
4
5
 if (b[i] != a)
    {
        myArray[j] = b[i];
        j++;
    }
вроде можно оставить только этот кусок

Добавлено через 7 минут
вот... так работает
Javascript
1
2
3
4
5
if (b[i])
    {
        myArray[j] = b[i];
        j=j+1;
    }
Добавлено через 27 минут
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
String.prototype.replace_spaces = function()
{
this = document.getElementById('firstspace').value;
var aa = this;
//var count = (aa.split(' ').length);
var myArray = new Array();
var b = new Array();
b = aa.split(' ');
var j = 0;
for (var i = 0; i < b.length; i++)
{
    if (b[i])
    {
        myArray[j] = b[i];
        j=j+1;
    }
};
var texx = myArray.join(' ');
this = texx;
}
function copypast()
{
s2=text.replace_spaces();
document.getElementById('secondspace').value =  text;
}
скажите, пожалуйста, хотя б идея такая при создании прототипа?
0
philin
Иллюзионист
153 / 152 / 27
Регистрация: 02.10.2013
Сообщений: 330
19.12.2013, 21:54 15
Почти. Один момент я, видимо, плохо объяснил: когда мы делаем функцию общего назначения, она не должна ни от чего зависеть. Нам же все равно, откуда берется и что содержит строка, чтобы из нее удалить лишние пробелы?
Посмотрите на 3 строчку: this присваиваете конкретное значение из поля ввода. А если этого поля не будет? Метод сломается? А он должен быть универсальным.
this всегда существует для метода, его не нужно откуда-то брать. Это та строка, для которой вызвали метод.
Т.е. осталось перенести получение value из метода. Ну и я позволил себе внести пару изменений, все прокомментировал)
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
String.prototype.replace_spaces = function(){
    var myArray = []; // аналогично new Array(), просто намного короче
    var b = this.split(' '); // необязательно сначала создавать пустой массив, все равно же
    // заново присваивается значение
    for (var i = 0; i < b.length; i++){
        if (b[i]!=""){ // тут правильнее как раз и сравнивать с пустой строкой
            myArray.push(b[i]); // вставляем в конец массива. Можно без счетчиков обойтись
        }
    }
    // если понадобится и саму строку изменить:
    // this = myArray.join(' '); 
    return myArray.join(' '); // незачем еще одну переменную
    // вводить, можно сразу в таком виде вернуть
}
function copypast(){
    // сначала берем строчку
    s = document.getElementById('firstspace').value;
    // а потом заносим преобразованную из нее строку в input
    document.getElementById('secondspace').value =  s.replace_spaces();
}
1
HellyRom
0 / 0 / 0
Регистрация: 19.12.2013
Сообщений: 10
19.12.2013, 22:05  [ТС] 16
Огромное вам спасибо, просто выручили, теперь хоть начала понимать!!!
0
philin
Иллюзионист
153 / 152 / 27
Регистрация: 02.10.2013
Сообщений: 330
19.12.2013, 23:36 17
Маленькая поправочка: совсем забыл, что строки - неизменяемый тип в JS, т.е. this в методе нельзя изменить. Ничего менять не нужно, просто в последнем сообщении проигнорируйте строки 10 и 11)
0
19.12.2013, 23:36
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
19.12.2013, 23:36

Работа с чекбоксами, используя JavaScript
Здравствуйте, подскажите пожалуйста как можно сделать: Есть 5 чекбоксов, нужно...

Как добавить HTML JavaScript
Как добавить HTML JavaScript &lt;script type=&quot;text/javascript&quot;&gt; ...

Используя JavaScript, рассчитайте значения функции
Используя JavaScript, рассчитайте значения функции y=2x/(2x+1)3x для заданных...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
17
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru