1

Тема: як працює цей алгоритм??

Соромно признаватись, але я не можу збагнути, як працює цей алгоритм.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Генерация элементов списка</title>
<link rel="stylesheet" type="text/css" href="css/form.css">
<script type="text/javascript">
/* Опишите функцию addYear(), которая аргумент:
        flag - число, указывающее на место добавления нового элемента option:
            0 - в начало списка
            1 - в конец списка
    1. Найдите форму
    2. Определитесь, куда добавлять элемент: в конец, или в начало списка
    3. Определите value последнего элемента списка и увеличьте или уменьшите его на 1
    4. Создайте новый элемент списка
    5. Кроссбраузерно добавьте созданный элемент в начало или конец списка
*/
    function addYear(flag){
        var s = document.forms[0].year;
        var val, o;
        if(flag){
            val = s.options[s.length-1].value*1+1;
            o = new Option(val, val, false, true);
            try{
                s.add(o, null);
            }catch(e){
                s.add(o);
            }
        }else{
            val = s.options[0].value*1-1;
            o = new Option(val, val, false, true);
            try{
                s.add(o, s.options[0]);
            }catch(e){
                s.add(o,0);
            }   
        }
    }
</script>
</head>
<body>
<form action="">
    <fieldset>
        <legend>Изменение элементов списка</legend>
        <div class="block">
            <label for="year"><span>Год рождения</span></label>
            <div class="group">
                <a href="javascript:addYear(0);">-</a>
                <select name="year" id="year">
                    <option value="1970">1970</option>
                    <option value="1971">1971</option>
                    <option value="1972">1972</option>
                    <option value="1973">1973</option>
                    <option value="1974">1974</option>
                    <option value="1975">1975</option>
                </select>
                <a href="javascript:addYear(1);">+</a>
            </div>
        </div>
    </fieldset>
</form>
</body>
</html>

Звичайнісінький електрик, як наприклад, Лех Валенса.

2

Re: як працює цей алгоритм??

Там є коментар болгарською. Гугл транслейт має подужати.

Подякували: FakiNyan, LoganRoss2

3 Востаннє редагувалося elektryk (20.07.2017 11:00:29)

Re: як працює цей алгоритм??

koala написав:

Там є коментар болгарською. Гугл транслейт має подужати.

Не треба ля-ля. У мене була бабця болгарка. Коментар москальський і нічого на пояснює. Я хочу знати покроково, що відбувається.

Звичайнісінький електрик, як наприклад, Лех Валенса.
Подякували: 0xDADA11C71

4

Re: як працює цей алгоритм??

у більшості броузерів є developer tools (зазвичай - клавіша  F12 чи окремий плагін)
мені дуже допомагала влаштована там можливість ставити breakpoints і  покроково відслідковувати виконання javascript коду

Подякували: 0xDADA11C7, FakiNyan, ostap34PHP, bvn, DOP5

5

Re: як працює цей алгоритм??

ping написав:

у більшості броузерів є developer tools (зазвичай - клавіша  F12 чи окремий плагін)
мені дуже допомагала влаштована там можливість ставити breakpoints і  покроково відслідковувати виконання javascript коду

Я хочу дещо інше. Я хочу знати: чому саме так відбувається, чому працюють саме ці рядки, тобто чому відбуваються саме ці переходи. Я намагався замість flag підставляти то нуль то одиницю. Нічого не виходить.

Звичайнісінький електрик, як наприклад, Лех Валенса.

6 Востаннє редагувалося NagarD (25.07.2017 08:44:45)

Re: як працює цей алгоритм??

https://codepen.io/NagarD/pen/OjJrLW

 function addYear(flag){
        var s = document.forms[0].year;               // Отримуємо наш select із dom моделі. document - ввесь документ. forms[0] - перша форма. year - елемент з ідентифікатором year. Тугий шлях, зазвичай вибірку роблять по ідентифікатору, ось так 'var s = year;' і буде теж саме
        var val, o;                                   // допоміжні змінні val - нова дата, o - для нового оптшина
   
console.log(s);                                       // Найкращий друг)
   
        if(flag){                                     // Якщо flag істина, тобто 1 , це виконується коли в фунцію addYear передали 1 - addYear(1)
            val = s.options[s.length-1].value*1+1;    // Формуємо нове значення в випадаючому списку, котре буде на один рік більше за попереднє. Потрібно визначити останній елемент списку. Оскільки індексація елементів початиється з нуля, то останній елемент матиме індекс (кількість_елементів-1). s.options[s.length-1] - саме це і робить - обирає остінній опшин. s.options[s.length-1].value - отримує значення (value) цього опшина = 1975. Оскільки це рядор, помноживши його на 1, зробимо його числом (Якщо йього не зробити, то + буде означати конкатинацію) і інкрементуємо його (додаємо 1). отримуємо наступне значення для опшина 1976
            o = new Option(val, val, false, true);    // Створюємо новий опшин  для випадаючого списку. з назвою 1976 і таким сами значенням. Буде - <option value="1975">1975</option>. Детальніше про Option тут https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement/Option
            try{                                      // Якщо опшин вдалося створити
                s.add(o, null);                       // Додаємо його в dom модель. Другий аргумент це індекс. Якщо null, або нічого не вказано - додаємо в кінець списка.
            }catch(e){                                // Якщо була помилка, реагуємо на неї
                s.add(o);                             // Але тут ми чомусь робимо те, що до цього не спрацювало s.add(o, null) ідентичне s.add(o)
            }
        }else{                                        // Якщо addYear(0) - все теж саме, що і для 1, тільки вже значення декрементуємо і додаємо в початок списку s.add(o, s.options[0]);
            val = s.options[0].value*1-1;
            o = new Option(val, val, false, true);
            try{
                s.add(o, s.options[0]);
            }catch(e){
                s.add(o,0);
            }    
        }
    }
Прихований текст
Інформацію надано не для відновлення сайту Бузіни!
css.in.ua - веб-розробка
Подякували: 0xDADA11C7, ostap34PHP, Monolith, elektryk4

7

Re: як працює цей алгоритм??

Ага, значить рядок 19 чи 11 додають опшини. А ось що таке опшини і як з ними боротись я не зрозумів, бо посилання на москальський сайт.

Звичайнісінький електрик, як наприклад, Лех Валенса.

8

Re: як працює цей алгоритм??

Опшин це запис вимови українською англійского слова Option

Говорила баба діду: «Я поїду к Білодіду, Ізучу двомовну мову І вернусь обратно знову». А дід бабі: «Не *изди, К Білодіду нєт їзди, — Туди не ходять поїзди»
Подякували: NagarD1

9

Re: як працює цей алгоритм??

                <select name="year" id="year">
                    <option value="1970">1970</option>
                    <option value="1971">1971</option>
                    <option value="1972">1972</option>
                    <option value="1973">1973</option>
                    <option value="1974">1974</option>
                    <option value="1975">1975</option>        // option = опшин :)
                </select>
css.in.ua - веб-розробка

10

Re: як працює цей алгоритм??

Тобто опшин це звичайнісінький тег??

Звичайнісінький електрик, як наприклад, Лех Валенса.

11

Re: як працює цей алгоритм??

так

Говорила баба діду: «Я поїду к Білодіду, Ізучу двомовну мову І вернусь обратно знову». А дід бабі: «Не *изди, К Білодіду нєт їзди, — Туди не ходять поїзди»