07.DOM Operations Homework


8

Не видях, някой да е поствал домашното..1задача,  колкото толкова ;д

На който му е нужна може да я намери ТУК :)




Отговори



2
Ето го и моето решение
До автора: имаш грешка при after-a.

EDIT: Колега, линка , който си дал е невалиден в момента.

от Ilian_Iliev_2 (1043 точки)


1
Благодаря, оправен е вече :)

от lllevski (1431 точки)


2
Едно решение и от мен - цък

от Daniela_Popova (1125 точки)


0
Някой може ли да обясни как се подкарват тестовете и mocha защото от написаните 5 реда в github нищо не разбрах.



5

https://telerikacademy.com/Courses/LectureResources/Video/6488/%D0%92%D0%B8%D0%B4%D0%B5%D0%BE-15-%D1%8E%D0%BD%D0%B8-2015-%D0%94%D0%BE%D0%BD%D1%87%D0%BE

този линк от миналата година може да е полезен


от georgivelikov (1844 точки)

0
Мерси за линка, аз също не разбрах от 5-те реда какво тр да се направи.

от Moris (75 точки)


0

Здравейте!

Ето го кода за 58 точки.

 function solve() {

    return function(id, array) {


   if (toString.call(id) !== "[object String]" && document.getElementsByTagName(id)[0] === undefined) {
            alert("The provided first parameter is neither string or existing DOM element");
        }

        if (document.getElementById(id) === null) {
            throw new Error("there is no element that has such an id");
        }

        if (arguments.length < 2) {
            alert("Any of the function params is missing");
        }

        if (toString.call(id) !== "[object String]" || toString.call(array) !== "[object Array]") {
            alert("Any of the function params is not as described");
        }

        for (var i = 0; i < array.length; i++) {
            if (toString.call(array[i]) !== "[object String]" || toString.call(array[i]) !== "[object Number]") {
              element.HTML = "";
            }
        }

      if(document.getElementById(id) !== null) {
        var element = document.getElementById(id);
      }
        element.innerHTML = "";

        for (var i = 0; i < array.length; i++) {
            var div = document.createElement("div");;
            div.innerHTML = array[i];
            element.appendChild(div);
        }
    }
  }




0

Здравей, вдигнах ги до 76 точки само като замених || с && в 

for (i = 0; i < array.length; i++) {
            if (toString.call(array[i]) !== "[object String]" || toString.call(array[i]) !== "[object Number]") {
              element.innerHTML = "";
            }
}

Обърни внимание, че си изписал element.HTML вместо element.innerHTML в същия цикъл. За жалост само до тук успях да стигна, сориии 


от Daniela_Popova (1125 точки)


0
Искам да задам един въпрос свързан с Unit Testing-а на DOM JavaScript.

Дали е достатъчно адекватно да си имам един HTML файл , който в body-то си дефинира тестови html обекти и след това съдържа <script> tag  където дефинира и тества функционалност? Мога най-отгоре и да си load-вам други скриптове нали. Като цяло ми е много лесно да визуализирам проблема така ,та се чудя въобще дали има смисъл да се мъча на конзолата да подкарвам някакви тестове.
Как бихте ме посъветвали?

от Betastate (341 точки)


0
Мисля, че е много добра идея, защото както на предишния изпит предполагам няма да имаме тестовете, така че ще трябва да си ги пишем сами. 

от didexe (122 точки)


0
Аз имам въпрос за самото подкарване на тестове - гледах видео на Дончо но не можах да разбера дали трябва всяко домашно - с папките тестове и таскове да си свялим на кмпа и всеки път да рънваме nps install?Моля за съвет!

от maryakach (47 точки)


1

Здравей, 

Можеш да си свалиш цялото репо - JavaScript-UI-and-DOM - clone или директен download (от зеленото бутонче вдясно в github), аз използвам git GUI и клонирам цялоло репо на моя комп, това се случва само един път, оттам можеш да изтриеш ненужното и да си оставиш само папката с домашното за всеки Topic, но да, за всяко домашно трябва да въведеш npm install, тъй като тестовете за отделните задачи са различни. Важното е да имаш папките tests/tasks и package.json, аз пиша директно в task-1.js, даден ми наготово в tasks. Има опция вместо да си клонираш всичко, не е никак малко като обем, да чекаутнеш отделна папка/файл от репозиторито, разцъкай повече в нета по въпроса, през git Bash (или конзолата/терминала на личния ти комп) става с команда git archive, ето линк с повече инфо - how to checkout only one file from git repo


от Daniela_Popova (1125 точки)

0
Трябва да се свалят, ако искаш да ги подкараш локално. npm install ти тегли всички необходими библиотеки, за да се стартират тестовете. Библиотеки са описани във файла package.json -> dependencies.

от suzunov (321 точки)



0
Някой може ли да разясни условието, нещо не мога да го разбера!



0
Правиш си функция  solve() {  return function(arg1,arg2){...};  }     ,  която call-ваш oт някъде с тестови параметри:   
Var holder = solve();
holder(тестАrg1,тестАrg2);
И като си нагласиш Solve-а си го paste-ваш в БГКодер :)

от Betastate (341 точки)

0
Попитах за разяснение на условието на задачата, а не как се прави функция!




0

Привет, колеги,

