redexp / geekhub-2016-js Goto Github PK

View Code? Open in Web Editor NEW

6.0 6.0 1.0 3 KB

GeekHub 2016 JS

License: MIT License

geekhub-2016-js's People

Contributors

Stargazers

Watchers

Forkers

romarionest

geekhub-2016-js's Issues

React - redux без webpacka

В интернете много инструкций как работать с Redux. Ну в составе webpacka.

function result_monitor(state=[], action) {
    switch (action.type) {
        case 'ADD':
            return  state.concat(action.result);
        case 'CLEAR':
            return  [];
        default:
            return state
    }
}

window.store = Redux.createStore(result_monitor);
window.Provider = ReactRedux.Provider;

//result
class Result extends React.Component {

    constructor(props) {
        super(props);
        this.state = {

        };
        this.add = this.add.bind(this);
        this.clear = this.clear.bind(this);

    }


    componentWillMount(){
    //Тут можно подписаться на события
        
    }

    add(){
        window.store.dispatch({type: "ADD",result: new Date()});
    }

    clear(){
        window.store.dispatch({type: "CLEAR"});
    }


    render() {


       return <div>
           <h1>Хранилище Редукс:</h1>

           <button id="add_redux" onClick={this.add}>Добавить</button>
           <button id="clear_redux" onClick={this.clear}>Очистить</button>
           {
               this.props.result.map(function(item, index){
                   return <div key={index} > {item.toString()}</div>
               })
           }

       </div>

    }

}
//Функция, которая вернет состояние хранилища
//Если редусов несколько, сдесь можно указать какой имено нужно
function mapStateToProps(state) {
    return { result: state };
}
//соединяем хранилище и компонент
window.reduxtest = ReactRedux.connect(mapStateToProps)(Result);

ReactDOM.render(
    <div>
    <window.Provider store = {window.store}>{/*Добавяем хранилище*/}
    <window.reduxtest  />{/*Добавяем полученый компонент */}
    </window.Provider>
    </div>,
    document.getElementById("root")
);

урок

Привіт. Завтра як завжди?

Чому по обидві сторони змінної "х" потрібно ставити знак "+", щоб працював код?

$('#center').on('click', function (event) {
        var x = Math.ceil($('li').length / 2);
        console.log(x);
        $('li:nth-child('+ x +')').after('<li>3333</li>');
    });

Ошибка при попытке создания элемента DOM

Добрый день! Столкнулся с проблемой.
Просто код :

var test = document.createElement('p');
test.innerText="test";
var a =document.body.appendChild(test);`

При выполнении:
Uncaught TypeError: Cannot read property 'appendChild' of null

Ну если его запустить в консоли, все отлично отрабатывает:

var test = document.createElement('p');
test.innerText="test";
var a =document.body.appendChild(test);
"test"

Проблема у використанні end() Jquery

Є задача:
"Получите все li на странице. Четные из полученных сделайте пустыми, если у них нет класса .www, а нечетные удалите (не обращая внимание на класс). Пустым li добавьте красную границу. Решите все одной цепочкой."

Половина рішення:

$('li').filter(':odd').not('.wwww').empty().css('border', '1px solid red').end()

Якщо я правильно розумію end() повинен був мені повернути список $('li') , а він мені повертає відфільтрований список filter(':odd'). Що я не так роблю і де підстава?:)

Замыкание, область видимости

Яким чином render став виконувати ті ж операції що і drawChart? Коли я намагаюся відтворити щось подібне в консолі, мені видає помилку:"рендер не являється функцією". Буду вдячний за підказку.

function module1 () {
    var chart = new Chart();

    function drawChart(arr) {
        chart.draw(arr);
    }
    module2(drawChart);
}
//============================
function module2(render) {
  var nambers = [1, 2, 3, 4];

  render(numbers);
}

Наступне заняття.

Привіт. Мою почту забанили. Коли і де буде наступне заняття?

Вопрос по домашним заданиям.

Здравствуйте. Скажите пожалуйста, а домашние задания Вы будете выкладывать? Спасибо.

Незрозумілий принцип роботи setTimeout() в поєднанні з each().

Є така задача:
Даны текстовые инпуты. Первому поставьте текст 1, через секунду второму поставьте текст 2, еще через секунду третьему текст 3 и так далее.

Я її зробив таким чином і все працює:

$('input').each(function (i, elem) {
    setTimeout(function() {
        $(elem).val(i+1);
    }, i*1000);
})

Але не зрозуміло чому не працює без примноження часу затримки на i?
І чи є більш раціональні прийоми використання setTimeout() з each() ?

кому важко придумувати завдання з jquery

http://theory.phphtml.net/tasks/javascript/jquery/praktika-na-otrabotku-biblioteki-jquery.html

Поиск в массиве, элементы которого объекты(json)

Добрый день! Нужна идея,или направить в нужное русло. Есть массив полученный запросом из сервера, элементы массива json объекты. Пример кода:

var tabl = [];
for(i=0;i<10;i++){ 
var a={}; 
a.kod = 100+i; 
a.name = "Element "+(100+i);
 tabl.push(a);}
//Результат:
//[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
//tabl[0]
//Object {kod: 100, name: "Element 100"}
//tabl[5]
//Object {kod: 105, name: "Element 105"}

Как правильно организовать поиск элемента, допустим с значением kod=105;
Прямой перебор каждый раз не годиться. Записей порядка 17000.
Спасибо!

React js связь между компонентами

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

//Пример звязи между разными компонентами
window.ee = new EventEmitter();

class Hello1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {new_element: "Данные с блока №1",data: ''};
  }

     componentDidMount() {
         var self = this;
         window.ee.emit('Hello2.add', self.state.new_element);
      }

    componentWillMount(){
        var self = this;
        window.ee.addListener('Hello1.add', function(item) {
            self.setState({data: item});
        });

    }


    on_Change(e) {
        this.setState({new_element:e.target.value});
        window.ee.emit('Hello2.add', e.target.value);
    }


  render() {
    return <div>
        <h1>Блок №1</h1>
        <label>Передать в дургой блок</label>
        <input defaultValue={this.state.new_element} onChange={this.on_Change.bind(this)} />
        <p style={{ color: "green"}}>В пределах своего блока:</p>
        <p>{this.state.new_element}</p>
        <p style={{ color: "blue"}}>Данные с другого блока:</p>
        {this.state.data}

    </div>
  }
}

class Hello2 extends React.Component {

  constructor(props) {
    super(props);
    this.state = {new_element: "Данные с блока №2",data: ''};
  }

  on_Change(e) {
   this.setState({new_element:e.target.value});
   window.ee.emit('Hello1.add', e.target.value);
  }


    componentDidMount() {
        var self = this;
        window.ee.emit('Hello1.add', self.state.new_element);
    }

    componentWillMount(){
        var self = this;
        window.ee.addListener('Hello2.add', function(item) {
            self.setState({data: item});
        });

    }


    render() {
    return <div>
      <h1>Блок №2</h1>
      <label>Передать в первый блок</label>
      <input defaultValue={this.state.new_element} onChange={this.on_Change.bind(this)}/>
      <p style={{ color: "green"}}>В пределах своего блока:</p>
      <p>{this.state.new_element}</p>
      <p style={{ color: "blue"}}>Данные с первого блока:</p>
        {this.state.data}
    </div>;
  }
}

ReactDOM.render(
    <div>
      <Hello1 />
      <hr></hr>
      <Hello2 />
    </div>  ,
    document.getElementById("root")
);

Скачать проект:
https://yadi.sk/d/UrmXVjpZ3GUoBF
Запустить:
npm start