Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > скрипт - создать список на странице


Автор: Valeria 28.12.2006, 14:32
надо написать скрипт создания списка, пишу так

Код

 function newList()
            {
            var obj = document.getElementById('list1'); //это у меня див есть,куда я хочу список сделать
            var ul = document.createElement('ul');
           
            for(var i=0;i<5;i++)
            {
            var li = document.createElement('li');            
            li.innerText = "hello";             
            }
            obj.appendChild(li);
            }

вообще,сюда будет передаваться какой-нибудь параметр,строковый,который будет в списке появляться.
но вообщем-то итак не работает,почему?помогите. smile 
и еще эту функцию можно в onload запускать при загрузке страницы? 

Автор: Aliance 28.12.2006, 14:49
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>© AlianceHTMLEditor [ http://editor.sut.net.ru/editor.html ]</TITLE>
<script type="text/javascript" language="JavaScript">
<!--//--><![CDATA[//><!--

function make_list() {
    var obj = document.getElementById('list1');
    var ul = document.createElement('ul');

    var li = new Array(5);

    for(i = 0; i < li.length; i++) {
        li[i] = document.createElement('li');
        li[i].innerText = "hello list #" + i;
        obj.appendChild(li[i]);
    }
}

//--><!]]>
</SCRIPT>
</HEAD>

<BODY>

<INPUT type="button" onclick="make_list()" value="make list" />

<div id="list1" style="border: red">&nbsp;</div>

</BODY>
</HTML>

Автор: Valeria 28.12.2006, 14:53
Aliance, супер! огромное спасибо! работает! smile  smile  smile 

Автор: Zeroglif 28.12.2006, 15:23
Цитата(Valeria @  28.12.2006,  14:53 Найти цитируемый пост)
работает

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

- li создаются прямо в obj, а надо в ul (то есть пропущен шаг ul.appendChild(li[i]) );
- li можно создать один раз, затем клонировать в цикле;
- свойство innerText работает не везде (надо бы createTextNode(), ну, или innerHTML);
- переменная i - глобальная, правильнее сделать её локальной;

Автор: AKS 28.12.2006, 15:58
Цитата

пропущен шаг ul.appendChild(li[i])

И еще ма-a-a-ленький шажочек - obj.appendChild(ul). ;)

Автор: Valeria 28.12.2006, 16:26
здорово! буду доделывать! а еще есть вопрос,если мне надо сделать не просто список,а чтобы это были ссылки
таким же образом, создавать элемент A?! внутри списка?

Добавлено @ 16:32 
Код

function newList()
            {
            var obj = document.getElementById('list1');
            var ul = document.createElement('ul');
            var li; 
            var a;
            for(var i = 0; i < list.length; i++) {
            li = document.createElement('li');
            a = document.createElement('a');
            a.innerHTML = list[i];            
            //li.innerText = list[i];
            li.appendChild(a);
            ul.appendChild(li); 
            }           
            obj.appendChild(ul);            
            }

вот как-то так,только ссылки не получаются. что не так? smile

Добавлено @ 16:39 
все,поняла,свойство забыла a.href = '#';  smile 

Автор: Aliance 8.1.2007, 11:06
со всем согласен, почему так не понимаю:
Цитата(Zeroglif @  28.12.2006,  16:23 Найти цитируемый пост)
- переменная i - глобальная, правильнее сделать её локальной;

Автор: AKS 8.1.2007, 16:03
Aliance, а в чем вопрос - почему "переменная i - глобальная", или же почему "правильнее сделать её локальной"?

Автор: solenko 8.1.2007, 18:12
AKS, у меня тоже возник тот же вопрос -- "переменная i - глобальная?". Кажется var используется как раз для создания локальных переменых.

Автор: AKS 8.1.2007, 19:01
solenko, Вам все правильно кажется. Просто "переменная i - глобальная" - это цитата комментария, который был адресован второму посту в этой теме. Посмотрите, там i как раз без var, и, как результат, "глобализация"...
Ну и заодно уж можно написать, что в этом случае локальная переменная "правильней" хотя бы потому, что просто (именно просто, а если не просто - то есть несколько ньансов) нет совершенно никакой необходимости создавать глобальную переменную. Хотя это случается ("создание глобальных переменных"), конечно же, не умышленно, а по каким-либо другим (неизвестным мне) причинам...

Автор: Zeroglif 8.1.2007, 20:59
Цитата(solenko @  8.1.2007,  18:12 Найти цитируемый пост)
Кажется var используется как раз для создания локальных переменых.