На последните слайдове от презентацията за DOM Operations от минали години (може би някой е обърнал внимание) има още няколко задачки за упражнение. Конкретно втората доста ме спъва, това е условието:

      2. Write a script that creates 5 div elements and moves them in circular path with interval of 100 milliseconds.

Успявам да задвижа винаги само последния див, пробвах динамично да сложа дивовете, както и директно да си ги сложа в html файла, опитах със статичен nodeList, после с динамичен...ами нищо :/ Идеята е да се използват знанията до DOM Operations, т.е. без jquery/canvas/svg. Пускам си кода, ако някой има време/желание, нека сподели идеи :)

EDIT: оправих го, всички се движат едновременно, разковничето е да се подаде функция с параметър на setTimeout, ако на някого му е интересно - link


от Daniela_Popova (1125 точки)


1

Здравей,

ровя се в стари домашни и някви кодове ала бала.

Направила си го добре, браво. Ако искаш нещата да се движат плавно обаче,

можеш да ползаваш requestAnimationFrame. Става готино ;)


от Dido_Aint (577 точки)

0
Благодаря за съвета, ще разцъкам и по този начин :)

от Daniela_Popova (1125 точки)


1

Здравейте,

BGCoder константно ми дава Compile time error.

Дори когато пратя

function solve() { return 0; }

и при
function () {return function (element, contents) {};};

Ако някой има съвет, моля давайте :)


от purlantov (197 точки)


1
Може ли още да не са го пуснали? Все пак по програма (аз съм он-line и не съм бил на лекцията вчера) това домашно е за лекцията след 2 дни? Т.е. срокът би трябвало да почне да тече след 2 дни.

от DesertFox (75 точки)

1
Да, има проблем с практиката. Домашните още не са отворени най-вероятно.

от svrakata (591 точки)


0
Ще говоря с Цъки да го оправи BGCodera, със сигурност скоро ще бъде ок! За сега Npm testovete вършат идеална работа. Като цяло няма нужда от някой от ерорите да ги хвърляме защото то само си ги хвърля но е хубаво да си ги документираме. Успех! Ето и 100/100 в бг кодер с Es5 Тук

от IliyaST (251 точки)


0
IliyaST ето ти твоя код малко преработен :) :

module.exports = function () {
  return function (elementcontents) {
    if (typeof element === 'string') {
      element = document.getElementById(element);
    } else if (!(element instanceof HTMLElement)) {
      throw Error('');
    }
    let docFrag = document.createDocumentFragment();
    contents.forEach(x => {
      if (typeof x != 'string' && typeof x != 'number') {
        throw Error('');
      }
      let newEl = document.createElement('div');
      newEl.textContent = x;
      docFrag.appendChild(newEl);
    });
    element.innerHTML = '';
    element.appendChild(docFrag);
  }
};


от dreadlocker (22 точки)


0
Някой може ли да ми помогне да открия грешката в този код Код.

от nivalen292 (273 точки)


1

Има грешка във валидациите. Ако проверяваш  с typeof element !== 'string' и след това || ще ти хвърля грешки дори и да е валиден обект аргумента. Вариант е typeof element !== 'string'  && !(element instanceof HTMLElement).

Тук ако мине тази проверка и не хвърли, трябва да селектираш по element;

!!! тука е по-същественото,че вероятно element е стринг; 

затова ти трябва още една проверка дали е стринг и ако не е

селектираш по nodeName на обекта:

el = document.getElementsByTagName(element.nodeName); //връща масив

el = el[0]; //взимаш си първия елемент от масива, в условието на задачата не е пояснено кой точно търсим 

След това typeof el === null ; typeof винаги се сравнява със стринг, null не е тип данни, ами стойност, така че може да го направиш if(el === null); 

Можеш да си декларираш променливите в началото на функцията и после да си ги преизползваш;

В forEach си писал contents[i], но мисля,че тук се бъркаш с обикновения for цикъл;

forEach е един вид за всеки един елемент от contents прави еди какво си демек това contents[i] ще е x;  x реално се явява всеки един елемент от масива contents;

когато проверяваш дали елементите на масива са  стринг или число ако е с ИЛИ операотра || ще се изключват едно друго, демек ако е стринг ----> не е число, ако е число ----> не е стринг, затова отново оператора && и става:

if(typeof x !== 'string' && typeof x !== 'number') хвърляй грешка;

цялото решение изглежда така:

module.exports = function solve() { return function (element, contents) { let el; if (arguments < 2) { throw "Arguments must be 2"; } if (!(Array.isArray(contents))) { throw "contents is not an array"; } if (typeof element !== "string" && !(element instanceof HTMLElement)) { throw "No DOM Element or string"; } else { if(typeof element === 'string'){ el = document.getElementById(element); if (el === null) { throw "No such id"; } } else { el = document.getElementsByTagName(element.nodeName); el = el[0]; } } contents.forEach(x => { if (typeof x !== "number" && typeof x !== "string") { throw "contents must be number or string"; } }); el.innerHTML = ""; // var df = document.createDocumentFragment(); // for (var i = 0, len = contents.length; i < len; i++) { // divEl = document.createElement("div"); // divEl.innerHTML = contents[i]; // df.appendChild(divEl); // } // el.appendChild(df); contents.forEach(x => { let divEl = document.createElement("div"); divEl.innerHTML = x; el.appendChild(divEl); }); }; };


от svrakata (591 точки)