Ключевое слово var обязательно используется для объявления переменной (любой). Строго говоря, если нет var, то нет и объявления переменной (это если не расширять термин "переменная" на всё подряд, а оставаться в рамках термина "variable" в ECMAScript). Что касается т.н. "как-бы вроде объявления" глобальной переменной без использования var, то в этом случае на выходе мы получим новое свойство глобального объекта. При "настоящем объявлении" мы тоже получаем новое свойство глобального объекта, отсюда и повелось считать эти две операции равнозначными, хотя на самом деле есть ключевые различия - разные атрибуты, разное время создания, разные глобальные объекты в IE и т.д., да и вообще это разные операции...

Локальность и глобальность каждый может понимать по-разному, в стандарте чёткого определения нет, есть только туманное разъяснение, что переменная или связана/определена "with function-local scope in that function" (читай, что локальна по отношению к своей функции), или связана/определена "with global scope" (читай, глобальна). В принципе, этого определения будет достаточно, если понимать, что такое объекты в лексическом окружении ("scope chain"), и как происходит разрешение идентификаторов ("identifier resolution") с учётом вложенных функций и прочих особенностей вроде "with" и т.п.  

Цитата(Aliance @  8.1.2007,  11:06 Найти цитируемый пост)
со всем согласен, почему так не понимаю

Максимально ограничивать область видимости и время жизни переменных - есть наиполезнейшее занятие, сводящее к минимуму всё плохое (наложение имён, ошибки и проч.). Кроме того, даже если кропотливо следить за глобальными переменными, всегда остаётся проблема оптимизации. Чем сильнее связана переменная, тем проще (быстрее) до неё добраться, http://www.404.googlepages.com/Z-tests-local-vs-global.html.

Автор: vasac 8.1.2007, 21:36
Цитата(Zeroglif @  8.1.2007,  20:59 Найти цитируемый пост)
разное время создания

Прошу прощения, а в чем это выражается?

Автор: AKS 8.1.2007, 22:08
vasac
 
Цитата

в чем это выражается

В действиях, которые предпринимаются движком.
Zeroglif, согласитесь, как красноречиво описал Эрик вот http://blogs.msdn.com/ericlippert/archive/2006/05/04/590030.aspx работу интерпретатора по данной теме - я читал и наслаждался!

P.S.
Пользуясь случаем, надо бы поблагодарить Zeroglif'a за хорошую тему - http://forum.vingrad.ru/topic-120066.html, а остальных призвать читать все то, что упомянутый участник форума любезно предоставляет в этой теме...

Автор: Zeroglif 8.1.2007, 22:53
Цитата(vasac @  8.1.2007,  21:36 Найти цитируемый пост)
Прошу прощения, а в чем это выражается?

Переменные (var-ы) создаются на "нулевой строке" со значением undefined. С 1-ой же строки к ним можно обращаться со всеми вытекающими. Свойства глобального объекта создаются в рантайм при условии, что им присваивается значение, только после этого к ним можно обращаться (это просто результат абстрактной операции PutValue, ES 8.7.2). Все реализации ECMAScript обязаны следовать этому, например, по ссылке, которую привёл AKS, поясняется, как именно это cделано в JScript.

Код

try{
    alert(x); // уже живёт со значением undefined
    alert(y); // нет в природе
} catch(e) {
    alert(e);
}
var x = 1;   // var x прочитано на "нулевой строке", а x=1 сейчас
y = 2;       // свойство глобального объекта появляется только сейчас

Автор: Zeroglif 8.1.2007, 23:25
Интересная весчь получается. Попробовал я ради интереса проверить, насколько медленнее обращение к глобальной переменной из глубин, если тупо увеличить число вложенных функций, допустим, до пяти. И получилось, что IE и Opera вполне адекватно и быстро работают (вложенность почти не влияет, т.к. объекты (кроме глобального), у которых ищется переменная - "пустые"), а gecko-браузеры (FF, SeaMonkey) странно тормозят... Это у меня одного так или подтвердите? http://www.404.googlepages.com/Z-tests-local-vs-global2.html.

Автор: vasac 8.1.2007, 23:34
Zeroglif, да, действительно:
Код

FF:    78 656 1360 1969 2329
IE:    78  94  109    125   140
Opera: 78  78  79      78      78  — !!

Автор: AKS 9.1.2007, 09:51
У меня примерно так же, как у vasac. Заодно еще и в Opera 7 глянул - лишь чуть-чуть медленнее, чем 9-ка, но, однако, хороша эта Opera! 
А есть над чем подумать сегодня - почему же в FF такие результаты. Надо бы это к чему-то подвести...

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)